feat(web): migrate dashboard to WidgetGrid with layout persistence (#497)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(authenticated)/page.test.tsx

@@ -1,112 +1,154 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, beforeAll } from "vitest";
+import { render, screen, waitFor, act } from "@testing-library/react";
 import DashboardPage from "./page";
-import { fetchDashboardSummary } from "@/lib/api/dashboard";
+import * as layoutsApi from "@/lib/api/layouts";
+import type { UserLayout, WidgetPlacement } from "@mosaic/shared";
 
-// Mock Phase 3 dashboard widgets
-vi.mock("@/components/dashboard/DashboardMetrics", () => ({
-  DashboardMetrics: (): React.JSX.Element => (
-    <div data-testid="dashboard-metrics">Dashboard Metrics</div>
+// ResizeObserver is not available in jsdom
+beforeAll((): void => {
+  global.ResizeObserver = vi.fn().mockImplementation(() => ({
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }));
+});
+
+// Mock WidgetGrid to avoid react-grid-layout dependency in tests
+vi.mock("@/components/widgets/WidgetGrid", () => ({
+  WidgetGrid: ({
+    layout,
+    isEditing,
+  }: {
+    layout: WidgetPlacement[];
+    isEditing?: boolean;
+  }): React.JSX.Element => (
+    <div data-testid="widget-grid" data-editing={isEditing}>
+      {layout.map((item) => (
+        <div key={item.i} data-testid={`widget-${item.i}`}>
+          {item.i}
+        </div>
+      ))}
+    </div>
   ),
 }));
 
-vi.mock("@/components/dashboard/OrchestratorSessions", () => ({
-  OrchestratorSessions: (): React.JSX.Element => (
-    <div data-testid="orchestrator-sessions">Orchestrator Sessions</div>
-  ),
-}));
-
-vi.mock("@/components/dashboard/QuickActions", () => ({
-  QuickActions: (): React.JSX.Element => <div data-testid="quick-actions">Quick Actions</div>,
-}));
-
-vi.mock("@/components/dashboard/ActivityFeed", () => ({
-  ActivityFeed: (): React.JSX.Element => <div data-testid="activity-feed">Activity Feed</div>,
-}));
-
-vi.mock("@/components/dashboard/TokenBudget", () => ({
-  TokenBudget: (): React.JSX.Element => <div data-testid="token-budget">Token Budget</div>,
-}));
-
-// Mock hooks and API calls
+// Mock hooks
 vi.mock("@/lib/hooks", () => ({
   useWorkspaceId: (): string | null => "ws-test-123",
 }));
 
-vi.mock("@/lib/api/dashboard", () => ({
-  fetchDashboardSummary: vi.fn().mockResolvedValue({
-    metrics: {
-      activeAgents: 5,
-      tasksCompleted: 42,
-      totalTasks: 100,
-      tasksInProgress: 10,
-      activeProjects: 3,
-      errorRate: 0.5,
-    },
-    recentActivity: [],
-    activeJobs: [],
-    tokenBudget: [],
-  }),
-}));
+// Mock layout API
+vi.mock("@/lib/api/layouts");
+
+const mockExistingLayout: UserLayout = {
+  id: "layout-1",
+  workspaceId: "ws-test-123",
+  userId: "user-1",
+  name: "Default",
+  isDefault: true,
+  layout: [
+    { i: "TasksWidget-default", x: 0, y: 0, w: 4, h: 2 },
+    { i: "CalendarWidget-default", x: 4, y: 0, w: 4, h: 2 },
+  ],
+  metadata: {},
+  createdAt: new Date("2026-01-01T00:00:00Z"),
+  updatedAt: new Date("2026-01-01T00:00:00Z"),
+};
 
 describe("DashboardPage", (): void => {
   beforeEach((): void => {
     vi.clearAllMocks();
-    vi.mocked(fetchDashboardSummary).mockResolvedValue({
-      metrics: {
-        activeAgents: 5,
-        tasksCompleted: 42,
-        totalTasks: 100,
-        tasksInProgress: 10,
-        activeProjects: 3,
-        errorRate: 0.5,
-      },
-      recentActivity: [],
-      activeJobs: [],
-      tokenBudget: [],
+  });
+
+  it("should render WidgetGrid with saved layout", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockResolvedValue(mockExistingLayout);
+
+    render(<DashboardPage />);
+
+    await waitFor((): void => {
+      expect(screen.getByTestId("widget-grid")).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("widget-TasksWidget-default")).toBeInTheDocument();
+    expect(screen.getByTestId("widget-CalendarWidget-default")).toBeInTheDocument();
+  });
+
+  it("should create default layout when none exists", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockResolvedValue(null);
+    vi.mocked(layoutsApi.createLayout).mockResolvedValue({
+      ...mockExistingLayout,
+      layout: [{ i: "TasksWidget-default", x: 0, y: 0, w: 4, h: 2 }],
+    });
+
+    render(<DashboardPage />);
+
+    await waitFor((): void => {
+      expect(layoutsApi.createLayout).toHaveBeenCalledWith("ws-test-123", {
+        name: "Default",
+        isDefault: true,
+        layout: expect.arrayContaining([
+          expect.objectContaining({ i: "TasksWidget-default" }),
+        ]) as WidgetPlacement[],
+      });
     });
   });
 
-  it("should render the DashboardMetrics widget", async (): Promise<void> => {
+  it("should show loading spinner initially", (): void => {
+    // Never-resolving promise to test loading state
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockReturnValue(
+      // eslint-disable-next-line @typescript-eslint/no-empty-function -- intentionally never-resolving
+      new Promise(() => {})
+    );
+
     render(<DashboardPage />);
+
+    expect(screen.getByText("Loading dashboard...")).toBeInTheDocument();
+  });
+
+  it("should fall back to default layout on API error", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockRejectedValue(new Error("Network error"));
+
+    render(<DashboardPage />);
+
     await waitFor((): void => {
-      expect(screen.getByTestId("dashboard-metrics")).toBeInTheDocument();
+      expect(screen.getByTestId("widget-grid")).toBeInTheDocument();
     });
   });
 
-  it("should render the OrchestratorSessions widget", async (): Promise<void> => {
+  it("should render Dashboard heading", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockResolvedValue(mockExistingLayout);
+
     render(<DashboardPage />);
+
     await waitFor((): void => {
-      expect(screen.getByTestId("orchestrator-sessions")).toBeInTheDocument();
+      expect(screen.getByText("Dashboard")).toBeInTheDocument();
     });
   });
 
-  it("should render the QuickActions widget", async (): Promise<void> => {
+  it("should render Edit Layout button", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockResolvedValue(mockExistingLayout);
+
     render(<DashboardPage />);
+
     await waitFor((): void => {
-      expect(screen.getByTestId("quick-actions")).toBeInTheDocument();
+      expect(screen.getByText("Edit Layout")).toBeInTheDocument();
     });
   });
 
-  it("should render the ActivityFeed widget", async (): Promise<void> => {
-    render(<DashboardPage />);
-    await waitFor((): void => {
-      expect(screen.getByTestId("activity-feed")).toBeInTheDocument();
-    });
-  });
+  it("should toggle edit mode on button click", async (): Promise<void> => {
+    vi.mocked(layoutsApi.fetchDefaultLayout).mockResolvedValue(mockExistingLayout);
 
-  it("should render the TokenBudget widget", async (): Promise<void> => {
     render(<DashboardPage />);
-    await waitFor((): void => {
-      expect(screen.getByTestId("token-budget")).toBeInTheDocument();
-    });
-  });
 
-  it("should render error state when API fails", async (): Promise<void> => {
-    vi.mocked(fetchDashboardSummary).mockRejectedValueOnce(new Error("Network error"));
-    render(<DashboardPage />);
     await waitFor((): void => {
-      expect(screen.getByText("Failed to load dashboard data")).toBeInTheDocument();
+      expect(screen.getByText("Edit Layout")).toBeInTheDocument();
     });
+
+    act((): void => {
+      screen.getByText("Edit Layout").click();
+    });
+
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(screen.getByTestId("widget-grid").getAttribute("data-editing")).toBe("true");
   });
 });