refactor(ui): separate each component into single file

web/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@tanstack/router-plugin": "^1.111.7",
+    "@tanstack/router-plugin": "^1.112.0",
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.10",
     "@types/react-copy-to-clipboard": "^5.0.7",
@@ -23,7 +23,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.4",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^4.0.8",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.7.3",
     "vite": "^6.2.0",
     "vite-bundle-visualizer": "^1.2.1"
@@ -41,14 +41,14 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tailwindcss/vite": "^4.0.8",
+    "@tailwindcss/vite": "^4.0.9",
-    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query": "^5.66.11",
-    "@tanstack/react-router": "^1.111.7",
+    "@tanstack/react-router": "^1.112.0",
-    "@tanstack/router-devtools": "^1.111.7",
+    "@tanstack/router-devtools": "^1.112.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^24.2.2",
-    "lucide-react": "^0.475.0",
+    "lucide-react": "^0.476.0",
     "react": "^19.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.0.0",

web/src/components/main-config-card.tsx

@@ -1,12 +1,10 @@
-import { UrlPatternTip } from "@/components/tips/url-pattern-tip.tsx";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
-import { Input } from "@/components/ui/input.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, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { FormSchema } from "@/types/schema.ts";
-import { MainConfig } from "@/types/shell.ts";
+import { JDKVersion, MainConfig, ShellToolType } from "@/types/shell.ts";
 
 import { JreTip } from "@/components/tips/jre-tip.tsx";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
