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, the status dot, and the
 * user's own groups (menu, Alt+arrow past a group's edge, a folded group's
 * state dot, dragging a header to reorder, fold all).
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { describe, it, expect, vi, beforeEach } from "vitest";
import { act, 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[] = [];

// Archiving a live session asks through the themed confirm (App's host): yes.
vi.mock("../../lib/confirm", () => ({
  confirmDialog: vi.fn(async () => true),
  confirmDiscard: vi.fn(async () => true),
}));
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 })),
        removeSessionWorktree: vi.fn(async () => ({
          removed: true,
          branch: "x",
          branchKept: false,
        })),
        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: {} })),
        // A tab's session with no row yet (a bare tab): 404.
        get: vi.fn(async () => {
          throw Object.assign(new Error("not found"), { status: 404 });
        }),
      },
      run: {
        list: vi.fn(async () => ({
          items: [{ id: "agenthub-lane-1-2", laneId: 1, status: "running", sessionId: "s-live" }],
        })),
        cwds: vi.fn(async () => ({ items: [] })),
        kill: vi.fn(async () => ({ ok: true })),
      },
      aiTools: {
        list: vi.fn(async () => ({ tools: [], default: "claude" })),
        iconUrl: () => "",
      },
      aiProxies: { list: vi.fn(async () => ({ items: [] })) },
    },
  };
});

