@wopr-network/platform-ui-core 1.0.0

package/src/app/auth/verify/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { CheckCircle, Clock, Mail, ShieldAlert, XCircle } from "lucide-react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { AuthShell } from "@/components/auth/auth-shell";
+import { ResendVerificationButton } from "@/components/auth/resend-verification-button";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+function SuccessContent() {
+  const router = useRouter();
+  const [countdown, setCountdown] = useState(3);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          router.push("/onboarding");
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [router]);
+
+  return (
+    <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+      <CardHeader className="items-center">
+        <motion.div
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: "spring", stiffness: 200, damping: 15, delay: 0.1 }}
+        >
+          <div className="rounded-full bg-terminal/10 p-3">
+            <CheckCircle className="size-10 text-terminal" />
+          </div>
+        </motion.div>
+        <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal text-center">
+          Email verified
+        </CardTitle>
+        <CardDescription className="text-center">
+          Your email has been verified successfully.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <p className="text-sm text-center text-muted-foreground">
+          Your <span className="text-terminal font-medium">$5 signup credit</span> has been applied
+          to your account.
+        </p>
+        <p className="text-sm text-center text-muted-foreground">
+          Redirecting in <span className="text-terminal font-medium tabular-nums">{countdown}</span>
+          <span className="inline-block h-4 w-1.5 animate-pulse bg-terminal ml-0.5 align-middle" />
+        </p>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <Link
+          href="/onboarding"
+          className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+        >
+          Continue to setup
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}
+
+function ErrorContent({
+  status,
+  reason,
+  email,
+}: {
+  status: string | null;
+  reason: string | null;
+  email: string | null;
+}) {
+  let icon: React.ReactNode;
+  let title: string;
+  let description: string;
+  let footer: React.ReactNode;
+
+  switch (reason) {
+    case "token-expired":
+      icon = (
+        <div className="rounded-full bg-amber-500/10 p-3">
+          <Clock className="size-10 text-amber-500" />
+        </div>
+      );
+      title = "Link expired";
+      description = "This verification link has expired.";
+      footer = email ? (
+        <CardContent>
+          <ResendVerificationButton email={email} className="w-full" />
+        </CardContent>
+      ) : (
+        <CardContent>
+          <Button variant="terminal" className="w-full" asChild>
+            <Link href="/login">Back to sign in</Link>
+          </Button>
+        </CardContent>
+      );
+      break;
+
+    case "already-verified":
+      icon = (
+        <div className="rounded-full bg-muted/50 p-3">
+          <Mail className="size-10 text-muted-foreground" />
+        </div>
+      );
+      title = "Already verified";
+      description = "This email address has already been verified.";
+      footer = null;
+      break;
+
+    case "invalid-token":
+      icon = (
+        <div className="rounded-full bg-destructive/10 p-3">
+          <ShieldAlert className="size-10 text-destructive" />
+        </div>
+      );
+      title = "Invalid link";
+      description = "This verification link is invalid or malformed.";
+      footer = null;
+      break;
+
+    default:
+      icon = (
+        <div className="rounded-full bg-destructive/10 p-3">
+          <XCircle className="size-10 text-destructive" />
+        </div>
+      );
+      title = "Verification failed";
+      description = status
+        ? "Something went wrong verifying your email."
+        : "No verification status provided.";
+      footer = null;
+      break;
+  }
+
+  const titleColor = reason === "already-verified" ? "text-terminal" : "text-destructive";
+  const footerLink =
+    reason === "already-verified" ? (
+      <Link
+        href="/login"
+        className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+      >
+        Sign in
+      </Link>
+    ) : (
+      <Link
+        href="/login"
+        className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
+      >
+        Back to sign in
+      </Link>
+    );
+
+  return (
+    <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+      <CardHeader className="items-center">
+        <motion.div
+          initial={{ opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, ease: "easeOut" }}
+        >
+          {icon}
+        </motion.div>
+        <CardTitle
+          className={`text-sm font-medium uppercase tracking-widest ${titleColor} text-center`}
+        >
+          {title}
+        </CardTitle>
+        <CardDescription className="text-center">{description}</CardDescription>
+      </CardHeader>
+      {footer}
+      <CardFooter className="justify-center">{footerLink}</CardFooter>
+    </Card>
+  );
+}
+
+function VerifyContent() {
+  const searchParams = useSearchParams();
+  const status = searchParams.get("status");
+  const reason = searchParams.get("reason");
+  const emailParam = searchParams.get("email");
+
+  const isSuccess = status === "success";
+
+  return (
+    <div className="relative flex min-h-screen items-center justify-center bg-background px-4 overflow-hidden">
+      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+        <div className="h-[500px] w-[500px] rounded-full bg-terminal/5 blur-[120px]" />
+      </div>
+      <div className="relative z-10 w-full max-w-sm">
+        <AuthShell>
+          {isSuccess ? (
+            <SuccessContent />
+          ) : (
+            <ErrorContent status={status} reason={reason} email={emailParam} />
+          )}
+        </AuthShell>
+      </div>
+    </div>
+  );
+}
+
+export default function VerifyPage() {
+  return (
+    <Suspense>
+      <VerifyContent />
+    </Suspense>
+  );
+}

