@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/buy-crypto-credits-panel.test.tsx

@@ -0,0 +1,178 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const { mockCreateCryptoCheckout, mockIsAllowedRedirectUrl } = vi.hoisted(() => ({
+  mockCreateCryptoCheckout: vi.fn(),
+  mockIsAllowedRedirectUrl: vi.fn(),
+}));
+
+vi.mock("@/lib/api", () => ({
+  createCryptoCheckout: (...args: unknown[]) => mockCreateCryptoCheckout(...args),
+}));
+
+vi.mock("@/lib/validate-redirect-url", () => ({
+  isAllowedRedirectUrl: (...args: unknown[]) => mockIsAllowedRedirectUrl(...args),
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    button: ({
+      children,
+      className,
+      onClick,
+      type,
+    }: React.PropsWithChildren<{
+      className?: string;
+      onClick?: () => void;
+      type?: string;
+    }>) => (
+      <button type={(type as "button") ?? "button"} className={className} onClick={onClick}>
+        {children}
+      </button>
+    ),
+    div: ({ children }: React.PropsWithChildren<Record<string, unknown>>) => <div>{children}</div>,
+  },
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/billing/credits",
+}));
+
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+  }),
+}));
+
+vi.mock("lucide-react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("lucide-react")>();
+  return {
+    ...actual,
+    Bitcoin: () => <span data-testid="bitcoin-icon" />,
+  };
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  mockIsAllowedRedirectUrl.mockReset();
+  mockCreateCryptoCheckout.mockReset();
+});
+
+describe("BuyCryptoCreditPanel", () => {
+  it("renders crypto amount buttons ($10, $25, $50, $100)", async () => {
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    expect(screen.getByText("Pay with Crypto")).toBeInTheDocument();
+    expect(screen.getByText("$10")).toBeInTheDocument();
+    expect(screen.getByText("$25")).toBeInTheDocument();
+    expect(screen.getByText("$50")).toBeInTheDocument();
+    expect(screen.getByText("$100")).toBeInTheDocument();
+  });
+
+  it("Pay button is disabled when no amount selected", async () => {
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    const payBtn = screen.getByRole("button", { name: "Pay with crypto" });
+    expect(payBtn).toBeDisabled();
+  });
+
+  it("Pay button is enabled after selecting an amount", async () => {
+    const user = userEvent.setup();
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    await user.click(screen.getByText("$25"));
+    expect(screen.getByRole("button", { name: "Pay with crypto" })).toBeEnabled();
+  });
+
+  it("calls createCryptoCheckout with selected amount and redirects", async () => {
+    const hrefSetter = vi.fn();
+    Object.defineProperty(window, "location", {
+      value: { ...window.location, href: "" },
+      writable: true,
+      configurable: true,
+    });
+    Object.defineProperty(window.location, "href", {
+      set: hrefSetter,
+      configurable: true,
+    });
+
+    mockCreateCryptoCheckout.mockResolvedValue({
+      url: "https://payram.io/checkout/abc123",
+      referenceId: "ref-abc123",
+    });
+    mockIsAllowedRedirectUrl.mockReturnValue(true);
+
+    const user = userEvent.setup();
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    await user.click(screen.getByText("$50"));
+    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+
+    expect(mockCreateCryptoCheckout).toHaveBeenCalledWith(50);
+    expect(mockIsAllowedRedirectUrl).toHaveBeenCalledWith("https://payram.io/checkout/abc123");
+    expect(hrefSetter).toHaveBeenCalledWith("https://payram.io/checkout/abc123");
+  });
+
+  it("shows error when redirect URL is not allowed", async () => {
+    mockCreateCryptoCheckout.mockResolvedValue({
+      url: "https://evil.com/steal",
+      referenceId: "ref-evil",
+    });
+    mockIsAllowedRedirectUrl.mockReturnValue(false);
+
+    const user = userEvent.setup();
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    await user.click(screen.getByText("$10"));
+    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+
+    expect(
+      await screen.findByText("Unexpected checkout URL. Please contact support."),
+    ).toBeInTheDocument();
+  });
+
+  it("shows Opening PayRam... while checkout is in progress", async () => {
+    mockCreateCryptoCheckout.mockReturnValue(
+      new Promise(() => {
+        /* intentionally pending */
+      }),
+    );
+
+    const user = userEvent.setup();
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    await user.click(screen.getByText("$100"));
+    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+
+    expect(await screen.findByText("Opening PayRam...")).toBeInTheDocument();
+  });
+
+  it("shows error when crypto checkout API call fails", async () => {
+    mockCreateCryptoCheckout.mockRejectedValue(new Error("API down"));
+
+    const user = userEvent.setup();
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    await user.click(screen.getByText("$25"));
+    await user.click(screen.getByRole("button", { name: "Pay with crypto" }));
+
+    expect(await screen.findByText("Checkout failed. Please try again.")).toBeInTheDocument();
+  });
+
+  it("displays minimum amount note", async () => {
+    const { BuyCryptoCreditPanel } = await import("../components/billing/buy-crypto-credits-panel");
+    render(<BuyCryptoCreditPanel />);
+
+    expect(screen.getByText(/Minimum \$10/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/capability-conflicts.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import type { PluginManifest } from "../lib/marketplace-data";
+import { detectCapabilityConflictsClient } from "../lib/marketplace-data";
+
+const makePlugin = (
+  overrides: Partial<PluginManifest> & { id: string; name: string },
+): PluginManifest => ({
+  description: "",
+  version: "1.0.0",
+  author: "Test",
+  icon: "Package",
+  color: "#000",
+  category: "integration",
+  tags: [],
+  capabilities: [],
+  requires: [],
+  install: [],
+  configSchema: [],
+  setup: [],
+  installCount: 0,
+  changelog: [],
+  ...overrides,
+});
+
+const ttsPlugin = makePlugin({
+  id: "elevenlabs-tts",
+  name: "ElevenLabs TTS",
+  capabilities: ["voice", "tts"],
+});
+const sttPlugin = makePlugin({
+  id: "deepgram-stt",
+  name: "Deepgram STT",
+  capabilities: ["voice", "stt"],
+});
+const discordPlugin = makePlugin({ id: "discord", name: "Discord", capabilities: ["channel"] });
+const anotherTts = makePlugin({
+  id: "another-tts",
+  name: "Another TTS",
+  capabilities: ["tts", "audio"],
+});
+
+const allPlugins = [ttsPlugin, sttPlugin, discordPlugin, anotherTts];
+
+describe("detectCapabilityConflictsClient", () => {
+  it("returns empty array when no conflicts", () => {
+    const conflicts = detectCapabilityConflictsClient(
+      discordPlugin,
+      ["elevenlabs-tts"],
+      allPlugins,
+    );
+    expect(conflicts).toEqual([]);
+  });
+
+  it("detects single capability conflict", () => {
+    const conflicts = detectCapabilityConflictsClient(anotherTts, ["elevenlabs-tts"], allPlugins);
+    expect(conflicts).toEqual([
+      {
+        capability: "tts",
+        existingPluginId: "elevenlabs-tts",
+        existingPluginName: "ElevenLabs TTS",
+        newPluginId: "another-tts",
+      },
+    ]);
+  });
+
+  it("detects multiple capability conflicts", () => {
+    const conflicts = detectCapabilityConflictsClient(sttPlugin, ["elevenlabs-tts"], allPlugins);
+    expect(conflicts).toEqual([
+      {
+        capability: "voice",
+        existingPluginId: "elevenlabs-tts",
+        existingPluginName: "ElevenLabs TTS",
+        newPluginId: "deepgram-stt",
+      },
+    ]);
+  });
+
+  it("returns empty when new plugin has no capabilities", () => {
+    const noCapPlugin = makePlugin({ id: "nocap", name: "No Cap", capabilities: [] });
+    const conflicts = detectCapabilityConflictsClient(noCapPlugin, ["elevenlabs-tts"], allPlugins);
+    expect(conflicts).toEqual([]);
+  });
+
+  it("returns empty when no plugins installed", () => {
+    const conflicts = detectCapabilityConflictsClient(ttsPlugin, [], allPlugins);
+    expect(conflicts).toEqual([]);
+  });
+});

package/src/__tests__/capability-resolver.test.tsx

@@ -0,0 +1,173 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/hooks/use-capability-meta", () => ({
+  useCapabilityMeta: () => ({
+    meta: [
+      {
+        capability: "transcription",
+        label: "Transcription",
+        description: "Powered by Whisper.",
+        pricing: "$0.006/min",
+        hostedProvider: "Whisper",
+        icon: "mic",
+        sortOrder: 0,
+      },
+      {
+        capability: "llm",
+        label: "LLM",
+        description: "200+ models via OpenRouter.",
+        pricing: "$0.002/1K tokens",
+        hostedProvider: "OpenRouter",
+        icon: "bot",
+        sortOrder: 1,
+      },
+      {
+        capability: "webhook",
+        label: "Webhooks",
+        description: "HTTP webhooks.",
+        pricing: "",
+        hostedProvider: "",
+        icon: "link",
+        sortOrder: 2,
+      },
+    ],
+    loading: false,
+    error: false,
+    getMeta: (cap: string) => {
+      const all: Record<
+        string,
+        {
+          capability: string;
+          label: string;
+          description: string;
+          pricing: string;
+          hostedProvider: string;
+          icon: string;
+          sortOrder: number;
+        }
+      > = {
+        transcription: {
+          capability: "transcription",
+          label: "Transcription",
+          description: "Powered by Whisper.",
+          pricing: "$0.006/min",
+          hostedProvider: "Whisper",
+          icon: "mic",
+          sortOrder: 0,
+        },
+        llm: {
+          capability: "llm",
+          label: "LLM",
+          description: "200+ models via OpenRouter.",
+          pricing: "$0.002/1K tokens",
+          hostedProvider: "OpenRouter",
+          icon: "bot",
+          sortOrder: 1,
+        },
+        webhook: {
+          capability: "webhook",
+          label: "Webhooks",
+          description: "HTTP webhooks.",
+          pricing: "",
+          hostedProvider: "",
+          icon: "link",
+          sortOrder: 2,
+        },
+      };
+      return (
+        all[cap] ?? {
+          capability: cap,
+          label: cap.replace(/[-_]/g, " ").replace(/\b\w/g, (c: string) => c.toUpperCase()),
+          description: "",
+          pricing: "",
+          hostedProvider: "",
+          icon: "sparkles",
+          sortOrder: 999,
+        }
+      );
+    },
+  }),
+}));
+
+import {
+  CapabilityLabel,
+  CapabilityPricing,
+  CapabilityProviderPicker,
+} from "@/components/capability/CapabilityResolver";
+
+describe("CapabilityProviderPicker", () => {
+  it("renders hosted/BYOK options only for capabilities with hostedProvider", () => {
+    const onChoose = vi.fn();
+    render(
+      <CapabilityProviderPicker
+        capabilities={["transcription", "llm", "webhook"]}
+        choices={{}}
+        onChoose={onChoose}
+      />,
+    );
+
+    expect(screen.getByText("Transcription")).toBeInTheDocument();
+    expect(screen.getByText("LLM")).toBeInTheDocument();
+    expect(screen.getByText("$0.006/min")).toBeInTheDocument();
+    expect(screen.getByText("$0.002/1K tokens")).toBeInTheDocument();
+    // webhook has no hostedProvider — should NOT show picker
+    expect(screen.queryByText("Webhooks")).not.toBeInTheDocument();
+  });
+
+  it("defaults to hosted and calls onChoose when BYOK clicked", async () => {
+    const user = userEvent.setup();
+    const onChoose = vi.fn();
+    render(
+      <CapabilityProviderPicker
+        capabilities={["transcription"]}
+        choices={{}}
+        onChoose={onChoose}
+      />,
+    );
+
+    await user.click(screen.getByText("Use your key"));
+    expect(onChoose).toHaveBeenCalledWith("transcription", "byok");
+  });
+
+  it("renders empty state when no capabilities have hosted providers", () => {
+    render(<CapabilityProviderPicker capabilities={["webhook"]} choices={{}} onChoose={vi.fn()} />);
+    expect(screen.getByText(/No hosted provider options/)).toBeInTheDocument();
+  });
+
+  it("shows selected state for BYOK when choice is byok", () => {
+    render(
+      <CapabilityProviderPicker
+        capabilities={["transcription"]}
+        choices={{ transcription: "byok" }}
+        onChoose={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Use your key").closest("button")).toBeInTheDocument();
+    expect(screen.getByText("Platform Hosted").closest("button")).toBeInTheDocument();
+  });
+});
+
+describe("CapabilityResolver components", () => {
+  it("CapabilityLabel renders label for known capability", () => {
+    render(<CapabilityLabel capability="transcription" />);
+    expect(screen.getByText("Transcription")).toBeInTheDocument();
+  });
+
+  it("CapabilityLabel renders auto-formatted label for unknown capability", () => {
+    render(<CapabilityLabel capability="brand-new-cap" />);
+    expect(screen.getByText("Brand New Cap")).toBeInTheDocument();
+  });
+
+  it("CapabilityPricing renders pricing badge for known capability", () => {
+    render(<CapabilityPricing capability="transcription" />);
+    expect(screen.getByText("$0.006/min")).toBeInTheDocument();
+  });
+
+  it("CapabilityPricing renders nothing for unknown capability with no pricing", () => {
+    const { container } = render(<CapabilityPricing capability="unknown-thing" />);
+    expect(container.textContent).toBe("");
+  });
+});

package/src/__tests__/changeset-detail.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ChangesetDetailClient } from "../app/(dashboard)/changesets/[id]/changeset-detail-client";
+
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn().mockReturnValue({ push: vi.fn(), back: vi.fn() }),
+}));
+
+const mockChangeset = {
+  id: "cs-001",
+  title: "Add user authentication",
+  description: "Implements OAuth2 login flow",
+  status: "open" as const,
+  reviewStatus: "pending" as const,
+  author: "alice",
+  sourceBranch: "feature/auth",
+  targetBranch: "main",
+  createdAt: "2026-03-01T10:00:00Z",
+  updatedAt: "2026-03-02T14:00:00Z",
+  mergedAt: null,
+  files: [
+    {
+      path: "src/auth.ts",
+      status: "added" as const,
+      additions: 45,
+      deletions: 0,
+      patch: "+export function login() {}",
+    },
+    {
+      path: "src/config.ts",
+      status: "modified" as const,
+      additions: 3,
+      deletions: 1,
+      patch: null,
+    },
+  ],
+  reviews: [
+    {
+      id: "rev-1",
+      author: "bob",
+      status: "approved" as const,
+      body: "LGTM",
+      createdAt: "2026-03-02T12:00:00Z",
+    },
+  ],
+  comments: [
+    {
+      id: "cmt-1",
+      author: "carol",
+      body: "Nice work",
+      filePath: "src/auth.ts",
+      lineNumber: 10,
+      createdAt: "2026-03-02T13:00:00Z",
+    },
+  ],
+  totalAdditions: 48,
+  totalDeletions: 1,
+};
+
+const mockGetChangeset = vi.fn().mockResolvedValue(mockChangeset);
+
+vi.mock("@/lib/changeset-api", () => ({
+  getChangeset: (...args: unknown[]) => mockGetChangeset(...args),
+}));
+
+describe("ChangesetDetailClient", () => {
+  it("renders changeset title and status", async () => {
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("Add user authentication")).toBeInTheDocument();
+    });
+    expect(screen.getByText("open")).toBeInTheDocument();
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("shows file changes in files tab", async () => {
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("src/auth.ts")).toBeInTheDocument();
+    });
+    expect(screen.getByText("src/config.ts")).toBeInTheDocument();
+    expect(screen.getByText("+48")).toBeInTheDocument();
+    expect(screen.getAllByText("-1").length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("shows reviews tab content", async () => {
+    const user = userEvent.setup();
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("Add user authentication")).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("tab", { name: /reviews/i }));
+    await waitFor(() => {
+      expect(screen.getByText("bob")).toBeInTheDocument();
+    });
+    expect(screen.getByText("LGTM")).toBeInTheDocument();
+  });
+
+  it("shows comments tab content", async () => {
+    const user = userEvent.setup();
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("Add user authentication")).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("tab", { name: /comments/i }));
+    await waitFor(() => {
+      expect(screen.getByText("carol")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Nice work")).toBeInTheDocument();
+  });
+
+  it("shows metadata (author, branches)", async () => {
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("alice")).toBeInTheDocument();
+    });
+    expect(screen.getByText(/feature\/auth/)).toBeInTheDocument();
+    expect(screen.getByText(/main/)).toBeInTheDocument();
+  });
+
+  it("renders loading skeletons initially", () => {
+    mockGetChangeset.mockReturnValueOnce(
+      new Promise(() => {
+        /* never resolves */
+      }),
+    );
+    const { container } = render(<ChangesetDetailClient changesetId="cs-001" />);
+    const skeletons = container.querySelectorAll("[data-slot='skeleton']");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  it("renders error state on API failure", async () => {
+    mockGetChangeset.mockRejectedValueOnce(new Error("Not found"));
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("Not found")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Retry")).toBeInTheDocument();
+  });
+
+  it("retry button re-fetches changeset", async () => {
+    const user = userEvent.setup();
+    mockGetChangeset.mockRejectedValueOnce(new Error("Network error"));
+    render(<ChangesetDetailClient changesetId="cs-001" />);
+    await waitFor(() => {
+      expect(screen.getByText("Retry")).toBeInTheDocument();
+    });
+    const callCount = mockGetChangeset.mock.calls.length;
+    mockGetChangeset.mockResolvedValueOnce(mockChangeset);
+    await user.click(screen.getByText("Retry"));
+    await waitFor(() => {
+      expect(mockGetChangeset).toHaveBeenCalledTimes(callCount + 1);
+    });
+  });
+});

