@agents-inc/cli 0.74.11 → 0.74.13

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

@@ -27,12 +27,12 @@ import {
 } from "../../chunk-XY3XDVMI.js";
 import {
   CategoryGrid
-} from "../../chunk-X6LXHVA6.js";
-import "../../chunk-GG4BSB6S.js";
+} from "../../chunk-GHBZ7NUI.js";
+import "../../chunk-P2FHS5IS.js";
 import "../../chunk-AUNBGZS4.js";
-import "../../chunk-PUZLP4SL.js";
+import "../../chunk-EWGFIBBU.js";
 import "../../chunk-CBYRFAUN.js";
-import "../../chunk-2EXAK22V.js";
+import "../../chunk-6W4H2K3Z.js";
 import "../../chunk-RRBWNEG3.js";
 import {
   BUILT_IN_MATRIX,
@@ -51,7 +51,7 @@ init_esm_shims();
 import { jsx } from "react/jsx-runtime";
 var createOption = (id, overrides = {}) => ({
   id,
-  state: "normal",
+  state: { status: "normal" },
   selected: false,
   ...overrides
 });
@@ -69,8 +69,7 @@ var defaultCategories = [
     "Framework",
     [
       createOption("web-framework-react", {
-        state: "recommended",
-        stateReason: "Popular choice"
+        state: { status: "recommended", reason: "Popular choice" }
       }),
       createOption("web-framework-vue-composition-api"),
       createOption("web-framework-angular-standalone"),
@@ -83,18 +82,21 @@ var defaultCategories = [
     "Styling",
     [
       createOption("web-styling-scss-modules", { selected: true }),
-      createOption("web-styling-tailwind", { state: "recommended" }),
+      createOption("web-styling-tailwind", {
+        state: { status: "recommended", reason: "Modern utility-first CSS" }
+      }),
       createOption("web-styling-cva"),
       createOption("web-framework-nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-state-zustand", { state: "recommended" }),
+    createOption("web-state-zustand", {
+      state: { status: "recommended", reason: "Simple and performant" }
+    }),
     createOption("web-state-jotai"),
     createOption("web-state-redux-toolkit", {
-      state: "discouraged",
-      stateReason: "Complex for most apps"
+      state: { status: "discouraged", reason: "Complex for most apps" }
     }),
     createOption("web-state-mobx")
   ]),
@@ -111,8 +113,7 @@ var categoriesWithFramework = [
     "Framework",
     [
       createOption("web-framework-react", {
-        state: "recommended",
-        stateReason: "Popular choice",
+        state: { status: "recommended", reason: "Popular choice" },
         selected: true
         // Framework selected
       }),
@@ -127,16 +128,22 @@ var categoriesWithFramework = [
     "Styling",
     [
       createOption("web-styling-scss-modules"),
-      createOption("web-styling-tailwind", { state: "recommended" }),
+      createOption("web-styling-tailwind", {
+        state: { status: "recommended", reason: "Modern utility-first CSS" }
+      }),
       createOption("web-styling-cva"),
       createOption("web-framework-nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-state-zustand", { state: "recommended" }),
+    createOption("web-state-zustand", {
+      state: { status: "recommended", reason: "Simple and performant" }
+    }),
     createOption("web-state-jotai"),
-    createOption("web-state-redux-toolkit", { state: "discouraged" }),
+    createOption("web-state-redux-toolkit", {
+      state: { status: "discouraged", reason: "Complex for most apps" }
+    }),
     createOption("web-state-mobx")
   ])
 ];
@@ -290,7 +297,9 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-testing", "Test", [
           createOption("web-forms-react-hook-form"),
-          createOption("web-forms-vee-validate", { state: "discouraged" })
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -313,7 +322,7 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
           createOption("web-forms-react-hook-form", {
-            state: "normal",
+            state: { status: "normal" },
             selected: false
           })
         ])
@@ -326,7 +335,9 @@ describe("CategoryGrid component", () => {
     it("should render discouraged skills with display name", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -338,11 +349,11 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
           createOption("web-forms-react-hook-form", {
-            state: "discouraged",
+            state: { status: "discouraged", reason: "Not recommended" },
             selected: true
           }),
           createOption("web-forms-vee-validate", {
-            state: "discouraged",
+            state: { status: "discouraged", reason: "Not recommended" },
             selected: false
           })
         ])
@@ -356,7 +367,9 @@ describe("CategoryGrid component", () => {
     it("should render discouraged skills with display name from store", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -670,8 +683,12 @@ describe("CategoryGrid component", () => {
       const onToggle = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", { state: "discouraged" }),
-          createOption("web-forms-vee-validate", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -705,7 +722,9 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-testing", "Test", [
           createOption("web-forms-react-hook-form"),
-          createOption("web-forms-vee-validate", { state: "discouraged" }),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
           createOption("web-forms-zod-validation")
         ])
       ];
@@ -726,7 +745,9 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-testing", "Test", [
           createOption("web-forms-react-hook-form"),
-          createOption("web-forms-vee-validate", { state: "discouraged" }),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
           createOption("web-forms-zod-validation")
         ])
       ];
@@ -747,8 +768,12 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", { state: "discouraged" }),
-          createOption("web-forms-vee-validate", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -819,16 +844,18 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("(recommended)");
     });
-    it("should show Selected label for selected skills when showLabels is true", () => {
+    it("should not show label for selected skills when showLabels is true", () => {
       const { lastFrame, unmount } = renderGrid({ showLabels: true });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("(selected)");
+      globalExpect(output).not.toContain("(selected)");
     });
-    it("should show Discouraged label when showLabels is true", () => {
+    it("should show Discouraged label when showLabels is true and skill is focused", () => {
       const { lastFrame, unmount } = renderGrid({
         categories: categoriesWithFramework,
-        showLabels: true
+        showLabels: true,
+        defaultFocusedRow: 2,
+        defaultFocusedCol: 2
       });
       cleanup = unmount;
       const output = lastFrame();
@@ -842,11 +869,13 @@ describe("CategoryGrid component", () => {
       globalExpect(output).not.toContain("(selected)");
       globalExpect(output).not.toContain("(discouraged)");
     });
-    it("should show discouraged label for discouraged options when showLabels is true", () => {
+    it("should show discouraged label for focused discouraged option when showLabels is true", () => {
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form"),
-          createOption("web-forms-vee-validate", { state: "discouraged" })
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-react-hook-form")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories, showLabels: true });
@@ -860,8 +889,12 @@ describe("CategoryGrid component", () => {
       const categories = [
         createCategory("web-client-state", "State", [
           createOption("web-state-jotai"),
-          createOption("web-state-zustand", { state: "recommended" }),
-          createOption("web-state-redux-toolkit", { state: "discouraged" }),
+          createOption("web-state-zustand", {
+            state: { status: "recommended", reason: "Recommended choice" }
+          }),
+          createOption("web-state-redux-toolkit", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
           createOption("web-state-mobx")
         ])
       ];
@@ -917,7 +950,9 @@ describe("CategoryGrid component", () => {
       const categoriesAfter = [
         createCategory("web-client-state", "State", [
           createOption("web-state-jotai"),
-          createOption("web-state-zustand", { state: "discouraged" }),
+          createOption("web-state-zustand", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
           createOption("web-state-redux-toolkit")
         ])
       ];
@@ -1158,7 +1193,7 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("(1 of 1)");
     });
-    it("should show 'X selected' for non-exclusive categories", () => {
+    it("should not show counter for non-exclusive categories", () => {
       const categories = [
         createCategory(
           "web-testing",
@@ -1174,44 +1209,10 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("(2 selected)");
-    });
-    it("should show '0 selected' for non-exclusive categories with no selection", () => {
-      const categories = [
-        createCategory(
-          "web-testing",
-          "Testing",
-          [createOption("web-testing-vitest"), createOption("web-testing-playwright-e2e")],
-          { exclusive: false }
-        )
-      ];
-      const { lastFrame, unmount } = renderGrid({ categories });
-      cleanup = unmount;
-      const output = lastFrame();
-      globalExpect(output).toContain("(0 selected)");
-    });
-    it("should always show selection counter", () => {
-      const categories = [
-        createCategory(
-          "web-framework",
-          "Framework",
-          [createOption("web-framework-react", { selected: true })],
-          { exclusive: true }
-        ),
-        createCategory(
-          "web-testing",
-          "Testing",
-          [createOption("web-testing-vitest", { selected: true })],
-          { exclusive: false }
-        )
-      ];
-      const { lastFrame, unmount } = renderGrid({ categories });
-      cleanup = unmount;
-      const output = lastFrame();
-      globalExpect(output).toContain("1 of 1");
-      globalExpect(output).toContain("1 selected");
+      globalExpect(output).not.toContain("selected)");
+      globalExpect(output).not.toContain("of 1)");
     });
-    it("should show correct counts for mixed exclusive and non-exclusive categories", () => {
+    it("should only show counter for exclusive categories in mixed layout", () => {
       const categories = [
         createCategory(
           "web-framework",
@@ -1237,7 +1238,7 @@ describe("CategoryGrid component", () => {
       cleanup = unmount;
       const output = lastFrame();
       globalExpect(output).toContain("(1 of 1)");
-      globalExpect(output).toContain("(2 selected)");
+      globalExpect(output).not.toContain("selected)");
     });
   });
 });