diff --git a/web/biome.json b/web/biome.json
index 7d10a3fc..652dfcd4 100644
--- a/web/biome.json
+++ b/web/biome.json
@@ -21,7 +21,7 @@
   "formatter": {
     "enabled": true,
     "indentStyle": "space",
-    "includes": ["!**/test/snapshots/**/*"]
+    "indentWidth": 2
   },
   "linter": {
     "enabled": true,
diff --git a/web/bun.lockb b/web/bun.lockb
index f00f21a7..2cfc647b 100755
Binary files a/web/bun.lockb and b/web/bun.lockb differ
diff --git a/web/copy-build.js b/web/copy-build.js
index 3be0c363..afade1e0 100644
--- a/web/copy-build.js
+++ b/web/copy-build.js
@@ -1,4 +1,11 @@
-import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import {
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
 import { cp } from "node:fs/promises";
 import { join, resolve } from "node:path";
 
@@ -44,7 +51,9 @@ async function main() {
   const INDEX_DEST = join(TEMPLATES_DIR, "index.html");
 
   if (!existsSync(INDEX_SRC)) {
-    console.error(`Error: ${INDEX_SRC} does not exist. Make sure you built the frontend project first.`);
+    console.error(
+      `Error: ${INDEX_SRC} does not exist. Make sure you built the frontend project first.`,
+    );
     process.exit(1);
   }
 
diff --git a/web/src/components/code-viewer.tsx b/web/src/components/code-viewer.tsx
index 9e1f3440..87f65533 100644
--- a/web/src/components/code-viewer.tsx
+++ b/web/src/components/code-viewer.tsx
@@ -1,14 +1,20 @@
-import type {VariantProps} from "class-variance-authority";
-import {Check, Copy} from "lucide-react";
-import {type HTMLProps, type ReactNode, useCallback, useEffect, useState} from "react";
-import {CopyToClipboard} from "react-copy-to-clipboard";
-import {useTranslation} from "react-i18next";
-import {PrismLight as SyntaxHighlighter} from "react-syntax-highlighter";
+import type { VariantProps } from "class-variance-authority";
+import { Check, Copy } from "lucide-react";
+import {
+  type HTMLProps,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import java from "react-syntax-highlighter/dist/esm/languages/prism/java";
-import {materialDark} from "react-syntax-highlighter/dist/esm/styles/prism";
-import {toast} from "sonner";
-import {Button, type buttonVariants} from "@/components/ui/button";
-import {cn} from "@/lib/utils";
+import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { toast } from "sonner";
+import { Button, type buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 SyntaxHighlighter.registerLanguage("java", java);
 interface CopyButtonProps extends React.ComponentProps<"button"> {
@@ -16,7 +22,9 @@ interface CopyButtonProps extends React.ComponentProps<"button"> {
   src?: string;
 }
 
-export function CopyButton({ value }: Readonly<CopyButtonProps & VariantProps<typeof buttonVariants>>) {
+export function CopyButton({
+  value,
+}: Readonly<CopyButtonProps & VariantProps<typeof buttonVariants>>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
@@ -60,12 +68,18 @@ export default function CodeViewer({
   showLineNumbers = true,
   wrapLongLines = true,
 }: Readonly<CodeViewerProps>) {
-  const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined = wrapLongLines
-    ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
-    : undefined;
+  const lineProps: lineTagPropsFunction | HTMLProps<HTMLElement> | undefined =
+    wrapLongLines
+      ? { style: { overflowWrap: "break-word", whiteSpace: "pre-wrap" } }
+      : undefined;
   return (
     <div className="rounded-lg border">
-      <div className={cn("flex items-center border-b p-2 justify-end", header && "justify-between")}>
+      <div
+        className={cn(
+          "flex items-center border-b p-2 justify-end",
+          header && "justify-between",
+        )}
+      >
         {header}
         <div className="flex items-center gap-2">
           {button}
diff --git a/web/src/components/copyable-field.tsx b/web/src/components/copyable-field.tsx
index afd2f569..7c26e4b4 100644
--- a/web/src/components/copyable-field.tsx
+++ b/web/src/components/copyable-field.tsx
@@ -12,7 +12,11 @@ interface CopyableFieldProps {
   text?: string;
 }
 
-export function CopyableField({ label, value, text }: Readonly<CopyableFieldProps>) {
+export function CopyableField({
+  label,
+  value,
+  text,
+}: Readonly<CopyableFieldProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
@@ -40,8 +44,18 @@ export function CopyableField({ label, value, text }: Readonly<CopyableFieldProp
         <Label className="text-sm text-muted-foreground">{label}：</Label>
         {value && (
           <CopyToClipboard text={value} onCopy={handleCopy}>
-            <Button variant="ghost" size="icon" type="button" className="h-8 w-8" disabled={hasCopied}>
-              {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-8 w-8"
+              disabled={hasCopied}
+            >
+              {hasCopied ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
             </Button>
           </CopyToClipboard>
         )}
diff --git a/web/src/components/magicui/line-shadow-text.tsx b/web/src/components/magicui/line-shadow-text.tsx
index f034cd3f..c8618d47 100644
--- a/web/src/components/magicui/line-shadow-text.tsx
+++ b/web/src/components/magicui/line-shadow-text.tsx
@@ -1,7 +1,9 @@
-import {type MotionProps, motion } from "motion/react";
-import {cn} from "@/lib/utils";
+import { type MotionProps, motion } from "motion/react";
+import { cn } from "@/lib/utils";
 
-interface LineShadowTextProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>, MotionProps {
+interface LineShadowTextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+    MotionProps {
   shadowColor?: string;
   as?: React.ElementType;
 }
diff --git a/web/src/components/magicui/rainbow-button.tsx b/web/src/components/magicui/rainbow-button.tsx
index 3a67dc72..57bb689e 100644
--- a/web/src/components/magicui/rainbow-button.tsx
+++ b/web/src/components/magicui/rainbow-button.tsx
@@ -1,7 +1,7 @@
-import {Slot} from "@radix-ui/react-slot";
-import {cva, type VariantProps} from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 import React from "react";
-import {cn} from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 const rainbowButtonVariants = cva(
   cn(
diff --git a/web/src/components/memshell/main-config-card.tsx b/web/src/components/memshell/main-config-card.tsx
index 6396aab3..5a8c8936 100644
--- a/web/src/components/memshell/main-config-card.tsx
+++ b/web/src/components/memshell/main-config-card.tsx
@@ -1,41 +1,56 @@
 import {
-    ArrowUpRightIcon,
-    AxeIcon,
-    CommandIcon,
-    NetworkIcon,
-    ServerIcon,
-    ShieldOffIcon,
-    SwordIcon,
-    WaypointsIcon,
-    ZapIcon,
+  ArrowUpRightIcon,
+  AxeIcon,
+  CommandIcon,
+  NetworkIcon,
+  ServerIcon,
+  ShieldOffIcon,
+  SwordIcon,
+  WaypointsIcon,
+  ZapIcon,
 } from "lucide-react";
-import {type JSX, useCallback, useEffect, useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {AntSwordTabContent} from "@/components/memshell/tabs/antsword-tab";
-import {BehinderTabContent} from "@/components/memshell/tabs/behinder-tab";
-import {CommandTabContent} from "@/components/memshell/tabs/command-tab";
+import { type JSX, useCallback, useEffect, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { AntSwordTabContent } from "@/components/memshell/tabs/antsword-tab";
+import { BehinderTabContent } from "@/components/memshell/tabs/behinder-tab";
+import { CommandTabContent } from "@/components/memshell/tabs/command-tab";
 import CustomTabContent from "@/components/memshell/tabs/custom-tab";
-import {GodzillaTabContent} from "@/components/memshell/tabs/godzilla-tab";
-import {NeoRegTabContent} from "@/components/memshell/tabs/neoreg-tab";
-import {Suo5TabContent} from "@/components/memshell/tabs/suo5-tab";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import { GodzillaTabContent } from "@/components/memshell/tabs/godzilla-tab";
+import { NeoRegTabContent } from "@/components/memshell/tabs/neoreg-tab";
+import { Suo5TabContent } from "@/components/memshell/tabs/suo5-tab";
 import {
-    FormControl,
-    FormDescription,
-    FormField,
-    FormFieldItem,
-    FormFieldLabel,
-    FormItem,
-    FormLabel,
-    FormMessage,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@/components/ui/form.tsx";
-import {Label} from "@/components/ui/label.tsx";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
-import {Switch} from "@/components/ui/switch.tsx";
-import {Tabs, TabsList, TabsTrigger} from "@/components/ui/tabs";
-import {type MainConfig, type ServerConfig, ShellToolType} from "@/types/memshell";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { Label } from "@/components/ui/label.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  type MainConfig,
+  type ServerConfig,
+  ShellToolType,
+} from "@/types/memshell";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 const shellToolIcons: Record<ShellToolType, JSX.Element> = {
   [ShellToolType.Behinder]: <ShieldOffIcon className="h-4 w-4" />,
@@ -79,7 +94,9 @@ export default function MainConfigCard({
   const shellTool = form.watch("shellTool");
   const { t } = useTranslation();
 
-  const [serverVersionOptions, setServerVersionOptions] = useState(defaultServerVersionOptions);
+  const [serverVersionOptions, setServerVersionOptions] = useState(
+    defaultServerVersionOptions,
+  );
 
   // 处理一下 shellTypes 由于 server 或 shellTool 变更时无法正常为 form.shellType 赋值的问题
   useEffect(() => {
@@ -95,7 +112,10 @@ export default function MainConfigCard({
         setShellToolMap(newShellToolMap);
 
         const newShellTools = Object.keys(newShellToolMap);
-        setShellTools([...newShellTools.map((tool) => tool as ShellToolType), ShellToolType.Custom]);
+        setShellTools([
+          ...newShellTools.map((tool) => tool as ShellToolType),
+          ShellToolType.Custom,
+        ]);
 
         const currentShellTool = form.getValues("shellTool");
 
@@ -233,10 +253,6 @@ export default function MainConfigCard({
     [form, servers, shellToolMap],
   );
 
-  const debugId = useId();
-  const bypassId = useId();
-  const shrinkId = useId();
-
   return (
     <FormProvider {...form}>
       <Card>
diff --git a/web/src/components/memshell/package-config-card.tsx b/web/src/components/memshell/package-config-card.tsx
index 7934a5be..ce287821 100644
--- a/web/src/components/memshell/package-config-card.tsx
+++ b/web/src/components/memshell/package-config-card.tsx
@@ -1,12 +1,22 @@
-import {PackageIcon} from "lucide-react";
-import {useEffect, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
-import {FormControl, FormField, FormItem, FormLabel} from "@/components/ui/form.tsx";
-import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group.tsx";
-import type {PackerConfig} from "@/types/memshell";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { PackageIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form.tsx";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group.tsx";
+import type { PackerConfig } from "@/types/memshell";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 type Option = {
   name: string;
@@ -49,7 +59,10 @@ export default function PackageConfigCard({
 
     setOptions(mappedOptions);
     const currentValue = form.getValues("packingMethod");
-    if (filteredOptions.length > 0 && (!currentValue || !filteredOptions.includes(currentValue))) {
+    if (
+      filteredOptions.length > 0 &&
+      (!currentValue || !filteredOptions.includes(currentValue))
+    ) {
       form.setValue("packingMethod", filteredOptions[0]);
     }
   }, [form, packerConfig, server, shellType, t]);
@@ -78,7 +91,10 @@ export default function PackageConfigCard({
                       className="grid grid-cols-2 md:grid-cols-3"
                     >
                       {options.map(({ name, value }) => (
-                        <FormItem key={value} className="flex items-center space-x-3 space-y-0">
+                        <FormItem
+                          key={value}
+                          className="flex items-center space-x-3 space-y-0"
+                        >
                           <FormControl>
                             <RadioGroupItem value={value} id={value} />
                           </FormControl>
@@ -96,7 +112,9 @@ export default function PackageConfigCard({
         ) : (
           <div className="flex items-center justify-center p-4 space-x-2">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-            <span className="text-sm text-muted-foreground">{t("loading")}</span>
+            <span className="text-sm text-muted-foreground">
+              {t("loading")}
+            </span>
           </div>
         )}
       </CardContent>
diff --git a/web/src/components/memshell/quick-usage.tsx b/web/src/components/memshell/quick-usage.tsx
index d3f993b2..e34f0c44 100644
--- a/web/src/components/memshell/quick-usage.tsx
+++ b/web/src/components/memshell/quick-usage.tsx
@@ -1,6 +1,11 @@
 import { ScrollTextIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
 
 export function QuickUsage() {
   const { t } = useTranslation();
diff --git a/web/src/components/memshell/results/agent.tsx b/web/src/components/memshell/results/agent.tsx
index 1656a471..dd0db625 100644
--- a/web/src/components/memshell/results/agent.tsx
+++ b/web/src/components/memshell/results/agent.tsx
@@ -1,10 +1,10 @@
-import {ScrollTextIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Separator} from "@/components/ui/separator";
-import {downloadBytes, formatBytes} from "@/lib/utils";
-import type {MemShellResult} from "@/types/memshell";
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { downloadBytes, formatBytes } from "@/lib/utils";
+import type { MemShellResult } from "@/types/memshell";
 
 export function AgentResult({
   packMethod,
diff --git a/web/src/components/memshell/results/basic-info.tsx b/web/src/components/memshell/results/basic-info.tsx
index 9307bb0a..3c080c19 100644
--- a/web/src/components/memshell/results/basic-info.tsx
+++ b/web/src/components/memshell/results/basic-info.tsx
@@ -1,20 +1,20 @@
-import {FileTextIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
-import {Separator} from "@/components/ui/separator";
-import {shouldHidden} from "@/lib/utils";
+import { FileTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { shouldHidden } from "@/lib/utils";
 import {
-    type AntSwordShellToolConfig,
-    type BehinderShellToolConfig,
-    type CommandShellToolConfig,
-    type GodzillaShellToolConfig,
-    type MemShellResult,
-    type NeoreGeorgShellToolConfig,
-    ShellToolType,
-    type Suo5ShellToolConfig,
+  type AntSwordShellToolConfig,
+  type BehinderShellToolConfig,
+  type CommandShellToolConfig,
+  type GodzillaShellToolConfig,
+  type MemShellResult,
+  type NeoreGeorgShellToolConfig,
+  ShellToolType,
+  type Suo5ShellToolConfig,
 } from "@/types/memshell";
-import {CopyableField} from "../../copyable-field";
-import {FeedbackAlert} from "./feedback-alert";
+import { CopyableField } from "../../copyable-field";
+import { FeedbackAlert } from "./feedback-alert";
 
 export function BasicInfo({ generateResult }: Readonly<{ generateResult?: MemShellResult }>) {
   const { t } = useTranslation();
diff --git a/web/src/components/memshell/results/jar-result.tsx b/web/src/components/memshell/results/jar-result.tsx
index 56e0376a..dab152b0 100644
--- a/web/src/components/memshell/results/jar-result.tsx
+++ b/web/src/components/memshell/results/jar-result.tsx
@@ -1,7 +1,7 @@
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {downloadBytes} from "@/lib/utils";
-import type {MemShellResult} from "@/types/memshell";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { downloadBytes } from "@/lib/utils";
+import type { MemShellResult } from "@/types/memshell";
 
 export function JarResult({
   packResult,
diff --git a/web/src/components/memshell/results/multi-packer.tsx b/web/src/components/memshell/results/multi-packer.tsx
index b220abff..46f93f21 100644
--- a/web/src/components/memshell/results/multi-packer.tsx
+++ b/web/src/components/memshell/results/multi-packer.tsx
@@ -1,7 +1,14 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CodeViewer from "@/components/code-viewer";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 export function MultiPackResult({
   allPackResults,
   packMethod,
@@ -30,7 +37,9 @@ export function MultiPackResult({
           <Select
             onValueChange={(value) => {
               setSelectedMethod(value);
-              setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
+              setPackResult(
+                allPackResults?.[value as keyof typeof allPackResults] ?? "",
+              );
             }}
             value={selectedMethod}
           >
diff --git a/web/src/components/memshell/results/result-component.tsx b/web/src/components/memshell/results/result-component.tsx
index 7930e353..dbba5d59 100644
--- a/web/src/components/memshell/results/result-component.tsx
+++ b/web/src/components/memshell/results/result-component.tsx
@@ -1,9 +1,9 @@
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import CodeViewer from "@/components/code-viewer";
-import type {MemShellResult} from "@/types/memshell";
-import {AgentResult} from "./agent";
-import {JarResult} from "./jar-result";
-import {MultiPackResult} from "./multi-packer";
+import type { MemShellResult } from "@/types/memshell";
+import { AgentResult } from "./agent";
+import { JarResult } from "./jar-result";
+import { MultiPackResult } from "./multi-packer";
 
 export function ResultComponent({
   packResult,
@@ -19,16 +19,32 @@ export function ResultComponent({
   const showCode = packMethod === "JSP";
   const isAgent = packMethod.startsWith("Agent");
   const isJar = packMethod === "Jar";
-  const { t } =  useTranslation();
+  const { t } = useTranslation();
   if (allPackResults) {
-    return <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} />;
+    return (
+      <MultiPackResult
+        allPackResults={allPackResults}
+        packMethod={packMethod}
+      />
+    );
   }
 
   if (isAgent) {
-    return <AgentResult packMethod={packMethod} packResult={packResult ?? ""} generateResult={generateResult} />;
+    return (
+      <AgentResult
+        packMethod={packMethod}
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
   }
   if (isJar) {
-    return <JarResult packResult={packResult ?? ""} generateResult={generateResult} />;
+    return (
+      <JarResult
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
   }
   if (!isAgent && !isJar) {
     return (
diff --git a/web/src/components/memshell/shell-result.tsx b/web/src/components/memshell/shell-result.tsx
index de47dd1d..e575ab56 100644
--- a/web/src/components/memshell/shell-result.tsx
+++ b/web/src/components/memshell/shell-result.tsx
@@ -1,15 +1,20 @@
-import {DownloadIcon} from "lucide-react";
-import {useTranslation} from "react-i18next";
-import {toast} from "sonner";
+import { DownloadIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 
-import {QuickUsage} from "@/components/memshell/quick-usage";
-import {Button} from "@/components/ui/button.tsx";
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
-import {downloadBytes} from "@/lib/utils.ts";
-import type {MemShellResult} from "@/types/memshell";
+import { QuickUsage } from "@/components/memshell/quick-usage";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { downloadBytes } from "@/lib/utils.ts";
+import type { MemShellResult } from "@/types/memshell";
 import CodeViewer from "../code-viewer";
-import {BasicInfo} from "./results/basic-info";
-import {ResultComponent} from "./results/result-component";
+import { BasicInfo } from "./results/basic-info";
+import { ResultComponent } from "./results/result-component";
 
 export default function ShellResult({
   packResult,
diff --git a/web/src/components/memshell/tabs/antsword-tab.tsx b/web/src/components/memshell/tabs/antsword-tab.tsx
index 4acba30f..31919971 100644
--- a/web/src/components/memshell/tabs/antsword-tab.tsx
+++ b/web/src/components/memshell/tabs/antsword-tab.tsx
@@ -1,13 +1,18 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {TabsContent} from "@/components/ui/tabs";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function AntSwordTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/behinder-tab.tsx b/web/src/components/memshell/tabs/behinder-tab.tsx
index 131511d9..c85d7418 100644
--- a/web/src/components/memshell/tabs/behinder-tab.tsx
+++ b/web/src/components/memshell/tabs/behinder-tab.tsx
@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {TabsContent} from "@/components/ui/tabs";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function BehinderTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/classname-field.tsx b/web/src/components/memshell/tabs/classname-field.tsx
index d4717c04..264eb170 100644
--- a/web/src/components/memshell/tabs/classname-field.tsx
+++ b/web/src/components/memshell/tabs/classname-field.tsx
@@ -1,11 +1,15 @@
-import {ChevronDown, ChevronUp, Settings} from "lucide-react";
-import {Fragment, useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Button} from "@/components/ui/button";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { ChevronDown, ChevronUp, Settings } from "lucide-react";
+import { Fragment, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
   const { t } = useTranslation();
diff --git a/web/src/components/memshell/tabs/command-tab.tsx b/web/src/components/memshell/tabs/command-tab.tsx
index 2f58c475..33279ed2 100644
--- a/web/src/components/memshell/tabs/command-tab.tsx
+++ b/web/src/components/memshell/tabs/command-tab.tsx
@@ -1,16 +1,27 @@
-import {useQuery} from "@tanstack/react-query";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
-import {TabsContent} from "@/components/ui/tabs";
-import {env} from "@/config";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { useQuery } from "@tanstack/react-query";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TabsContent } from "@/components/ui/tabs";
+import { env } from "@/config";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function CommandTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/custom-tab.tsx b/web/src/components/memshell/tabs/custom-tab.tsx
index d95008a7..8ab3e11f 100644
--- a/web/src/components/memshell/tabs/custom-tab.tsx
+++ b/web/src/components/memshell/tabs/custom-tab.tsx
@@ -1,17 +1,23 @@
-import {t} from "i18next";
-import {useId, useState} from "react";
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel, FormMessage} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {Label} from "@/components/ui/label";
-import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group";
-import {TabsContent} from "@/components/ui/tabs";
-import {Textarea} from "@/components/ui/textarea";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export default function CustomTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/godzilla-tab.tsx b/web/src/components/memshell/tabs/godzilla-tab.tsx
index 7aea7c4a..6a34fdc4 100644
--- a/web/src/components/memshell/tabs/godzilla-tab.tsx
+++ b/web/src/components/memshell/tabs/godzilla-tab.tsx
@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {TabsContent} from "@/components/ui/tabs";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function GodzillaTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/neoreg-tab.tsx b/web/src/components/memshell/tabs/neoreg-tab.tsx
index 2b73565a..13c0ec9f 100644
--- a/web/src/components/memshell/tabs/neoreg-tab.tsx
+++ b/web/src/components/memshell/tabs/neoreg-tab.tsx
@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {TabsContent} from "@/components/ui/tabs";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function NeoRegTabContent({
   form,
diff --git a/web/src/components/memshell/tabs/shelltype-field.tsx b/web/src/components/memshell/tabs/shelltype-field.tsx
index 6702dc85..ec5553f2 100644
--- a/web/src/components/memshell/tabs/shelltype-field.tsx
+++ b/web/src/components/memshell/tabs/shelltype-field.tsx
@@ -1,8 +1,19 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {FormControl, FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form.tsx";
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form.tsx";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.tsx";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function ShellTypeFormField({
   form,
diff --git a/web/src/components/memshell/tabs/suo5-tab.tsx b/web/src/components/memshell/tabs/suo5-tab.tsx
index 37c7ed3a..f02a8424 100644
--- a/web/src/components/memshell/tabs/suo5-tab.tsx
+++ b/web/src/components/memshell/tabs/suo5-tab.tsx
@@ -1,13 +1,13 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {Card, CardContent} from "@/components/ui/card";
-import {FormField, FormFieldItem, FormFieldLabel} from "@/components/ui/form";
-import {Input} from "@/components/ui/input";
-import {TabsContent} from "@/components/ui/tabs";
-import type {MemShellFormSchema} from "@/types/schema";
-import {OptionalClassFormField} from "./classname-field";
-import {ShellTypeFormField} from "./shelltype-field";
-import {UrlPatternFormField} from "./urlpattern-field";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/components/ui/card";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import type { MemShellFormSchema } from "@/types/schema";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
 
 export function Suo5TabContent({
   form,
diff --git a/web/src/components/memshell/tabs/urlpattern-field.tsx b/web/src/components/memshell/tabs/urlpattern-field.tsx
index 57b02879..e50285e0 100644
--- a/web/src/components/memshell/tabs/urlpattern-field.tsx
+++ b/web/src/components/memshell/tabs/urlpattern-field.tsx
@@ -1,9 +1,14 @@
-import {FormProvider, type UseFormReturn} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {FormField, FormFieldItem, FormFieldLabel, FormMessage} from "@/components/ui/form.tsx";
-import {Input} from "@/components/ui/input.tsx";
-import {shouldHidden} from "@/lib/utils";
-import type {MemShellFormSchema} from "@/types/schema.ts";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormMessage,
+} from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { shouldHidden } from "@/lib/utils";
+import type { MemShellFormSchema } from "@/types/schema.ts";
 
 export function UrlPatternFormField({ form }: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
   const { t } = useTranslation();
diff --git a/web/src/components/mode-toggle.tsx b/web/src/components/mode-toggle.tsx
index 0945ccd0..a47d8fe4 100644
--- a/web/src/components/mode-toggle.tsx
+++ b/web/src/components/mode-toggle.tsx
@@ -22,9 +22,15 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/web/src/components/modile-nav.tsx b/web/src/components/modile-nav.tsx
index 1a74a024..1ee918ba 100644
--- a/web/src/components/modile-nav.tsx
+++ b/web/src/components/modile-nav.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 import { NavLink } from "react-router";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 
 export function MobileNav({
@@ -40,7 +44,9 @@ export function MobileNav({
             </div>
             <span className="sr-only">Toggle Menu</span>
           </div>
-          <span className="flex h-8 items-center text-lg leading-none font-medium">Menu</span>
+          <span className="flex h-8 items-center text-lg leading-none font-medium">
+            Menu
+          </span>
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -52,13 +58,19 @@ export function MobileNav({
       >
         <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
           <div className="flex flex-col gap-4">
-            <div className="text-muted-foreground text-sm font-medium">Menu</div>
+            <div className="text-muted-foreground text-sm font-medium">
+              Menu
+            </div>
             <div className="flex flex-col gap-3">
               <MobileLink href="/" onOpenChange={setOpen}>
                 Home
               </MobileLink>
               {items.map((item) => (
-                <MobileLink key={item.href} href={item.href} onOpenChange={setOpen}>
+                <MobileLink
+                  key={item.href}
+                  href={item.href}
+                  onOpenChange={setOpen}
+                >
                   {item.label}
                 </MobileLink>
               ))}
diff --git a/web/src/components/tailwind-indicator.tsx b/web/src/components/tailwind-indicator.tsx
index b9a78907..a8af023b 100644
--- a/web/src/components/tailwind-indicator.tsx
+++ b/web/src/components/tailwind-indicator.tsx
@@ -2,7 +2,9 @@ export function TailwindIndicator() {
   return (
     <div className="fixed bottom-1 right-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
       <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
+        sm
+      </div>
       <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
       <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
       <div className="hidden xl:block 2xl:hidden">xl</div>
diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx
index 6012cbb4..8603fa3e 100644
--- a/web/src/components/theme-provider.tsx
+++ b/web/src/components/theme-provider.tsx
@@ -26,7 +26,9 @@ export function ThemeProvider({
   storageKey = "vite-ui-theme",
   ...props
 }: Readonly<ThemeProviderProps>) {
-  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
 
   useEffect(() => {
     const root = window.document.documentElement;
@@ -35,7 +37,10 @@ export function ThemeProvider({
 
     root.removeAttribute(mode);
     if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
 
       root.classList.add(systemTheme);
       root.setAttribute(mode, systemTheme);
@@ -66,7 +71,8 @@ export function ThemeProvider({
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
 
-  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
 
   return context;
 };
diff --git a/web/src/config.ts b/web/src/config.ts
index 6ff5ae6b..7b79848c 100644
--- a/web/src/config.ts
+++ b/web/src/config.ts
@@ -48,7 +48,9 @@ function safeParseYup<T>(schema: yup.ObjectSchema<any>, data: unknown) {
 
 const createEnv = () => {
   // @ts-ignore
-  const envVars = Object.entries(import.meta.env).reduce<Record<string, string>>((acc, curr) => {
+  const envVars = Object.entries(import.meta.env).reduce<
+    Record<string, string>
+  >((acc, curr) => {
     const [key, value] = curr;
     if (typeof value === "string") {
       if (key.startsWith("VITE_APP_")) {
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 74c084d4..bc8b4687 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -5,7 +5,11 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-export function downloadBytes(base64String: string, className?: string, jarName?: string) {
+export function downloadBytes(
+  base64String: string,
+  className?: string,
+  jarName?: string,
+) {
   const byteCharacters = atob(base64String);
   const byteNumbers = new Array(byteCharacters.length);
   for (let i = 0; i < byteCharacters.length; i++) {
@@ -14,12 +18,16 @@ export function downloadBytes(base64String: string, className?: string, jarName?
   const byteArray = new Uint8Array(byteNumbers);
 
   // Create a Blob from the byte array
-  const blob = new Blob([byteArray], { type: className ? "application/java-vm" : "application/java-archive" });
+  const blob = new Blob([byteArray], {
+    type: className ? "application/java-vm" : "application/java-archive",
+  });
 
   // Create a download link
   const link = document.createElement("a");
   link.href = window.URL.createObjectURL(blob);
-  link.download = className ? `${className.substring(className.lastIndexOf("."))}.class` : `${jarName}.jar`;
+  link.download = className
+    ? `${className.substring(className.lastIndexOf("."))}.class`
+    : `${jarName}.jar`;
 
   document.body.appendChild(link);
   link.click();
diff --git a/web/src/pages/memshell.tsx b/web/src/pages/memshell.tsx
index a2f1428c..1d50dccb 100644
--- a/web/src/pages/memshell.tsx
+++ b/web/src/pages/memshell.tsx
@@ -1,27 +1,31 @@
-import {useQuery} from "@tanstack/react-query";
-import {LoaderCircle, WandSparklesIcon} from "lucide-react";
-import {useState, useTransition} from "react";
-import {useForm} from "react-hook-form";
-import {useTranslation} from "react-i18next";
-import {useLoaderData} from "react-router-dom";
-import {toast} from "sonner";
+import { useQuery } from "@tanstack/react-query";
+import { LoaderCircle, WandSparklesIcon } from "lucide-react";
+import { useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useLoaderData } from "react-router-dom";
+import { toast } from "sonner";
 import MainConfigCard from "@/components/memshell/main-config-card";
 import PackageConfigCard from "@/components/memshell/package-config-card";
 import ShellResult from "@/components/memshell/shell-result";
-import {Button} from "@/components/ui/button";
-import {Form} from "@/components/ui/form.tsx";
-import {env} from "@/config.ts";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form.tsx";
+import { env } from "@/config.ts";
 import {
-    type APIErrorResponse,
-    type MainConfig,
-    type MemShellGenerateResponse,
-    type MemShellResult,
-    type PackerConfig,
-    type ServerConfig,
-    ShellToolType,
+  type APIErrorResponse,
+  type MainConfig,
+  type MemShellGenerateResponse,
+  type MemShellResult,
+  type PackerConfig,
+  type ServerConfig,
+  ShellToolType,
 } from "@/types/memshell";
-import {type MemShellFormSchema, memShellFormSchema, useYupValidationResolver} from "@/types/schema.ts";
-import {transformToPostData} from "@/utils/transformer.ts";
+import {
+  type MemShellFormSchema,
+  memShellFormSchema,
+  useYupValidationResolver,
+} from "@/types/schema.ts";
+import { transformToPostData } from "@/utils/transformer.ts";
 
 export default function MemShellPage() {
   const urlParams = useLoaderData();
@@ -78,7 +82,9 @@ export default function MemShellPage() {
   });
 
   const [packResult, setPackResult] = useState<string | undefined>();
-  const [allPackResults, setAllPackResults] = useState<Map<string, string> | undefined>();
+  const [allPackResults, setAllPackResults] = useState<
+    Map<string, string> | undefined
+  >();
   const [generateResult, setGenerateResult] = useState<MemShellResult>();
   const [packMethod, setPackMethod] = useState<string>("");
   const [isActionPending, startTransition] = useTransition();
diff --git a/web/src/pages/probeshell.tsx b/web/src/pages/probeshell.tsx
index 07ade141..1ac8ba97 100644
--- a/web/src/pages/probeshell.tsx
+++ b/web/src/pages/probeshell.tsx
@@ -8,13 +8,22 @@ import MainConfigCard from "@/components/probeshell/main-config-card";
 import PackageConfigCard from "@/components/probeshell/package-config-card";
 import ShellResult from "@/components/probeshell/shell-result";
 import { Button } from "@/components/ui/button";
-import {
-  Form,
-} from "@/components/ui/form";
+import { Form } from "@/components/ui/form";
 import { env } from "@/config";
-import type { APIErrorResponse, PackerConfig, ServerConfig } from "@/types/memshell";
-import type { ProbeShellGenerateResponse, ProbeShellResult } from "@/types/probeshell";
-import { type ProbeShellFormSchema, probeShellFormSchema, useYupValidationProbeResolver } from "@/types/schema";
+import type {
+  APIErrorResponse,
+  PackerConfig,
+  ServerConfig,
+} from "@/types/memshell";
+import type {
+  ProbeShellGenerateResponse,
+  ProbeShellResult,
+} from "@/types/probeshell";
+import {
+  type ProbeShellFormSchema,
+  probeShellFormSchema,
+  useYupValidationProbeResolver,
+} from "@/types/schema";
 import { transformToProbePostData } from "@/utils/transformer";
 
 export default function ProbeShellGenerator() {
@@ -46,18 +55,21 @@ export default function ProbeShellGenerator() {
       reqParamName: "payload",
       reqHeaderName: "X-PAYLOAD",
       seconds: 5,
-      sleepServer: "Tomcat"
+      sleepServer: "Tomcat",
+      shrink: true,
     },
   });
 
   const [packResult, setPackResult] = useState<string | undefined>();
-  const [allPackResults, setAllPackResults] = useState<Map<string, string> | undefined>();
+  const [allPackResults, setAllPackResults] = useState<
+    Map<string, string> | undefined
+  >();
   const [generateResult, setGenerateResult] = useState<ProbeShellResult>();
   const [packMethod, setPackMethod] = useState<string>("");
   const [isActionPending, startTransition] = useTransition();
 
   const onSubmit = async (data: ProbeShellFormSchema) => {
-      startTransition(async () => {
+    startTransition(async () => {
       try {
         const postData = transformToProbePostData(data);
         const response = await fetch(`${env.API_URL}/probe/generate`, {
diff --git a/web/src/providers/query-client-provider.tsx b/web/src/providers/query-client-provider.tsx
index 27ae1412..2bd95602 100644
--- a/web/src/providers/query-client-provider.tsx
+++ b/web/src/providers/query-client-provider.tsx
@@ -1,5 +1,5 @@
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
-import type {ReactNode} from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -11,5 +11,7 @@ const queryClient = new QueryClient({
 });
 
 export function QueryProvider({ children }: Readonly<{ children: ReactNode }>) {
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
 }
diff --git a/web/src/router.tsx b/web/src/router.tsx
index a4dfb4d8..70bb6aa1 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -1,12 +1,14 @@
-import {createHashRouter} from "react-router-dom";
+import { createHashRouter } from "react-router-dom";
 import RootLayout from "@/components/layouts/root-layout";
-import {env} from "@/config";
+import { env } from "@/config";
 import MemShellPage from "@/pages/memshell";
 import ProbeShellPage from "@/pages/probeshell";
-import type {MemShellFormSchema} from "@/types/schema";
+import type { MemShellFormSchema } from "@/types/schema";
 
 // Function to parse URL parameters into form default values
-const parseUrlParams = (searchParams: URLSearchParams): Partial<MemShellFormSchema> => {
+const parseUrlParams = (
+  searchParams: URLSearchParams,
+): Partial<MemShellFormSchema> => {
   const result: Partial<MemShellFormSchema> = {};
 
   // Helper function to parse boolean values
@@ -16,27 +18,47 @@ const parseUrlParams = (searchParams: URLSearchParams): Partial<MemShellFormSche
   };
 
   // Map URL parameters to form fields
-  if (searchParams.has("server")) result.server = searchParams.get("server") ?? undefined;
-  if (searchParams.has("targetJdkVersion")) result.targetJdkVersion = searchParams.get("targetJdkVersion") ?? undefined;
-  if (searchParams.has("debug")) result.debug = parseBoolean(searchParams.get("debug"));
+  if (searchParams.has("server"))
+    result.server = searchParams.get("server") ?? undefined;
+  if (searchParams.has("targetJdkVersion"))
+    result.targetJdkVersion = searchParams.get("targetJdkVersion") ?? undefined;
+  if (searchParams.has("debug"))
+    result.debug = parseBoolean(searchParams.get("debug"));
   if (searchParams.has("byPassJavaModule"))
-    result.byPassJavaModule = parseBoolean(searchParams.get("byPassJavaModule"));
-  if (searchParams.has("shellClassName")) result.shellClassName = searchParams.get("shellClassName") ?? undefined;
-  if (searchParams.has("shellTool")) result.shellTool = searchParams.get("shellTool") ?? undefined;
-  if (searchParams.has("shellType")) result.shellType = searchParams.get("shellType") ?? undefined;
-  if (searchParams.has("urlPattern")) result.urlPattern = searchParams.get("urlPattern") ?? undefined;
-  if (searchParams.has("godzillaPass")) result.godzillaPass = searchParams.get("godzillaPass") ?? undefined;
-  if (searchParams.has("godzillaKey")) result.godzillaKey = searchParams.get("godzillaKey") ?? undefined;
-  if (searchParams.has("behinderPass")) result.behinderPass = searchParams.get("behinderPass") ?? undefined;
-  if (searchParams.has("antSwordPass")) result.antSwordPass = searchParams.get("antSwordPass") ?? undefined;
-  if (searchParams.has("commandParamName")) result.commandParamName = searchParams.get("commandParamName") ?? undefined;
-  if (searchParams.has("headerName")) result.headerName = searchParams.get("headerName") ?? undefined;
-  if (searchParams.has("headerValue")) result.headerValue = searchParams.get("headerValue") ?? undefined;
+    result.byPassJavaModule = parseBoolean(
+      searchParams.get("byPassJavaModule"),
+    );
+  if (searchParams.has("shellClassName"))
+    result.shellClassName = searchParams.get("shellClassName") ?? undefined;
+  if (searchParams.has("shellTool"))
+    result.shellTool = searchParams.get("shellTool") ?? undefined;
+  if (searchParams.has("shellType"))
+    result.shellType = searchParams.get("shellType") ?? undefined;
+  if (searchParams.has("urlPattern"))
+    result.urlPattern = searchParams.get("urlPattern") ?? undefined;
+  if (searchParams.has("godzillaPass"))
+    result.godzillaPass = searchParams.get("godzillaPass") ?? undefined;
+  if (searchParams.has("godzillaKey"))
+    result.godzillaKey = searchParams.get("godzillaKey") ?? undefined;
+  if (searchParams.has("behinderPass"))
+    result.behinderPass = searchParams.get("behinderPass") ?? undefined;
+  if (searchParams.has("antSwordPass"))
+    result.antSwordPass = searchParams.get("antSwordPass") ?? undefined;
+  if (searchParams.has("commandParamName"))
+    result.commandParamName = searchParams.get("commandParamName") ?? undefined;
+  if (searchParams.has("headerName"))
+    result.headerName = searchParams.get("headerName") ?? undefined;
+  if (searchParams.has("headerValue"))
+    result.headerValue = searchParams.get("headerValue") ?? undefined;
   if (searchParams.has("injectorClassName"))
-    result.injectorClassName = searchParams.get("injectorClassName") ?? undefined;
-  if (searchParams.has("packingMethod")) result.packingMethod = searchParams.get("packingMethod") ?? undefined;
-  if (searchParams.has("shrink")) result.shrink = parseBoolean(searchParams.get("shrink"));
-  if (searchParams.has("shellClassBase64")) result.shellClassBase64 = searchParams.get("shellClassBase64") ?? undefined;
+    result.injectorClassName =
+      searchParams.get("injectorClassName") ?? undefined;
+  if (searchParams.has("packingMethod"))
+    result.packingMethod = searchParams.get("packingMethod") ?? undefined;
+  if (searchParams.has("shrink"))
+    result.shrink = parseBoolean(searchParams.get("shrink"));
+  if (searchParams.has("shellClassBase64"))
+    result.shellClassBase64 = searchParams.get("shellClassBase64") ?? undefined;
 
   return result;
 };
diff --git a/web/src/types/memshell.ts b/web/src/types/memshell.ts
index 297ef6c1..a0dc5bfc 100644
--- a/web/src/types/memshell.ts
+++ b/web/src/types/memshell.ts
@@ -105,7 +105,11 @@ export interface MemShellResult {
   injectorSize: number;
   injectorBytesBase64Str: string;
   shellConfig: ShellConfig;
-  shellToolConfig: CommandShellToolConfig | GodzillaShellToolConfig | BehinderShellToolConfig | AntSwordShellToolConfig;
+  shellToolConfig:
+    | CommandShellToolConfig
+    | GodzillaShellToolConfig
+    | BehinderShellToolConfig
+    | AntSwordShellToolConfig;
   injectorConfig: InjectorConfig;
 }
 
diff --git a/web/src/types/probeshell.ts b/web/src/types/probeshell.ts
index c836b9b7..850eedbd 100644
--- a/web/src/types/probeshell.ts
+++ b/web/src/types/probeshell.ts
@@ -1,6 +1,12 @@
 export type ProbeMethod = "ResponseBody" | "DNSLog" | "Sleep";
 
-export type ProbeContent = "BasicInfo" | "Server" | "OS" | "JDK" | "Bytecode" | "Command";
+export type ProbeContent =
+  | "BasicInfo"
+  | "Server"
+  | "OS"
+  | "JDK"
+  | "Bytecode"
+  | "Command";
 
 export interface ProbeConfig {
   probeMethod: string;
@@ -63,4 +69,4 @@ export interface ProbeShellResult {
   shellBytesBase64Str: string;
   probeConfig: ProbeConfig;
   probeContentConfig: DNSLogConfig | ResponseBodyConfig | SleepConfig;
-}
\ No newline at end of file
+}
diff --git a/web/src/utils/transformer.ts b/web/src/utils/transformer.ts
index babe0b2c..b22b0170 100644
--- a/web/src/utils/transformer.ts
+++ b/web/src/utils/transformer.ts
@@ -1,6 +1,13 @@
-import type {InjectorConfig, ShellConfig, ShellToolConfig} from "@/types/memshell";
-import type {ProbeConfig, ProbeContentConfig} from "@/types/probeshell";
-import type {MemShellFormSchema, ProbeShellFormSchema} from "@/types/schema.ts";
+import type {
+  InjectorConfig,
+  ShellConfig,
+  ShellToolConfig,
+} from "@/types/memshell";
+import type { ProbeConfig, ProbeContentConfig } from "@/types/probeshell";
+import type {
+  MemShellFormSchema,
+  ProbeShellFormSchema,
+} from "@/types/schema.ts";
 
 export function transformToPostData(formValue: MemShellFormSchema) {
   const shellConfig: ShellConfig = {
@@ -46,22 +53,22 @@ export function transformToProbePostData(formValue: ProbeShellFormSchema) {
     shellClassName: formValue.shellClassName,
     shrink: formValue.shrink,
     debug: formValue.debug,
-    byPassJavaModule: formValue.byPassJavaModule
-  }
+    byPassJavaModule: formValue.byPassJavaModule,
+  };
   const probeContentConfig: ProbeContentConfig = {
     host: formValue.host,
     seconds: formValue.seconds,
     sleepServer: formValue.sleepServer,
     server: formValue.server,
     reqParamName: formValue.reqParamName,
-    reqHeaderName: formValue.reqHeaderName
-  }
+    reqHeaderName: formValue.reqHeaderName,
+  };
 
   return {
     probeConfig,
     probeContentConfig,
-    packer: formValue.packingMethod
-  }
+    packer: formValue.packingMethod,
+  };
 }
 
 /**
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 20ff94b4..1e173931 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -11,9 +11,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
-}
\ No newline at end of file
+}