@agents-inc/cli 0.32.1

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

@@ -0,0 +1,997 @@
+#!/usr/bin/env node
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  INPUT_DELAY_MS,
+  RENDER_DELAY_MS,
+  TAB,
+  delay
+} from "../../chunk-YZTWZVGX.js";
+import {
+  render
+} from "../../chunk-66UDJBF6.js";
+import {
+  afterEach,
+  describe,
+  globalExpect,
+  it,
+  vi
+} from "../../chunk-XY3XDVMI.js";
+import {
+  CategoryGrid
+} from "../../chunk-OGJIZ6QH.js";
+import "../../chunk-DC5AK3LW.js";
+import {
+  UI_SYMBOLS
+} from "../../chunk-LAPCUV4D.js";
+import {
+  init_esm_shims
+} from "../../chunk-DHET7RCE.js";
+
+// src/cli/components/wizard/category-grid.test.tsx
+init_esm_shims();
+import { jsx } from "react/jsx-runtime";
+var createOption = (id, label, overrides = {}) => ({
+  id,
+  label,
+  state: "normal",
+  selected: false,
+  ...overrides
+});
+var createCategory = (id, displayName, options, overrides = {}) => ({
+  id,
+  displayName,
+  required: false,
+  exclusive: true,
+  options,
+  ...overrides
+});
+var defaultCategories = [
+  createCategory(
+    "framework",
+    "Framework",
+    [
+      createOption("web-test-react", "React", {
+        state: "recommended",
+        stateReason: "Popular choice"
+      }),
+      createOption("web-test-vue", "Vue"),
+      createOption("web-test-angular", "Angular"),
+      createOption("web-test-svelte", "Svelte")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "styling",
+    "Styling",
+    [
+      createOption("web-scss-mod", "SCSS Modules", { selected: true }),
+      createOption("web-test-tailwind", "Tailwind", { state: "recommended" }),
+      createOption("web-test-styled", "Styled Components"),
+      createOption("web-test-vanilla", "Vanilla CSS")
+    ],
+    { required: true }
+  ),
+  createCategory("client-state", "Client State", [
+    createOption("web-test-zustand", "Zustand", { state: "recommended" }),
+    createOption("web-test-jotai", "Jotai"),
+    createOption("web-test-redux", "Redux", {
+      state: "discouraged",
+      stateReason: "Complex for most apps"
+    }),
+    createOption("web-test-mobx", "MobX")
+  ]),
+  createCategory("server-state", "Server State", [
+    createOption("web-react-query", "React Query", { selected: true }),
+    createOption("web-test-swr", "SWR"),
+    createOption("web-test-apollo", "Apollo")
+  ]),
+  createCategory("analytics", "Analytics", [createOption("web-test-posthog", "PostHog")])
+];
+var categoriesWithFramework = [
+  createCategory(
+    "framework",
+    "Framework",
+    [
+      createOption("web-test-react", "React", {
+        state: "recommended",
+        stateReason: "Popular choice",
+        selected: true
+        // Framework selected
+      }),
+      createOption("web-test-vue", "Vue"),
+      createOption("web-test-angular", "Angular"),
+      createOption("web-test-svelte", "Svelte")
+    ],
+    { required: true }
+  ),
+  createCategory(
+    "styling",
+    "Styling",
+    [
+      createOption("web-scss-mod", "SCSS Modules"),
+      createOption("web-test-tailwind", "Tailwind", { state: "recommended" }),
+      createOption("web-test-styled", "Styled Components"),
+      createOption("web-test-vanilla", "Vanilla CSS")
+    ],
+    { required: true }
+  ),
+  createCategory("client-state", "Client State", [
+    createOption("web-test-zustand", "Zustand", { state: "recommended" }),
+    createOption("web-test-jotai", "Jotai"),
+    createOption("web-test-redux", "Redux", { state: "discouraged" }),
+    createOption("web-test-mobx", "MobX")
+  ])
+];
+var defaultProps = {
+  categories: defaultCategories,
+  defaultFocusedRow: 0,
+  defaultFocusedCol: 0,
+  showDescriptions: false,
+  expertMode: false,
+  onToggle: vi.fn(),
+  onFocusChange: vi.fn(),
+  onToggleDescriptions: vi.fn()
+};
+var renderGrid = (props = {}) => {
+  return render(/* @__PURE__ */ jsx(CategoryGrid, { ...defaultProps, ...props }));
+};
+describe("CategoryGrid component", () => {
+  let cleanup;
+  afterEach(() => {
+    cleanup?.();
+    cleanup = void 0;
+  });
+  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("Svelte");
+      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 label text", () => {
+      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 label text", () => {
+      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 disabled options with dimmed styling", () => {
+      const categories = [
+        createCategory("testing", "Test", [
+          createOption("web-test-opt1", "Option 1"),
+          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Option 2");
+    });
+    it("should show selected symbol for selected skills", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Selected Skill", { selected: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.SELECTED);
+      globalExpect(output).toContain("Selected Skill");
+    });
+    it("should show unselected symbol for normal unselected skills", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Unselected Skill", { state: "normal", selected: false })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.UNSELECTED);
+      globalExpect(output).toContain("Unselected Skill");
+    });
+    it("should show disabled symbol for disabled skills", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Disabled Skill", { state: "disabled" })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.DISABLED);
+      globalExpect(output).toContain("Disabled Skill");
+    });
+    it("should show discouraged symbol for discouraged skills", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Discouraged Skill", { state: "discouraged" })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.DISCOURAGED);
+      globalExpect(output).toContain("Discouraged Skill");
+    });
+    it("should differentiate selected vs unselected with different symbols", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Active", { selected: true }),
+          createOption("web-test-opt2", "Inactive", { selected: false })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories, expertMode: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.SELECTED);
+      globalExpect(output).toContain(UI_SYMBOLS.UNSELECTED);
+      globalExpect(output).toContain("Active");
+      globalExpect(output).toContain("Inactive");
+    });
+    it("should toggle visual state when selection changes", () => {
+      const categories1 = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Toggle Skill", { selected: false })
+        ])
+      ];
+      const { lastFrame: frame1, unmount: unmount1 } = renderGrid({ categories: categories1 });
+      const output1 = frame1();
+      unmount1();
+      const categories2 = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Toggle Skill", { selected: true })
+        ])
+      ];
+      const { lastFrame: frame2, unmount: unmount2 } = renderGrid({ categories: categories2 });
+      cleanup = unmount2;
+      const output2 = frame2();
+      globalExpect(output1).toContain(UI_SYMBOLS.UNSELECTED);
+      globalExpect(output1).not.toContain(UI_SYMBOLS.SELECTED);
+      globalExpect(output2).toContain(UI_SYMBOLS.SELECTED);
+    });
+  });
+  describe("locked sections", () => {
+    it("should show all categories including locked ones", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+    });
+    it("should unlock sections when framework is selected", () => {
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesWithFramework
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Framework");
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("Client State");
+    });
+    it("should not lock any sections when no framework category exists", () => {
+      const categoriesNoFramework = [
+        createCategory("styling", "Styling", [
+          createOption("web-test-scss", "SCSS"),
+          createOption("web-test-tailwind", "Tailwind")
+        ]),
+        createCategory("client-state", "State", [createOption("web-test-zustand", "Zustand")])
+      ];
+      const { lastFrame, unmount } = renderGrid({
+        categories: categoriesNoFramework
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Styling");
+      globalExpect(output).toContain("State");
+    });
+  });
+  describe("focus indicator", () => {
+    it("should render focused option with label text", () => {
+      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);
+      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 framework when locked)", 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(0, 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("framework", "web-test-vue");
+    });
+    it("should call onToggle when pressing space on a selected option", async () => {
+      const onToggle = vi.fn();
+      const categories = [
+        createCategory(
+          "framework",
+          "Framework",
+          [
+            createOption("web-test-react", "React", { selected: true }),
+            createOption("web-test-vue", "Vue")
+          ],
+          { required: true }
+        )
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        // react (selected)
+        expertMode: true,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).toHaveBeenCalledWith("framework", "web-test-react");
+    });
+    it("should NOT call onToggle when all options in a category are disabled", async () => {
+      const onToggle = vi.fn();
+      const categories = [
+        createCategory("testing", "Test", [
+          createOption("web-test-opt1", "Option 1", { state: "disabled" }),
+          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        expertMode: true,
+        onToggle
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggle).not.toHaveBeenCalled();
+    });
+    it("should bounce focus away from locked sections on mount", async () => {
+      const onFocusChange = vi.fn();
+      const { unmount } = renderGrid({
+        defaultFocusedRow: 1,
+        // Styling (locked)
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+  });
+  describe("disabled options navigation", () => {
+    it("should skip disabled options when navigating right", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("testing", "Test", [
+          createOption("web-test-opt1", "Option 1"),
+          createOption("web-test-opt2", "Option 2", { state: "disabled" }),
+          createOption("web-test-opt3", "Option 3")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 2);
+    });
+    it("should skip disabled options when navigating left", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("testing", "Test", [
+          createOption("web-test-opt1", "Option 1"),
+          createOption("web-test-opt2", "Option 2", { state: "disabled" }),
+          createOption("web-test-opt3", "Option 3")
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 2,
+        // Start at opt3
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should handle all options disabled in a row", async () => {
+      const onFocusChange = vi.fn();
+      const categories = [
+        createCategory("testing", "Test", [
+          createOption("web-test-opt1", "Option 1", { state: "disabled" }),
+          createOption("web-test-opt2", "Option 2", { state: "disabled" })
+        ])
+      ];
+      const { stdin, unmount } = renderGrid({
+        categories,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        expertMode: true,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+  });
+  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 only jump to unlocked sections", 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).not.toHaveBeenCalled();
+    });
+  });
+  describe("show descriptions toggle", () => {
+    it("should call onToggleDescriptions when pressing d key", async () => {
+      const onToggleDescriptions = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        onToggleDescriptions
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      await stdin.write("d");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onToggleDescriptions).toHaveBeenCalled();
+    });
+    it("should show descriptions when showDescriptions is true", () => {
+      const { lastFrame, unmount } = renderGrid({ showDescriptions: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Popular choice");
+    });
+    it("should hide descriptions when showDescriptions is false", () => {
+      const { lastFrame, unmount } = renderGrid({ showDescriptions: false });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+    it("should show descriptions when enabled", () => {
+      const { lastFrame, unmount } = renderGrid({
+        showDescriptions: true
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Popular choice");
+    });
+  });
+  describe("expert mode", () => {
+    it("should not handle expert mode toggle locally (handled globally)", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("[e] Expert Mode");
+    });
+  });
+  describe("option ordering", () => {
+    it("should sort options by state when expertMode is false", () => {
+      const { lastFrame, unmount } = renderGrid({ expertMode: false });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+    it("should preserve original order when expertMode is true", () => {
+      const { lastFrame, unmount } = renderGrid({ expertMode: true });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toBeDefined();
+    });
+  });
+  describe("edge cases", () => {
+    it("should handle single category", () => {
+      const categories = [
+        createCategory("forms", "Single Category", [createOption("web-test-opt1", "Option 1")])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Single Category");
+      globalExpect(output).toContain("Option 1");
+    });
+    it("should handle single option in category", () => {
+      const categories = [
+        createCategory("forms", "Single", [createOption("web-test-only", "Only Option")])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Only Option");
+    });
+    it("should handle category with many options (flows naturally)", () => {
+      const options = Array.from(
+        { length: 10 },
+        (_, i) => createOption(`web-test-opt${i}`, `Option ${i}`)
+      );
+      const categories = [createCategory("mocking", "Many Options", options)];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Many Options");
+      globalExpect(output).toContain("Option 0");
+      globalExpect(output).toContain("Option 9");
+    });
+    it("should handle long option labels", () => {
+      const categories = [
+        createCategory("i18n", "Long Labels", [
+          createOption("web-test-long1", "Very Long Option Name"),
+          createOption("web-test-long2", "Another Long Name")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Very Long Option Name");
+    });
+    it("should handle categories with different option counts", () => {
+      const categories = [
+        createCategory("framework", "Category 1", [
+          createOption("web-test-opt1", "Option 1"),
+          createOption("web-test-opt2", "Option 2")
+        ]),
+        createCategory("styling", "Category 2", [createOption("web-test-opt3", "Option 3")]),
+        createCategory("client-state", "Category 3", [
+          createOption("web-test-opt4", "Option 4"),
+          createOption("web-test-opt5", "Option 5"),
+          createOption("web-test-opt6", "Option 6")
+        ])
+      ];
+      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(
+          "framework",
+          "Framework",
+          [
+            createOption("web-test-opt1", "Option 1", { selected: true }),
+            // Framework selected
+            createOption("web-test-opt2", "Option 2"),
+            createOption("web-test-opt3", "Option 3")
+          ],
+          { required: true }
+        ),
+        createCategory("styling", "Category 2", [createOption("web-test-opt4", "Option 4")])
+      ];
+      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 indicator", () => {
+    it("should show checkmark for installed skill", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Option 1", { installed: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u2713");
+      globalExpect(output).toContain("Option 1");
+    });
+    it("should NOT show checkmark for non-installed skill", () => {
+      const categories = [
+        createCategory("forms", "Forms", [createOption("web-test-opt1", "Option 1")])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("\u2713");
+      globalExpect(output).toContain("Option 1");
+    });
+    it("should show both checkmark and cyan styling when installed and selected", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Option 1", { installed: true, selected: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("\u2713");
+      globalExpect(output).toContain("Option 1");
+    });
+    it("should show both L badge and checkmark when local and installed", () => {
+      const categories = [
+        createCategory("forms", "Forms", [
+          createOption("web-test-opt1", "Option 1", { local: true, installed: true })
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ categories });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("L");
+      globalExpect(output).toContain("\u2713");
+      globalExpect(output).toContain("Option 1");
+    });
+  });
+  describe("scroll viewport", () => {
+    it("should render all categories when no height constraint", () => {
+      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 scroll indicators when height is constrained", () => {
+      const manyCategories = Array.from(
+        { length: 8 },
+        (_, i) => createCategory(`cat-${i}`, `Category ${i}`, [
+          createOption(`web-test-opt${i}-a`, `Option ${i}A`),
+          createOption(`web-test-opt${i}-b`, `Option ${i}B`),
+          createOption(`web-test-opt${i}-c`, `Option ${i}C`)
+        ])
+      );
+      const { lastFrame, unmount } = renderGrid({
+        categories: manyCategories,
+        availableHeight: 8,
+        terminalWidth: 120
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("more categories below");
+    });
+    it("should not render scroll indicators when all content fits", () => {
+      const categories = [
+        createCategory("forms", "Forms", [createOption("web-test-opt1", "A")])
+      ];
+      const { lastFrame, unmount } = renderGrid({
+        categories,
+        availableHeight: 100,
+        terminalWidth: 120
+      });
+      cleanup = unmount;
+      globalExpect(lastFrame()).not.toContain("more categories");
+    });
+    it("should keep focused category visible when scrolling down", async () => {
+      const onFocusChange = vi.fn();
+      const manyCategories = Array.from(
+        { length: 6 },
+        (_, i) => createCategory(`cat-${i}`, `Category ${i}`, [
+          createOption(`web-test-opt${i}-a`, `Option ${i}A`)
+        ])
+      );
+      const { stdin, lastFrame, unmount } = renderGrid({
+        categories: manyCategories,
+        availableHeight: 8,
+        terminalWidth: 120,
+        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");
+    });
+  });
+});
+//# sourceMappingURL=category-grid.test.js.map