@stigmer/react 1.0.3 → 2.0.0

package/src/internal/file-tree/__tests__/FileTreeNode-drag.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import { FileTreeNode, FILE_REF_MIME } from "../FileTreeNode";
+import type { TreeNode } from "../tree-node";
+
+afterEach(cleanup);
+
+const fileNode: TreeNode = { name: "config.yaml", path: "src/config.yaml" };
+const folderNode: TreeNode = {
+  name: "src",
+  path: "src/",
+  children: [fileNode],
+};
+
+function renderNode(node: TreeNode, enableDrag = false) {
+  return render(
+    <ul role="tree">
+      <FileTreeNode
+        node={node}
+        selectedPath=""
+        onSelect={vi.fn()}
+        depth={0}
+        enableDrag={enableDrag}
+      />
+    </ul>,
+  );
+}
+
+describe("FileTreeNode drag behavior", () => {
+  it("file nodes are NOT draggable by default (enableDrag=false)", () => {
+    const { container } = renderNode(fileNode, false);
+
+    const button = container.querySelector("button")!;
+    expect(button.getAttribute("draggable")).not.toBe("true");
+  });
+
+  it("file nodes become draggable when enableDrag=true", () => {
+    const { container } = renderNode(fileNode, true);
+
+    const button = container.querySelector("button")!;
+    expect(button.getAttribute("draggable")).toBe("true");
+  });
+
+  it("folder nodes are NOT draggable even when enableDrag=true", () => {
+    const { container } = renderNode(folderNode, true);
+
+    const buttons = container.querySelectorAll("button");
+    const folderButton = buttons[0];
+    expect(folderButton.getAttribute("draggable")).not.toBe("true");
+  });
+
+  it("onDragStart sets the custom MIME type with correct payload", () => {
+    const { container } = renderNode(fileNode, true);
+
+    const button = container.querySelector("button")!;
+
+    const event = new Event("dragstart", { bubbles: true }) as DragEvent;
+    const dataStore: Record<string, string> = {};
+    Object.defineProperty(event, "dataTransfer", {
+      value: {
+        setData: (type: string, data: string) => { dataStore[type] = data; },
+        set effectAllowed(_v: string) { /* noop in test env */ },
+        get effectAllowed() { return "link"; },
+      },
+    });
+    button.dispatchEvent(event);
+
+    expect(dataStore[FILE_REF_MIME]).toBe(
+      JSON.stringify({ path: "src/config.yaml" }),
+    );
+  });
+
+  it("child file nodes in a folder inherit enableDrag from parent", () => {
+    const { container } = renderNode(folderNode, true);
+
+    const buttons = container.querySelectorAll("button");
+    // buttons[0] is folder, buttons[1] is child file
+    const childFileButton = buttons[1];
+    expect(childFileButton.getAttribute("draggable")).toBe("true");
+  });
+});