// The Add modal reports the workspace it made (id 2 here); the tree does the rest.
vi.mock("../lanes/AddLaneModal", () => ({
  AddLaneModal: ({ onAdded, onClose }: { onAdded: (l: Lane) => void; onClose: () => void }) => (
    <button
      type="button"
      data-testid="stub-add-lane"
      onClick={() => {
        onAdded(lane(2, "/r/sub"));
        onClose();
      }}
    />
  ),
}));

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,
      pinnedFirst: true,
      limit: 6,
    });
    expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({
      "1": true,
    });
  });

  it("shows six sessions and loads the rest on See all", async () => {
    const all = Array.from({ length: 9 }, (_, i) => session(`s-${i}`, `Session ${i}`));
    vi.mocked(api.sessions.list).mockImplementation(async (p) => ({
      sessions: all.slice(0, p?.limit),
      total: all.length,
      limit: p?.limit ?? 50,
      offset: 0,
    }));
    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).getAllByTestId(/^workspace-session-s-\d+$/)).toHaveLength(6);
    expect(screen.getByTestId("workspace-sessions-more-1")).toHaveTextContent("See all (3 more)");
    await user.click(screen.getByTestId("workspace-sessions-more-1"));
    expect(api.sessions.list).toHaveBeenLastCalledWith({
      lane: 1,
      archived: false,
      pinnedFirst: true,
      limit: 9,
    });
    await screen.findByText("Session 8");
    expect(screen.queryByTestId("workspace-sessions-more-1")).toBeNull();
    await user.click(screen.getByTestId("workspace-sessions-less-1"));
    expect(api.sessions.list).toHaveBeenLastCalledWith({
      lane: 1,
      archived: false,
      pinnedFirst: true,
      limit: 6,
    });
    expect(await screen.findByTestId("workspace-sessions-more-1")).toBeInTheDocument();
    expect(screen.queryByTestId("workspace-sessions-less-1")).toBeNull();
  });

  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("pins a session above the live ones, and unpins it from its row or menu", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async () => ({
      sessions: [
        session("s-live", "Live one"),
        { ...session("s-old", "Old one"), pinned_at: "2026-10-01T00:00:00Z" } as Session,
      ],
      total: 2,
      limit: 20,
      offset: 0,
    }));
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    const list = await screen.findByTestId("workspace-sessions-1");
    await screen.findByTestId("workspace-session-pinned-s-old");
    expect(
      within(list)
        .getAllByTestId(/^workspace-session-s-/)
        .map((el) => el.dataset.testid)
    ).toEqual(["workspace-session-s-old", "workspace-session-s-live"]);
    await user.click(screen.getByTestId("workspace-session-pin-s-old"));
    expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { pinned: false });
    await user.click(screen.getByTestId("workspace-session-pin-s-live"));
    expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { pinned: true });
    await user.pointer({
      keys: "[MouseRight]",
      target: screen.getByTestId("workspace-session-s-old"),
    });
    await user.click(within(screen.getByTestId("session-menu-s-old")).getByText("Unpin"));
    expect(api.sessions.patch).toHaveBeenLastCalledWith("s-old", { pinned: false });
  });

  it("right-click on a session opens its menu: split, rename, archive, close its tab", async () => {
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    const right = (target: Element) => user.pointer({ keys: "[MouseRight]", target });

    await right(await screen.findByTestId("workspace-session-s-old"));
    let menu = screen.getByTestId("session-menu-s-old");
    // Ended: no pane to split or close.
    expect(within(menu).queryByText("Open in split")).toBeNull();
    expect(within(menu).queryByText("Close tab (stops and archives its session)")).toBeNull();
    await user.click(within(menu).getByText("Rename"));
    expect(screen.queryByTestId("session-menu-s-old")).toBeNull();
    expect(screen.getByTestId("workspace-session-rename-s-old")).toBeInTheDocument();
    await user.keyboard("{Escape}");

    await right(screen.getByTestId("workspace-session-s-live"));
    menu = screen.getByTestId("session-menu-s-live");
    await user.click(within(menu).getByText("Open in split"));
    expect(screen.getByTestId("where")).toHaveTextContent(
      "/workspace?lane=1&run=agenthub-lane-1-2"
    );

    await right(screen.getByTestId("workspace-session-s-live"));
    await user.click(within(screen.getByTestId("session-menu-s-live")).getByText("Archive"));
    expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });

    await right(screen.getByTestId("workspace-session-s-live"));
    await user.click(screen.getByTestId("session-menu-sleep"));
    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: false });

    await right(screen.getByTestId("workspace-session-s-live"));
    await user.click(
      within(screen.getByTestId("session-menu-s-live")).getByText(
        "Close tab (stops and archives its session)"
      )
    );
    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: true });
  });

  it("archiving a worktree session removes its worktree first, after asking", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async () => ({
      sessions: [
        { ...session("s-wt", "In a worktree"), cwd: "/r/.claude/worktrees/ah-1-x" } as Session,
      ],
      total: 1,
      limit: 20,
      offset: 0,
    }));
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    expect(await screen.findByTestId("workspace-session-worktree-s-wt")).toBeInTheDocument();
    await user.click(screen.getByTestId("workspace-session-archive-s-wt"));
    expect(api.sessions.patch).not.toHaveBeenCalled();
    expect(screen.getByRole("dialog")).toHaveTextContent(".claude/worktrees/ah-1-x");
    await user.click(screen.getByRole("button", { name: "Archive and remove" }));
    await waitFor(() =>
      expect(api.sessions.patch).toHaveBeenCalledWith("s-wt", { archived: true })
    );
    expect(api.lanes.removeSessionWorktree).toHaveBeenCalledWith(1, "s-wt");
  });

  it("keeps a worktree session when git refuses to remove its worktree", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async () => ({
      sessions: [
        { ...session("s-wt", "In a worktree"), cwd: "/r/.claude/worktrees/ah-1-x" } as Session,
      ],
      total: 1,
      limit: 20,
      offset: 0,
    }));
    vi.mocked(api.lanes.removeSessionWorktree).mockRejectedValueOnce(
      Object.assign(new Error("contains modified or untracked files"), { code: "EGIT" })
    );
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    await user.click(await screen.findByTestId("workspace-session-archive-s-wt"));
    await user.click(screen.getByRole("button", { name: "Archive and remove" }));
    expect(await screen.findByRole("alert")).toHaveTextContent("modified or untracked");
    expect(api.sessions.patch).not.toHaveBeenCalled();
  });

  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 conversation, 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");
    await user.click(screen.getByTestId("workspace-session-s-old"));
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&session=s-old");
    expect(api.lanes.action).not.toHaveBeenCalled();
  });

  it("lists live sessions above ended ones, even an ended one active more recently", async () => {
    vi.mocked(api.sessions.list).mockImplementation(async () => ({
      sessions: [session("s-old", "Old one"), session("s-live", "Live one")],
      total: 2,
      limit: 20,
      offset: 0,
    }));
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    await waitFor(() =>
      expect(screen.getByTestId("workspace-session-s-live")).toHaveAttribute("data-live", "true")
    );
    const ids = screen.getAllByTestId(/^workspace-session-s-/).map((el) => el.dataset.testid);
    expect(ids).toEqual(["workspace-session-s-live", "workspace-session-s-old"]);
  });

  it("shows a live tab whose session has no row yet as a New session, and a shell as Terminal", async () => {
    vi.mocked(api.run.list).mockImplementation(
      async () =>
        ({
          items: [
            {
              id: "agenthub-lane-1-2",
              laneId: 1,
              status: "running",
              sessionId: "s-live",
              tool: "claude",
            },
            {
              id: "agenthub-lane-1",
              laneId: 1,
              status: "running",
              sessionId: "s-fresh",
              tool: "claude",
            },
            {
              id: "agenthub-lane-1-3",
              laneId: 1,
              status: "running",
              sessionId: null,
              tool: "shell",
            },
          ],
        }) as never
    );
    const user = userEvent.setup();
    renderTree();
    await user.click(await screen.findByTestId("workspace-toggle-1"));
    const fresh = await screen.findByTestId("workspace-session-new-agenthub-lane-1");
    expect(fresh).toHaveTextContent("New session");
    expect(screen.getByTestId("workspace-session-new-agenthub-lane-1-3")).toHaveTextContent(
      "Terminal"
    );
    expect(screen.queryByTestId("workspace-session-new-agenthub-lane-1-2")).toBeNull();
    await user.click(fresh);
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&run=agenthub-lane-1");
  });

  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");
    // Lane 1 has a live tab: its row still opens the home.
    await waitFor(() => expect(api.run.list).toHaveBeenCalled());
    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();
    await user.click(screen.getByTestId("workspace-open-2"));
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=2");
  });

  it("opens a workspace's home even while it has live tabs", async () => {
    vi.mocked(api.run.list).mockImplementation(async () => ({ items: [] }) as never);
    localStorage.setItem(
      "agenthub.workspace.paneLayout",
      JSON.stringify({
        1: {
          root: {
            type: "split",
            dir: "row",
            ratio: 0.5,
            a: { type: "pane", slot: 0 },
            b: { type: "pane", slot: 2 },
          },
          focus: 2,
        },
      })
    );
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-open-1");
    // The Workspace page's poll lands: two live tabs on lane 1.
    act(() => {
      window.dispatchEvent(
        new CustomEvent("agenthub:live-runs", {
          detail: [
            { id: "agenthub-lane-1", laneId: 1, slot: 0, status: "running", tool: "claude" },
            { id: "agenthub-lane-1-2", laneId: 1, slot: 2, status: "running", tool: "claude" },
          ],
        })
      );
    });
    await user.click(screen.getByTestId("workspace-open-1"));
    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1");
  });

  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", 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("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();
  });

  it("groups workspaces under named, foldable headers, ungrouped last", async () => {
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-row-1");
    // No group yet: no headers at all.
    expect(screen.queryByTestId("workspace-group-none")).toBeNull();

    // A new group from the row menu holds that workspace and asks for a name.
    await user.click(screen.getByTestId("workspace-menu-3"));
    await user.click(screen.getByTestId("workspace-move-group-new"));
    const name = await screen.findByRole("textbox", { name: "Group name" });
    await user.clear(name);
    await user.type(name, "Backend{Enter}");
    const stored = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);
    expect(stored.groups).toEqual([expect.objectContaining({ name: "Backend" })]);
    const gid = stored.groups[0].id as string;
    expect(stored.of).toEqual({ 3: gid });
    await waitFor(() =>
      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
    );
    expect(screen.getByTestId(`workspace-group-${gid}`)).toHaveTextContent("Backend1");
    expect(screen.getByTestId("workspace-group-none")).toHaveTextContent("Ungrouped2");

    // Another workspace joins it from its menu.
    await user.click(screen.getByTestId("workspace-menu-2"));
    await user.click(screen.getByTestId(`workspace-move-group-${gid}`));
    await waitFor(() =>
      expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-3", "workspace-row-1"])
    );

    // Folding hides its rows; the ungrouped one stays.
    await user.click(
      within(screen.getByTestId(`workspace-group-${gid}`)).getByRole("button", {
        expanded: true,
      })
    );
    expect(rowIds()).toEqual(["workspace-row-1"]);

    // Deleting the group only ungroups: every workspace is still listed.
    fireEvent.contextMenu(screen.getByTestId(`workspace-group-${gid}`));
    await user.click(screen.getByTestId("workspace-group-delete"));
    await waitFor(() => expect(rowIds()).toHaveLength(3));
    expect(screen.queryByTestId("workspace-group-none")).toBeNull();
    expect(api.lanes.update).not.toHaveBeenCalled();
  });

  it("shows a new, empty group to be named, above the ungrouped workspaces", async () => {
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-row-1");
    await user.click(screen.getByTestId("workspace-tree-new-group"));
    const name = await screen.findByRole("textbox", { name: "Group name" });
    await user.clear(name);
    await user.type(name, "Later{Enter}");
    const gid = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!).groups[0].id;
    const header = screen.getByTestId(`workspace-group-${gid}`);
    expect(header).toHaveTextContent("Later0");
    expect(
      header.compareDocumentPosition(screen.getByTestId("workspace-group-none")) &
        Node.DOCUMENT_POSITION_FOLLOWING
    ).toBeTruthy();
    expect(rowIds()).toHaveLength(3);
  });
});

