fix(web,ui): fix broken tests and remove legacy dashboard widgets (#457)

- Update Button.test.tsx assertions for CSS token-based Button component
- Rewrite page.test.tsx to test Phase 3 dashboard widgets
- Remove 4 unused legacy widgets: DomainOverview, RecentTasks,
  UpcomingEvents, QuickCapture (hardcoded light theme, pre-Phase 3)
- Remove orphaned QuickCaptureWidget test file

Tasks: MS-P1-001, MS-P1-002

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.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/components/dashboard/DomainOverviewWidget.tsx

@@ -1,65 +0,0 @@
-import type { Task } from "@mosaic/shared";
-import { TaskStatus, TaskPriority } from "@mosaic/shared";
-
-interface DomainOverviewWidgetProps {
-  tasks: Task[];
-  isLoading: boolean;
-}
-
-export function DomainOverviewWidget({
-  tasks,
-  isLoading,
-}: DomainOverviewWidgetProps): React.JSX.Element {
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-        <div className="flex justify-center items-center">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
-          <span className="ml-3 text-gray-600">Loading overview...</span>
-        </div>
-      </div>
-    );
-  }
-
-  const stats = {
-    total: tasks.length,
-    inProgress: tasks.filter((t) => t.status === TaskStatus.IN_PROGRESS).length,
-    completed: tasks.filter((t) => t.status === TaskStatus.COMPLETED).length,
-    highPriority: tasks.filter((t) => t.priority === TaskPriority.HIGH).length,
-  };
-
-  const StatCard = ({
-    label,
-    value,
-    color,
-  }: {
-    label: string;
-    value: number;
-    color: string;
-  }): React.JSX.Element => (
-    <div className={`p-4 rounded-lg bg-gradient-to-br ${color}`}>
-      <div className="text-3xl font-bold text-white mb-1">{value}</div>
-      <div className="text-sm text-white/90">{label}</div>
-    </div>
-  );
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">Domain Overview</h2>
-      <div className="grid grid-cols-2 gap-4">
-        <StatCard label="Total Tasks" value={stats.total} color="from-blue-500 to-blue-600" />
-        <StatCard
-          label="In Progress"
-          value={stats.inProgress}
-          color="from-green-500 to-green-600"
-        />
-        <StatCard label="Completed" value={stats.completed} color="from-purple-500 to-purple-600" />
-        <StatCard
-          label="High Priority"
-          value={stats.highPriority}
-          color="from-red-500 to-red-600"
-        />
-      </div>
-    </div>
-  );
-}

apps/web/src/components/dashboard/QuickCaptureWidget.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@mosaic/ui";
-import { useRouter } from "next/navigation";
-import { ComingSoon } from "@/components/ui/ComingSoon";
-
-/**
- * Check if we're in development mode (runtime check for testability)
- */
-function isDevelopment(): boolean {
-  return process.env.NODE_ENV === "development";
-}
-
-/**
- * Internal Quick Capture Widget implementation
- */
-function QuickCaptureWidgetInternal(): React.JSX.Element {
-  const [idea, setIdea] = useState("");
-  const router = useRouter();
-
-  const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>): void => {
-    e.preventDefault();
-    if (!idea.trim()) return;
-
-    // TODO: Implement quick capture API call
-    // For now, just show a success indicator
-    console.log("Quick capture:", idea);
-    setIdea("");
-  };
-
-  const goToTasks = (): void => {
-    router.push("/tasks");
-  };
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Capture</h2>
-      <p className="text-sm text-gray-600 mb-4">Quickly jot down ideas or brain dumps</p>
-      <form onSubmit={handleSubmit} className="space-y-3">
-        <textarea
-          value={idea}
-          onChange={(e) => {
-            setIdea(e.target.value);
-          }}
-          placeholder="What's on your mind?"
-          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
-          rows={3}
-        />
-        <div className="flex gap-2">
-          <Button type="submit" variant="primary" size="sm">
-            Save Note
-          </Button>
-          <Button type="button" variant="secondary" size="sm" onClick={goToTasks}>
-            Create Task
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-/**
- * Quick Capture Widget (Dashboard version)
- *
- * In production: Shows Coming Soon placeholder
- * In development: Full widget functionality
- */
-export function QuickCaptureWidget(): React.JSX.Element {
-  // In production, show Coming Soon placeholder
-  if (!isDevelopment()) {
-    return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-        <ComingSoon
-          feature="Quick Capture"
-          description="Quickly jot down ideas for later organization. This feature is currently under development."
-          className="!p-0 !min-h-0"
-        />
-      </div>
-    );
-  }
-
-  // In development, show full widget functionality
-  return <QuickCaptureWidgetInternal />;
-}

apps/web/src/components/dashboard/RecentTasksWidget.tsx

