@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/setup-checklist.test.tsx

@@ -0,0 +1,274 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/api", () => ({
+  listInstances: vi.fn(),
+  getCreditBalance: vi.fn(),
+  listChannels: vi.fn(),
+}));
+
+vi.mock("@/lib/settings-api", () => ({
+  listCapabilities: vi.fn(),
+}));
+
+vi.mock("@/lib/marketplace-data", () => ({
+  listMarketplacePlugins: vi.fn().mockResolvedValue([
+    {
+      id: "discord",
+      name: "Discord",
+      description: "Discord channel plugin",
+      icon: "MessageCircle",
+      color: "#5865F2",
+      category: "channel",
+      capabilities: ["channel"],
+    },
+    {
+      id: "slack",
+      name: "Slack",
+      description: "Slack channel plugin",
+      icon: "Hash",
+      color: "#4A154B",
+      category: "channel",
+      capabilities: ["channel"],
+    },
+    {
+      id: "telegram",
+      name: "Telegram",
+      description: "Telegram channel plugin",
+      icon: "Send",
+      color: "#2AABEE",
+      category: "channel",
+      capabilities: ["channel"],
+    },
+  ]),
+}));
+
+// Mock next/link
+vi.mock("next/link", () => ({
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+import type { CapabilitySetting, ChannelInfo } from "@/lib/api";
+import { getCreditBalance, listChannels, listInstances } from "@/lib/api";
+import { listCapabilities } from "@/lib/settings-api";
+import { SetupChecklist } from "../components/onboarding/setup-checklist";
+
+const mockListInstances = listInstances as ReturnType<typeof vi.fn>;
+const mockGetCreditBalance = getCreditBalance as ReturnType<typeof vi.fn>;
+const mockListChannels = listChannels as ReturnType<typeof vi.fn>;
+const mockListCapabilities = listCapabilities as ReturnType<typeof vi.fn>;
+
+const mockInstance = {
+  id: "inst-001",
+  name: "my-bot",
+  status: "running" as const,
+  health: "healthy" as const,
+  uptime: 3600,
+  pluginCount: 1,
+  sessionCount: 2,
+  provider: "anthropic",
+  channels: ["discord"],
+  plugins: [{ id: "image-gen", name: "Image Gen", version: "1.0.0", enabled: true }],
+};
+
+function setupMocks({
+  channels = [] as ChannelInfo[],
+  capabilities = [] as CapabilitySetting[],
+  balance = 5.0,
+  instances = [mockInstance],
+} = {}) {
+  mockListInstances.mockResolvedValue(instances);
+  mockGetCreditBalance.mockResolvedValue({ balance, dailyBurn: 0, runway: null });
+  mockListChannels.mockResolvedValue(channels);
+  mockListCapabilities.mockResolvedValue(capabilities);
+}
+
+describe("SetupChecklist", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it("renders Discord channel as Ready when listChannels returns connected status", async () => {
+    setupMocks({
+      channels: [{ id: "ch-1", name: "discord-general", type: "discord", status: "connected" }],
+    });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Discord")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+  });
+
+  it("renders Discord channel as Set up when listChannels returns disconnected status", async () => {
+    setupMocks({
+      channels: [{ id: "ch-1", name: "discord-general", type: "discord", status: "disconnected" }],
+    });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Discord")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Set up →")).toBeInTheDocument();
+  });
+
+  it("renders superpower as Ready (Hosted) when capability mode is hosted", async () => {
+    setupMocks({
+      capabilities: [
+        {
+          capability: "image-gen",
+          mode: "hosted",
+          maskedKey: null,
+          keyStatus: null,
+          provider: null,
+        },
+      ],
+    });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("ImageGen")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Ready (Hosted)")).toBeInTheDocument();
+  });
+
+  it("renders superpower as Configure key when capability mode is byok with invalid key", async () => {
+    setupMocks({
+      capabilities: [
+        {
+          capability: "image-gen",
+          mode: "byok",
+          maskedKey: "r8_***",
+          keyStatus: "invalid",
+          provider: "Replicate",
+        },
+      ],
+    });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("ImageGen")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Configure key →")).toBeInTheDocument();
+  });
+
+  it("renders superpower as Ready (Hosted) when capability mode is byok with valid key", async () => {
+    setupMocks({
+      capabilities: [
+        {
+          capability: "image-gen",
+          mode: "byok",
+          maskedKey: "r8_***",
+          keyStatus: "valid",
+          provider: "Replicate",
+        },
+      ],
+    });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("ImageGen")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Ready (Hosted)")).toBeInTheDocument();
+  });
+
+  it("displays credit balance from API", async () => {
+    setupMocks({ balance: 4.5 });
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("$4.50")).toBeInTheDocument();
+    });
+  });
+
+  it("gracefully handles listChannels failure and still renders component", async () => {
+    mockListInstances.mockResolvedValue([mockInstance]);
+    mockGetCreditBalance.mockResolvedValue({ balance: 1.0, dailyBurn: 0, runway: null });
+    mockListChannels.mockRejectedValue(new Error("Network error"));
+    mockListCapabilities.mockResolvedValue([]);
+
+    render(<SetupChecklist />);
+
+    // Should still render without crashing, channel shows as not ready
+    await waitFor(() => {
+      expect(screen.getByText("Discord")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Set up →")).toBeInTheDocument();
+  });
+
+  it("gracefully handles listCapabilities failure and falls back to static readiness", async () => {
+    mockListInstances.mockResolvedValue([mockInstance]);
+    mockGetCreditBalance.mockResolvedValue({ balance: 1.0, dailyBurn: 0, runway: null });
+    mockListChannels.mockResolvedValue([]);
+    mockListCapabilities.mockRejectedValue(new Error("Network error"));
+
+    render(<SetupChecklist />);
+
+    // Component should still render
+    await waitFor(() => {
+      expect(screen.getByText("ImageGen")).toBeInTheDocument();
+    });
+  });
+
+  it("dismiss stores key in localStorage and hides component", async () => {
+    setupMocks();
+    const user = userEvent.setup();
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Dismiss")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Dismiss"));
+
+    expect(localStorage.getItem("platform-setup-checklist-dismissed")).toBe("true");
+    expect(screen.queryByText("Let's get your Platform running")).not.toBeInTheDocument();
+  });
+
+  it("returns null when no instances exist", async () => {
+    setupMocks({ instances: [] });
+
+    const { container } = render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  it("marks channel as connected if any instance has it connected", async () => {
+    mockListInstances.mockResolvedValue([
+      { ...mockInstance, id: "inst-001" },
+      { ...mockInstance, id: "inst-002" },
+    ]);
+    mockGetCreditBalance.mockResolvedValue({ balance: 0, dailyBurn: 0, runway: null });
+    mockListChannels.mockImplementation((botId: string) => {
+      if (botId === "inst-001") {
+        return Promise.resolve([
+          { id: "ch-1", name: "discord-general", type: "discord", status: "disconnected" },
+        ]);
+      }
+      return Promise.resolve([
+        { id: "ch-2", name: "discord-other", type: "discord", status: "connected" },
+      ]);
+    });
+    mockListCapabilities.mockResolvedValue([]);
+
+    render(<SetupChecklist />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Discord")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Ready")).toBeInTheDocument();
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,82 @@
+import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+
+// Default fetch mock: reject all API calls so components fall back to mock data immediately.
+// Individual tests can override with vi.stubGlobal("fetch", ...) as needed.
+vi.stubGlobal(
+  "fetch",
+  vi.fn().mockRejectedValue(new Error("Network request not allowed in tests")),
+);
+
+// Polyfill IntersectionObserver for framer-motion whileInView in test env
+class MockIntersectionObserver {
+  readonly root: Element | null = null;
+  readonly rootMargin: string = "";
+  readonly thresholds: ReadonlyArray<number> = [];
+  observe() {
+    /* no-op stub */
+  }
+  unobserve() {
+    /* no-op stub */
+  }
+  disconnect() {
+    /* no-op stub */
+  }
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === "undefined") {
+  globalThis.IntersectionObserver =
+    MockIntersectionObserver as unknown as typeof IntersectionObserver;
+}
+
+// Polyfill window.matchMedia for components that call it in useEffect (e.g. TerminalSequence).
+// Returns matches: true so animation components skip async sequences in tests.
+if (typeof window !== "undefined" && typeof window.matchMedia === "undefined") {
+  window.matchMedia = vi.fn().mockReturnValue({
+    matches: true,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  });
+}
+
+// Polyfill ResizeObserver for Radix UI components (e.g. Checkbox via @radix-ui/react-use-size).
+// jsdom does not provide ResizeObserver natively. Must be a class (constructor) not an arrow fn.
+class MockResizeObserver {
+  observe() {
+    /* no-op stub */
+  }
+  unobserve() {
+    /* no-op stub */
+  }
+  disconnect() {
+    /* no-op stub */
+  }
+}
+
+if (typeof globalThis.ResizeObserver === "undefined") {
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+}
+
+// Polyfill EventSource for SSE hooks (e.g. use-fleet-sse) in test env.
+// jsdom does not provide EventSource natively.
+class MockEventSource {
+  addEventListener() {
+    /* no-op stub */
+  }
+  removeEventListener() {
+    /* no-op stub */
+  }
+  close() {
+    /* no-op stub */
+  }
+  onmessage: ((e: MessageEvent) => void) | null = null;
+  onerror: ((e: Event) => void) | null = null;
+  onopen: ((e: Event) => void) | null = null;
+}
+
+if (typeof globalThis.EventSource === "undefined") {
+  globalThis.EventSource = MockEventSource as unknown as typeof EventSource;
+}

package/src/__tests__/smoke.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { LandingPage } from "../components/landing/landing-page";
+
+describe("Smoke test", () => {
+  it("renders the landing page with the tagline", () => {
+    render(<LandingPage />);
+    expect(screen.getByText("Shall we rule the universe?")).toBeInTheDocument();
+  });
+});

package/src/__tests__/snapshot-api.test.ts

@@ -0,0 +1,104 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockFetch = vi.fn();
+vi.stubGlobal("fetch", mockFetch);
+
+vi.mock("@/lib/api-config", () => ({
+  API_BASE_URL: "http://localhost:3001/api",
+  PLATFORM_BASE_URL: "http://localhost:3001",
+}));
+
+vi.mock("@/lib/fetch-utils", () => ({
+  handleUnauthorized: vi.fn(),
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpcVanilla: {},
+}));
+
+import { createSnapshot, deleteSnapshot, listSnapshots, restoreSnapshot } from "@/lib/api";
+
+describe("Snapshot API functions", () => {
+  beforeEach(() => {
+    mockFetch.mockReset();
+  });
+
+  it("listSnapshots calls GET /api/bots/:id/snapshots", async () => {
+    const snapshots = [
+      {
+        id: "snap-1",
+        instanceId: "bot-1",
+        name: null,
+        type: "nightly",
+        trigger: "scheduled",
+        sizeMb: 42,
+        createdAt: "2026-02-20T00:00:00Z",
+        expiresAt: null,
+      },
+    ];
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({ snapshots }),
+    });
+
+    const result = await listSnapshots("bot-1");
+    expect(result).toEqual(snapshots);
+    expect(mockFetch).toHaveBeenCalledWith(
+      "http://localhost:3001/api/bots/bot-1/snapshots",
+      expect.objectContaining({ method: "GET", credentials: "include" }),
+    );
+  });
+
+  it("createSnapshot calls POST /api/bots/:id/snapshots", async () => {
+    const snapshot = {
+      id: "snap-2",
+      instanceId: "bot-1",
+      name: "my backup",
+      type: "on-demand",
+      trigger: "manual",
+      sizeMb: 10,
+      createdAt: "2026-02-20T01:00:00Z",
+      expiresAt: null,
+    };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 201,
+      json: () => Promise.resolve({ snapshot, estimatedMonthlyCost: "$0.01/month" }),
+    });
+
+    const result = await createSnapshot("bot-1", "my backup");
+    expect(result.snapshot).toEqual(snapshot);
+    expect(mockFetch).toHaveBeenCalledWith(
+      "http://localhost:3001/api/bots/bot-1/snapshots",
+      expect.objectContaining({ method: "POST", credentials: "include" }),
+    );
+  });
+
+  it("restoreSnapshot calls POST /api/instances/:id/snapshots/:sid/restore", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve({ ok: true, restored: "snap-1" }),
+    });
+
+    await restoreSnapshot("bot-1", "snap-1");
+    expect(mockFetch).toHaveBeenCalledWith(
+      "http://localhost:3001/api/instances/bot-1/snapshots/snap-1/restore",
+      expect.objectContaining({ method: "POST", credentials: "include" }),
+    );
+  });
+
+  it("deleteSnapshot calls DELETE /api/bots/:id/snapshots/:sid", async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 204,
+    });
+
+    await deleteSnapshot("bot-1", "snap-1");
+    expect(mockFetch).toHaveBeenCalledWith(
+      "http://localhost:3001/api/bots/bot-1/snapshots/snap-1",
+      expect.objectContaining({ method: "DELETE", credentials: "include" }),
+    );
+  });
+});

