@stigmer/react 1.0.3 → 2.0.0

package/src/workspace/WorkspaceEntryFiles.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { FileTreeNode, filterFileTree } from "../internal/file-tree";
+import { useWorkspaceFiles } from "./useWorkspaceFiles";
+import type { WorkspaceEntry } from "./useWorkspaceEntries";
+import type { WorkspaceFileLister } from "./WorkspaceFileLister";
+
+export interface WorkspaceEntryFilesProps {
+  /** The workspace entry whose files to browse. */
+  readonly entry: WorkspaceEntry;
+  /** Platform-injected file lister. */
+  readonly lister: WorkspaceFileLister;
+  /** Whether the file tree panel is currently expanded. */
+  readonly isExpanded: boolean;
+}
+
+/**
+ * Inline expandable file tree for a single workspace entry.
+ *
+ * When `isExpanded` is `true`, calls the platform-injected lister and
+ * renders a scrollable tree using the shared `FileTreeNode` primitive.
+ * Renders loading skeletons, error states, empty states, and a
+ * search toolbar for filtering the file tree by name.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function WorkspaceEntryFiles({
+  entry,
+  lister,
+  isExpanded,
+}: WorkspaceEntryFilesProps) {
+  const { tree, isLoading, error, refresh } = useWorkspaceFiles({
+    entry: isExpanded ? entry : null,
+    lister,
+  });
+
+  const [selectedPath, setSelectedPath] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredTree = useMemo(
+    () => filterFileTree(tree, searchQuery),
+    [tree, searchQuery],
+  );
+
+  const isFiltering = searchQuery.trim().length > 0;
+
+  const handleRefresh = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      refresh();
+    },
+    [refresh],
+  );
+
+  const handleClearSearch = useCallback(() => {
+    setSearchQuery("");
+  }, []);
+
+  if (!isExpanded) return null;
+
+  if (isLoading) {
+    return (
+      <div
+        className="mt-1 space-y-1.5 rounded-md border border-border bg-muted-faint px-2 py-2"
+        aria-busy="true"
+        aria-label={`Loading files for ${entry.name}`}
+      >
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="h-3.5 animate-pulse rounded bg-muted" style={{ width: `${50 + i * 10}%` }} />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="mt-1 rounded-md border border-border bg-muted-faint px-2.5 py-2 text-xs text-destructive">
+        Failed to list files: {error.message}
+        <button
+          type="button"
+          onClick={handleRefresh}
+          className="ml-2 underline hover:text-destructive transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (tree.length === 0) {
+    return (
+      <div className="mt-1 rounded-md border border-border bg-muted-faint px-2.5 py-2">
+        <p className="text-xs text-muted-foreground">
+          No files found.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-1 rounded-md border border-border bg-muted-faint overflow-hidden">
+      <div className="flex items-center gap-1.5 border-b border-border px-2 py-1">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search files..."
+          className={cn(
+            "min-w-0 flex-1 bg-transparent text-xs text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none",
+          )}
+          aria-label={`Filter files in ${entry.name}`}
+        />
+        {isFiltering && (
+          <button
+            type="button"
+            onClick={handleClearSearch}
+            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Clear search"
+          >
+            <ClearIcon />
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleRefresh}
+          className={cn(
+            "shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground transition-colors",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          )}
+          aria-label={`Refresh file listing for ${entry.name}`}
+        >
+          <RefreshIcon />
+        </button>
+      </div>
+      {filteredTree.length === 0 ? (
+        <div className="px-2.5 py-3 text-center text-xs text-muted-foreground">
+          No files matching &ldquo;{searchQuery.trim()}&rdquo;
+        </div>
+      ) : (
+        <nav
+          className="overflow-y-auto"
+          aria-label={`File tree for ${entry.name}`}
+        >
+          <ul className="py-0.5" role="tree">
+            {filteredTree.map((node) => (
+              <FileTreeNode
+                key={node.path}
+                node={node}
+                selectedPath={selectedPath}
+                onSelect={setSelectedPath}
+                depth={0}
+                enableDrag
+                maxInitialDepth={isFiltering ? Infinity : 0}
+              />
+            ))}
+          </ul>
+        </nav>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function SearchIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground">
+      <circle cx="5.25" cy="5.25" r="3.5" />
+      <path d="M7.75 7.75L10.5 10.5" />
+    </svg>
+  );
+}
+
+function ClearIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 3L9 9M9 3L3 9" />
+    </svg>
+  );
+}
+
+function RefreshIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M1.5 6a4.5 4.5 0 017.794-3.073M10.5 6a4.5 4.5 0 01-7.794 3.073" />
+      <path d="M9.5 1v2.5H7M2.5 11V8.5H5" />
+    </svg>
+  );
+}

package/src/workspace/WorkspaceFileLister.ts

@@ -0,0 +1,34 @@
+import type { WorkspaceEntry } from "./useWorkspaceEntries";
+
+/**
+ * A single file or directory entry returned by a {@link WorkspaceFileLister}.
+ *
+ * Matches the minimal contract consumed by `buildFileTree` — the tree
+ * builder uses `path` for hierarchy construction and the workspace UI
+ * uses `isDirectory` to annotate folder nodes.
+ */
+export interface WorkspaceFileEntry {
+  /** Relative path from the workspace root (e.g. "src/index.ts"). */
+  readonly path: string;
+  /** Whether this entry is a directory. */
+  readonly isDirectory: boolean;
+}
+
+/**
+ * Platform-injected callback that lists files in a workspace entry.
+ *
+ * The SDK calls this when a user expands a workspace entry in the
+ * inspector. The callback receives the entry and returns its file
+ * listing. The SDK never knows *how* the listing was obtained —
+ * that's the platform's concern (DD-004 capability injection).
+ *
+ * Implementations:
+ * - **Web:** GitHub Trees API via the OAuth token
+ * - **Desktop:** Tauri `readDir` with gitignore filtering (Phase 3)
+ *
+ * Returns `null` when listing is not supported for this entry type
+ * (e.g., a local-path entry on web, or a git entry without a token).
+ */
+export type WorkspaceFileLister = (
+  entry: WorkspaceEntry,
+) => Promise<WorkspaceFileEntry[] | null>;

