@wopr-network/platform-ui-core 1.0.0

package/src/components/billing/byok-callout.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import type { InferenceMode } from "@/lib/api";
+import { getInferenceMode } from "@/lib/api";
+import { brandName } from "@/lib/brand-config";
+
+export function ByokCallout({ compact }: { compact?: boolean }) {
+  const [mode, setMode] = useState<InferenceMode | null>(null);
+
+  useEffect(() => {
+    getInferenceMode()
+      .then(setMode)
+      .catch(() => setMode("byok"));
+  }, []);
+
+  if (mode === null) {
+    return compact ? (
+      <p className="text-xs text-muted-foreground">&nbsp;</p>
+    ) : (
+      <Card className="border-transparent bg-muted/30">
+        <CardContent className="py-4">
+          <div className="h-5" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (mode === "hosted") {
+    return <HostedCallout compact={compact} />;
+  }
+
+  if (compact) {
+    return (
+      <p className="text-xs text-muted-foreground">
+        All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your
+        inference.
+      </p>
+    );
+  }
+
+  return (
+    <Card className="border-emerald-500/25 bg-emerald-500/5">
+      <CardContent className="flex items-start gap-3 py-4">
+        <span className="mt-0.5 text-lg" aria-hidden="true">
+          *
+        </span>
+        <div className="space-y-1">
+          <p className="text-sm font-medium">Bring Your Own Keys</p>
+          <p className="text-sm text-muted-foreground">
+            All plans are BYOK — you pay your AI provider directly. {brandName()} never touches your
+            inference. We only charge for the orchestration layer: containers, plugins, and support.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function HostedCallout({ compact }: { compact?: boolean }) {
+  if (compact) {
+    return (
+      <p className="text-xs text-muted-foreground">
+        Hosted adapter — transparent per-use pricing with no markup surprises. Switch to BYOK
+        anytime in settings.
+      </p>
+    );
+  }
+
+  return (
+    <Card className="border-blue-500/25 bg-blue-500/5">
+      <CardContent className="flex items-start gap-3 py-4">
+        <span className="mt-0.5 text-lg" aria-hidden="true">
+          *
+        </span>
+        <div className="space-y-1">
+          <p className="text-sm font-medium">Hosted AI Adapter</p>
+          <p className="text-sm text-muted-foreground">
+            BYOK users pay their providers directly. Hosted users pay per use — transparent pricing,
+            no markup surprises. Each plan includes a monthly hosted credit.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/billing/coupon-input.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toUserMessage } from "@/lib/errors";
+import { trpcVanilla } from "@/lib/trpc";
+import { cn } from "@/lib/utils";
+
+type CouponState = "idle" | "loading" | "success" | "error";
+
+export function CouponInput() {
+  const [code, setCode] = useState("");
+  const [state, setState] = useState<CouponState>("idle");
+  const [message, setMessage] = useState("");
+  const [creditsGranted, setCreditsGranted] = useState(0);
+
+  async function handleApply() {
+    if (!code.trim()) return;
+    setState("loading");
+    setMessage("");
+    try {
+      const result = (await trpcVanilla.billing.applyCoupon.mutate({
+        code: code.trim().toUpperCase(),
+      })) as { creditsGranted: number; message: string };
+      setCreditsGranted(result.creditsGranted);
+      setMessage(result.message);
+      setState("success");
+    } catch (err) {
+      setMessage(toUserMessage(err, "Invalid coupon code"));
+      setState("error");
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="coupon-code">Coupon code</Label>
+      <div className="flex gap-2">
+        <Input
+          id="coupon-code"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value.toUpperCase());
+            if (state !== "idle" && state !== "loading") setState("idle");
+          }}
+          placeholder="Coupon code"
+          className={cn(
+            "font-mono uppercase max-w-xs",
+            state === "success" && "border-terminal/50",
+            state === "error" && "border-destructive/50",
+          )}
+          disabled={state === "loading" || state === "success"}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleApply();
+          }}
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleApply}
+          disabled={!code.trim() || state === "loading" || state === "success"}
+        >
+          {state === "loading" ? "Applying..." : "Apply"}
+        </Button>
+      </div>
+
+      <div aria-live="polite" aria-atomic="true">
+        {state === "success" && (
+          <p className="flex items-center gap-1.5 text-sm text-terminal">
+            <Check className="h-4 w-4" />
+            Code applied — +{creditsGranted} credits added to your balance
+          </p>
+        )}
+
+        {state === "error" && (
+          <p className="flex items-center gap-1.5 text-sm text-destructive">
+            <X className="h-4 w-4" />
+            {message}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/billing/credit-balance.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { CreditBalance as CreditBalanceData } from "@/lib/api";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+
+function useCountUp(target: number, duration = 1200) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    const start = performance.now();
+    let raf: number;
+    function tick(now: number) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      // ease-out cubic
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(eased * target);
+      if (progress < 1) raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+  return value;
+}
+
+function balanceColor(balance: number, runway: number | null) {
+  if (balance <= 2 || (runway !== null && runway <= 1)) return "text-destructive";
+  if (balance <= 10 || (runway !== null && runway <= 7)) return "text-amber-500";
+  return "text-primary dark:text-primary text-emerald-500";
+}
+
+export function CreditBalance({ data }: { data: CreditBalanceData }) {
+  const animatedBalance = useCountUp(data.balance);
+
+  const runwayText =
+    data.runway === null
+      ? "N/A"
+      : data.runway === 0
+        ? "Suspended"
+        : `~${data.runway} day${data.runway === 1 ? "" : "s"}`;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Credit Balance</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div
+            className={cn("text-4xl font-bold font-mono", balanceColor(data.balance, data.runway))}
+          >
+            {formatCreditStandard(animatedBalance)}
+          </div>
+          <div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
+            <div>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">
+                Daily burn
+              </span>
+              <span className="font-medium text-foreground">
+                {formatCreditStandard(data.dailyBurn)}/day
+              </span>
+            </div>
+            <div>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">Runway</span>
+              <span className="font-medium text-foreground">{runwayText}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

package/src/components/billing/degraded-state-banner.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { Banner } from "@/components/ui/banner";
+import type { AccountStatusValue } from "@/lib/api";
+import { getAccountStatus } from "@/lib/api";
+
+function daysUntil(deadline: string): number {
+  const ms = new Date(deadline).getTime() - Date.now();
+  return Math.max(0, Math.ceil(ms / 86_400_000));
+}
+
+export function DegradedStateBanner() {
+  const [status, setStatus] = useState<AccountStatusValue | null>(null);
+  const [reason, setReason] = useState<string | null>(null);
+  const [graceDeadline, setGraceDeadline] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  const load = useCallback(async () => {
+    const data = await getAccountStatus();
+    if (!data) return;
+    setStatus(data.status);
+    setReason(data.statusReason);
+    setGraceDeadline(data.graceDeadline);
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (dismissed || !status || status === "active") return null;
+
+  if (status === "grace_period") {
+    const days = graceDeadline ? daysUntil(graceDeadline) : null;
+    return (
+      <Banner variant="warning" role="alert">
+        <span className="flex-1">
+          ACTION REQUIRED —{" "}
+          {days !== null
+            ? `${days} day${days === 1 ? "" : "s"} to resolve`
+            : "resolve soon to avoid suspension"}
+          {reason ? ` (${reason})` : ""}
+        </span>
+        <Link href="/billing" className="font-semibold underline underline-offset-4">
+          Update payment method
+        </Link>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          className="ml-2 p-1 rounded hover:bg-white/10 min-w-[44px] min-h-[44px] flex items-center justify-center"
+          aria-label="Dismiss"
+        >
+          <XIcon className="size-4" />
+        </button>
+      </Banner>
+    );
+  }
+
+  if (status === "suspended") {
+    return (
+      <Banner variant="destructive" role="alert" className="animate-gentle-pulse">
+        <span className="flex-1">
+          ACCOUNT SUSPENDED — bots are offline
+          {reason ? ` (${reason})` : ""}
+        </span>
+        <Link href="/billing" className="font-semibold underline underline-offset-4">
+          Contact support
+        </Link>
+        <button
+          type="button"
+          onClick={() => setDismissed(true)}
+          className="ml-2 p-1 rounded hover:bg-white/10 min-w-[44px] min-h-[44px] flex items-center justify-center"
+          aria-label="Dismiss"
+        >
+          <XIcon className="size-4" />
+        </button>
+      </Banner>
+    );
+  }
+
+  if (status === "banned") {
+    return (
+      <Banner variant="destructive" role="alert">
+        <span className="flex-1">
+          ACCOUNT TERMINATED
+          {reason ? ` — ${reason}` : ""}
+        </span>
+      </Banner>
+    );
+  }
+
+  return null;
+}

package/src/components/billing/dividend-banner.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { TrendingUpIcon } from "lucide-react";
+import Link from "next/link";
+import { useCountUp } from "@/hooks/use-count-up";
+import type { DividendWalletStats } from "@/lib/api";
+import { brandName } from "@/lib/brand-config";
+import { formatCreditStandard } from "@/lib/format-credit";
+
+interface DividendBannerProps {
+  todayAmountCents: number;
+  stats: DividendWalletStats;
+}
+
+type BannerState = "received" | "projected" | "ineligible";
+
+function getBannerState(todayAmountCents: number, stats: DividendWalletStats): BannerState {
+  if (!stats.userEligible) return "ineligible";
+  if (todayAmountCents > 0) return "received";
+  return "projected";
+}
+
+export function DividendBanner({ todayAmountCents, stats }: DividendBannerProps) {
+  const state = getBannerState(todayAmountCents, stats);
+  const animatedAmount = useCountUp(todayAmountCents / 100, 1200);
+
+  return (
+    <AnimatePresence mode="wait">
+      {state === "received" && (
+        <motion.div
+          key="received"
+          initial={{ opacity: 0, scale: 0.96 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+          className="rounded-md border border-terminal/30 bg-terminal/10 px-6 py-5 shadow-[0_0_15px_rgba(0,255,65,0.15)]"
+        >
+          <div className="flex items-center gap-3">
+            <TrendingUpIcon className="size-5 text-terminal shrink-0" />
+            <div>
+              <p className="text-lg font-bold text-terminal">
+                {brandName()} paid you{" "}
+                <span className="text-2xl font-bold font-mono tabular-nums">
+                  {formatCreditStandard(animatedAmount)}
+                </span>{" "}
+                today.
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Community dividend from the daily pool
+              </p>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {state === "projected" && (
+        <motion.div
+          key="projected"
+          initial={{ opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+          className="rounded-md border border-terminal/20 bg-terminal/5 px-6 py-4"
+        >
+          <div className="flex items-center gap-3">
+            <TrendingUpIcon className="size-5 text-terminal-dim shrink-0" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                Your projected share: ~{formatCreditStandard(stats.perUserCents / 100)}/day
+              </p>
+              <p className="text-xs text-muted-foreground">Next distribution at midnight UTC</p>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {state === "ineligible" && (
+        <motion.div
+          key="ineligible"
+          initial={{ opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+          className="rounded-md border border-terminal/20 bg-terminal/5 px-6 py-4"
+        >
+          <p className="text-sm text-muted-foreground">
+            Purchase credits to join the community dividend pool.{" "}
+            <Link href="#buy" className="font-semibold text-terminal underline underline-offset-4">
+              Buy credits
+            </Link>
+          </p>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/billing/dividend-eligibility.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ClockIcon } from "lucide-react";
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+interface DividendEligibilityProps {
+  windowExpiresAt: string | null;
+  eligible: boolean;
+}
+
+export function DividendEligibility({ windowExpiresAt, eligible }: DividendEligibilityProps) {
+  if (!eligible || !windowExpiresAt) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      >
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center gap-3">
+              <ClockIcon className="size-4 text-muted-foreground shrink-0" />
+              <div>
+                <p className="text-sm font-medium">Not in the pool</p>
+                <p className="text-xs text-muted-foreground">
+                  <Link href="#buy" className="text-terminal underline underline-offset-4">
+                    Buy credits
+                  </Link>{" "}
+                  to start earning daily dividends
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+    );
+  }
+
+  const now = Date.now();
+  const expiresMs = new Date(windowExpiresAt).getTime();
+  const daysRemaining = Math.max(0, Math.ceil((expiresMs - now) / 86400000));
+  const progressPercent = (daysRemaining / 7) * 100;
+  const isExpiringSoon = daysRemaining <= 2;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+    >
+      <Card>
+        <CardContent className="p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ClockIcon
+              className={cn(
+                "size-4 shrink-0",
+                isExpiringSoon ? "text-terminal-dim" : "text-terminal",
+              )}
+            />
+            <p className="text-sm font-medium">
+              You&apos;re in the pool for{" "}
+              <span
+                className={cn("font-bold", isExpiringSoon ? "text-terminal-dim" : "text-terminal")}
+              >
+                {daysRemaining}
+              </span>{" "}
+              more day{daysRemaining === 1 ? "" : "s"}
+            </p>
+          </div>
+          <Progress
+            value={progressPercent}
+            className="h-2"
+            aria-label={`${daysRemaining} days remaining in dividend pool`}
+          />
+          {isExpiringSoon && (
+            <p className="text-xs text-terminal-dim">Buy credits to reset your 7-day window</p>
+          )}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

package/src/components/billing/dividend-pool-stats.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { UsersIcon } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCreditStandard } from "@/lib/format-credit";
+
+interface DividendPoolStatsProps {
+  poolCents: number;
+  activeUsers: number;
+  perUserCents: number;
+}
+
+export function DividendPoolStats({
+  poolCents,
+  activeUsers,
+  perUserCents,
+}: DividendPoolStatsProps) {
+  if (poolCents === 0 && activeUsers === 0) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      >
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Community Pool</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">
+              Pool building... check back after the first purchase day.
+            </p>
+          </CardContent>
+        </Card>
+      </motion.div>
+    );
+  }
+
+  const poolDollars = formatCreditStandard(poolCents / 100);
+  const perUserDollars = formatCreditStandard(perUserCents / 100);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
+    >
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">Community Pool</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:gap-6 text-sm">
+            <div>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">
+                Today&apos;s pool
+              </span>
+              <span className="font-bold text-lg font-mono text-terminal">{poolDollars}</span>
+            </div>
+            <div>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">
+                Active users
+              </span>
+              <span className="font-bold text-lg font-mono flex items-center gap-1.5">
+                <UsersIcon className="size-4 text-muted-foreground" />
+                {activeUsers}
+              </span>
+            </div>
+            <div>
+              <span className="block text-xs uppercase tracking-wider text-primary/60">
+                Your share
+              </span>
+              <span className="font-bold text-lg font-mono text-terminal">
+                {perUserDollars}/day
+              </span>
+            </div>
+          </div>
+          <p className="mt-3 text-xs text-muted-foreground">
+            {activeUsers} users in the pool &mdash; your share: ~{perUserDollars}/day
+          </p>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}