@agents-inc/cli 0.61.0 → 0.64.0

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

@@ -12,8 +12,13 @@ import {
 import {
   render
 } from "../../chunk-66UDJBF6.js";
+import {
+  createMockMatrix,
+  createMockSkill
+} from "../../chunk-MOMI77PL.js";
 import {
   afterEach,
+  beforeEach,
   describe,
   globalExpect,
   it,
@@ -21,10 +26,20 @@ import {
 } from "../../chunk-XY3XDVMI.js";
 import {
   CategoryGrid
-} from "../../chunk-H7WJK7NJ.js";
+} from "../../chunk-CKPJTMNC.js";
 import "../../chunk-GG4BSB6S.js";
-import "../../chunk-BNQ5O6LE.js";
-import "../../chunk-6OWHQ7HM.js";
+import "../../chunk-AUNBGZS4.js";
+import "../../chunk-4C7CSZC5.js";
+import "../../chunk-6VIOO74O.js";
+import "../../chunk-53URJ5XK.js";
+import "../../chunk-F3REOP7N.js";
+import "../../chunk-T4EXUIBY.js";
+import {
+  useMatrixStore
+} from "../../chunk-BKL3DF2Q.js";
+import "../../chunk-LMZXL5RQ.js";
+import "../../chunk-EGMQ3SXN.js";
+import "../../chunk-EC3UJRKZ.js";
 import {
   init_esm_shims
 } from "../../chunk-DHET7RCE.js";
@@ -32,9 +47,60 @@ import {
 // src/cli/components/wizard/category-grid.test.tsx
 init_esm_shims();
 import { jsx } from "react/jsx-runtime";
-var createOption = (id, label, overrides = {}) => ({
+var TEST_GRID_SKILLS = [
+  { id: "web-framework-react", displayName: "React", category: "web-framework" },
+  { id: "web-framework-vue-composition-api", displayName: "Vue", category: "web-framework" },
+  { id: "web-framework-angular-standalone", displayName: "Angular", category: "web-framework" },
+  { id: "web-framework-solidjs", displayName: "SolidJS", category: "web-framework" },
+  { id: "web-framework-nuxt", displayName: "Nuxt", category: "web-framework" },
+  { id: "web-framework-remix", displayName: "Remix", category: "web-framework" },
+  {
+    id: "web-framework-nextjs-app-router",
+    displayName: "Next.js App Router",
+    category: "web-framework"
+  },
+  {
+    id: "web-framework-nextjs-server-actions",
+    displayName: "Next.js Server Actions",
+    category: "web-framework"
+  },
+  { id: "web-styling-scss-modules", displayName: "SCSS Modules", category: "web-styling" },
+  { id: "web-styling-tailwind", displayName: "Tailwind", category: "web-styling" },
+  { id: "web-styling-cva", displayName: "CVA", category: "web-styling" },
+  { id: "web-state-zustand", displayName: "Zustand", category: "web-client-state" },
+  { id: "web-state-jotai", displayName: "Jotai", category: "web-client-state" },
+  { id: "web-state-redux-toolkit", displayName: "Redux", category: "web-client-state" },
+  { id: "web-state-mobx", displayName: "MobX", category: "web-client-state" },
+  { id: "web-server-state-react-query", displayName: "React Query", category: "web-server-state" },
+  { id: "web-data-fetching-swr", displayName: "SWR", category: "web-server-state" },
+  { id: "web-data-fetching-graphql-apollo", displayName: "Apollo", category: "web-server-state" },
+  { id: "api-analytics-posthog-analytics", displayName: "PostHog", category: "api-analytics" },
+  { id: "web-forms-react-hook-form", displayName: "React Hook Form", category: "web-forms" },
+  { id: "web-forms-vee-validate", displayName: "Vee Validate", category: "web-forms" },
+  { id: "web-forms-zod-validation", displayName: "Zod Validation", category: "web-forms" },
+  { id: "web-testing-vitest", displayName: "Vitest", category: "web-testing" },
+  { id: "web-testing-playwright-e2e", displayName: "Playwright", category: "web-testing" },
+  { id: "web-testing-cypress-e2e", displayName: "Cypress", category: "web-testing" },
+  { id: "web-mocks-msw", displayName: "MSW", category: "web-mocking" },
+  {
+    id: "web-testing-react-testing-library",
+    displayName: "React Testing Library",
+    category: "web-testing"
+  },
+  { id: "web-testing-vue-test-utils", displayName: "Vue Test Utils", category: "web-testing" },
+  { id: "web-i18n-next-intl", displayName: "Next Intl", category: "web-i18n" },
+  { id: "web-i18n-react-intl", displayName: "React Intl", category: "web-i18n" },
+  { id: "web-i18n-vue-i18n", displayName: "Vue I18n", category: "web-i18n" }
+];
+function buildTestMatrix() {
+  const skills = {};
+  for (const { id, displayName, category } of TEST_GRID_SKILLS) {
+    skills[id] = createMockSkill(id, { displayName, category });
+  }
+  return createMockMatrix(skills);
+}
+var createOption = (id, overrides = {}) => ({
   id,
-  label,
   state: "normal",
   selected: false,
   ...overrides
@@ -52,13 +118,13 @@ var defaultCategories = [
     "web-framework",
     "Framework",
     [
-      createOption("web-framework-react", "React", {
+      createOption("web-framework-react", {
         state: "recommended",
         stateReason: "Popular choice"
       }),
-      createOption("web-framework-vue-composition-api", "Vue"),
-      createOption("web-framework-angular-standalone", "Angular"),
-      createOption("web-framework-solidjs", "SolidJS")
+      createOption("web-framework-vue-composition-api"),
+      createOption("web-framework-angular-standalone"),
+      createOption("web-framework-solidjs")
     ],
     { required: true }
   ),
@@ -66,45 +132,43 @@ var defaultCategories = [
     "web-styling",
     "Styling",
     [
-      createOption("web-styling-scss-modules", "SCSS Modules", { selected: true }),
-      createOption("web-styling-tailwind", "Tailwind", { state: "recommended" }),
-      createOption("web-styling-cva", "CVA"),
-      createOption("web-framework-nuxt", "Nuxt")
+      createOption("web-styling-scss-modules", { selected: true }),
+      createOption("web-styling-tailwind", { state: "recommended" }),
+      createOption("web-styling-cva"),
+      createOption("web-framework-nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-state-zustand", "Zustand", { state: "recommended" }),
-    createOption("web-state-jotai", "Jotai"),
-    createOption("web-state-redux-toolkit", "Redux", {
+    createOption("web-state-zustand", { state: "recommended" }),
+    createOption("web-state-jotai"),
+    createOption("web-state-redux-toolkit", {
       state: "discouraged",
       stateReason: "Complex for most apps"
     }),
-    createOption("web-state-mobx", "MobX")
+    createOption("web-state-mobx")
   ]),
   createCategory("web-server-state", "Server State", [
-    createOption("web-server-state-react-query", "React Query", { selected: true }),
-    createOption("web-data-fetching-swr", "SWR"),
-    createOption("web-data-fetching-graphql-apollo", "Apollo")
+    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", "PostHog")
-  ])
+  createCategory("api-analytics", "Analytics", [createOption("api-analytics-posthog-analytics")])
 ];
 var categoriesWithFramework = [
   createCategory(
     "web-framework",
     "Framework",
     [
-      createOption("web-framework-react", "React", {
+      createOption("web-framework-react", {
         state: "recommended",
         stateReason: "Popular choice",
         selected: true
         // Framework selected
       }),
-      createOption("web-framework-vue-composition-api", "Vue"),
-      createOption("web-framework-angular-standalone", "Angular"),
-      createOption("web-framework-solidjs", "SolidJS")
+      createOption("web-framework-vue-composition-api"),
+      createOption("web-framework-angular-standalone"),
+      createOption("web-framework-solidjs")
     ],
     { required: true }
   ),
@@ -112,75 +176,69 @@ var categoriesWithFramework = [
     "web-styling",
     "Styling",
     [
-      createOption("web-styling-scss-modules", "SCSS Modules"),
-      createOption("web-styling-tailwind", "Tailwind", { state: "recommended" }),
-      createOption("web-styling-cva", "CVA"),
-      createOption("web-framework-nuxt", "Nuxt")
+      createOption("web-styling-scss-modules"),
+      createOption("web-styling-tailwind", { state: "recommended" }),
+      createOption("web-styling-cva"),
+      createOption("web-framework-nuxt")
     ],
     { required: true }
   ),
   createCategory("web-client-state", "Client State", [
-    createOption("web-state-zustand", "Zustand", { state: "recommended" }),
-    createOption("web-state-jotai", "Jotai"),
-    createOption("web-state-redux-toolkit", "Redux", { state: "discouraged" }),
-    createOption("web-state-mobx", "MobX")
+    createOption("web-state-zustand", { state: "recommended" }),
+    createOption("web-state-jotai"),
+    createOption("web-state-redux-toolkit", { state: "discouraged" }),
+    createOption("web-state-mobx")
   ])
 ];
 var manyCategories = [
   createCategory("web-framework", "Category 0", [
-    createOption("web-framework-react", "Option 0A"),
-    createOption("web-framework-vue-composition-api", "Option 0B"),
-    createOption("web-framework-angular-standalone", "Option 0C")
+    createOption("web-framework-react"),
+    createOption("web-framework-vue-composition-api"),
+    createOption("web-framework-angular-standalone")
   ]),
   createCategory("web-styling", "Category 1", [
-    createOption("web-styling-tailwind", "Option 1A"),
-    createOption("web-styling-scss-modules", "Option 1B"),
-    createOption("web-styling-cva", "Option 1C")
+    createOption("web-styling-tailwind"),
+    createOption("web-styling-scss-modules"),
+    createOption("web-styling-cva")
   ]),
   createCategory("web-client-state", "Category 2", [
-    createOption("web-state-zustand", "Option 2A"),
-    createOption("web-state-jotai", "Option 2B"),
-    createOption("web-state-mobx", "Option 2C")
+    createOption("web-state-zustand"),
+    createOption("web-state-jotai"),
+    createOption("web-state-mobx")
   ]),
   createCategory("web-server-state", "Category 3", [
-    createOption("web-server-state-react-query", "Option 3A"),
-    createOption("web-data-fetching-swr", "Option 3B"),
-    createOption("web-data-fetching-graphql-apollo", "Option 3C")
+    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", "Option 4A"),
-    createOption("web-forms-vee-validate", "Option 4B"),
-    createOption("web-forms-zod-validation", "Option 4C")
+    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", "Option 5A"),
-    createOption("web-testing-playwright-e2e", "Option 5B"),
-    createOption("web-testing-cypress-e2e", "Option 5C")
+    createOption("web-testing-vitest"),
+    createOption("web-testing-playwright-e2e"),
+    createOption("web-testing-cypress-e2e")
   ]),
   createCategory("web-mocking", "Category 6", [
-    createOption("web-mocks-msw", "Option 6A"),
-    createOption("web-testing-react-testing-library", "Option 6B"),
-    createOption("web-testing-vue-test-utils", "Option 6C")
+    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", "Option 7A"),
-    createOption("web-i18n-react-intl", "Option 7B"),
-    createOption("web-i18n-vue-i18n", "Option 7C")
+    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", "Option 0A")]),
-  createCategory("web-styling", "Category 1", [createOption("web-styling-tailwind", "Option 1A")]),
-  createCategory("web-client-state", "Category 2", [
-    createOption("web-state-zustand", "Option 2A")
-  ]),
-  createCategory("web-server-state", "Category 3", [
-    createOption("web-server-state-react-query", "Option 3A")
-  ]),
-  createCategory("web-forms", "Category 4", [
-    createOption("web-forms-react-hook-form", "Option 4A")
-  ]),
-  createCategory("web-testing", "Category 5", [createOption("web-testing-vitest", "Option 5A")])
+  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,
@@ -196,9 +254,13 @@ var renderGrid = (props = {}) => {
 };
 describe("CategoryGrid component", () => {
   let cleanup;
+  beforeEach(() => {
+    useMatrixStore.getState().setMatrix(buildTestMatrix());
+  });
   afterEach(() => {
     cleanup?.();
     cleanup = void 0;
+    useMatrixStore.getState().reset();
   });
   describe("rendering", () => {
     it("should render all categories as sections", () => {
@@ -248,14 +310,14 @@ describe("CategoryGrid component", () => {
     });
   });
   describe("visual states", () => {
-    it("should show selected options with label text", () => {
+    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 label text", () => {
+    it("should show unselected options with display name", () => {
       const { lastFrame, unmount } = renderGrid();
       cleanup = unmount;
       const output = lastFrame();
@@ -277,30 +339,30 @@ describe("CategoryGrid component", () => {
     it("should show discouraged options with warning styling", () => {
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1"),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" })
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", { state: "discouraged" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Option 2");
+      globalExpect(output).toContain("Vee Validate");
     });
-    it("should render selected skills with label text", () => {
+    it("should render selected skills with display name", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Selected Skill", { selected: true })
+          createOption("web-forms-react-hook-form", { selected: true })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Selected Skill");
+      globalExpect(output).toContain("React Hook Form");
     });
-    it("should render unselected skills with label text", () => {
+    it("should render unselected skills with display name", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Unselected Skill", {
+          createOption("web-forms-react-hook-form", {
             state: "normal",
             selected: false
           })
@@ -309,27 +371,27 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Unselected Skill");
+      globalExpect(output).toContain("React Hook Form");
     });
-    it("should render discouraged skills with label text", () => {
+    it("should render discouraged skills with display name", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Discouraged Skill", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", { state: "discouraged" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Discouraged Skill");
+      globalExpect(output).toContain("React Hook Form");
     });
-    it("should render discouraged+selected skills with label text", () => {
+    it("should render discouraged+selected skills with display name", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Discouraged Selected", {
+          createOption("web-forms-react-hook-form", {
             state: "discouraged",
             selected: true
           }),
-          createOption("web-forms-vee-validate", "Discouraged Only", {
+          createOption("web-forms-vee-validate", {
             state: "discouraged",
             selected: false
           })
@@ -338,37 +400,37 @@ describe("CategoryGrid component", () => {
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Discouraged Selected");
-      globalExpect(output).toContain("Discouraged Only");
+      globalExpect(output).toContain("React Hook Form");
+      globalExpect(output).toContain("Vee Validate");
     });
-    it("should render discouraged skills with label text", () => {
+    it("should render discouraged skills with display name from store", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Discouraged Skill", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", { state: "discouraged" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Discouraged Skill");
+      globalExpect(output).toContain("React Hook Form");
     });
-    it("should render both selected and unselected skills with labels", () => {
+    it("should render both selected and unselected skills with display names", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Active", { selected: true }),
-          createOption("web-forms-vee-validate", "Inactive", { selected: false })
+          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("Active");
-      globalExpect(output).toContain("Inactive");
+      globalExpect(output).toContain("React Hook Form");
+      globalExpect(output).toContain("Vee Validate");
     });
-    it("should render skill label regardless of selection state", () => {
+    it("should render skill display name regardless of selection state", () => {
       const categories1 = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Toggle Skill", { selected: false })
+          createOption("web-forms-react-hook-form", { selected: false })
         ])
       ];
       const { lastFrame: frame1, unmount: unmount1 } = renderGrid({ categories: categories1 });
@@ -376,14 +438,14 @@ describe("CategoryGrid component", () => {
       unmount1();
       const categories2 = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Toggle Skill", { selected: true })
+          createOption("web-forms-react-hook-form", { selected: true })
         ])
       ];
       const { lastFrame: frame2, unmount: unmount2 } = renderGrid({ categories: categories2 });
       cleanup = unmount2;
       const output2 = frame2();
-      globalExpect(output1).toContain("Toggle Skill");
-      globalExpect(output2).toContain("Toggle Skill");
+      globalExpect(output1).toContain("React Hook Form");
+      globalExpect(output2).toContain("React Hook Form");
     });
   });
   describe("locked sections", () => {
@@ -408,10 +470,10 @@ describe("CategoryGrid component", () => {
     it("should not lock any sections when no framework category exists", () => {
       const categoriesNoFramework = [
         createCategory("web-styling", "Styling", [
-          createOption("web-styling-scss-modules", "SCSS"),
-          createOption("web-styling-tailwind", "Tailwind")
+          createOption("web-styling-scss-modules"),
+          createOption("web-styling-tailwind")
         ]),
-        createCategory("web-client-state", "State", [createOption("web-state-zustand", "Zustand")])
+        createCategory("web-client-state", "State", [createOption("web-state-zustand")])
       ];
       const { lastFrame, unmount } = renderGrid({
         categories: categoriesNoFramework
@@ -423,7 +485,7 @@ describe("CategoryGrid component", () => {
     });
   });
   describe("focus indicator", () => {
-    it("should render focused option with label text", () => {
+    it("should render focused option with display name", () => {
       const { lastFrame, unmount } = renderGrid({
         defaultFocusedRow: 0,
         defaultFocusedCol: 0
@@ -635,8 +697,8 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-framework-react", "React", { selected: true }),
-            createOption("web-framework-vue-composition-api", "Vue")
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
           ],
           { required: true }
         )
@@ -658,8 +720,8 @@ describe("CategoryGrid component", () => {
       const onToggle = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1", { state: "discouraged" }),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", { state: "discouraged" }),
+          createOption("web-forms-vee-validate", { state: "discouraged" })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -692,9 +754,9 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1"),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" }),
-          createOption("web-forms-zod-validation", "Option 3")
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", { state: "discouraged" }),
+          createOption("web-forms-zod-validation")
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -713,9 +775,9 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1"),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" }),
-          createOption("web-forms-zod-validation", "Option 3")
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", { state: "discouraged" }),
+          createOption("web-forms-zod-validation")
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -735,8 +797,8 @@ describe("CategoryGrid component", () => {
       const onFocusChange = vi.fn();
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1", { state: "discouraged" }),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" })
+          createOption("web-forms-react-hook-form", { state: "discouraged" }),
+          createOption("web-forms-vee-validate", { state: "discouraged" })
         ])
       ];
       const { stdin, unmount } = renderGrid({
@@ -833,8 +895,8 @@ describe("CategoryGrid component", () => {
     it("should show discouraged label for discouraged options when showLabels is true", () => {
       const categories = [
         createCategory("web-testing", "Test", [
-          createOption("web-forms-react-hook-form", "Option 1"),
-          createOption("web-forms-vee-validate", "Option 2", { state: "discouraged" })
+          createOption("web-forms-react-hook-form"),
+          createOption("web-forms-vee-validate", { state: "discouraged" })
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories, showLabels: true });
@@ -847,10 +909,10 @@ describe("CategoryGrid component", () => {
     it("should preserve original order regardless of state", () => {
       const categories = [
         createCategory("web-client-state", "State", [
-          createOption("web-state-jotai", "Jotai"),
-          createOption("web-state-zustand", "Zustand", { state: "recommended" }),
-          createOption("web-state-redux-toolkit", "Redux", { state: "discouraged" }),
-          createOption("web-state-mobx", "MobX")
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand", { state: "recommended" }),
+          createOption("web-state-redux-toolkit", { state: "discouraged" }),
+          createOption("web-state-mobx")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -867,16 +929,16 @@ describe("CategoryGrid component", () => {
     it("should not change order when a skill is selected", () => {
       const categoriesBefore = [
         createCategory("web-client-state", "State", [
-          createOption("web-state-jotai", "Jotai"),
-          createOption("web-state-zustand", "Zustand"),
-          createOption("web-state-redux-toolkit", "Redux")
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand"),
+          createOption("web-state-redux-toolkit")
         ])
       ];
       const categoriesAfter = [
         createCategory("web-client-state", "State", [
-          createOption("web-state-jotai", "Jotai"),
-          createOption("web-state-zustand", "Zustand", { selected: true }),
-          createOption("web-state-redux-toolkit", "Redux")
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand", { selected: true }),
+          createOption("web-state-redux-toolkit")
         ])
       ];
       const { lastFrame: frameBefore, unmount: unmountBefore } = renderGrid({
@@ -897,16 +959,16 @@ describe("CategoryGrid component", () => {
     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", "Jotai"),
-          createOption("web-state-zustand", "Zustand"),
-          createOption("web-state-redux-toolkit", "Redux")
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand"),
+          createOption("web-state-redux-toolkit")
         ])
       ];
       const categoriesAfter = [
         createCategory("web-client-state", "State", [
-          createOption("web-state-jotai", "Jotai"),
-          createOption("web-state-zustand", "Zustand", { state: "discouraged" }),
-          createOption("web-state-redux-toolkit", "Redux")
+          createOption("web-state-jotai"),
+          createOption("web-state-zustand", { state: "discouraged" }),
+          createOption("web-state-redux-toolkit")
         ])
       ];
       const { lastFrame: frameBefore, unmount: unmountBefore } = renderGrid({
@@ -928,26 +990,22 @@ describe("CategoryGrid component", () => {
   describe("edge cases", () => {
     it("should handle single category", () => {
       const categories = [
-        createCategory("web-forms", "Single Category", [
-          createOption("web-forms-react-hook-form", "Option 1")
-        ])
+        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("Option 1");
+      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", "Only Option")
-        ])
+        createCategory("web-forms", "Single", [createOption("web-forms-react-hook-form")])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Only Option");
+      globalExpect(output).toContain("React Hook Form");
     });
     it("should handle category with many options (flows naturally)", () => {
       const manySkillIds = [
@@ -962,40 +1020,38 @@ describe("CategoryGrid component", () => {
         "web-styling-tailwind",
         "web-styling-scss-modules"
       ];
-      const options = manySkillIds.map((id, i) => createOption(id, `Option ${i}`));
+      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("Option 0");
-      globalExpect(output).toContain("Option 9");
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("SCSS Modules");
     });
-    it("should handle long option labels", () => {
+    it("should handle long display names", () => {
       const categories = [
         createCategory("web-i18n", "Long Labels", [
-          createOption("web-i18n-next-intl", "Very Long Option Name"),
-          createOption("web-i18n-react-intl", "Another Long Name")
+          createOption("web-i18n-next-intl"),
+          createOption("web-i18n-react-intl")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
       cleanup = unmount;
       const output = lastFrame();
-      globalExpect(output).toContain("Very Long Option Name");
+      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", "Option 1"),
-          createOption("web-forms-vee-validate", "Option 2")
-        ]),
-        createCategory("web-styling", "Category 2", [
-          createOption("web-forms-zod-validation", "Option 3")
+          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", "Option 4"),
-          createOption("web-testing-playwright-e2e", "Option 5"),
-          createOption("web-testing-react-testing-library", "Option 6")
+          createOption("web-testing-vitest"),
+          createOption("web-testing-playwright-e2e"),
+          createOption("web-testing-react-testing-library")
         ])
       ];
       const { lastFrame, unmount } = renderGrid({ categories });
@@ -1014,16 +1070,14 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-forms-react-hook-form", "Option 1", { selected: true }),
+            createOption("web-forms-react-hook-form", { selected: true }),
             // Framework selected
-            createOption("web-forms-vee-validate", "Option 2"),
-            createOption("web-forms-zod-validation", "Option 3")
+            createOption("web-forms-vee-validate"),
+            createOption("web-forms-zod-validation")
           ],
           { required: true }
         ),
-        createCategory("web-styling", "Category 2", [
-          createOption("web-testing-vitest", "Option 4")
-        ])
+        createCategory("web-styling", "Category 2", [createOption("web-testing-vitest")])
       ];
       const { stdin, unmount } = renderGrid({
         categories,
@@ -1040,22 +1094,22 @@ describe("CategoryGrid component", () => {
     });
   });
   describe("installed skills", () => {
-    it("should render installed skill with label only (no checkmark icon)", () => {
+    it("should render installed skill with display name (no checkmark icon)", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Option 1", { installed: true })
+          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("Option 1");
+      globalExpect(output).toContain("React Hook Form");
     });
-    it("should render installed and selected skill with label only", () => {
+    it("should render installed and selected skill with display name only", () => {
       const categories = [
         createCategory("web-forms", "Forms", [
-          createOption("web-forms-react-hook-form", "Option 1", {
+          createOption("web-forms-react-hook-form", {
             installed: true,
             selected: true
           })
@@ -1065,19 +1119,19 @@ describe("CategoryGrid component", () => {
       cleanup = unmount;
       const output = lastFrame();
       globalExpect(output).not.toContain("\u2713");
-      globalExpect(output).toContain("Option 1");
+      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", "Option 1", { local: true, installed: true })
+          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("Option 1");
+      globalExpect(output).toContain("React Hook Form");
     });
   });
   describe("natural flow (no virtual scroll)", () => {
@@ -1128,10 +1182,7 @@ describe("CategoryGrid component", () => {
         createCategory(
           "web-framework",
           "Framework",
-          [
-            createOption("web-framework-react", "React"),
-            createOption("web-framework-vue-composition-api", "Vue")
-          ],
+          [createOption("web-framework-react"), createOption("web-framework-vue-composition-api")],
           { exclusive: true }
         )
       ];
@@ -1146,8 +1197,8 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-framework-react", "React", { selected: true }),
-            createOption("web-framework-vue-composition-api", "Vue")
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
           ],
           { exclusive: true }
         )
@@ -1163,9 +1214,9 @@ describe("CategoryGrid component", () => {
           "web-testing",
           "Testing",
           [
-            createOption("web-testing-vitest", "Vitest", { selected: true }),
-            createOption("web-testing-playwright-e2e", "Playwright", { selected: true }),
-            createOption("web-testing-cypress-e2e", "Cypress")
+            createOption("web-testing-vitest", { selected: true }),
+            createOption("web-testing-playwright-e2e", { selected: true }),
+            createOption("web-testing-cypress-e2e")
           ],
           { exclusive: false }
         )
@@ -1180,10 +1231,7 @@ describe("CategoryGrid component", () => {
         createCategory(
           "web-testing",
           "Testing",
-          [
-            createOption("web-testing-vitest", "Vitest"),
-            createOption("web-testing-playwright-e2e", "Playwright")
-          ],
+          [createOption("web-testing-vitest"), createOption("web-testing-playwright-e2e")],
           { exclusive: false }
         )
       ];
@@ -1197,13 +1245,13 @@ describe("CategoryGrid component", () => {
         createCategory(
           "web-framework",
           "Framework",
-          [createOption("web-framework-react", "React", { selected: true })],
+          [createOption("web-framework-react", { selected: true })],
           { exclusive: true }
         ),
         createCategory(
           "web-testing",
           "Testing",
-          [createOption("web-testing-vitest", "Vitest", { selected: true })],
+          [createOption("web-testing-vitest", { selected: true })],
           { exclusive: false }
         )
       ];
@@ -1219,8 +1267,8 @@ describe("CategoryGrid component", () => {
           "web-framework",
           "Framework",
           [
-            createOption("web-framework-react", "React", { selected: true }),
-            createOption("web-framework-vue-composition-api", "Vue")
+            createOption("web-framework-react", { selected: true }),
+            createOption("web-framework-vue-composition-api")
           ],
           { exclusive: true }
         ),
@@ -1228,9 +1276,9 @@ describe("CategoryGrid component", () => {
           "web-testing",
           "Testing",
           [
-            createOption("web-testing-vitest", "Vitest", { selected: true }),
-            createOption("web-testing-playwright-e2e", "Playwright", { selected: true }),
-            createOption("web-testing-cypress-e2e", "Cypress")
+            createOption("web-testing-vitest", { selected: true }),
+            createOption("web-testing-playwright-e2e", { selected: true }),
+            createOption("web-testing-cypress-e2e")
           ],
           { exclusive: false }
         )