feat: server transfer rotation

eslint.config.js

@@ -20,7 +20,7 @@ export default tseslint.config(
         rules: {
             ...reactHooks.configs.recommended.rules,
             "@typescript-eslint/no-explicit-any": "off",
-            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+            "react-refresh/only-export-components": "off",
             indent: ["error", 4],
         },
     },

package.json

@@ -10,6 +10,7 @@
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
         "format": "prettier --write .",
+        "test": "vitest run",
         "preview": "vite preview"
     },
     "dependencies": {
@@ -65,6 +66,8 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.37.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
         "@types/node": "^24.7.0",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.1",
@@ -74,11 +77,13 @@
         "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-react-refresh": "^0.4.23",
         "globals": "^16.4.0",
+        "jsdom": "^29.1.1",
         "postcss": "8.4.24",
         "swagger-typescript-api": "^13.2.15",
         "tailwindcss": "3.4.19",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.0",
-        "vite": "^7.1.9"
+        "vite": "^7.1.9",
+        "vitest": "^4.1.7"
     }
 }

src/api/server.ts

@@ -1,5 +1,6 @@
 import {
     ModelBatchMoveServerForm,
+    ModelBatchMoveServerResult,
     ModelServer,
     ModelServerConfigForm,
     ModelServerForm,
@@ -16,8 +17,16 @@ export const deleteServer = async (id: number[]): Promise<void> => {
     return fetcher<void>(FetcherMethod.POST, "/api/v1/batch-delete/server", id)
 }
 
-export const batchMoveServer = async (data: ModelBatchMoveServerForm): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, "/api/v1/batch-move/server", data)
+// batchMoveServer kicks off one ServerTransfer per id and returns a per-id
+// result. The dashboard previously returned void from this endpoint; the new
+// response shape carries the transfer ID for callers that want to subscribe
+// to /ws/transfer for state changes, plus structured non-pending statuses
+// (permission_denied, already_transferring, server_not_found, same_owner)
+// that the UI can render without parsing prose error messages.
+export const batchMoveServer = async (
+    data: ModelBatchMoveServerForm,
+): Promise<ModelBatchMoveServerResult[]> => {
+    return fetcher<ModelBatchMoveServerResult[]>(FetcherMethod.POST, "/api/v1/batch-move/server", data)
 }
 
 export const forceUpdateServer = async (id: number[]): Promise<ModelServerTaskResponse> => {

src/api/transfer.ts

@@ -0,0 +1,15 @@
+import { ModelServerTransfer } from "@/types"
+
+import { FetcherMethod, fetcher } from "./api"
+
+export const getServerTransfers = async (): Promise<ModelServerTransfer[]> => {
+    return fetcher<ModelServerTransfer[]>(FetcherMethod.GET, "/api/v1/transfer", null)
+}
+
+export const cancelServerTransfer = async (id: number): Promise<ModelServerTransfer> => {
+    return fetcher<ModelServerTransfer>(FetcherMethod.POST, `/api/v1/transfer/${id}/cancel`)
+}
+
+export const retryServerTransfer = async (id: number): Promise<ModelServerTransfer> => {
+    return fetcher<ModelServerTransfer>(FetcherMethod.POST, `/api/v1/transfer/${id}/retry`)
+}

src/components/alert-rule.tsx

@@ -36,7 +36,7 @@ import { ModelAlertRule } from "@/types"
 import { triggerModes } from "@/types"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useEffect, useState } from "react"
