@wopr-network/platform-ui-core 1.0.0

package/src/lib/tenant-context.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useSession } from "@/lib/auth-client";
+import { getBrandConfig } from "@/lib/brand-config";
+import { trpcVanilla } from "@/lib/trpc";
+
+const COOKIE_NAME = getBrandConfig().tenantCookieName;
+
+function readTenantCookie(): string {
+  if (typeof document === "undefined") return "";
+  const match = document.cookie.split("; ").find((row) => row.startsWith(`${COOKIE_NAME}=`));
+  return match ? decodeURIComponent(match.split("=")[1]) : "";
+}
+
+function writeTenantCookie(tenantId: string): void {
+  // biome-ignore lint/suspicious/noDocumentCookie: intentional session cookie write (security: tenant ID moved out of localStorage)
+  document.cookie = `${COOKIE_NAME}=${encodeURIComponent(tenantId)}; path=/; SameSite=Lax; Secure`;
+}
+
+/**
+ * Read the active tenant ID from a session cookie.
+ * Used by non-React code (apiFetch, trpc client) to inject X-Tenant-Id headers.
+ */
+export function getActiveTenantId(): string {
+  return readTenantCookie();
+}
+
+export interface TenantOption {
+  id: string;
+  name: string;
+  type: "personal" | "org";
+  image?: string | null;
+}
+
+export interface TenantContextValue {
+  activeTenantId: string;
+  tenants: TenantOption[];
+  isLoading: boolean;
+  switchTenant: (tenantId: string) => void;
+}
+
+const TenantContext = createContext<TenantContextValue | null>(null);
+
+export function TenantProvider({ children }: { children: React.ReactNode }) {
+  const { data: session, isPending: sessionPending } = useSession();
+  const queryClient = useQueryClient();
+  const user = session?.user;
+
+  const [orgs, setOrgs] = useState<Array<{ id: string; name: string; image?: string | null }>>([]);
+  const [orgsLoaded, setOrgsLoaded] = useState(false);
+  const [activeTenantId, setActiveTenantId] = useState<string>(() => {
+    return readTenantCookie();
+  });
+
+  // Fetch orgs once user is available
+  useEffect(() => {
+    if (!user) return;
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const result = await trpcVanilla.org.listMyOrganizations.query(undefined);
+        if (!cancelled) setOrgs(result);
+      } catch {
+        // Endpoint may not exist yet (WOP-1000). Gracefully degrade.
+      } finally {
+        if (!cancelled) setOrgsLoaded(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [user]);
+
+  const tenants = useMemo<TenantOption[]>(() => {
+    if (!user) return [];
+    const personal: TenantOption = {
+      id: user.id,
+      name: user.name ?? "Personal",
+      type: "personal",
+      image: user.image ?? null,
+    };
+    const orgOptions: TenantOption[] = orgs.map((o) => ({
+      id: o.id,
+      name: o.name,
+      type: "org",
+      image: o.image ?? null,
+    }));
+    return [personal, ...orgOptions];
+  }, [user, orgs]);
+
+  // Resolve active tenant: fall back to personal if stored value is invalid
+  const resolvedTenantId = useMemo(() => {
+    if (!user) return "";
+    if (activeTenantId && tenants.some((t) => t.id === activeTenantId)) {
+      return activeTenantId;
+    }
+    return user.id;
+  }, [user, activeTenantId, tenants]);
+
+  const switchTenant = useCallback(
+    (tenantId: string) => {
+      setActiveTenantId(tenantId);
+      writeTenantCookie(tenantId);
+      queryClient.invalidateQueries();
+    },
+    [queryClient],
+  );
+
+  const isLoading = sessionPending || (!orgsLoaded && !!user);
+
+  const value = useMemo<TenantContextValue>(
+    () => ({
+      activeTenantId: resolvedTenantId,
+      tenants,
+      isLoading,
+      switchTenant,
+    }),
+    [resolvedTenantId, tenants, isLoading, switchTenant],
+  );
+
+  return <TenantContext.Provider value={value}>{children}</TenantContext.Provider>;
+}
+
+export function useTenant(): TenantContextValue {
+  const ctx = useContext(TenantContext);
+  if (!ctx) {
+    throw new Error("useTenant must be used within a TenantProvider");
+  }
+  return ctx;
+}

package/src/lib/trpc-types.ts

@@ -0,0 +1,173 @@
+/**
+ * AppRouter type stub for wopr-platform.
+ *
+ * NOTE(WOP-1189): The platform backend is a separate repo (wopr-network/wopr-platform)
+ * and @wopr-network/wopr-platform is not published on npm. Using a local `link:`
+ * dependency breaks CI (ERR_PNPM_LOCKFILE_CONFIG_MISMATCH — the path doesn't exist
+ * on GitHub Actions runners). This stub re-declares the procedures consumed by the UI
+ * so the build stays type-safe without a local path dependency.
+ *
+ * When @wopr-network/sdk is published, replace this file with:
+ *   export type { AppRouter } from "@wopr-network/sdk";
+ *
+ * The real AppRouter type lives at:
+ *   wopr-network/wopr-platform/src/trpc/index.ts → `export type AppRouter = typeof appRouter;`
+ */
+import type {
+  AnyTRPCMutationProcedure,
+  AnyTRPCQueryProcedure,
+  AnyTRPCRootTypes,
+  TRPCBuiltRouter,
+} from "@trpc/server";
+
+/**
+ * Minimal router record for the procedures this UI consumes.
+ * Extend this when adding new tRPC calls. Remove entries when procedures are dropped.
+ */
+type AppRouterRecord = {
+  pageContext: {
+    update: AnyTRPCMutationProcedure;
+  };
+  admin: {
+    inference: {
+      dailyCost: AnyTRPCQueryProcedure;
+      pageCost: AnyTRPCQueryProcedure;
+      cacheHitRate: AnyTRPCQueryProcedure;
+      sessionCost: AnyTRPCQueryProcedure;
+    };
+    billingHealth: AnyTRPCQueryProcedure;
+    tenantDetail: AnyTRPCQueryProcedure;
+    tenantAgents: AnyTRPCQueryProcedure;
+    notesList: AnyTRPCQueryProcedure;
+    notesCreate: AnyTRPCMutationProcedure;
+    suspendTenant: AnyTRPCMutationProcedure;
+    reactivateTenant: AnyTRPCMutationProcedure;
+    creditsGrant: AnyTRPCMutationProcedure;
+    creditsRefund: AnyTRPCMutationProcedure;
+    tenantChangeRole: AnyTRPCMutationProcedure;
+    banTenant: AnyTRPCMutationProcedure;
+    creditsTransactionsExport: AnyTRPCQueryProcedure;
+    creditsTransactions: AnyTRPCQueryProcedure;
+    tenantUsageByCapability: AnyTRPCQueryProcedure;
+    usersList: AnyTRPCQueryProcedure;
+    bulkGrant: AnyTRPCMutationProcedure;
+    bulkSuspend: AnyTRPCMutationProcedure;
+    bulkReactivate: AnyTRPCMutationProcedure;
+    affiliateSuppressions: AnyTRPCQueryProcedure;
+    affiliateVelocity: AnyTRPCQueryProcedure;
+    affiliateFingerprintClusters: AnyTRPCQueryProcedure;
+    affiliateBlockFingerprint: AnyTRPCMutationProcedure;
+    complianceDeletionRequests: AnyTRPCQueryProcedure;
+    complianceTriggerDeletion: AnyTRPCMutationProcedure;
+    complianceCancelDeletion: AnyTRPCMutationProcedure;
+    complianceExportRequests: AnyTRPCQueryProcedure;
+    complianceTriggerExport: AnyTRPCMutationProcedure;
+    onboardingFunnelStats: AnyTRPCQueryProcedure;
+    onboardingScriptList: AnyTRPCQueryProcedure;
+    onboardingScriptSave: AnyTRPCMutationProcedure;
+    rolesList: AnyTRPCQueryProcedure;
+    rolesAssign: AnyTRPCMutationProcedure;
+    rolesRevoke: AnyTRPCMutationProcedure;
+    migrationList: AnyTRPCQueryProcedure;
+    migrationSnapshotList: AnyTRPCQueryProcedure;
+    migrationRestore: AnyTRPCMutationProcedure;
+    migrationRestoreHistory: AnyTRPCQueryProcedure;
+    retentionPolicies: AnyTRPCQueryProcedure;
+    retentionPoliciesUpdate: AnyTRPCMutationProcedure;
+  };
+  promotions: {
+    list: AnyTRPCQueryProcedure;
+    get: AnyTRPCQueryProcedure;
+    create: AnyTRPCMutationProcedure;
+    update: AnyTRPCMutationProcedure;
+    activate: AnyTRPCMutationProcedure;
+    pause: AnyTRPCMutationProcedure;
+    cancel: AnyTRPCMutationProcedure;
+    generateCouponBatch: AnyTRPCMutationProcedure;
+    listRedemptions: AnyTRPCQueryProcedure;
+  };
+  rateOverrides: {
+    list: AnyTRPCQueryProcedure;
+    create: AnyTRPCMutationProcedure;
+    cancel: AnyTRPCMutationProcedure;
+  };
+  billing: {
+    applyCoupon: AnyTRPCMutationProcedure;
+    currentPlan: AnyTRPCQueryProcedure;
+    providerCosts: AnyTRPCQueryProcedure;
+    billingInfo: AnyTRPCQueryProcedure;
+    creditsBalance: AnyTRPCQueryProcedure;
+    creditsHistory: AnyTRPCQueryProcedure;
+    creditsCheckout: AnyTRPCMutationProcedure;
+    creditOptions: AnyTRPCQueryProcedure;
+    inferenceMode: AnyTRPCQueryProcedure;
+    spendingLimits: AnyTRPCQueryProcedure;
+    updateSpendingLimits: AnyTRPCMutationProcedure;
+    hostedUsageSummary: AnyTRPCQueryProcedure;
+    usageSummary: AnyTRPCQueryProcedure;
+    hostedUsageEvents: AnyTRPCQueryProcedure;
+    portalSession: AnyTRPCMutationProcedure;
+    updateBillingEmail: AnyTRPCMutationProcedure;
+    removePaymentMethod: AnyTRPCMutationProcedure;
+    setDefaultPaymentMethod: AnyTRPCMutationProcedure;
+    affiliateStats: AnyTRPCQueryProcedure;
+    affiliateReferrals: AnyTRPCQueryProcedure;
+    cryptoCheckout: AnyTRPCMutationProcedure;
+    autoTopupSettings: AnyTRPCQueryProcedure;
+    updateAutoTopupSettings: AnyTRPCMutationProcedure;
+    accountStatus: AnyTRPCQueryProcedure;
+  };
+  fleet: {
+    listInstances: AnyTRPCQueryProcedure;
+    getInstance: AnyTRPCQueryProcedure;
+    createInstance: AnyTRPCMutationProcedure;
+    controlInstance: AnyTRPCMutationProcedure;
+    getInstanceHealth: AnyTRPCQueryProcedure;
+    getInstanceLogs: AnyTRPCQueryProcedure;
+    getInstanceMetrics: AnyTRPCQueryProcedure;
+    listTemplates: AnyTRPCQueryProcedure;
+  };
+  settings: {
+    notificationPreferences: AnyTRPCQueryProcedure;
+    updateNotificationPreferences: AnyTRPCMutationProcedure;
+  };
+  capabilities: {
+    storeKey: AnyTRPCMutationProcedure;
+    testKey: AnyTRPCMutationProcedure;
+    listCapabilitySettings: AnyTRPCQueryProcedure;
+    updateCapabilitySettings: AnyTRPCMutationProcedure;
+    listCapabilityMeta: AnyTRPCQueryProcedure;
+  };
+  authSocial: {
+    enabledSocialProviders: AnyTRPCQueryProcedure;
+  };
+  profile: {
+    getProfile: AnyTRPCQueryProcedure;
+    updateProfile: AnyTRPCMutationProcedure;
+    changePassword: AnyTRPCMutationProcedure;
+  };
+  org: {
+    getOrganization: AnyTRPCQueryProcedure;
+    createOrganization: AnyTRPCMutationProcedure;
+    updateOrganization: AnyTRPCMutationProcedure;
+    inviteMember: AnyTRPCMutationProcedure;
+    revokeInvite: AnyTRPCMutationProcedure;
+    changeRole: AnyTRPCMutationProcedure;
+    removeMember: AnyTRPCMutationProcedure;
+    transferOwnership: AnyTRPCMutationProcedure;
+    deleteOrganization: AnyTRPCMutationProcedure;
+    listMyOrganizations: AnyTRPCQueryProcedure;
+    orgBillingBalance: AnyTRPCQueryProcedure;
+    orgMemberUsage: AnyTRPCQueryProcedure;
+    orgBillingInfo: AnyTRPCQueryProcedure;
+    orgTopupCheckout: AnyTRPCMutationProcedure;
+    orgSetupIntent: AnyTRPCMutationProcedure;
+  };
+  adminMarketplace: {
+    listPlugins: AnyTRPCQueryProcedure;
+    updatePlugin: AnyTRPCMutationProcedure;
+    addPlugin: AnyTRPCMutationProcedure;
+  };
+};
+
+export type AppRouter = TRPCBuiltRouter<AnyTRPCRootTypes, AppRouterRecord>;

package/src/lib/trpc.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import { useState } from "react";
+import { PLATFORM_BASE_URL } from "./api-config";
+import { handleUnauthorized } from "./fetch-utils";
+import { getActiveTenantId, TenantProvider } from "./tenant-context";
+import type { AppRouter } from "./trpc-types";
+
+export const trpc = createTRPCReact<AppRouter>();
+
+async function trpcFetchWithAuth(url: RequestInfo | URL, options?: RequestInit) {
+  const res = await fetch(url, { ...options, credentials: "include" });
+  if (res.status === 401) {
+    handleUnauthorized();
+  }
+  return res;
+}
+
+/**
+ * Vanilla tRPC client for imperative calls (not React hooks).
+ * Used by admin-api.ts and other non-component code.
+ */
+export const trpcVanilla = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: `${PLATFORM_BASE_URL}/trpc`,
+      fetch: trpcFetchWithAuth,
+      headers() {
+        const tenantId = getActiveTenantId();
+        return tenantId ? { "x-tenant-id": tenantId } : {};
+      },
+    }),
+  ],
+});
+
+function makeQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30_000,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined;
+
+function getQueryClient(): QueryClient {
+  if (typeof window === "undefined") {
+    return makeQueryClient();
+  }
+  if (!browserQueryClient) {
+    browserQueryClient = makeQueryClient();
+  }
+  return browserQueryClient;
+}
+
+export function TRPCProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  const queryClient = getQueryClient();
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: `${PLATFORM_BASE_URL}/trpc`,
+          fetch: trpcFetchWithAuth,
+          headers() {
+            const tenantId = getActiveTenantId();
+            return tenantId ? { "x-tenant-id": tenantId } : {};
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <TenantProvider>{children}</TenantProvider>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}

