@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/transaction-history.test.tsx

@@ -0,0 +1,325 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { CreditHistoryResponse } from "@/lib/api";
+
+const mockGetCreditHistory = vi.fn<(cursor?: string) => Promise<CreditHistoryResponse>>();
+
+vi.mock("@/lib/api", () => ({
+  getCreditHistory: (...args: unknown[]) => mockGetCreditHistory(args[0] as string | undefined),
+}));
+
+// Must import AFTER vi.mock
+const { TransactionHistory } = await import("@/components/billing/transaction-history");
+
+describe("TransactionHistory", () => {
+  beforeEach(() => {
+    mockGetCreditHistory.mockReset();
+  });
+
+  it("shows loading skeletons initially", () => {
+    // Never resolve — keeps component in loading state
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: intentionally never-resolving promise for loading state test
+    mockGetCreditHistory.mockReturnValue(new Promise(() => {}));
+    render(<TransactionHistory />);
+    expect(screen.getByText("Transaction History")).toBeInTheDocument();
+    // 4 skeleton rows are rendered (no transaction text visible)
+    expect(screen.queryByText("No transactions yet.")).toBeNull();
+  });
+
+  it("renders empty state when no transactions", async () => {
+    mockGetCreditHistory.mockResolvedValue({ transactions: [], nextCursor: null });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("No transactions yet.")).toBeInTheDocument();
+    });
+  });
+
+  it("renders transaction descriptions", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "Credit top-up",
+          amount: 25.0,
+          createdAt: "2025-06-15T10:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Credit top-up")).toBeInTheDocument();
+    });
+  });
+
+  it("renders positive amounts with + prefix and emerald color", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "Top-up",
+          amount: 50.0,
+          createdAt: "2025-06-15T10:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      const amountEl = screen.getByText("+$50.00");
+      expect(amountEl).toBeInTheDocument();
+      expect(amountEl.className).toContain("text-emerald-500");
+    });
+  });
+
+  it("renders negative amounts with - prefix and red color", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "bot_runtime",
+          description: "Bot usage",
+          amount: -3.5,
+          createdAt: "2025-06-15T10:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      const amountEl = screen.getByText("-$3.50");
+      expect(amountEl).toBeInTheDocument();
+      expect(amountEl.className).toContain("text-red-500");
+    });
+  });
+
+  it("renders correct type badge labels", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "a",
+          amount: 10,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-2",
+          type: "signup_credit",
+          description: "b",
+          amount: 5,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-3",
+          type: "bot_runtime",
+          description: "c",
+          amount: -2,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-4",
+          type: "refund",
+          description: "d",
+          amount: 3,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-5",
+          type: "bonus",
+          description: "e",
+          amount: 1,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-6",
+          type: "adjustment",
+          description: "f",
+          amount: -1,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+        {
+          id: "tx-7",
+          type: "community_dividend",
+          description: "g",
+          amount: 2,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Purchase")).toBeInTheDocument();
+      expect(screen.getByText("Signup credit")).toBeInTheDocument();
+      expect(screen.getByText("Bot runtime")).toBeInTheDocument();
+      expect(screen.getByText("Refund")).toBeInTheDocument();
+      expect(screen.getByText("Bonus")).toBeInTheDocument();
+      expect(screen.getByText("Adjustment")).toBeInTheDocument();
+      expect(screen.getByText("Dividend")).toBeInTheDocument();
+    });
+  });
+
+  it("renders formatted dates", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "Top-up",
+          amount: 10,
+          createdAt: "2025-06-15T10:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      // toLocaleDateString("en-US", { month: "short", day: "numeric" }) → "Jun 15"
+      expect(screen.getByText("Jun 15")).toBeInTheDocument();
+    });
+  });
+
+  it("shows error state with retry button", async () => {
+    mockGetCreditHistory.mockRejectedValue(new Error("Network error"));
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Failed to load transactions.")).toBeInTheDocument();
+      expect(screen.getByText("Retry")).toBeInTheDocument();
+    });
+  });
+
+  it("retries loading on retry button click", async () => {
+    const user = userEvent.setup();
+    // First call fails, second succeeds
+    mockGetCreditHistory
+      .mockRejectedValueOnce(new Error("fail"))
+      .mockResolvedValueOnce({ transactions: [], nextCursor: null });
+
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Retry")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Retry"));
+    await waitFor(() => {
+      expect(screen.getByText("No transactions yet.")).toBeInTheDocument();
+    });
+    expect(mockGetCreditHistory).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows 'Load more' button when cursor exists", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "Top-up",
+          amount: 10,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+      ],
+      nextCursor: "next-page-cursor",
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Load more")).toBeInTheDocument();
+    });
+  });
+
+  it("does not show 'Load more' when cursor is null", async () => {
+    mockGetCreditHistory.mockResolvedValue({
+      transactions: [
+        {
+          id: "tx-1",
+          type: "purchase",
+          description: "Top-up",
+          amount: 10,
+          createdAt: "2025-01-01T00:00:00Z",
+        },
+      ],
+      nextCursor: null,
+    });
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Top-up")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Load more")).toBeNull();
+  });
+
+  it("loads more transactions on 'Load more' click", async () => {
+    const user = userEvent.setup();
+    mockGetCreditHistory
+      .mockResolvedValueOnce({
+        transactions: [
+          {
+            id: "tx-1",
+            type: "purchase",
+            description: "First batch",
+            amount: 10,
+            createdAt: "2025-01-01T00:00:00Z",
+          },
+        ],
+        nextCursor: "cursor-2",
+      })
+      .mockResolvedValueOnce({
+        transactions: [
+          {
+            id: "tx-2",
+            type: "refund",
+            description: "Second batch",
+            amount: 5,
+            createdAt: "2025-01-02T00:00:00Z",
+          },
+        ],
+        nextCursor: null,
+      });
+
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("First batch")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Load more"));
+    await waitFor(() => {
+      expect(screen.getByText("Second batch")).toBeInTheDocument();
+    });
+    // Both batches visible
+    expect(screen.getByText("First batch")).toBeInTheDocument();
+    // Cursor was passed to second call
+    expect(mockGetCreditHistory).toHaveBeenCalledWith("cursor-2");
+  });
+
+  it("shows inline error when load-more fails but keeps existing transactions", async () => {
+    const user = userEvent.setup();
+    mockGetCreditHistory
+      .mockResolvedValueOnce({
+        transactions: [
+          {
+            id: "tx-1",
+            type: "purchase",
+            description: "Existing",
+            amount: 10,
+            createdAt: "2025-01-01T00:00:00Z",
+          },
+        ],
+        nextCursor: "cursor-2",
+      })
+      .mockRejectedValueOnce(new Error("fail"));
+
+    render(<TransactionHistory />);
+    await waitFor(() => {
+      expect(screen.getByText("Existing")).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText("Load more"));
+    await waitFor(() => {
+      expect(screen.getByText("Failed to load more transactions.")).toBeInTheDocument();
+    });
+    // Original transaction still visible
+    expect(screen.getByText("Existing")).toBeInTheDocument();
+  });
+});