describe("WorkspaceTree groups", () => {
  // Groups A = [1], B = [3]; 2 ungrouped. Stored order 1, 2, 3.
  const seed = (extra: { folded?: boolean } = {}) =>
    localStorage.setItem(
      "agenthub.workspace.groups",
      JSON.stringify({
        groups: [
          { id: "ga", name: "Alpha", ...extra },
          { id: "gb", name: "Beta" },
        ],
        of: { 1: "ga", 3: "gb" },
      })
    );
  const stored = () => JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);

  it("moves a workspace into the next group with Alt+arrow past its edge", async () => {
    seed();
    const user = userEvent.setup();
    renderTree();
    await waitFor(() =>
      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
    );
    // The last of Alpha, Alt+↓: the first of Beta.
    screen.getByTestId("workspace-open-1").focus();
    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
    expect(stored().of).toEqual({ 1: "gb", 3: "gb" });
    await waitFor(() =>
      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
    );
    expect(screen.getByTestId("workspace-group-gb")).toHaveTextContent("Beta2");
    // The last of Beta, Alt+↓: out into the ungrouped ones.
    screen.getByTestId("workspace-open-3").focus();
    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
    expect(stored().of).toEqual({ 1: "gb" });
    expect(api.lanes.update).not.toHaveBeenCalled();
  });

  it("shows a folded group's most urgent state and marks the open workspace", async () => {
    lanes[0] = lane(1, "/r", { title: "Repo", status: "running" });
    seed({ folded: true });
    renderTree("/workspace?lane=1");
    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-2"]));
    const state = screen.getByTestId("workspace-group-state-ga");
    expect(state).toHaveTextContent("running");
    expect(within(screen.getByTestId("workspace-group-ga")).getByText("Alpha")).toHaveClass(
      "text-accent"
    );
    // An open group shows its rows instead.
    expect(screen.queryByTestId("workspace-group-state-gb")).toBeNull();
  });

  it("reorders groups by dragging a header onto another, last onto Ungrouped", async () => {
    seed();
    renderTree();
    await screen.findByTestId("workspace-group-gb");
    const data = new Map<string, string>();
    const dataTransfer = {
      get types() {
        return [...data.keys()];
      },
      setData: (k: string, v: string) => data.set(k, v),
      getData: (k: string) => data.get(k) ?? "",
      dropEffect: "move",
      effectAllowed: "move",
    };
    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
    fireEvent.dragOver(screen.getByTestId("workspace-group-ga"), { dataTransfer });
    fireEvent.drop(screen.getByTestId("workspace-group-ga"), { dataTransfer });
    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["gb", "ga"]);
    await waitFor(() =>
      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
    );
    data.clear();
    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
    fireEvent.drop(screen.getByTestId("workspace-group-none"), { dataTransfer });
    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["ga", "gb"]);
    // A header drag never moves a workspace.
    expect(stored().of).toEqual({ 1: "ga", 3: "gb" });
  });

  it("puts a workspace added from a group's menu into that group", async () => {
    seed();
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-group-gb");
    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
    await user.click(screen.getByTestId("workspace-group-add"));
    await user.click(await screen.findByTestId("stub-add-lane"));
    expect(stored().of).toEqual({ 1: "ga", 2: "gb", 3: "gb" });
    // The header's own Add belongs to no group: what it adds stays where it is.
    act(() =>
      localStorage.setItem(
        "agenthub.workspace.groups",
        JSON.stringify({ ...stored(), of: { 1: "ga" } })
      )
    );
    await user.click(screen.getByTestId("workspace-tree-add"));
    await user.click(await screen.findByTestId("stub-add-lane"));
    expect(stored().of).toEqual({ 1: "ga" });
  });

  it("folds and unfolds every group from a header's menu", async () => {
    seed();
    const user = userEvent.setup();
    renderTree();
    await screen.findByTestId("workspace-group-ga");
    fireEvent.contextMenu(screen.getByTestId("workspace-group-ga"));
    await user.click(screen.getByTestId("workspace-group-fold-all"));
    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"]));
    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
    await user.click(screen.getByTestId("workspace-group-unfold-all"));
    await waitFor(() => expect(rowIds()).toHaveLength(3));
  });
});

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("border border-fg-muted");
  });
});