-import { useForm } from "react-hook-form"
+import { useForm, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import { KeyedMutator } from "swr"
@@ -50,13 +50,15 @@ interface AlertRuleCardProps {
     mutate: KeyedMutator<ModelAlertRule[]>
 }
 
+const cycleUnitSchema = z.enum(["hour", "day", "week", "month", "year"])
+
 const ruleSchema = z.object({
     type: z.string(),
     min: z.number().optional(),
     max: z.number().optional(),
     cycle_start: z.string().optional(),
     cycle_interval: z.number().optional(),
-    cycle_unit: z.enum(["hour", "day", "week", "month", "year"]).optional(),
+    cycle_unit: cycleUnitSchema.optional(),
     duration: z.number().optional(),
     cover: z.number().int().min(0),
     ignore: z.record(z.string(), z.boolean()).optional(),
@@ -71,7 +73,7 @@ const alertRuleFormSchema = z.object({
             try {
                 JSON.parse(val)
                 return true
-            } catch (e) {
+            } catch {
                 return false
             }
         },
@@ -92,28 +94,30 @@ const alertRuleFormSchema = z.object({
 export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) => {
     const { t } = useTranslation()
 
-    type AlertRuleFormData = z.infer<typeof alertRuleFormSchema>
+    type AlertRuleEntry = z.output<typeof ruleSchema>
+    type AlertRuleFormInput = z.input<typeof alertRuleFormSchema>
+    type AlertRuleFormData = z.output<typeof alertRuleFormSchema>
 
-    const form = useForm({
-        resolver: zodResolver(alertRuleFormSchema) as any,
+    const form = useForm<AlertRuleFormInput, unknown, AlertRuleFormData>({
+        resolver: zodResolver(alertRuleFormSchema),
         defaultValues: data
             ? {
-                  ...data,
-                  rules_raw: JSON.stringify(data.rules),
-                  fail_trigger_tasks_raw: conv.arrToStr(data.fail_trigger_tasks),
-                  recover_trigger_tasks_raw: conv.arrToStr(data.recover_trigger_tasks),
-              }
+                ...data,
+                rules_raw: JSON.stringify(data.rules),
+                fail_trigger_tasks_raw: conv.arrToStr(data.fail_trigger_tasks),
+                recover_trigger_tasks_raw: conv.arrToStr(data.recover_trigger_tasks),
+            }
             : {
-                  name: "",
-                  rules_raw: "",
-                  rules: [],
-                  fail_trigger_tasks: [],
-                  fail_trigger_tasks_raw: "",
-                  recover_trigger_tasks: [],
-                  recover_trigger_tasks_raw: "",
-                  notification_group_id: 0,
-                  trigger_mode: 0,
-              },
+                name: "",
+                rules_raw: "",
+                rules: [],
+                fail_trigger_tasks: [],
+                fail_trigger_tasks_raw: "",
+                recover_trigger_tasks: [],
+                recover_trigger_tasks_raw: "",
+                notification_group_id: 0,
+                trigger_mode: 0,
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -124,14 +128,16 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
     // 结构化规则编辑状态：从已有数据或 rules_raw 初始化
     const initialRules = (() => {
         try {
-            if (data?.rules) return data.rules as any[]
+            if (data?.rules) return data.rules
             const raw = form.getValues("rules_raw")
-            return raw ? JSON.parse(raw) : []
+            if (!raw) return []
+            const parsed: unknown = JSON.parse(raw)
+            return z.array(ruleSchema).parse(parsed)
         } catch {
             return []
         }
     })()
-    const [rulesUI, setRulesUI] = useState<any[]>(initialRules)
+    const [rulesUI, setRulesUI] = useState<AlertRuleEntry[]>(initialRules)
 
     // 同步到 rules_raw（提交仍走 JSON 字符串）
     useEffect(() => {
@@ -140,17 +146,22 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
         } catch {
             // ignore
         }
-    }, [rulesUI])
+    }, [form, rulesUI])
+
+    const rulesRaw = useWatch({ control: form.control, name: "rules_raw" })
 
     const onSubmit = async (values: AlertRuleFormData) => {
-        values.rules = JSON.parse(values.rules_raw)
+        values.rules = z.array(ruleSchema).parse(JSON.parse(values.rules_raw))
         values.fail_trigger_tasks = conv.strToArr(values.fail_trigger_tasks_raw).map(Number)
         values.recover_trigger_tasks = conv.strToArr(values.recover_trigger_tasks_raw).map(Number)
-        const { rules_raw, ...requiredFields } = values
+        const requiredFields = { ...values }
+        delete (requiredFields as Record<string, unknown>).rules_raw
         try {
-            data?.id
-                ? await updateAlertRule(data.id, requiredFields)
-                : await createAlertRule(requiredFields)
+            if (data?.id) {
+                await updateAlertRule(data.id, requiredFields)
+            } else {
+                await createAlertRule(requiredFields)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {
@@ -185,7 +196,7 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                         </DialogHeader>
                         <Form {...form}>
                             <form
-                                onSubmit={form.handleSubmit(onSubmit as any)}
+                                onSubmit={form.handleSubmit(onSubmit)}
                                 className="space-y-2 my-2"
                             >
                                 <FormField
@@ -358,9 +369,9 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                             ...next[idx],
                                                                             min: e.target.value
                                                                                 ? Number(
-                                                                                      e.target
-                                                                                          .value,
-                                                                                  )
+                                                                                    e.target
+                                                                                        .value,
+                                                                                )
                                                                                 : undefined,
                                                                         }
                                                                         setRulesUI(next)
@@ -381,9 +392,9 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                             ...next[idx],
                                                                             max: e.target.value
                                                                                 ? Number(
-                                                                                      e.target
-                                                                                          .value,
-                                                                                  )
+                                                                                    e.target
+                                                                                        .value,
+                                                                                )
                                                                                 : undefined,
                                                                         }
                                                                         setRulesUI(next)
@@ -445,8 +456,8 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                     try {
                                                                         return r.ignore
                                                                             ? JSON.stringify(
-                                                                                  r.ignore,
-                                                                              )
+                                                                                r.ignore,
+                                                                            )
                                                                             : ""
                                                                     } catch {
                                                                         return ""
@@ -457,8 +468,8 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                     try {
                                                                         const obj = e.target.value
                                                                             ? JSON.parse(
-                                                                                  e.target.value,
-                                                                              )
+                                                                                e.target.value,
+                                                                            )
                                                                             : undefined
                                                                         next[idx] = {
                                                                             ...next[idx],
@@ -512,9 +523,9 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                             cycle_interval: e.target
                                                                                 .value
                                                                                 ? Number(
-                                                                                      e.target
-                                                                                          .value,
-                                                                                  )
+                                                                                    e.target
+                                                                                        .value,
+                                                                                )
                                                                                 : undefined,
                                                                         }
                                                                         setRulesUI(next)
@@ -531,7 +542,10 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                                         const next = [...rulesUI]
                                                                         next[idx] = {
                                                                             ...next[idx],
-                                                                            cycle_unit: val,
+                                                                            cycle_unit:
+                                                                                cycleUnitSchema.parse(
+                                                                                    val,
+                                                                                ),
                                                                         }
                                                                         setRulesUI(next)
                                                                     }}
@@ -603,7 +617,7 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                     <FormControl>
                                         <Textarea
                                             className="resize-y"
-                                            value={form.watch("rules_raw")}
+                                            value={rulesRaw}
                                             onChange={(e) => {
                                                 // 同步到结构化编辑器
                                                 form.setValue("rules_raw", e.target.value, {
@@ -630,7 +644,7 @@ export const AlertRuleCard: React.FC<AlertRuleCardProps> = ({ data, mutate }) =>
                                                     placeholder={t("Search")}
                                                     options={ngroupList}
                                                     onValueChange={field.onChange}
-                                                    defaultValue={field.value.toString()}
+                                                    defaultValue={String(field.value ?? "")}
                                                 />
                                             </FormControl>
                                             <FormMessage />

src/components/batch-move-server-icon.tsx

@@ -33,8 +33,9 @@ export const BatchMoveServerIcon: React.FC<BatchMoveServerIconProps> = ({
     const [toUserId, setToUserId] = useState<number | undefined>(undefined)
 
     const onSubmit = async () => {
+        let results
         try {
-            await batchMoveServer({
+            results = await batchMoveServer({
                 ids: serverIds,
                 to_user: toUserId!,
             })
@@ -45,7 +46,30 @@ export const BatchMoveServerIcon: React.FC<BatchMoveServerIconProps> = ({
             })
             return
         }
-        toast(t("Done"))
+
+        // The backend now responds per-server; render a structured summary
+        // instead of "Done" so the operator can see which ids hit a snag
+        // (DisableCommandExecute / already_transferring / etc). Pending ids
+        // remain async — watching /ws/transfer or the Transfers page will
+        // surface their terminal state.
+        const pending = results.filter((r) => r.status === "pending").length
+        const denied = results.filter((r) => r.status === "permission_denied").length
+        const dup = results.filter((r) => r.status === "already_transferring").length
+        const missing = results.filter((r) => r.status === "server_not_found").length
+        const same = results.filter((r) => r.status === "same_owner").length
+        const tooOld = results.filter((r) => r.status === "agent_too_old").length
+
+        const parts: string[] = []
+        if (pending) parts.push(t("Transfer.PendingCount", { count: pending }))
+        if (denied) parts.push(t("Transfer.PermissionDeniedCount", { count: denied }))
+        if (dup) parts.push(t("Transfer.AlreadyTransferringCount", { count: dup }))
+        if (missing) parts.push(t("Transfer.ServerNotFoundCount", { count: missing }))
+        if (same) parts.push(t("Transfer.SameOwnerCount", { count: same }))
+        if (tooOld) parts.push(t("Transfer.AgentTooOldCount", { count: tooOld }))
+
+        toast(t("Transfer.BatchSubmitted"), {
+            description: parts.join(" · ") || t("Done"),
+        })
         setOpen(false)
     }
 

src/components/cron.tsx

@@ -63,33 +63,34 @@ const cronFormSchema = z.object({
     notification_group_id: z.coerce.number().int(),
 })
 
-type CronFormData = z.infer<typeof cronFormSchema>
+type CronFormInput = z.input<typeof cronFormSchema>
+type CronFormData = z.output<typeof cronFormSchema>
 
 export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
     const { t } = useTranslation()
-    const form = useForm<CronFormData>({
-        resolver: zodResolver(cronFormSchema as any),
+    const form = useForm<CronFormInput, unknown, CronFormData>({
+        resolver: zodResolver(cronFormSchema),
         defaultValues: data
             ? {
-                  task_type: data.task_type ?? 0,
-                  name: data.name ?? "",
-                  scheduler: data.scheduler ?? "",
-                  command: (data as any).command ?? "",
-                  servers: data.servers ?? [],
-                  cover: data.cover ?? 0,
-                  push_successful: (data as any).push_successful ?? false,
-                  notification_group_id: data.notification_group_id ?? 0,
-              }
+                task_type: data.task_type ?? 0,
+                name: data.name ?? "",
+                scheduler: data.scheduler ?? "",
+                command: data.command ?? "",
+                servers: data.servers ?? [],
+                cover: data.cover ?? 0,
+                push_successful: data.push_successful ?? false,
+                notification_group_id: data.notification_group_id ?? 0,
+            }
             : {
-                  task_type: 0,
-                  name: "",
-                  scheduler: "",
-                  command: "",
-                  servers: [],
-                  cover: 0,
-                  push_successful: false,
-                  notification_group_id: 0,
-              },
+                task_type: 0,
+                name: "",
+                scheduler: "",
+                command: "",
+                servers: [],
+                cover: 0,
+                push_successful: false,
+                notification_group_id: 0,
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -99,7 +100,11 @@ export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
 
     const onSubmit = async (values: CronFormData) => {
         try {
-            data?.id ? await updateCron(data.id, values) : await createCron(values)
+            if (data?.id) {
+                await updateCron(data.id, values)
+            } else {
+                await createCron(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {
@@ -267,7 +272,7 @@ export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
                                                     placeholder="Search..."
                                                     options={ngroupList}
                                                     onValueChange={field.onChange}
-                                                    defaultValue={field.value.toString()}
+                                                    defaultValue={String(field.value ?? "")}
                                                 />
                                             </FormControl>
                                             <FormMessage />
@@ -282,7 +287,7 @@ export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">

src/components/ddns.tsx

@@ -67,45 +67,46 @@ const ddnsFormSchema = z.object({
     webhook_headers: asOptionalField(z.string()),
 })
 
-type DDNSFormData = z.infer<typeof ddnsFormSchema>
+type DDNSFormInput = z.input<typeof ddnsFormSchema>
+type DDNSFormData = z.output<typeof ddnsFormSchema>
 
 export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) => {
     const { t } = useTranslation()
-    const form = useForm<DDNSFormData>({
-        resolver: zodResolver(ddnsFormSchema as any),
+    const form = useForm<DDNSFormInput, unknown, DDNSFormData>({
+        resolver: zodResolver(ddnsFormSchema),
         defaultValues: data
             ? {
-                  max_retries: data.max_retries ?? 3,
-                  enable_ipv4: (data as any).enable_ipv4 ?? false,
-                  enable_ipv6: (data as any).enable_ipv6 ?? false,
-                  name: data.name ?? "",
-                  provider: data.provider ?? "dummy",
-                  domains: data.domains ?? [],
-                  domains_raw: conv.arrToStr(data.domains ?? []),
-                  access_id: (data as any).access_id ?? "",
-                  access_secret: (data as any).access_secret ?? "",
-                  webhook_url: (data as any).webhook_url ?? "",
-                  webhook_method: (data as any).webhook_method,
-                  webhook_request_type: (data as any).webhook_request_type,
-                  webhook_request_body: (data as any).webhook_request_body ?? "",
-                  webhook_headers: (data as any).webhook_headers ?? "",
-              }
+                max_retries: data.max_retries ?? 3,
+                enable_ipv4: data.enable_ipv4 ?? false,
+                enable_ipv6: data.enable_ipv6 ?? false,
+                name: data.name ?? "",
+                provider: data.provider ?? "dummy",
+                domains: data.domains ?? [],
+                domains_raw: conv.arrToStr(data.domains ?? []),
+                access_id: data.access_id ?? "",
+                access_secret: data.access_secret ?? "",
+                webhook_url: data.webhook_url ?? "",
+                webhook_method: data.webhook_method,
+                webhook_request_type: data.webhook_request_type,
+                webhook_request_body: data.webhook_request_body ?? "",
+                webhook_headers: data.webhook_headers ?? "",
+            }
             : {
-                  max_retries: 3,
-                  enable_ipv4: false,
-                  enable_ipv6: false,
-                  name: "",
-                  provider: "dummy",
-                  domains: [],
-                  domains_raw: "",
-                  access_id: "",
-                  access_secret: "",
-                  webhook_url: "",
-                  webhook_method: undefined,
-                  webhook_request_type: undefined,
-                  webhook_request_body: "",
-                  webhook_headers: "",
-              },
+                max_retries: 3,
+                enable_ipv4: false,
+                enable_ipv6: false,
+                name: "",
+                provider: "dummy",
+                domains: [],
+                domains_raw: "",
+                access_id: "",
+                access_secret: "",
+                webhook_url: "",
+                webhook_method: undefined,
+                webhook_request_type: undefined,
+                webhook_request_body: "",
+                webhook_headers: "",
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -116,7 +117,11 @@ export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) =
     const onSubmit = async (values: DDNSFormData) => {
         try {
             values.domains = conv.strToArr(values.domains_raw)
-            data?.id ? await updateDDNSProfile(data.id, values) : await createDDNSProfile(values)
+            if (data?.id) {
+                await updateDDNSProfile(data.id, values)
+            } else {
+                await createDDNSProfile(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {
@@ -227,15 +232,23 @@ export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) =
                                 <FormField
                                     control={form.control}
                                     name="max_retries"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>{t("MaximumRetryAttempts")}</FormLabel>
-                                            <FormControl>
-                                                <Input type="number" placeholder="3" {...field} />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
+                                    render={({ field }) => {
+                                        const { value, ...fieldProps } = field
+                                        return (
+                                            <FormItem>
+                                                <FormLabel>{t("MaximumRetryAttempts")}</FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="number"
+                                                        placeholder="3"
+                                                        value={String(value ?? "")}
+                                                        {...fieldProps}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )
+                                    }}
                                 />
                                 <FormField
                                     control={form.control}
@@ -351,7 +364,7 @@ export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) =
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">
@@ -371,7 +384,7 @@ export const DDNSCard: React.FC<DDNSCardProps> = ({ data, providers, mutate }) =
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">

src/components/fm.tsx

@@ -37,7 +37,7 @@ import {
 import { ColumnDef } from "@tanstack/react-table"
 import { Row, flexRender } from "@tanstack/react-table"
 import { File, Folder } from "lucide-react"
-import { HTMLAttributes, JSX, useEffect, useRef, useState } from "react"
+import { HTMLAttributes, JSX, useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
@@ -59,6 +59,10 @@ interface FMProps {
     wsUrl: string
 }
 
+type VirtualizedTableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    "data-index"?: number | string
+}
+
 const arraysEqual = (a: Uint8Array, b: Uint8Array) => {
     if (a.length !== b.length) return false
     for (let i = 0; i < a.length; i++) {
@@ -67,16 +71,12 @@ const arraysEqual = (a: Uint8Array, b: Uint8Array) => {
     return true
 }
 
-const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, ...props }) => {
+export const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl, ...props }) => {
     const { t } = useTranslation()
     const fmRef = useRef<HTMLDivElement>(null)
     const wsRef = useRef<WebSocket | null>(null)
-
-    useEffect(() => {
-        return () => {
-            wsRef.current?.close()
-        }
-    }, [])
+    const tRef = useRef(t)
+    tRef.current = t
 
     const [dOpen, setdOpen] = useState(false)
     const [uOpen, setuOpen] = useState(false)
@@ -120,9 +120,8 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
     ]
 
     const tableRowComponent = (rows: Row<FMEntry>[]) =>
-        function getTableRow(props: HTMLAttributes<HTMLTableRowElement>) {
-            // @ts-expect-error data-index is a valid attribute
-            const index = props["data-index"]
+        function getTableRow(props: VirtualizedTableRowProps) {
+            const index = Number(props["data-index"])
             const row = rows[index]
 
             if (!row) return null
@@ -160,6 +159,65 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
         }
     }
 
+    useEffect(() => {
+        worker.onmessage = async (event: MessageEvent<FMWorkerData>) => {
+            switch (event.data.type) {
+            case FMWorkerOpcode.Error: {
+                console.error("Error from worker", event.data.error)
+                break
+            }
+            case FMWorkerOpcode.Progress: {
+                handleReady.current = true
+                break
+            }
+            case FMWorkerOpcode.Result: {
+                handleReady.current = false
+
+                if (event.data.blob && event.data.fileName) {
+                    const url = URL.createObjectURL(event.data.blob)
+                    const anchor = document.createElement("a")
+                    anchor.href = url
+                    anchor.download = event.data.fileName
+                    anchor.click()
+                    URL.revokeObjectURL(url)
+                }
+
+                firstChunk.current = true
+                if (dOpen) setdOpen(false)
+                break
+            }
+            }
+        }
+
+        const handleBeforeUnload = () => {
+            worker.postMessage({
+                operation: 3,
+            })
+        }
+
+        window.addEventListener("beforeunload", handleBeforeUnload)
+        return () => {
+            window.removeEventListener("beforeunload", handleBeforeUnload)
+        }
+    }, [dOpen])
+
+    const [currentPath, setPath] = useState("")
+    const currentPathRef = useRef(currentPath)
+    currentPathRef.current = currentPath
+
+    const listFile = useCallback(() => {
+        const prefix = new Int8Array([FMOpcode.List])
+        const pathMsg = new TextEncoder().encode(currentPathRef.current)
+
+        const msg = new Int8Array(prefix.length + pathMsg.length)
+        msg.set(prefix)
+        msg.set(pathMsg, prefix.length)
+
+        wsRef.current?.send(msg)
+    }, [])
+
+    // The WebSocket initialization must not depend on listFile or currentPath,
+    // otherwise navigating directories triggers a disconnect and reconnect.
     useEffect(() => {
         const url = new URL(wsUrl, window.location.origin)
         url.protocol = url.protocol.replace("http", "ws")
@@ -174,8 +232,8 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
         }
         ws.onerror = (e) => {
             console.error(e)
-            toast("Websocket" + " " + t("Error"), {
-                description: t("Results.UnExpectedError"),
+            toast("Websocket" + " " + tRef.current("Error"), {
+                description: tRef.current("Results.UnExpectedError"),
             })
         }
         ws.onmessage = async (e: MessageEvent<ArrayBufferLike>) => {
@@ -186,7 +244,6 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
                     const errMsg = new TextDecoder("utf-8").decode(errBytes)
                     throw new Error(errMsg)
                 }
-
                 if (firstChunk.current) {
                     if (arraysEqual(identifier, FMIdentifier.file)) {
                         worker.postMessage({
@@ -204,7 +261,7 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
                         setuOpen(false)
                         listFile()
                     } else {
-                        throw new Error(t("Results.UnknownIdentifier"))
+                        throw new Error(tRef.current("Results.UnknownIdentifier"))
                     }
                 } else {
                     await waitForHandleReady()
@@ -216,74 +273,27 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
                 }
             } catch (error) {
                 console.error("Error processing received data:", error)
-                toast("FM" + " " + t("Error"), {
-                    description: t("Results.UnExpectedError"),
+                toast("FM" + " " + tRef.current("Error"), {
+                    description: tRef.current("Results.UnExpectedError"),
                 })
                 setdOpen(false)
                 setuOpen(false)
             }
         }
-    }, [wsUrl])
 
-    useEffect(() => {
-        worker.onmessage = async (event: MessageEvent<FMWorkerData>) => {
-            switch (event.data.type) {
-                case FMWorkerOpcode.Error: {
-                    console.error("Error from worker", event.data.error)
-                    break
-                }
-                case FMWorkerOpcode.Progress: {
-                    handleReady.current = true
-                    break
-                }
-                case FMWorkerOpcode.Result: {
-                    handleReady.current = false
-
-                    if (event.data.blob && event.data.fileName) {
-                        const url = URL.createObjectURL(event.data.blob)
-                        const anchor = document.createElement("a")
-                        anchor.href = url
-                        anchor.download = event.data.fileName
-                        anchor.click()
-                        URL.revokeObjectURL(url)
-                    }
-
-                    firstChunk.current = true
-                    if (dOpen) setdOpen(false)
-                    break
-                }
+        return () => {
+            ws.close()
+            if (wsRef.current === ws) {
+                wsRef.current = null
             }
         }
+    }, [listFile, wsUrl])
 
-        const handleBeforeUnload = () => {
-            worker.postMessage({
-                operation: 3,
-            })
-        }
-
-        window.addEventListener("beforeunload", handleBeforeUnload)
-        return () => {
-            window.removeEventListener("beforeunload", handleBeforeUnload)
-        }
-    }, [worker, dOpen])
-
-    const [currentPath, setPath] = useState("")
     useEffect(() => {
         if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
             listFile()
         }
-    }, [wsRef.current, currentPath])
-
-    const listFile = () => {
-        const prefix = new Int8Array([FMOpcode.List])
-        const pathMsg = new TextEncoder().encode(currentPath)
-
-        const msg = new Int8Array(prefix.length + pathMsg.length)
-        msg.set(prefix)
-        msg.set(pathMsg, prefix.length)
-
-        wsRef.current?.send(msg)
-    }
+    }, [currentPath, listFile])
 
     const downloadFile = (basename: string) => {
         currentBasename.current = basename
@@ -331,9 +341,10 @@ const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({ wsUrl,
                                 onClick={async () => {
                                     try {
                                         await copyToClipboard(formatPath(currentPath))
-                                    } catch (error: any) {
+                                    } catch (error) {
+                                        const description = error instanceof Error ? error.message : t("Results.UnExpectedError")
                                         toast("FM" + " " + t("Error"), {
-                                            description: error.message,
+                                            description,
                                         })
                                         console.error("copy error: ", error)
                                     }

src/components/header.tsx

@@ -49,6 +49,7 @@ const pages = [
     { href: "/dashboard/ddns", label: i18next.t("DDNS") },
     { href: "/dashboard/nat", label: i18next.t("NATT") },
     { href: "/dashboard/server-group", label: i18next.t("Group") },
+    { href: "/dashboard/transfer", label: i18next.t("Transfer.Title") },
 ]
 
 export default function Header() {
@@ -248,6 +249,15 @@ export default function Header() {
                                     <Link to="/dashboard/server-group">{t("Group")}</Link>
                                 </NzNavigationMenuLink>
                             </NavigationMenuItem>
+                            <NavigationMenuItem>
+                                <NzNavigationMenuLink
+                                    asChild
+                                    active={location.pathname === "/dashboard/transfer"}
+                                    className={navigationMenuTriggerStyle()}
+                                >
+                                    <Link to="/dashboard/transfer">{t("Transfer.Title")}</Link>
+                                </NzNavigationMenuLink>
+                            </NavigationMenuItem>
                         </>
                     )}
                 </div>
@@ -385,8 +395,7 @@ const useInterval = (callback: () => void, delay?: number | null) => {
 function Overview() {
     const { t } = useTranslation()
     const profile = useMainStore((store) => store.profile)
-    const timeOption = DateTime.TIME_SIMPLE
-    timeOption.hour12 = true
+    const timeOption = { ...DateTime.TIME_SIMPLE, hour12: true }
     const [timeString, setTimeString] = useState(
         DateTime.now().setLocale("en-US").toLocaleString(timeOption),
     )

src/components/install-commands.tsx

@@ -146,23 +146,23 @@ const generateCommand = (
     const env = envParts.join(" ")
 
     const envWinParts = [
-        `$env:NZ_SERVER=\"${install_host}\";`,
-        `$env:NZ_TLS=\"${tls || false}\";`,
-        `$env:NZ_CLIENT_SECRET=\"${agent_secret}\";`,
+        `$env:NZ_SERVER="${install_host}";`,
+        `$env:NZ_TLS="${tls || false}";`,
+        `$env:NZ_CLIENT_SECRET="${agent_secret}";`,
     ]
-    if (uuid) envWinParts.push(`$env:NZ_UUID=\"${uuid}\";`)
+    if (uuid) envWinParts.push(`$env:NZ_UUID="${uuid}";`)
     const env_win = envWinParts.join("")
 
     switch (type) {
-        case OSTypes.Linux:
-        case OSTypes.macOS: {
-            return `curl -L https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.sh -o agent.sh && chmod +x agent.sh && env ${env} ./agent.sh`
-        }
-        case OSTypes.Windows: {
-            return `${env_win} [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Ssl3 -bor [Net.SecurityProtocolType]::Tls -bor [Net.SecurityProtocolType]::Tls11 -bor [Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;Invoke-WebRequest https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.ps1 -OutFile C:\install.ps1;powershell.exe C:\install.ps1`
-        }
-        default: {
-            throw new Error(`Unknown OS: ${type}`)
-        }
+    case OSTypes.Linux:
+    case OSTypes.macOS: {
+        return `curl -L https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.sh -o agent.sh && chmod +x agent.sh && env ${env} ./agent.sh`
+    }
+    case OSTypes.Windows: {
+        return `${env_win} [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Ssl3 -bor [Net.SecurityProtocolType]::Tls -bor [Net.SecurityProtocolType]::Tls11 -bor [Net.SecurityProtocolType]::Tls12;set-ExecutionPolicy RemoteSigned;Invoke-WebRequest https://raw.githubusercontent.com/nezhahq/scripts/main/agent/install.ps1 -OutFile C:\\install.ps1;powershell.exe C:\\install.ps1`
+    }
+    default: {
+        throw new Error(`Unknown OS: ${type}`)
+    }
     }
 }

src/components/nat.tsx

@@ -46,27 +46,28 @@ const natFormSchema = z.object({
     domain: z.string(),
 })
 
-type NatFormData = z.infer<typeof natFormSchema>
+type NatFormInput = z.input<typeof natFormSchema>
+type NatFormData = z.output<typeof natFormSchema>
 
 export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
     const { t } = useTranslation()
-    const form = useForm<NatFormData>({
-        resolver: zodResolver(natFormSchema as any),
+    const form = useForm<NatFormInput, unknown, NatFormData>({
+        resolver: zodResolver(natFormSchema),
         defaultValues: data
             ? {
-                  name: data.name ?? "",
-                  enabled: (data as any).enabled ?? false,
-                  server_id: data.server_id ?? 0,
-                  host: data.host ?? "",
-                  domain: data.domain ?? "",
-              }
+                name: data.name ?? "",
+                enabled: data.enabled ?? false,
+                server_id: data.server_id ?? 0,
+                host: data.host ?? "",
+                domain: data.domain ?? "",
+            }
             : {
-                  name: "",
-                  enabled: false,
-                  server_id: 0,
-                  host: "",
-                  domain: "",
-              },
+                name: "",
+                enabled: false,
+                server_id: 0,
+                host: "",
+                domain: "",
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -76,7 +77,11 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
 
     const onSubmit = async (values: NatFormData) => {
         try {
-            data?.id ? await updateNAT(data.id, values) : await createNAT(values)
+            if (data?.id) {
+                await updateNAT(data.id, values)
+            } else {
+                await createNAT(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {
@@ -119,15 +124,23 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
                                 <FormField
                                     control={form.control}
                                     name="server_id"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>{t("Server")} ID</FormLabel>
-                                            <FormControl>
-                                                <Input type="number" placeholder="1" {...field} />
-                                            </FormControl>
-                                            <FormMessage />
-                                        </FormItem>
-                                    )}
+                                    render={({ field }) => {
+                                        const { value, ...fieldProps } = field
+                                        return (
+                                            <FormItem>
+                                                <FormLabel>{t("Server")} ID</FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="number"
+                                                        placeholder="1"
+                                                        value={String(value ?? "")}
+                                                        {...fieldProps}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )
+                                    }}
                                 />
                                 <FormField
                                     control={form.control}
@@ -169,7 +182,7 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">{t("Enable")}</Label>

src/components/notification-group.tsx

@@ -48,13 +48,13 @@ export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ da
         resolver: zodResolver(notificationGroupFormSchema),
         defaultValues: data
             ? {
-                  name: data.group.name,
-                  notifications: data.notifications,
-              }
+                name: data.group.name,
+                notifications: data.notifications,
+            }
             : {
-                  name: "",
-                  notifications: [],
-              },
+                name: "",
+                notifications: [],
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -64,9 +64,11 @@ export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ da
 
     const onSubmit = async (values: z.infer<typeof notificationGroupFormSchema>) => {
         try {
-            data?.group.id
-                ? await updateNotificationGroup(data.group.id, values)
-                : await createNotificationGroup(values)
+            if (data?.group.id) {
+                await updateNotificationGroup(data.group.id, values)
+            } else {
+                await createNotificationGroup(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {

src/components/notifier.tsx

@@ -62,33 +62,36 @@ const notificationFormSchema = z.object({
 
 export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
     const { t } = useTranslation()
-    type notificationFormData = z.infer<typeof notificationFormSchema>
+    type NotificationFormInput = z.input<typeof notificationFormSchema>
+    type NotificationFormData = z.output<typeof notificationFormSchema>
+    type NotificationDefaults = ModelNotification & Partial<Pick<NotificationFormData, "skip_check">>
+    const notificationDefaults: NotificationDefaults | undefined = data
 
-    const form = useForm({
-        resolver: zodResolver(notificationFormSchema) as any,
+    const form = useForm<NotificationFormInput, unknown, NotificationFormData>({
+        resolver: zodResolver(notificationFormSchema),
         defaultValues: data
             ? {
-                  name: data.name ?? "",
-                  url: data.url ?? "",
-                  request_method: data.request_method ?? 1,
-                  request_type: data.request_type ?? 1,
-                  request_header: data.request_header ?? "",
-                  request_body: data.request_body ?? "",
-                  verify_tls: (data as any).verify_tls ?? false,
-                  skip_check: (data as any).skip_check ?? false,
-                  format_metric_units: (data as any).format_metric_units ?? false,
-              }
+                name: data.name ?? "",
+                url: data.url ?? "",
+                request_method: data.request_method ?? 1,
+                request_type: data.request_type ?? 1,
+                request_header: data.request_header ?? "",
+                request_body: data.request_body ?? "",
+                verify_tls: data.verify_tls ?? false,
+                skip_check: notificationDefaults?.skip_check ?? false,
+                format_metric_units: data.format_metric_units ?? false,
+            }
             : {
-                  name: "",
-                  url: "",
-                  request_method: 1,
-                  request_type: 1,
-                  request_header: "",
-                  request_body: "",
-                  verify_tls: false,
-                  skip_check: false,
-                  format_metric_units: false,
-              },
+                name: "",
+                url: "",
+                request_method: 1,
+                request_type: 1,
+                request_header: "",
+                request_body: "",
+                verify_tls: false,
+                skip_check: false,
+                format_metric_units: false,
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -96,9 +99,13 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
 
     const [open, setOpen] = useState(false)
 
-    const onSubmit = async (values: notificationFormData) => {
+    const onSubmit = async (values: NotificationFormData) => {
         try {
-            data?.id ? await updateNotification(data.id, values) : await createNotification(values)
+            if (data?.id) {
+                await updateNotification(data.id, values)
+            } else {
+                await createNotification(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {
@@ -127,7 +134,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                         </DialogHeader>
                         <Form {...form}>
                             <form
-                                onSubmit={form.handleSubmit(onSubmit as any)}
+                                onSubmit={form.handleSubmit(onSubmit)}
                                 className="space-y-2 my-2"
                             >
                                 <FormField
@@ -254,7 +261,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">
@@ -274,7 +281,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">
@@ -294,7 +301,7 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
                                             <FormControl>
                                                 <div className="flex items-center gap-2">
                                                     <Checkbox
-                                                        checked={field.value}
+                                                        checked={field.value === true}
                                                         onCheckedChange={field.onChange}
                                                     />
                                                     <Label className="text-sm">

src/components/server-config.tsx

@@ -49,7 +49,7 @@ const agentConfigSchema = z.object({
                 try {
                     JSON.parse(val)
                     return true
-                } catch (e) {
+                } catch {
                     return false
                 }
             },
@@ -66,7 +66,7 @@ const agentConfigSchema = z.object({
                 try {
                     JSON.parse(val)
                     return true
-                } catch (e) {
+                } catch {
                     return false
                 }
             },
@@ -129,7 +129,7 @@ export const ServerConfigCard = ({ sid, menuItem = false, ...props }: ServerConf
             }
         }
         if (open) fetchData()
-    }, [open])
+    }, [open, sid, t])
 
     const form = useForm({
         resolver: zodResolver(agentConfigSchema) as any,

src/components/server-group.tsx

@@ -48,13 +48,13 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
         resolver: zodResolver(serverGroupFormSchema),
         defaultValues: data
             ? {
-                  name: data.group.name,
-                  servers: data.servers,
-              }
+                name: data.group.name,
+                servers: data.servers,
+            }
             : {
-                  name: "",
-                  servers: [],
-              },
+                name: "",
+                servers: [],
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -64,9 +64,11 @@ export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }
 
     const onSubmit = async (values: z.infer<typeof serverGroupFormSchema>) => {
         try {
-            data?.group.id
-                ? await updateServerGroup(data.group.id, values)
-                : await createServerGroup(values)
+            if (data?.group.id) {
+                await updateServerGroup(data.group.id, values)
+            } else {
+                await createServerGroup(values)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {

src/components/server.tsx

@@ -51,7 +51,7 @@ import { ModelServer } from "@/types"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { HelpCircle } from "lucide-react"
 import { useState } from "react"
-import { useForm } from "react-hook-form"
+import { useForm, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import { KeyedMutator } from "swr"
@@ -94,7 +94,7 @@ const serverFormSchema = z.object({
                 try {
                     JSON.parse(val)
                     return true
-                } catch (e) {
+                } catch {
                     return false
                 }
             },
@@ -120,6 +120,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
             keepDefaultValues: false,
         },
     })
+    const enableDDNS = useWatch({ control: form.control, name: "enable_ddns" })
 
     const [open, setOpen] = useState(false)
 
@@ -278,7 +279,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                         </FormItem>
                                     )}
                                 />
-                                {form.watch("enable_ddns") ? (
+                                {enableDDNS ? (
                                     <>
                                         <FormField
                                             control={form.control}
@@ -467,7 +468,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                         ?.startDate
                                                                         ? new Date(
                                                                               publicNoteObj.billingDataMod!.startDate!,
-                                                                          ).toLocaleDateString()
+                                                                        ).toLocaleDateString()
                                                                         : "YYYY-MM-DD"}
                                                                 </Button>
                                                             </PopoverTrigger>
@@ -492,7 +493,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                                 ?.startDate
                                                                                 ? new Date(
                                                                                       publicNoteObj.billingDataMod!.startDate!,
-                                                                                  )
+                                                                                )
                                                                                 : undefined
                                                                         }
                                                                         onSelect={(d) => {
@@ -559,17 +560,17 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                     {publicNoteObj.billingDataMod
                                                                         ?.endDate
                                                                         ? publicNoteObj
-                                                                              .billingDataMod
-                                                                              ?.endDate ===
+                                                                            .billingDataMod
+                                                                            ?.endDate ===
                                                                           "0000-00-00T23:59:59+08:00"
                                                                             ? t(
-                                                                                  "PublicNote.NoExpiry",
-                                                                              )
+                                                                                "PublicNote.NoExpiry",
+                                                                            )
                                                                             : new Date(
                                                                                   publicNoteObj
                                                                                       .billingDataMod
                                                                                       ?.endDate as string,
-                                                                              ).toLocaleDateString()
+                                                                            ).toLocaleDateString()
                                                                         : "YYYY-MM-DD"}
                                                                 </Button>
                                                             </PopoverTrigger>
@@ -600,7 +601,7 @@ export const ServerCard: React.FC<ServerCardProps> = ({ data, mutate }) => {
                                                                                       publicNoteObj
                                                                                           .billingDataMod
                                                                                           ?.endDate as string,
-                                                                                  )
+                                                                                )
                                                                                 : undefined
                                                                         }
                                                                         onSelect={(d) => {

src/components/service.tsx

@@ -80,28 +80,28 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
         resolver: zodResolver(serviceFormSchema) as any,
         defaultValues: data
             ? {
-                  ...data,
-                  fail_trigger_tasks_raw: conv.arrToStr(data.fail_trigger_tasks),
-                  recover_trigger_tasks_raw: conv.arrToStr(data.recover_trigger_tasks),
-                  skip_servers_raw: conv.recordToStrArr(data.skip_servers ? data.skip_servers : {}),
-              }
+                ...data,
+                fail_trigger_tasks_raw: conv.arrToStr(data.fail_trigger_tasks),
+                recover_trigger_tasks_raw: conv.arrToStr(data.recover_trigger_tasks),
+                skip_servers_raw: conv.recordToStrArr(data.skip_servers ? data.skip_servers : {}),
+            }
             : {
-                  type: 1,
-                  cover: 0,
-                  display_index: 0,
-                  name: "",
-                  target: "",
-                  max_latency: 0.0,
-                  min_latency: 0.0,
-                  duration: 30,
-                  notification_group_id: 0,
-                  fail_trigger_tasks: [],
-                  fail_trigger_tasks_raw: "",
-                  recover_trigger_tasks: [],
-                  recover_trigger_tasks_raw: "",
-                  skip_servers: {},
-                  skip_servers_raw: [],
-              },
+                type: 1,
+                cover: 0,
+                display_index: 0,
+                name: "",
+                target: "",
+                max_latency: 0.0,
+                min_latency: 0.0,
+                duration: 30,
+                notification_group_id: 0,
+                fail_trigger_tasks: [],
+                fail_trigger_tasks_raw: "",
+                recover_trigger_tasks: [],
+                recover_trigger_tasks_raw: "",
+                skip_servers: {},
+                skip_servers_raw: [],
+            },
         resetOptions: {
             keepDefaultValues: false,
         },
@@ -113,11 +113,14 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
         values.skip_servers = conv.arrToRecord(values.skip_servers_raw)
         values.fail_trigger_tasks = conv.strToArr(values.fail_trigger_tasks_raw).map(Number)
         values.recover_trigger_tasks = conv.strToArr(values.recover_trigger_tasks_raw).map(Number)
-        const { skip_servers_raw, ...requiredFields } = values
+        const requiredFields = { ...values }
+        delete (requiredFields as Record<string, unknown>).skip_servers_raw
         try {
-            data?.id
-                ? await updateService(data.id, requiredFields)
-                : await createService(requiredFields)
+            if (data?.id) {
+                await updateService(data.id, requiredFields)
+            } else {
+                await createService(requiredFields)
+            }
         } catch (e) {
             console.error(e)
             toast(t("Error"), {

src/components/terminal.tsx

@@ -14,7 +14,15 @@ import { FitAddon } from "@xterm/addon-fit"
 import { Terminal } from "@xterm/xterm"
 import "@xterm/xterm/css/xterm.css"
 import { Terminal as TerminalIcon } from "lucide-react"
-import { JSX, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
+import {
+    JSX,
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react"
 import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 import { toast } from "sonner"
@@ -28,7 +36,7 @@ interface XtermProps {
     setClose: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const XtermComponent = forwardRef<HTMLDivElement, XtermProps & JSX.IntrinsicElements["div"]>(
+export const XtermComponent = forwardRef<HTMLDivElement, XtermProps & JSX.IntrinsicElements["div"]>(
     ({ wsUrl, setClose, ...props }, ref) => {
         const terminalIdRef = useRef<HTMLDivElement>(null)
         const terminalRef = useRef<Terminal | null>(null)
@@ -43,42 +51,10 @@ const XtermComponent = forwardRef<HTMLDivElement, XtermProps & JSX.IntrinsicElem
             }
         }, [])
 
-        useEffect(() => {
-            return () => {
-                wsRef.current?.close()
-                terminalRef.current?.dispose()
-            }
-        }, [])
-
-        useEffect(() => {
-            terminalRef.current = new Terminal({
-                cursorBlink: true,
-                fontSize: 16,
-            })
-            const url = new URL(wsUrl, window.location.origin)
-            url.protocol = url.protocol.replace("http", "ws")
-            const ws = new WebSocket(url)
-            wsRef.current = ws
-            ws.binaryType = "arraybuffer"
-            ws.onopen = () => {
-                onResize()
-            }
-            ws.onclose = () => {
-                terminalRef.current?.dispose()
-                setClose(true)
-            }
-            ws.onerror = (e) => {
-                console.error(e)
-                toast("Websocket error", {
-                    description: "View console for details.",
-                })
-            }
-        }, [wsUrl])
-
         const fitAddon = useRef(new FitAddon()).current
         const sendResize = useRef(false)
 
-        const doResize = () => {
+        const doResize = useCallback(() => {
             if (!terminalIdRef.current) return
 
             fitAddon.fit()
@@ -100,9 +76,9 @@ const XtermComponent = forwardRef<HTMLDivElement, XtermProps & JSX.IntrinsicElem
 
                 wsRef.current?.send(msg)
             }
-        }
+        }, [fitAddon])
 
-        const onResize = async () => {
+        const onResize = useCallback(async () => {
             if (sendResize.current) return
 
             sendResize.current = true
@@ -114,22 +90,55 @@ const XtermComponent = forwardRef<HTMLDivElement, XtermProps & JSX.IntrinsicElem
             } finally {
                 sendResize.current = false
             }
-        }
+        }, [doResize])
 
         useEffect(() => {
-            if (!wsRef.current || !terminalIdRef.current || !terminalRef.current) return
-            const attachAddon = new AttachAddon(wsRef.current)
-            terminalRef.current.loadAddon(attachAddon)
-            terminalRef.current.loadAddon(fitAddon)
-            terminalRef.current.open(terminalIdRef.current)
+            const container = terminalIdRef.current
+            if (!container) return
+
+            const terminal = new Terminal({
+                cursorBlink: true,
+                fontSize: 16,
+            })
+            const url = new URL(wsUrl, window.location.origin)
+            url.protocol = url.protocol.replace("http", "ws")
+            const ws = new WebSocket(url)
+            ws.binaryType = "arraybuffer"
+
+            terminalRef.current = terminal
+            wsRef.current = ws
+
+            const attachAddon = new AttachAddon(ws)
+            terminal.loadAddon(attachAddon)
+            terminal.loadAddon(fitAddon)
+            terminal.open(container)
             window.addEventListener("resize", onResize)
+
+            ws.onopen = () => {
+                onResize()
+            }
+            ws.onclose = () => {
+                terminal.dispose()
+                setClose(true)
+            }
+            ws.onerror = (e) => {
+                console.error(e)
+                toast("Websocket error", {
+                    description: "View console for details.",
+                })
+            }
+
             return () => {
                 window.removeEventListener("resize", onResize)
-                if (wsRef.current) {
-                    wsRef.current.close()
-                }
+                ws.onopen = null
+                ws.onclose = null
+                ws.onerror = null
+                ws.close()
+                terminal.dispose()
+                if (wsRef.current === ws) wsRef.current = null
+                if (terminalRef.current === terminal) terminalRef.current = null
             }
-        }, [wsRef.current, terminalRef.current, terminalIdRef.current])
+        }, [fitAddon, onResize, setClose, wsUrl])
 
         return <div ref={terminalIdRef} {...props} />
     },

src/components/ui/form.tsx

@@ -35,8 +35,8 @@ const FormField = <
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-    ...props
-}: ControllerProps<TFieldValues, TName>) => {
+        ...props
+    }: ControllerProps<TFieldValues, TName>) => {
     return (
         <FormFieldContext.Provider value={{ name: props.name }}>
             <Controller {...props} />

src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils"
 import { InputHTMLAttributes, forwardRef } from "react"
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+export type InputProps = InputHTMLAttributes<HTMLInputElement>
 
 const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
     return (

src/components/xui/icon-button.tsx

@@ -53,60 +53,60 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props,
         >
             {(() => {
                 switch (props.icon) {
-                    case "clipboard": {
-                        return <Clipboard />
-                    }
-                    case "check": {
-                        return <Check />
-                    }
-                    case "edit": {
-                        return <Edit2 />
-                    }
-                    case "trash": {
-                        return <Trash2 />
-                    }
-                    case "plus": {
-                        return <Plus />
-                    }
-                    case "terminal": {
-                        return <Terminal />
-                    }
-                    case "update": {
-                        return <CircleArrowUp />
-                    }
-                    case "folder-closed": {
-                        return <FolderClosed />
-                    }
-                    case "play": {
-                        return <Play />
-                    }
-                    case "download": {
-                        return <Download />
-                    }
-                    case "upload": {
-                        return <Upload />
-                    }
-                    case "menu": {
-                        return <Menu />
-                    }
-                    case "ban": {
-                        return <BanIcon />
-                    }
-                    case "expand": {
-                        return <Expand />
-                    }
-                    case "cog": {
-                        return <CogIcon />
-                    }
-                    case "minus": {
-                        return <Minus />
-                    }
-                    case "user-pen": {
-                        return <UserPen />
-                    }
-                    case "more": {
-                        return <MoreHorizontal />
-                    }
+                case "clipboard": {
+                    return <Clipboard />
+                }
+                case "check": {
+                    return <Check />
+                }
+                case "edit": {
+                    return <Edit2 />
+                }
+                case "trash": {
+                    return <Trash2 />
+                }
+                case "plus": {
+                    return <Plus />
+                }
+                case "terminal": {
+                    return <Terminal />
+                }
+                case "update": {
+                    return <CircleArrowUp />
+                }
+                case "folder-closed": {
+                    return <FolderClosed />
+                }
+                case "play": {
+                    return <Play />
+                }
+                case "download": {
+                    return <Download />
+                }
+                case "upload": {
+                    return <Upload />
+                }
+                case "menu": {
+                    return <Menu />
+                }
+                case "ban": {
+                    return <BanIcon />
+                }
+                case "expand": {
+                    return <Expand />
+                }
+                case "cog": {
+                    return <CogIcon />
+                }
+                case "minus": {
+                    return <Minus />
+                }
+                case "user-pen": {
+                    return <UserPen />
+                }
+                case "more": {
+                    return <MoreHorizontal />
+                }
                 }
             })()}
         </Button>

src/components/xui/multi-select.tsx

@@ -140,7 +140,6 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
             animation = 0,
             maxCount = 3,
             modalPopover = false,
-            asChild = false,
             className,
             ...props
         },

src/components/xui/virtulized-data-table.tsx

@@ -158,9 +158,9 @@ export function DataTable<TData, TValue>({
                                                 {...{
                                                     style: header.column.getCanSort()
                                                         ? {
-                                                              cursor: "pointer",
-                                                              userSelect: "none",
-                                                          }
+                                                            cursor: "pointer",
+                                                            userSelect: "none",
+                                                        }
                                                         : {},
                                                     onClick:
                                                         header.column.getToggleSortingHandler(),

src/hooks/useAuth.tsx

@@ -1,6 +1,6 @@
 import { getProfile, login as loginRequest } from "@/api/user"
 import { AuthContextProps } from "@/types"
-import { createContext, useContext, useEffect, useMemo } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
@@ -25,15 +25,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
                 const user = await getProfile()
                 user.role = user.role || 0
                 setProfile(user)
-            } catch (error: any) {
+            } catch {
                 setProfile(undefined)
             }
         })()
-    }, [])
+    }, [setProfile])
 
     const navigate = useNavigate()
 
-    const login = async (username: string, password: string) => {
+    const login = useCallback(async (username: string, password: string) => {
         try {
             await loginRequest(username, password)
             const user = await getProfile()
@@ -48,9 +48,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
                 toast(msg || t("NetworkError"))
             }
         }
-    }
+    }, [navigate, setProfile, t])
 
-    const loginOauth2 = async () => {
+    const loginOauth2 = useCallback(async () => {
         try {
             const user = await getProfile()
             user.role = user.role || 0
@@ -61,9 +61,9 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         } finally {
             window.history.replaceState({}, document.title, window.location.pathname)
         }
-    }
+    }, [navigate, setProfile])
 
-    const logout = () => {
+    const logout = useCallback(() => {
         document.cookie.split(";").forEach(function (c) {
             document.cookie = c
                 .replace(/^ +/, "")
@@ -71,7 +71,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         })
         setProfile(undefined)
         navigate("/dashboard/login", { replace: true })
-    }
+    }, [navigate, setProfile])
 
     const value = useMemo(
         () => ({
@@ -80,7 +80,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
             loginOauth2,
             logout,
         }),
-        [profile],
+        [profile, login, loginOauth2, logout],
     )
     return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
 }

src/hooks/useMediaQuery.tsx

@@ -1,19 +1,16 @@
-import { useEffect, useState } from "react"
+import { useCallback, useSyncExternalStore } from "react"
 
 export function useMediaQuery(query: string) {
-    const [value, setValue] = useState(false)
+    const subscribe = useCallback(
+        (callback: () => void) => {
+            const result = matchMedia(query)
+            result.addEventListener("change", callback)
+            return () => result.removeEventListener("change", callback)
+        },
+        [query],
+    )
 
-    useEffect(() => {
-        function onChange(event: MediaQueryListEvent) {
-            setValue(event.matches)
-        }
+    const getSnapshot = useCallback(() => matchMedia(query).matches, [query])
 
-        const result = matchMedia(query)
-        result.addEventListener("change", onChange)
-        setValue(result.matches)
-
-        return () => result.removeEventListener("change", onChange)
-    }, [query])
-
-    return value
+    return useSyncExternalStore(subscribe, getSnapshot, () => false)
 }

src/hooks/useNotfication.tsx

@@ -54,7 +54,7 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({
                     setNotifier(undefined)
                 }
             })()
-    }, [location.pathname])
+    }, [location.pathname, setNotifier, setNotifierGroup, withNotifier, withNotifierGroup])
 
     const value: NotificationContextProps = useMemo(
         () => ({

src/hooks/useServer.tsx

@@ -54,7 +54,7 @@ export const ServerProvider: React.FC<ServerProviderProps> = ({
                     setServer(undefined)
                 }
             })()
-    }, [location.pathname])
+    }, [location.pathname, setServer, setServerGroup, withServer, withServerGroup])
 
     const value: ServerContextProps = useMemo(
         () => ({

src/hooks/useTerminal.ts

@@ -5,18 +5,19 @@ import { useEffect, useState } from "react"
 export default function useTerminal(serverId?: number) {
     const [terminal, setTerminal] = useState<ModelCreateTerminalResponse | null>(null)
 
-    async function fetchTerminal() {
-        try {
-            const response = await createTerminal(serverId!)
-            setTerminal(response)
-        } catch (error) {
-            console.error("Failed to fetch terminal:", error)
-        }
-    }
-
     useEffect(() => {
         if (!serverId) return
-        fetchTerminal()
+        let cancelled = false
+        createTerminal(serverId)
+            .then((response) => {
+                if (!cancelled) setTerminal(response)
+            })
+            .catch((error) => {
+                console.error("Failed to fetch terminal:", error)
+            })
+        return () => {
+            cancelled = true
+        }
     }, [serverId])
 
     return terminal

src/lib/fm.ts

@@ -15,53 +15,53 @@ onmessage = async function (event) {
         const { operation, arrayBuffer, fileName } = event.data
 
         switch (operation) {
-            case Operation.WriteHeader: {
-                const dataView = new DataView(arrayBuffer)
-                expectedLength = Number(dataView.getBigUint64(4, false))
-                receivedLength = 0
+        case Operation.WriteHeader: {
+            const dataView = new DataView(arrayBuffer)
+            expectedLength = Number(dataView.getBigUint64(4, false))
+            receivedLength = 0
 
-                // Create a new temporary file
-                root = await navigator.storage.getDirectory()
-                draftHandle = await root.getFileHandle(fileName, { create: true })
-                accessHandle = await draftHandle.createSyncAccessHandle()
+            // Create a new temporary file
+            root = await navigator.storage.getDirectory()
+            draftHandle = await root.getFileHandle(fileName, { create: true })
+            accessHandle = await draftHandle.createSyncAccessHandle()
 
-                // Inform that file handle is created
-                const dataChunk = arrayBuffer.slice(12)
-                receivedLength += dataChunk.byteLength
-                accessHandle.write(dataChunk, { at: 0 })
-                const progress = "got handle"
-                postMessage({ type: 1, progress: progress })
-                break
+            // Inform that file handle is created
+            const dataChunk = arrayBuffer.slice(12)
+            receivedLength += dataChunk.byteLength
+            accessHandle.write(dataChunk, { at: 0 })
+            const progress = "got handle"
+            postMessage({ type: 1, progress: progress })
+            break
+        }
+        case Operation.WriteChunks: {
+            if (!accessHandle) {
+                throw new Error("accessHandle is undefined")
             }
-            case Operation.WriteChunks: {
-                if (!accessHandle) {
-                    throw new Error("accessHandle is undefined")
-                }
 
-                accessHandle.write(arrayBuffer, { at: receivedLength })
-                receivedLength += arrayBuffer.byteLength
+            accessHandle.write(arrayBuffer, { at: receivedLength })
+            receivedLength += arrayBuffer.byteLength
 
-                if (receivedLength === expectedLength) {
-                    accessHandle.flush()
-                    accessHandle.close()
+            if (receivedLength === expectedLength) {
+                accessHandle.flush()
+                accessHandle.close()
 
-                    const fileBlob = await draftHandle.getFile()
-                    const blob = new Blob([fileBlob], { type: "application/octet-stream" })
+                const fileBlob = await draftHandle.getFile()
+                const blob = new Blob([fileBlob], { type: "application/octet-stream" })
 
-                    postMessage({ type: 2, blob: blob, fileName: fileName })
-                }
-                break
+                postMessage({ type: 2, blob: blob, fileName: fileName })
             }
-            case Operation.DeleteFiles: {
-                for await (const [name, handle] of root.entries()) {
-                    if (handle.kind === "file") {
-                        await root.removeEntry(name)
-                    } else if (handle.kind === "directory") {
-                        await root.removeEntry(name, { recursive: true })
-                    }
+            break
+        }
+        case Operation.DeleteFiles: {
+            for await (const [name, handle] of root.entries()) {
+                if (handle.kind === "file") {
+                    await root.removeEntry(name)
+                } else if (handle.kind === "directory") {
+                    await root.removeEntry(name, { recursive: true })
                 }
-                break
             }
+            break
+        }
         }
     } catch (error) {
         if (error instanceof Error) postMessage({ type: 0, error: error.message })

src/locales/en/translation.json

@@ -136,6 +136,9 @@
     "EditServerGroup": "Edit Server Group",
     "CreateServerGroup": "Create Server Group",
     "User": "User",
+    "Owner": "Owner",
+    "GlobalAgent": "Global Agent",
+    "UnknownUser": "Unknown user (#{{id}})",
     "WAF": "Web Application Firewall",
     "SiteName": "Site Name",
     "DashboardOriginalHost": "Agent connecting address [domain name/IP:port]",
@@ -255,5 +258,35 @@
     "ClipboardWriteFailed": "Clipboard write failed",
     "PastedFromClipboard": "Pasted from clipboard",
     "ClipboardReadFailed": "Clipboard read failed",
-    "FormatMetricUnits": "Format Metric Units"
+    "FormatMetricUnits": "Format Metric Units",
+    "Status": "Status",
+    "ServerID": "Server ID",
+    "CreatedAt": "Created At",
+    "BatchMoveServer": "Batch Move Server Owner",
+    "Servers": "Servers",
+    "ToUser": "To User",
+    "Move": "Move",
+    "Transfer": {
+        "Title": "Server Transfers",
+        "PageHint": "Tracks ownership transfers initiated from the batch-move action. Pending entries can be cancelled; terminal entries can be retried.",
+        "From": "From",
+        "To": "To",
+        "Initiator": "Initiator",
+        "LastError": "Last Error",
+        "Retry": "Retry",
+        "CancelRequested": "Cancellation requested",
+        "RetryRequested": "Retry requested",
+        "BatchSubmitted": "Batch transfer submitted",
+        "PendingCount": "{{count}} pending",
+        "PermissionDeniedCount": "{{count}} permission denied",
+        "AlreadyTransferringCount": "{{count}} already transferring",
+        "ServerNotFoundCount": "{{count}} not found",
+        "SameOwnerCount": "{{count}} already owned by target",
+        "AgentTooOldCount": "{{count}} agent too old (upgrade required)",
+        "StatusPending": "Pending",
+        "StatusVerified": "Verified",
+        "StatusFailed": "Failed",
+        "StatusTimeout": "Timeout",
+        "StatusCancelled": "Cancelled"
+    }
 }

src/locales/zh-CN/translation.json

@@ -146,6 +146,9 @@
     "EditNotifierGroup": "编辑通知分组",
     "CreateNotifierGroup": "创建通知分组",
     "User": "用户",
+    "Owner": "所属用户",
+    "GlobalAgent": "全局 Agent",
+    "UnknownUser": "未知用户 (#{{id}})",
     "WAF": "Web应用防火墙",
     "SiteName": "站点名称",
     "Language": "语言",
@@ -255,5 +258,35 @@
     "ClipboardWriteFailed": "无法写入剪贴板",
     "PastedFromClipboard": "已从剪贴板粘贴",
     "ClipboardReadFailed": "无法读取剪贴板",
-    "FormatMetricUnits": "格式化数据单位"
+    "FormatMetricUnits": "格式化数据单位",
+    "Status": "状态",
+    "ServerID": "服务器 ID",
+    "CreatedAt": "创建时间",
+    "BatchMoveServer": "批量转移服务器所有者",
+    "Servers": "服务器",
+    "ToUser": "目标用户",
+    "Move": "转移",
+    "Transfer": {
+        "Title": "服务器转移",
+        "PageHint": "跟踪由批量转移操作发起的所有权转移。待处理条目可以取消；已终止条目可以重试。",
+        "From": "源用户",
+        "To": "目标用户",
+        "Initiator": "发起者",
+        "LastError": "最近错误",
+        "Retry": "重试",
+        "CancelRequested": "已请求取消",
+        "RetryRequested": "已请求重试",
+        "BatchSubmitted": "批量转移已提交",
+        "PendingCount": "{{count}} 个待处理",
+        "PermissionDeniedCount": "{{count}} 个权限不足",
+        "AlreadyTransferringCount": "{{count}} 个正在转移中",
+        "ServerNotFoundCount": "{{count}} 个未找到",
+        "SameOwnerCount": "{{count}} 个已属于目标用户",
+        "AgentTooOldCount": "{{count}} 个 agent 版本过低（需升级）",
+        "StatusPending": "待处理",
+        "StatusVerified": "已验证",
+        "StatusFailed": "已失败",
+        "StatusTimeout": "已超时",
+        "StatusCancelled": "已取消"
+    }
 }

src/locales/zh-TW/translation.json

@@ -138,6 +138,9 @@
     "EditNotifierGroup": "編輯通知分組",
     "CreateNotifierGroup": "建立通知分組",
     "User": "使用者",
+    "Owner": "所屬使用者",
+    "GlobalAgent": "全域 Agent",
+    "UnknownUser": "未知使用者 (#{{id}})",
     "WAF": "Web應用防火牆",
     "SiteName": "網站名稱",
     "Language": "語言",
@@ -186,5 +189,35 @@
     "Option": "選項",
     "Value": "值",
     "Preview": "預覽",
-    "FormatMetricUnits": "格式化資料單位"
+    "FormatMetricUnits": "格式化資料單位",
+    "Status": "狀態",
+    "ServerID": "伺服器 ID",
+    "CreatedAt": "建立時間",
+    "BatchMoveServer": "批次轉移伺服器擁有者",
+    "Servers": "伺服器",
+    "ToUser": "目標使用者",
+    "Move": "轉移",
+    "Transfer": {
+        "Title": "伺服器轉移",
+        "PageHint": "追蹤由批次轉移操作發起的擁有權轉移。待處理項目可以取消；已終止項目可以重試。",
+        "From": "來源使用者",
+        "To": "目標使用者",
+        "Initiator": "發起者",
+        "LastError": "最近錯誤",
+        "Retry": "重試",
+        "CancelRequested": "已請求取消",
+        "RetryRequested": "已請求重試",
+        "BatchSubmitted": "批次轉移已提交",
+        "PendingCount": "{{count}} 個待處理",
+        "PermissionDeniedCount": "{{count}} 個權限不足",
+        "AlreadyTransferringCount": "{{count}} 個正在轉移中",
+        "ServerNotFoundCount": "{{count}} 個未找到",
+        "SameOwnerCount": "{{count}} 個已屬於目標使用者",
+        "AgentTooOldCount": "{{count}} 個 agent 版本過舊（需升級）",
+        "StatusPending": "待處理",
+        "StatusVerified": "已驗證",
+        "StatusFailed": "已失敗",
+        "StatusTimeout": "已逾時",
+        "StatusCancelled": "已取消"
+    }
 }

src/main.tsx

@@ -27,6 +27,7 @@ import NotificationPage from "./routes/notification"
 import OnlineUserPage from "./routes/online-user"
 import ProfilePage from "./routes/profile"
 import SettingsPage from "./routes/settings"
+import TransferPage from "./routes/transfer"
 import UserPage from "./routes/user"
 import WAFPage from "./routes/waf"
 
@@ -146,6 +147,10 @@ const router = createBrowserRouter([
                 path: "/dashboard/settings/online-user",
                 element: <OnlineUserPage />,
             },
+            {
+                path: "/dashboard/transfer",
+                element: <TransferPage />,
+            },
         ],
     },
 ])

src/routes/alert-rule.tsx

@@ -165,9 +165,9 @@ export default function AlertRulePage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/cron.tsx

@@ -110,15 +110,15 @@ export default function CronPage() {
                     <div className="max-w-48 whitespace-normal break-words">
                         {(() => {
                             switch (s.cover) {
-                                case 0: {
-                                    return <span>{t("IgnoreAll")}</span>
-                                }
-                                case 1: {
-                                    return <span>{t("CoverAll")}</span>
-                                }
-                                case 2: {
-                                    return <span>{t("OnAlert")}</span>
-                                }
+                            case 0: {
+                                return <span>{t("IgnoreAll")}</span>
+                            }
+                            case 1: {
+                                return <span>{t("CoverAll")}</span>
+                            }
+                            case 2: {
+                                return <span>{t("OnAlert")}</span>
+                            }
                             }
                         })()}
                     </div>
@@ -233,9 +233,9 @@ export default function CronPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/ddns.tsx

@@ -170,9 +170,9 @@ export default function DDNSPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/login.tsx

@@ -39,7 +39,7 @@ function Login() {
         if (oauth2) {
             loginOauth2()
         }
-    }, [window.location.search])
+    }, [loginOauth2])
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -56,7 +56,7 @@ function Login() {
     async function loginWith(provider: string) {
         try {
             const redirectUrl = await getOauth2RedirectURL(provider, Oauth2RequestType.LOGIN)
-            window.location.href = redirectUrl.redirect!
+            window.location.assign(redirectUrl.redirect!)
         } catch (error: any) {
             toast.error(error.message)
         }
@@ -108,14 +108,14 @@ function Login() {
                 </form>
                 {settingData?.config?.oauth2_providers &&
                     settingData?.config?.oauth2_providers.length > 0 && (
-                        <section className="flex items-center my-3 w-full">
-                            <Separator className="flex-1" />
-                            <div className="flex justify-center text-xs text-muted-foreground w-full max-w-[100px]">
+                    <section className="flex items-center my-3 w-full">
+                        <Separator className="flex-1" />
+                        <div className="flex justify-center text-xs text-muted-foreground w-full max-w-[100px]">
                                 OAuth2
-                            </div>
-                            <Separator className="flex-1" />
-                        </section>
-                    )}
+                        </div>
+                        <Separator className="flex-1" />
+                    </section>
+                )}
             </Form>
             <div className="mt-3 flex flex-col gap-3">
                 {settingData?.config?.oauth2_providers?.map((p: string) => (

src/routes/nat.tsx

@@ -153,9 +153,9 @@ export default function NATPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/notification-group.tsx

@@ -146,9 +146,9 @@ export default function NotificationGroupPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/notification.tsx

@@ -161,9 +161,9 @@ export default function NotificationPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/online-user.tsx

@@ -264,9 +264,9 @@ export default function OnlineUserPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/profile.tsx

@@ -26,12 +26,12 @@ export default function ProfilePage() {
             })
             window.history.replaceState({}, document.title, window.location.pathname)
         }
-    }, [window.location.search])
+    }, [setProfile])
 
     const bindO2 = async (provider: string) => {
         try {
             const redirectUrl = await getOauth2RedirectURL(provider, Oauth2RequestType.BIND)
-            window.location.href = redirectUrl.redirect!
+            window.location.assign(redirectUrl.redirect!)
         } catch (error: any) {
             toast.error(error.message)
         }

src/routes/root.tsx

@@ -22,6 +22,12 @@ export default function Root() {
         }
     }, [settingData?.config?.custom_code_dashboard])
 
+    useEffect(() => {
+        if (settingData?.config?.language && !localStorage.getItem("language")) {
+            i18n.changeLanguage(settingData?.config?.language)
+        }
+    }, [settingData?.config?.language])
+
     if (error) {
         throw error
     }
@@ -30,10 +36,6 @@ export default function Root() {
         return null
     }
 
-    if (settingData?.config?.language && !localStorage.getItem("language")) {
-        i18n.changeLanguage(settingData?.config?.language)
-    }
-
     return (
         <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
             <section className="text-sm mx-auto h-full flex flex-col justify-between">

src/routes/server-group.tsx

@@ -145,9 +145,9 @@ export default function ServerGroupPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/server.tsx

@@ -99,6 +99,38 @@ export default function ServerPage() {
                 )
             },
         },
+        {
+            id: "owner",
+            header: t("Owner"),
+            // Backend Server.MarshalJSON always emits owner.id; username is
+            // omitted for uid=0 (legacy global agent secret) and for users
+            // that no longer exist. Render uid=0 as "Global Agent" and a
+            // missing username as "Unknown user (#id)" so deleted-user rows
+            // stay debuggable instead of silently appearing ownerless.
+            accessorFn: (row) => {
+                if (!row.owner) return ""
+                if (row.owner.id === 0) return t("GlobalAgent")
+                return row.owner.username || t("UnknownUser", { id: row.owner.id })
+            },
+            cell: ({ row }) => {
+                const owner = row.original.owner
+                if (!owner) {
+                    return <span className="text-muted-foreground">-</span>
+                }
+                if (owner.id === 0) {
+                    return <span>{t("GlobalAgent")}</span>
+                }
+                const label = owner.username || t("UnknownUser", { id: owner.id })
+                return (
+                    <div
+                        className="max-w-32 whitespace-normal break-words"
+                        title={`uid=${owner.id}`}
+                    >
+                        {label}
+                    </div>
+                )
+            },
+        },
         {
             id: "ip",
             header: "IP",
@@ -260,9 +292,9 @@ export default function ServerPage() {
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
                                         </TableHead>
                                     )
                                 })}

src/routes/service.tsx

@@ -90,12 +90,12 @@ export default function ServicePage() {
                     <div className="max-w-48 whitespace-normal break-words">
                         {(() => {
                             switch (s.cover) {
-                                case 0: {
-                                    return <span>{t("CoverAll")}</span>
-                                }
-                                case 1: {
-                                    return <span>{t("IgnoreAll")}</span>
-                                }
+                            case 0: {
+                                return <span>{t("CoverAll")}</span>
+                            }
+                            case 1: {
+                                return <span>{t("IgnoreAll")}</span>
+                            }
                             }
                         })()}
                     </div>
@@ -199,9 +199,9 @@ export default function ServicePage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/settings.tsx

@@ -76,19 +76,19 @@ export default function SettingsPage() {
         resolver: zodResolver(settingFormSchema) as any,
         defaultValues: config
             ? {
-                  ...config.config,
-                  user_template:
+                ...config.config,
+                user_template:
                       config.config?.user_template ||
                       Object.keys(config.frontend_templates?.filter((t) => !t.is_admin) || {})[0] ||
                       "user-dist",
-              }
+            }
             : {
-                  ip_change_notification_group_id: 0,
-                  cover: 1,
-                  site_name: "",
-                  language: "",
-                  user_template: "user-dist",
-              },
+                ip_change_notification_group_id: 0,
+                cover: 1,
+                site_name: "",
+                language: "",
+                user_template: "user-dist",
+            },
         resetOptions: {
             keepDefaultValues: false,
         },

src/routes/transfer.tsx

@@ -0,0 +1,262 @@
+import { swrFetcher } from "@/api/api"
+import { cancelServerTransfer, retryServerTransfer } from "@/api/transfer"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
+import { useAuth } from "@/hooks/useAuth"
+import {
+    ModelServerTransfer,
+    ModelServerTransferStatus,
+    ModelServerTransferStatusCancelled,
+    ModelServerTransferStatusFailed,
+    ModelServerTransferStatusPending,
+    ModelServerTransferStatusTimeout,
+    ModelServerTransferStatusVerified,
+} from "@/types"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+import useSWR from "swr"
+
+// Map status enum to a label key + a Badge variant. Centralised here so the
+// table cell and any future drawer agree. Verified is "secondary" because
+// the row is no longer actionable; Failed/Timeout use "destructive" to draw
+// the operator's attention. Cancelled is "outline" — soft signal, expected.
+const statusMeta: Record<
+    ModelServerTransferStatus,
+    { key: string; variant: "default" | "secondary" | "destructive" | "outline" }
+> = {
+    [ModelServerTransferStatusPending]: { key: "Transfer.StatusPending", variant: "default" },
+    [ModelServerTransferStatusVerified]: { key: "Transfer.StatusVerified", variant: "secondary" },
+    [ModelServerTransferStatusFailed]: { key: "Transfer.StatusFailed", variant: "destructive" },
+    [ModelServerTransferStatusTimeout]: { key: "Transfer.StatusTimeout", variant: "destructive" },
+    [ModelServerTransferStatusCancelled]: { key: "Transfer.StatusCancelled", variant: "outline" },
+}
+
+export default function TransferPage() {
+    const { t } = useTranslation()
+    const { profile } = useAuth()
+    const isAdmin = profile?.role === 0
+    const callerID = profile?.id
+    const { data, mutate, error } = useSWR<ModelServerTransfer[]>(
+        "/api/v1/transfer",
+        swrFetcher,
+    )
+
+    useEffect(() => {
+        if (error) {
+            toast(t("Error"), {
+                description: t("Results.UnExpectedError", { error: error.message }),
+            })
+        }
+    }, [error, t])
+
+    // Live updates: subscribe to /ws/transfer and patch the SWR cache on each
+    // pushed event. We don't refetch on every event because the WS payload IS
+    // the latest row — refetching would just cost a round trip.
+    //
+    // Reconnect contract: the original implementation opened the socket once
+    // and never reconnected, so a dashboard restart, deploy, or transient
+    // network blip silently froze this view — rows stayed Pending forever
+    // even after the agent had reconnected and the backend had transitioned
+    // them, and operators only discovered it on a hard refresh. Reconnect
+    // with capped exponential backoff (1s → 30s) and trigger a SWR revalidate
+    // on each open so any transitions that broadcast while we were offline
+    // are reconciled.
+    const wsRef = useRef<WebSocket | null>(null)
+    useEffect(() => {
+        let cancelled = false
+        let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+        let backoffMs = 1000
+        const maxBackoffMs = 30000
+
+        const connect = () => {
+            if (cancelled) return
+            const proto = window.location.protocol === "https:" ? "wss:" : "ws:"
+            const ws = new WebSocket(`${proto}//${window.location.host}/api/v1/ws/transfer`)
+            wsRef.current = ws
+
+            ws.onopen = () => {
+                backoffMs = 1000
+                // Backfill anything the broker fanned out while we were
+                // reconnecting — the broker drops events for full subscribers
+                // and there is no replay on the wire.
+                mutate()
+            }
+            ws.onmessage = (ev) => {
+                try {
+                    const t: ModelServerTransfer = JSON.parse(ev.data)
+                    mutate((prev) => {
+                        const list = prev ?? []
+                        const idx = list.findIndex((x) => x.id === t.id)
+                        if (idx === -1) return [t, ...list]
+                        const next = list.slice()
+                        next[idx] = t
+                        return next
+                    }, false)
+                } catch (e) {
+                    // Malformed payload — log and keep the socket open; a refetch
+                    // on next mount will re-sync. Closing the WS would be louder
+                    // than the actual problem.
+                    console.error("transfer ws parse failed", e)
+                }
+            }
+            const scheduleReconnect = () => {
+                if (cancelled) return
+                if (reconnectTimer !== null) return
+                const delay = backoffMs
+                backoffMs = Math.min(backoffMs * 2, maxBackoffMs)
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null
+                    connect()
+                }, delay)
+            }
+            ws.onclose = scheduleReconnect
+            ws.onerror = () => {
+                // onerror fires before onclose and may not produce a close
+                // event in every browser when the handshake is rejected.
+                // Force-close so onclose's reconnect path runs deterministically.
+                ws.close()
+            }
+        }
+
+        connect()
+
+        return () => {
+            cancelled = true
+            if (reconnectTimer !== null) {
+                clearTimeout(reconnectTimer)
+                reconnectTimer = null
+            }
+            const ws = wsRef.current
+            wsRef.current = null
+            if (ws) {
+                // Detach handlers so the close we trigger here doesn't bounce
+                // into a reconnect attempt against an unmounted component.
+                ws.onopen = null
+                ws.onmessage = null
+                ws.onclose = null
+                ws.onerror = null
+                ws.close()
+            }
+        }
+    }, [mutate])
+
+    const onCancel = useCallback(
+        async (id: number) => {
+            try {
+                await cancelServerTransfer(id)
+                toast(t("Transfer.CancelRequested"))
+                mutate()
+            } catch (e: unknown) {
+                const msg = e instanceof Error ? e.message : String(e)
+                toast(t("Error"), { description: msg })
+            }
+        },
+        [mutate, t],
+    )
+
+    const onRetry = useCallback(
+        async (id: number) => {
+            try {
+                await retryServerTransfer(id)
+                toast(t("Transfer.RetryRequested"))
+                mutate()
+            } catch (e: unknown) {
+                const msg = e instanceof Error ? e.message : String(e)
+                toast(t("Error"), { description: msg })
+            }
+        },
+        [mutate, t],
+    )
+
+    const rows = useMemo(() => data ?? [], [data])
+
+    return (
+        <div className="px-3">
+            <h1 className="mt-6 text-2xl font-semibold">{t("Transfer.Title")}</h1>
+            <p className="text-sm text-muted-foreground mt-1 max-w-2xl">
+                {t("Transfer.PageHint")}
+            </p>
+            <Table className="mt-6">
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>ID</TableHead>
+                        <TableHead>{t("ServerID")}</TableHead>
+                        <TableHead>{t("Transfer.From")}</TableHead>
+                        <TableHead>{t("Transfer.To")}</TableHead>
+                        <TableHead>{t("Transfer.Initiator")}</TableHead>
+                        <TableHead>{t("Status")}</TableHead>
+                        <TableHead>{t("Transfer.LastError")}</TableHead>
+                        <TableHead>{t("CreatedAt")}</TableHead>
+                        <TableHead>{t("Actions")}</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {rows.length === 0 ? (
+                        <TableRow>
+                            <TableCell colSpan={9} className="h-24 text-center">
+                                {t("NoResults")}
+                            </TableCell>
+                        </TableRow>
+                    ) : (
+                        rows.map((row) => {
+                            const meta = statusMeta[row.status]
+                            const isPending = row.status === ModelServerTransferStatusPending
+                            const isTerminalRevert =
+                                row.status === ModelServerTransferStatusFailed ||
+                                row.status === ModelServerTransferStatusTimeout ||
+                                row.status === ModelServerTransferStatusCancelled
+                            return (
+                                <TableRow key={row.id}>
+                                    <TableCell>{row.id}</TableCell>
+                                    <TableCell>{row.server_id}</TableCell>
+                                    <TableCell>{row.from_user_id}</TableCell>
+                                    <TableCell>{row.to_user_id}</TableCell>
+                                    <TableCell>{row.initiator_id}</TableCell>
+                                    <TableCell>
+                                        <Badge variant={meta.variant}>{t(meta.key)}</Badge>
+                                    </TableCell>
+                                    <TableCell className="max-w-xs truncate" title={row.last_error}>
+                                        {row.last_error || "-"}
+                                    </TableCell>
+                                    <TableCell>
+                                        {new Date(row.created_at).toLocaleString()}
+                                    </TableCell>
+                                    <TableCell className="space-x-2">
+                                        {isPending &&
+                                            (isAdmin || row.from_user_id === callerID) && (
+                                                <Button
+                                                    size="sm"
+                                                    variant="outline"
+                                                    onClick={() => onCancel(row.id)}
+                                                >
+                                                    {t("Cancel")}
+                                                </Button>
+                                            )}
+                                        {isTerminalRevert && isAdmin && (
+                                            <Button
+                                                size="sm"
+                                                variant="outline"
+                                                onClick={() => onRetry(row.id)}
+                                            >
+                                                {t("Transfer.Retry")}
+                                            </Button>
+                                        )}
+                                    </TableCell>
+                                </TableRow>
+                            )
+                        })
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}

src/routes/user.tsx

@@ -139,9 +139,9 @@ export default function UserPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/routes/waf.tsx

@@ -283,9 +283,9 @@ export default function WAFPage() {
                                         {header.isPlaceholder
                                             ? null
                                             : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
+                                                header.column.columnDef.header,
+                                                header.getContext(),
+                                            )}
                                     </TableHead>
                                 )
                             })}

src/test/batch-move-server-icon.test.tsx

@@ -0,0 +1,88 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { afterEach, beforeEach, expect, test, vi } from "vitest"
+
+const toastCalls: Array<{ title: string; description: string }> = []
+vi.mock("sonner", () => ({
+    toast: (title: string, opts?: { description?: string }) => {
+        toastCalls.push({ title, description: opts?.description ?? "" })
+    },
+}))
+
+vi.mock("react-i18next", () => ({
+    useTranslation: () => ({
+        t: (key: string, vars?: Record<string, unknown>) => {
+            if (vars && typeof vars.count === "number") {
+                return `${key}=${vars.count}`
+            }
+            return key
+        },
+    }),
+    initReactI18next: { type: "3rdParty", init: () => undefined },
+    Trans: ({ children }: { children?: React.ReactNode }) => children ?? null,
+}))
+
+const batchMoveServer = vi.fn()
+vi.mock("@/api/server", () => ({
+    batchMoveServer: (...args: unknown[]) => batchMoveServer(...args),
+}))
+
+import { BatchMoveServerIcon } from "@/components/batch-move-server-icon"
+
+beforeEach(() => {
+    toastCalls.length = 0
+    batchMoveServer.mockReset()
+})
+
+afterEach(() => {
+    document.body.innerHTML = ""
+})
+
+async function openDialogAndSubmit(serverIds: number[], toUser: number) {
+    render(<BatchMoveServerIcon serverIds={serverIds} />)
+    await act(async () => {
+        fireEvent.click(screen.getByRole("button"))
+    })
+    const userInput = await screen.findByPlaceholderText("User ID")
+    await act(async () => {
+        fireEvent.change(userInput, { target: { value: String(toUser) } })
+    })
+    const submit = screen.getByRole("button", { name: "Move" })
+    await act(async () => {
+        fireEvent.click(submit)
+    })
+    await waitFor(() => expect(toastCalls.length).toBeGreaterThan(0))
+}
+
+test("BatchMoveServer toast surfaces agent_too_old count so operator sees the failure", async () => {
+    batchMoveServer.mockResolvedValueOnce([
+        { server_id: 1, status: "agent_too_old", error: "agent build older than v1.18.0" },
+        { server_id: 2, status: "pending", transfer_id: 99 },
+    ])
+
+    await openDialogAndSubmit([1, 2], 300)
+
+    expect(batchMoveServer).toHaveBeenCalledOnce()
+    const summary = toastCalls[toastCalls.length - 1]
+    expect(summary, "submission must surface a toast").toBeDefined()
+    expect(summary.description, "toast must include the agent_too_old count").toContain(
+        "Transfer.AgentTooOldCount=1",
+    )
+    expect(summary.description).toContain("Transfer.PendingCount=1")
+})
+
+test("BatchMoveServer toast does not show Done fallback when every server is agent_too_old", async () => {
+    batchMoveServer.mockResolvedValueOnce([
+        { server_id: 1, status: "agent_too_old", error: "older than v1.18.0" },
+        { server_id: 2, status: "agent_too_old", error: "older than v1.18.0" },
+    ])
+
+    await openDialogAndSubmit([1, 2], 300)
+
+    const summary = toastCalls[toastCalls.length - 1]
+    expect(summary).toBeDefined()
+    expect(
+        summary.description,
+        "all-failed batch must NOT collapse to a generic Done label — operator would think it succeeded",
+    ).toContain("Transfer.AgentTooOldCount=2")
+    expect(summary.description).not.toBe("Done")
+})

src/test/fm.test.tsx

@@ -0,0 +1,246 @@
+import { act, render, waitFor } from "@testing-library/react"
+import { afterEach, beforeEach, expect, test, vi } from "vitest"
+
+type DivProps = React.ComponentPropsWithoutRef<"div"> & { asChild?: boolean }
+type ButtonProps = React.ComponentPropsWithoutRef<"button"> & {
+    asChild?: boolean
+    size?: string
+    variant?: string
+}
+type IconButtonProps = ButtonProps & { icon?: string }
+type SentWebSocketData = string | ArrayBufferLike | Blob | ArrayBufferView
+
+vi.mock("../components/ui/button", () => ({
+    Button: (props: ButtonProps) => {
+        const { asChild, size, variant, ...buttonProps } = props
+        void asChild
+        void size
+        void variant
+        return <button {...buttonProps} />
+    },
+}))
+vi.mock("../components/ui/input", () => ({
+    Input: (props: React.ComponentPropsWithoutRef<"input">) => <input {...props} />,
+}))
+vi.mock("../components/ui/table", () => ({
+    Table: (props: React.ComponentPropsWithoutRef<"table">) => <table {...props} />,
+    TableHeader: (props: React.ComponentPropsWithoutRef<"thead">) => <thead {...props} />,
+    TableBody: (props: React.ComponentPropsWithoutRef<"tbody">) => <tbody {...props} />,
+    TableRow: (props: React.ComponentPropsWithoutRef<"tr">) => <tr {...props} />,
+    TableCell: (props: React.ComponentPropsWithoutRef<"td">) => <td {...props} />,
+    TableHead: (props: React.ComponentPropsWithoutRef<"th">) => <th {...props} />,
+}))
+vi.mock("../components/ui/dropdown-menu", () => ({
+    DropdownMenu: (props: DivProps) => <div {...props} />,
+    DropdownMenuTrigger: (props: DivProps) => <div {...props} />,
+    DropdownMenuContent: (props: DivProps) => <div {...props} />,
+    DropdownMenuItem: (props: DivProps) => <div {...props} />,
+}))
+vi.mock("../components/ui/alert-dialog", () => ({
+    AlertDialog: (props: DivProps) => <div {...props} />,
+    AlertDialogTrigger: (props: DivProps) => <div {...props} />,
+    AlertDialogContent: (props: DivProps) => <div {...props} />,
+    AlertDialogHeader: (props: DivProps) => <div {...props} />,
+    AlertDialogFooter: (props: DivProps) => <div {...props} />,
+    AlertDialogTitle: (props: DivProps) => <div {...props} />,
+    AlertDialogDescription: (props: DivProps) => <div {...props} />,
+    AlertDialogCancel: (props: DivProps) => <div {...props} />,
+    AlertDialogAction: (props: DivProps) => <div {...props} />,
+}))
+vi.mock("../components/ui/drawer", () => ({
+    Drawer: (props: DivProps) => <div {...props} />,
+    DrawerContent: (props: DivProps) => <div {...props} />,
+    DrawerHeader: (props: DivProps) => <div {...props} />,
+    DrawerTitle: (props: DivProps) => <div {...props} />,
+    DrawerTrigger: (props: DivProps) => <div {...props} />,
+}))
+vi.mock("../components/xui/overlayless-sheet", () => ({
+    Sheet: (props: DivProps) => <div {...props} />,
+    SheetContent: (props: DivProps) => <div {...props} />,
+    SheetDescription: (props: DivProps) => <div {...props} />,
+    SheetHeader: (props: DivProps) => <div {...props} />,
+    SheetTitle: (props: DivProps) => <div {...props} />,
+    SheetTrigger: (props: DivProps) => <div {...props} />,
+}))
+vi.mock("../components/xui/filepath", () => ({
+    Filepath: () => <div data-testid="filepath" />,
+}))
+vi.mock("../components/xui/icon-button", () => ({
+    IconButton: (props: IconButtonProps) => {
+        const { asChild, icon, size, variant, ...buttonProps } = props
+        void asChild
+        void icon
+        void size
+        void variant
+        return <button {...buttonProps} />
+    },
+}))
+vi.mock("../components/xui/virtulized-data-table", () => ({
+    DataTable: () => <div data-testid="data-table" />,
+}))
+vi.mock("lucide-react", () => ({
+    File: () => <div data-testid="file-icon" />,
+    Folder: () => <div data-testid="folder-icon" />,
+}))
+
+const translate = (key: string) => key
+
+vi.mock("react-i18next", () => ({
+    useTranslation: () => ({ t: translate }),
+    initReactI18next: { type: "3rdParty", init: () => {} },
+}))
+
+vi.mock("sonner", () => ({ toast: vi.fn() }))
+vi.mock("@/lib/utils", () => ({
+    copyToClipboard: vi.fn(),
+    fm: {
+        parseFMList: async (buf: ArrayBufferLike) => {
+            const view = new DataView(buf)
+            const pathLength = view.getUint32(4, false)
+            const pathBytes = new Uint8Array(buf, 8, pathLength)
+
+            return { path: new TextDecoder().decode(pathBytes), fmList: [] }
+        },
+    },
+    fmWorker: new Worker(""),
+    formatPath: (path: string) => path,
+}))
+
+import { FMComponent } from "../components/fm"
+
+const webSockets: MockWebSocket[] = []
+
+class MockWebSocket extends EventTarget implements WebSocket {
+    static readonly CONNECTING = 0
+    static readonly OPEN = 1
+    static readonly CLOSING = 2
+    static readonly CLOSED = 3
+
+    readonly CONNECTING = MockWebSocket.CONNECTING
+    readonly OPEN = MockWebSocket.OPEN
+    readonly CLOSING = MockWebSocket.CLOSING
+    readonly CLOSED = MockWebSocket.CLOSED
+    readonly bufferedAmount = 0
+    readonly extensions = ""
+    readonly protocol = ""
+    readonly url: string
+
+    binaryType: BinaryType = "arraybuffer"
+    onclose: ((this: WebSocket, ev: CloseEvent) => unknown) | null = null
+    onerror: ((this: WebSocket, ev: Event) => unknown) | null = null
+    onmessage: ((this: WebSocket, ev: MessageEvent) => unknown) | null = null
+    onopen: ((this: WebSocket, ev: Event) => unknown) | null = null
+    readyState = MockWebSocket.CONNECTING
+    sent: SentWebSocketData[] = []
+
+    constructor(url: string | URL) {
+        super()
+        this.url = url.toString()
+        webSockets.push(this)
+    }
+
+    addEventListener<K extends keyof WebSocketEventMap>(
+        type: K,
+        listener: (this: WebSocket, ev: WebSocketEventMap[K]) => unknown,
+        options?: boolean | AddEventListenerOptions,
+    ): void
+    addEventListener(
+        type: string,
+        listener: EventListenerOrEventListenerObject | null,
+        options?: boolean | AddEventListenerOptions,
+    ): void {
+        super.addEventListener(type, listener, options)
+    }
+
+    removeEventListener<K extends keyof WebSocketEventMap>(
+        type: K,
+        listener: (this: WebSocket, ev: WebSocketEventMap[K]) => unknown,
+        options?: boolean | EventListenerOptions,
+    ): void
+    removeEventListener(
+        type: string,
+        listener: EventListenerOrEventListenerObject | null,
+        options?: boolean | EventListenerOptions,
+    ): void {
+        super.removeEventListener(type, listener, options)
+    }
+
+    close(): void {
+        this.readyState = MockWebSocket.CLOSED
+    }
+
+    open(): void {
+        this.readyState = MockWebSocket.OPEN
+        this.onopen?.call(this, new Event("open"))
+    }
+
+    send(data: SentWebSocketData): void {
+        this.sent.push(data)
+    }
+}
+
+beforeEach(() => {
+    webSockets.length = 0
+    globalThis.WebSocket = MockWebSocket
+})
+
+afterEach(() => {
+    vi.clearAllMocks()
+})
+
+const encodeFileNameMessage = (path: string) => {
+    const identifier = new Uint8Array([0x4e, 0x5a, 0x46, 0x4e])
+    const pathBytes = new TextEncoder().encode(path)
+    const payload = new Uint8Array(identifier.length + 4 + pathBytes.length)
+    payload.set(identifier, 0)
+    new DataView(payload.buffer).setUint32(identifier.length, pathBytes.length, false)
+    payload.set(pathBytes, identifier.length + 4)
+    return payload.buffer
+}
+
+const encodeCompleteMessage = () => new Uint8Array([0x4e, 0x5a, 0x55, 0x50]).buffer
+
+const decodeListPath = (data: SentWebSocketData) => {
+    if (!ArrayBuffer.isView(data)) return null
+
+    const bytes = new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+    if (bytes[0] !== 0) return null
+
+    return new TextDecoder().decode(bytes.slice(1))
+}
+
+test("FM websocket lifecycle reuses the socket on path changes", async () => {
+    const { unmount } = render(<FMComponent wsUrl="/ws/file/test" />)
+
+    await waitFor(() => {
+        expect(webSockets).toHaveLength(1)
+    })
+
+    const socket = webSockets[0]
+    act(() => {
+        socket.open()
+    })
+
+    await act(async () => {
+        await socket.onmessage?.call(
+            socket,
+            new MessageEvent("message", { data: encodeFileNameMessage("/new/path") }),
+        )
+    })
+
+    await waitFor(() => {
+        expect(webSockets).toHaveLength(1)
+        expect(decodeListPath(socket.sent[socket.sent.length - 1])).toBe("/new/path")
+    })
+
+    socket.sent.length = 0
+    await act(async () => {
+        await socket.onmessage?.call(socket, new MessageEvent("message", { data: encodeCompleteMessage() }))
+    })
+
+    expect(webSockets).toHaveLength(1)
+    expect(decodeListPath(socket.sent[socket.sent.length - 1])).toBe("/new/path")
+
+    unmount()
+    expect(socket.readyState).toBe(MockWebSocket.CLOSED)
+})

src/test/setup.ts

@@ -0,0 +1,36 @@
+class TestWorker implements Worker {
+    onmessage: ((this: Worker, ev: MessageEvent) => unknown) | null = null
+    onmessageerror: ((this: Worker, ev: MessageEvent) => unknown) | null = null
+    onerror: ((this: AbstractWorker, ev: ErrorEvent) => unknown) | null = null
+
+    addEventListener(): void {}
+    removeEventListener(): void {}
+    dispatchEvent(): boolean {
+        return true
+    }
+    postMessage(): void {}
+    terminate(): void {}
+}
+
+class TestResizeObserver implements ResizeObserver {
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+}
+
+class TestIntersectionObserver implements IntersectionObserver {
+    readonly root: Element | Document | null = null
+    readonly rootMargin = ""
+    readonly thresholds: ReadonlyArray<number> = []
+
+    observe(): void {}
+    unobserve(): void {}
+    disconnect(): void {}
+    takeRecords(): IntersectionObserverEntry[] {
+        return []
+    }
+}
+
+globalThis.Worker = TestWorker
+globalThis.ResizeObserver = TestResizeObserver
+globalThis.IntersectionObserver = TestIntersectionObserver

src/test/terminal.test.tsx

@@ -0,0 +1,103 @@
+import { render } from "@testing-library/react"
+import { afterEach, beforeEach, expect, test, vi } from "vitest"
+
+vi.mock("sonner", () => ({ toast: () => undefined }))
+
+vi.mock("@/lib/utils", () => ({
+    sleep: () => Promise.resolve(),
+    cn: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}))
+
+const attachAddonInstances: { ws: WebSocket }[] = []
+vi.mock("@xterm/addon-attach", () => ({
+    AttachAddon: class {
+        ws: WebSocket
+        constructor(ws: WebSocket) {
+            this.ws = ws
+            attachAddonInstances.push(this)
+        }
+        activate() {}
+        dispose() {}
+    },
+}))
+
+vi.mock("@xterm/addon-fit", () => ({
+    FitAddon: class {
+        activate() {}
+        dispose() {}
+        fit() {}
+        proposeDimensions() {
+            return { rows: 24, cols: 80 }
+        }
+    },
+}))
+
+vi.mock("@xterm/xterm", () => ({
+    Terminal: class {
+        loadAddon() {}
+        open() {}
+        dispose() {}
+    },
+}))
+
+class FakeWebSocket {
+    static instances: FakeWebSocket[] = []
+    url: string
+    binaryType = "arraybuffer"
+    onopen: ((ev: Event) => unknown) | null = null
+    onclose: ((ev: Event) => unknown) | null = null
+    onerror: ((ev: Event) => unknown) | null = null
+    onmessage: ((ev: MessageEvent) => unknown) | null = null
+    readyState = 0
+    closeCalls = 0
+
+    constructor(url: string | URL) {
+        this.url = url.toString()
+        FakeWebSocket.instances.push(this)
+    }
+
+    close() {
+        this.closeCalls += 1
+        this.readyState = 3
+    }
+
+    send() {}
+    addEventListener() {}
+    removeEventListener() {}
+    dispatchEvent() {
+        return true
+    }
+}
+
+beforeEach(() => {
+    FakeWebSocket.instances = []
+    attachAddonInstances.length = 0
+    ;(globalThis as { WebSocket: typeof WebSocket }).WebSocket =
+        FakeWebSocket as unknown as typeof WebSocket
+})
+
+afterEach(() => {
+    vi.clearAllMocks()
+})
+
+test("XtermComponent closes the previous WebSocket and re-attaches xterm when wsUrl changes", async () => {
+    const { XtermComponent } = await import("../components/terminal")
+    const noop = () => undefined
+
+    const { rerender } = render(
+        <XtermComponent wsUrl="/api/v1/ws/terminal/session-1" setClose={noop} />,
+    )
+
+    expect(FakeWebSocket.instances).toHaveLength(1)
+    const firstSocket = FakeWebSocket.instances[0]
+    expect(attachAddonInstances).toHaveLength(1)
+    expect(attachAddonInstances[0].ws).toBe(firstSocket as unknown as WebSocket)
+
+    rerender(<XtermComponent wsUrl="/api/v1/ws/terminal/session-2" setClose={noop} />)
+
+    expect(FakeWebSocket.instances).toHaveLength(2)
+    const secondSocket = FakeWebSocket.instances[1]
+    expect(firstSocket.closeCalls).toBeGreaterThanOrEqual(1)
+    expect(attachAddonInstances).toHaveLength(2)
+    expect(attachAddonInstances[1].ws).toBe(secondSocket as unknown as WebSocket)
+})

src/test/transfer.test.tsx

@@ -0,0 +1,139 @@
+import { act, render, screen, waitFor } from "@testing-library/react"
+import { afterEach, beforeEach, expect, test, vi } from "vitest"
+
+const toastCalls: Array<{ title: string; description: string }> = []
+vi.mock("sonner", () => ({
+    toast: (title: string, opts?: { description?: string }) => {
+        toastCalls.push({ title, description: opts?.description ?? "" })
+    },
+}))
+
+vi.mock("react-i18next", () => ({
+    useTranslation: () => ({
+        t: (key: string) => key,
+    }),
+    initReactI18next: { type: "3rdParty", init: () => undefined },
+    Trans: ({ children }: { children?: React.ReactNode }) => children ?? null,
+}))
+
+const cancelServerTransfer = vi.fn()
+const retryServerTransfer = vi.fn()
+vi.mock("@/api/transfer", () => ({
+    cancelServerTransfer: (...args: unknown[]) => cancelServerTransfer(...args),
+    retryServerTransfer: (...args: unknown[]) => retryServerTransfer(...args),
+}))
+
+const swrFetcher = vi.fn()
+vi.mock("@/api/api", () => ({
+    swrFetcher: (...args: unknown[]) => swrFetcher(...args),
+}))
+
+vi.mock("swr", () => ({
+    default: (_key: string, _fetcher: unknown) => ({
+        data: mockedRows,
+        mutate: vi.fn(),
+        error: undefined,
+    }),
+}))
+
+let mockProfile: { id: number; role: number } | undefined
+vi.mock("@/hooks/useAuth", () => ({
+    useAuth: () => ({ profile: mockProfile }),
+}))
+vi.mock("@/hooks/useMainStore", () => ({
+    useMainStore: (selector?: (s: { profile?: { id: number; role: number } }) => unknown) => {
+        const store = { profile: mockProfile }
+        return selector ? selector(store) : store
+    },
+}))
+
+import type { ModelServerTransfer } from "@/types"
+
+let mockedRows: ModelServerTransfer[] = []
+
+beforeEach(() => {
+    toastCalls.length = 0
+    cancelServerTransfer.mockReset()
+    retryServerTransfer.mockReset()
+    mockedRows = []
+    mockProfile = undefined
+})
+
+afterEach(() => {
+    document.body.innerHTML = ""
+})
+
+function makeRow(overrides: Partial<ModelServerTransfer>): ModelServerTransfer {
+    return {
+        id: 1,
+        server_id: 10,
+        from_user_id: 100,
+        to_user_id: 200,
+        initiator_id: 100,
+        status: 0,
+        last_error: "",
+        acked_at: "",
+        created_at: "2024-01-01T00:00:00Z",
+        updated_at: "2024-01-01T00:00:00Z",
+        ...overrides,
+    } as ModelServerTransfer
+}
+
+async function renderPage() {
+    const { default: TransferPage } = await import("@/routes/transfer")
+    await act(async () => {
+        render(<TransferPage />)
+    })
+    await waitFor(() => {
+        expect(screen.getByText("Transfer.Title")).toBeTruthy()
+    })
+}
+
+test("non-admin member who is the FromUserID sees Cancel for pending rows but NOT Retry for terminal rows", async () => {
+    mockProfile = { id: 100, role: 1 }
+    mockedRows = [
+        makeRow({ id: 1, status: 0, from_user_id: 100 }),
+        makeRow({ id: 2, status: 2, from_user_id: 100 }),
+        makeRow({ id: 3, status: 4, from_user_id: 100 }),
+    ]
+
+    await renderPage()
+
+    expect(screen.queryAllByRole("button", { name: "Cancel" }).length).toBeGreaterThan(0)
+    expect(
+        screen.queryAllByRole("button", { name: "Transfer.Retry" }),
+        "Retry is admin-only on the backend; rendering it for members produces guaranteed permission_denied on click",
+    ).toHaveLength(0)
+})
+
+test("non-admin member who is only the ToUserID or InitiatorID sees neither Cancel nor Retry", async () => {
+    mockProfile = { id: 200, role: 1 }
+    mockedRows = [
+        makeRow({ id: 1, status: 0, from_user_id: 100, to_user_id: 200 }),
+        makeRow({ id: 2, status: 3, from_user_id: 100, to_user_id: 200 }),
+    ]
+
+    await renderPage()
+
+    expect(
+        screen.queryAllByRole("button", { name: "Cancel" }),
+        "backend cancelServerTransfer rejects non-admins that are not the FromUserID; UI must not pretend it works",
+    ).toHaveLength(0)
+    expect(
+        screen.queryAllByRole("button", { name: "Transfer.Retry" }),
+        "backend retryServerTransfer is admin-only; non-admin must not see the button",
+    ).toHaveLength(0)
+})
+
+test("admin sees both Cancel for pending and Retry for terminal", async () => {
+    mockProfile = { id: 1, role: 0 }
+    mockedRows = [
+        makeRow({ id: 1, status: 0 }),
+        makeRow({ id: 2, status: 2 }),
+    ]
+
+    await renderPage()
+
+    expect(screen.queryAllByRole("button", { name: "Cancel" }).length).toBe(1)
+    expect(screen.queryAllByRole("button", { name: "Transfer.Retry" }).length).toBe(1)
+})

src/types/server.ts

@@ -16,7 +16,7 @@ export const AgentConfigSchema = z.object({
                 try {
                     JSON.parse(val)
                     return true
-                } catch (e) {
+                } catch {
                     return false
                 }
             },
@@ -33,7 +33,7 @@ export const AgentConfigSchema = z.object({
                 try {
                     JSON.parse(val)
                     return true
-                } catch (e) {
+                } catch {
                     return false
                 }
             },

vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, mergeConfig } from "vitest/config"
+
+import viteConfig from "./vite.config.ts"
+
+export default mergeConfig(
+    viteConfig,
+    defineConfig({
+        test: {
+            environment: "jsdom",
+            globals: true,
+            setupFiles: ["./src/test/setup.ts"],
+        },
+    }),
+)