fix: add validation feedback for empty fields in group command save

Problem:
- Saving group button with empty commands showed no feedback
- Users couldn't tell what went wrong

Solution:
- Added 3 Zod schema validations (empty group, empty command, empty commands in group)
- Display red border (aria-invalid) on empty fields
- Added i18n error messages (en/ko)
- Added related E2E tests

Author: kubrickcode

src/view/e2e/empty-state.spec.ts

@@ -1,11 +1,11 @@
 import { expect, test } from "@playwright/test";
 
-type DefaultCommand = { name: string; command: string } | { name: string; isGroup: true };
+type DefaultCommand = { name: string; command: string };
 
 const DEFAULT_COMMANDS: DefaultCommand[] = [
   { name: "$(pass) Test", command: "npm test" },
   { name: "$(terminal) Terminal", command: "echo 'Hello World'" },
-  { name: "$(git-branch) Git", isGroup: true },
+  { name: "$(git-branch) Git", command: "git status" },
 ];
 
 test.describe("Test 15: Empty State UI", () => {
@@ -52,11 +52,7 @@ test.describe("Test 15: Empty State UI", () => {
     for (const cmd of DEFAULT_COMMANDS) {
       await page.getByRole("button", { name: "Add new command" }).click();
       await page.getByRole("textbox", { name: "Command Name" }).fill(cmd.name);
-      if ("command" in cmd) {
-        await page.getByRole("textbox", { name: "Command", exact: true }).fill(cmd.command);
-      } else {
-        await page.getByLabel("Group Commands").click();
-      }
+      await page.getByRole("textbox", { name: "Command", exact: true }).fill(cmd.command);
       await page.getByRole("button", { name: "Save" }).click();
       await expect(page.getByRole("dialog")).not.toBeVisible();
     }

src/view/e2e/form-required-field-validation.spec.ts

@@ -28,6 +28,26 @@ test.describe("Test C5: Form Required Field Validation", () => {
     await expect(dialog).toBeVisible();
   });
 
+  test("should show validation error when command field is empty for single command", async ({
+    page,
+  }) => {
+    // Given: Open add command dialog
+    await page.getByRole("button", { name: "Add new command" }).click();
+
+    const dialog = page.getByRole("dialog", { name: "Add New Command" });
+    await expect(dialog).toBeVisible();
+
+    // When: Fill name but leave command empty, then save
+    await page.getByRole("textbox", { name: "Command Name" }).fill("Test");
+    await page.getByRole("button", { name: "Save" }).click();
+
+    // Then: Command validation error should be displayed
+    await expect(page.getByText("Command is required")).toBeVisible();
+
+    // Dialog should remain open
+    await expect(dialog).toBeVisible();
+  });
+
   test("should clear validation error after valid input and re-submit", async ({
     page,
   }) => {
@@ -38,16 +58,17 @@ test.describe("Test C5: Form Required Field Validation", () => {
     const errorMessage = page.getByText("Command name is required");
     await expect(errorMessage).toBeVisible();
 
-    // When: Fill name field and attempt save again
+    // When: Fill all required fields and attempt save again
     await page.getByRole("textbox", { name: "Command Name" }).fill("Test");
+    await page.getByPlaceholder("e.g., npm start").fill("npm test");
     await page.getByRole("button", { name: "Save" }).click();
 
     // Then: Dialog should close (validation passed)
     const dialog = page.getByRole("dialog", { name: "Add New Command" });
     await expect(dialog).not.toBeVisible();
   });
 
-  test("should allow save after filling required name field", async ({
+  test("should allow save after filling all required fields", async ({
     page,
   }) => {
     // Given: Open dialog
@@ -57,10 +78,11 @@ test.describe("Test C5: Form Required Field Validation", () => {
     await page.getByRole("button", { name: "Save" }).click();
     await expect(page.getByText("Command name is required")).toBeVisible();
 
-    // When: Fill the required name field and save
+    // When: Fill all required fields and save
     await page
       .getByRole("textbox", { name: "Command Name" })
       .fill("ValidCommand");
+    await page.getByPlaceholder("e.g., npm start").fill("npm run build");
     await page.getByRole("button", { name: "Save" }).click();
 
     // Then: Dialog should close (form submitted successfully)

src/view/e2e/keyboard-navigation-dialog.spec.ts

@@ -50,9 +50,11 @@ test.describe("Test H3: Keyboard Navigation - Dialog", () => {
     const dialog = page.getByRole("dialog", { name: "Add New Command" });
     await expect(dialog).toBeVisible();
 
-    // Fill command name and press Enter
+    // Fill command name and command (required field)
     const nameInput = page.getByRole("textbox", { name: "Command Name" });
     await nameInput.fill("EnterKeyTest");
+    const commandInput = page.getByRole("textbox", { name: "Command", exact: true });
+    await commandInput.fill("echo test");
     await page.keyboard.press("Enter");
 
     // Dialog should close and command should be added

src/view/e2e/validate-duplicate-shortcuts.spec.ts

@@ -46,7 +46,7 @@ const createDefaultValues = (command?: ButtonConfig | null): ButtonConfigDraft =
         color: "",
         command: "",
         executeAll: false,
-        group: [],
+        group: undefined,
         id: crypto.randomUUID(),
         insertOnly: false,
         name: "",
@@ -192,6 +192,7 @@ export const CommandForm = ({ command, formId, onSave }: CommandFormProps) => {
             <div className="space-y-2">
               <FormLabel htmlFor="command">{t("commandForm.command")}</FormLabel>
               <Input
+                aria-invalid={!!errors.command}
                 id="command"
                 placeholder={
                   useVsCodeApi
@@ -200,6 +201,9 @@ export const CommandForm = ({ command, formId, onSave }: CommandFormProps) => {
                 }
                 {...register("command")}
               />
+              {errors.command && (
+                <p className="text-sm text-red-500">{t("commandForm.errors.commandRequired")}</p>
+              )}
               {useVsCodeApi && (
                 <p className="text-xs text-muted-foreground">
                   {t("commandForm.vsCodeApiTip")}{" "}
@@ -295,8 +299,16 @@ export const CommandForm = ({ command, formId, onSave }: CommandFormProps) => {
               <FormLabel>{t("commandForm.groupCommandsLabel")}</FormLabel>
               <GroupCommandEditor
                 commands={groupCommands || []}
+                hasError={!!errors.group}
                 onChange={(commands) => setValue("group", commands)}
               />
+              {errors.group && (
+                <p className="text-sm text-red-500">
+                  {errors.group.message?.includes("at least one")
+                    ? t("commandForm.errors.groupEmpty")
+                    : t("commandForm.errors.groupCommandRequired")}
+                </p>
+              )}
             </div>
           </div>
         )}

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

@@ -8,18 +8,20 @@ import { GroupEditDialog } from "./group-edit-dialog";
 type GroupCommandEditorProps = {
   commands: ButtonConfig[];
   depth?: number;
+  hasError?: boolean;
   onChange: (commands: ButtonConfig[]) => void;
   title?: string;
 };
 
 export const GroupCommandEditor = ({
   commands,
   depth = 0,
+  hasError = false,
   onChange,
   title,
 }: GroupCommandEditorProps) => {
   return (
-    <CommandEditProvider commands={commands} onCommandsChange={onChange}>
+    <CommandEditProvider commands={commands} hasError={hasError} onCommandsChange={onChange}>
       <GroupCommandEditorContent depth={depth} title={title} />
     </CommandEditProvider>
   );

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

@@ -35,7 +35,9 @@ type GroupCommandItemProps = {
 export const GroupCommandItem = ({ command, id, index, onEditGroup }: GroupCommandItemProps) => {
   const { t } = useTranslation();
   const isGroup = !!command.group;
-  const { deleteCommand, updateCommand } = useCommandEdit();
+  const { deleteCommand, hasError, updateCommand } = useCommandEdit();
+  const isCommandEmpty = !isGroup && (!command.command || command.command.trim() === "");
+  const isNameEmpty = !command.name || command.name.trim() === "";
 
   const { attributes, listeners, setNodeRef, style } = useSortableItem(id);
 
@@ -74,6 +76,7 @@ export const GroupCommandItem = ({ command, id, index, onEditGroup }: GroupComma
 
         <div className="flex-1 space-y-2">
           <Input
+            aria-invalid={hasError && isNameEmpty}
             onChange={(e) => updateCommand(index, { name: e.target.value })}
             placeholder={
               isGroup
@@ -86,6 +89,7 @@ export const GroupCommandItem = ({ command, id, index, onEditGroup }: GroupComma
           {!isGroup && (
             <>
               <Input
+                aria-invalid={hasError && isCommandEmpty}
                 onChange={(e) => updateCommand(index, { command: e.target.value })}
                 placeholder={t("groupCommandItem.commandPlaceholder")}
                 value={command.command || ""}

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

@@ -23,6 +23,7 @@ type CommandEditContextType = {
   commands: ButtonConfig[];
   deleteCommand: (index: number) => void;
   editingGroup: EditingGroup;
+  hasError: boolean;
   onCommandsChange: (commands: ButtonConfig[]) => void;
   openGroupEditor: (group: GroupButton, index: number, depth: number) => void;
   saveGroup: (updatedGroup: GroupButton) => void;
@@ -42,12 +43,14 @@ export const useCommandEdit = () => {
 type CommandEditProviderProps = {
   children: ReactNode;
   commands: ButtonConfig[];
+  hasError?: boolean;
   onCommandsChange: (commands: ButtonConfig[]) => void;
 };
 
 export const CommandEditProvider = ({
   children,
   commands,
+  hasError = false,
   onCommandsChange,
 }: CommandEditProviderProps) => {
   const [editingGroup, setEditingGroup] = useState<EditingGroup>(null);
@@ -126,6 +129,7 @@ export const CommandEditProvider = ({
         commands,
         deleteCommand,
         editingGroup,
+        hasError,
         onCommandsChange,
         openGroupEditor,
         saveGroup,

src/view/src/context/command-edit-context.tsx

@@ -50,7 +50,12 @@
     "groupCommandsLabel": "Group Commands",
     "color": "Color (optional)",
     "shortcut": "Shortcut (optional)",
-    "shortcutPlaceholder": "e.g., t"
+    "shortcutPlaceholder": "e.g., t",
+    "errors": {
+      "commandRequired": "Command is required",
+      "groupEmpty": "Group must have at least one command",
+      "groupCommandRequired": "All commands in group must have a command"
+    }
   },
   "commandFormDialog": {
     "editCommand": "Edit Command",

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

@@ -50,7 +50,12 @@
     "groupCommandsLabel": "그룹 명령",
     "color": "색상 (optional)",
     "shortcut": "단축키 (optional)",
-    "shortcutPlaceholder": "예: t"
+    "shortcutPlaceholder": "예: t",
+    "errors": {
+      "commandRequired": "명령어를 입력해주세요",
+      "groupEmpty": "그룹에 최소 하나의 커맨드가 필요합니다",
+      "groupCommandRequired": "그룹 내 모든 커맨드에 명령어를 입력해주세요"
+    }
   },
   "commandFormDialog": {
     "editCommand": "명령 편집",