@wopr-network/platform-ui-core 1.0.0

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

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../lib/api", () => ({
+  fetchPlatformHealth: vi.fn(),
+}));
+
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => {
+      const { initial: _i, animate: _a, variants: _v, whileHover: _w, ...rest } = props;
+      return <div {...rest}>{children}</div>;
+    },
+  },
+}));
+
+import { StatusPage } from "../components/status/status-page";
+import { fetchPlatformHealth } from "../lib/api";
+
+const mockFetch = fetchPlatformHealth as ReturnType<typeof vi.fn>;
+
+describe("StatusPage", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("shows loading skeleton initially", () => {
+    mockFetch.mockReturnValue(
+      new Promise(() => {
+        /* never resolves — keep loading state for test */
+      }),
+    );
+    render(<StatusPage />);
+    expect(screen.getByText("Platform Status")).toBeInTheDocument();
+  });
+
+  it("shows all systems operational when healthy", async () => {
+    vi.useRealTimers();
+    mockFetch.mockResolvedValue({
+      status: "healthy",
+      services: [
+        { name: "database", status: "healthy", latencyMs: 2 },
+        { name: "redis", status: "healthy", latencyMs: 1 },
+      ],
+      version: "1.0.0",
+      uptime: 86400,
+    });
+    render(<StatusPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/ALL SYSTEMS OPERATIONAL/)).toBeInTheDocument();
+    });
+    expect(screen.getByText("database")).toBeInTheDocument();
+    expect(screen.getByText("redis")).toBeInTheDocument();
+  });
+
+  it("shows degraded banner when status is degraded", async () => {
+    vi.useRealTimers();
+    mockFetch.mockResolvedValue({
+      status: "degraded",
+      services: [
+        { name: "database", status: "healthy", latencyMs: 2 },
+        { name: "redis", status: "degraded", latencyMs: 150 },
+      ],
+      version: "1.0.0",
+      uptime: 86400,
+    });
+    render(<StatusPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/PARTIAL DEGRADATION/)).toBeInTheDocument();
+    });
+  });
+
+  it("shows error state when fetch fails", async () => {
+    vi.useRealTimers();
+    mockFetch.mockResolvedValue(null);
+    render(<StatusPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/Unable to reach/)).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/step-superpowers.test.tsx

@@ -0,0 +1,218 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+const mockSuperpowers = [
+  {
+    id: "image-gen",
+    name: "ImageGen",
+    tagline: "/imagine anything",
+    description: "Generate images from text descriptions.",
+    icon: "Image",
+    color: "#F59E0B",
+    requiresKey: true,
+    configFields: [],
+  },
+  {
+    id: "voice",
+    name: "Voice",
+    tagline: "Talk to your bot",
+    description: "Speech-to-text and text-to-speech.",
+    icon: "Mic",
+    color: "#8B5CF6",
+    requiresKey: false,
+    configFields: [],
+  },
+  {
+    id: "search",
+    name: "Search",
+    tagline: "Search the web",
+    description: "Real-time web search.",
+    icon: "Search",
+    color: "#3B82F6",
+    requiresKey: true,
+    configFields: [],
+  },
+];
+
+vi.mock("@/hooks/use-plugin-registry", () => ({
+  usePluginRegistry: () => ({
+    superpowers: mockSuperpowers,
+    channels: [],
+    providers: [],
+    categories: [],
+    personalities: [],
+    presets: [],
+    heroModels: [],
+    additionalModels: [],
+    allModels: [],
+    byokProviders: [],
+    modelCount: "0",
+    providerOptions: [],
+    channelOptions: [],
+    pluginOptions: [],
+    getAllPlugins: () => [],
+    getPluginById: () => undefined,
+    collectConfigFields: () => [],
+    resolveDependencies: () => [],
+    validateField: () => null,
+  }),
+}));
+
+import { StepSuperpowers } from "@/components/onboarding/step-superpowers";
+
+describe("StepSuperpowers", () => {
+  describe("rendering superpower cards", () => {
+    it("renders all superpowers with name and tagline", () => {
+      render(<StepSuperpowers selected={[]} onToggle={vi.fn()} />);
+
+      for (const sp of mockSuperpowers) {
+        expect(screen.getByText(sp.name)).toBeInTheDocument();
+        expect(screen.getByText(sp.tagline)).toBeInTheDocument();
+      }
+    });
+
+    it("renders a switch for each superpower with correct aria-label", () => {
+      render(<StepSuperpowers selected={[]} onToggle={vi.fn()} />);
+
+      for (const sp of mockSuperpowers) {
+        expect(screen.getByRole("switch", { name: `Toggle ${sp.name}` })).toBeInTheDocument();
+      }
+    });
+
+    it("renders step number and code", () => {
+      const { container } = render(<StepSuperpowers selected={[]} onToggle={vi.fn()} />);
+
+      const stepDiv = container.querySelector("[aria-hidden='true']");
+      expect(stepDiv?.textContent).toContain("STEP");
+      expect(stepDiv?.textContent).toContain("04");
+      expect(stepDiv?.textContent).toContain("SUPERPOWERS");
+    });
+
+    it("renders custom step number and code when provided", () => {
+      const { container } = render(
+        <StepSuperpowers selected={[]} onToggle={vi.fn()} stepNumber="07" stepCode="POWERS" />,
+      );
+
+      const stepDiv = container.querySelector("[aria-hidden='true']");
+      expect(stepDiv?.textContent).toContain("STEP");
+      expect(stepDiv?.textContent).toContain("07");
+      expect(stepDiv?.textContent).toContain("POWERS");
+    });
+  });
+
+  describe("selection visual feedback", () => {
+    it("shows switch as checked when superpower is in selected array", () => {
+      render(<StepSuperpowers selected={["image-gen"]} onToggle={vi.fn()} />);
+
+      const imageGenSwitch = screen.getByRole("switch", { name: "Toggle ImageGen" });
+      expect(imageGenSwitch).toBeChecked();
+
+      const voiceSwitch = screen.getByRole("switch", { name: "Toggle Voice" });
+      expect(voiceSwitch).not.toBeChecked();
+    });
+
+    it("shows multiple switches as checked for multiple selections", () => {
+      render(<StepSuperpowers selected={["image-gen", "voice"]} onToggle={vi.fn()} />);
+
+      expect(screen.getByRole("switch", { name: "Toggle ImageGen" })).toBeChecked();
+      expect(screen.getByRole("switch", { name: "Toggle Voice" })).toBeChecked();
+      expect(screen.getByRole("switch", { name: "Toggle Search" })).not.toBeChecked();
+    });
+  });
+
+  describe("toggle interaction", () => {
+    it("calls onToggle with superpower id when switch is clicked", async () => {
+      const user = userEvent.setup();
+      const onToggle = vi.fn();
+
+      render(<StepSuperpowers selected={[]} onToggle={onToggle} />);
+
+      await user.click(screen.getByRole("switch", { name: "Toggle ImageGen" }));
+      expect(onToggle).toHaveBeenCalledWith("image-gen");
+    });
+
+    it("calls onToggle for already-selected superpower (to deselect)", async () => {
+      const user = userEvent.setup();
+      const onToggle = vi.fn();
+
+      render(<StepSuperpowers selected={["voice"]} onToggle={onToggle} />);
+
+      await user.click(screen.getByRole("switch", { name: "Toggle Voice" }));
+      expect(onToggle).toHaveBeenCalledWith("voice");
+    });
+  });
+
+  describe("no selection message", () => {
+    it("shows 'NO SUPERPOWERS SELECTED' when nothing is selected", () => {
+      render(<StepSuperpowers selected={[]} onToggle={vi.fn()} />);
+
+      expect(screen.getByText(/NO SUPERPOWERS SELECTED/)).toBeInTheDocument();
+    });
+
+    it("hides message when at least one superpower is selected", () => {
+      render(<StepSuperpowers selected={["image-gen"]} onToggle={vi.fn()} />);
+
+      expect(screen.queryByText(/NO SUPERPOWERS SELECTED/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe("onboarding mode text", () => {
+    it("shows default onboarding description", () => {
+      render(<StepSuperpowers selected={[]} onToggle={vi.fn()} />);
+
+      expect(screen.getByText("Pick as many as you want. All optional.")).toBeInTheDocument();
+    });
+
+    it("shows fleet-add description in fleet-add mode", () => {
+      render(<StepSuperpowers selected={[]} onToggle={vi.fn()} mode="fleet-add" />);
+
+      expect(
+        screen.getByText("Pre-checked from your other bots. Add or remove as you like."),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("fleet-add mode usage info", () => {
+    it("shows which bots use a superpower in fleet-add mode", () => {
+      render(
+        <StepSuperpowers
+          selected={[]}
+          onToggle={vi.fn()}
+          mode="fleet-add"
+          existingBots={[
+            { id: "1", name: "Bot Alpha", plugins: [], superpowers: ["image-gen"] },
+            { id: "2", name: "Bot Beta", plugins: [], superpowers: ["image-gen"] },
+          ]}
+        />,
+      );
+
+      expect(screen.getByText("Bot Alpha, Bot Beta use this")).toBeInTheDocument();
+    });
+
+    it("shows singular 'uses' for one bot", () => {
+      render(
+        <StepSuperpowers
+          selected={[]}
+          onToggle={vi.fn()}
+          mode="fleet-add"
+          existingBots={[{ id: "1", name: "Bot Alpha", plugins: [], superpowers: ["voice"] }]}
+        />,
+      );
+
+      expect(screen.getByText("Bot Alpha uses this")).toBeInTheDocument();
+    });
+
+    it("does not show usage info in default onboarding mode", () => {
+      render(
+        <StepSuperpowers
+          selected={[]}
+          onToggle={vi.fn()}
+          existingBots={[{ id: "1", name: "Bot Alpha", plugins: [], superpowers: ["image-gen"] }]}
+        />,
+      );
+
+      expect(screen.queryByText(/uses this/)).not.toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/story-sections.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { StorySections } from "../components/landing/story-sections";
+
+describe("StorySections", () => {
+  it("renders all three story headings", () => {
+    render(<StorySections />);
+    expect(screen.getByText("It works while you sleep.")).toBeInTheDocument();
+    expect(screen.getByText("It doesn't quit when you do.")).toBeInTheDocument();
+    expect(screen.getByText("It runs the whole thing.")).toBeInTheDocument();
+  });
+
+  it("renders story body text", () => {
+    render(<StorySections />);
+    expect(screen.getByText(/Regina went to bed/)).toBeInTheDocument();
+    expect(screen.getByText(/Alvin said/)).toBeInTheDocument();
+    expect(screen.getByText(/T hasn't hired anyone/)).toBeInTheDocument();
+  });
+
+  it("wraps content in a section element", () => {
+    const { container } = render(<StorySections />);
+    expect(container.querySelector("section")).toBeInTheDocument();
+  });
+});

package/src/__tests__/superpower-content-sanitize.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SuperpowerContent } from "@/components/marketplace/superpower-content";
+
+describe("SuperpowerContent sanitization", () => {
+  it("strips javascript: links from markdown", () => {
+    const malicious = '[Click me](javascript:alert("xss"))';
+    const { container } = render(<SuperpowerContent markdown={malicious} />);
+    const link = container.querySelector("a");
+    // rehype-sanitize should either remove the href or remove the link entirely
+    if (link) {
+      const href = link.getAttribute("href");
+      expect(href === null || !href.includes("javascript:")).toBe(true);
+    }
+    // The text content should still render
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("strips inline event handlers from raw HTML in markdown", () => {
+    const malicious = '<img src="x" onerror="alert(1)">';
+    const { container } = render(<SuperpowerContent markdown={malicious} />);
+    const img = container.querySelector("img");
+    if (img) {
+      expect(img.getAttribute("onerror")).toBeNull();
+    }
+  });
+
+  it("strips script tags from markdown", () => {
+    const malicious = '<script>alert("xss")</script>';
+    const { container } = render(<SuperpowerContent markdown={malicious} />);
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.innerHTML).not.toContain("<script");
+  });
+
+  it("renders legitimate markdown correctly", () => {
+    const legitimate = [
+      "# Welcome",
+      "",
+      "A paragraph with **bold** and *italic* text.",
+      "",
+      "- Item one",
+      "- Item two",
+      "",
+      "[Safe link](https://example.com)",
+      "",
+      "```js",
+      'console.log("hello");',
+      "```",
+    ].join("\n");
+
+    const { container } = render(<SuperpowerContent markdown={legitimate} />);
+
+    // H1 renders (via custom component)
+    expect(screen.getByText("Welcome")).toBeInTheDocument();
+    // Bold text renders
+    expect(container.querySelector("strong")).toBeInTheDocument();
+    // Link has correct href
+    const link = container.querySelector("a");
+    expect(link).toBeInTheDocument();
+    expect(link?.getAttribute("href")).toBe("https://example.com");
+    // Code block renders
+    expect(container.querySelector("code")).toBeInTheDocument();
+  });
+
+  it("renders section headings and collapsible content", () => {
+    const withSections = [
+      "# Title",
+      "",
+      "Preamble text.",
+      "",
+      "## Features",
+      "",
+      "Some features here.",
+      "",
+      "## What Gets Installed",
+      "",
+      "Details that should be collapsed.",
+    ].join("\n");
+
+    const { container } = render(<SuperpowerContent markdown={withSections} />);
+
+    expect(screen.getByText("Features")).toBeInTheDocument();
+    expect(screen.getByText("What Gets Installed")).toBeInTheDocument();
+    // "What Gets Installed" should be in a <details> (collapsed)
+    expect(container.querySelector("details")).toBeInTheDocument();
+  });
+});

package/src/__tests__/superpower-content.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SuperpowerContent } from "@/components/marketplace/superpower-content";
+
+const SAMPLE_MD = `# Secretary
+
+*Your AI executive assistant who never sleeps*
+
+She manages your calendar, drafts emails, and keeps your world running.
+
+## What she can do
+
+- Schedule and manage meetings
+- Draft and send emails
+- Track action items
+
+## What gets installed
+
+- @wopr-network/wopr-plugin-secretary
+- Calendar integration module
+- Email drafting engine
+`;
+
+describe("SuperpowerContent", () => {
+  it("renders the H1 as large display text", () => {
+    render(<SuperpowerContent markdown={SAMPLE_MD} />);
+    expect(screen.getByText("Secretary")).toBeInTheDocument();
+  });
+
+  it("renders the tagline", () => {
+    render(<SuperpowerContent markdown={SAMPLE_MD} />);
+    expect(screen.getByText(/never sleeps/)).toBeInTheDocument();
+  });
+
+  it("renders 'What gets installed' section", () => {
+    render(<SuperpowerContent markdown={SAMPLE_MD} />);
+    expect(screen.getByText(/What gets installed/i)).toBeInTheDocument();
+  });
+
+  it("renders 'What she can do' items", () => {
+    render(<SuperpowerContent markdown={SAMPLE_MD} />);
+    expect(screen.getByText(/Schedule and manage meetings/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/suspension-banner.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { CreditBalance } from "@/lib/api";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/",
+}));
+
+// Mock better-auth/react
+vi.mock("better-auth/react", () => ({
+  createAuthClient: () => ({
+    useSession: () => ({ data: null, isPending: false, error: null }),
+    signIn: { email: vi.fn(), social: vi.fn() },
+    signUp: { email: vi.fn() },
+    signOut: vi.fn(),
+  }),
+}));
+
+const MOCK_BALANCE: CreditBalance = {
+  balance: 0.5,
+  dailyBurn: 0.33,
+  runway: 1,
+};
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    getCreditBalance: vi.fn().mockResolvedValue(MOCK_BALANCE),
+    getAccountStatus: vi.fn().mockResolvedValue(null),
+    getBillingUsageSummary: vi.fn().mockResolvedValue({
+      periodStart: "2026-02-01T00:00:00Z",
+      periodEnd: "2026-02-28T23:59:59Z",
+      totalSpend: 30,
+      includedCredit: 50,
+      amountDue: 0,
+      planName: "Pro",
+    }),
+  };
+});
+
+describe("SuspensionBanner", () => {
+  it("renders nothing when API returns null balance", async () => {
+    const { getCreditBalance } = await import("@/lib/api");
+    vi.mocked(getCreditBalance).mockResolvedValueOnce({
+      balance: 0,
+      dailyBurn: 0,
+      runway: null,
+    });
+
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    const { container } = render(<SuspensionBanner />);
+
+    // Should start with null and not render anything initially
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders LowBalanceBanner with global prop after loading", async () => {
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    render(<SuspensionBanner />);
+
+    // Wait for async load
+    await waitFor(() => {
+      expect(screen.getByText(/Credits critically low/)).toBeInTheDocument();
+    });
+  });
+
+  it("renders nothing on API error (non-critical error path)", async () => {
+    const { getCreditBalance } = await import("@/lib/api");
+    vi.mocked(getCreditBalance).mockRejectedValueOnce(new Error("Network error"));
+
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    const { container } = render(<SuspensionBanner />);
+
+    // Should catch error silently and render nothing
+    await waitFor(() => {
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  it("shows critical banner when balance < $1", async () => {
+    const { getCreditBalance } = await import("@/lib/api");
+    vi.mocked(getCreditBalance).mockResolvedValueOnce({
+      balance: 0.75,
+      dailyBurn: 0.5,
+      runway: 1,
+    });
+
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    render(<SuspensionBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Credits critically low/)).toBeInTheDocument();
+    });
+  });
+
+  it("shows high-spend warning when amountDue exceeds zero", async () => {
+    const api = await import("@/lib/api");
+    vi.mocked(api.getCreditBalance).mockResolvedValueOnce({
+      balance: 10,
+      dailyBurn: 2,
+      runway: 5,
+    });
+    vi.mocked(api.getBillingUsageSummary).mockResolvedValueOnce({
+      periodStart: "2026-02-01T00:00:00Z",
+      periodEnd: "2026-02-28T23:59:59Z",
+      totalSpend: 120,
+      includedCredit: 50,
+      amountDue: 70,
+      planName: "Pro",
+    });
+
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    render(<SuspensionBanner />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/\$70\.00 due/)).toBeInTheDocument();
+    });
+  });
+
+  it("does not show critical banner when balance === $1.00 (boundary)", async () => {
+    const { getCreditBalance } = await import("@/lib/api");
+    vi.mocked(getCreditBalance).mockResolvedValueOnce({
+      balance: 1.0,
+      dailyBurn: 0.5,
+      runway: 2,
+    });
+
+    const { SuspensionBanner } = await import("@/components/billing/suspension-banner");
+    const { container } = render(<SuspensionBanner />);
+
+    await waitFor(() => {
+      // At $1.00 with global=true, no banner is shown (only critical < $1, or warning $1-$2 non-global)
+      expect(container.innerHTML).toBe("");
+    });
+  });
+});