diff --git a/web/src/components/code-viewer.tsx b/web/src/components/code-viewer.tsx
index 2d4a94c7..572329c9 100644
--- a/web/src/components/code-viewer.tsx
+++ b/web/src/components/code-viewer.tsx
@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "@/components/ui/button.tsx";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Check, Copy } from "lucide-react";
 import { type HTMLProps, type ReactNode, useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
@@ -12,7 +12,7 @@ interface CopyButtonProps extends ButtonProps {
   src?: string;
 }
 
-export function CopyButton({ value }: CopyButtonProps) {
+export function CopyButton({ value }: Readonly<CopyButtonProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
diff --git a/web/src/components/copyable-field.tsx b/web/src/components/copyable-field.tsx
index 416e696e..1937e894 100644
--- a/web/src/components/copyable-field.tsx
+++ b/web/src/components/copyable-field.tsx
@@ -12,7 +12,7 @@ interface CopyableFieldProps {
   text?: string;
 }
 
-export function CopyableField({ label, value, text }: CopyableFieldProps) {
+export function CopyableField({ label, value, text }: Readonly<CopyableFieldProps>) {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
 
diff --git a/web/src/components/shell-result.tsx b/web/src/components/shell-result.tsx
index 41881e71..0eeed927 100644
--- a/web/src/components/shell-result.tsx
+++ b/web/src/components/shell-result.tsx
@@ -16,12 +16,12 @@ export function ShellResult({
   allPackResults,
   packMethod,
   generateResult,
-}: {
+}: Readonly<{
   packResult: string | undefined;
   allPackResults: Map<string, string> | undefined;
   packMethod: string;
   generateResult?: GenerateResult;
-}) {
+}>) {
   const { t } = useTranslation();
   if (!generateResult) {
     return <QuickUsage />;
diff --git a/web/src/components/tools/antsword-tab.tsx b/web/src/components/tools/antsword-tab.tsx
index f1b63998..576151b4 100644
--- a/web/src/components/tools/antsword-tab.tsx
+++ b/web/src/components/tools/antsword-tab.tsx
@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function AntSwordTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/behinder-tab.tsx b/web/src/components/tools/behinder-tab.tsx
index a8e35fca..964c0a6d 100644
--- a/web/src/components/tools/behinder-tab.tsx
+++ b/web/src/components/tools/behinder-tab.tsx
@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function BehinderTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/classname-field.tsx b/web/src/components/tools/classname-field.tsx
index 443d9eba..5f5a2f7d 100644
--- a/web/src/components/tools/classname-field.tsx
+++ b/web/src/components/tools/classname-field.tsx
@@ -4,7 +4,7 @@ import { FormSchema } from "@/types/schema.ts";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-export function OptionalClassFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+export function OptionalClassFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/command-tab.tsx b/web/src/components/tools/command-tab.tsx
index ad0d4055..7ba8f2ac 100644
--- a/web/src/components/tools/command-tab.tsx
+++ b/web/src/components/tools/command-tab.tsx
@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function CommandTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/godzilla-tab.tsx b/web/src/components/tools/godzilla-tab.tsx
index 892dcbb6..30aa6f5d 100644
--- a/web/src/components/tools/godzilla-tab.tsx
+++ b/web/src/components/tools/godzilla-tab.tsx
@@ -12,7 +12,7 @@ import { UrlPatternFormField } from "./urlpattern-field";
 export function GodzillaTabContent({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/neoreg-tab.tsx b/web/src/components/tools/neoreg-tab.tsx
index 77a3a3a0..61fb1a20 100644
--- a/web/src/components/tools/neoreg-tab.tsx
+++ b/web/src/components/tools/neoreg-tab.tsx
@@ -9,7 +9,10 @@ import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
 
-export function NeoRegTabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+export function NeoRegTabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/shelltype-field.tsx b/web/src/components/tools/shelltype-field.tsx
index 1eedbde6..4bd045db 100644
--- a/web/src/components/tools/shelltype-field.tsx
+++ b/web/src/components/tools/shelltype-field.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";
 export function ShellTypeFormField({
   form,
   shellTypes,
-}: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
@@ -24,8 +24,8 @@ export function ShellTypeFormField({
                   <SelectValue placeholder={t("placeholders.select")} />
                 </SelectTrigger>
               </FormControl>
-              <SelectContent key={shellTypes.join(",")}>
-                {shellTypes.length ? (
+              <SelectContent key={shellTypes?.join(",")}>
+                {shellTypes?.length ? (
                   shellTypes.map((v) => (
                     <SelectItem key={v} value={v}>
                       {v}
diff --git a/web/src/components/tools/suo5-tab.tsx b/web/src/components/tools/suo5-tab.tsx
index e1ab7462..a0552b88 100644
--- a/web/src/components/tools/suo5-tab.tsx
+++ b/web/src/components/tools/suo5-tab.tsx
@@ -9,7 +9,10 @@ import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";
 
-export function Suo5TabContent({ form, shellTypes }: { form: UseFormReturn<FormSchema>; shellTypes: Array<string> }) {
+export function Suo5TabContent({
+  form,
+  shellTypes,
+}: Readonly<{ form: UseFormReturn<FormSchema>; shellTypes: Array<string> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>
diff --git a/web/src/components/tools/urlpattern-field.tsx b/web/src/components/tools/urlpattern-field.tsx
index 0fbfc08f..5b086e58 100644
--- a/web/src/components/tools/urlpattern-field.tsx
+++ b/web/src/components/tools/urlpattern-field.tsx
@@ -5,7 +5,7 @@ import { FormSchema } from "@/types/schema.ts";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-export function UrlPatternFormField({ form }: { form: UseFormReturn<FormSchema> }) {
+export function UrlPatternFormField({ form }: Readonly<{ form: UseFormReturn<FormSchema> }>) {
   const { t } = useTranslation();
   return (
     <FormProvider {...form}>