agents-inc 0.149.2 → 0.151.0

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

@@ -0,0 +1,1253 @@
+#!/usr/bin/env node
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  INPUT_DELAY_MS,
+  RENDER_DELAY_MS,
+  TAB,
+  delay
+} from "../../chunk-KSZ6PCY4.js";
+import {
+  render
+} from "../../chunk-EKWAUOQB.js";
+import {
+  CATEGORY_GRID_MATRIX
+} from "../../chunk-THKIOI32.js";
+import "../../chunk-K3OU6TGX.js";
+import "../../chunk-V7QOSGQA.js";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  globalExpect,
+  it,
+  vi
+} from "../../chunk-I3XKEGHM.js";
+import {
+  CategoryGrid
+} from "../../chunk-6RBQBOBS.js";
+import "../../chunk-LYYXX2W5.js";
+import "../../chunk-DAG2ULNF.js";
+import "../../chunk-VG2TVBFN.js";
+import "../../chunk-IHO75PMZ.js";
+import {
+  BUILT_IN_MATRIX,
+  initializeMatrix
+} from "../../chunk-DG2NGZ7S.js";
+import "../../chunk-VEP23B5W.js";
+import "../../chunk-O5ASLZ2K.js";
+import {
+  init_esm_shims
+} from "../../chunk-P56WJ5FA.js";
+
+// src/cli/components/wizard/category-grid.test.tsx
+init_esm_shims();
+import { jsx } from "react/jsx-runtime";
+var createOption = (id, overrides = {}) => ({
+  id,
+  state: { status: "normal" },
+  selected: false,
+  ...overrides
+});
+var createCategory = (id, displayName, options, overrides = {}) => ({
+  id,
+  displayName,
+  required: false,
+  exclusive: true,
+  options,
+  ...overrides
+});
+var defaultCategories = [
+  createCategory(
+    "web-framework",
+    "Framework",
+    [
+      createOption("web-framework-react", {
+        state: { status: "recommended", reason: "Popular choice" }
+      }),
+      createOption("web-framework-vue-composition-api"),
+      createOption("web-framework-angular-standalone"),
+      createOption("web-framework-solidjs")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "web-styling",
+    "Styling",
+    [
+      createOption("web-styling-scss-modules", { selected: true }),
+      createOption("web-styling-tailwind", {
+        state: { status: "recommended", reason: "Modern utility-first CSS" }
+      }),
+      createOption("web-styling-cva"),
+      createOption("web-meta-framework-nuxt")
+    ],
+    { required: true }
+  ),
+  createCategory("web-client-state", "Client State", [
+    createOption("web-state-zustand", {
+      state: { status: "recommended", reason: "Simple and performant" }
+    }),
+    createOption("web-state-jotai"),
+    createOption("web-state-redux-toolkit", {
+      state: { status: "discouraged", reason: "Complex for most apps" }
+    }),
+    createOption("web-state-mobx")
+  ]),
+  createCategory("web-server-state", "Server State", [
+    createOption("web-server-state-react-query", { selected: true }),
+    createOption("web-data-fetching-swr"),
+    createOption("web-data-fetching-graphql-apollo")
+  ]),
+  createCategory("api-analytics", "Analytics", [createOption("api-analytics-posthog-analytics")])
+];
+var categoriesWithFramework = [
+  createCategory(
+    "web-framework",
+    "Framework",
+    [
+      createOption("web-framework-react", {
+        state: { status: "recommended", reason: "Popular choice" },
+        selected: true
+        // Framework selected
+      }),
+      createOption("web-framework-vue-composition-api"),
+      createOption("web-framework-angular-standalone"),
+      createOption("web-framework-solidjs")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "web-styling",
+    "Styling",
+    [
+      createOption("web-styling-scss-modules"),
+      createOption("web-styling-tailwind", {
+        state: { status: "recommended", reason: "Modern utility-first CSS" }
+      }),
+      createOption("web-styling-cva"),
+      createOption("web-meta-framework-nuxt")
+    ],
+    { required: true }
+  ),
+  createCategory("web-client-state", "Client State", [
+    createOption("web-state-zustand", {
+      state: { status: "recommended", reason: "Simple and performant" }
+    }),
+    createOption("web-state-jotai"),
+    createOption("web-state-redux-toolkit", {
+      state: { status: "discouraged", reason: "Complex for most apps" }
+    }),
+    createOption("web-state-mobx")
+  ])
+];
+var manyCategories = [
+  createCategory("web-framework", "Category 0", [
+    createOption("web-framework-react"),
+    createOption("web-framework-vue-composition-api"),
+    createOption("web-framework-angular-standalone")
+  ]),
+  createCategory("web-styling", "Category 1", [
+    createOption("web-styling-tailwind"),
+    createOption("web-styling-scss-modules"),
+    createOption("web-styling-cva")
+  ]),
+  createCategory("web-client-state", "Category 2", [
+    createOption("web-state-zustand"),
+    createOption("web-state-jotai"),
+    createOption("web-state-mobx")
+  ]),
+  createCategory("web-server-state", "Category 3", [
+    createOption("web-server-state-react-query"),
+    createOption("web-data-fetching-swr"),
+    createOption("web-data-fetching-graphql-apollo")
+  ]),
+  createCategory("web-forms", "Category 4", [
+    createOption("web-forms-react-hook-form"),
+    createOption("web-forms-vee-validate"),
+    createOption("web-forms-zod-validation")
+  ]),
+  createCategory("web-testing", "Category 5", [
+    createOption("web-testing-vitest"),
+    createOption("web-testing-playwright-e2e"),
+    createOption("web-testing-cypress-e2e")
+  ]),
+  createCategory("web-mocking", "Category 6", [
+    createOption("web-mocks-msw"),
+    createOption("web-testing-react-testing-library"),
+    createOption("web-testing-vue-test-utils")
+  ]),
+  createCategory("web-i18n", "Category 7", [
+    createOption("web-i18n-next-intl"),
+    createOption("web-i18n-react-intl"),
+    createOption("web-i18n-vue-i18n")
+  ])
+];
+var navCategories = [
+  createCategory("web-framework", "Category 0", [createOption("web-framework-react")]),
+  createCategory("web-styling", "Category 1", [createOption("web-styling-tailwind")]),
+  createCategory("web-client-state", "Category 2", [createOption("web-state-zustand")]),
+  createCategory("web-server-state", "Category 3", [createOption("web-server-state-react-query")]),
+  createCategory("web-forms", "Category 4", [createOption("web-forms-react-hook-form")]),
+  createCategory("web-testing", "Category 5", [createOption("web-testing-vitest")])
+];
+var defaultProps = {
+  categories: defaultCategories,
+  defaultFocusedRow: 0,
+  defaultFocusedCol: 0,
+  showLabels: false,
+  onToggle: vi.fn(),
+  onFocusChange: vi.fn(),
+  onToggleLabels: vi.fn()
+};
+var renderGrid = (props = {}) => {
+  return render(/* @__PURE__ */ jsx(CategoryGrid, { ...defaultProps, ...props }));
+};
+describe("CategoryGrid component", () => {
+  let cleanup;
+  beforeEach(() => {
+    initializeMatrix(CATEGORY_GRID_MATRIX);
+  });
+  afterEach(() => {
+    cleanup?.();
+    cleanup = void 0;
+    initializeMatrix(BUILT_IN_MATRIX);
+  });
+  describe("rendering", () => {
+    it("should render all categories as sections", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+      globalExpect(output).toContain("Server State");
+      globalExpect(output).toContain("Analytics");
+    });
+    it("should render all options in each category", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Vue");
+      globalExpect(output).toContain("Angular");
+      globalExpect(output).toContain("SolidJS");
+      globalExpect(output).toContain("SCSS Modules");
+      globalExpect(output).toContain("Tailwind");
+    });
+    it("should show required indicator (*) for required categories", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("*");
+    });
+    it("should NOT show (optional) for non-required categories", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("(optional)");
+    });
+    it("should handle empty categories array", () => {
+      const { lastFrame, unmount } = renderGrid({ categories: [] });
+      cleanup = unmount;
+      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 options with display name", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("SCSS Modules");
+      globalExpect(output).toContain("React Query");
+    });
+    it("should show unselected options with display name", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Vue");
+      globalExpect(output).toContain("Angular");
+    });
+    it("should NOT show star indicator for recommended options (uses background instead)", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u2B50");
+    });
+    it("should NOT show warning indicator for discouraged options (uses color instead)", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u26A0");
+    });
+    it("should show discouraged options with warning styling", () => {
+      const categories = [
+        createCategory("web-testing", "Test", [
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Vee Validate");
+    });
+    it("should render selected skills with display name", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { selected: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render unselected skills with display name", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", {
+            state: { status: "normal" },
+            selected: false
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render discouraged skills with display name", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render discouraged+selected skills with display name", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" },
+            selected: true
+          }),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" },
+            selected: false
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+      globalExpect(output).toContain("Vee Validate");
+    });
+    it("should render discouraged skills with display name from store", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render both selected and unselected skills with display names", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { selected: true }),
+          createOption("web-forms-vee-validate", { selected: false })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+      globalExpect(output).toContain("Vee Validate");
+    });
+    it("should render skill display name regardless of selection state", () => {
+      const categories1 = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { selected: false })
+        ])
+      ];
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({ categories: categories1 });
+      const output1 = frame1();
+      unmount1();
+      const categories2 = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { selected: true })
+        ])
+      ];
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({ categories: categories2 });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain("React Hook Form");
+      globalExpect(output2).toContain("React Hook Form");
+    });
+  });
+  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("web-styling", "Styling", [
+          createOption("web-styling-scss-modules"),
+          createOption("web-styling-tailwind")
+        ]),
+        createCategory("web-client-state", "State", [createOption("web-state-zustand")])
+      ];
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesNoFramework
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("State");
+    });
+  });
+  describe("initial focus dispatch", () => {
+    it("dispatches onFocusedSkillChange for the initially focused cell on mount without navigation", async () => {
+      const onFocusedSkillChange = vi.fn();
+      const { unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusedSkillChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      globalExpect(onFocusedSkillChange).toHaveBeenCalledWith("web-framework-react");
+    });
+  });
+  describe("focus indicator", () => {
+    it("should render focused option with display name", () => {
+      const { lastFrame, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+    });
+    it("should render correctly when focusedRow changes", () => {
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0
+      });
+      const output1 = frame1();
+      unmount1();
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain("Framework");
+      globalExpect(output2).toContain("Styling");
+    });
+    it("should highlight focused category name", () => {
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Styling");
+    });
+  });
+  describe("keyboard navigation - arrow keys", () => {
+    it("should call onFocusChange when pressing left arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS * 2);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should call onFocusChange when pressing right arrow", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should call onFocusChange when pressing up arrow (wraps to last row)", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(4, 0);
+    });
+    it("should navigate between sections when unlocked", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+    it("should wrap horizontally when pressing left at first column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 3);
+    });
+    it("should wrap horizontally when pressing right at last column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 3,
+        // Last option in framework
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap vertically when all sections are unlocked", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(2, 0);
+    });
+  });
+  describe("keyboard navigation - vim keys", () => {
+    it("should move left with h key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("h");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should move right with l key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("l");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should move up with k key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("k");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should move down with j key", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("j");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+  });
+  describe("selection toggle", () => {
+    it("should call onToggle when pressing space on a normal option", async () => {
+      const onToggle = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        // vue (normal state)
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      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();
+      const categories = [
+        createCategory(
+          "web-framework",
+          "Framework",
+          [
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
+          ],
+          { required: true }
+        )
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        // react (selected)
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalledWith("web-framework", "web-framework-react");
+    });
+    it("should call onToggle for discouraged options (still selectable)", async () => {
+      const onToggle = vi.fn();
+      const categories = [
+        createCategory("web-testing", "Test", [
+          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({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalled();
+    });
+    it("should keep focus on initial row when no sections are locked", async () => {
+      const onFocusChange = vi.fn();
+      const { unmount } = renderGrid({
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      globalExpect(onFocusChange).not.toHaveBeenCalled();
+    });
+  });
+  describe("discouraged options navigation", () => {
+    it("should navigate to discouraged options when navigating right", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("web-testing", "Test", [
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-zod-validation")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should navigate to discouraged options when navigating left", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("web-testing", "Test", [
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-zod-validation")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 2,
+        // Start at opt3 (index 2)
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should navigate between all-discouraged options in a row", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("web-testing", "Test", [
+          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({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+  });
+  describe("exclusive categories", () => {
+    it("should render exclusive category correctly", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      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,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 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 jump to next section on Tab", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(TAB);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+  });
+  describe("compatibility labels toggle", () => {
+    it("should call onToggleLabels when pressing d key", async () => {
+      const onToggleLabels = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        onToggleLabels
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("d");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleLabels).toHaveBeenCalled();
+    });
+    it("should show compatibility labels when showLabels is true", () => {
+      const { lastFrame, unmount } = renderGrid({ showLabels: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(recommended)");
+    });
+    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).not.toContain("(selected)");
+    });
+    it("should show Discouraged label when showLabels is true and skill is focused", () => {
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesWithFramework,
+        showLabels: true,
+        defaultFocusedRow: 2,
+        defaultFocusedCol: 2
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(discouraged)");
+    });
+    it("should hide compatibility labels when showLabels is false", () => {
+      const { lastFrame, unmount } = renderGrid({ showLabels: false });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("(recommended)");
+      globalExpect(output).not.toContain("(selected)");
+      globalExpect(output).not.toContain("(discouraged)");
+    });
+    it("should show discouraged label for focused discouraged option when showLabels is true", () => {
+      const categories = [
+        createCategory("web-testing", "Test", [
+          createOption("web-forms-vee-validate", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-forms-react-hook-form")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories, showLabels: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(discouraged)");
+    });
+  });
+  describe("option ordering", () => {
+    it("should preserve original order regardless of state", () => {
+      const categories = [
+        createCategory("web-client-state", "State", [
+          createOption("web-state-jotai"),
+          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")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      const jotaiIdx = output.indexOf("Jotai");
+      const zustandIdx = output.indexOf("Zustand");
+      const reduxIdx = output.indexOf("Redux");
+      const mobxIdx = output.indexOf("MobX");
+      globalExpect(jotaiIdx).toBeLessThan(zustandIdx);
+      globalExpect(zustandIdx).toBeLessThan(reduxIdx);
+      globalExpect(reduxIdx).toBeLessThan(mobxIdx);
+    });
+    it("should not change order when a skill is selected", () => {
+      const categoriesBefore = [
+        createCategory("web-client-state", "State", [
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand"),
+          createOption("web-state-redux-toolkit")
+        ])
+      ];
+      const categoriesAfter = [
+        createCategory("web-client-state", "State", [
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand", { selected: true }),
+          createOption("web-state-redux-toolkit")
+        ])
+      ];
+      const { lastFrame: frameBefore, unmount: unmountBefore } = renderGrid({
+        categories: categoriesBefore
+      });
+      const outputBefore = frameBefore();
+      unmountBefore();
+      const { lastFrame: frameAfter, unmount: unmountAfter } = renderGrid({
+        categories: categoriesAfter
+      });
+      cleanup = unmountAfter;
+      const outputAfter = frameAfter();
+      globalExpect(outputBefore.indexOf("Jotai")).toBeLessThan(outputBefore.indexOf("Zustand"));
+      globalExpect(outputBefore.indexOf("Zustand")).toBeLessThan(outputBefore.indexOf("Redux"));
+      globalExpect(outputAfter.indexOf("Jotai")).toBeLessThan(outputAfter.indexOf("Zustand"));
+      globalExpect(outputAfter.indexOf("Zustand")).toBeLessThan(outputAfter.indexOf("Redux"));
+    });
+    it("should not change order when a skill state changes from normal to discouraged", () => {
+      const categoriesBefore = [
+        createCategory("web-client-state", "State", [
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand"),
+          createOption("web-state-redux-toolkit")
+        ])
+      ];
+      const categoriesAfter = [
+        createCategory("web-client-state", "State", [
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand", {
+            state: { status: "discouraged", reason: "Not recommended" }
+          }),
+          createOption("web-state-redux-toolkit")
+        ])
+      ];
+      const { lastFrame: frameBefore, unmount: unmountBefore } = renderGrid({
+        categories: categoriesBefore
+      });
+      const outputBefore = frameBefore();
+      unmountBefore();
+      const { lastFrame: frameAfter, unmount: unmountAfter } = renderGrid({
+        categories: categoriesAfter
+      });
+      cleanup = unmountAfter;
+      const outputAfter = frameAfter();
+      globalExpect(outputBefore.indexOf("Jotai")).toBeLessThan(outputBefore.indexOf("Zustand"));
+      globalExpect(outputBefore.indexOf("Zustand")).toBeLessThan(outputBefore.indexOf("Redux"));
+      globalExpect(outputAfter.indexOf("Jotai")).toBeLessThan(outputAfter.indexOf("Zustand"));
+      globalExpect(outputAfter.indexOf("Zustand")).toBeLessThan(outputAfter.indexOf("Redux"));
+    });
+  });
+  describe("edge cases", () => {
+    it("should handle single category", () => {
+      const categories = [
+        createCategory("web-forms", "Single Category", [createOption("web-forms-react-hook-form")])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Single Category");
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should handle single option in category", () => {
+      const categories = [
+        createCategory("web-forms", "Single", [createOption("web-forms-react-hook-form")])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should handle category with many options (flows naturally)", () => {
+      const manySkillIds = [
+        "web-framework-react",
+        "web-framework-vue-composition-api",
+        "web-framework-angular-standalone",
+        "web-framework-solidjs",
+        "web-meta-framework-nuxt",
+        "web-meta-framework-remix",
+        "web-meta-framework-nextjs",
+        "web-styling-tailwind",
+        "web-styling-scss-modules"
+      ];
+      const options = manySkillIds.map((id) => createOption(id));
+      const categories = [createCategory("web-mocking", "Many Options", options)];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Many Options");
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("SCSS Modules");
+    });
+    it("should handle long display names", () => {
+      const categories = [
+        createCategory("web-i18n", "Long Labels", [
+          createOption("web-i18n-next-intl"),
+          createOption("web-i18n-react-intl")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Next Intl");
+    });
+    it("should handle categories with different option counts", () => {
+      const categories = [
+        createCategory("web-framework", "Category 1", [
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate")
+        ]),
+        createCategory("web-styling", "Category 2", [createOption("web-forms-zod-validation")]),
+        createCategory("web-client-state", "Category 3", [
+          createOption("web-testing-vitest"),
+          createOption("web-testing-playwright-e2e"),
+          createOption("web-testing-react-testing-library")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Category 1");
+      globalExpect(output).toContain("Category 2");
+      globalExpect(output).toContain("Category 3");
+    });
+  });
+  describe("column adjustment", () => {
+    it("should adjust focusedCol when changing to row with fewer options", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory(
+          "web-framework",
+          "Framework",
+          [
+            createOption("web-forms-react-hook-form", { selected: true }),
+            // Framework selected
+            createOption("web-forms-vee-validate"),
+            createOption("web-forms-zod-validation")
+          ],
+          { required: true }
+        ),
+        createCategory("web-styling", "Category 2", [createOption("web-testing-vitest")])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 2,
+        // Last option in first row
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+  });
+  describe("installed skills", () => {
+    it("should render installed skill with display name (no checkmark icon)", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { installed: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u2713");
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render installed and selected skill with display name only", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", {
+            installed: true,
+            selected: true
+          })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u2713");
+      globalExpect(output).toContain("React Hook Form");
+    });
+    it("should render local installed skill without L badge or checkmark", () => {
+      const categories = [
+        createCategory("web-forms", "Forms", [
+          createOption("web-forms-react-hook-form", { local: true, installed: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u2713");
+      globalExpect(output).toContain("React Hook Form");
+    });
+  });
+  describe("natural flow (no virtual scroll)", () => {
+    it("should render all categories without scroll indicators", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+      globalExpect(output).toContain("Server State");
+      globalExpect(output).toContain("Analytics");
+      globalExpect(output).not.toContain("more categories");
+    });
+    it("should render all categories even with many entries", () => {
+      const { lastFrame, unmount } = renderGrid({
+        categories: manyCategories
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      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 { stdin, lastFrame, unmount } = renderGrid({
+        categories: navCategories,
+        defaultFocusedRow: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      await stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      const output = lastFrame();
+      globalExpect(output).toContain("Category 3");
+    });
+  });
+  describe("selection counter", () => {
+    it("should show 'X of 1' for exclusive categories with no selection", () => {
+      const categories = [
+        createCategory(
+          "web-framework",
+          "Framework",
+          [createOption("web-framework-react"), createOption("web-framework-vue-composition-api")],
+          { exclusive: true }
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(0 of 1)");
+    });
+    it("should show '1 of 1' for exclusive categories with one selection", () => {
+      const categories = [
+        createCategory(
+          "web-framework",
+          "Framework",
+          [
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
+          ],
+          { exclusive: true }
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(1 of 1)");
+    });
+    it("should not show counter for non-exclusive categories", () => {
+      const categories = [
+        createCategory(
+          "web-testing",
+          "Testing",
+          [
+            createOption("web-testing-vitest", { selected: true }),
+            createOption("web-testing-playwright-e2e", { selected: true }),
+            createOption("web-testing-cypress-e2e")
+          ],
+          { exclusive: false }
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("selected)");
+      globalExpect(output).not.toContain("of 1)");
+    });
+    it("should only show counter for exclusive categories in mixed layout", () => {
+      const categories = [
+        createCategory(
+          "web-framework",
+          "Framework",
+          [
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
+          ],
+          { exclusive: true }
+        ),
+        createCategory(
+          "web-testing",
+          "Testing",
+          [
+            createOption("web-testing-vitest", { selected: true }),
+            createOption("web-testing-playwright-e2e", { selected: true }),
+            createOption("web-testing-cypress-e2e")
+          ],
+          { exclusive: false }
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("(1 of 1)");
+      globalExpect(output).not.toContain("selected)");
+    });
+  });
+});
+//# sourceMappingURL=category-grid.test.js.map