package/src/__tests__/channel-setup-logger.test.ts

@@ -0,0 +1,22 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("channel-setup logger usage", () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it("should use logger instead of raw console.error", async () => {
+    // Read the source file and verify it uses logger, not console.error
+    const fs = await import("node:fs");
+    const source = fs.readFileSync("src/app/channels/setup/[plugin]/page.tsx", "utf-8");
+
+    // Must import logger
+    expect(source).toContain('import { logger } from "@/lib/logger"');
+
+    // Must NOT have raw console.error
+    expect(source).not.toMatch(/console\.error\(/);
+
+    // Must use log.error
+    expect(source).toMatch(/log\.error\(/);
+  });
+});

package/src/__tests__/channel-setup-toast.test.tsx

@@ -0,0 +1,60 @@
+import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import { Suspense } from "react";
+import { toast } from "sonner";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Mock sonner
+vi.mock("sonner", () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams("botId=bot-1"),
+}));
+
+// Mock getManifest to reject
+vi.mock("@/lib/mock-manifests", () => ({
+  getManifest: vi.fn().mockRejectedValue(new Error("network failure")),
+}));
+
+// Mock connectChannel
+vi.mock("@/lib/api", () => ({
+  apiFetch: vi.fn(),
+  connectChannel: vi.fn(),
+}));
+
+import ChannelSetupPage from "@/app/channels/setup/[plugin]/page";
+
+function Wrapper() {
+  return (
+    <Suspense fallback={<div>loading</div>}>
+      <ChannelSetupPage params={Promise.resolve({ plugin: "discord" })} />
+    </Suspense>
+  );
+}
+
+describe("ChannelSetupPage manifest load error", () => {
+  afterEach(() => cleanup());
+
+  it("shows toast.error when manifest fails to load", async () => {
+    await act(async () => {
+      render(<Wrapper />);
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith("Failed to load channel setup. Please try again.");
+    });
+  });
+
+  it("still renders inline error UI", async () => {
+    await act(async () => {
+      render(<Wrapper />);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("LOAD ERROR")).toBeInTheDocument();
+    });
+  });
+});