feat(ui): sidebar lists workspaces with their sessions, Claude Desktop style
The sidebar's project tree becomes a flat workspace list (WorkspaceTree): one row per workspace in the stored order, each expanding to its sessions. A session that still has a live pane opens /workspace?lane=<id>&run=<runId>, which only attaches pane 0 to that tmux session; any other session opens its read-only transcript. Nothing in the sidebar starts or resumes a run.
This commit is contained in:
@@ -64,11 +64,11 @@ describe("Sidebar", () => {
|
||||
expect(screen.getByRole("button", { name: "Connection details" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the project tree when expanded and its icon in the rail", () => {
|
||||
it("renders the workspace list when expanded and its icon in the rail", () => {
|
||||
renderSidebar(true);
|
||||
expect(screen.getByTestId("project-tree")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("workspace-tree")).toBeInTheDocument();
|
||||
renderSidebar(true, true);
|
||||
expect(screen.getAllByRole("button", { name: "Projects" }).length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByRole("button", { name: "Workspaces" }).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should have correct navigation hrefs", () => {
|
||||
|
||||
+74
-93
@@ -1,10 +1,10 @@
|
||||
/**
|
||||
* @file ProjectTree.test.tsx
|
||||
* @description Tests for the sidebar's project → workspace tree: grouping by
|
||||
* repo with Folders last, the primary badge, untracked worktrees with Adopt and
|
||||
* the hidden count, collapse persistence, Alt+arrow reordering kept in
|
||||
* localStorage, double-click rename, the row menu's items by kind and tool, and
|
||||
* the status dot (`workspaceDot`).
|
||||
* @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, 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>
|
||||
*/
|
||||
|
||||
@@ -12,7 +12,7 @@ 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, Project } from "../../lib/types";
|
||||
import type { Lane, Session } from "../../lib/types";
|
||||
|
||||
function lane(id: number, cwd: string, extra: Partial<Lane> = {}): Lane {
|
||||
return {
|
||||
@@ -37,8 +37,10 @@ function lane(id: number, cwd: string, extra: Partial<Lane> = {}): Lane {
|
||||
} 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[] = [];
|
||||
let projects: Project[] = [];
|
||||
|
||||
vi.mock("../../lib/api", async (importOriginal) => {
|
||||
const actual = await importOriginal<Record<string, unknown>>();
|
||||
@@ -48,15 +50,20 @@ vi.mock("../../lib/api", async (importOriginal) => {
|
||||
lanes: {
|
||||
list: vi.fn(async () => ({ lanes, counts: {} })),
|
||||
update: vi.fn(async () => ({ lane: lanes[0] })),
|
||||
ensure: vi.fn(async () => ({ lane: lane(9, "/r/wt"), created: true })),
|
||||
action: vi.fn(async () => ({ ok: true })),
|
||||
routerList: vi.fn(async () => ({ routers: [] })),
|
||||
},
|
||||
projects: {
|
||||
list: vi.fn(async () => ({ projects })),
|
||||
refresh: vi.fn(async () => ({ projects })),
|
||||
sessions: {
|
||||
list: vi.fn(async () => ({
|
||||
sessions: [session("s-live", "Live one"), session("s-old", "Old one")],
|
||||
})),
|
||||
},
|
||||
run: {
|
||||
list: vi.fn(async () => ({
|
||||
items: [{ id: "agenthub-lane-1-2", laneId: 1, status: "running", sessionId: "s-live" }],
|
||||
})),
|
||||
cwds: vi.fn(async () => ({ items: [] })),
|
||||
},
|
||||
run: { cwds: vi.fn(async () => ({ items: [] })) },
|
||||
aiTools: {
|
||||
list: vi.fn(async () => ({ tools: [], default: "claude" })),
|
||||
iconUrl: () => "",
|
||||
@@ -67,7 +74,7 @@ vi.mock("../../lib/api", async (importOriginal) => {
|
||||
});
|
||||
|
||||
import { api } from "../../lib/api";
|
||||
import { ProjectTree } from "../ProjectTree";
|
||||
import { WorkspaceTree } from "../WorkspaceTree";
|
||||
import { workspaceDot } from "../lanes/WorkspaceRow";
|
||||
|
||||
function Where() {
|
||||
@@ -83,7 +90,7 @@ function renderTree(at = "/") {
|
||||
path="*"
|
||||
element={
|
||||
<>
|
||||
<ProjectTree />
|
||||
<WorkspaceTree />
|
||||
<Where />
|
||||
</>
|
||||
}
|
||||
@@ -93,122 +100,96 @@ function renderTree(at = "/") {
|
||||
);
|
||||
}
|
||||
|
||||
const rowIds = () => screen.getAllByTestId(/^workspace-row-\d+$/).map((el) => el.dataset.testid);
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
vi.clearAllMocks();
|
||||
lanes = [
|
||||
lane(1, "/r", { branch: "main" }),
|
||||
lane(1, "/r", { title: "Repo" }),
|
||||
lane(2, "/r/sub", { title: "Sub" }),
|
||||
lane(3, "/tmp/plain", { kind: "managed", tool: "codex" }),
|
||||
];
|
||||
projects = [
|
||||
{
|
||||
root: "/r",
|
||||
name: "r",
|
||||
workspaces: [1, 2],
|
||||
worktrees: [
|
||||
{ path: "/r", branch: "main", main: true, workspace_id: 1 },
|
||||
{
|
||||
path: "/r/.claude/worktrees/x",
|
||||
branch: "wf-x",
|
||||
main: false,
|
||||
workspace_id: null,
|
||||
source: "claude",
|
||||
},
|
||||
{ path: "/elsewhere", branch: "feat", main: false, workspace_id: null },
|
||||
],
|
||||
},
|
||||
{ root: null, name: "Folders", workspaces: [3], worktrees: [] },
|
||||
];
|
||||
});
|
||||
|
||||
describe("ProjectTree", () => {
|
||||
it("groups workspaces under their repo, Folders last, with the primary badge", async () => {
|
||||
describe("WorkspaceTree", () => {
|
||||
it("lists every workspace on one flat level, collapsed", async () => {
|
||||
renderTree();
|
||||
const repo = await screen.findByTestId("project-r");
|
||||
expect(within(repo).getByTestId("workspace-row-1")).toBeInTheDocument();
|
||||
expect(within(repo).getByTestId("workspace-row-2")).toBeInTheDocument();
|
||||
expect(within(repo).getByText("primary")).toBeInTheDocument();
|
||||
const folders = screen.getByTestId("project-folders");
|
||||
expect(within(folders).getByTestId("workspace-row-3")).toBeInTheDocument();
|
||||
expect(repo.compareDocumentPosition(folders) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
|
||||
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("lists untracked worktrees with Adopt, and adopting selects the new workspace", async () => {
|
||||
it("expands a workspace to its sessions and remembers it", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderTree();
|
||||
await screen.findByTestId("project-r");
|
||||
expect(screen.getAllByTestId("untracked-worktree")).toHaveLength(2);
|
||||
await user.click(screen.getAllByRole("button", { name: "Adopt" })[1]!);
|
||||
expect(api.lanes.ensure).toHaveBeenCalledWith({
|
||||
cwd: "/elsewhere",
|
||||
tool: "claude",
|
||||
exact: true,
|
||||
});
|
||||
await waitFor(() => expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=9"));
|
||||
});
|
||||
|
||||
it("hides a hidden source and says how many, and reveals them on click", async () => {
|
||||
const user = userEvent.setup();
|
||||
localStorage.setItem(
|
||||
"agenthub.sidebar.projects",
|
||||
JSON.stringify({ hideSources: ["claude"], showUntracked: true, collapsed: {} })
|
||||
);
|
||||
renderTree();
|
||||
await screen.findByTestId("project-r");
|
||||
expect(screen.getAllByTestId("untracked-worktree")).toHaveLength(1);
|
||||
await user.click(screen.getByText("1 hidden"));
|
||||
expect(screen.getAllByTestId("untracked-worktree")).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("remembers a collapsed project", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderTree();
|
||||
const repo = await screen.findByTestId("project-r");
|
||||
await user.click(within(repo).getByRole("button", { name: "r" }));
|
||||
expect(screen.queryByTestId("workspace-row-1")).toBeNull();
|
||||
expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).collapsed).toEqual({
|
||||
"/r": true,
|
||||
await user.click(await screen.findByTestId("workspace-toggle-1"));
|
||||
const list = await screen.findByTestId("workspace-sessions-1");
|
||||
expect(within(list).getByText("Live one")).toBeInTheDocument();
|
||||
expect(api.sessions.list).toHaveBeenCalledWith({ cwd: "/r", tool: "claude", limit: 20 });
|
||||
expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({
|
||||
"1": true,
|
||||
});
|
||||
});
|
||||
|
||||
it("selects a workspace by URL and marks the current one", async () => {
|
||||
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");
|
||||
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");
|
||||
const row = await screen.findByTestId("workspace-row-2");
|
||||
expect(within(row).getAllByRole("button")[0]).toHaveAttribute("aria-current", "true");
|
||||
await user.click(within(screen.getByTestId("workspace-row-1")).getAllByRole("button")[0]!);
|
||||
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 within a project with Alt+ArrowUp and keeps the order in localStorage", async () => {
|
||||
it("reorders with Alt+ArrowUp and keeps the order in localStorage", async () => {
|
||||
renderTree();
|
||||
const row2 = await screen.findByTestId("workspace-row-2");
|
||||
fireEvent.keyDown(within(row2).getAllByRole("button")[0]!, { key: "ArrowUp", altKey: true });
|
||||
const order = JSON.parse(localStorage.getItem("agenthub.workspace.laneOrder")!);
|
||||
expect(order.slice(0, 2)).toEqual([2, 1]);
|
||||
const ids = within(screen.getByTestId("project-r"))
|
||||
.getAllByTestId(/^workspace-row-/)
|
||||
.map((el) => el.dataset.testid);
|
||||
expect(ids).toEqual(["workspace-row-2", "workspace-row-1"]);
|
||||
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();
|
||||
const row = await screen.findByTestId("workspace-row-2");
|
||||
await user.dblClick(within(row).getAllByRole("button")[0]!);
|
||||
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(within(screen.getByTestId("workspace-row-2")).getAllByRole("button")[0]!);
|
||||
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("offers Reset only on a managed workspace and the readme run only on claude", async () => {
|
||||
const user = userEvent.setup();
|
||||
renderTree();
|
||||
Reference in New Issue
Block a user