package/src/lib/utils.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { cn, sanitizeRedirectUrl } from "./utils";
+
+describe("cn", () => {
+  it("merges class names", () => {
+    expect(cn("foo", "bar")).toBe("foo bar");
+  });
+
+  it("handles conditional classes", () => {
+    expect(cn("base", false && "hidden", "visible")).toBe("base visible");
+  });
+
+  it("deduplicates tailwind conflicts", () => {
+    expect(cn("px-2", "px-4")).toBe("px-4");
+  });
+
+  it("returns empty string for no inputs", () => {
+    expect(cn()).toBe("");
+  });
+});
+
+describe("sanitizeRedirectUrl", () => {
+  it("accepts safe relative paths", () => {
+    expect(sanitizeRedirectUrl("/dashboard")).toBe("/dashboard");
+    expect(sanitizeRedirectUrl("/settings/account")).toBe("/settings/account");
+  });
+
+  it("accepts paths with query strings", () => {
+    expect(sanitizeRedirectUrl("/foo?bar=1")).toBe("/foo?bar=1");
+  });
+
+  it("rejects protocol-relative URLs", () => {
+    expect(sanitizeRedirectUrl("//evil.com")).toBe("/");
+  });
+
+  it("rejects absolute URLs", () => {
+    expect(sanitizeRedirectUrl("https://evil.com")).toBe("/");
+  });
+
+  it("rejects bare strings without leading slash", () => {
+    expect(sanitizeRedirectUrl("dashboard")).toBe("/");
+  });
+
+  it("returns / for null", () => {
+    expect(sanitizeRedirectUrl(null)).toBe("/");
+  });
+
+  it("returns / for undefined", () => {
+    expect(sanitizeRedirectUrl(undefined)).toBe("/");
+  });
+
+  it("returns / for empty string", () => {
+    expect(sanitizeRedirectUrl("")).toBe("/");
+  });
+});