package/src/app/channels/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { AlertTriangleIcon, HomeIcon, RefreshCwIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { logger } from "@/lib/logger";
+
+const log = logger("error-boundary:channels");
+
+export default function ChannelsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Channels error", error);
+  }, [error]);
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <AlertTriangleIcon className="size-6 text-destructive" />
+            <CardTitle className="text-xl">Channels Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong loading channels. This may be a temporary issue.
+          </p>
+          {isDev && (
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              onClick={() => setShowDetails((v) => !v)}
+              className="h-auto p-0 text-muted-foreground"
+            >
+              {showDetails ? "Hide" : "Show"} error details
+            </Button>
+          )}
+          {isDev && showDetails && (
+            <pre className="max-h-48 overflow-auto rounded-md border bg-muted p-3 text-xs">
+              {error.message}
+              {error.stack && `\n\n${error.stack}`}
+              {error.digest && `\n\nDigest: ${error.digest}`}
+            </pre>
+          )}
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button onClick={reset}>
+            <RefreshCwIcon />
+            Try Again
+          </Button>
+          <Button variant="outline" asChild>
+            <a href="/dashboard">
+              <HomeIcon />
+              Dashboard
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/app/channels/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ChannelsLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }, (_, n) => `sk-${n}`).map((skId) => (
+          <div key={skId} className="rounded-sm border p-6 space-y-4">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-10 w-10 rounded-lg" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-5 w-28" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/channels/page.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Instance } from "@/lib/api";
+import { listInstances } from "@/lib/api";
+import { getBrandConfig } from "@/lib/brand-config";
+import { type ChannelManifest, getChannelManifests } from "@/lib/channel-manifests";
+import { toUserMessage } from "@/lib/errors";
+
+const staggerContainer = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.08 } },
+} as const;
+
+const staggerItem = {
+  hidden: { opacity: 0, y: 12 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.35, ease: "easeOut" as const },
+  },
+} as const;
+
+export default function ChannelsPage() {
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [channelManifests, setChannelManifests] = useState<ChannelManifest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [retryKey, setRetryKey] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retryKey is an intentional trigger, not a value used inside the effect
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    async function load() {
+      try {
+        const [data, manifests] = await Promise.all([listInstances(), getChannelManifests()]);
+        if (!cancelled) {
+          setInstances(data);
+          setChannelManifests(manifests);
+        }
+      } catch (err) {
+        if (!cancelled) setError(toUserMessage(err, "Failed to load instances"));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [retryKey]);
+
+  const connectedPluginIds = new Set(instances.flatMap((inst) => inst.channels));
+
+  const singleBotId = instances.length === 1 ? instances[0].id : null;
+
+  return (
+    <div className="p-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-widest uppercase">COMMS CHANNELS</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Connect messaging platforms to your {getBrandConfig().productName}. Each channel is driven
+          by a plugin manifest.
+        </p>
+      </div>
+
+      {loading && (
+        <section className="mb-10">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-terminal">
+            LINKED
+          </h2>
+          <p className="mb-4 font-mono text-sm text-terminal/60">
+            &gt; QUERYING CHANNEL STATUS...
+            <span className="animate-[pulse-dot_1s_step-end_infinite]">_</span>
+          </p>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 3 }, (_, i) => `skel-${i}`).map((key) => (
+              <Card key={key} className="border-terminal/20">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <Skeleton className="h-10 w-10 rounded-lg" />
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-32" />
+                      <Skeleton className="h-3 w-24" />
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <Skeleton className="h-3 w-40" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {error && (
+        <div className="mb-6 space-y-3">
+          <div className="rounded-sm border border-red-500/25 bg-red-500/10 px-4 py-3 font-mono text-sm text-red-500">
+            &gt; CHANNEL QUERY FAILED: {error}
+          </div>
+          <Button
+            variant="terminal"
+            size="sm"
+            onClick={() => {
+              setError(null);
+              setRetryKey((k) => k + 1);
+            }}
+          >
+            RETRY
+          </Button>
+        </div>
+      )}
+
+      {!loading && !error && (
+        <>
+          <section className="mb-10">
+            <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-terminal">
+              LINKED
+            </h2>
+            {instances.some((inst) => inst.channels.length > 0) ? (
+              <motion.div
+                variants={staggerContainer}
+                initial="hidden"
+                animate="show"
+                className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+              >
+                {instances
+                  .filter((inst) => inst.channels.length > 0)
+                  .flatMap((inst) =>
+                    inst.channels.map((channelId) => {
+                      const manifest = channelManifests.find((m) => m.id === channelId);
+                      if (!manifest) return null;
+                      return (
+                        <motion.div key={`${inst.id}-${channelId}`} variants={staggerItem}>
+                          <Card className="border-terminal/20 shadow-[0_0_6px_rgba(0,255,65,0.08)] transition-colors">
+                            <CardHeader>
+                              <div className="flex items-center gap-3">
+                                <motion.div
+                                  className="flex h-10 w-10 items-center justify-center rounded-lg text-lg font-bold text-white"
+                                  style={{ backgroundColor: manifest.color }}
+                                  whileHover={{
+                                    scale: 1.15,
+                                    rotate: [0, -5, 5, 0],
+                                  }}
+                                  transition={{ duration: 0.4 }}
+                                >
+                                  {manifest.name[0]}
+                                </motion.div>
+                                <div>
+                                  <CardTitle className="flex items-center gap-2">
+                                    {manifest.name}
+                                    <Badge variant="terminal" className="gap-1.5">
+                                      <span className="size-1.5 rounded-full bg-emerald-500 animate-[pulse-dot_2s_ease-in-out_infinite]" />
+                                      Connected
+                                    </Badge>
+                                  </CardTitle>
+                                  <CardDescription>{inst.name}</CardDescription>
+                                </div>
+                              </div>
+                            </CardHeader>
+                            <CardContent>
+                              <Button variant="ghost" size="sm" asChild>
+                                <Link href={`/instances/${inst.id}?tab=channels`}>
+                                  View Details
+                                </Link>
+                              </Button>
+                            </CardContent>
+                          </Card>
+                        </motion.div>
+                      );
+                    }),
+                  )
+                  .filter(Boolean)}
+              </motion.div>
+            ) : (
+              <div className="flex h-40 items-center justify-center rounded-sm border border-dashed border-terminal/20">
+                <p className="font-mono text-sm text-terminal/60">
+                  &gt; NO CHANNELS LINKED. YOUR BOT IS ISOLATED.
+                </p>
+              </div>
+            )}
+          </section>
+
+          <section>
+            <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+              AVAILABLE
+            </h2>
+            <motion.div
+              variants={staggerContainer}
+              initial="hidden"
+              animate="show"
+              className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
+            >
+              {channelManifests
+                .filter((m) => !connectedPluginIds.has(m.id))
+                .map((manifest) => (
+                  <motion.div key={manifest.id} variants={staggerItem}>
+                    <motion.div
+                      whileHover={{ y: -4, scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 400,
+                        damping: 25,
+                      }}
+                    >
+                      <Card className="flex flex-col transition-colors hover:border-terminal/30">
+                        <CardHeader>
+                          <div className="flex items-center gap-3">
+                            <motion.div
+                              className="flex h-10 w-10 items-center justify-center rounded-lg text-lg font-bold text-white"
+                              style={{ backgroundColor: manifest.color }}
+                              whileHover={{
+                                scale: 1.15,
+                                rotate: [0, -5, 5, 0],
+                              }}
+                              transition={{ duration: 0.4 }}
+                            >
+                              {manifest.name[0]}
+                            </motion.div>
+                            <div>
+                              <CardTitle>{manifest.name}</CardTitle>
+                              <CardDescription>{manifest.description}</CardDescription>
+                            </div>
+                          </div>
+                        </CardHeader>
+                        <CardContent className="mt-auto">
+                          {singleBotId ? (
+                            <Button variant="terminal" className="w-full" asChild>
+                              <Link href={`/channels/setup/${manifest.id}?botId=${singleBotId}`}>
+                                Connect
+                              </Link>
+                            </Button>
+                          ) : instances.length > 1 ? (
+                            <Button variant="terminal" className="w-full" asChild>
+                              <Link href="/instances">Select Instance to Connect</Link>
+                            </Button>
+                          ) : (
+                            <Button variant="terminal" className="w-full" disabled>
+                              Create an Instance First
+                            </Button>
+                          )}
+                        </CardContent>
+                      </Card>
+                    </motion.div>
+                  </motion.div>
+                ))}
+            </motion.div>
+          </section>
+        </>
+      )}
+    </div>
+  );
+}