AgentHub/client/src/components/__tests__/WorkspaceTree.test.tsx

/**
 * @file WorkspaceTree.test.tsx
 * @description Tests for the sidebar's workspace list: one flat row per
 * workspace in the stored order, a row expanding to its sessions (remembered),
 * a live session opening its pane and an ended one its transcript, the
 * workspace's OWN sessions only, a session's state dot, rename and archive,
 * selection
 * by URL, Alt+arrow reordering kept in localStorage, double-click rename, the
 * search, the row menu's items by kind and tool, and the status dot.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor, within, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
import type { Lane, Session } from "../../lib/types";

function lane(id: number, cwd: string, extra: Partial<Lane> = {}): Lane {
  return {
    id,
    title: "",
    cwd,
    branch: null,
    kind: "adopted",
    tool: "claude",
    router_profile: null,
    source_repo: null,
    pipeline: "default",
    session_id: null,
    run_id: null,
    stage: "idle",
    stage_since: null,
    status: "idle",
    needs_action: null,
    liveness: "idle",
    pipeline_nodes: [],
    ...extra,
  } as unknown as Lane;
}

const session = (id: string, name: string) =>
  ({ id, name, cwd: "/r", status: "completed", started_at: "2026-09-30T10:00:00Z" }) as Session;

let lanes: Lane[] = [];

vi.mock("../../lib/api", async (importOriginal) => {
  const actual = await importOriginal<Record<string, unknown>>();
  return {
    ...actual,
    api: {
      lanes: {
        list: vi.fn(async () => ({ lanes, counts: {} })),
        update: vi.fn(async () => ({ lane: lanes[0] })),
        action: vi.fn(async () => ({ ok: true })),
        routerList: vi.fn(async () => ({ routers: [] })),
      },
      sessions: {
        list: vi.fn(async () => ({
          sessions: [session("s-live", "Live one"), session("s-old", "Old one")],
        })),
        patch: vi.fn(async () => ({ session: {} })),
      },
      run: {
        list: vi.fn(async () => ({
          items: [{ id: "agenthub-lane-1-2", laneId: 1, status: "running", sessionId: "s-live" }],
        })),
        cwds: vi.fn(async () => ({ items: [] })),
      },
      aiTools: {
        list: vi.fn(async () => ({ tools: [], default: "claude" })),
        iconUrl: () => "",
      },
      aiRouters: { list: vi.fn(async () => ({ routers: [] })) },
    },
  };
});

import { api } from "../../lib/api";
import { WorkspaceTree } from "../WorkspaceTree";
import { workspaceDot } from "../lanes/WorkspaceRow";

function Where() {
  const loc = useLocation();
  return <span data-testid="where">{loc.pathname + loc.search}</span>;
}

function renderTree(at = "/") {
  return render(
    <MemoryRouter initialEntries={[at]}>
      <Routes>
        <Route
          path="*"
          element={
            <>
              <WorkspaceTree />
              <Where />
            </>
          }
        />
      </Routes>
    </MemoryRouter>
  );
}

const rowIds = () => screen.getAllByTestId(/^workspace-row-\d+$/).map((el) => el.dataset.testid);

beforeEach(() => {
  localStorage.clear();
  vi.clearAllMocks();
  vi.mocked(api.sessions.list).mockImplementation(async () => ({
    sessions: [session("s-live", "Live one"), session("s-old", "Old one")],
    total: 2,
    limit: 20,
    offset: 0,
  }));
  lanes = [
    lane(1, "/r", { title: "Repo" }),
    lane(2, "/r/sub", { title: "Sub" }),
    lane(3, "/tmp/plain", { kind: "managed", tool: "codex" }),
  ];
});

describe("WorkspaceTree", () => {
  it("lists every workspace on one flat level, collapsed", async () => {
    renderTree();
    await screen.findByTestId("workspace-row-3");
    expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2", "workspace-row-3"]);
    expect(screen.getByTestId("workspace-row-3")).toHaveTextContent("plain");
    expect(screen.queryByTestId("workspace-sessions-1")).toBeNull();
    expect(api.sessions.list).not.toHaveBeenCalled();
  });

  it("expands a workspace to its sessions and remembers it", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    const list = await screen.findByTestId("workspace-sessions-1");
    expect(within(list).getByText("Live one")).toBeInTheDocument();
    // Its OWN sessions only — never the rest of its folder.
    expect(api.sessions.list).toHaveBeenCalledTimes(1);
    expect(api.sessions.list).toHaveBeenCalledWith({ lane: 1, archived: false, limit: 20 });
    expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({
      "1": true,
    });
  });

  it("renames a session on double-click + Enter, and archives one from its row", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    await user.dblClick(await screen.findByTestId("workspace-session-s-old"));
    const input = screen.getByTestId("workspace-session-rename-s-old");
    await user.clear(input);
    await user.type(input, "Better name{Enter}");
    expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { name: "Better name" });
    await user.click(screen.getByTestId("workspace-session-archive-s-live"));
    expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });
  });

  it("dots a session waiting for the user amber and a failed one red", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async () => ({
      sessions: [
        {
          ...session("s-wait", "Waiting"),
          status: "active",
          awaiting_input_since: "2026-09-30T10:00:00Z",
        } as Session,
        { ...session("s-bad", "Broke"), status: "error" } as Session,
      ],
      total: 2,
      limit: 20,
      offset: 0,
    }));
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    expect(await screen.findByTestId("workspace-session-dot-s-wait")).toHaveClass(
      "bg-status-warning"
    );
    expect(screen.getByTestId("workspace-session-dot-s-bad")).toHaveClass("bg-status-danger");
  });

  it("opens a live session's pane and an ended session's transcript, resuming nothing", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    const live = await screen.findByTestId("workspace-session-s-live");
    await waitFor(() => expect(live).toHaveAttribute("data-live", "true"));
    await user.click(live);
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&run=agenthub-lane-1-2");
    // Ctrl+click asks for a second pane.
    fireEvent.click(live, { ctrlKey: true });
    expect(screen.getByTestId("where").textContent).toBe(
      "/workspace?lane=1&run=agenthub-lane-1-2&pane=1"
    );
    await user.click(screen.getByTestId("workspace-session-s-old"));
    expect(screen.getByTestId("where").textContent).toBe("/sessions/s-old");
    expect(api.lanes.action).not.toHaveBeenCalled();
  });

  it("selects by URL, and a click selects and expands", async () => {
    const user = userEvent.setup();
    renderTree("/workspace?lane=2");
    expect(await screen.findByTestId("workspace-open-2")).toHaveAttribute("aria-current", "true");
    await user.click(screen.getByTestId("workspace-open-1"));
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1");
    expect(await screen.findByTestId("workspace-sessions-1")).toBeInTheDocument();
  });

  it("reorders with Alt+ArrowUp and keeps the order in localStorage", async () => {
    renderTree();
    fireEvent.keyDown(await screen.findByTestId("workspace-open-2"), {
      key: "ArrowUp",
      altKey: true,
    });
    expect(JSON.parse(localStorage.getItem("agenthub.workspace.laneOrder")!)).toEqual([2, 1, 3]);
    expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-1", "workspace-row-3"]);
  });

  it("renames on double-click + Enter, and Escape cancels without a call", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.dblClick(await screen.findByTestId("workspace-open-2"));
    const input = screen.getByTestId("workspace-rename-2");
    await user.clear(input);
    await user.type(input, "  Renamed  {Enter}");
    expect(api.lanes.update).toHaveBeenCalledWith(2, { title: "Renamed" });

    vi.mocked(api.lanes.update).mockClear();
    await user.dblClick(screen.getByTestId("workspace-open-2"));
    await user.type(screen.getByTestId("workspace-rename-2"), "x{Escape}");
    expect(api.lanes.update).not.toHaveBeenCalled();
  });

  it("filters workspaces by search", async () => {
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-row-1");
    await user.click(screen.getByRole("button", { name: "Search workspaces and sessions" }));
    await user.type(screen.getByRole("searchbox"), "plain");
    expect(rowIds()).toEqual(["workspace-row-3"]);
  });

  it("filters by tool, remembered, and offers the filter only with two tools", async () => {
    const user = userEvent.setup();
    const { unmount } = renderTree();
    await screen.findByTestId("workspace-row-1");
    await user.selectOptions(screen.getByLabelText("Filter by tool"), "codex");
    expect(rowIds()).toEqual(["workspace-row-3"]);
    expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).tool).toBe("codex");
    await user.selectOptions(screen.getByLabelText("Filter by tool"), "");
    expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2", "workspace-row-3"]);
    unmount();

    // One tool only: no filter, and a stale stored one is ignored.
    localStorage.setItem("agenthub.sidebar.projects", JSON.stringify({ tool: "codex" }));
    lanes = lanes.filter((l) => l.tool === "claude");
    renderTree();
    await screen.findByTestId("workspace-row-1");
    expect(screen.queryByLabelText("Filter by tool")).toBeNull();
    expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-2"]);
  });

  it("reorders within a tool filter without losing the hidden workspaces' places", async () => {
    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([1, 3, 2]));
    localStorage.setItem("agenthub.sidebar.projects", JSON.stringify({ tool: "claude" }));
    renderTree();
    fireEvent.keyDown(await screen.findByTestId("workspace-open-2"), {
      key: "ArrowUp",
      altKey: true,
    });
    expect(JSON.parse(localStorage.getItem("agenthub.workspace.laneOrder")!)).toEqual([2, 3, 1]);
    expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-1"]);
  });

  it("finds a workspace by one of its session names, showing only the matches", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async (params) => ({
      sessions:
        (params as { lane?: number }).lane === 2
          ? [session("s-x", "Fix login bug"), session("s-y", "Docs")]
          : [session("s-live", "Live one"), session("s-old", "Old one")],
      total: 2,
      limit: 20,
      offset: 0,
    }));
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-row-1");
    await user.click(screen.getByRole("button", { name: "Search workspaces and sessions" }));
    await user.type(screen.getByRole("searchbox"), "login");
    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"]));
    expect(screen.getByTestId("workspace-session-s-x")).toBeVisible();
    expect(screen.queryByTestId("workspace-session-s-y")).toBeNull();

    // A workspace whose NAME matches keeps all of its sessions.
    await user.clear(screen.getByRole("searchbox"));
    await user.type(screen.getByRole("searchbox"), "sub");
    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"]));
    expect(screen.getByTestId("workspace-session-s-y")).toBeInTheDocument();
  });

  it("offers Reset only on a managed workspace and the readme run only on claude", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-menu-1"));
    let menu = screen.getByTestId("workspace-row-menu-1");
    expect(within(menu).queryByText("Reset worktree…")).toBeNull();
    expect(within(menu).getByText("Create/update readme file")).toBeInTheDocument();
    expect(within(menu).getByText("Delete workspace…")).toBeInTheDocument();
    await user.keyboard("{Escape}");

    await user.click(screen.getByTestId("workspace-menu-3"));
    menu = screen.getByTestId("workspace-row-menu-3");
    expect(within(menu).getByText("Reset worktree…")).toBeInTheDocument();
    expect(within(menu).queryByText("Create/update readme file")).toBeNull();
  });
});

describe("workspaceDot", () => {
  it("maps needs-you, dead/error, running, active and idle", () => {
    expect(workspaceDot(lane(1, "/a", { needs_action: "x", status: "running" }))).toBe(
      "bg-status-warning"
    );
    expect(workspaceDot(lane(1, "/a", { liveness: "dead" }))).toBe("bg-status-danger");
    expect(workspaceDot(lane(1, "/a", { status: "error" }))).toBe("bg-status-danger");
    expect(workspaceDot(lane(1, "/a", { status: "running" }))).toContain("animate-pulse-slow");
    expect(workspaceDot(lane(1, "/a", { liveness: "active" }))).toBe("bg-status-success");
    expect(workspaceDot(lane(1, "/a"))).toBe("bg-surface-4");
  });
});