package/src/lib/utils.ts

@@ -0,0 +1,18 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Validate a redirect URL is a safe relative path.
+ * Accepts paths starting with "/" but rejects protocol-relative URLs like "//evil.com".
+ * Falls back to "/" for any unsafe value.
+ */
+export function sanitizeRedirectUrl(raw: string | null | undefined): string {
+  if (raw?.startsWith("/") && !raw.startsWith("//")) {
+    return raw;
+  }
+  return "/";
+}

package/src/lib/validate-redirect-url.ts

@@ -0,0 +1,39 @@
+/** Origins that are allowed as redirect targets from backend checkout responses. */
+export const ALLOWED_REDIRECT_ORIGINS: ReadonlySet<string> = new Set([
+  "https://checkout.stripe.com",
+  "https://billing.stripe.com",
+  "https://commerce.coinbase.com",
+  "https://pay.coinbase.com",
+  "https://payram.io",
+  "https://app.payram.io",
+]);
+
+/**
+ * Returns true if `url` is safe to navigate to.
+ * Allowed: same-origin, or origin is in ALLOWED_REDIRECT_ORIGINS.
+ * Rejects: non-http(s) schemes, relative URLs that could be abused, unknown origins.
+ */
+export function isAllowedRedirectUrl(url: string): boolean {
+  if (!url) {
+    return false;
+  }
+
+  let parsed: URL;
+  try {
+    parsed = new URL(url, window.location.origin);
+  } catch {
+    return false;
+  }
+
+  // Only http(s) schemes
+  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+    return false;
+  }
+
+  // Same-origin is always allowed
+  if (parsed.origin === window.location.origin) {
+    return true;
+  }
+
+  return ALLOWED_REDIRECT_ORIGINS.has(parsed.origin);
+}

package/src/lib/webmcp/feature-detect.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns true if the WebMCP API (navigator.modelContext) is available.
+ * Chrome 146+ DevTrial only. Returns false on all other browsers.
+ */
+export function isWebMCPAvailable(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof navigator !== "undefined" &&
+    "modelContext" in navigator &&
+    navigator.modelContext != null &&
+    typeof navigator.modelContext.registerTool === "function"
+  );
+}