@wopr-network/platform-ui-core 1.0.0

package/src/app/instances/new/create-instance-client.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Check } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { usePluginRegistry } from "@/hooks/use-plugin-registry";
+import { createInstance } from "@/lib/api";
+import { productName } from "@/lib/brand-config";
+import { toUserMessage } from "@/lib/errors";
+import { cn } from "@/lib/utils";
+
+const PRESET_ACCENT_COLORS: Record<string, string> = {
+  "discord-ai-bot": "#5865F2",
+  "slack-ai-assistant": "#4A154B",
+  "multi-channel": "#6366F1",
+  "voice-enabled": "#8B5CF6",
+  "api-only": "#FF6B6B",
+};
+
+export function CreateInstanceClient() {
+  const { providerOptions, channelOptions, pluginOptions, presets, loading } = usePluginRegistry();
+  const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [provider, setProvider] = useState("anthropic");
+  const [selectedChannels, setSelectedChannels] = useState<string[]>([]);
+  const [selectedPlugins, setSelectedPlugins] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [created, setCreated] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [nameError, setNameError] = useState<string | null>(null);
+
+  const NAME_PATTERN = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/;
+
+  function validateName(value: string): string | null {
+    if (!value.trim()) return null;
+    if (!NAME_PATTERN.test(value)) {
+      return "Lowercase letters, numbers, and hyphens only. Must start and end with a letter or number.";
+    }
+    return null;
+  }
+
+  function handleNameChange(e: { target: { value: string } }) {
+    const value = e.target.value;
+    setName(value);
+    setNameError(validateName(value));
+  }
+
+  function handlePresetSelect(presetId: string) {
+    if (selectedPreset === presetId) {
+      setSelectedPreset(null);
+      setSelectedChannels([]);
+      setSelectedPlugins([]);
+      setProvider("anthropic");
+      return;
+    }
+    setSelectedPreset(presetId);
+    const preset = presets.find((p) => p.id === presetId);
+    if (preset) {
+      setSelectedChannels(preset.channels);
+      setSelectedPlugins(preset.plugins);
+      if (preset.providers.length > 0) {
+        setProvider(preset.providers[0]);
+      }
+    }
+  }
+
+  function toggleChannel(ch: string) {
+    setSelectedChannels((prev) =>
+      prev.includes(ch) ? prev.filter((c) => c !== ch) : [...prev, ch],
+    );
+  }
+
+  function togglePlugin(p: string) {
+    setSelectedPlugins((prev) => (prev.includes(p) ? prev.filter((x) => x !== p) : [...prev, p]));
+  }
+
+  async function handleSubmit() {
+    if (!name.trim()) return;
+    const validationError = validateName(name);
+    if (validationError) {
+      setNameError(validationError);
+      return;
+    }
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      const preset = presets.find((p) => p.id === selectedPreset);
+      await createInstance({
+        name: name.trim(),
+        template: preset?.name ?? "Custom",
+        provider,
+        channels: selectedChannels,
+        plugins: selectedPlugins,
+      });
+      setCreated(true);
+    } catch (err) {
+      setSubmitError(toUserMessage(err, "Failed to create instance"));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (created) {
+    return (
+      <div className="flex h-[60vh] flex-col items-center justify-center gap-6">
+        <motion.div
+          className="flex h-16 w-16 items-center justify-center rounded-full border border-terminal/30 bg-terminal/10"
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ type: "spring", stiffness: 300, damping: 20 }}
+        >
+          <Check className="h-8 w-8 text-terminal" />
+        </motion.div>
+        <motion.h2
+          className="text-xl font-semibold"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          Instance created
+        </motion.h2>
+        <motion.p
+          className="text-muted-foreground"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
+          Your instance <span className="font-medium text-terminal">&ldquo;{name}&rdquo;</span> has
+          been created successfully.
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+        >
+          <Button variant="terminal" asChild>
+            <Link href="/instances">Back to Instances</Link>
+          </Button>
+        </motion.div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-[60vh] items-center justify-center">
+        <p className="animate-pulse text-sm text-muted-foreground">Loading plugins...</p>
+      </div>
+    );
+  }
+
+  const visiblePresets = presets.filter((p) => p.id !== "custom");
+
+  return (
+    <motion.div
+      className="mx-auto max-w-3xl space-y-6"
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, ease: "easeOut" }}
+    >
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">Create Instance</h1>
+        <p className="text-sm text-muted-foreground">
+          Launch a new {productName()} bot. Pick a preset or go custom.
+        </p>
+      </div>
+
+      {/* Instance Name (required, above presets) */}
+      <div className="space-y-2">
+        <Label htmlFor="instance-name">Instance Name</Label>
+        <Input
+          id="instance-name"
+          placeholder="my-instance"
+          value={name}
+          onChange={handleNameChange}
+          aria-invalid={nameError !== null}
+          aria-describedby={nameError ? "instance-name-error" : "instance-name-hint"}
+        />
+        {nameError ? (
+          <p id="instance-name-error" className="text-xs text-red-500">
+            {nameError}
+          </p>
+        ) : (
+          <p id="instance-name-hint" className="text-xs text-muted-foreground/60">
+            Lowercase letters, numbers, and hyphens only
+          </p>
+        )}
+      </div>
+
+      <Separator />
+
+      {/* Preset (optional) */}
+      <div className="space-y-3">
+        <div>
+          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">
+            QUICK START
+          </div>
+          <h2 className="text-sm font-medium text-muted-foreground">
+            Select a preset to auto-fill, or skip to configure manually
+          </h2>
+        </div>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {visiblePresets.map((preset, index) => (
+            <motion.div
+              key={preset.id}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.25, delay: index * 0.05 }}
+            >
+              <Card
+                className={cn(
+                  "relative cursor-pointer transition-all hover:border-terminal/40 hover:shadow-[0_0_8px_rgba(0,255,65,0.15)]",
+                  "border-l-2",
+                  selectedPreset === preset.id &&
+                    "border-terminal bg-terminal/5 shadow-[0_0_12px_rgba(0,255,65,0.2)]",
+                )}
+                style={{
+                  borderLeftColor: PRESET_ACCENT_COLORS[preset.id] ?? "transparent",
+                }}
+                onClick={() => handlePresetSelect(preset.id)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handlePresetSelect(preset.id);
+                  }
+                }}
+              >
+                {selectedPreset === preset.id && (
+                  <motion.div
+                    className="absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-terminal/20 text-terminal"
+                    initial={{ scale: 0 }}
+                    animate={{ scale: 1 }}
+                    transition={{ type: "spring", stiffness: 500, damping: 25 }}
+                  >
+                    <Check className="h-3 w-3" />
+                  </motion.div>
+                )}
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm">{preset.name}</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <CardDescription className="text-xs">{preset.description}</CardDescription>
+                  <div className="flex flex-wrap gap-1">
+                    {[...preset.channels, ...preset.providers, ...preset.plugins].map((tag) => (
+                      <span
+                        key={tag}
+                        className="inline-block rounded-sm bg-muted px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-muted-foreground"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  {preset.keyCount > 0 && (
+                    <p className="text-[10px] text-muted-foreground/70">
+                      {preset.keyCount} {preset.keyCount === 1 ? "key" : "keys"} needed
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Configuration */}
+      <div className="space-y-4">
+        <div>
+          <div className="font-mono text-xs uppercase tracking-[0.3em] text-terminal/60">
+            CONFIGURATION
+          </div>
+          <h2 className="text-sm font-medium text-muted-foreground">
+            Fine-tune your instance settings
+          </h2>
+        </div>
+
+        <div className="space-y-2">
+          <label htmlFor="provider-select" className="text-sm text-muted-foreground">
+            Provider
+          </label>
+          <Select value={provider} onValueChange={setProvider}>
+            <SelectTrigger id="provider-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {providerOptions.map((p) => (
+                <SelectItem key={p.value} value={p.value}>
+                  {p.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Channels */}
+      <div className="space-y-3">
+        <h2 className="text-sm font-medium">Channels</h2>
+        <div className="flex flex-wrap gap-2">
+          {channelOptions.map((ch) => (
+            <Button
+              key={ch.value}
+              variant={selectedChannels.includes(ch.value) ? "default" : "outline"}
+              size="sm"
+              onClick={() => toggleChannel(ch.value)}
+            >
+              {ch.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Plugins */}
+      <div className="space-y-3">
+        <h2 className="text-sm font-medium">Plugins</h2>
+        <div className="flex flex-wrap gap-2">
+          {pluginOptions.map((p) => (
+            <Button
+              key={p.value}
+              variant={selectedPlugins.includes(p.value) ? "default" : "outline"}
+              size="sm"
+              onClick={() => togglePlugin(p.value)}
+            >
+              {p.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <Separator />
+
+      {submitError && (
+        <motion.div
+          className="rounded-md border border-red-500/25 bg-red-500/10 px-4 py-3 text-sm text-red-500"
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: "auto" }}
+        >
+          <span className="font-bold">&gt; ERROR:</span> {submitError}
+        </motion.div>
+      )}
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+        <Button variant="outline" asChild>
+          <Link href="/instances">Cancel</Link>
+        </Button>
+        <Button
+          variant="terminal"
+          className={cn(submitting && "animate-[terminal-pulse_2s_ease-in-out_infinite]")}
+          onClick={handleSubmit}
+          disabled={!name.trim() || !!nameError || submitting}
+        >
+          {submitting ? "Creating..." : "Create Instance"}
+        </Button>
+      </div>
+    </motion.div>
+  );
+}

package/src/app/instances/new/page.tsx

@@ -0,0 +1,9 @@
+import { CreateInstanceClient } from "./create-instance-client";
+
+export default function NewInstancePage() {
+  return (
+    <div className="p-6">
+      <CreateInstanceClient />
+    </div>
+  );
+}

package/src/app/instances/page.tsx

@@ -0,0 +1,9 @@
+import { InstanceListClient } from "./instance-list-client";
+
+export default function InstancesPage() {
+  return (
+    <div className="p-6">
+      <InstanceListClient />
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,83 @@
+import { MotionConfig } from "framer-motion";
+import type { Metadata } from "next";
+import { JetBrains_Mono } from "next/font/google";
+import { headers } from "next/headers";
+import { Toaster } from "sonner";
+import { ThemeProvider } from "@/components/theme-provider";
+import { SITE_URL } from "@/lib/api-config";
+import { getBrandConfig } from "@/lib/brand-config";
+import { TRPCProvider } from "@/lib/trpc";
+import "./globals.css";
+
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+const brand = getBrandConfig();
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: `${brand.productName} — AI Agent Platform`,
+    template: `%s | ${brand.brandName}`,
+  },
+  description: `${brand.tagline} ${brand.price ? `${brand.price}.` : ""} ${brand.domain}`,
+  openGraph: {
+    type: "website",
+    siteName: brand.brandName,
+    title: `${brand.productName} — AI Agent Platform`,
+    description: `${brand.tagline} ${brand.price ? `${brand.price}.` : ""} ${brand.domain}`,
+    url: SITE_URL,
+    images: [
+      { url: "/og", width: 1200, height: 630, alt: `${brand.productName} — AI Agent Platform` },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `${brand.productName} — AI Agent Platform`,
+    description: `${brand.tagline} ${brand.price ? `${brand.price}.` : ""} ${brand.domain}`,
+    images: ["/og"],
+  },
+  alternates: {
+    canonical: SITE_URL,
+  },
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/icon.svg", type: "image/svg+xml" },
+    ],
+    apple: "/apple-icon",
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const nonce = (await headers()).get("x-nonce") ?? undefined;
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>{nonce && <meta property="csp-nonce" content={nonce} />}</head>
+      <body className={`${jetbrainsMono.variable} antialiased`}>
+        <MotionConfig nonce={nonce}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+            nonce={nonce}
+          >
+            <TRPCProvider>
+              {children}
+              <Toaster theme="dark" richColors />
+            </TRPCProvider>
+          </ThemeProvider>
+        </MotionConfig>
+      </body>
+    </html>
+  );
+}

package/src/app/not-found.tsx

@@ -0,0 +1,38 @@
+import { HomeIcon, SearchXIcon } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { brandName } from "@/lib/brand-config";
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-screen items-center justify-center p-6">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <SearchXIcon aria-hidden="true" className="size-6 text-muted-foreground" />
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                {brandName()}
+              </p>
+              <CardTitle className="text-xl">404</CardTitle>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">
+            This page doesn&apos;t exist. It may have been moved or the URL might be incorrect.
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button asChild>
+            <Link href="/">
+              <HomeIcon aria-hidden="true" />
+              Dashboard
+            </Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </main>
+  );
+}

package/src/app/og/route.tsx

@@ -0,0 +1,50 @@
+import { ImageResponse } from "next/og";
+import { getBrandConfig } from "@/lib/brand-config";
+
+export const runtime = "edge";
+export async function GET() {
+  const brand = getBrandConfig();
+  return new ImageResponse(
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#000000",
+        padding: "80px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "32px",
+        }}
+      >
+        <div
+          style={{
+            fontSize: "56px",
+            fontWeight: 700,
+            color: "#00FF41",
+            textAlign: "center",
+            lineHeight: 1.2,
+          }}
+        >
+          {brand.tagline}
+        </div>
+        <div style={{ fontSize: "32px", color: "#A0A0A0" }}>
+          {brand.price ? `${brand.price}.` : ""} {brand.domain}
+        </div>
+      </div>
+    </div>,
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { LandingPage } from "@/components/landing/landing-page";
+import { SITE_URL } from "@/lib/api-config";
+import { getBrandConfig } from "@/lib/brand-config";
+
+const brand = getBrandConfig();
+
+const desc =
+  brand.tagline || `A ${brand.price || "$5/month"} supercomputer that runs your business.`;
+
+export const metadata: Metadata = {
+  title: `${brand.productName} — ${brand.tagline}`,
+  description: desc,
+  openGraph: {
+    title: `${brand.productName} — ${brand.tagline}`,
+    description: desc,
+    url: SITE_URL,
+    siteName: brand.productName,
+    type: "website",
+    images: [
+      {
+        url: "/og",
+        width: 1200,
+        height: 630,
+        alt: `${brand.productName} — ${brand.tagline}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `${brand.productName} — ${brand.tagline}`,
+    description: desc,
+    images: ["/og"],
+  },
+};
+
+export default function Page() {
+  return <LandingPage />;
+}

package/src/app/plugins/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:plugins");
+
+export default function PluginsError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    log.error("Plugins 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">Plugins Error</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">
+            Something went wrong loading plugins. 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>
+  );
+}