package/src/workspace/__tests__/WorkspaceEditor-initialPanel.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { WorkspaceEditor } from "../WorkspaceEditor";
+import type { UseWorkspaceEntriesReturn } from "../useWorkspaceEntries";
+import type { UseGitHubConnectionReturn } from "../../github/useGitHubConnection";
+
+afterEach(cleanup);
+
+function createMockWorkspace(
+  entries: UseWorkspaceEntriesReturn["entries"] = [],
+): UseWorkspaceEntriesReturn {
+  return {
+    entries,
+    addGitRepo: vi.fn(),
+    addLocalPath: vi.fn(),
+    remove: vi.fn(),
+    clear: vi.fn(),
+    clearLocal: vi.fn(),
+    toInput: vi.fn().mockReturnValue([]),
+    hasEntries: entries.length > 0,
+  };
+}
+
+function createMockGitHubConnection(
+  overrides: Partial<UseGitHubConnectionReturn> = {},
+): UseGitHubConnectionReturn {
+  return {
+    isConnected: false,
+    isConnecting: false,
+    isLoading: false,
+    token: null,
+    user: null,
+    popupBlocked: false,
+    connect: vi.fn(),
+    disconnect: vi.fn(),
+    handleCallback: vi.fn(),
+    ...overrides,
+  } as unknown as UseGitHubConnectionReturn;
+}
+
+describe("WorkspaceEditor initialPanel", () => {
+  it("starts at action-list view by default (no initialPanel)", () => {
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace()}
+        enableGitHub
+        enableLocal={false}
+      />,
+    );
+
+    expect(screen.getByText("Connect GitHub")).toBeTruthy();
+    expect(screen.queryByText("Back")).toBeNull();
+  });
+
+  it("auto-drills into GitHub panel when initialPanel='github' and entries empty", () => {
+    const connection = createMockGitHubConnection({ isLoading: false });
+
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace()}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={connection}
+        initialPanel="github"
+      />,
+    );
+
+    expect(screen.getByText("Back")).toBeTruthy();
+    expect(
+      screen.getByText("Choose a GitHub repo to add to workspace"),
+    ).toBeTruthy();
+  });
+
+  it("shows connected state when initialPanel='github' and already connected", () => {
+    const connection = createMockGitHubConnection({
+      isConnected: true,
+      token: "gh_test_token",
+      user: { login: "testuser", name: "Test User", avatarUrl: "" },
+    });
+
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace()}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={connection}
+        initialPanel="github"
+      />,
+    );
+
+    expect(screen.getByText("Back")).toBeTruthy();
+    expect(screen.getByText("testuser")).toBeTruthy();
+  });
+
+  it("ignores initialPanel when entries exist", () => {
+    const entries = [
+      { id: "1", name: "my-repo", type: "git" as const, gitUrl: "https://github.com/org/repo" },
+    ];
+
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace(entries)}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={createMockGitHubConnection()}
+        initialPanel="github"
+      />,
+    );
+
+    expect(screen.queryByText("Back")).toBeNull();
+    expect(screen.getByText("my-repo")).toBeTruthy();
+    expect(screen.getByText("Connect GitHub")).toBeTruthy();
+  });
+
+  it("resets to list view when entries grow from 0 to >0", () => {
+    const workspace = createMockWorkspace();
+    const connection = createMockGitHubConnection();
+
+    const { rerender } = render(
+      <WorkspaceEditor
+        workspace={workspace}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={connection}
+        initialPanel="github"
+      />,
+    );
+
+    expect(screen.getByText("Back")).toBeTruthy();
+
+    const updatedWorkspace = createMockWorkspace([
+      { id: "1", name: "new-repo", type: "git" as const, gitUrl: "https://github.com/x/y" },
+    ]);
+
+    rerender(
+      <WorkspaceEditor
+        workspace={updatedWorkspace}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={connection}
+        initialPanel={null}
+      />,
+    );
+
+    expect(screen.queryByText("Back")).toBeNull();
+    expect(screen.getByText("new-repo")).toBeTruthy();
+  });
+
+  it("shows loading state when GitHub is checking connection with initialPanel='github'", () => {
+    const connection = createMockGitHubConnection({ isLoading: true });
+
+    render(
+      <WorkspaceEditor
+        workspace={createMockWorkspace()}
+        enableGitHub
+        enableLocal={false}
+        gitHubConnection={connection}
+        initialPanel="github"
+      />,
+    );
+
+    expect(screen.getByText("Back")).toBeTruthy();
+    expect(screen.getByText("Checking GitHub connection...")).toBeTruthy();
+  });
+});

