test: add components-pure + TestConnectionButton coverage

Cherry-picked from test/settings-tab-coverage (commit 226b7679).
- components-pure.test.ts: 184 lines, toMobileAgent + classifyForFilter
- TestConnectionButton.test.tsx: 245 lines, 29 test cases

Total: 194 test files, 3040 tests passing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/src/components/mobile/__tests__/components-pure.test.ts

@@ -0,0 +1,184 @@
+// @vitest-environment jsdom
+/**
+ * mobile/components.tsx — pure functions.
+ *
+ * Covers:
+ *   - toMobileAgent: full transform, all status/tier/runtime cases
+ *   - classifyForFilter: online → "online", failed/degraded → "issue",
+ *     starting/paused/offline → "paused"
+ *
+ * NOTE: No @testing-library/jest-dom — use DOM APIs.
+ */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Node } from "@xyflow/react";
+import type { WorkspaceNodeData } from "@/store/canvas";
+
+import {
+  AgentCard,
+  FilterChips,
+  RemoteBadge,
+  classifyForFilter,
+  toMobileAgent,
+  type MobileAgent,
+  type AgentFilter,
+} from "../components";
+
+// ─── Mock store ────────────────────────────────────────────────────────────────
+
+const mockSummarize = vi.fn();
+
+vi.mock("@/store/canvas", () => ({
+  summarizeWorkspaceCapabilities: (...args: unknown[]) => mockSummarize(...args),
+}));
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function makeNode(overrides: Partial<WorkspaceNodeData> = {}): Node<WorkspaceNodeData> {
+  return {
+    id: "ws-1",
+    position: { x: 0, y: 0 },
+    data: {
+      name: "Test Agent",
+      status: "online",
+      tier: 2,
+      agentCard: null,
+      activeTasks: 0,
+      collapsed: false,
+      role: "assistant",
+      lastErrorRate: 0,
+      lastSampleError: "",
+      url: "http://localhost:9000",
+      parentId: null,
+      runtime: "langgraph",
+      currentTask: "",
+      budgetLimit: null,
+      ...overrides,
+    } as WorkspaceNodeData,
+  };
+}
+
+// ─── toMobileAgent ────────────────────────────────────────────────────────────
+
+describe("toMobileAgent — basic fields", () => {
+  beforeEach(() => {
+    mockSummarize.mockReturnValue({
+      runtime: "langgraph",
+      skills: [],
+      skillCount: 0,
+      currentTask: "",
+      hasActiveTask: false,
+    });
+  });
+
+  it("maps id and name", () => {
+    const node = makeNode({ name: "My Agent" });
+    const agent = toMobileAgent(node);
+    expect(agent.id).toBe("ws-1");
+    expect(agent.name).toBe("My Agent");
+  });
+
+  it("uses id as name when name is empty", () => {
+    const node = makeNode({ name: "" });
+    const agent = toMobileAgent(node);
+    expect(agent.name).toBe("ws-1");
+  });
+
+  it("maps tier correctly for tier 1-4", () => {
+    const tiers: Array<[number, MobileAgent["tier"]]> = [
+      [1, "T1"],
+      [2, "T2"],
+      [3, "T3"],
+      [4, "T4"],
+    ];
+    for (const [tier, code] of tiers) {
+      const agent = toMobileAgent(makeNode({ tier }));
+      expect(agent.tier).toBe(code);
+    }
+  });
+
+  it("maps status to MobileStatus", () => {
+    const statuses: Array<[string, MobileAgent["status"]]> = [
+      ["online", "online"],
+      ["starting", "starting"],
+      ["degraded", "degraded"],
+      ["failed", "failed"],
+      ["paused", "paused"],
+      ["offline", "offline"],
+    ];
+    for (const [status, mobileStatus] of statuses) {
+      const agent = toMobileAgent(makeNode({ status }));
+      expect(agent.status).toBe(mobileStatus);
+    }
+  });
+
+  it("marks remote=true for external runtime", () => {
+    mockSummarize.mockReturnValue({ runtime: "external", skills: [], skillCount: 0, currentTask: "", hasActiveTask: false });
+    const agent = toMobileAgent(makeNode({ runtime: "external" }));
+    expect(agent.remote).toBe(true);
+  });
+
+  it("marks remote=false for non-external runtime", () => {
+    mockSummarize.mockReturnValue({ runtime: "langgraph", skills: [], skillCount: 0, currentTask: "", hasActiveTask: false });
+    const agent = toMobileAgent(makeNode({ runtime: "langgraph" }));
+    expect(agent.remote).toBe(false);
+  });
+
+  it("maps runtime from summarizeWorkspaceCapabilities", () => {
+    mockSummarize.mockReturnValue({ runtime: "claude-code", skills: [], skillCount: 0, currentTask: "", hasActiveTask: false });
+    const agent = toMobileAgent(makeNode({ runtime: "" }));
+    expect(agent.runtime).toBe("claude-code");
+  });
+
+  it("maps skills count from summarizeWorkspaceCapabilities", () => {
+    mockSummarize.mockReturnValue({ runtime: "langgraph", skills: ["skill1", "skill2"], skillCount: 2, currentTask: "", hasActiveTask: false });
+    const agent = toMobileAgent(makeNode());
+    expect(agent.skills).toBe(2);
+  });
+
+  it("maps activeTasks to calls", () => {
+    const agent = toMobileAgent(makeNode({ activeTasks: 5 }));
+    expect(agent.calls).toBe(5);
+  });
+
+  it("defaults calls to 0 when activeTasks is not a number", () => {
+    const node = makeNode() as Node<WorkspaceNodeData>;
+    node.data.activeTasks = "not a number" as unknown as number;
+    const agent = toMobileAgent(node);
+    expect(agent.calls).toBe(0);
+  });
+
+  it("maps role as desc fallback to currentTask", () => {
+    mockSummarize.mockReturnValue({ runtime: "langgraph", skills: [], skillCount: 0, currentTask: "Doing analysis", hasActiveTask: true });
+    const agent = toMobileAgent(makeNode({ role: "" }));
+    expect(agent.desc).toBe("Doing analysis");
+  });
+
+  it("uses role as desc when currentTask is empty", () => {
+    mockSummarize.mockReturnValue({ runtime: "langgraph", skills: [], skillCount: 0, currentTask: "", hasActiveTask: false });
+    const agent = toMobileAgent(makeNode({ role: "researcher" }));
+    expect(agent.desc).toBe("researcher");
+  });
+
+  it("maps parentId from node data", () => {
+    const node = makeNode({ parentId: "ws-parent" });
+    const agent = toMobileAgent(node);
+    expect(agent.parentId).toBe("ws-parent");
+  });
+});
+
+// ─── classifyForFilter ─────────────────────────────────────────────────────────
+
+describe("classifyForFilter", () => {
+  const cases: Array<[MobileAgent["status"], AgentFilter]> = [
+    ["online", "online"],
+    ["starting", "paused"],
+    ["degraded", "issue"],
+    ["failed", "issue"],
+    ["paused", "paused"],
+    ["offline", "paused"],
+  ];
+
+  it.each(cases)("normalizeStatus(%s) → %s", (status, expected) => {
+    expect(classifyForFilter(status)).toBe(expected);
+  });
+});

