fix(web): probe shell switch not work

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

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -17,7 +18,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { SwitchField } from "@/components/ui/switch-field";
+import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 // Hoisted static JSX to avoid recreation on each render (rendering-hoist-jsx)
@@ -209,35 +210,99 @@ export default function MainConfigCard({ form, servers }: MainConfigCardProps) {
           />
         )}
         <div className="mt-4 flex flex-col gap-4 lg:grid lg:grid-cols-2 2xl:grid 2xl:grid-cols-3">
-          <SwitchField
+          <Controller
             control={form.control}
             name="debug"
-            label={t("common:debug")}
+            render={({ field }) => (
-            description={t("common:debug.description")}
+              <div className="flex items-center gap-2">
+                <Switch id="debug" checked={field.value} onCheckedChange={field.onChange} />
+                <Label htmlFor="debug">{t("common:debug")}</Label>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:debug.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
           />
-          <SwitchField
+          <Controller
             control={form.control}
             name="byPassJavaModule"
-            label={t("common:byPassJavaModule")}
+            render={({ field }) => (
-            description={t("common:byPassJavaModule.description")}
+              <div className="flex items-center gap-2">
+                <Switch id="bypass" checked={field.value} onCheckedChange={field.onChange} />
+                <Label htmlFor="bypass">{t("common:byPassJavaModule")}</Label>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:byPassJavaModule.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
           />
-          <SwitchField
+          <Controller
             control={form.control}
             name="lambdaSuffix"
-            label={t("common:lambdaSuffix")}
+            render={({ field }) => (
-            description={t("common:lambdaSuffix.description")}
+              <div className="flex items-center gap-2">
+                <Switch id="lambdaSuffix" checked={field.value} onCheckedChange={field.onChange} />
+                <Label htmlFor="lambdaSuffix">{t("common:lambdaSuffix")}</Label>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:lambdaSuffix.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
           />
-          <SwitchField
+          <Controller
             control={form.control}
             name="shrink"
-            label={t("common:shrink")}
+            render={({ field }) => (
-            description={t("common:shrink.description")}
+              <div className="flex items-center gap-2">
+                <Switch id="shrink" checked={field.value} onCheckedChange={field.onChange} />
+                <Label htmlFor="shrink">{t("common:shrink")}</Label>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:shrink.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
           />
-          <SwitchField
+          <Controller
             control={form.control}
             name="staticInitialize"
-            label={t("common:staticInitialize")}
+            render={({ field }) => (
-            description={t("common:staticInitialize.description")}
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="staticInitialize"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+                <Label htmlFor="staticInitialize">{t("common:staticInitialize")}</Label>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("common:staticInitialize.description")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            )}
           />
         </div>
         {isBodyMethod && needParam && (

web/app/components/ui/switch-field.tsx

@@ -1,45 +0,0 @@
-import { InfoIcon } from "lucide-react";
-import { memo } from "react";
-import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
-
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-
-// Hoisted static JSX to avoid recreation on each render
-const infoIcon = <InfoIcon className="h-3.5 w-3.5 cursor-help text-muted-foreground" />;
-
-interface SwitchFieldProps<T extends FieldValues> {
-  readonly name: Path<T>;
-  readonly label: string;
-  readonly description: string;
-  readonly control: Control<T>;
-}
-
-function SwitchFieldInner<T extends FieldValues>({
-  name,
-  label,
-  description,
-  control,
-}: SwitchFieldProps<T>) {
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field }) => (
-        <div className="flex items-center gap-2">
-          <Switch id={name} checked={field.value} onCheckedChange={field.onChange} />
-          <Label htmlFor={name}>{label}</Label>
-          <Tooltip>
-            <TooltipTrigger>{infoIcon}</TooltipTrigger>
-            <TooltipContent>
-              <p>{description}</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      )}
-    />
-  );
-}
-
-export const SwitchField = memo(SwitchFieldInner) as typeof SwitchFieldInner;

web/app/routes/probeshell.tsx

@@ -53,6 +53,9 @@ export default function ProbeShellGenerator() {
       reqParamName: "",
       seconds: 5,
       sleepServer: "Tomcat",
+      debug: false,
+      byPassJavaModule: false,
+      lambdaSuffix: false,
       shrink: true,
       staticInitialize: true,
     },