Phase 1: Dashboard Polish + Theming (#457) (#458)

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,85 +1,55 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import DashboardPage from "./page";
 
-// Mock dashboard widgets
-vi.mock("@/components/dashboard/RecentTasksWidget", () => ({
-  RecentTasksWidget: ({
-    tasks,
-    isLoading,
-  }: {
-    tasks: unknown[];
-    isLoading: boolean;
-  }): React.JSX.Element => (
-    <div data-testid="recent-tasks">
-      {isLoading ? "Loading tasks" : `${String(tasks.length)} tasks`}
-    </div>
+// Mock Phase 3 dashboard widgets
+vi.mock("@/components/dashboard/DashboardMetrics", () => ({
+  DashboardMetrics: (): React.JSX.Element => (
+    <div data-testid="dashboard-metrics">Dashboard Metrics</div>
   ),
 }));
 
-vi.mock("@/components/dashboard/UpcomingEventsWidget", () => ({
-  UpcomingEventsWidget: ({
-    events,
-    isLoading,
-  }: {
-    events: unknown[];
-    isLoading: boolean;
-  }): React.JSX.Element => (
-    <div data-testid="upcoming-events">
-      {isLoading ? "Loading events" : `${String(events.length)} events`}
-    </div>
+vi.mock("@/components/dashboard/OrchestratorSessions", () => ({
+  OrchestratorSessions: (): React.JSX.Element => (
+    <div data-testid="orchestrator-sessions">Orchestrator Sessions</div>
   ),
 }));
 
-vi.mock("@/components/dashboard/QuickCaptureWidget", () => ({
-  QuickCaptureWidget: (): React.JSX.Element => <div data-testid="quick-capture">Quick Capture</div>,
+vi.mock("@/components/dashboard/QuickActions", () => ({
+  QuickActions: (): React.JSX.Element => <div data-testid="quick-actions">Quick Actions</div>,
 }));
 
-vi.mock("@/components/dashboard/DomainOverviewWidget", () => ({
-  DomainOverviewWidget: ({
-    tasks,
-    isLoading,
-  }: {
-    tasks: unknown[];
-    isLoading: boolean;
-  }): React.JSX.Element => (
-    <div data-testid="domain-overview">
-      {isLoading ? "Loading overview" : `${String(tasks.length)} tasks overview`}
-    </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>,
 }));
 
 describe("DashboardPage", (): void => {
-  it("should render the page title", (): void => {
+  it("should render the DashboardMetrics widget", (): void => {
     render(<DashboardPage />);
-    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Dashboard");
+    expect(screen.getByTestId("dashboard-metrics")).toBeInTheDocument();
   });
 
-  it("should show loading state initially", (): void => {
+  it("should render the OrchestratorSessions widget", (): void => {
     render(<DashboardPage />);
-    expect(screen.getByTestId("recent-tasks")).toHaveTextContent("Loading tasks");
-    expect(screen.getByTestId("upcoming-events")).toHaveTextContent("Loading events");
-    expect(screen.getByTestId("domain-overview")).toHaveTextContent("Loading overview");
+    expect(screen.getByTestId("orchestrator-sessions")).toBeInTheDocument();
   });
 
-  it("should render all widgets with data after loading", async (): Promise<void> => {
+  it("should render the QuickActions widget", (): void => {
     render(<DashboardPage />);
-    await waitFor((): void => {
-      expect(screen.getByTestId("recent-tasks")).toHaveTextContent("4 tasks");
-      expect(screen.getByTestId("upcoming-events")).toHaveTextContent("3 events");
-      expect(screen.getByTestId("domain-overview")).toHaveTextContent("4 tasks overview");
-      expect(screen.getByTestId("quick-capture")).toBeInTheDocument();
-    });
+    expect(screen.getByTestId("quick-actions")).toBeInTheDocument();
   });
 
-  it("should have proper layout structure", (): void => {
-    const { container } = render(<DashboardPage />);
-    const main = container.querySelector("main");
-    expect(main).toBeInTheDocument();
+  it("should render the ActivityFeed widget", (): void => {
+    render(<DashboardPage />);
+    expect(screen.getByTestId("activity-feed")).toBeInTheDocument();
   });
 
-  it("should render the welcome subtitle", (): void => {
+  it("should render the TokenBudget widget", (): void => {
     render(<DashboardPage />);
-    expect(screen.getByText(/Welcome back/)).toBeInTheDocument();
+    expect(screen.getByTestId("token-budget")).toBeInTheDocument();
   });
 });

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

@@ -11,13 +11,7 @@ export default function DashboardPage(): ReactElement {
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <DashboardMetrics />
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "1fr 320px",
-          gap: 16,
-        }}
-      >
+      <div className="dash-grid">
         <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
           <OrchestratorSessions />
           <QuickActions />