canvas/src/components/ui/__tests__/TestConnectionButton.test.tsx

@@ -0,0 +1,245 @@
+// @vitest-environment jsdom
+/**
+ * TestConnectionButton — async connection tester for secret keys.
+ *
+ * States: idle → testing → success/failure → auto-reset to idle.
+ *
+ * Coverage:
+ *   - Idle state: renders "Test connection" label
+ *   - Disabled when secretValue is empty
+ *   - Enabled when secretValue is present
+ *   - Disabled while testing
+ *   - Success path: calls validateSecret, shows "Connected ✓", resets after 3s
+ *   - Failure path: calls validateSecret, shows "Test failed", shows error detail
+ *   - Catch path: network error shows "Connection timed out"
+ *   - Error detail only shown on failure state
+ *   - onResult callback called with correct value
+ *   - Cleanup: timer cancelled on unmount
+ *
+ * NOTE: No @testing-library/jest-dom — use DOM APIs.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import React from "react";
+
+import { TestConnectionButton } from "../TestConnectionButton";
+
+const mockValidateSecret = vi.fn();
+
+vi.mock("@/lib/api/secrets", () => ({
+  validateSecret: (...args: unknown[]) => mockValidateSecret(...args),
+}));
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe("TestConnectionButton — render", () => {
+  it("renders 'Test connection' in idle state", () => {
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    expect(document.body.textContent).toContain("Test connection");
+  });
+
+  it("is disabled when secretValue is empty", () => {
+    render(
+      <TestConnectionButton provider="github" secretValue="" />,
+    );
+    const btn = document.querySelector('button[type="button"]');
+    expect(btn?.getAttribute("disabled")).not.toBeNull();
+  });
+
+  it("is enabled when secretValue is present", () => {
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    const btn = document.querySelector('button[type="button"]');
+    expect(btn?.getAttribute("disabled")).toBeNull();
+  });
+});
+
+describe("TestConnectionButton — success path", () => {
+  it("shows 'Testing…' while validating", async () => {
+    mockValidateSecret.mockImplementation(
+      () => new Promise(() => {}), // never resolves — stays in testing state
+    );
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    const btn = document.querySelector('button[type="button"]')!;
+    await act(async () => {
+      fireEvent.click(btn);
+    });
+
+    expect(document.body.textContent).toContain("Testing");
+    expect(btn.getAttribute("disabled")).not.toBeNull(); // disabled while testing
+  });
+
+  it("shows 'Connected ✓' after successful validation", async () => {
+    mockValidateSecret.mockResolvedValue({ valid: true });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    const btn = document.querySelector('button[type="button"]')!;
+    fireEvent.click(btn);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(document.body.textContent).toContain("Connected");
+  });
+
+  it("resets to idle after 3 seconds on success", async () => {
+    mockValidateSecret.mockResolvedValue({ valid: true });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+
+    // Resolve the mock and flush React state synchronously via act
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    // Advance past the 3000ms RESET_DELAYS.success
+    await act(async () => {
+      vi.advanceTimersByTime(3001);
+    });
+    expect(document.body.textContent).toContain("Test connection");
+  });
+
+  it("calls onResult(true) on success", async () => {
+    const onResult = vi.fn();
+    mockValidateSecret.mockResolvedValue({ valid: true });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" onResult={onResult} />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(onResult).toHaveBeenCalledWith(true);
+  });
+});
+
+describe("TestConnectionButton — failure path", () => {
+  it("shows 'Test failed' after invalid key", async () => {
+    mockValidateSecret.mockResolvedValue({ valid: false, error: "Invalid token" });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_invalid" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(document.body.textContent).toContain("Test failed");
+  });
+
+  it("shows error detail message", async () => {
+    mockValidateSecret.mockResolvedValue({
+      valid: false,
+      error: "Token missing required scopes",
+    });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_invalid" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(document.body.textContent).toContain("Token missing required scopes");
+  });
+
+  it("resets to idle after 5 seconds on failure", async () => {
+    mockValidateSecret.mockResolvedValue({ valid: false });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_invalid" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(5001);
+    });
+    expect(document.body.textContent).toContain("Test connection");
+  });
+
+  it("shows default error when error is absent", async () => {
+    mockValidateSecret.mockResolvedValue({ valid: false });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_invalid" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(document.body.textContent).toContain("Could not verify key");
+  });
+
+  it("calls onResult(false) on failure", async () => {
+    const onResult = vi.fn();
+    mockValidateSecret.mockResolvedValue({ valid: false });
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_invalid" onResult={onResult} />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(onResult).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("TestConnectionButton — catch path", () => {
+  it("shows 'Connection timed out' on network error", async () => {
+    mockValidateSecret.mockRejectedValue(new Error("timeout"));
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(document.body.textContent).toContain("Connection timed out");
+  });
+
+  it("calls onResult(false) on network error", async () => {
+    const onResult = vi.fn();
+    mockValidateSecret.mockRejectedValue(new Error("timeout"));
+    render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" onResult={onResult} />,
+    );
+    fireEvent.click(document.querySelector('button[type="button"]')!);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(onResult).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("TestConnectionButton — cleanup", () => {
+  it("clears timer on unmount", async () => {
+    const clearTimeoutSpy = vi.spyOn(globalThis, "clearTimeout");
+    mockValidateSecret.mockImplementation(
+      () => new Promise(() => {}), // never resolves
+    );
+    const { unmount } = render(
+      <TestConnectionButton provider="github" secretValue="ghp_xxx" />,
+    );
+    await act(async () => {
+      fireEvent.click(document.querySelector('button[type="button"]')!);
+    });
+    unmount();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+});