package/src/internal/file-tree/__tests__/buildFileTree.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect } from "vitest";
+import { buildFileTree, type TreeNode } from "../tree-node";
+
+function names(nodes: TreeNode[]): string[] {
+  return nodes.map((n) => n.name);
+}
+
+describe("buildFileTree", () => {
+  it("returns an empty array for empty input", () => {
+    expect(buildFileTree([])).toEqual([]);
+  });
+
+  it("places root-level files as top-level nodes without children", () => {
+    const tree = buildFileTree([
+      { path: "README.md" },
+      { path: "package.json" },
+    ]);
+    expect(tree).toHaveLength(2);
+    expect(tree.every((n) => n.children === undefined)).toBe(true);
+    expect(names(tree)).toEqual(["package.json", "README.md"]);
+  });
+
+  it("synthesizes intermediate folder nodes for nested paths", () => {
+    const tree = buildFileTree([{ path: "src/index.ts" }]);
+    expect(tree).toHaveLength(1);
+
+    const src = tree[0];
+    expect(src.name).toBe("src");
+    expect(src.path).toBe("src/");
+    expect(src.children).toHaveLength(1);
+    expect(src.children![0]).toEqual({ name: "index.ts", path: "src/index.ts" });
+  });
+
+  it("groups files under the same parent folder", () => {
+    const tree = buildFileTree([
+      { path: "src/a.ts" },
+      { path: "src/b.ts" },
+    ]);
+    expect(tree).toHaveLength(1);
+    expect(tree[0].children).toHaveLength(2);
+    expect(names(tree[0].children!)).toEqual(["a.ts", "b.ts"]);
+  });
+
+  it("handles deeply nested paths", () => {
+    const tree = buildFileTree([{ path: "a/b/c/d.ts" }]);
+    expect(tree[0].name).toBe("a");
+    expect(tree[0].children![0].name).toBe("b");
+    expect(tree[0].children![0].children![0].name).toBe("c");
+    expect(tree[0].children![0].children![0].children![0]).toEqual({
+      name: "d.ts",
+      path: "a/b/c/d.ts",
+    });
+  });
+
+  it("sorts files lexicographically regardless of input order", () => {
+    const tree = buildFileTree([
+      { path: "z.ts" },
+      { path: "a.ts" },
+      { path: "m.ts" },
+    ]);
+    expect(names(tree)).toEqual(["a.ts", "m.ts", "z.ts"]);
+  });
+
+  it("sorts files and folders together deterministically", () => {
+    const tree = buildFileTree([
+      { path: "src/index.ts" },
+      { path: "README.md" },
+      { path: "docs/guide.md" },
+    ]);
+    expect(names(tree)).toEqual(["docs", "README.md", "src"]);
+  });
+
+  it("handles a single-file input", () => {
+    const tree = buildFileTree([{ path: "only.txt" }]);
+    expect(tree).toEqual([{ name: "only.txt", path: "only.txt" }]);
+  });
+
+  it("accepts objects with extra properties (minimal contract)", () => {
+    const tree = buildFileTree([
+      { path: "a.ts", size: 100, isDirectory: false } as { path: string },
+    ]);
+    expect(tree).toHaveLength(1);
+    expect(tree[0].name).toBe("a.ts");
+  });
+
+  it("mixes root files and nested files correctly", () => {
+    const tree = buildFileTree([
+      { path: "config.json" },
+      { path: "src/app.ts" },
+      { path: "src/utils/helper.ts" },
+    ]);
+    expect(names(tree)).toEqual(["config.json", "src"]);
+
+    const src = tree[1];
+    expect(names(src.children!)).toEqual(["app.ts", "utils"]);
+    expect(src.children![1].children![0].name).toBe("helper.ts");
+  });
+
+  it("creates duplicate nodes when directory entries are not pre-filtered", () => {
+    const tree = buildFileTree([
+      { path: "src" },
+      { path: "src/index.ts" },
+    ]);
+
+    const srcNodes = tree.filter((n) => n.name === "src");
+    expect(srcNodes).toHaveLength(2);
+    expect(srcNodes.some((n) => n.children === undefined)).toBe(true);
+    expect(srcNodes.some((n) => Array.isArray(n.children))).toBe(true);
+  });
+
+  it("does not mutate the input array", () => {
+    const input = [{ path: "b.ts" }, { path: "a.ts" }];
+    const frozen = [...input];
+    buildFileTree(input);
+    expect(input).toEqual(frozen);
+  });
+});

