@wopr-network/platform-ui-core 1.0.0

package/src/components/admin/tenant-table.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  type AdminUserSummary,
+  bulkGrantCredits,
+  bulkReactivateTenants,
+  bulkSuspendTenants,
+  getUsersList,
+} from "@/lib/admin-api";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+import { BulkActionsBar } from "./bulk-actions-bar";
+import { TenantRowActions } from "./tenant-row-actions";
+
+const PAGE_SIZE = 25;
+
+function statusBadgeClasses(status: string): string {
+  switch (status) {
+    case "active":
+      return "bg-terminal/15 text-terminal border border-terminal/20";
+    case "suspended":
+      return "bg-destructive/15 text-red-400 border border-destructive/20";
+    case "banned":
+      return "bg-destructive/30 text-red-300 border border-destructive/30";
+    case "trial":
+      return "bg-chart-3/15 text-amber-400 border border-chart-3/20";
+    default:
+      return "bg-secondary text-muted-foreground border border-border";
+  }
+}
+
+function creditColor(cents: number): string {
+  if (cents === 0) return "text-red-500";
+  if (cents < 200) return "text-amber-500";
+  return "text-terminal";
+}
+
+export function TenantTable() {
+  const [users, setUsers] = useState<AdminUserSummary[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [offset, setOffset] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const debounceRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+  const load = useCallback(async (searchTerm: string, pageOffset: number) => {
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const result = await getUsersList({
+        search: searchTerm || undefined,
+        limit: PAGE_SIZE,
+        offset: pageOffset,
+      });
+      setUsers(result.users);
+      setTotal(result.total);
+    } catch {
+      setLoadError("Failed to load users. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: search triggers via debounce not effect
+  useEffect(() => {
+    load(search, offset);
+  }, [load, offset]);
+
+  function handleSearchChange(value: string) {
+    setSearch(value);
+    setOffset(0);
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => load(value, 0), 300);
+  }
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function toggleAll() {
+    if (selected.size === total) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(users.map((u) => u.tenant_id)));
+    }
+  }
+
+  const reload = useCallback(() => load(search, offset), [load, search, offset]);
+
+  const hasSuspended = users.some((u) => selected.has(u.tenant_id) && u.status === "suspended");
+
+  async function handleBulkSuspend() {
+    const reason = window.prompt("Reason for suspension:");
+    if (!reason) return;
+    try {
+      await bulkSuspendTenants(Array.from(selected), reason);
+      setSelected(new Set());
+      reload();
+    } catch (err) {
+      toast.error(
+        `Failed to suspend tenants: ${err instanceof Error ? err.message : "Unknown error"}`,
+      );
+    }
+  }
+
+  async function handleBulkReactivate() {
+    try {
+      await bulkReactivateTenants(Array.from(selected));
+      setSelected(new Set());
+      reload();
+    } catch (err) {
+      toast.error(
+        `Failed to reactivate tenants: ${err instanceof Error ? err.message : "Unknown error"}`,
+      );
+    }
+  }
+
+  async function handleBulkGrantCredits() {
+    const amountStr = window.prompt("Amount to grant (in cents):");
+    if (!amountStr) return;
+    const amountCents = parseInt(amountStr, 10);
+    if (Number.isNaN(amountCents) || amountCents <= 0) return;
+    const reason = window.prompt("Reason for grant:");
+    if (!reason) return;
+    try {
+      await bulkGrantCredits(Array.from(selected), amountCents, reason);
+      setSelected(new Set());
+      reload();
+    } catch (err) {
+      toast.error(
+        `Failed to grant credits: ${err instanceof Error ? err.message : "Unknown error"}`,
+      );
+    }
+  }
+
+  function handleExport() {
+    const selectedUsers = users.filter((u) => selected.has(u.tenant_id));
+    const blob = new Blob([JSON.stringify(selectedUsers, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "tenants-export.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="space-y-3 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl font-bold uppercase tracking-wider text-terminal [text-shadow:0_0_10px_rgba(0,255,65,0.25)]">
+          USER MANAGEMENT
+        </h1>
+        <span className="text-sm text-muted-foreground font-mono">{total} users</span>
+      </div>
+
+      {/* Search */}
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search by email, name, or tenant ID..."
+          value={search}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          className="pl-9 focus:border-terminal focus:ring-terminal/20"
+        />
+      </div>
+
+      {/* Table */}
+      <div className="rounded-sm border border-terminal/10">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-secondary crt-scanlines">
+              <TableHead className="w-10">
+                <Checkbox
+                  checked={total > 0 && selected.size === total}
+                  onCheckedChange={toggleAll}
+                />
+              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Email</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Name</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Status</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider">Plan</TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">
+                Credits
+              </TableHead>
+              <TableHead className="text-xs font-medium uppercase tracking-wider text-right">
+                Agents
+              </TableHead>
+              <TableHead className="w-10" />
+            </TableRow>
+          </TableHeader>
+          <TableBody
+            className={cn(
+              "transition-opacity duration-150",
+              loading && users.length > 0 && "opacity-60",
+            )}
+          >
+            {loading && users.length === 0 ? (
+              Array.from({ length: 8 }).map((_, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable ID
+                <TableRow key={`skel-${i}`} className="h-10">
+                  {Array.from({ length: 8 }).map((_, j) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cells
+                    <TableCell key={`skel-${i}-${j}`}>
+                      <Skeleton className="h-4 w-full" style={{ animationDelay: `${i * 50}ms` }} />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : loadError ? (
+              <TableRow>
+                <TableCell colSpan={8} className="h-32 text-center">
+                  <p className="text-sm text-destructive font-mono">{loadError}</p>
+                </TableCell>
+              </TableRow>
+            ) : users.length === 0 && !loading ? (
+              <TableRow>
+                <TableCell colSpan={8} className="h-32 text-center">
+                  <p className="text-sm text-muted-foreground font-mono">
+                    &gt; No users found
+                    <span className="animate-ellipsis" />
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Try adjusting your search query
+                  </p>
+                </TableCell>
+              </TableRow>
+            ) : (
+              users.map((user) => (
+                <TableRow
+                  key={user.id}
+                  className={cn(
+                    "h-10 hover:bg-secondary/50",
+                    selected.has(user.tenant_id) && "bg-terminal/5",
+                  )}
+                >
+                  <TableCell>
+                    <Checkbox
+                      checked={selected.has(user.tenant_id)}
+                      onCheckedChange={() => toggleSelect(user.tenant_id)}
+                    />
+                  </TableCell>
+                  <TableCell className="font-mono text-sm">{user.email}</TableCell>
+                  <TableCell className="text-sm">{user.name ?? "--"}</TableCell>
+                  <TableCell>
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-sm px-2 py-0.5 text-xs font-medium",
+                        statusBadgeClasses(user.status),
+                      )}
+                    >
+                      {user.status}
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">{user.role}</TableCell>
+                  <TableCell
+                    className={cn(
+                      "text-right font-mono text-xs",
+                      creditColor(user.credit_balance_cents),
+                    )}
+                  >
+                    {formatCreditStandard(user.credit_balance_cents / 100)}
+                  </TableCell>
+                  <TableCell className="text-right text-xs text-muted-foreground">
+                    {user.agent_count}
+                  </TableCell>
+                  <TableCell>
+                    <TenantRowActions user={user} onAction={reload} />
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {total > PAGE_SIZE && (
+        <div className="flex items-center justify-between text-xs text-muted-foreground font-mono">
+          <span>
+            Showing {offset + 1}-{Math.min(offset + PAGE_SIZE, total)} of {total}
+          </span>
+          <div className="flex gap-2">
+            <Button
+              variant="ghost"
+              size="xs"
+              disabled={offset === 0}
+              onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="ghost"
+              size="xs"
+              disabled={offset + PAGE_SIZE >= total}
+              onClick={() => setOffset(offset + PAGE_SIZE)}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Bulk actions */}
+      <BulkActionsBar
+        selectedCount={selected.size}
+        allMatchingSelected={selected.size === users.length && users.length === total}
+        hasSuspendedInSelection={hasSuspended}
+        onGrantCredits={handleBulkGrantCredits}
+        onExport={handleExport}
+        onSuspend={handleBulkSuspend}
+        onReactivate={handleBulkReactivate}
+        onClearSelection={() => setSelected(new Set())}
+      />
+    </div>
+  );
+}

package/src/components/auth/auth-error.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { AlertTriangle } from "lucide-react";
+
+interface AuthErrorProps {
+  message: string;
+}
+
+export function AuthError({ message }: AuthErrorProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.2 }}
+      className="flex items-start gap-2 rounded-sm border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+    >
+      <AlertTriangle className="mt-0.5 size-4 shrink-0" />
+      <span>{message}</span>
+    </motion.div>
+  );
+}

package/src/components/auth/auth-redirect.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useSession } from "@/lib/auth-client";
+
+export function AuthRedirect() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isPending && session) {
+      router.replace("/marketplace");
+    }
+  }, [isPending, session, router]);
+
+  return null;
+}

package/src/components/auth/auth-shell.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+import { BrandWordmark } from "./wopr-wordmark";
+
+interface AuthShellProps {
+  children: ReactNode;
+}
+
+export function AuthShell({ children }: AuthShellProps) {
+  return (
+    <div className="flex flex-col items-center">
+      <BrandWordmark />
+      <motion.div
+        initial={{ opacity: 0, y: 20, scale: 0.98 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+        className="w-full"
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}

package/src/components/auth/email-verification-banner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Mail } from "lucide-react";
+import { Banner } from "@/components/ui/banner";
+import { useSession } from "@/lib/auth-client";
+import { ResendVerificationButton } from "./resend-verification-button";
+
+export function EmailVerificationBanner() {
+  const { data: session, isPending } = useSession();
+
+  if (isPending || !session?.user) return null;
+  if (session.user.emailVerified) return null;
+
+  return (
+    <Banner variant="warning" role="alert">
+      <Mail className="size-4 shrink-0" />
+      <span className="flex-1">Verify your email to unlock bot creation</span>
+      <ResendVerificationButton
+        email={session.user.email}
+        variant="ghost"
+        className="h-auto px-2 py-1.5 text-xs font-semibold underline underline-offset-4 text-amber-500 hover:text-amber-400"
+      />
+    </Banner>
+  );
+}

package/src/components/auth/email-verification-result-banner.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { CheckCircle, XCircle } from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Banner } from "@/components/ui/banner";
+import { Button } from "@/components/ui/button";
+
+export function EmailVerificationResultBanner() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const status = searchParams.get("status");
+  const [visible, setVisible] = useState(status === "success" || status === "error");
+
+  useEffect(() => {
+    if (status === "success" || status === "error") {
+      router.replace(pathname, { scroll: false });
+    }
+  }, [status, router, pathname]);
+
+  if (!visible) return null;
+
+  if (status === "success") {
+    return (
+      <Banner variant="terminal" role="status">
+        <CheckCircle className="size-4 shrink-0" />
+        <span className="flex-1">
+          Your account is verified. <span className="font-semibold">$5.00</span> in credits added.
+        </span>
+        <Button
+          asChild
+          variant="ghost"
+          size="xs"
+          className="h-auto px-2 py-1 text-xs font-semibold text-terminal hover:text-terminal/80"
+        >
+          <Link href="/fleet">Create your first bot &rarr;</Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="xs"
+          className="h-auto px-2 py-1 text-xs text-muted-foreground"
+          onClick={() => setVisible(false)}
+          aria-label="Dismiss"
+        >
+          Dismiss
+        </Button>
+      </Banner>
+    );
+  }
+
+  return (
+    <Banner variant="destructive" role="alert">
+      <XCircle className="size-4 shrink-0" />
+      <span className="flex-1">
+        Email verification failed. Please try again or contact support.
+      </span>
+      <Button
+        variant="ghost"
+        size="xs"
+        className="h-auto px-2 py-1 text-xs text-muted-foreground"
+        onClick={() => setVisible(false)}
+        aria-label="Dismiss"
+      >
+        Dismiss
+      </Button>
+    </Banner>
+  );
+}

package/src/components/auth/resend-verification-button.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
+
+interface ResendVerificationButtonProps {
+  email: string;
+  variant?: "terminal" | "outline" | "ghost" | "link";
+  className?: string;
+}
+
+export function ResendVerificationButton({
+  email,
+  variant = "terminal",
+  className,
+}: ResendVerificationButtonProps) {
+  const [cooldown, setCooldown] = useState(0);
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  const handleResend = useCallback(async () => {
+    if (cooldown > 0 || sending || !email) return;
+    setSending(true);
+    setError(null);
+    setSent(false);
+
+    try {
+      const { error: resendError } = await authClient.sendVerificationEmail({
+        email,
+        callbackURL: "/auth/verify?status=success",
+      });
+      if (resendError) {
+        setError(resendError.message ?? "Failed to send verification email");
+        return;
+      }
+      setSent(true);
+      setCooldown(59);
+      intervalRef.current = setInterval(() => {
+        setCooldown((prev) => {
+          if (prev <= 1) {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    } catch {
+      setError("A network error occurred. Please try again.");
+    } finally {
+      setSending(false);
+    }
+  }, [email, cooldown, sending]);
+
+  const buttonText = sending
+    ? "Sending..."
+    : cooldown > 0
+      ? `Resend in ${cooldown}s`
+      : "Resend verification email";
+
+  return (
+    <div className="flex flex-col gap-1">
+      <Button
+        type="button"
+        variant={variant}
+        className={className}
+        disabled={cooldown > 0 || sending || !email}
+        onClick={handleResend}
+      >
+        <span className={cooldown > 0 ? "tabular-nums" : undefined}>{buttonText}</span>
+      </Button>
+      {sent && cooldown > 0 && (
+        <motion.p
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2 }}
+          className="text-xs text-terminal"
+        >
+          Verification email sent!
+        </motion.p>
+      )}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/components/auth/wopr-wordmark.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { brandName } from "@/lib/brand-config";
+
+export function BrandWordmark() {
+  return (
+    <div className="mb-6 flex flex-col items-center gap-1">
+      <span className="text-2xl font-bold uppercase tracking-[0.3em] text-terminal">
+        {brandName()}
+      </span>
+      <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+        System Access Terminal
+      </span>
+    </div>
+  );
+}
+
+/** @deprecated Use BrandWordmark instead */
+export const WoprWordmark = BrandWordmark;