@claude-collective/cli 0.8.0 → 0.13.0

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

@@ -8,7 +8,7 @@ import {
   RENDER_DELAY_MS,
   TAB,
   delay
-} from "../../chunk-6LS7XO3H.js";
+} from "../../chunk-6Q3Y7KVB.js";
 import {
   render
 } from "../../chunk-66UDJBF6.js";
@@ -21,12 +21,12 @@ import {
 } from "../../chunk-XY3XDVMI.js";
 import {
   CategoryGrid
-} from "../../chunk-PPNTD5LO.js";
+} from "../../chunk-Z7G4B5HJ.js";
 import {
   init_esm_shims
 } from "../../chunk-DHET7RCE.js";
 
-// src/cli-v2/components/wizard/category-grid.test.tsx
+// src/cli/components/wizard/category-grid.test.tsx
 init_esm_shims();
 import { jsx } from "react/jsx-runtime";
 var createOption = (id, label, overrides = {}) => ({
@@ -49,13 +49,13 @@ var defaultCategories = [
     "framework",
     "Framework",
     [
-      createOption("react", "react", {
+      createOption("react", "React", {
         state: "recommended",
         stateReason: "Popular choice"
       }),
-      createOption("vue", "vue"),
-      createOption("angular", "angular"),
-      createOption("svelte", "svelte")
+      createOption("vue", "Vue"),
+      createOption("angular", "Angular"),
+      createOption("svelte", "Svelte")
     ],
     { required: true }
   ),
@@ -63,29 +63,64 @@ var defaultCategories = [
     "styling",
     "Styling",
     [
-      createOption("scss-mod", "scss-mod", { selected: true }),
-      createOption("tailwind", "tailwind", { state: "recommended" }),
-      createOption("styled", "styled"),
-      createOption("vanilla", "vanilla")
+      createOption("scss-mod", "SCSS Modules", { selected: true }),
+      createOption("tailwind", "Tailwind", { state: "recommended" }),
+      createOption("styled", "Styled Components"),
+      createOption("vanilla", "Vanilla CSS")
     ],
     { required: true }
   ),
   createCategory("client-state", "Client State", [
-    createOption("zustand", "zustand", { state: "recommended" }),
-    createOption("jotai", "jotai"),
-    createOption("redux", "redux", {
+    createOption("zustand", "Zustand", { state: "recommended" }),
+    createOption("jotai", "Jotai"),
+    createOption("redux", "Redux", {
       state: "discouraged",
       stateReason: "Complex for most apps"
     }),
-    createOption("mobx", "mobx")
+    createOption("mobx", "MobX")
   ]),
   createCategory("server-state", "Server State", [
-    createOption("react-query", "react-query", { selected: true }),
-    createOption("swr", "swr"),
-    createOption("apollo", "apollo")
+    createOption("react-query", "React Query", { selected: true }),
+    createOption("swr", "SWR"),
+    createOption("apollo", "Apollo")
   ]),
   createCategory("analytics", "Analytics", [
-    createOption("posthog", "posthog")
+    createOption("posthog", "PostHog")
+  ])
+];
+var categoriesWithFramework = [
+  createCategory(
+    "framework",
+    "Framework",
+    [
+      createOption("react", "React", {
+        state: "recommended",
+        stateReason: "Popular choice",
+        selected: true
+        // Framework selected
+      }),
+      createOption("vue", "Vue"),
+      createOption("angular", "Angular"),
+      createOption("svelte", "Svelte")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "styling",
+    "Styling",
+    [
+      createOption("scss-mod", "SCSS Modules"),
+      createOption("tailwind", "Tailwind", { state: "recommended" }),
+      createOption("styled", "Styled Components"),
+      createOption("vanilla", "Vanilla CSS")
+    ],
+    { required: true }
+  ),
+  createCategory("client-state", "Client State", [
+    createOption("zustand", "Zustand", { state: "recommended" }),
+    createOption("jotai", "Jotai"),
+    createOption("redux", "Redux", { state: "discouraged" }),
+    createOption("mobx", "MobX")
   ])
 ];
 var defaultProps = {
@@ -110,7 +145,7 @@ describe("CategoryGrid component", () => {
     vi.clearAllMocks();
   });
   describe("rendering", () => {
-    it("should render all categories", () => {
+    it("should render all categories as sections", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
@@ -124,12 +159,12 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("react");
-      globalExpect(output).toContain("vue");
-      globalExpect(output).toContain("angular");
-      globalExpect(output).toContain("svelte");
-      globalExpect(output).toContain("scss-mod");
-      globalExpect(output).toContain("tailwind");
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Vue");
+      globalExpect(output).toContain("Angular");
+      globalExpect(output).toContain("Svelte");
+      globalExpect(output).toContain("SCSS Modules");
+      globalExpect(output).toContain("Tailwind");
     });
     it("should show required indicator (*) for required categories", () => {
       const { lastFrame, unmount } = renderGrid();
@@ -137,13 +172,13 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("*");
     });
-    it("should show (optional) for non-required categories", () => {
+    it("should NOT show (optional) for non-required categories", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("(optional)");
+      globalExpect(output).not.toContain("(optional)");
     });
-    it("should render legend row", () => {
+    it("should render legend row with visual states", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
@@ -157,7 +192,7 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("[Tab] Show descriptions");
+      globalExpect(output).toContain("[d] Descriptions");
       globalExpect(output).toContain("[e] Expert Mode");
     });
     it("should handle empty categories array", () => {
@@ -166,33 +201,41 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("No categories to display");
     });
+    it("should render section underlines", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u2500");
+    });
   });
   describe("visual states", () => {
-    it("should show selected symbol for selected options", () => {
+    it("should show selected options with label text", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("\u25CF");
+      globalExpect(output).toContain("SCSS Modules");
+      globalExpect(output).toContain("React Query");
     });
-    it("should show unselected symbol for unselected options", () => {
+    it("should show unselected options with label text", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("\u25CB");
+      globalExpect(output).toContain("Vue");
+      globalExpect(output).toContain("Angular");
     });
-    it("should show recommended indicator for recommended options", () => {
+    it("should NOT show star indicator for recommended options (uses background instead)", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("\u2B50");
+      globalExpect(output).not.toContain("\u2B50");
     });
-    it("should show discouraged indicator for discouraged options", () => {
+    it("should NOT show warning indicator for discouraged options (uses color instead)", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("\u26A0");
+      globalExpect(output).not.toContain("\u26A0");
     });
-    it("should show disabled symbol for disabled options", () => {
+    it("should show disabled options with dimmed styling", () => {
       const categories = [
         createCategory("test", "Test", [
           createOption("opt1", "Option 1"),
@@ -202,37 +245,76 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("\u2717");
+      globalExpect(output).toContain("Option 2");
+    });
+  });
+  describe("locked sections", () => {
+    it("should show all categories including locked ones", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+    });
+    it("should unlock sections when framework is selected", () => {
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesWithFramework
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+    });
+    it("should not lock any sections when no framework category exists", () => {
+      const categoriesNoFramework = [
+        createCategory("styling", "Styling", [
+          createOption("scss", "SCSS"),
+          createOption("tailwind", "Tailwind")
+        ]),
+        createCategory("state", "State", [createOption("zustand", "Zustand")])
+      ];
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesNoFramework
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("State");
     });
   });
   describe("focus indicator", () => {
-    it("should show focus indicator (>) on focused option", () => {
+    it("should render focused option with label text", () => {
       const { lastFrame, unmount } = renderGrid({
         focusedRow: 0,
         focusedCol: 0
       });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain(">");
+      globalExpect(output).toContain("React");
     });
-    it("should update focus indicator when focusedRow changes", () => {
+    it("should render correctly when focusedRow changes", () => {
       const { lastFrame: frame1, unmount: unmount1 } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 0,
         focusedCol: 0
       });
       const output1 = frame1();
       unmount1();
       const { lastFrame: frame2, unmount: unmount2 } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 1,
         focusedCol: 0
       });
       cleanup = unmount2;
       const output2 = frame2();
-      globalExpect(output1).toContain(">");
-      globalExpect(output2).toContain(">");
+      globalExpect(output1).toContain("Framework");
+      globalExpect(output2).toContain("Styling");
     });
     it("should highlight focused category name", () => {
       const { lastFrame, unmount } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 1,
         focusedCol: 0
       });
@@ -268,10 +350,10 @@ describe("CategoryGrid component", () => {
       await delay(INPUT_DELAY_MS);
       globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
     });
-    it("should call onFocusChange when pressing up arrow", async () => {
+    it("should call onFocusChange when pressing up arrow (wraps to framework when locked)", async () => {
       const onFocusChange = vi.fn();
       const { stdin, unmount } = renderGrid({
-        focusedRow: 1,
+        focusedRow: 0,
         focusedCol: 0,
         onFocusChange
       });
@@ -281,9 +363,10 @@ describe("CategoryGrid component", () => {
       await delay(INPUT_DELAY_MS);
       globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
     });
-    it("should call onFocusChange when pressing down arrow", async () => {
+    it("should navigate between sections when unlocked", async () => {
       const onFocusChange = vi.fn();
       const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 0,
         focusedCol: 0,
         onFocusChange
@@ -321,9 +404,10 @@ describe("CategoryGrid component", () => {
       await delay(INPUT_DELAY_MS);
       globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
     });
-    it("should wrap vertically when pressing up at first row", async () => {
+    it("should wrap vertically when all sections are unlocked", async () => {
       const onFocusChange = vi.fn();
       const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 0,
         focusedCol: 0,
         onFocusChange
@@ -332,21 +416,7 @@ describe("CategoryGrid component", () => {
       await delay(RENDER_DELAY_MS);
       await stdin.write(ARROW_UP);
       await delay(INPUT_DELAY_MS);
-      globalExpect(onFocusChange).toHaveBeenCalledWith(4, 0);
-    });
-    it("should wrap vertically when pressing down at last row", async () => {
-      const onFocusChange = vi.fn();
-      const { stdin, unmount } = renderGrid({
-        focusedRow: 4,
-        // Last category (analytics)
-        focusedCol: 0,
-        onFocusChange
-      });
-      cleanup = unmount;
-      await delay(RENDER_DELAY_MS);
-      await stdin.write(ARROW_DOWN);
-      await delay(INPUT_DELAY_MS);
-      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(2, 0);
     });
   });
   describe("keyboard navigation - vim keys", () => {
@@ -379,6 +449,7 @@ describe("CategoryGrid component", () => {
     it("should move up with k key", async () => {
       const onFocusChange = vi.fn();
       const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 1,
         focusedCol: 0,
         onFocusChange
@@ -392,6 +463,7 @@ describe("CategoryGrid component", () => {
     it("should move down with j key", async () => {
       const onFocusChange = vi.fn();
       const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
         focusedRow: 0,
         focusedCol: 0,
         onFocusChange
@@ -420,10 +492,22 @@ describe("CategoryGrid component", () => {
     });
     it("should call onToggle when pressing space on a selected option", async () => {
       const onToggle = vi.fn();
+      const categories = [
+        createCategory(
+          "framework",
+          "Framework",
+          [
+            createOption("react", "React", { selected: true }),
+            createOption("vue", "Vue")
+          ],
+          { required: true }
+        )
+      ];
       const { stdin, unmount } = renderGrid({
-        focusedRow: 1,
+        categories,
+        focusedRow: 0,
         focusedCol: 0,
-        // scss-mod (selected) - first in expert mode
+        // react (selected)
         expertMode: true,
         onToggle
       });
@@ -431,7 +515,7 @@ describe("CategoryGrid component", () => {
       await delay(RENDER_DELAY_MS);
       await stdin.write(" ");
       await delay(INPUT_DELAY_MS);
-      globalExpect(onToggle).toHaveBeenCalledWith("styling", "scss-mod");
+      globalExpect(onToggle).toHaveBeenCalledWith("framework", "react");
     });
     it("should NOT call onToggle when pressing space on a disabled option", async () => {
       const onToggle = vi.fn();
@@ -455,6 +539,20 @@ describe("CategoryGrid component", () => {
       await delay(INPUT_DELAY_MS);
       globalExpect(onToggle).not.toHaveBeenCalled();
     });
+    it("should NOT call onToggle when section is locked", async () => {
+      const onToggle = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 1,
+        // Styling (locked)
+        focusedCol: 0,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).not.toHaveBeenCalled();
+    });
   });
   describe("disabled options navigation", () => {
     it("should skip disabled options when navigating right", async () => {
@@ -532,15 +630,44 @@ describe("CategoryGrid component", () => {
       globalExpect(output).toContain("Framework");
     });
   });
+  describe("tab navigation", () => {
+    it("should jump to next section when pressing Tab", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(TAB);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+    it("should only jump to unlocked sections", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        focusedRow: 0,
+        focusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(TAB);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).not.toHaveBeenCalled();
+    });
+  });
   describe("show descriptions toggle", () => {
-    it("should call onToggleDescriptions when pressing Tab", async () => {
+    it("should call onToggleDescriptions when pressing d key", async () => {
       const onToggleDescriptions = vi.fn();
       const { stdin, unmount } = renderGrid({
         onToggleDescriptions
       });
       cleanup = unmount;
       await delay(RENDER_DELAY_MS);
-      await stdin.write(TAB);
+      await stdin.write("d");
       await delay(INPUT_DELAY_MS);
       globalExpect(onToggleDescriptions).toHaveBeenCalled();
     });
@@ -567,8 +694,8 @@ describe("CategoryGrid component", () => {
       });
       cleanup = unmount2;
       const output2 = frame2();
-      globalExpect(output1).toContain("Show descriptions: OFF");
-      globalExpect(output2).toContain("Show descriptions: ON");
+      globalExpect(output1).toContain("Descriptions: OFF");
+      globalExpect(output2).toContain("Descriptions: ON");
     });
   });
   describe("expert mode toggle", () => {
@@ -647,7 +774,7 @@ describe("CategoryGrid component", () => {
       const output = lastFrame();
       globalExpect(output).toContain("Only Option");
     });
-    it("should handle category with many options", () => {
+    it("should handle category with many options (flows naturally)", () => {
       const options = Array.from(
         { length: 10 },
         (_, i) => createOption(`opt${i}`, `Option ${i}`)
@@ -665,14 +792,14 @@ describe("CategoryGrid component", () => {
     it("should handle long option labels", () => {
       const categories = [
         createCategory("long", "Long Labels", [
-          createOption("long1", "very-long-option-name-here"),
-          createOption("long2", "another-very-long-option")
+          createOption("long1", "Very Long Option Name"),
+          createOption("long2", "Another Long Name")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("very-long-option-name-here");
+      globalExpect(output).toContain("Very Long Option Name");
     });
     it("should handle categories with different option counts", () => {
       const categories = [
@@ -701,11 +828,17 @@ describe("CategoryGrid component", () => {
     it("should adjust focusedCol when changing to row with fewer options", async () => {
       const onFocusChange = vi.fn();
       const categories = [
-        createCategory("cat1", "Category 1", [
-          createOption("opt1", "Option 1"),
-          createOption("opt2", "Option 2"),
-          createOption("opt3", "Option 3")
-        ]),
+        createCategory(
+          "framework",
+          "Framework",
+          [
+            createOption("opt1", "Option 1", { selected: true }),
+            // Framework selected
+            createOption("opt2", "Option 2"),
+            createOption("opt3", "Option 3")
+          ],
+          { required: true }
+        ),
         createCategory("cat2", "Category 2", [
           createOption("opt4", "Option 4")
         ])