package/src/internal/file-tree/__tests__/filterFileTree.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from "vitest";
+import type { TreeNode } from "../tree-node";
+import { filterFileTree } from "../filterFileTree";
+
+function names(nodes: readonly TreeNode[]): string[] {
+  return nodes.map((n) => n.name);
+}
+
+const SAMPLE_TREE: TreeNode[] = [
+  {
+    name: "src",
+    path: "src/",
+    children: [
+      { name: "index.ts", path: "src/index.ts" },
+      {
+        name: "utils",
+        path: "src/utils/",
+        children: [
+          { name: "helper.ts", path: "src/utils/helper.ts" },
+          { name: "format.ts", path: "src/utils/format.ts" },
+        ],
+      },
+      { name: "App.tsx", path: "src/App.tsx" },
+    ],
+  },
+  { name: "README.md", path: "README.md" },
+  { name: "package.json", path: "package.json" },
+  {
+    name: "docs",
+    path: "docs/",
+    children: [
+      { name: "guide.md", path: "docs/guide.md" },
+    ],
+  },
+];
+
+describe("filterFileTree", () => {
+  it("returns the original reference for an empty query", () => {
+    const result = filterFileTree(SAMPLE_TREE, "");
+    expect(result).toBe(SAMPLE_TREE);
+  });
+
+  it("returns the original reference for a whitespace-only query", () => {
+    const result = filterFileTree(SAMPLE_TREE, "   ");
+    expect(result).toBe(SAMPLE_TREE);
+  });
+
+  it("matches leaf files by name substring", () => {
+    const result = filterFileTree(SAMPLE_TREE, "helper");
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("src");
+    expect(result[0].children).toHaveLength(1);
+    expect(result[0].children![0].name).toBe("utils");
+    expect(result[0].children![0].children).toHaveLength(1);
+    expect(result[0].children![0].children![0].name).toBe("helper.ts");
+  });
+
+  it("is case-insensitive", () => {
+    const result = filterFileTree(SAMPLE_TREE, "README");
+    expect(names(result)).toContain("README.md");
+
+    const lower = filterFileTree(SAMPLE_TREE, "readme");
+    expect(names(lower)).toContain("README.md");
+
+    const mixed = filterFileTree(SAMPLE_TREE, "ReAdMe");
+    expect(names(mixed)).toContain("README.md");
+  });
+
+  it("returns an empty array when nothing matches", () => {
+    const result = filterFileTree(SAMPLE_TREE, "nonexistent-xyz");
+    expect(result).toEqual([]);
+  });
+
+  it("preserves parent folders for deeply nested matches", () => {
+    const result = filterFileTree(SAMPLE_TREE, "format");
+    expect(result).toHaveLength(1);
+
+    const src = result[0];
+    expect(src.name).toBe("src");
+    expect(src.children).toHaveLength(1);
+
+    const utils = src.children![0];
+    expect(utils.name).toBe("utils");
+    expect(utils.children).toHaveLength(1);
+    expect(utils.children![0].name).toBe("format.ts");
+  });
+
+  it("includes a matching folder with all its original children", () => {
+    const result = filterFileTree(SAMPLE_TREE, "utils");
+    expect(result).toHaveLength(1);
+
+    const src = result[0];
+    expect(src.name).toBe("src");
+    expect(src.children).toHaveLength(1);
+
+    const utils = src.children![0];
+    expect(utils.name).toBe("utils");
+    expect(utils.children).toHaveLength(2);
+    expect(names(utils.children!)).toEqual(["helper.ts", "format.ts"]);
+  });
+
+  it("matches multiple items across different branches", () => {
+    const result = filterFileTree(SAMPLE_TREE, ".md");
+    expect(names(result)).toContain("README.md");
+    expect(names(result)).toContain("docs");
+
+    const docs = result.find((n) => n.name === "docs");
+    expect(docs?.children).toHaveLength(1);
+    expect(docs?.children![0].name).toBe("guide.md");
+  });
+
+  it("matches root-level files directly", () => {
+    const result = filterFileTree(SAMPLE_TREE, "package");
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("package.json");
+    expect(result[0].children).toBeUndefined();
+  });
+
+  it("does not mutate the original tree", () => {
+    const originalLength = SAMPLE_TREE.length;
+    const originalSrcChildren = SAMPLE_TREE[0].children!.length;
+    filterFileTree(SAMPLE_TREE, "helper");
+    expect(SAMPLE_TREE).toHaveLength(originalLength);
+    expect(SAMPLE_TREE[0].children).toHaveLength(originalSrcChildren);
+  });
+
+  it("handles an empty tree", () => {
+    const result = filterFileTree([], "query");
+    expect(result).toEqual([]);
+  });
+
+  it("handles a tree with only root-level files", () => {
+    const flat: TreeNode[] = [
+      { name: "a.ts", path: "a.ts" },
+      { name: "b.ts", path: "b.ts" },
+    ];
+    const result = filterFileTree(flat, "a");
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe("a.ts");
+  });
+});

