@agents-inc/cli 0.42.0 → 0.45.0

package/dist/components/wizard/category-grid.test.js

@@ -21,9 +21,9 @@ import {
 } from "../../chunk-XY3XDVMI.js";
 import {
   CategoryGrid
-} from "../../chunk-53K3URKF.js";
+} from "../../chunk-ABE55TEU.js";
 import "../../chunk-GG4BSB6S.js";
-import "../../chunk-PP7NDFFE.js";
+import "../../chunk-FVN5PFFY.js";
 import {
   init_esm_shims
 } from "../../chunk-DHET7RCE.js";
@@ -51,13 +51,13 @@ var defaultCategories = [
     "web-framework",
     "Framework",
     [
-      createOption("web-test-react", "React", {
+      createOption("web-framework-react", "React", {
         state: "recommended",
         stateReason: "Popular choice"
       }),
-      createOption("web-test-vue", "Vue"),
-      createOption("web-test-angular", "Angular"),
-      createOption("web-test-svelte", "Svelte")
+      createOption("web-framework-vue-composition-api", "Vue"),
+      createOption("web-framework-angular-standalone", "Angular"),
+      createOption("web-framework-solidjs", "SolidJS")
     ],
     { required: true }
   ),
@@ -65,43 +65,45 @@ var defaultCategories = [
     "web-styling",
     "Styling",
     [
-      createOption("web-scss-mod", "SCSS Modules", { selected: true }),
-      createOption("web-test-tailwind", "Tailwind", { state: "recommended" }),
-      createOption("web-test-styled", "Styled Components"),
-      createOption("web-test-vanilla", "Vanilla CSS")
+      createOption("web-styling-scss-modules", "SCSS Modules", { selected: true }),
+      createOption("web-styling-tailwind", "Tailwind", { state: "recommended" }),
+      createOption("web-styling-cva", "CVA"),
+      createOption("web-framework-nuxt", "Nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-test-zustand", "Zustand", { state: "recommended" }),
-    createOption("web-test-jotai", "Jotai"),
-    createOption("web-test-redux", "Redux", {
+    createOption("web-state-zustand", "Zustand", { state: "recommended" }),
+    createOption("web-state-jotai", "Jotai"),
+    createOption("web-state-redux-toolkit", "Redux", {
       state: "discouraged",
       stateReason: "Complex for most apps"
     }),
-    createOption("web-test-mobx", "MobX")
+    createOption("web-state-mobx", "MobX")
   ]),
   createCategory("web-server-state", "Server State", [
-    createOption("web-react-query", "React Query", { selected: true }),
-    createOption("web-test-swr", "SWR"),
-    createOption("web-test-apollo", "Apollo")
+    createOption("web-server-state-react-query", "React Query", { selected: true }),
+    createOption("web-data-fetching-swr", "SWR"),
+    createOption("web-data-fetching-graphql-apollo", "Apollo")
   ]),
-  createCategory("api-analytics", "Analytics", [createOption("web-test-posthog", "PostHog")])
+  createCategory("api-analytics", "Analytics", [
+    createOption("api-analytics-posthog-analytics", "PostHog")
+  ])
 ];
 var categoriesWithFramework = [
   createCategory(
     "web-framework",
     "Framework",
     [
-      createOption("web-test-react", "React", {
+      createOption("web-framework-react", "React", {
         state: "recommended",
         stateReason: "Popular choice",
         selected: true
         // Framework selected
       }),
-      createOption("web-test-vue", "Vue"),
-      createOption("web-test-angular", "Angular"),
-      createOption("web-test-svelte", "Svelte")
+      createOption("web-framework-vue-composition-api", "Vue"),
+      createOption("web-framework-angular-standalone", "Angular"),
+      createOption("web-framework-solidjs", "SolidJS")
     ],
     { required: true }
   ),
@@ -109,20 +111,76 @@ var categoriesWithFramework = [
     "web-styling",
     "Styling",
     [
-      createOption("web-scss-mod", "SCSS Modules"),
-      createOption("web-test-tailwind", "Tailwind", { state: "recommended" }),
-      createOption("web-test-styled", "Styled Components"),
-      createOption("web-test-vanilla", "Vanilla CSS")
+      createOption("web-styling-scss-modules", "SCSS Modules"),
+      createOption("web-styling-tailwind", "Tailwind", { state: "recommended" }),
+      createOption("web-styling-cva", "CVA"),
+      createOption("web-framework-nuxt", "Nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-test-zustand", "Zustand", { state: "recommended" }),
-    createOption("web-test-jotai", "Jotai"),
-    createOption("web-test-redux", "Redux", { state: "discouraged" }),
-    createOption("web-test-mobx", "MobX")
+    createOption("web-state-zustand", "Zustand", { state: "recommended" }),
+    createOption("web-state-jotai", "Jotai"),
+    createOption("web-state-redux-toolkit", "Redux", { state: "discouraged" }),
+    createOption("web-state-mobx", "MobX")
   ])
 ];
+var manyCategories = [
+  createCategory("web-framework", "Category 0", [
+    createOption("web-framework-react", "Option 0A"),
+    createOption("web-framework-vue-composition-api", "Option 0B"),
+    createOption("web-framework-angular-standalone", "Option 0C")
+  ]),
+  createCategory("web-styling", "Category 1", [
+    createOption("web-styling-tailwind", "Option 1A"),
+    createOption("web-styling-scss-modules", "Option 1B"),
+    createOption("web-styling-cva", "Option 1C")
+  ]),
+  createCategory("web-client-state", "Category 2", [
+    createOption("web-state-zustand", "Option 2A"),
+    createOption("web-state-jotai", "Option 2B"),
+    createOption("web-state-mobx", "Option 2C")
+  ]),
+  createCategory("web-server-state", "Category 3", [
+    createOption("web-server-state-react-query", "Option 3A"),
+    createOption("web-data-fetching-swr", "Option 3B"),
+    createOption("web-data-fetching-graphql-apollo", "Option 3C")
+  ]),
+  createCategory("web-forms", "Category 4", [
+    createOption("web-forms-react-hook-form", "Option 4A"),
+    createOption("web-forms-vee-validate", "Option 4B"),
+    createOption("web-forms-zod-validation", "Option 4C")
+  ]),
+  createCategory("web-testing", "Category 5", [
+    createOption("web-testing-vitest", "Option 5A"),
+    createOption("web-testing-playwright-e2e", "Option 5B"),
+    createOption("web-testing-cypress-e2e", "Option 5C")
+  ]),
+  createCategory("web-mocking", "Category 6", [
+    createOption("web-mocks-msw", "Option 6A"),
+    createOption("web-testing-react-testing-library", "Option 6B"),
+    createOption("web-testing-vue-test-utils", "Option 6C")
+  ]),
+  createCategory("web-i18n", "Category 7", [
+    createOption("web-i18n-next-intl", "Option 7A"),
+    createOption("web-i18n-react-intl", "Option 7B"),
+    createOption("web-i18n-vue-i18n", "Option 7C")
+  ])
+];
+var navCategories = [
+  createCategory("web-framework", "Category 0", [createOption("web-framework-react", "Option 0A")]),
+  createCategory("web-styling", "Category 1", [createOption("web-styling-tailwind", "Option 1A")]),
+  createCategory("web-client-state", "Category 2", [
+    createOption("web-state-zustand", "Option 2A")
+  ]),
+  createCategory("web-server-state", "Category 3", [
+    createOption("web-server-state-react-query", "Option 3A")
+  ]),
+  createCategory("web-forms", "Category 4", [
+    createOption("web-forms-react-hook-form", "Option 4A")
+  ]),
+  createCategory("web-testing", "Category 5", [createOption("web-testing-vitest", "Option 5A")])
+];
 var defaultProps = {
   categories: defaultCategories,
   defaultFocusedRow: 0,
@@ -160,7 +218,7 @@ describe("CategoryGrid component", () => {
       globalExpect(output).toContain("React");
       globalExpect(output).toContain("Vue");
       globalExpect(output).toContain("Angular");
-      globalExpect(output).toContain("Svelte");
+      globalExpect(output).toContain("SolidJS");
       globalExpect(output).toContain("SCSS Modules");
       globalExpect(output).toContain("Tailwind");
     });
@@ -219,8 +277,8 @@ describe("CategoryGrid component", () => {
     it("should show disabled options with dimmed styling", () => {
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1"),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+          createOption("web-forms-react-hook-form", "Option 1"),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -231,7 +289,7 @@ describe("CategoryGrid component", () => {
     it("should render selected skills with label text", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Selected Skill", { selected: true })
+          createOption("web-forms-react-hook-form", "Selected Skill", { selected: true })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -242,7 +300,10 @@ describe("CategoryGrid component", () => {
     it("should render unselected skills with label text", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Unselected Skill", { state: "normal", selected: false })
+          createOption("web-forms-react-hook-form", "Unselected Skill", {
+            state: "normal",
+            selected: false
+          })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -253,7 +314,7 @@ describe("CategoryGrid component", () => {
     it("should render disabled skills with label text", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Disabled Skill", { state: "disabled" })
+          createOption("web-forms-react-hook-form", "Disabled Skill", { state: "disabled" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -261,10 +322,29 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("Disabled Skill");
     });
+    it("should render disabled+selected skills with label text", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", "Disabled Selected", {
+            state: "disabled",
+            selected: true
+          }),
+          createOption("web-forms-vee-validate", "Disabled Only", {
+            state: "disabled",
+            selected: false
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Disabled Selected");
+      globalExpect(output).toContain("Disabled Only");
+    });
     it("should render discouraged skills with label text", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Discouraged Skill", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", "Discouraged Skill", { state: "discouraged" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -275,8 +355,8 @@ describe("CategoryGrid component", () => {
     it("should render both selected and unselected skills with labels", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Active", { selected: true }),
-          createOption("web-test-opt2", "Inactive", { selected: false })
+          createOption("web-forms-react-hook-form", "Active", { selected: true }),
+          createOption("web-forms-vee-validate", "Inactive", { selected: false })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories, expertMode: true });
@@ -288,7 +368,7 @@ describe("CategoryGrid component", () => {
     it("should render skill label regardless of selection state", () => {
       const categories1 = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Toggle Skill", { selected: false })
+          createOption("web-forms-react-hook-form", "Toggle Skill", { selected: false })
         ])
       ];
       const { lastFrame: frame1, unmount: unmount1 } = renderGrid({ categories: categories1 });
@@ -296,7 +376,7 @@ describe("CategoryGrid component", () => {
       unmount1();
       const categories2 = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Toggle Skill", { selected: true })
+          createOption("web-forms-react-hook-form", "Toggle Skill", { selected: true })
         ])
       ];
       const { lastFrame: frame2, unmount: unmount2 } = renderGrid({ categories: categories2 });
@@ -328,10 +408,10 @@ describe("CategoryGrid component", () => {
     it("should not lock any sections when no framework category exists", () => {
       const categoriesNoFramework = [
         createCategory("web-styling", "Styling", [
-          createOption("web-test-scss", "SCSS"),
-          createOption("web-test-tailwind", "Tailwind")
+          createOption("web-styling-scss-modules", "SCSS"),
+          createOption("web-styling-tailwind", "Tailwind")
         ]),
-        createCategory("web-client-state", "State", [createOption("web-test-zustand", "Zustand")])
+        createCategory("web-client-state", "State", [createOption("web-state-zustand", "Zustand")])
       ];
       const { lastFrame, unmount } = renderGrid({
         categories: categoriesNoFramework
@@ -546,7 +626,7 @@ describe("CategoryGrid component", () => {
       await delay(RENDER_DELAY_MS);
       await stdin.write(" ");
       await delay(INPUT_DELAY_MS);
-      globalExpect(onToggle).toHaveBeenCalledWith("web-framework", "web-test-vue");
+      globalExpect(onToggle).toHaveBeenCalledWith("web-framework", "web-framework-vue-composition-api");
     });
     it("should call onToggle when pressing space on a selected option", async () => {
       const onToggle = vi.fn();
@@ -555,8 +635,8 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-test-react", "React", { selected: true }),
-            createOption("web-test-vue", "Vue")
+            createOption("web-framework-react", "React", { selected: true }),
+            createOption("web-framework-vue-composition-api", "Vue")
           ],
           { required: true }
         )
@@ -573,14 +653,14 @@ describe("CategoryGrid component", () => {
       await delay(RENDER_DELAY_MS);
       await stdin.write(" ");
       await delay(INPUT_DELAY_MS);
-      globalExpect(onToggle).toHaveBeenCalledWith("web-framework", "web-test-react");
+      globalExpect(onToggle).toHaveBeenCalledWith("web-framework", "web-framework-react");
     });
     it("should NOT call onToggle when all options in a category are disabled", async () => {
       const onToggle = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1", { state: "disabled" }),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+          createOption("web-forms-react-hook-form", "Option 1", { state: "disabled" }),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -614,9 +694,9 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1"),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" }),
-          createOption("web-test-opt3", "Option 3")
+          createOption("web-forms-react-hook-form", "Option 1"),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" }),
+          createOption("web-forms-zod-validation", "Option 3")
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -636,9 +716,9 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1"),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" }),
-          createOption("web-test-opt3", "Option 3")
+          createOption("web-forms-react-hook-form", "Option 1"),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" }),
+          createOption("web-forms-zod-validation", "Option 3")
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -659,8 +739,8 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1", { state: "disabled" }),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+          createOption("web-forms-react-hook-form", "Option 1", { state: "disabled" }),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -759,8 +839,8 @@ describe("CategoryGrid component", () => {
     it("should show Disabled label for disabled options when showLabels is true", () => {
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-test-opt1", "Option 1"),
-          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+          createOption("web-forms-react-hook-form", "Option 1"),
+          createOption("web-forms-vee-validate", "Option 2", { state: "disabled" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories, showLabels: true });
@@ -794,7 +874,9 @@ describe("CategoryGrid component", () => {
   describe("edge cases", () => {
     it("should handle single category", () => {
       const categories = [
-        createCategory("web-forms", "Single Category", [createOption("web-test-opt1", "Option 1")])
+        createCategory("web-forms", "Single Category", [
+          createOption("web-forms-react-hook-form", "Option 1")
+        ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
@@ -804,7 +886,9 @@ describe("CategoryGrid component", () => {
     });
     it("should handle single option in category", () => {
       const categories = [
-        createCategory("web-forms", "Single", [createOption("web-test-only", "Only Option")])
+        createCategory("web-forms", "Single", [
+          createOption("web-forms-react-hook-form", "Only Option")
+        ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
@@ -812,10 +896,19 @@ describe("CategoryGrid component", () => {
       globalExpect(output).toContain("Only Option");
     });
     it("should handle category with many options (flows naturally)", () => {
-      const options = Array.from(
-        { length: 10 },
-        (_, i) => createOption(`web-test-opt${i}`, `Option ${i}`)
-      );
+      const manySkillIds = [
+        "web-framework-react",
+        "web-framework-vue-composition-api",
+        "web-framework-angular-standalone",
+        "web-framework-solidjs",
+        "web-framework-nuxt",
+        "web-framework-remix",
+        "web-framework-nextjs-app-router",
+        "web-framework-nextjs-server-actions",
+        "web-styling-tailwind",
+        "web-styling-scss-modules"
+      ];
+      const options = manySkillIds.map((id, i) => createOption(id, `Option ${i}`));
       const categories = [createCategory("web-mocking", "Many Options", options)];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
@@ -827,8 +920,8 @@ describe("CategoryGrid component", () => {
     it("should handle long option labels", () => {
       const categories = [
         createCategory("web-i18n", "Long Labels", [
-          createOption("web-test-long1", "Very Long Option Name"),
-          createOption("web-test-long2", "Another Long Name")
+          createOption("web-i18n-next-intl", "Very Long Option Name"),
+          createOption("web-i18n-react-intl", "Another Long Name")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -839,14 +932,16 @@ describe("CategoryGrid component", () => {
     it("should handle categories with different option counts", () => {
       const categories = [
         createCategory("web-framework", "Category 1", [
-          createOption("web-test-opt1", "Option 1"),
-          createOption("web-test-opt2", "Option 2")
+          createOption("web-forms-react-hook-form", "Option 1"),
+          createOption("web-forms-vee-validate", "Option 2")
+        ]),
+        createCategory("web-styling", "Category 2", [
+          createOption("web-forms-zod-validation", "Option 3")
         ]),
-        createCategory("web-styling", "Category 2", [createOption("web-test-opt3", "Option 3")]),
         createCategory("web-client-state", "Category 3", [
-          createOption("web-test-opt4", "Option 4"),
-          createOption("web-test-opt5", "Option 5"),
-          createOption("web-test-opt6", "Option 6")
+          createOption("web-testing-vitest", "Option 4"),
+          createOption("web-testing-playwright-e2e", "Option 5"),
+          createOption("web-testing-react-testing-library", "Option 6")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -865,14 +960,16 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-test-opt1", "Option 1", { selected: true }),
+            createOption("web-forms-react-hook-form", "Option 1", { selected: true }),
             // Framework selected
-            createOption("web-test-opt2", "Option 2"),
-            createOption("web-test-opt3", "Option 3")
+            createOption("web-forms-vee-validate", "Option 2"),
+            createOption("web-forms-zod-validation", "Option 3")
           ],
           { required: true }
         ),
-        createCategory("web-styling", "Category 2", [createOption("web-test-opt4", "Option 4")])
+        createCategory("web-styling", "Category 2", [
+          createOption("web-testing-vitest", "Option 4")
+        ])
       ];
       const { stdin, unmount } = renderGrid({
         categories,
@@ -892,7 +989,7 @@ describe("CategoryGrid component", () => {
     it("should render installed skill with label only (no checkmark icon)", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Option 1", { installed: true })
+          createOption("web-forms-react-hook-form", "Option 1", { installed: true })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -904,7 +1001,10 @@ describe("CategoryGrid component", () => {
     it("should render installed and selected skill with label only", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Option 1", { installed: true, selected: true })
+          createOption("web-forms-react-hook-form", "Option 1", {
+            installed: true,
+            selected: true
+          })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -916,7 +1016,7 @@ describe("CategoryGrid component", () => {
     it("should render local installed skill without L badge or checkmark", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-test-opt1", "Option 1", { local: true, installed: true })
+          createOption("web-forms-react-hook-form", "Option 1", { local: true, installed: true })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -939,34 +1039,20 @@ describe("CategoryGrid component", () => {
       globalExpect(output).not.toContain("more categories");
     });
     it("should render all categories even with many entries", () => {
-      const manyCategories = Array.from(
-        { length: 8 },
-        (_, i) => createCategory(`cat-${i}`, `Category ${i}`, [
-          createOption(`web-test-opt${i}-a`, `Option ${i}A`),
-          createOption(`web-test-opt${i}-b`, `Option ${i}B`),
-          createOption(`web-test-opt${i}-c`, `Option ${i}C`)
-        ])
-      );
       const { lastFrame, unmount } = renderGrid({
         categories: manyCategories
       });
       cleanup = unmount;
       const output = lastFrame();
-      for (let i = 0; i < 8; i++) {
-        globalExpect(output).toContain(`Category ${i}`);
+      for (const category of manyCategories) {
+        globalExpect(output).toContain(category.displayName);
       }
       globalExpect(output).not.toContain("more categories");
     });
     it("should keep focused category visible when navigating down", async () => {
       const onFocusChange = vi.fn();
-      const manyCategories = Array.from(
-        { length: 6 },
-        (_, i) => createCategory(`cat-${i}`, `Category ${i}`, [
-          createOption(`web-test-opt${i}-a`, `Option ${i}A`)
-        ])
-      );
       const { stdin, lastFrame, unmount } = renderGrid({
-        categories: manyCategories,
+        categories: navCategories,
         defaultFocusedRow: 0,
         onFocusChange
       });