package/src/workspace/__tests__/useWorkspaceFiles.test.ts

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act, waitFor, cleanup } from "@testing-library/react";
+import { useWorkspaceFiles } from "../useWorkspaceFiles";
+import type { WorkspaceEntry } from "../useWorkspaceEntries";
+import type { WorkspaceFileEntry, WorkspaceFileLister } from "../WorkspaceFileLister";
+
+// useWorkspaceFiles keeps a module-level cache keyed by entry.id that persists
+// across tests. Give each makeEntry() call a unique default id so tests stay
+// isolated; callers that need a stable id across rerenders capture the returned
+// entry once and reuse it.
+let entryIdCounter = 0;
+
+function makeEntry(overrides?: Partial<WorkspaceEntry>): WorkspaceEntry {
+  return {
+    id: `ws-${++entryIdCounter}`,
+    name: "acme/api",
+    type: "git",
+    gitUrl: "https://github.com/acme/api",
+    gitBranch: "main",
+    ...overrides,
+  };
+}
+
+const SAMPLE_FILES: WorkspaceFileEntry[] = [
+  { path: "src/index.ts", isDirectory: false },
+  { path: "src/utils/helper.ts", isDirectory: false },
+  { path: "README.md", isDirectory: false },
+];
+
+describe("useWorkspaceFiles", () => {
+  let lister: WorkspaceFileLister;
+
+  beforeEach(() => {
+    lister = vi.fn().mockResolvedValue(SAMPLE_FILES);
+  });
+
+  // Unmount rendered hooks between tests so pending async lister promises
+  // don't trigger React scheduler work after the jsdom environment is torn
+  // down (which surfaces as "window is not defined").
+  afterEach(cleanup);
+
+  it("returns empty tree and does not call lister when lister is undefined", () => {
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry: makeEntry(), lister: undefined }),
+    );
+    expect(result.current.tree).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("returns empty tree when entry is null", () => {
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry: null, lister }),
+    );
+    expect(result.current.tree).toEqual([]);
+    expect(lister).not.toHaveBeenCalled();
+  });
+
+  it("fetches and builds tree on mount", async () => {
+    const entry = makeEntry();
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry, lister }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(lister).toHaveBeenCalledWith(entry);
+    expect(result.current.tree.length).toBeGreaterThan(0);
+    expect(result.current.error).toBeNull();
+
+    const names = result.current.tree.map((n) => n.name);
+    expect(names).toContain("README.md");
+    expect(names).toContain("src");
+  });
+
+  it("surfaces errors from the lister", async () => {
+    const failing: WorkspaceFileLister = vi
+      .fn()
+      .mockRejectedValue(new Error("network down"));
+
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry: makeEntry(), lister: failing }),
+    );
+
+    await waitFor(() => expect(result.current.error).not.toBeNull());
+
+    expect(result.current.error!.message).toBe("network down");
+    expect(result.current.tree).toEqual([]);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("returns empty tree when lister returns null (not listable)", async () => {
+    const nullLister: WorkspaceFileLister = vi.fn().mockResolvedValue(null);
+
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry: makeEntry(), lister: nullLister }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.tree).toEqual([]);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("uses cached result when the same entry is re-requested", async () => {
+    const entry = makeEntry();
+    const { result, rerender } = renderHook(
+      ({ e }: { e: WorkspaceEntry | null }) =>
+        useWorkspaceFiles({ entry: e, lister }),
+      { initialProps: { e: entry as WorkspaceEntry | null } },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(lister).toHaveBeenCalledTimes(1);
+
+    // Switch away and back
+    rerender({ e: null });
+    rerender({ e: entry });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(lister).toHaveBeenCalledTimes(1);
+    expect(result.current.tree.length).toBeGreaterThan(0);
+  });
+
+  it("refresh re-fetches bypassing cache", async () => {
+    const entry = makeEntry();
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry, lister }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(lister).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(lister).toHaveBeenCalledTimes(2);
+  });
+
+  it("filters directory entries to avoid duplicate folder nodes", async () => {
+    const filesWithDirs: WorkspaceFileEntry[] = [
+      { path: "src", isDirectory: true },
+      { path: "src/index.ts", isDirectory: false },
+      { path: "src/utils", isDirectory: true },
+      { path: "src/utils/helper.ts", isDirectory: false },
+      { path: "README.md", isDirectory: false },
+    ];
+    const dirLister: WorkspaceFileLister = vi
+      .fn()
+      .mockResolvedValue(filesWithDirs);
+
+    const entry = makeEntry({ id: "ws-dir-filter" });
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry, lister: dirLister }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    const topNames = result.current.tree.map((n) => n.name);
+    expect(topNames).toEqual(["README.md", "src"]);
+
+    const srcNode = result.current.tree.find((n) => n.name === "src");
+    expect(srcNode?.children).toBeDefined();
+    const srcChildNames = srcNode!.children!.map((n) => n.name);
+    expect(srcChildNames).toEqual(["index.ts", "utils"]);
+
+    const utilsNode = srcNode!.children!.find((n) => n.name === "utils");
+    expect(utilsNode?.children).toHaveLength(1);
+    expect(utilsNode!.children![0].name).toBe("helper.ts");
+  });
+
+  it("handles non-Error throws from lister", async () => {
+    const stringThrower: WorkspaceFileLister = vi
+      .fn()
+      .mockRejectedValue("oops");
+
+    const { result } = renderHook(() =>
+      useWorkspaceFiles({ entry: makeEntry(), lister: stringThrower }),
+    );
+
+    await waitFor(() => expect(result.current.error).not.toBeNull());
+    expect(result.current.error!.message).toBe("oops");
+  });
+});