package/src/__tests__/trpc-types.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest";
+import type { AppRouter } from "@/lib/trpc-types";
+
+/**
+ * Compile-time assertion: causes a TypeScript error if T is not `true`.
+ * This makes type-level tests actually fail at type-check time (tsc --noEmit)
+ * when a namespace or procedure is removed from the AppRouter stub.
+ */
+type Assert<T extends true> = T;
+
+/**
+ * Type-level tests for the AppRouter stub.
+ *
+ * These verify that the type contract declared in trpc-types.ts
+ * includes all router namespaces the UI depends on. If a namespace
+ * is removed from the stub, these tests fail at type-check time
+ * (tsc --noEmit / npm run check), catching the breakage before runtime.
+ */
+describe("trpc-types AppRouter contract", () => {
+  it("declares all expected router namespaces", () => {
+    type Router = AppRouter["_def"]["record"];
+    type _CheckPageContext = Assert<"pageContext" extends keyof Router ? true : false>;
+    type _CheckAdmin = Assert<"admin" extends keyof Router ? true : false>;
+    type _CheckBilling = Assert<"billing" extends keyof Router ? true : false>;
+    type _CheckFleet = Assert<"fleet" extends keyof Router ? true : false>;
+    type _CheckPromotions = Assert<"promotions" extends keyof Router ? true : false>;
+    type _CheckRateOverrides = Assert<"rateOverrides" extends keyof Router ? true : false>;
+    type _CheckSettings = Assert<"settings" extends keyof Router ? true : false>;
+    type _CheckCapabilities = Assert<"capabilities" extends keyof Router ? true : false>;
+    type _CheckAuthSocial = Assert<"authSocial" extends keyof Router ? true : false>;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+
+  it("billing namespace has critical procedures", () => {
+    type Billing = AppRouter["_def"]["record"]["billing"];
+    type _CheckCurrentPlan = Assert<"currentPlan" extends keyof Billing ? true : false>;
+    type _CheckCreditsBalance = Assert<"creditsBalance" extends keyof Billing ? true : false>;
+    type _CheckCreditsCheckout = Assert<"creditsCheckout" extends keyof Billing ? true : false>;
+    type _CheckApplyCoupon = Assert<"applyCoupon" extends keyof Billing ? true : false>;
+    type _CheckPortalSession = Assert<"portalSession" extends keyof Billing ? true : false>;
+    type _CheckAutoTopupSettings = Assert<"autoTopupSettings" extends keyof Billing ? true : false>;
+    type _CheckAccountStatus = Assert<"accountStatus" extends keyof Billing ? true : false>;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+
+  it("fleet namespace has instance management procedures", () => {
+    type Fleet = AppRouter["_def"]["record"]["fleet"];
+    type _CheckListInstances = Assert<"listInstances" extends keyof Fleet ? true : false>;
+    type _CheckGetInstance = Assert<"getInstance" extends keyof Fleet ? true : false>;
+    type _CheckCreateInstance = Assert<"createInstance" extends keyof Fleet ? true : false>;
+    type _CheckControlInstance = Assert<"controlInstance" extends keyof Fleet ? true : false>;
+    type _CheckGetInstanceHealth = Assert<"getInstanceHealth" extends keyof Fleet ? true : false>;
+    type _CheckGetInstanceLogs = Assert<"getInstanceLogs" extends keyof Fleet ? true : false>;
+    type _CheckGetInstanceMetrics = Assert<"getInstanceMetrics" extends keyof Fleet ? true : false>;
+    type _CheckListTemplates = Assert<"listTemplates" extends keyof Fleet ? true : false>;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+
+  it("promotions namespace has CRUD and coupon procedures", () => {
+    type Promos = AppRouter["_def"]["record"]["promotions"];
+    type _CheckList = Assert<"list" extends keyof Promos ? true : false>;
+    type _CheckCreate = Assert<"create" extends keyof Promos ? true : false>;
+    type _CheckUpdate = Assert<"update" extends keyof Promos ? true : false>;
+    type _CheckActivate = Assert<"activate" extends keyof Promos ? true : false>;
+    type _CheckPause = Assert<"pause" extends keyof Promos ? true : false>;
+    type _CheckCancel = Assert<"cancel" extends keyof Promos ? true : false>;
+    type _CheckGenerateCouponBatch = Assert<
+      "generateCouponBatch" extends keyof Promos ? true : false
+    >;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+
+  it("capabilities namespace has key and settings procedures", () => {
+    type Caps = AppRouter["_def"]["record"]["capabilities"];
+    type _CheckStoreKey = Assert<"storeKey" extends keyof Caps ? true : false>;
+    type _CheckTestKey = Assert<"testKey" extends keyof Caps ? true : false>;
+    type _CheckListCapabilitySettings = Assert<
+      "listCapabilitySettings" extends keyof Caps ? true : false
+    >;
+    type _CheckListCapabilityMeta = Assert<"listCapabilityMeta" extends keyof Caps ? true : false>;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+
+  it("admin namespace has inference and billingHealth", () => {
+    type Admin = AppRouter["_def"]["record"]["admin"];
+    type _CheckInference = Assert<"inference" extends keyof Admin ? true : false>;
+    type _CheckBillingHealth = Assert<"billingHealth" extends keyof Admin ? true : false>;
+    // Runtime assertion is intentionally trivial — the real gate is tsc --noEmit
+    // which fails if any Assert<...> type above resolves to `false`.
+    expect(true).toBe(true);
+  });
+});

package/src/__tests__/use-capability-meta.test.ts

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+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(),
+  UnauthorizedError: class extends Error {
+    constructor(msg = "Session expired") {
+      super(msg);
+      this.name = "UnauthorizedError";
+    }
+  },
+}));
+
+const mockListCapabilityMeta = vi.fn();
+
+vi.mock("@/lib/trpc", () => ({
+  trpcVanilla: {
+    capabilities: {
+      listCapabilityMeta: { query: (...args: unknown[]) => mockListCapabilityMeta(...args) },
+    },
+  },
+}));
+
+import { renderHook, waitFor } from "@testing-library/react";
+import { useCapabilityMeta } from "@/hooks/use-capability-meta";
+import type { CapabilityMetaEntry } from "@/lib/api";
+import { fetchCapabilityMeta } from "@/lib/settings-api";
+
+describe("fetchCapabilityMeta", () => {
+  beforeEach(() => {
+    mockListCapabilityMeta.mockReset();
+  });
+
+  it("returns metadata from tRPC procedure", async () => {
+    const mockData: CapabilityMetaEntry[] = [
+      {
+        capability: "transcription",
+        label: "Transcription",
+        description: "Powered by Whisper.",
+        pricing: "$0.006/min",
+        hostedProvider: "Whisper",
+        icon: "mic",
+        sortOrder: 0,
+      },
+    ];
+    mockListCapabilityMeta.mockResolvedValue(mockData);
+    const result = await fetchCapabilityMeta();
+    expect(result).toEqual(mockData);
+    expect(mockListCapabilityMeta).toHaveBeenCalledOnce();
+  });
+
+  it("throws on tRPC error (caller handles fallback)", async () => {
+    mockListCapabilityMeta.mockRejectedValue(new Error("Network error"));
+    await expect(fetchCapabilityMeta()).rejects.toThrow("Network error");
+  });
+});
+
+describe("useCapabilityMeta hook", () => {
+  beforeEach(() => {
+    mockListCapabilityMeta.mockReset();
+  });
+
+  it("returns metadata from API when available", async () => {
+    const mockData: CapabilityMetaEntry[] = [
+      {
+        capability: "transcription",
+        label: "Transcription",
+        description: "Powered by Whisper.",
+        pricing: "$0.006/min",
+        hostedProvider: "Whisper",
+        icon: "mic",
+        sortOrder: 0,
+      },
+      {
+        capability: "text-gen",
+        label: "Text Generation",
+        description: "200+ models.",
+        pricing: "$0.002/1K tokens",
+        hostedProvider: "OpenRouter",
+        icon: "bot",
+        sortOrder: 2,
+      },
+    ];
+    mockListCapabilityMeta.mockResolvedValue(mockData);
+
+    const { result } = renderHook(() => useCapabilityMeta());
+
+    expect(result.current.loading).toBe(true);
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.meta).toEqual(mockData);
+    expect(result.current.error).toBe(false);
+  });
+
+  it("falls back to defaults when API fails", async () => {
+    mockListCapabilityMeta.mockRejectedValue(new Error("fail"));
+
+    const { result } = renderHook(() => useCapabilityMeta());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.error).toBe(true);
+    expect(result.current.meta.length).toBeGreaterThan(0);
+    expect(result.current.meta[0].capability).toBe("transcription");
+  });
+
+  it("returns meta sorted by sortOrder", async () => {
+    const unsorted: CapabilityMetaEntry[] = [
+      {
+        capability: "b",
+        label: "B",
+        description: "",
+        pricing: "",
+        hostedProvider: "",
+        icon: "bot",
+        sortOrder: 2,
+      },
+      {
+        capability: "a",
+        label: "A",
+        description: "",
+        pricing: "",
+        hostedProvider: "",
+        icon: "bot",
+        sortOrder: 1,
+      },
+    ];
+    mockListCapabilityMeta.mockResolvedValue(unsorted);
+
+    const { result } = renderHook(() => useCapabilityMeta());
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.meta[0].capability).toBe("a");
+    expect(result.current.meta[1].capability).toBe("b");
+  });
+
+  it("getMeta returns entry for known capability and fallback for unknown", async () => {
+    const data: CapabilityMetaEntry[] = [
+      {
+        capability: "transcription",
+        label: "Transcription",
+        description: "Desc",
+        pricing: "$1",
+        hostedProvider: "W",
+        icon: "mic",
+        sortOrder: 0,
+      },
+    ];
+    mockListCapabilityMeta.mockResolvedValue(data);
+
+    const { result } = renderHook(() => useCapabilityMeta());
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    expect(result.current.getMeta("transcription").label).toBe("Transcription");
+
+    const unknown = result.current.getMeta("brand-new-cap");
+    expect(unknown.label).toBe("Brand New Cap");
+    expect(unknown.icon).toBe("sparkles");
+  });
+});