agents-inc 0.149.2 → 0.151.0

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

@@ -0,0 +1,1094 @@
+#!/usr/bin/env node
+import {
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  ENTER,
+  ESCAPE,
+  INPUT_DELAY_MS,
+  RENDER_DELAY_MS,
+  SPACE,
+  delay
+} from "../../chunk-KSZ6PCY4.js";
+import {
+  render
+} from "../../chunk-EKWAUOQB.js";
+import {
+  WEB_TRIO_MATRIX
+} from "../../chunk-THKIOI32.js";
+import "../../chunk-K3OU6TGX.js";
+import {
+  createMockMatrix,
+  createMockSkill
+} from "../../chunk-V7QOSGQA.js";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  globalExpect,
+  it,
+  vi
+} from "../../chunk-I3XKEGHM.js";
+import {
+  SourceGrid
+} from "../../chunk-WK4J2CHH.js";
+import "../../chunk-NIKUMXE7.js";
+import "../../chunk-KOPEM3Q7.js";
+import "../../chunk-2RSNKBXC.js";
+import "../../chunk-DUVWGO6E.js";
+import "../../chunk-KIR7VYQD.js";
+import "../../chunk-LYYXX2W5.js";
+import "../../chunk-DAG2ULNF.js";
+import "../../chunk-VG2TVBFN.js";
+import "../../chunk-IHO75PMZ.js";
+import {
+  source_default
+} from "../../chunk-SYUOXSPU.js";
+import {
+  BUILT_IN_MATRIX,
+  getSkillById,
+  initializeMatrix
+} from "../../chunk-DG2NGZ7S.js";
+import "../../chunk-VEP23B5W.js";
+import {
+  CLI_COLORS,
+  UI_SYMBOLS
+} from "../../chunk-O5ASLZ2K.js";
+import {
+  init_esm_shims
+} from "../../chunk-P56WJ5FA.js";
+
+// src/cli/components/wizard/source-grid.test.tsx
+init_esm_shims();
+import { jsx } from "react/jsx-runtime";
+var TRUECOLOR_CHALK_LEVEL = 3;
+var createSourceOption = (id, overrides = {}) => ({
+  id,
+  selected: false,
+  installed: false,
+  ...overrides
+});
+var createSourceRow = (skillId, options, scope, readOnly) => ({
+  skillId,
+  options,
+  scope,
+  ...readOnly ? { readOnly } : {}
+});
+var createRemovedRow = (skillId, options, scope) => ({
+  ...createSourceRow(skillId, options, scope),
+  disabled: true
+});
+var createAddedRow = (skillId, options, scope) => ({
+  ...createSourceRow(skillId, options, scope),
+  added: true
+});
+var defaultRows = [
+  createSourceRow("web-framework-react", [createSourceOption("public", { selected: true })]),
+  createSourceRow("web-state-zustand", [createSourceOption("public", { selected: true })]),
+  createSourceRow("web-testing-vitest", [createSourceOption("public", { selected: true })])
+];
+var multiSourceRows = [
+  createSourceRow("web-framework-react", [
+    createSourceOption("public", { selected: true }),
+    createSourceOption("acme-corp")
+  ]),
+  createSourceRow("web-state-zustand", [
+    createSourceOption("public", { selected: true }),
+    createSourceOption("acme-corp"),
+    createSourceOption("internal")
+  ])
+];
+var defaultProps = {
+  rows: defaultRows,
+  defaultFocusedRow: 0,
+  defaultFocusedCol: 0,
+  onSelect: vi.fn(),
+  onFocusChange: vi.fn()
+};
+var renderGrid = (props = {}) => {
+  return render(/* @__PURE__ */ jsx(SourceGrid, { ...defaultProps, ...props }));
+};
+describe("SourceGrid component", () => {
+  let cleanup;
+  beforeEach(() => {
+    initializeMatrix(WEB_TRIO_MATRIX);
+  });
+  afterEach(() => {
+    cleanup?.();
+    cleanup = void 0;
+    initializeMatrix(BUILT_IN_MATRIX);
+  });
+  describe("rendering", () => {
+    it("should render all skill rows", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Zustand");
+      globalExpect(output).toContain("Vitest");
+    });
+    it("should render source option labels", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Public");
+    });
+    it("should render multiple source options per row", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: multiSourceRows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Public");
+      globalExpect(output).toContain("acme-corp");
+    });
+    it("should handle empty rows array", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: [] });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("No skills to display");
+    });
+    it("should render single row", () => {
+      const rows = [
+        createSourceRow("web-framework-react", [createSourceOption("public", { selected: true })])
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Public");
+    });
+  });
+  describe("scope-grouped rendering", () => {
+    it("should head each scope block with its own row header and caption no column", () => {
+      const rows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("public", { selected: true })],
+          "global"
+        ),
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("public", { selected: true })],
+          "project"
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Zustand");
+      globalExpect(output).toContain("Global");
+      globalExpect(output).toContain("Project");
+      globalExpect(output).not.toContain("Scope");
+    });
+    it("should show global rows before project rows", () => {
+      const rows = [
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("public", { selected: true })],
+          "project"
+        ),
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("public", { selected: true })],
+          "global"
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      const output = lastFrame();
+      const globalPos = output.indexOf("React");
+      const projectPos = output.indexOf("Zustand");
+      globalExpect(globalPos).toBeGreaterThan(-1);
+      globalExpect(projectPos).toBeGreaterThan(-1);
+      globalExpect(globalPos).toBeLessThan(projectPos);
+    });
+    it("heads each block in the gutter and lines the source captions up with their cells", () => {
+      const rows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("eject"), createSourceOption("agents-inc", { selected: true })],
+          "global"
+        ),
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("eject", { selected: true }), createSourceOption("agents-inc")],
+          "project"
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      globalExpect(lastFrame()).toMatchInlineSnapshot(`
+        "                                       Local             Plugin
+
+        Global       React                   \u276F Eject             Agents Inc
+
+        Project      Zustand                   Eject             Agents Inc"
+      `);
+    });
+    it("renders one unseparated block in the flat layout", () => {
+      const rows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("eject"), createSourceOption("agents-inc", { selected: true })],
+          "project"
+        ),
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("eject", { selected: true }), createSourceOption("agents-inc")],
+          "project"
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      globalExpect(lastFrame()).toMatchInlineSnapshot(`
+        "                            Local             Plugin
+
+          React                   \u276F Eject             Agents Inc
+          Zustand                   Eject             Agents Inc"
+      `);
+    });
+    it("renders one unseparated block when no row has a scope", () => {
+      const rows = [
+        createSourceRow("web-framework-react", [
+          createSourceOption("eject"),
+          createSourceOption("agents-inc", { selected: true })
+        ]),
+        createSourceRow("web-state-zustand", [
+          createSourceOption("eject", { selected: true }),
+          createSourceOption("agents-inc")
+        ])
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      globalExpect(lastFrame()).toMatchInlineSnapshot(`
+        "                            Local             Plugin
+
+          React                   \u276F Eject             Agents Inc
+          Zustand                   Eject             Agents Inc"
+      `);
+    });
+  });
+  describe("keyboard navigation - vertical", () => {
+    it("should move down with arrow down", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(1, 0);
+    });
+    it("should move up with arrow up", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap down to first row from last row", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 2,
+        // Last row (Vitest)
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap up to last row from first row", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(2, 0);
+    });
+    it("should clamp column when moving to row with fewer options", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 1,
+        // Zustand has 3 options
+        defaultFocusedCol: 2,
+        // Internal (index 2)
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_UP);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+  });
+  describe("keyboard navigation - horizontal", () => {
+    it("should move right with arrow right", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should move left with arrow left", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap right to first column from last column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        // Last option in React row
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should wrap left to last column from first column", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+  });
+  describe("selection", () => {
+    it("should call onSelect when pressing space", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-framework-react", "public");
+    });
+    it("should call onSelect with correct skill and source IDs", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        // Acme Corp
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-framework-react", "acme-corp");
+    });
+    it("should call onSelect on second row", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: multiSourceRows,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 2,
+        // Internal
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-state-zustand", "internal");
+    });
+  });
+  describe("edge cases", () => {
+    it("should handle single option per row", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 0);
+    });
+    it("should handle many rows", () => {
+      const skillIds = [
+        "web-framework-react",
+        "web-framework-vue-composition-api",
+        "web-styling-tailwind",
+        "web-styling-scss-modules",
+        "web-state-zustand",
+        "web-state-mobx",
+        "web-testing-vitest",
+        "web-testing-playwright-e2e",
+        "web-server-state-react-query",
+        "web-tooling-vite"
+      ];
+      const skills = Object.fromEntries(skillIds.map((id) => [id, createMockSkill(id)]));
+      initializeMatrix(createMockMatrix(skills));
+      const rows = skillIds.map(
+        (id) => createSourceRow(id, [createSourceOption("public", { selected: true })])
+      );
+      const { lastFrame, unmount } = renderGrid({ rows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Vite");
+    });
+  });
+  describe("search pill", () => {
+    const mockSearch = vi.fn();
+    const mockBind = vi.fn();
+    const mockSearchStateChange = vi.fn();
+    const searchCandidates = [
+      {
+        id: "web-framework-react-pro",
+        sourceUrl: "github:awesome-dev/skills",
+        sourceName: "awesome-dev",
+        alias: "react"
+      },
+      {
+        id: "web-framework-react-strict",
+        sourceUrl: "github:team-xyz/skills",
+        sourceName: "team-xyz",
+        alias: "react"
+      }
+    ];
+    afterEach(() => {
+      mockSearch.mockReset();
+      mockBind.mockReset();
+      mockSearchStateChange.mockReset();
+    });
+    it("should render search pill at end of each row when onSearch is provided", () => {
+      const { lastFrame, unmount } = renderGrid({
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Search");
+    });
+    it("should not render search pill when onSearch is not provided", () => {
+      const { lastFrame, unmount } = renderGrid();
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain("Search");
+    });
+    it("should navigate to search pill with arrow right", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        // On the only option (Public)
+        onFocusChange,
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenCalledWith(0, 1);
+    });
+    it("should not call onSelect when space is pressed on search pill", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        // Search pill position (after Public)
+        onSelect,
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(" ");
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).not.toHaveBeenCalled();
+    });
+    it("should trigger search on Space when search pill is focused", async () => {
+      mockSearch.mockResolvedValue(searchCandidates);
+      const { stdin, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        // Search pill position
+        onSearch: mockSearch,
+        onSearchStateChange: mockSearchStateChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(mockSearch).toHaveBeenCalledWith("react");
+      globalExpect(mockSearchStateChange).toHaveBeenCalledWith(true);
+    });
+    it("should render modal with results after search completes", async () => {
+      mockSearch.mockResolvedValue(searchCandidates);
+      const { stdin, lastFrame, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(RENDER_DELAY_MS);
+      const output = lastFrame();
+      globalExpect(output).toContain("react");
+      globalExpect(output).toContain("awesome-dev");
+      globalExpect(output).toContain("team-xyz");
+    });
+    it("should close modal on Escape without binding", async () => {
+      mockSearch.mockResolvedValue(searchCandidates);
+      const { stdin, lastFrame, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onSearch: mockSearch,
+        onBind: mockBind,
+        onSearchStateChange: mockSearchStateChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ESCAPE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(mockBind).not.toHaveBeenCalled();
+      globalExpect(mockSearchStateChange).toHaveBeenLastCalledWith(false);
+      const output = lastFrame();
+      globalExpect(output).not.toContain("awesome-dev");
+    });
+    it("should not respond to grid navigation while modal is open", async () => {
+      mockSearch.mockResolvedValue(searchCandidates);
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onSearch: mockSearch,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(RENDER_DELAY_MS);
+      onFocusChange.mockClear();
+      stdin.write(ARROW_LEFT);
+      await delay(INPUT_DELAY_MS);
+      stdin.write(ARROW_RIGHT);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).not.toHaveBeenCalled();
+    });
+    it("should bind result on Enter in modal", async () => {
+      mockSearch.mockResolvedValue(searchCandidates);
+      const { stdin, unmount } = renderGrid({
+        rows: defaultRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 1,
+        onSearch: mockSearch,
+        onBind: mockBind,
+        onSearchStateChange: mockSearchStateChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ENTER);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(mockBind).toHaveBeenCalledWith(searchCandidates[0]);
+      globalExpect(mockSearchStateChange).toHaveBeenLastCalledWith(false);
+    });
+  });
+  describe("read-only rows", () => {
+    const readOnlyRows = [
+      createSourceRow(
+        "web-framework-react",
+        [createSourceOption("public", { selected: true }), createSourceOption("eject")],
+        "global",
+        true
+      ),
+      createSourceRow(
+        "web-state-zustand",
+        [createSourceOption("public", { selected: true })],
+        "project"
+      )
+    ];
+    it("should render read-only rows with lock indicator", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: readOnlyRows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(UI_SYMBOLS.LOCK);
+    });
+    it("should render read-only rows with dimmed styling", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: readOnlyRows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).toContain("Zustand");
+    });
+    it("should not fire onSelect for read-only rows (defense-in-depth guard)", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: readOnlyRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-state-zustand", "public");
+    });
+    it("should skip read-only rows during navigation", async () => {
+      const threeRows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("public", { selected: true })],
+          "global",
+          true
+        ),
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("public", { selected: true })],
+          "project"
+        ),
+        createSourceRow(
+          "web-testing-vitest",
+          [createSourceOption("public", { selected: true })],
+          "global",
+          true
+        )
+      ];
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: threeRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenLastCalledWith(1, 0);
+    });
+    it("should allow selection on non-read-only rows after navigating past read-only", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: readOnlyRows,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0,
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-state-zustand", "public");
+    });
+    it("should not show search pill on read-only rows", () => {
+      const mockSearch = vi.fn();
+      const { lastFrame, unmount } = renderGrid({
+        rows: [
+          createSourceRow(
+            "web-framework-react",
+            [createSourceOption("public", { selected: true })],
+            "global",
+            true
+          )
+        ],
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("React");
+      globalExpect(output).not.toContain("Search");
+    });
+    it("should not show focus highlight on read-only rows", () => {
+      const allReadOnlyRows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("public", { selected: true })],
+          "global",
+          true
+        ),
+        createSourceRow(
+          "web-state-zustand",
+          [createSourceOption("public", { selected: true })],
+          "global",
+          true
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({
+        rows: allReadOnlyRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).not.toContain(UI_SYMBOLS.CHEVRON);
+    });
+    it("should render re-scoped skill once per scope group", () => {
+      const reSccopedRows = [
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("eject"), createSourceOption("public", { selected: true })],
+          "global",
+          true
+        ),
+        createSourceRow(
+          "web-framework-react",
+          [createSourceOption("eject"), createSourceOption("public", { selected: true })],
+          "project"
+        )
+      ];
+      const { lastFrame, unmount } = renderGrid({ rows: reSccopedRows });
+      cleanup = unmount;
+      const output = lastFrame();
+      const reactMatches = output.split("React").length - 1;
+      globalExpect(reactMatches).toBe(2);
+      globalExpect(output).toContain(UI_SYMBOLS.LOCK);
+    });
+  });
+  describe("removed (disabled) rows", () => {
+    const removedRows = [
+      createSourceRow(
+        "web-framework-react",
+        [createSourceOption("public", { selected: true })],
+        "project"
+      ),
+      createRemovedRow(
+        "web-testing-vitest",
+        [createSourceOption("eject", { selected: true }), createSourceOption("public")],
+        "project"
+      )
+    ];
+    it("should keep the removed skill visible", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: removedRows });
+      cleanup = unmount;
+      globalExpect(lastFrame()).toContain("Vitest");
+    });
+    it("should mark the removed skill with the pending-removal marker and no lock", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: removedRows });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(`${UI_SYMBOLS.REMOVED} Vitest`);
+      globalExpect(output).not.toContain(UI_SYMBOLS.LOCK);
+    });
+    it("should not fire onSelect when space is pressed with a removed row focused", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: [removedRows[1]],
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).not.toHaveBeenCalled();
+    });
+    it("should skip removed rows during navigation", async () => {
+      const onFocusChange = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: removedRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0,
+        onFocusChange
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(ARROW_DOWN);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onFocusChange).toHaveBeenLastCalledWith(0, 0);
+    });
+    it("should not focus a removed row when it is the default focus target", async () => {
+      const onSelect = vi.fn();
+      const { stdin, unmount } = renderGrid({
+        rows: removedRows,
+        defaultFocusedRow: 1,
+        // The removed row — focus must fall back to the editable row.
+        defaultFocusedCol: 0,
+        onSelect
+      });
+      cleanup = unmount;
+      await delay(RENDER_DELAY_MS);
+      stdin.write(SPACE);
+      await delay(INPUT_DELAY_MS);
+      globalExpect(onSelect).toHaveBeenCalledWith("web-framework-react", "public");
+    });
+    it("should not show search pill on removed rows", () => {
+      const mockSearch = vi.fn();
+      const { lastFrame, unmount } = renderGrid({
+        rows: [removedRows[1]],
+        onSearch: mockSearch
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain("Vitest");
+      globalExpect(output).not.toContain("Search");
+    });
+    it("should not show focus highlight on removed rows", () => {
+      const { lastFrame, unmount } = renderGrid({
+        rows: [removedRows[1]],
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      globalExpect(lastFrame()).not.toContain(UI_SYMBOLS.CHEVRON);
+    });
+    describe("collapsed dual-scope pair", () => {
+      const COLLAPSED_SKILL_ID = "web-framework-react";
+      const UNTOUCHED_SKILL_ID = "web-state-zustand";
+      const collapsedPairRows = [
+        createSourceRow(
+          COLLAPSED_SKILL_ID,
+          [createSourceOption("public", { selected: true })],
+          "global",
+          true
+        ),
+        createRemovedRow(
+          COLLAPSED_SKILL_ID,
+          [createSourceOption("public", { selected: true })],
+          "project"
+        )
+      ];
+      let previousChalkLevel;
+      beforeEach(() => {
+        previousChalkLevel = source_default.level;
+        source_default.level = TRUECOLOR_CHALK_LEVEL;
+      });
+      afterEach(() => {
+        source_default.level = previousChalkLevel;
+      });
+      it("should render the same skill in both scope sections, locked at global and pending removal at project", () => {
+        const { lastFrame, unmount } = renderGrid({ rows: collapsedPairRows });
+        cleanup = unmount;
+        const output = lastFrame();
+        const skillName = getSkillById(COLLAPSED_SKILL_ID).displayName;
+        globalExpect(
+          output,
+          `the surviving global install must keep its lock. Frame:
+${JSON.stringify(output)}`
+        ).toContain(`${UI_SYMBOLS.LOCK} ${skillName}`);
+        globalExpect(
+          output,
+          `the emptied project slot must carry the removal marker. Frame:
+${JSON.stringify(output)}`
+        ).toContain(`${UI_SYMBOLS.REMOVED} ${skillName}`);
+        globalExpect(output).not.toContain(`${UI_SYMBOLS.ADDED} ${skillName}`);
+      });
+      it("should render the project instance of the pair in the removed-diff colour", () => {
+        const { lastFrame, unmount } = renderGrid({ rows: collapsedPairRows });
+        cleanup = unmount;
+        const output = lastFrame();
+        const skillName = getSkillById(COLLAPSED_SKILL_ID).displayName;
+        globalExpect(
+          output,
+          `the pending-removal row must render in the removed-diff colour. Frame:
+${JSON.stringify(output)}`
+        ).toContain(source_default.hex(CLI_COLORS.ERROR)(`${UI_SYMBOLS.REMOVED} ${skillName}`));
+      });
+      it("should not fire onSelect when space is pressed on an all-inert collapsed pair", async () => {
+        const onSelect = vi.fn();
+        const { stdin, unmount } = renderGrid({
+          rows: collapsedPairRows,
+          defaultFocusedRow: 0,
+          defaultFocusedCol: 0,
+          onSelect
+        });
+        cleanup = unmount;
+        await delay(RENDER_DELAY_MS);
+        stdin.write(SPACE);
+        await delay(INPUT_DELAY_MS);
+        globalExpect(onSelect).not.toHaveBeenCalled();
+      });
+      it("should not show focus highlight on either row of the collapsed pair", () => {
+        const { lastFrame, unmount } = renderGrid({
+          rows: collapsedPairRows,
+          defaultFocusedRow: 0,
+          defaultFocusedCol: 0
+        });
+        cleanup = unmount;
+        globalExpect(lastFrame()).not.toContain(UI_SYMBOLS.CHEVRON);
+      });
+      it("should skip both rows of the collapsed pair and act on the editable row instead", async () => {
+        const onSelect = vi.fn();
+        const { stdin, unmount } = renderGrid({
+          rows: [
+            ...collapsedPairRows,
+            createSourceRow(
+              UNTOUCHED_SKILL_ID,
+              [createSourceOption("public", { selected: true })],
+              "project"
+            )
+          ],
+          // The locked half of the pair — focus must fall through it AND the pending-removal row.
+          defaultFocusedRow: 0,
+          defaultFocusedCol: 0,
+          onSelect
+        });
+        cleanup = unmount;
+        await delay(RENDER_DELAY_MS);
+        stdin.write(SPACE);
+        await delay(INPUT_DELAY_MS);
+        globalExpect(onSelect).toHaveBeenCalledWith(UNTOUCHED_SKILL_ID, "public");
+        globalExpect(onSelect).not.toHaveBeenCalledWith(COLLAPSED_SKILL_ID, "public");
+      });
+    });
+  });
+  describe("added rows", () => {
+    const ADDED_SKILL_ID = "web-framework-react";
+    const addedRows = [
+      createAddedRow(ADDED_SKILL_ID, [createSourceOption("public", { selected: true })], "project"),
+      createSourceRow(
+        "web-state-zustand",
+        [createSourceOption("public", { selected: true })],
+        "project"
+      )
+    ];
+    let previousChalkLevel;
+    beforeEach(() => {
+      previousChalkLevel = source_default.level;
+      source_default.level = TRUECOLOR_CHALK_LEVEL;
+    });
+    afterEach(() => {
+      source_default.level = previousChalkLevel;
+    });
+    it("should mark the added skill with the added marker", () => {
+      const { lastFrame, unmount } = renderGrid({
+        rows: addedRows,
+        defaultFocusedRow: 1,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(output).toContain(`${UI_SYMBOLS.ADDED} ${getSkillById(ADDED_SKILL_ID).displayName}`);
+    });
+    it("should keep the added-diff colour on the added row while it is focused", () => {
+      const { lastFrame, unmount } = renderGrid({
+        rows: addedRows,
+        defaultFocusedRow: 0,
+        defaultFocusedCol: 0
+      });
+      cleanup = unmount;
+      const focusedLabel = `${UI_SYMBOLS.ADDED} ${getSkillById(ADDED_SKILL_ID).displayName} `;
+      const output = lastFrame();
+      globalExpect(
+        output,
+        `a focused added row must keep its added-diff colour. Frame:
+${JSON.stringify(output)}`
+      ).toContain(source_default.bgHex(CLI_COLORS.LABEL_BG)(source_default.hex(CLI_COLORS.SUCCESS)(focusedLabel)));
+      globalExpect(
+        output,
+        "a focused added row must not fall back to the plain white label colour"
+      ).not.toContain(source_default.bgHex(CLI_COLORS.LABEL_BG)(source_default.hex(CLI_COLORS.WHITE)(focusedLabel)));
+    });
+  });
+  describe("inert row source selection", () => {
+    const LOCKED_ROW = createSourceRow(
+      "web-framework-react",
+      [createSourceOption("public", { selected: true }), createSourceOption("eject")],
+      "global",
+      true
+    );
+    const REMOVAL_ROW = createRemovedRow(
+      "web-testing-vitest",
+      [createSourceOption("eject", { selected: true }), createSourceOption("public")],
+      "project"
+    );
+    const INERT_PREFIX = `${UI_SYMBOLS.CHEVRON_SPACER} `;
+    let previousChalkLevel;
+    beforeEach(() => {
+      previousChalkLevel = source_default.level;
+      source_default.level = TRUECOLOR_CHALK_LEVEL;
+    });
+    afterEach(() => {
+      source_default.level = previousChalkLevel;
+    });
+    it("should carry the locked row's selection in weight and brightness, not a check", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: [LOCKED_ROW] });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(
+        output,
+        `the locked row's selected source must render bold. Frame:
+${JSON.stringify(output)}`
+      ).toContain(source_default.bold(`${INERT_PREFIX}Public`));
+      globalExpect(
+        output,
+        `the locked row's unselected sources must stay dimmed. Frame:
+${JSON.stringify(output)}`
+      ).toContain(source_default.dim(`${INERT_PREFIX}Eject`));
+      globalExpect(output).not.toContain(UI_SYMBOLS.SELECTED);
+    });
+    it("should carry the pending-removal row's selection in weight while keeping its removal colour", () => {
+      const { lastFrame, unmount } = renderGrid({ rows: [REMOVAL_ROW] });
+      cleanup = unmount;
+      const output = lastFrame();
+      globalExpect(
+        output,
+        `the removal row's selected source must render bold in the removal colour. Frame:
+${JSON.stringify(output)}`
+      ).toContain(source_default.bold(source_default.hex(CLI_COLORS.ERROR)(`${INERT_PREFIX}Eject`)));
+      globalExpect(
+        output,
+        `the removal row's unselected sources must keep the removal colour unbolded. Frame:
+${JSON.stringify(output)}`
+      ).toContain(source_default.hex(CLI_COLORS.ERROR)(`${INERT_PREFIX}Public`));
+      globalExpect(output).not.toContain(UI_SYMBOLS.SELECTED);
+    });
+  });
+});
+//# sourceMappingURL=source-grid.test.js.map