@@ -1,79 +0,0 @@
-import type { Task } from "@mosaic/shared";
-import { TaskPriority } from "@mosaic/shared";
-import { formatDate } from "@/lib/utils/date-format";
-import { TaskStatus } from "@mosaic/shared";
-import Link from "next/link";
-
-interface RecentTasksWidgetProps {
-  tasks: Task[];
-  isLoading: boolean;
-}
-
-const statusIcons: Record<TaskStatus, string> = {
-  [TaskStatus.NOT_STARTED]: "⚪",
-  [TaskStatus.IN_PROGRESS]: "🟢",
-  [TaskStatus.PAUSED]: "⏸️",
-  [TaskStatus.COMPLETED]: "✅",
-  [TaskStatus.ARCHIVED]: "💤",
-};
-
-export function RecentTasksWidget({ tasks, isLoading }: RecentTasksWidgetProps): React.JSX.Element {
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-        <div className="flex justify-center items-center">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
-          <span className="ml-3 text-gray-600">Loading tasks...</span>
-        </div>
-      </div>
-    );
-  }
-
-  const recentTasks = tasks.slice(0, 5);
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-gray-900">Recent Tasks</h2>
-        <Link href="/tasks" className="text-sm text-blue-600 hover:text-blue-700">
-          View all →
-        </Link>
-      </div>
-      {recentTasks.length === 0 ? (
-        <p className="text-sm text-gray-500 text-center py-4">No tasks yet</p>
-      ) : (
-        <ul className="space-y-3">
-          {recentTasks.map((task) => (
-            <li
-              key={task.id}
-              className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
-            >
-              <span className="text-lg flex-shrink-0" aria-label={`Status: ${task.status}`}>
-                {statusIcons[task.status]}
-              </span>
-              <div className="flex-1 min-w-0">
-                <h3 className="font-medium text-gray-900 text-sm truncate">{task.title}</h3>
-                <div className="flex items-center gap-2 mt-1">
-                  {task.priority !== TaskPriority.LOW && (
-                    <span
-                      className={`text-xs px-2 py-0.5 rounded-full ${
-                        task.priority === TaskPriority.HIGH
-                          ? "bg-red-100 text-red-700"
-                          : "bg-blue-100 text-blue-700"
-                      }`}
-                    >
-                      {task.priority}
-                    </span>
-                  )}
-                  {task.dueDate && (
-                    <span className="text-xs text-gray-500">{formatDate(task.dueDate)}</span>
-                  )}
-                </div>
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

apps/web/src/components/dashboard/UpcomingEventsWidget.tsx

@@ -1,64 +0,0 @@
-import type { Event } from "@mosaic/shared";
-import { formatTime, formatDate } from "@/lib/utils/date-format";
-import Link from "next/link";
-
-interface UpcomingEventsWidgetProps {
-  events: Event[];
-  isLoading: boolean;
-}
-
-export function UpcomingEventsWidget({
-  events,
-  isLoading,
-}: UpcomingEventsWidgetProps): React.JSX.Element {
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-        <div className="flex justify-center items-center">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
-          <span className="ml-3 text-gray-600">Loading events...</span>
-        </div>
-      </div>
-    );
-  }
-
-  const upcomingEvents = events.slice(0, 4);
-
-  return (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-gray-900">Upcoming Events</h2>
-        <Link href="/calendar" className="text-sm text-blue-600 hover:text-blue-700">
-          View calendar →
-        </Link>
-      </div>
-      {upcomingEvents.length === 0 ? (
-        <p className="text-sm text-gray-500 text-center py-4">No upcoming events</p>
-      ) : (
-        <div className="space-y-3">
-          {upcomingEvents.map((event) => (
-            <div
-              key={event.id}
-              className="flex items-start gap-3 p-3 rounded-lg border-l-4 border-blue-500 bg-gray-50"
-            >
-              <div className="flex-shrink-0 text-center min-w-[3.5rem]">
-                <div className="text-xs text-gray-500 uppercase font-semibold">
-                  {formatDate(event.startTime).split(",")[0]}
-                </div>
-                <div className="text-sm font-medium text-gray-900">
-                  {formatTime(event.startTime)}
-                </div>
-              </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="font-medium text-gray-900 text-sm truncate">{event.title}</h3>
-                {event.location && (
-                  <p className="text-xs text-gray-500 mt-0.5">📍 {event.location}</p>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

apps/web/src/components/dashboard/__tests__/QuickCaptureWidget.test.tsx

@@ -1,93 +0,0 @@
-/**
- * QuickCaptureWidget (Dashboard) Component Tests
- * Tests environment-based behavior
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { QuickCaptureWidget } from "../QuickCaptureWidget";
-
-// Mock next/navigation
-vi.mock("next/navigation", () => ({
-  useRouter: (): { push: () => void } => ({
-    push: vi.fn(),
-  }),
-}));
-
-describe("QuickCaptureWidget (Dashboard)", (): void => {
-  beforeEach((): void => {
-    vi.clearAllMocks();
-  });
-
-  afterEach((): void => {
-    vi.unstubAllEnvs();
-  });
-
-  describe("Development mode", (): void => {
-    beforeEach((): void => {
-      vi.stubEnv("NODE_ENV", "development");
-    });
-
-    it("should render the widget form in development", (): void => {
-      render(<QuickCaptureWidget />);
-
-      // Should show the header
-      expect(screen.getByText("Quick Capture")).toBeInTheDocument();
-      // Should show the textarea
-      expect(screen.getByRole("textbox")).toBeInTheDocument();
-      // Should show the Save Note button
-      expect(screen.getByRole("button", { name: /save note/i })).toBeInTheDocument();
-      // Should show the Create Task button
-      expect(screen.getByRole("button", { name: /create task/i })).toBeInTheDocument();
-      // Should NOT show Coming Soon badge
-      expect(screen.queryByText("Coming Soon")).not.toBeInTheDocument();
-    });
-
-    it("should have a placeholder for the textarea", (): void => {
-      render(<QuickCaptureWidget />);
-
-      const textarea = screen.getByRole("textbox");
-      expect(textarea).toHaveAttribute("placeholder", "What's on your mind?");
-    });
-  });
-
-  describe("Production mode", (): void => {
-    beforeEach((): void => {
-      vi.stubEnv("NODE_ENV", "production");
-    });
-
-    it("should show Coming Soon placeholder in production", (): void => {
-      render(<QuickCaptureWidget />);
-
-      // Should show Coming Soon badge
-      expect(screen.getByText("Coming Soon")).toBeInTheDocument();
-      // Should show feature name
-      expect(screen.getByText("Quick Capture")).toBeInTheDocument();
-      // Should NOT show the textarea
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-      // Should NOT show the buttons
-      expect(screen.queryByRole("button", { name: /save note/i })).not.toBeInTheDocument();
-      expect(screen.queryByRole("button", { name: /create task/i })).not.toBeInTheDocument();
-    });
-
-    it("should show description in Coming Soon placeholder", (): void => {
-      render(<QuickCaptureWidget />);
-
-      expect(screen.getByText(/jot down ideas for later organization/i)).toBeInTheDocument();
-    });
-  });
-
-  describe("Test mode (non-development)", (): void => {
-    beforeEach((): void => {
-      vi.stubEnv("NODE_ENV", "test");
-    });
-
-    it("should show Coming Soon placeholder in test mode", (): void => {
-      render(<QuickCaptureWidget />);
-
-      // Test mode is not development, so should show Coming Soon
-      expect(screen.getByText("Coming Soon")).toBeInTheDocument();
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-    });
-  });
-});

docs/TASKS.md

@@ -4,7 +4,7 @@
 
 | id        | status      | milestone | description                                                                                                                          | pr  | notes                                            |
 | --------- | ----------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------ |
-| MS-P1-001 | not-started | phase-1   | Fix broken test suites: Button.test.tsx (4 fails, old Tailwind classes) + page.test.tsx (5 fails, old widget refs)                   | —   | issue #457, est 15K                              |
-| MS-P1-002 | not-started | phase-1   | Remove legacy unused dashboard widgets: DomainOverviewWidget, RecentTasksWidget, UpcomingEventsWidget, QuickCaptureWidget            | —   | issue #457, est 5K                               |
+| MS-P1-001 | in-progress | phase-1   | Fix broken test suites: Button.test.tsx (4 fails, old Tailwind classes) + page.test.tsx (5 fails, old widget refs)                   | —   | issue #457, est 15K                              |
+| MS-P1-002 | in-progress | phase-1   | Remove legacy unused dashboard widgets: DomainOverviewWidget, RecentTasksWidget, UpcomingEventsWidget, QuickCaptureWidget            | —   | issue #457, est 5K                               |
 | MS-P1-003 | not-started | phase-1   | Visual + theme polish: audit current vs design reference, fix gaps, verify dark/light across all components, responsive verification | —   | issue #457, est 25K, depends MS-P1-001 MS-P1-002 |
 | MS-P1-004 | not-started | phase-1   | Phase verification: all quality gates pass, visual verification dark+light, responsive all breakpoints                               | —   | issue #457, est 5K, depends MS-P1-003            |

packages/ui/src/components/Button.test.tsx

@@ -16,19 +16,21 @@ describe("Button", () => {
     it("should apply primary variant styles by default", () => {
       render(<Button>Primary</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-blue-600");
+      expect(button.style.background).toBe("var(--ms-blue-500)");
     });
 
     it("should apply secondary variant styles", () => {
       render(<Button variant="secondary">Secondary</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-gray-200");
+      expect(button.style.background).toBe("transparent");
+      expect(button.style.border).toBe("1px solid var(--border)");
     });
 
     it("should apply danger variant styles", () => {
       render(<Button variant="danger">Delete</Button>);
       const button = screen.getByRole("button");
-      expect(button.className).toContain("bg-red-600");
+      expect(button.style.background).toBe("rgba(229, 72, 77, 0.12)");
+      expect(button.style.color).toBe("var(--danger)");
     });
   });
 
@@ -81,6 +83,6 @@ describe("Button", () => {
     render(<Button className="custom-class">Custom</Button>);
     const button = screen.getByRole("button");
     expect(button.className).toContain("custom-class");
-    expect(button.className).toContain("bg-blue-600");
+    expect(button.style.background).toBe("var(--ms-blue-500)");
   });
 });