feat: add cell formatters and tables for boards, agents, and member invites

frontend/src/components/agents/AgentsTable.test.tsx

@@ -0,0 +1,145 @@
+import type React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { AgentRead, BoardRead } from "@/api/generated/model";
+import { AgentsTable } from "./AgentsTable";
+
+vi.mock("next/link", () => {
+  type LinkProps = React.PropsWithChildren<{
+    href: string | { pathname?: string };
+  }> &
+    Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+
+  return {
+    default: ({ href, children, ...props }: LinkProps) => (
+      <a href={typeof href === "string" ? href : "#"} {...props}>
+        {children}
+      </a>
+    ),
+  };
+});
+
+const buildAgent = (overrides: Partial<AgentRead> = {}): AgentRead => ({
+  id: "agent-1",
+  name: "Ava",
+  gateway_id: "gateway-1",
+  board_id: "board-1",
+  status: "online",
+  openclaw_session_id: "session-1234",
+  last_seen_at: "2026-01-01T00:00:00Z",
+  created_at: "2026-01-01T00:00:00Z",
+  updated_at: "2026-01-01T00:00:00Z",
+  ...overrides,
+});
+
+const buildBoard = (overrides: Partial<BoardRead> = {}): BoardRead => ({
+  id: "board-1",
+  name: "Ops Board",
+  slug: "ops-board",
+  organization_id: "org-1",
+  created_at: "2026-01-01T00:00:00Z",
+  updated_at: "2026-01-01T00:00:00Z",
+  ...overrides,
+});
+
+describe("AgentsTable", () => {
+  it("renders linked board name and default row actions", () => {
+    const onDelete = vi.fn();
+    const agent = buildAgent();
+    const board = buildBoard();
+
+    render(
+      <AgentsTable agents={[agent]} boards={[board]} onDelete={onDelete} />,
+    );
+
+    expect(
+      screen.getByRole("link", { name: /Ava ID agent-1/i }),
+    ).toHaveAttribute("href", "/agents/agent-1");
+    expect(screen.getByRole("link", { name: "Ops Board" })).toHaveAttribute(
+      "href",
+      "/boards/board-1",
+    );
+    expect(screen.getByRole("link", { name: "Edit" })).toHaveAttribute(
+      "href",
+      "/agents/agent-1/edit",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+    expect(onDelete).toHaveBeenCalledWith(agent);
+  });
+
+  it("hides row actions when showActions is false", () => {
+    render(
+      <AgentsTable
+        agents={[buildAgent()]}
+        boards={[buildBoard()]}
+        showActions={false}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("link", { name: "Edit" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Delete" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("supports hiddenColumns and columnOrder", () => {
+    render(
+      <AgentsTable
+        agents={[buildAgent()]}
+        boards={[buildBoard()]}
+        showActions={false}
+        hiddenColumns={["status", "openclaw_session_id"]}
+        columnOrder={["updated_at", "name", "board_id", "last_seen_at"]}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("columnheader", { name: "Status" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("columnheader", { name: "Session" }),
+    ).not.toBeInTheDocument();
+
+    const headers = screen
+      .getAllByRole("columnheader")
+      .map((header) => header.textContent?.replace(/[↑↓↕]/g, "").trim());
+    expect(headers.slice(0, 4)).toEqual([
+      "Updated",
+      "Agent",
+      "Board",
+      "Last seen",
+    ]);
+  });
+
+  it("supports disableSorting and preserves input order", () => {
+    const zulu = buildAgent({ id: "agent-z", name: "Zulu" });
+    const alpha = buildAgent({ id: "agent-a", name: "Alpha" });
+
+    const { rerender } = render(
+      <AgentsTable
+        agents={[zulu, alpha]}
+        boards={[buildBoard()]}
+        showActions={false}
+      />,
+    );
+
+    // Default behavior applies name sorting.
+    expect(screen.getAllByRole("row")[1]).toHaveTextContent("Alpha");
+
+    rerender(
+      <AgentsTable
+        agents={[zulu, alpha]}
+        boards={[buildBoard()]}
+        showActions={false}
+        disableSorting
+      />,
+    );
+
+    // disableSorting keeps incoming data order.
+    expect(screen.getAllByRole("row")[1]).toHaveTextContent("Zulu");
+  });
+});