test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269)

* test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245)

Establishes the unit-test runtime AGENTS.md mandates: a vitest "unit"
project alongside the existing storybook project, RTL + jest-dom +
happy-dom, a Mantine-aware render helper, and a 90%-line per-file
coverage gate enforced by CI. Adds 66 test files covering all 62
components under elements/groups/screens/views, plus core/mcp and
clients/web/src/utils. Total: 577 tests, 98.7% line coverage globally.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(coverage): address PR #1269 review feedback

- AGENTS.md: correct coverage gate description (lines ≥ 90, statements ≥ 85,
  functions ≥ 80, branches ≥ 50) with rationale for the relaxed branch
  threshold
- InspectorView.test.tsx: document what the Math.random() mock values
  (0.1 / 0.99) control vs. STUB_SUCCESS_RATE in InspectorView.tsx
- vite.config.ts / tsconfig.test.json: drop unused `globals: true` and the
  `vitest/globals` type now that every test file imports describe/it/expect/vi
  explicitly; manual `afterEach(cleanup)` in setup.ts remains required because
  testing-library auto-cleanup relies on globalThis.afterEach

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/TaskCard/TaskCard.test.tsx

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { Task } from "@modelcontextprotocol/sdk/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { TaskCard } from "./TaskCard";
+
+const workingTask: Task = {
+  taskId: "task-working-1",
+  status: "working",
+  ttl: 300000,
+  createdAt: "2026-03-29T20:18:20Z",
+  lastUpdatedAt: "2026-03-29T20:18:22Z",
+  statusMessage: "Synthesizing findings...",
+};
+
+const inputRequiredTask: Task = {
+  taskId: "task-input-1",
+  status: "input_required",
+  ttl: 300000,
+  createdAt: "2026-03-29T20:17:55Z",
+  lastUpdatedAt: "2026-03-29T20:17:55Z",
+  statusMessage: "Waiting for confirmation",
+};
+
+const completedTask: Task = {
+  taskId: "task-complete-1",
+  status: "completed",
+  ttl: null,
+  createdAt: "2026-03-29T20:16:47Z",
+  lastUpdatedAt: "2026-03-29T20:16:51Z",
+  statusMessage: "Report generated successfully",
+};
+
+const cancelledTask: Task = {
+  taskId: "task-cancel-1",
+  status: "cancelled",
+  ttl: 300000,
+  createdAt: "2026-03-29T20:18:15Z",
+  lastUpdatedAt: "2026-03-29T20:18:18Z",
+};
+
+describe("TaskCard", () => {
+  it("renders the task id, status, and details", () => {
+    renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={false} onCancel={vi.fn()} />,
+    );
+    expect(screen.getByText("ID: task-working-1")).toBeInTheDocument();
+    expect(screen.getByText("working")).toBeInTheDocument();
+    expect(screen.getByText("2026-03-29T20:18:20Z")).toBeInTheDocument();
+    expect(screen.getByText("2026-03-29T20:18:22Z")).toBeInTheDocument();
+    expect(screen.getByText("300000ms")).toBeInTheDocument();
+  });
+
+  it("renders the Cancel Task button when status is working", () => {
+    renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={false} onCancel={vi.fn()} />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Cancel Task" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the Cancel Task button when status is input_required", () => {
+    renderWithMantine(
+      <TaskCard
+        task={inputRequiredTask}
+        isListExpanded={false}
+        onCancel={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Cancel Task" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("input required")).toBeInTheDocument();
+  });
+
+  it("does not render Cancel Task button for completed tasks", () => {
+    renderWithMantine(
+      <TaskCard
+        task={completedTask}
+        isListExpanded={false}
+        onCancel={vi.fn()}
+      />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Cancel Task" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("completed")).toBeInTheDocument();
+  });
+
+  it("invokes onCancel when Cancel Task is clicked", async () => {
+    const user = userEvent.setup();
+    const onCancel = vi.fn();
+    renderWithMantine(
+      <TaskCard
+        task={workingTask}
+        isListExpanded={false}
+        onCancel={onCancel}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel Task" }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the status message when no progress is provided", () => {
+    renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={false} onCancel={vi.fn()} />,
+    );
+    expect(screen.getByText("Synthesizing findings...")).toBeInTheDocument();
+  });
+
+  it("renders the progress display when active and progress is provided", () => {
+    renderWithMantine(
+      <TaskCard
+        task={workingTask}
+        progress={{ progress: 5, total: 10, message: "Half-way" }}
+        isListExpanded={false}
+        onCancel={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("Half-way")).toBeInTheDocument();
+    expect(screen.getByText("50%")).toBeInTheDocument();
+    // status message should NOT show when progress is shown
+    expect(
+      screen.queryByText("Synthesizing findings..."),
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not render TTL row when ttl is null", () => {
+    renderWithMantine(
+      <TaskCard
+        task={completedTask}
+        isListExpanded={false}
+        onCancel={vi.fn()}
+      />,
+    );
+    expect(screen.queryByText("TTL")).not.toBeInTheDocument();
+  });
+
+  it("does not render status message section when statusMessage is undefined", () => {
+    renderWithMantine(
+      <TaskCard
+        task={cancelledTask}
+        isListExpanded={false}
+        onCancel={vi.fn()}
+      />,
+    );
+    // Cancelled, no progress, no statusMessage — neither block renders.
+    expect(screen.getByText("cancelled")).toBeInTheDocument();
+  });
+
+  it("toggles between Expand and Collapse when the toggle button is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={false} onCancel={vi.fn()} />,
+    );
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Expand" }));
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("starts expanded when isListExpanded is true and shows the full task object section", () => {
+    renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={true} onCancel={vi.fn()} />,
+    );
+    expect(screen.getByText("Full Task Object")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("syncs local expanded state when isListExpanded prop changes", () => {
+    const { rerender } = renderWithMantine(
+      <TaskCard task={workingTask} isListExpanded={false} onCancel={vi.fn()} />,
+    );
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    rerender(
+      <TaskCard task={workingTask} isListExpanded={true} onCancel={vi.fn()} />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+});