feat(ui): add Configuration UI integration for newTerminal option

Add UI support for newTerminal core feature added.

- Add i18n translation keys (en.json, ko.json)
- Add checkbox UI to command-form.tsx (shown only in Terminal mode)
- Add checkbox for single commands within groups in group-command-item.tsx
- Add newTerminal field to Zod schemas and type definitions
- Fix missing newTerminal field in ensure-id.ts data transformation
- Fix missing newTerminal field in webview-provider.ts Zod validation schema

fix #246

Author: kubrickcode

src/internal/providers/webview-provider.ts

@@ -91,6 +91,7 @@ const buttonConfigWithOptionalIdSchema: z.ZodSchema = z.lazy(() =>
     id: z.string().optional(),
     insertOnly: z.boolean().optional(),
     name: z.string(),
+    newTerminal: z.boolean().optional(),
     shortcut: z.string().optional(),
     terminalName: z.string().optional(),
     useVsCodeApi: z.boolean().optional(),

src/internal/utils/ensure-id.ts

@@ -37,6 +37,7 @@ export const ensureId = (config: ButtonConfigWithOptionalId): ButtonConfig => {
     id,
     insertOnly: config.insertOnly,
     name: config.name,
+    newTerminal: config.newTerminal,
     shortcut: config.shortcut,
     terminalName: config.terminalName,
     useVsCodeApi: config.useVsCodeApi,

src/view/src/components/command-form.tsx

@@ -52,6 +52,7 @@ const createDefaultValues = (command?: ButtonConfig | null): ButtonConfigDraft =
         id: crypto.randomUUID(),
         insertOnly: false,
         name: "",
+        newTerminal: false,
         shortcut: "",
         terminalName: "",
         useVsCodeApi: false,
@@ -62,6 +63,7 @@ const buildCommandConfig = (data: ButtonConfigDraft, isGroup: boolean): ButtonCo
     ...data,
     color: data.color || undefined,
     name: data.name.trim(),
+    newTerminal: data.newTerminal || undefined,
     shortcut: data.shortcut || undefined,
     terminalName: data.terminalName || undefined,
   };
@@ -320,16 +322,33 @@ export const CommandForm = ({
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
-            <div className="space-y-2">
-              <FormLabel htmlFor="terminalName">{t("commandForm.terminalName")}</FormLabel>
-              <Input
-                error={!!errors.terminalName}
-                errorMessage={errors.terminalName?.message}
-                id="terminalName"
-                placeholder={t("commandForm.terminalNamePlaceholder")}
-                {...register("terminalName")}
-              />
-            </div>
+            {!useVsCodeApi && !insertOnly && (
+              <>
+                <div className="space-y-2">
+                  <FormLabel htmlFor="terminalName">{t("commandForm.terminalName")}</FormLabel>
+                  <Input
+                    error={!!errors.terminalName}
+                    errorMessage={errors.terminalName?.message}
+                    id="terminalName"
+                    placeholder={t("commandForm.terminalNamePlaceholder")}
+                    {...register("terminalName")}
+                  />
+                </div>
+                <Controller
+                  control={control}
+                  name="newTerminal"
+                  render={({ field }) => (
+                    <Checkbox
+                      checked={field.value}
+                      description={t("commandForm.newTerminalDescription")}
+                      id="newTerminal"
+                      label={t("commandForm.newTerminal")}
+                      onCheckedChange={field.onChange}
+                    />
+                  )}
+                />
+              </>
+            )}
           </>
         )}
 

src/view/src/components/group-command-item.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next";
 
 import {
   Button,
+  Checkbox,
   Input,
   DropdownMenu,
   DropdownMenuTrigger,
@@ -174,6 +175,14 @@ export const GroupCommandItem = ({ command, id, index, onEditGroup }: GroupComma
                   value={command.shortcut || ""}
                 />
               </div>
+              {!command.useVsCodeApi && !command.insertOnly && (
+                <Checkbox
+                  checked={command.newTerminal || false}
+                  id={`newTerminal-${id}`}
+                  label={t("commandForm.newTerminal")}
+                  onCheckedChange={(checked) => updateCommand(index, { newTerminal: !!checked })}
+                />
+              )}
             </>
           )}
 

src/view/src/i18n/locales/en.json

@@ -46,6 +46,8 @@
     "insertOnlyDesc": "Insert Only (don't execute)",
     "terminalName": "Terminal Name (optional)",
     "terminalNamePlaceholder": "e.g., Build Terminal",
+    "newTerminal": "Always create new terminal",
+    "newTerminalDescription": "Create a fresh terminal each time instead of reusing existing one",
     "executeAll": "Execute all commands simultaneously",
     "groupCommandsLabel": "Group Commands",
     "color": "Color (optional)",

src/view/src/i18n/locales/ko.json

@@ -46,6 +46,8 @@
     "insertOnlyDesc": "입력만 (실행하지 않음)",
     "terminalName": "터미널 이름 (optional)",
     "terminalNamePlaceholder": "예: 빌드 터미널",
+    "newTerminal": "항상 새 터미널 생성",
+    "newTerminalDescription": "기존 터미널을 재사용하지 않고 매번 새 터미널 생성",
     "executeAll": "모든 명령 동시 실행",
     "groupCommandsLabel": "그룹 명령",
     "color": "색상 (optional)",

src/view/src/schemas/command-form-schema.ts

@@ -32,6 +32,7 @@ const buttonConfigSchema = z.lazy(() =>
     id: z.string(),
     insertOnly: z.boolean().optional(),
     name: z.string().min(1, "Command name is required"),
+    newTerminal: z.boolean().optional(),
     shortcut: z.string().optional(),
     terminalName: z.string().optional(),
     useVsCodeApi: z.boolean().optional(),
@@ -48,6 +49,7 @@ export const createCommandFormSchema = (): z.ZodType<ButtonConfig> => {
       id: z.string(),
       insertOnly: z.boolean().optional(),
       name: z.string().min(1, "Command name is required"),
+      newTerminal: z.boolean().optional(),
       shortcut: z.string().optional(),
       terminalName: z.string().optional(),
       useVsCodeApi: z.boolean().optional(),

src/view/src/types.tsx

@@ -18,6 +18,7 @@ export type ButtonConfigDraft = {
   index?: number;
   insertOnly?: boolean;
   name: string;
+  newTerminal?: boolean;
   shortcut?: string;
   terminalName?: string;
   useVsCodeApi?: boolean;
@@ -30,6 +31,7 @@ export const toCommandButton = (draft: ButtonConfigDraft): CommandButton => ({
   index: draft.index,
   insertOnly: draft.insertOnly,
   name: draft.name,
+  newTerminal: draft.newTerminal,
   shortcut: draft.shortcut,
   terminalName: draft.terminalName,
   useVsCodeApi: draft.useVsCodeApi,
@@ -54,6 +56,7 @@ export const toDraft = (config: ButtonConfig): ButtonConfigDraft => ({
   index: config.index,
   insertOnly: "insertOnly" in config ? config.insertOnly : undefined,
   name: config.name,
+  newTerminal: "newTerminal" in config ? config.newTerminal : undefined,
   shortcut: config.shortcut,
   terminalName: "terminalName" in config ? config.terminalName : undefined,
   useVsCodeApi: "useVsCodeApi" in config ? config.useVsCodeApi : undefined,