package/src/internal/file-tree/filterFileTree.ts

@@ -0,0 +1,54 @@
+import type { TreeNode } from "./tree-node";
+
+/**
+ * Filters a {@link TreeNode} hierarchy by a search query.
+ *
+ * Returns a new tree containing only nodes whose `name` matches
+ * the query (case-insensitive substring), plus all ancestor folders
+ * needed to preserve the hierarchy. Folder nodes that match are
+ * included with all their original children (the match implies the
+ * entire subtree is relevant). Folder nodes that do not match
+ * themselves are included only when they contain matching descendants.
+ *
+ * Returns the original `tree` reference when `query` is empty or
+ * whitespace-only, preserving referential stability for downstream
+ * `React.memo` consumers.
+ */
+export function filterFileTree(
+  tree: readonly TreeNode[],
+  query: string,
+): readonly TreeNode[] {
+  const trimmed = query.trim();
+  if (trimmed.length === 0) return tree;
+
+  const lower = trimmed.toLowerCase();
+  return filterNodes(tree, lower);
+}
+
+function filterNodes(
+  nodes: readonly TreeNode[],
+  query: string,
+): TreeNode[] {
+  const result: TreeNode[] = [];
+
+  for (const node of nodes) {
+    const nameMatches = node.name.toLowerCase().includes(query);
+
+    if (node.children) {
+      if (nameMatches) {
+        result.push(node);
+      } else {
+        const filteredChildren = filterNodes(node.children, query);
+        if (filteredChildren.length > 0) {
+          result.push({ ...node, children: filteredChildren });
+        }
+      }
+    } else {
+      if (nameMatches) {
+        result.push(node);
+      }
+    }
+  }
+
+  return result;
+}

package/src/internal/file-tree/index.ts

@@ -0,0 +1,5 @@
+export { buildFileTree } from "./tree-node";
+export type { TreeNode } from "./tree-node";
+export { filterFileTree } from "./filterFileTree";
+export { FileTreeNode, FILE_REF_MIME } from "./FileTreeNode";
+export type { FileTreeNodeProps } from "./FileTreeNode";

package/src/internal/file-tree/tree-node.ts

@@ -0,0 +1,51 @@
+/** A node in a hierarchical file tree. Folders have `children`; files do not. */
+export interface TreeNode {
+  name: string;
+  path: string;
+  children?: TreeNode[];
+}
+
+/**
+ * Builds a hierarchical {@link TreeNode} array from a flat list of file paths.
+ *
+ * Intermediate folder nodes are synthesized automatically from the path
+ * segments. The input is sorted lexicographically before insertion so the
+ * resulting tree is deterministic regardless of input order.
+ *
+ * The input contract is intentionally minimal — any object with a `path`
+ * string works, allowing both `SkillFileEntry` and `WorkspaceFileEntry`
+ * to use this utility without adaptation.
+ */
+export function buildFileTree(files: ReadonlyArray<{ readonly path: string }>): TreeNode[] {
+  const root: TreeNode[] = [];
+
+  const sorted = [...files].sort((a, b) => a.path.localeCompare(b.path));
+
+  for (const file of sorted) {
+    const parts = file.path.split("/");
+
+    if (parts.length === 1) {
+      root.push({ name: parts[0], path: file.path });
+    } else {
+      let currentLevel = root;
+      for (let i = 0; i < parts.length - 1; i++) {
+        const folderName = parts[i];
+        let folder = currentLevel.find(
+          (n) => n.name === folderName && n.children,
+        );
+        if (!folder) {
+          folder = {
+            name: folderName,
+            path: parts.slice(0, i + 1).join("/") + "/",
+            children: [],
+          };
+          currentLevel.push(folder);
+        }
+        currentLevel = folder.children!;
+      }
+      currentLevel.push({ name: parts[parts.length - 1], path: file.path });
+    }
+  }
+
+  return root;
+}