package/src/__tests__/status-api.test.ts

@@ -0,0 +1,46 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { PlatformHealthResponse } from "../lib/api";
+
+const MOCK_HEALTH: PlatformHealthResponse = {
+  status: "healthy",
+  services: [
+    { name: "database", status: "healthy", latencyMs: 2 },
+    { name: "redis", status: "healthy", latencyMs: 1 },
+  ],
+  version: "1.0.0",
+  uptime: 86400,
+};
+
+describe("fetchPlatformHealth", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns health data on success", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(MOCK_HEALTH),
+      }),
+    );
+    const { fetchPlatformHealth } = await import("../lib/api");
+    const result = await fetchPlatformHealth();
+    expect(result).toEqual(MOCK_HEALTH);
+  });
+
+  it("returns null on network error", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new Error("Network error")));
+    const { fetchPlatformHealth } = await import("../lib/api");
+    const result = await fetchPlatformHealth();
+    expect(result).toBeNull();
+  });
+
+  it("returns null on non-200 response", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: false, status: 503 }));
+    const { fetchPlatformHealth } = await import("../lib/api");
+    const result = await fetchPlatformHealth();
+    expect(result).toBeNull();
+  });
+});

package/src/__tests__/status-badge.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { StatusBadge } from "../components/status-badge";
+
+describe("StatusBadge", () => {
+  it("renders Running status with green styling", () => {
+    render(<StatusBadge status="running" />);
+    const badge = screen.getByText("Running");
+    expect(badge).toBeInTheDocument();
+    expect(badge.className).toContain("text-emerald-500");
+  });
+
+  it("renders Stopped status with gray styling", () => {
+    render(<StatusBadge status="stopped" />);
+    const badge = screen.getByText("Stopped");
+    expect(badge).toBeInTheDocument();
+    expect(badge.className).toContain("text-zinc-400");
+  });
+
+  it("renders Degraded status with yellow styling", () => {
+    render(<StatusBadge status="degraded" />);
+    const badge = screen.getByText("Degraded");
+    expect(badge).toBeInTheDocument();
+    expect(badge.className).toContain("text-yellow-500");
+  });
+
+  it("renders Error status with red styling", () => {
+    render(<StatusBadge status="error" />);
+    const badge = screen.getByText("Error");
+    expect(badge).toBeInTheDocument();
+    expect(badge.className).toContain("text-red-500");
+  });
+});