@@ -23,25 +21,20 @@ import {
 import { JSX, useState } from "react";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
+import { AntSwordTabContent } from "./tools/antsword-tab";
-const JDKVersion = [
+import { BehinderTabContent } from "./tools/behinder-tab";
-  { name: "Java6", value: "50" },
+import { CommandTabContent } from "./tools/command-tab";
-  { name: "Java8", value: "52" },
+import { GodzillaTabContent } from "./tools/godzilla-tab";
-  { name: "Java9", value: "53" },
+import { NeoRegTabContent } from "./tools/neoreg-tab";
-  { name: "Java11", value: "55" },
+import { Suo5TabContent } from "./tools/suo5-tab";
-  { name: "Java17", value: "61" },
-  { name: "Java21", value: "65" },
-];
-
-type ShellToolType = "Behinder" | "Godzilla" | "Command" | "AntSword" | "Suo5" | "Neo-reGeorg";
 
 const shellToolIcons: Record<ShellToolType, JSX.Element> = {
-  Behinder: <ShieldOffIcon className="h-4 w-4" />,
+  [ShellToolType.Behinder]: <ShieldOffIcon className="h-4 w-4" />,
-  Godzilla: <AxeIcon className="h-4 w-4" />,
+  [ShellToolType.Godzilla]: <AxeIcon className="h-4 w-4" />,
-  Command: <CommandIcon className="h-4 w-4" />,
+  [ShellToolType.Command]: <CommandIcon className="h-4 w-4" />,
-  AntSword: <SwordIcon className="h-4 w-4" />,
+  [ShellToolType.AntSword]: <SwordIcon className="h-4 w-4" />,
-  Suo5: <WaypointsIcon className="h-4 w-4" />,
+  [ShellToolType.Suo5]: <WaypointsIcon className="h-4 w-4" />,
-  "Neo-reGeorg": <NetworkIcon className="h-4 w-4" />,
+  [ShellToolType.NeoreGeorg]: <NetworkIcon className="h-4 w-4" />,
 };
 
 export function MainConfigCard({
@@ -56,13 +49,13 @@ export function MainConfigCard({
   const [shellToolMap, setShellToolMap] = useState<{
     [toolName: string]: string[];
   }>();
-  const [shellTools, setShellTools] = useState<string[]>([
+  const [shellTools, setShellTools] = useState<ShellToolType[]>([
-    "Behinder",
+    ShellToolType.Godzilla,
-    "Godzilla",
+    ShellToolType.Behinder,
-    "Command",
+    ShellToolType.AntSword,
-    "AntSword",
+    ShellToolType.Command,
-    "Suo5",
+    ShellToolType.Suo5,
-    "Neo-reGeorg",
+    ShellToolType.NeoreGeorg,
   ]);
   const [shellTypes, setShellTypes] = useState<string[]>([]);
   const shellTool = form.watch("shellTool");
@@ -73,7 +66,7 @@ export function MainConfigCard({
       const newShellToolMap = mainConfig[value];
       setShellToolMap(newShellToolMap);
       const newShellTools = Object.keys(newShellToolMap);
-      setShellTools(newShellTools);
+      setShellTools(newShellTools.map((tool) => tool as ShellToolType));
       if (newShellTools.length > 0) {
         const firstTool = newShellTools[0];
         setShellTypes(newShellToolMap[firstTool]);
@@ -126,22 +119,29 @@ export function MainConfigCard({
       form.resetField("headerValue");
     };
 
+    const resetNeoreGeorg = () => {
+      form.setValue("headerName", "Referer");
+      form.resetField("headerValue");
+    };
+
     if (shellToolMap) {
       setShellTypes(shellToolMap[value]);
       form.resetField("urlPattern");
       form.resetField("shellType");
       form.resetField("shellClassName");
       form.resetField("injectorClassName");
-      if (value === "Godzilla") {
+      if (value === ShellToolType.Godzilla) {
         resetGodzilla();
-      } else if (value === "Behinder") {
+      } else if (value === ShellToolType.Behinder) {
         resetBehinder();
-      } else if (value === "Command") {
+      } else if (value === ShellToolType.Command) {
         resetCommand();
-      } else if (value === "Suo5") {
+      } else if (value === ShellToolType.Suo5) {
         resetSuo5();
-      } else if (value === "AntSword") {
+      } else if (value === ShellToolType.AntSword) {
         resetAntSword();
+      } else if (value === ShellToolType.NeoreGeorg) {
+        resetNeoreGeorg();
       }
     }
     form.setValue("shellTool", value);
@@ -282,7 +282,7 @@ export function MainConfigCard({
         }}
         className="w-full"
       >
-        <div className="relative bg-muted rounded-lg">
+        <div className="relative bg-muted rounded-lg mb-4">
           <TabsList className="flex flex-wrap gap-1 w-full bg-transparent tabs-list">
             {shellTools.map((shellTool) => (
               <TabsTrigger
@@ -299,349 +299,13 @@ export function MainConfigCard({
           </TabsList>
         </div>
 
-        <BehinderTabContent form={form} shellTypes={shellTypes} />
         <GodzillaTabContent form={form} shellTypes={shellTypes} />
         <CommandTabContent form={form} shellTypes={shellTypes} />
+        <BehinderTabContent form={form} shellTypes={shellTypes} />
         <AntSwordTabContent form={form} shellTypes={shellTypes} />
         <Suo5TabContent form={form} shellTypes={shellTypes} />
-        <NeoreGeorgTabContent />
+        <NeoRegTabContent form={form} shellTypes={shellTypes} />
       </Tabs>
     </FormProvider>
   );
 }
-
-function ShellTypeFormField({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <FormField
-        control={form.control}
-        name="shellType"
-        render={({ field }) => (
-          <FormItem className="space-y-1">
-            <FormLabel className="h-6 flex items-center">{t("mainConfig.shellMountType")}</FormLabel>
-            <Select onValueChange={field.onChange} value={field.value}>
-              <FormControl>
-                <SelectTrigger className="h-8">
-                  <SelectValue placeholder={t("placeholders.select")} />
-                </SelectTrigger>
-              </FormControl>
-              <SelectContent key={shellTypes.join(",")}>
-                {shellTypes.length ? (
-                  shellTypes.map((v) => (
-                    <SelectItem key={v} value={v}>
-                      {v}
-                    </SelectItem>
-                  ))
-                ) : (
-                  <SelectItem value=" ">{t("tips.shellToolNotSelected")}</SelectItem>
-                )}
-              </SelectContent>
-            </Select>
-          </FormItem>
-        )}
-      />
-    </FormProvider>
-  );
-}
-
-function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <FormField
-        control={form.control}
-        name="urlPattern"
-        render={({ field }) => (
-          <FormItem className="space-y-1">
-            <FormLabel className="h-6 flex items-center gap-1">
-              {t("mainConfig.urlPattern")} <UrlPatternTip />
-            </FormLabel>
-            <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
-          </FormItem>
-        )}
-      />
-    </FormProvider>
-  );
-}
-
-function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <FormField
-        control={form.control}
-        name="shellClassName"
-        render={({ field }) => (
-          <FormItem className="space-y-1">
-            <FormLabel className="h-6 flex items-center gap-1">
-              {t("mainConfig.shellClassName")} {t("optional")}
-            </FormLabel>
-            <Input id="shellClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
-          </FormItem>
-        )}
-      />
-      <FormField
-        control={form.control}
-        name="injectorClassName"
-        render={({ field }) => (
-          <FormItem className="space-y-1">
-            <FormLabel className="h-6 flex items-center gap-1">
-              {t("mainConfig.injectorClassName")} {t("optional")}
-            </FormLabel>
-            <Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
-          </FormItem>
-        )}
-      />
-    </FormProvider>
-  );
-}
-
-function BehinderTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <TabsContent value="Behinder">
-        <Card>
-          <CardContent className="space-y-2 mt-4">
-            <div className="grid grid-cols-2 gap-2">
-              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-              <UrlPatternFormField form={form} />
-            </div>
-            <FormField
-              control={form.control}
-              name="behinderPass"
-              render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.behinderPass")}</FormLabel>
-                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
-                </FormItem>
-              )}
-            />
-            <div className="grid grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="headerName"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="headerValue"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <OptionalClassFormField form={form} />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </FormProvider>
-  );
-}
-
-function GodzillaTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <TabsContent value="Godzilla">
-        <Card>
-          <CardContent className="space-y-2 mt-4">
-            <div className="grid grid-cols-2 gap-2">
-              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-              <UrlPatternFormField form={form} />
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="godzillaPass"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.pass")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.pass")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="godzillaKey"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.key")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.key")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="headerName"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="headerValue"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <OptionalClassFormField form={form} />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </FormProvider>
-  );
-}
-
-function CommandTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <TabsContent value="Command">
-        <Card>
-          <CardContent className="space-y-2 mt-4">
-            <div className="grid grid-cols-2 gap-2">
-              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-              <UrlPatternFormField form={form} />
-            </div>
-            <FormField
-              control={form.control}
-              name="commandParamName"
-              render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.paramName")}</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder={t("shellToolConfig.paramName")} className="h-8" />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <OptionalClassFormField form={form} />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </FormProvider>
-  );
-}
-
-function AntSwordTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <TabsContent value="AntSword">
-        <Card>
-          <CardContent className="space-y-2 mt-4">
-            <div className="grid grid-cols-2 gap-2">
-              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-              <UrlPatternFormField form={form} />
-            </div>
-            <FormField
-              control={form.control}
-              name="antSwordPass"
-              render={({ field }) => (
-                <FormItem className="space-y-1">
-                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.antSwordPass")}</FormLabel>
-                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
-                </FormItem>
-              )}
-            />
-            <div className="grid grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="headerName"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="headerValue"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <OptionalClassFormField form={form} />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </FormProvider>
-  );
-}
-
-function Suo5TabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
-  const { t } = useTranslation();
-  return (
-    <FormProvider {...form}>
-      <TabsContent value="Suo5">
-        <Card>
-          <CardContent className="space-y-2 mt-4">
-            <div className="grid grid-cols-2 gap-2">
-              <ShellTypeFormField form={form} shellTypes={shellTypes} />
-              <UrlPatternFormField form={form} />
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <FormField
-                control={form.control}
-                name="headerName"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="headerValue"
-                render={({ field }) => (
-                  <FormItem className="space-y-1">
-                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
-                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <OptionalClassFormField form={form} />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </FormProvider>
-  );
-}
-
-function NeoreGeorgTabContent() {
-  return (
-    <TabsContent value="Neo-reGeorg">
-      <Card>
-        <CardContent className="space-y-2 mt-4">
-          <div className="flex items-center justify-center">
-            <span className="text-gray-500">WIP</span>
-          </div>
-        </CardContent>
-      </Card>
-    </TabsContent>
-  );
-}

web/src/components/results/agent.tsx

@@ -0,0 +1,60 @@
+import { downloadBytes } from "@/lib/utils";
+import { GenerateResult } from "@/types/shell";
+import { Separator } from "@radix-ui/react-dropdown-menu";
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+export function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("generateResult.usage")}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ol className="list-decimal list-inside space-y-4 text-sm">
+          <li className="flex items-center justify-between">
+            <span>{t("download")} MemShellAgent.jar</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() =>
+                downloadBytes(
+                  packResult,
+                  undefined,
+                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
+                )
+              }
+            >
+              {t("download")} Jar
+            </Button>
+          </li>
+          <li className="flex items-center justify-between">
+            <span>{t("tips.download-jattach")}</span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() => window.open("https://github.com/jattach/jattach/releases")}
+            >
+              {t("download")} Jattach
+            </Button>
+          </li>
+          <Separator />
+          <li>{t("tips.move-to-container")}</li>
+          <li>{t("tips.get-pid")}</li>
+          <li>{t("tips.execute-command")}</li>
+          <li>{t("tips.try-to-use-shell")}</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/src/components/results/basic-info.tsx

