prettier

frontend/app/(main)/access-logs/components/access-log-filters.tsx

@@ -1,12 +1,18 @@
 'use client';
 
-import {Search} from 'lucide-react';
+import { Search } from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import type {AccessLogTab, SearchDraft} from './access-log-utils';
-import {PAGE_SIZE_OPTIONS} from './access-log-utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { AccessLogTab, SearchDraft } from './access-log-utils';
+import { PAGE_SIZE_OPTIONS } from './access-log-utils';
 
 interface AccessLogFiltersProps {
   tab: AccessLogTab;

frontend/app/(main)/access-logs/components/cleanup-dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import {useState} from 'react';
-import {Loader2} from 'lucide-react';
+import { useState } from 'react';
+import { Loader2 } from 'lucide-react';
 
 import {
   AlertDialog,
@@ -12,10 +12,16 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 const CLEANUP_PRESETS = [3, 7, 30];
 

frontend/app/(main)/admin/database/components/cache-manager.tsx

@@ -1,16 +1,22 @@
 'use client';
 
 import * as React from 'react';
-import {useCallback, useEffect, useState} from 'react';
-import {toast} from 'sonner';
-import {HardDrive, RefreshCw, Trash2} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { HardDrive, RefreshCw, Trash2 } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {Button} from '@/components/ui/button';
-import {Skeleton} from '@/components/ui/skeleton';
-import {Label} from '@/components/ui/label';
-import {Input} from '@/components/ui/input';
-import {Switch} from '@/components/ui/switch';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
 import {
   Dialog,
   DialogContent,
@@ -19,7 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import type {CacheStatus} from '@/lib/services/admin';
+import type { CacheStatus } from '@/lib/services/admin';
 import services from '@/lib/services';
 
 /**

frontend/app/(main)/admin/demo/tabs/controls-tab.tsx

@@ -4,13 +4,25 @@
 'use client';
 
 import * as React from 'react';
-import {Code} from 'lucide-react';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {Label} from '@/components/ui/label';
-import {Input} from '@/components/ui/input';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import {Checkbox} from '@/components/ui/checkbox';
-import {Button} from '@/components/ui/button';
+import { Code } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
 
 export function ControlsTab() {
   const [formData, setFormData] = React.useState({

frontend/app/(main)/admin/demo/tabs/dashboard-tab.tsx

@@ -4,9 +4,9 @@
 'use client';
 
 import * as React from 'react';
-import {Code, Cpu, Database, HardDrive} from 'lucide-react';
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
-import {Progress} from '@/components/ui/progress';
+import { Code, Cpu, Database, HardDrive } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
 
 export function DashboardTab() {
   return (

frontend/app/(main)/admin/files/components/file-list.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {AnimatePresence, motion} from 'motion/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'motion/react';
 import {
   Download,
   Eye,
@@ -17,13 +17,20 @@ import {
   Upload,
   X,
 } from 'lucide-react';
-import {toast} from 'sonner';
+import { toast } from 'sonner';
 
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Badge} from '@/components/ui/badge';
-import {Checkbox} from '@/components/ui/checkbox';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -34,10 +41,16 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,} from '@/components/ui/sheet';
-import {FileImagePreview} from '@/components/common/file-image-preview';
-import services, {formatFileSize} from '@/lib/services';
-import type {Upload as UploadRecord} from '@/lib/services/upload/types';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { FileImagePreview } from '@/components/common/file-image-preview';
+import services, { formatFileSize } from '@/lib/services';
+import type { Upload as UploadRecord } from '@/lib/services/upload/types';
 
 /* ─── 工具函数 ─────────────────────────────────────────── */
 

frontend/app/(main)/admin/files/components/file-stats.tsx

@@ -1,12 +1,35 @@
 'use client';
 
 import * as React from 'react';
-import {useQuery} from '@tanstack/react-query';
-import {Database, Files, HardDrive, Info, Loader2, TrendingUp, Upload,} from 'lucide-react';
-import {Area, AreaChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis,} from 'recharts';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Database,
+  Files,
+  HardDrive,
+  Info,
+  Loader2,
+  TrendingUp,
+  Upload,
+} from 'lucide-react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
 
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import {
   ChartConfig,
   ChartContainer,
@@ -15,7 +38,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
-import services, {formatFileSize} from '@/lib/services';
+import services, { formatFileSize } from '@/lib/services';
 
 const categoryMap: Record<string, string> = {
   图片: 'images',

frontend/app/(main)/admin/logs/components/access-analytics.tsx

@@ -16,19 +16,37 @@ limitations under the License.
 
 'use client';
 
-import {useCallback, useEffect, useState} from 'react';
-import {BarChart3, Globe, RefreshCw, TrendingUp, Users, XCircle,} from 'lucide-react';
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from 'recharts';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  BarChart3,
+  Globe,
+  RefreshCw,
+  TrendingUp,
+  Users,
+  XCircle,
+} from 'lucide-react';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 
 import services from '@/lib/services';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {Badge} from '@/components/ui/badge';
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from '@/components/ui/chart';
-import {Spinner} from '@/components/ui/spinner';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { Spinner } from '@/components/ui/spinner';
 
 interface TrendData {
   date: string;

frontend/app/(main)/admin/logs/components/access-logs.tsx

@@ -16,22 +16,44 @@ limitations under the License.
 
 'use client';
 
-import {useMemo, useState} from 'react';
-import {useQuery} from '@tanstack/react-query';
-import {toast} from 'sonner';
-import {format} from 'date-fns';
-import {Activity, ChevronLeft, ChevronRight, Copy, Eye, RotateCcw, Search, XCircle,} from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+import {
+  Activity,
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Eye,
+  RotateCcw,
+  Search,
+  XCircle,
+} from 'lucide-react';
 
 import services from '@/lib/services';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {Badge} from '@/components/ui/badge';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle,} from '@/components/ui/sheet';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 
 interface AccessLog {
   id: string;

frontend/app/(main)/admin/logs/components/app-logs.tsx

@@ -16,15 +16,15 @@ limitations under the License.
 
 'use client';
 
-import {memo, useCallback, useEffect, useRef, useState} from 'react';
-import {useVirtualizer} from '@tanstack/react-virtual';
-import {toast} from 'sonner';
-import {ArrowDown, ChevronUp, Loader2} from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { toast } from 'sonner';
+import { ArrowDown, ChevronUp, Loader2 } from 'lucide-react';
 
 import services from '@/lib/services';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {Button} from '@/components/ui/button';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Button } from '@/components/ui/button';
 
 interface LogEntry {
   index: number;

frontend/app/(main)/admin/push/components/events-tab.tsx

@@ -4,18 +4,37 @@
 'use client';
 
 import * as React from 'react';
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {toast} from 'sonner';
-import {ChevronDown, Edit2, Layers, Loader2, Plus, Trash2,} from 'lucide-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import {
+  ChevronDown,
+  Edit2,
+  Layers,
+  Loader2,
+  Plus,
+  Trash2,
+} from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Textarea} from '@/components/ui/textarea';
-import {Switch} from '@/components/ui/switch';
-import {Badge} from '@/components/ui/badge';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from '@/components/ui/tooltip';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import {
   Dialog,
   DialogContent,
@@ -24,17 +43,31 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import {Checkbox} from '@/components/ui/checkbox';
-import {Popover, PopoverContent, PopoverTrigger,} from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
 
 import services from '@/lib/services';
-import type {CreatePushEventRequest, PushEvent, UpdatePushEventRequest,} from '@/lib/services/push';
-import {PushService} from '@/lib/services/push';
+import type {
+  CreatePushEventRequest,
+  PushEvent,
+  UpdatePushEventRequest,
+} from '@/lib/services/push';
+import { PushService } from '@/lib/services/push';
 
 export function EventsTab() {
   const queryClient = useQueryClient();

frontend/app/(main)/admin/users/components/create-user-modal.tsx

@@ -1,13 +1,19 @@
 'use client';
 
-import {useEffect, useState} from 'react';
-import {Button} from '@/components/ui/button';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Switch} from '@/components/ui/switch';
-import {useAdminUsers} from '@/contexts/admin-users-context';
-import type {CreateUserRequest} from '@/lib/services/admin';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import type { CreateUserRequest } from '@/lib/services/admin';
 
 const emptyForm: CreateUserRequest = {
   username: '',

frontend/app/(main)/admin/users/components/edit-user-modal.tsx

@@ -1,14 +1,20 @@
 'use client';
 
-import {useEffect, useState} from 'react';
-import {Button} from '@/components/ui/button';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Switch} from '@/components/ui/switch';
-import {useAdminUsers} from '@/contexts/admin-users-context';
-import {useAuth} from '@/components/providers/auth-provider';
-import type {AdminUser} from '@/lib/services/admin';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import { useAuth } from '@/components/providers/auth-provider';
+import type { AdminUser } from '@/lib/services/admin';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,7 +25,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Loader2} from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 
 interface EditUserForm {
   nickname: string;

frontend/app/(main)/components/dashboard/capacity-trend-chart.tsx

@@ -1,10 +1,16 @@
 'use client';
 
-import {TrendChart} from '@/components/data/trend-chart';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import type {CapacityTrendPoint} from '@/lib/services/openflare';
+import { TrendChart } from '@/components/data/trend-chart';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import type { CapacityTrendPoint } from '@/lib/services/openflare';
 
-import {formatPercent, formatTrendHour} from './dashboard-utils';
+import { formatPercent, formatTrendHour } from './dashboard-utils';
 
 export function CapacityTrendChart({
   points,

frontend/app/(main)/components/dashboard/distribution-rank-charts.tsx

@@ -1,8 +1,17 @@
 'use client';
 
-import {RankChart} from '@/components/data/rank-chart';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import type {DistributionItem, TrafficDistributions,} from '@/lib/services/openflare';
+import { RankChart } from '@/components/data/rank-chart';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import type {
+  DistributionItem,
+  TrafficDistributions,
+} from '@/lib/services/openflare';
 
 function toRankItems(items: DistributionItem[]) {
   return items.map((item) => ({

frontend/app/(main)/components/dashboard/geo-distribution-list.tsx

@@ -1,12 +1,18 @@
 'use client';
 
-import {Globe2} from 'lucide-react';
+import { Globe2 } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {Progress} from '@/components/ui/progress';
-import type {DistributionItem} from '@/lib/services/openflare';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import type { DistributionItem } from '@/lib/services/openflare';
 
-import {formatCompactNumber} from './dashboard-utils';
+import { formatCompactNumber } from './dashboard-utils';
 
 export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
   const sortedItems = [...items]

frontend/app/(main)/config-versions/components/cleanup-dialog.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import {useEffect} from 'react';
-import {zodResolver} from '@hookform/resolvers/zod';
-import {Loader2} from 'lucide-react';
-import {useForm} from 'react-hook-form';
-import {z} from 'zod';
+import { useEffect } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import {
   AlertDialog,
@@ -15,9 +15,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 const cleanupSchema = z.object({
   keepCount: z.number().int().min(3, '最少保留 3 个历史快照'),

frontend/app/(main)/config-versions/components/diff-dialog.tsx

@@ -1,11 +1,24 @@
 'use client';
 
-import {Loader2} from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 
-import {Badge} from '@/components/ui/badge';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import type {ConfigDiffResult} from '@/lib/services/openflare';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { ConfigDiffResult } from '@/lib/services/openflare';
 
 interface DiffDialogProps {
   open: boolean;

frontend/app/(main)/nodes/components/agent-update-dialog.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import {useState} from 'react';
-import {useQuery} from '@tanstack/react-query';
-import {ExternalLink, Loader2} from 'lucide-react';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { ExternalLink, Loader2 } from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -13,12 +13,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {formatDateTime} from '@/lib/utils';
-import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel,} from '@/lib/services/openflare';
-import {NodeService} from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
+import type {
+  NodeAgentReleaseInfo,
+  NodeItem,
+  ReleaseChannel,
+} from '@/lib/services/openflare';
+import { NodeService } from '@/lib/services/openflare';
 
-import {NodeStatusBadge} from './node-status-badge';
-import {formatRelativeTime, getErrorMessage} from './node-utils';
+import { NodeStatusBadge } from './node-status-badge';
+import { formatRelativeTime, getErrorMessage } from './node-utils';
 
 export function AgentUpdateDialog({
   open,

frontend/app/(main)/nodes/components/disk-io-trend-chart.tsx

@@ -1,10 +1,19 @@
 'use client';
 
-import {TrendChart} from '@/components/data/trend-chart';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import type {DiskIOTrendPoint} from '@/lib/services/openflare';
+import { TrendChart } from '@/components/data/trend-chart';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import type { DiskIOTrendPoint } from '@/lib/services/openflare';
 
-import {formatBytes, formatTrendHour,} from '../../components/dashboard/dashboard-utils';
+import {
+  formatBytes,
+  formatTrendHour,
+} from '../../components/dashboard/dashboard-utils';
 
 export function DiskIOTrendChart({
   points,

frontend/app/(main)/nodes/components/distribution-list.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import {Progress} from '@/components/ui/progress';
+import { Progress } from '@/components/ui/progress';
 
-import {formatCompactNumber} from '../../components/dashboard/dashboard-utils';
+import { formatCompactNumber } from '../../components/dashboard/dashboard-utils';
 
 export function DistributionList({
   items,

frontend/app/(main)/nodes/components/edge-node-detail.tsx

@@ -1,11 +1,21 @@
 'use client';
 
 import Link from 'next/link';
-import {useRouter} from 'next/navigation';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {useState} from 'react';
-import {Activity, Cpu, FileText, Fingerprint, Package, RefreshCw, RotateCcw, Trash2, Upload,} from 'lucide-react';
-import {toast} from 'sonner';
+import { useRouter } from 'next/navigation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import {
+  Activity,
+  Cpu,
+  FileText,
+  Fingerprint,
+  Package,
+  RefreshCw,
+  RotateCcw,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import { toast } from 'sonner';
 
 import {
   AlertDialog,
@@ -17,17 +27,25 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {formatDateTime} from '@/lib/utils';
-import type {NodeAgentReleaseInfo, NodeItem, ReleaseChannel,} from '@/lib/services/openflare';
-import {NodeService} from '@/lib/services/openflare';
+import { Button } from '@/components/ui/button';
+import { formatDateTime } from '@/lib/utils';
+import type {
+  NodeAgentReleaseInfo,
+  NodeItem,
+  ReleaseChannel,
+} from '@/lib/services/openflare';
+import { NodeService } from '@/lib/services/openflare';
 
-import {AgentUpdateDialog} from './agent-update-dialog';
-import {NodeDetailShell} from './node-detail-shell';
-import {NodeErrorBanner, NodeInfoRow, NodeSectionCard,} from './node-detail-primitives';
-import {NodeEditorDialog} from './node-editor-dialog';
-import {NodeObservability} from './node-observability';
-import {NodeStatusBadge} from './node-status-badge';
+import { AgentUpdateDialog } from './agent-update-dialog';
+import { NodeDetailShell } from './node-detail-shell';
+import {
+  NodeErrorBanner,
+  NodeInfoRow,
+  NodeSectionCard,
+} from './node-detail-primitives';
+import { NodeEditorDialog } from './node-editor-dialog';
+import { NodeObservability } from './node-observability';
+import { NodeStatusBadge } from './node-status-badge';
 import {
   formatRelativeTime,
   getApplyLabel,

frontend/app/(main)/pages/components/deployment-upload-dialog.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import {useRef, useState} from 'react';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {Loader2, UploadCloud} from 'lucide-react';
-import {toast} from 'sonner';
+import { useRef, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, UploadCloud } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -14,13 +14,18 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Progress} from '@/components/ui/progress';
-import {PagesService} from '@/lib/services/openflare';
-import {cn} from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Progress } from '@/components/ui/progress';
+import { PagesService } from '@/lib/services/openflare';
+import { cn } from '@/lib/utils';
 
-import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey,} from './pages-utils';
+import {
+  deploymentsQueryKey,
+  formatBytes,
+  projectQueryKey,
+  projectsQueryKey,
+} from './pages-utils';
 
 interface DeploymentUploadDialogProps {
   open: boolean;

frontend/app/(main)/proxy-routes/detail/components/auth-section.tsx

@@ -1,19 +1,33 @@
 'use client';
 
-import {useEffect} from 'react';
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useForm} from 'react-hook-form';
-import {toast} from 'sonner';
-import {z} from 'zod';
+import { useEffect } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
 
-import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
-import {Input} from '@/components/ui/input';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import type {ProxyRouteItem} from '@/lib/services/openflare';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { ProxyRouteItem } from '@/lib/services/openflare';
 
-import {proxyRouteFormIds} from '../helpers';
-import {useRouteSectionSave} from '../hooks/use-route-section-save';
-import {SectionShell} from './section-shell';
+import { proxyRouteFormIds } from '../helpers';
+import { useRouteSectionSave } from '../hooks/use-route-section-save';
+import { SectionShell } from './section-shell';
 
 const authSchema = z
   .object({

frontend/app/(main)/proxy-routes/detail/components/cache-section.tsx

@@ -1,20 +1,37 @@
 'use client';
 
-import {useEffect} from 'react';
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useForm} from 'react-hook-form';
-import {z} from 'zod';
+import { useEffect } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
-import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import {Switch} from '@/components/ui/switch';
-import {Textarea} from '@/components/ui/textarea';
-import type {ProxyRouteItem} from '@/lib/services/openflare';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import type { ProxyRouteItem } from '@/lib/services/openflare';
 
-import {linesFromTextarea, validateCacheRules,} from '../../components/helpers';
-import {proxyRouteFormIds} from '../helpers';
-import {useRouteSectionSave} from '../hooks/use-route-section-save';
-import {SectionShell} from './section-shell';
+import {
+  linesFromTextarea,
+  validateCacheRules,
+} from '../../components/helpers';
+import { proxyRouteFormIds } from '../helpers';
+import { useRouteSectionSave } from '../hooks/use-route-section-save';
+import { SectionShell } from './section-shell';
 
 const cacheSchema = z
   .object({

frontend/app/(main)/proxy-routes/detail/components/domain-section.tsx

@@ -1,22 +1,30 @@
 'use client';
 
-import {useEffect, useMemo} from 'react';
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useQuery} from '@tanstack/react-query';
-import {useForm} from 'react-hook-form';
-import {z} from 'zod';
+import { useEffect, useMemo } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
-import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
-import {Input} from '@/components/ui/input';
-import {Switch} from '@/components/ui/switch';
-import type {ProxyRouteItem} from '@/lib/services/openflare';
-import {zoneQueryKey, ZoneService} from '@/lib/services/openflare';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import type { ProxyRouteItem } from '@/lib/services/openflare';
+import { zoneQueryKey, ZoneService } from '@/lib/services/openflare';
 
-import {listAllZoneDomains} from '../../components/helpers';
-import {ZoneDomainSelector} from '../../components/zone-domain-selector';
-import {proxyRouteFormIds} from '../helpers';
-import {useRouteSectionSave} from '../hooks/use-route-section-save';
-import {SectionShell} from './section-shell';
+import { listAllZoneDomains } from '../../components/helpers';
+import { ZoneDomainSelector } from '../../components/zone-domain-selector';
+import { proxyRouteFormIds } from '../helpers';
+import { useRouteSectionSave } from '../hooks/use-route-section-save';
+import { SectionShell } from './section-shell';
 
 const domainSettingsSchema = z.object({
   site_name: z

frontend/app/(main)/waf/components/create-rule-dialog.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -11,9 +11,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {Field, FieldGroup, FieldLabel} from '@/components/ui/field';
-import {Input} from '@/components/ui/input';
-import {Spinner} from '@/components/ui/spinner';
+import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Spinner } from '@/components/ui/spinner';
 
 interface CreateRuleDialogProps {
   open: boolean;

frontend/app/(main)/waf/rules/editor/components/editor-behavior.test.ts

@@ -1,6 +1,6 @@
-import {describe, expect, it} from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import type {WAFRuleGraph} from '@/lib/services/openflare';
+import type { WAFRuleGraph } from '@/lib/services/openflare';
 
 import {
   acceptedNodeChanges,

frontend/app/(main)/waf/rules/editor/components/editor-behavior.ts

@@ -1,7 +1,7 @@
-import type {EdgeChange, Node, NodeChange} from '@xyflow/react';
-import type {WAFRuleGraph, WAFRuleNode} from '@/lib/services/openflare';
+import type { EdgeChange, Node, NodeChange } from '@xyflow/react';
+import type { WAFRuleGraph, WAFRuleNode } from '@/lib/services/openflare';
 
-import {wouldCreateCycle} from './graph-validation';
+import { wouldCreateCycle } from './graph-validation';
 
 export type GraphErrorTarget = { kind: 'node' | 'edge'; id: string };
 

frontend/app/(main)/websites/components/certificate-apply-dialog.tsx

@@ -1,23 +1,42 @@
 'use client';
 
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {useEffect, useState} from 'react';
-import {useForm} from 'react-hook-form';
-import {ChevronDown, Loader2} from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { ChevronDown, Loader2 } from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import {Switch} from '@/components/ui/switch';
-import {Textarea} from '@/components/ui/textarea';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {DnsAccountService, TlsCertificateService,} from '@/lib/services/openflare';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import type { TlsCertificateItem } from '@/lib/services/openflare';
+import {
+  DnsAccountService,
+  TlsCertificateService,
+} from '@/lib/services/openflare';
 
-import {type AcmeApplyFormValues, acmeApplySchema, defaultAcmeApplyValues,} from './schemas';
-import {getErrorMessage} from './website-utils';
+import {
+  type AcmeApplyFormValues,
+  acmeApplySchema,
+  defaultAcmeApplyValues,
+} from './schemas';
+import { getErrorMessage } from './website-utils';
 
 const certificatesQueryKey = ['openflare', 'tls-certificates'];
 

frontend/app/(main)/websites/components/certificate-detail-dialog.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import {useQuery} from '@tanstack/react-query';
-import {Copy, Loader2} from 'lucide-react';
-import {toast} from 'sonner';
+import { useQuery } from '@tanstack/react-query';
+import { Copy, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -13,14 +13,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {TlsCertificateService} from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { TlsCertificateService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {WebsiteStatusBadge} from './status-badge';
-import {getCertificateStatus, getErrorMessage} from './website-utils';
+import { WebsiteStatusBadge } from './status-badge';
+import { getCertificateStatus, getErrorMessage } from './website-utils';
 
 interface CertificateDetailDialogProps {
   certificateId: number | null;

frontend/app/(main)/websites/components/certificate-editor-dialog.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {useEffect} from 'react';
-import {useForm} from 'react-hook-form';
-import {Loader2} from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -15,17 +15,21 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Textarea} from '@/components/ui/textarea';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {TlsCertificateService} from '@/lib/services/openflare';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import type { TlsCertificateItem } from '@/lib/services/openflare';
+import { TlsCertificateService } from '@/lib/services/openflare';
 
-import {defaultManualImportValues, type ManualImportFormValues, manualImportSchema,} from './schemas';
-import {getErrorMessage, toManualPayload} from './website-utils';
+import {
+  defaultManualImportValues,
+  type ManualImportFormValues,
+  manualImportSchema,
+} from './schemas';
+import { getErrorMessage, toManualPayload } from './website-utils';
 
 const certificatesQueryKey = ['openflare', 'tls-certificates'];
 

frontend/app/(main)/websites/components/certificate-import-dialog.tsx

@@ -1,19 +1,25 @@
 'use client';
 
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {type FormEvent, useEffect, useState} from 'react';
-import {useForm} from 'react-hook-form';
-import {Loader2} from 'lucide-react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { type FormEvent, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
 
-import {Button} from '@/components/ui/button';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,} from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
-import {Textarea} from '@/components/ui/textarea';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {TlsCertificateService} from '@/lib/services/openflare';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import type { TlsCertificateItem } from '@/lib/services/openflare';
+import { TlsCertificateService } from '@/lib/services/openflare';
 
 import {
   defaultFileImportValues,
@@ -22,7 +28,11 @@ import {
   type ManualImportFormValues,
   manualImportSchema,
 } from './schemas';
-import {getErrorMessage, toFilePayload, toManualPayload,} from './website-utils';
+import {
+  getErrorMessage,
+  toFilePayload,
+  toManualPayload,
+} from './website-utils';
 
 const certificatesQueryKey = ['openflare', 'tls-certificates'];
 

frontend/app/(main)/websites/components/dns-account-create-dialog.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import {useMutation, useQueryClient} from '@tanstack/react-query';
-import {zodResolver} from '@hookform/resolvers/zod';
-import {useState} from 'react';
-import {useForm} from 'react-hook-form';
-import {Loader2} from 'lucide-react';
-import {z} from 'zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
+import { z } from 'zod';
 
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -16,13 +16,19 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from '@/components/ui/select';
-import type {DnsAccountMutationPayload} from '@/lib/services/openflare';
-import {DnsAccountService} from '@/lib/services/openflare';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { DnsAccountMutationPayload } from '@/lib/services/openflare';
+import { DnsAccountService } from '@/lib/services/openflare';
 
-import {getErrorMessage} from './website-utils';
+import { getErrorMessage } from './website-utils';
 
 const dnsAccountsQueryKey = ['openflare', 'dns-accounts'];