package/src/__tests__/status-colors.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_STATUS_STYLE,
+  HEALTH_DOT_STYLES,
+  HEALTH_STATUS_STYLES,
+  INSTANCE_STATUS_STYLES,
+  PLUGIN_STATUS_STYLES,
+} from "../lib/status-colors";
+
+describe("INSTANCE_STATUS_STYLES", () => {
+  it("maps running to emerald classes", () => {
+    expect(INSTANCE_STATUS_STYLES.running).toContain("text-emerald-500");
+  });
+
+  it("maps stopped to zinc classes", () => {
+    expect(INSTANCE_STATUS_STYLES.stopped).toContain("text-zinc-400");
+  });
+
+  it("maps degraded to yellow classes", () => {
+    expect(INSTANCE_STATUS_STYLES.degraded).toContain("text-yellow-500");
+  });
+
+  it("maps error to red classes", () => {
+    expect(INSTANCE_STATUS_STYLES.error).toContain("text-red-500");
+  });
+
+  it("has exactly 4 entries", () => {
+    expect(Object.keys(INSTANCE_STATUS_STYLES)).toHaveLength(4);
+  });
+});
+
+describe("HEALTH_STATUS_STYLES", () => {
+  it("maps healthy to emerald classes", () => {
+    expect(HEALTH_STATUS_STYLES.healthy).toContain("text-emerald-500");
+  });
+
+  it("maps degraded to yellow classes", () => {
+    expect(HEALTH_STATUS_STYLES.degraded).toContain("text-yellow-500");
+  });
+
+  it("maps unhealthy to red classes", () => {
+    expect(HEALTH_STATUS_STYLES.unhealthy).toContain("text-red-500");
+  });
+
+  it("has exactly 3 entries", () => {
+    expect(Object.keys(HEALTH_STATUS_STYLES)).toHaveLength(3);
+  });
+});
+
+describe("HEALTH_DOT_STYLES", () => {
+  it("maps healthy to bg-emerald-500", () => {
+    expect(HEALTH_DOT_STYLES.healthy).toBe("bg-emerald-500");
+  });
+
+  it("maps degraded to bg-yellow-500", () => {
+    expect(HEALTH_DOT_STYLES.degraded).toBe("bg-yellow-500");
+  });
+
+  it("maps unhealthy to bg-red-500", () => {
+    expect(HEALTH_DOT_STYLES.unhealthy).toBe("bg-red-500");
+  });
+});
+
+describe("PLUGIN_STATUS_STYLES", () => {
+  it("maps active to emerald classes", () => {
+    expect(PLUGIN_STATUS_STYLES.active).toContain("text-emerald-500");
+  });
+
+  it("maps disabled to zinc classes", () => {
+    expect(PLUGIN_STATUS_STYLES.disabled).toContain("text-zinc-400");
+  });
+
+  it("returns undefined for unknown plugin status", () => {
+    expect(PLUGIN_STATUS_STYLES.nonexistent).toBeUndefined();
+  });
+});
+
+describe("DEFAULT_STATUS_STYLE", () => {
+  it("is a zinc fallback style", () => {
+    expect(DEFAULT_STATUS_STYLE).toContain("text-zinc-400");
+    expect(DEFAULT_STATUS_STYLE).toContain("bg-zinc-500/15");
+  });
+});