@@ -0,0 +1,140 @@
+import {
+  AntSwordShellToolConfig,
+  BehinderShellToolConfig,
+  CommandShellToolConfig,
+  GenerateResult,
+  GodzillaShellToolConfig,
+  Suo5ShellToolConfig,
+} from "@/types/shell";
+import { Separator } from "@radix-ui/react-dropdown-menu";
+import { FileTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Fragment } from "react/jsx-runtime";
+import { CopyableField } from "../copyable-field";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { FeedbackAlert } from "./feedback-alert";
+
+export function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="text-md flex items-center gap-2">
+            <FileTextIcon className="h-5" />
+            <span>{t("generateResult.basicInfo")}</span>
+          </div>
+          <FeedbackAlert />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <CopyableField label={t("mainConfig.server")} text={generateResult?.shellConfig.server} />
+          <CopyableField label={t("mainConfig.shellTool")} text={generateResult?.shellConfig.shellTool} />
+          <CopyableField label={t("mainConfig.shellMountType")} text={generateResult?.shellConfig.shellType} />
+          <CopyableField
+            label={t("mainConfig.urlPattern")}
+            text={generateResult?.injectorConfig.urlPattern}
+            value={generateResult?.injectorConfig.urlPattern}
+          />
+        </div>
+        <Separator className="my-2" />
+
+        {(generateResult?.shellConfig.shellTool === "Behinder" ||
+          generateResult?.shellConfig.shellTool === "Godzilla" ||
+          generateResult?.shellConfig.shellTool === "Command" ||
+          generateResult?.shellConfig.shellTool === "AntSword" ||
+          generateResult?.shellConfig.shellTool === "Suo5") && (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            {/* Tool-specific fields */}
+            {generateResult?.shellConfig.shellTool === "Behinder" && (
+              <>
+                <CopyableField label={t("shellToolConfig.behinderScriptType")} text="jsp" />
+                <CopyableField
+                  label={t("shellToolConfig.behinderEncryptType")}
+                  text={t("shellToolConfig.behinderDefaultEncryptType")}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.behinderPass")}
+                  text={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.customHeader")}
+                  text={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
+                />
+              </>
+            )}
+            {generateResult?.shellConfig.shellTool === "Godzilla" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.pass")}
+                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.key")}
+                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
+                />
+                <CopyableField label={t("shellToolConfig.godzillaPayload")} text="JavaDynamicPayload" />
+                <CopyableField label={t("shellToolConfig.godzillaEncryptor")} text="JAVA_AES_BASE64" />
+                <CopyableField
+                  label={t("shellToolConfig.godzillaHeader")}
+                  text={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+                />
+              </Fragment>
+            )}
+            {generateResult?.shellConfig.shellTool === "Command" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.paramName")}
+                  text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+                  value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
+                />
+              </Fragment>
+            )}
+            {generateResult?.shellConfig.shellTool === "Suo5" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.suo5Header")}
+                  text={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
+                />
+              </Fragment>
+            )}
+            {generateResult?.shellConfig.shellTool === "AntSword" && (
+              <Fragment>
+                <CopyableField
+                  label={t("shellToolConfig.antSwordPass")}
+                  text={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
+                  value={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
+                />
+                <CopyableField
+                  label={t("shellToolConfig.httpHeader")}
+                  text={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
+                  value={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
+                />
+              </Fragment>
+            )}
+          </div>
+        )}
+        <Separator className="my-2" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <CopyableField
+            label={t("mainConfig.injectorClassName")}
+            value={generateResult?.injectorClassName}
+            text={`${generateResult?.injectorClassName} (${generateResult?.injectorSize} bytes)`}
+          />
+          <CopyableField
+            label={t("mainConfig.shellClassName")}
+            value={generateResult?.shellClassName}
+            text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/components/results/feedback-alert.tsx

@@ -0,0 +1,49 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@radix-ui/react-alert-dialog";
+import { CircleHelpIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { AlertDialogFooter, AlertDialogHeader } from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+
+export function FeedbackAlert() {
+  const { t } = useTranslation();
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline" type="button">
+          <CircleHelpIcon /> {t("shellNotWork.title")}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("shellNotWork.title")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            <ol>
+              <li>{t("shellNotWork.step1")}</li>
+              <li>{t("shellNotWork.step2")}</li>
+            </ol>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() =>
+              window.open(
+                "https://github.com/ReaJason/MemShellParty/issues/new?template=%E5%86%85%E5%AD%98%E9%A9%AC%E7%94%9F%E6%88%90-bug-%E4%B8%8A%E6%8A%A5.md",
+              )
+            }
+          >
+            {t("feedback")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

web/src/components/results/jar-result.tsx

@@ -0,0 +1,24 @@
+import { downloadBytes } from "@/lib/utils";
+import { GenerateResult } from "@/types/shell";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+
+export function JarResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center justify-center">
+      <Button
+        type="button"
+        onClick={() =>
+          downloadBytes(
+            packResult,
+            undefined,
+            `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShell`,
+          )
+        }
+      >
+        {t("download")} Jar
+      </Button>
+    </div>
+  );
+}

web/src/components/results/multi-packer.tsx

@@ -0,0 +1,63 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@radix-ui/react-select";
+import { TFunction } from "i18next";
+import { useEffect, useState } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { CodeViewer } from "../code-viewer";
+
+export function MultiPackResult({
+  allPackResults,
+  packMethod,
+  t,
+}: {
+  allPackResults: object | undefined;
+  packMethod: string;
+  t: TFunction;
+}) {
+  const showCode = packMethod === "JSP";
+  const packMethods = Object.keys(allPackResults ?? {});
+  const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
+  const [packResult, setPackResult] = useState(allPackResults?.[selectedMethod as keyof typeof allPackResults] ?? "");
+
+  useEffect(() => {
+    const methods = Object.keys(allPackResults ?? {});
+    const firstMethod = methods[0];
+    setSelectedMethod(firstMethod);
+    setPackResult(allPackResults?.[firstMethod as keyof typeof allPackResults] ?? "");
+  }, [allPackResults]);
+
+  return (
+    <Fragment>
+      <CodeViewer
+        code={packResult ?? ""}
+        header={
+          <div className="flex items-center justify-between text-xs gap-2">
+            <Select
+              onValueChange={(value) => {
+                setSelectedMethod(value);
+                setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
+              }}
+              value={selectedMethod}
+            >
+              <SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
+                <span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {packMethods.map((method) => (
+                  <SelectItem key={method} value={method} className="text-xs">
+                    {method}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <span className="text-muted-foreground">({packResult?.length})</span>
+          </div>
+        }
+        wrapLongLines={!showCode}
+        showLineNumbers={showCode}
+        language={showCode ? "java" : "text"}
+        height={350}
+      />
+    </Fragment>
+  );
+}

web/src/components/results/result-component.tsx

@@ -0,0 +1,57 @@
+import { GenerateResult } from "@/types/shell";
+import { TFunction } from "i18next";
+import { Fragment } from "react/jsx-runtime";
+import { CodeViewer } from "../code-viewer";
+import { AgentResult } from "./agent";
+import { JarResult } from "./jar-result";
+import { MultiPackResult } from "./multi-packer";
+
+export function ResultComponent({
+  packResult,
+  allPackResults,
+  packMethod,
+  t,
+  generateResult,
+}: {
+  packResult: string | undefined;
+  allPackResults: Map<string, string> | undefined;
+  packMethod: string;
+  t: TFunction;
+  generateResult?: GenerateResult;
+}) {
+  const showCode = packMethod === "JSP";
+  const isAgent = packMethod.startsWith("Agent");
+  const isJar = packMethod === "Jar";
+  if (allPackResults) {
+    return <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} t={t} />;
+  }
+
+  if (isAgent) {
+    return <AgentResult packResult={packResult ?? ""} generateResult={generateResult} />;
+  }
+  if (isJar) {
+    return <JarResult packResult={packResult ?? ""} generateResult={generateResult} />;
+  }
+  if (!isAgent && !isJar) {
+    return (
+      <Fragment>
+        <CodeViewer
+          code={packResult ?? ""}
+          header={
+            <div className="flex items-center justify-between text-xs gap-2">
+              <span>
+                {t("packageConfig.title")}：{packMethod}
+              </span>
+              <span className="text-muted-foreground">({packResult?.length})</span>
+            </div>
+          }
+          wrapLongLines={!showCode}
+          showLineNumbers={showCode}
+          language={showCode ? "java" : "text"}
+          height={350}
+        />
+      </Fragment>
+    );
+  }
+  return null;
+}

web/src/components/shell-result.tsx

@@ -1,373 +1,15 @@
 import { CodeViewer } from "@/components/code-viewer.tsx";
-import { CopyableField } from "@/components/copyable-field.tsx";
 import { QuickUsage } from "@/components/quick-usage.tsx";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
 import { Button } from "@/components/ui/button.tsx";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator.tsx";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
 import { downloadBytes } from "@/lib/utils.ts";
-import {
+import { GenerateResult } from "@/types/shell.ts";
-  AntSwordShellToolConfig,
+import { TriangleAlertIcon } from "lucide-react";
-  BehinderShellToolConfig,
-  CommandShellToolConfig,
-  GenerateResult,
-  GodzillaShellToolConfig,
-  Suo5ShellToolConfig,
-} from "@/types/shell.ts";
-import { TFunction } from "i18next";
-import { CircleHelpIcon, FileTextIcon, ScrollTextIcon, TriangleAlertIcon } from "lucide-react";
-import { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-
+import { BasicInfo } from "./results/basic-info";
-function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
+import { ResultComponent } from "./results/result-component";
-  const { t } = useTranslation();
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-md flex items-center gap-2">
-          <ScrollTextIcon className="h-5" />
-          <span>{t("generateResult.usage")}</span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ol className="list-decimal list-inside space-y-4 text-sm">
-          <li className="flex items-center justify-between">
-            <span>{t("download")} MemShellAgent.jar</span>
-            <Button
-              size="sm"
-              variant="outline"
-              className="w-28"
-              type="button"
-              onClick={() =>
-                downloadBytes(
-                  packResult,
-                  undefined,
-                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
-                )
-              }
-            >
-              {t("download")} Jar
-            </Button>
-          </li>
-          <li className="flex items-center justify-between">
-            <span>{t("tips.download-jattach")}</span>
-            <Button
-              size="sm"
-              variant="outline"
-              className="w-28"
-              type="button"
-              onClick={() => window.open("https://github.com/jattach/jattach/releases")}
-            >
-              {t("download")} Jattach
-            </Button>
-          </li>
-          <Separator />
-          <li>{t("tips.move-to-container")}</li>
-          <li>{t("tips.get-pid")}</li>
-          <li>{t("tips.execute-command")}</li>
-          <li>{t("tips.try-to-use-shell")}</li>
-        </ol>
-      </CardContent>
-    </Card>
-  );
-}
-
-function JarResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
-  const { t } = useTranslation();
-  return (
-    <div className="flex items-center justify-center">
-      <Button
-        type="button"
-        onClick={() =>
-          downloadBytes(
-            packResult,
-            undefined,
-            `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShell`,
-          )
-        }
-      >
-        {t("download")} Jar
-      </Button>
-    </div>
-  );
-}
-
-function FeedbackAlert() {
-  const { t } = useTranslation();
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline" type="button">
-          <CircleHelpIcon /> {t("shellNotWork.title")}
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{t("shellNotWork.title")}</AlertDialogTitle>
-          <AlertDialogDescription>
-            <ol>
-              <li>{t("shellNotWork.step1")}</li>
-              <li>{t("shellNotWork.step2")}</li>
-            </ol>
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={() =>
-              window.open(
-                "https://github.com/ReaJason/MemShellParty/issues/new?template=%E5%86%85%E5%AD%98%E9%A9%AC%E7%94%9F%E6%88%90-bug-%E4%B8%8A%E6%8A%A5.md",
-              )
-            }
-          >
-            {t("feedback")}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
-  const { t } = useTranslation();
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <div className="text-md flex items-center gap-2">
-            <FileTextIcon className="h-5" />
-            <span>{t("generateResult.basicInfo")}</span>
-          </div>
-          <FeedbackAlert />
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-          <CopyableField label={t("mainConfig.server")} text={generateResult?.shellConfig.server} />
-          <CopyableField label={t("mainConfig.shellTool")} text={generateResult?.shellConfig.shellTool} />
-          <CopyableField label={t("mainConfig.shellMountType")} text={generateResult?.shellConfig.shellType} />
-          <CopyableField
-            label={t("mainConfig.urlPattern")}
-            text={generateResult?.injectorConfig.urlPattern}
-            value={generateResult?.injectorConfig.urlPattern}
-          />
-        </div>
-        <Separator className="my-2" />
-
-        {(generateResult?.shellConfig.shellTool === "Behinder" ||
-          generateResult?.shellConfig.shellTool === "Godzilla" ||
-          generateResult?.shellConfig.shellTool === "Command" ||
-          generateResult?.shellConfig.shellTool === "AntSword" ||
-          generateResult?.shellConfig.shellTool === "Suo5") && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-            {/* Tool-specific fields */}
-            {generateResult?.shellConfig.shellTool === "Behinder" && (
-              <>
-                <CopyableField label={t("shellToolConfig.behinderScriptType")} text="jsp" />
-                <CopyableField
-                  label={t("shellToolConfig.behinderEncryptType")}
-                  text={t("shellToolConfig.behinderDefaultEncryptType")}
-                />
-                <CopyableField
-                  label={t("shellToolConfig.behinderPass")}
-                  text={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
-                  value={(generateResult?.shellToolConfig as BehinderShellToolConfig).pass}
-                />
-                <CopyableField
-                  label={t("shellToolConfig.customHeader")}
-                  text={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
-                  value={`${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as BehinderShellToolConfig).headerValue}`}
-                />
-              </>
-            )}
-            {generateResult?.shellConfig.shellTool === "Godzilla" && (
-              <Fragment>
-                <CopyableField
-                  label={t("shellToolConfig.pass")}
-                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
-                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).pass}
-                />
-                <CopyableField
-                  label={t("shellToolConfig.key")}
-                  text={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
-                  value={(generateResult?.shellToolConfig as GodzillaShellToolConfig).key}
-                />
-                <CopyableField label={t("shellToolConfig.godzillaPayload")} text="JavaDynamicPayload" />
-                <CopyableField label={t("shellToolConfig.godzillaEncryptor")} text="JAVA_AES_BASE64" />
-                <CopyableField
-                  label={t("shellToolConfig.godzillaHeader")}
-                  text={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
-                  value={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
-                />
-              </Fragment>
-            )}
-            {generateResult?.shellConfig.shellTool === "Command" && (
-              <Fragment>
-                <CopyableField
-                  label={t("shellToolConfig.paramName")}
-                  text={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-                  value={(generateResult?.shellToolConfig as CommandShellToolConfig).paramName}
-                />
-              </Fragment>
-            )}
-            {generateResult?.shellConfig.shellTool === "Suo5" && (
-              <Fragment>
-                <CopyableField
-                  label={t("shellToolConfig.suo5Header")}
-                  text={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
-                  value={`${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as Suo5ShellToolConfig).headerValue}`}
-                />
-              </Fragment>
-            )}
-            {generateResult?.shellConfig.shellTool === "AntSword" && (
-              <Fragment>
-                <CopyableField
-                  label={t("shellToolConfig.antSwordPass")}
-                  text={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
-                  value={(generateResult?.shellToolConfig as AntSwordShellToolConfig).pass}
-                />
-                <CopyableField
-                  label={t("shellToolConfig.httpHeader")}
-                  text={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
-                  value={`${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as AntSwordShellToolConfig).headerValue}`}
-                />
-              </Fragment>
-            )}
-          </div>
-        )}
-        <Separator className="my-2" />
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-          <CopyableField
-            label={t("mainConfig.injectorClassName")}
-            value={generateResult?.injectorClassName}
-            text={`${generateResult?.injectorClassName} (${generateResult?.injectorSize} bytes)`}
-          />
-          <CopyableField
-            label={t("mainConfig.shellClassName")}
-            value={generateResult?.shellClassName}
-            text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
-          />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function MultiPackResult({
-  allPackResults,
-  packMethod,
-  t,
-}: {
-  allPackResults: object | undefined;
-  packMethod: string;
-  t: TFunction;
-}) {
-  const showCode = packMethod === "JSP";
-  const packMethods = Object.keys(allPackResults ?? {});
-  const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
-  const [packResult, setPackResult] = useState(allPackResults?.[selectedMethod as keyof typeof allPackResults] ?? "");
-
-  useEffect(() => {
-    const methods = Object.keys(allPackResults ?? {});
-    const firstMethod = methods[0];
-    setSelectedMethod(firstMethod);
-    setPackResult(allPackResults?.[firstMethod as keyof typeof allPackResults] ?? "");
-  }, [allPackResults]);
-
-  return (
-    <Fragment>
-      <CodeViewer
-        code={packResult ?? ""}
-        header={
-          <div className="flex items-center justify-between text-xs gap-2">
-            <Select
-              onValueChange={(value) => {
-                setSelectedMethod(value);
-                setPackResult(allPackResults?.[value as keyof typeof allPackResults] ?? "");
-              }}
-              value={selectedMethod}
-            >
-              <SelectTrigger className="h-7 text-xs [&_svg]:h-4 [&_svg]:w-4">
-                <span className="text-muted-foreground">{t("packageConfig.title")}:&nbsp;</span>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {packMethods.map((method) => (
-                  <SelectItem key={method} value={method} className="text-xs">
-                    {method}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <span className="text-muted-foreground">({packResult?.length})</span>
-          </div>
-        }
-        wrapLongLines={!showCode}
-        showLineNumbers={showCode}
-        language={showCode ? "java" : "text"}
-        height={350}
-      />
-    </Fragment>
-  );
-}
-
-function renderResultComponent(
-  packResult: string | undefined,
-  allPackResults: Map<string, string> | undefined,
-  packMethod: string,
-  t: TFunction,
-  generateResult?: GenerateResult,
-) {
-  const showCode = packMethod === "JSP";
-  const isAgent = packMethod.startsWith("Agent");
-  const isJar = packMethod === "Jar";
-  if (allPackResults) {
-    return <MultiPackResult allPackResults={allPackResults} packMethod={packMethod} t={t} />;
-  }
-
-  if (isAgent) {
-    return <AgentResult packResult={packResult ?? ""} generateResult={generateResult} />;
-  }
-  if (isJar) {
-    return <JarResult packResult={packResult ?? ""} generateResult={generateResult} />;
-  }
-  if (!isAgent && !isJar) {
-    return (
-      <Fragment>
-        <CodeViewer
-          code={packResult ?? ""}
-          header={
-            <div className="flex items-center justify-between text-xs gap-2">
-              <span>
-                {t("packageConfig.title")}：{packMethod}
-              </span>
-              <span className="text-muted-foreground">({packResult?.length})</span>
-            </div>
-          }
-          wrapLongLines={!showCode}
-          showLineNumbers={showCode}
-          language={showCode ? "java" : "text"}
-          height={350}
-        />
-      </Fragment>
-    );
-  }
-  return null;
-}
 
 export function ShellResult({
   packResult,
@@ -391,11 +33,15 @@ export function ShellResult({
         <TabsTrigger value="shell">{t("generateResult.title2")}</TabsTrigger>
         <TabsTrigger value="injector">{t("generateResult.title3")}</TabsTrigger>
       </TabsList>
-      <TabsContent value="packResult" className="my-4">
+      <TabsContent value="packResult" className="my-4 space-y-4">
-        <div className="mb-4">
+        <BasicInfo generateResult={generateResult} />
-          <BasicInfo generateResult={generateResult} />
+        <ResultComponent
-        </div>
+          packResult={packResult}
-        {renderResultComponent(packResult, allPackResults, packMethod, t, generateResult)}
+          allPackResults={allPackResults}
+          packMethod={packMethod}
+          t={t}
+          generateResult={generateResult}
+        />
       </TabsContent>
       <TabsContent value="shell" className="mt-4">
         <Alert>

web/src/components/tools/antsword-tab.tsx

@@ -0,0 +1,64 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function AntSwordTabContent({
+  form,
+  shellTypes,
+}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="AntSword">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="antSwordPass"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.antSwordPass")}</FormLabel>
+                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                </FormItem>
+              )}
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/behinder-tab.tsx

@@ -0,0 +1,64 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function BehinderTabContent({
+  form,
+  shellTypes,
+}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Behinder">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="behinderPass"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.behinderPass")}</FormLabel>
+                  <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+                </FormItem>
+              )}
+            />
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/classname-field.tsx

@@ -0,0 +1,37 @@
+import { FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { FormSchema } from "@/types/schema.ts";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="shellClassName"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel className="h-6 flex items-center gap-1">
+              {t("mainConfig.shellClassName")} {t("optional")}
+            </FormLabel>
+            <Input id="shellClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name="injectorClassName"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel className="h-6 flex items-center gap-1">
+              {t("mainConfig.injectorClassName")} {t("optional")}
+            </FormLabel>
+            <Input id="injectorClassName" {...field} placeholder={t("placeholders.input")} className="h-8" />
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}

web/src/components/tools/command-tab.tsx

@@ -0,0 +1,44 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function CommandTabContent({
+  form,
+  shellTypes,
+}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Command">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="commandParamName"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.paramName")}</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={t("shellToolConfig.paramName")} className="h-8" />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/godzilla-tab.tsx

@@ -0,0 +1,74 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function GodzillaTabContent({
+  form,
+  shellTypes,
+}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Godzilla">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="godzillaPass"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.pass")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.pass")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="godzillaKey"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.key")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.key")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/neoreg-tab.tsx

@@ -0,0 +1,51 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function NeoRegTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="NeoreGeorg">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/shelltype-field.tsx

@@ -0,0 +1,44 @@
+import { FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
+import { FormSchema } from "@/types/schema.ts";
+
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export function ShellTypeFormField({
+  form,
+  shellTypes,
+}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="shellType"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel className="h-6 flex items-center">{t("mainConfig.shellMountType")}</FormLabel>
+            <Select onValueChange={field.onChange} value={field.value}>
+              <FormControl>
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder={t("placeholders.select")} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent key={shellTypes.join(",")}>
+                {shellTypes.length ? (
+                  shellTypes.map((v) => (
+                    <SelectItem key={v} value={v}>
+                      {v}
+                    </SelectItem>
+                  ))
+                ) : (
+                  <SelectItem value=" ">{t("tips.shellToolNotSelected")}</SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}

web/src/components/tools/suo5-tab.tsx

@@ -0,0 +1,51 @@
+import { FormSchema } from "@/types/schema";
+import { TabsContent } from "@radix-ui/react-tabs";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "../ui/card";
+import { FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { OptionalClassFormField } from "./classname-field";
+import { ShellTypeFormField } from "./shelltype-field";
+import { UrlPatternFormField } from "./urlpattern-field";
+
+export function Suo5TabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Suo5">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerName")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerName")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel className="h-6 flex items-center gap-1">{t("shellToolConfig.headerValue")}</FormLabel>
+                    <Input {...field} placeholder={t("shellToolConfig.headerValue")} className="h-8" />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/src/components/tools/urlpattern-field.tsx

@@ -0,0 +1,26 @@
+import { UrlPatternTip } from "@/components/tips/url-pattern-tip.tsx";
+import { FormField, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { FormSchema } from "@/types/schema.ts";
+import { FormProvider, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+  const { t } = useTranslation();
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="urlPattern"
+        render={({ field }) => (
+          <FormItem className="space-y-1">
+            <FormLabel className="h-6 flex items-center gap-1">
+              {t("mainConfig.urlPattern")} <UrlPatternTip />
+            </FormLabel>
+            <Input {...field} placeholder={t("placeholders.input")} className="h-8" />
+          </FormItem>
+        )}
+      />
+    </FormProvider>
+  );
+}

web/src/routes/index.tsx

@@ -37,7 +37,7 @@ function IndexComponent() {
       debug: false,
       bypassJavaModule: false,
       shellClassName: "",
-      shellTool: "Behinder",
+      shellTool: "Godzilla",
       shellType: "",
       urlPattern: "/*",
       godzillaPass: "pass",

web/src/types/shell.ts

@@ -94,3 +94,21 @@ export interface GenerateResult {
   shellToolConfig: CommandShellToolConfig | GodzillaShellToolConfig | BehinderShellToolConfig | AntSwordShellToolConfig;
   injectorConfig: InjectorConfig;
 }
+
+export const JDKVersion = [
+  { name: "Java6", value: "50" },
+  { name: "Java8", value: "52" },
+  { name: "Java9", value: "53" },
+  { name: "Java11", value: "55" },
+  { name: "Java17", value: "61" },
+  { name: "Java21", value: "65" },
+];
+
+export enum ShellToolType {
+  Behinder = "Behinder",
+  Godzilla = "Godzilla",
+  Command = "Command",
+  AntSword = "AntSword",
+  Suo5 = "Suo5",
+  NeoreGeorg = "NeoreGeorg",
+}

web/vite.config.ts

@@ -6,7 +6,7 @@ import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [TanStackRouterVite(), react(), tailwindcss()],
+  plugins: [TanStackRouterVite({ autoCodeSplitting: true }), react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),