agents-inc 0.151.0 → 0.152.1

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

@@ -1,1253 +0,0 @@
-#!/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