package/src/internal/store/__tests__/selection-store.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, vi } from "vitest";
+import { SelectionStore, type SelectedThreadItem } from "../selection-store";
+
+function toolCall(id: string): SelectedThreadItem {
+  return { kind: "tool-call", toolCallId: id };
+}
+
+function subAgent(id: string): SelectedThreadItem {
+  return { kind: "sub-agent", subAgentId: id };
+}
+
+describe("SelectionStore", () => {
+  it("starts with null selection", () => {
+    const store = new SelectionStore();
+    expect(store.getSelection()).toBeNull();
+  });
+
+  it("select sets the selection and notifies listeners", () => {
+    const store = new SelectionStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.select(toolCall("tc-1"));
+    expect(store.getSelection()).toEqual(toolCall("tc-1"));
+    expect(listener).toHaveBeenCalledOnce();
+  });
+
+  it("select with the same item does not notify", () => {
+    const store = new SelectionStore();
+    store.select(toolCall("tc-1"));
+
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.select(toolCall("tc-1"));
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("deselect clears the selection and notifies", () => {
+    const store = new SelectionStore();
+    store.select(toolCall("tc-1"));
+
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.deselect();
+    expect(store.getSelection()).toBeNull();
+    expect(listener).toHaveBeenCalledOnce();
+  });
+
+  it("deselect when already null does not notify", () => {
+    const store = new SelectionStore();
+    const listener = vi.fn();
+    store.subscribe(listener);
+
+    store.deselect();
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("toggle selects when nothing is selected", () => {
+    const store = new SelectionStore();
+    store.toggle(toolCall("tc-1"));
+    expect(store.getSelection()).toEqual(toolCall("tc-1"));
+  });
+
+  it("toggle deselects when the same item is selected", () => {
+    const store = new SelectionStore();
+    store.select(toolCall("tc-1"));
+    store.toggle(toolCall("tc-1"));
+    expect(store.getSelection()).toBeNull();
+  });
+
+  it("toggle switches to a different item", () => {
+    const store = new SelectionStore();
+    store.select(toolCall("tc-1"));
+    store.toggle(subAgent("sa-1"));
+    expect(store.getSelection()).toEqual(subAgent("sa-1"));
+  });
+
+  it("isSelected returns true for the selected item", () => {
+    const store = new SelectionStore();
+    store.select(toolCall("tc-1"));
+
+    expect(store.isSelected("tool-call", "tc-1")).toBe(true);
+    expect(store.isSelected("tool-call", "tc-2")).toBe(false);
+    expect(store.isSelected("sub-agent", "tc-1")).toBe(false);
+  });
+
+  it("isSelected returns false when nothing is selected", () => {
+    const store = new SelectionStore();
+    expect(store.isSelected("tool-call", "tc-1")).toBe(false);
+  });
+
+  it("unsubscribe removes the listener", () => {
+    const store = new SelectionStore();
+    const listener = vi.fn();
+    const unsub = store.subscribe(listener);
+
+    unsub();
+    store.select(toolCall("tc-1"));
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("supports multiple listeners", () => {
+    const store = new SelectionStore();
+    const a = vi.fn();
+    const b = vi.fn();
+    store.subscribe(a);
+    store.subscribe(b);
+
+    store.select(toolCall("tc-1"));
+    expect(a).toHaveBeenCalledOnce();
+    expect(b).toHaveBeenCalledOnce();
+  });
+});