@wopr-network/platform-ui-core 1.0.0

package/src/components/sidebar.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { AccountSwitcher } from "@/components/account-switcher";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getCreditBalance } from "@/lib/api";
+import { signOut, useSession } from "@/lib/auth-client";
+import { productName } from "@/lib/brand-config";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { label: "Dashboard", href: "/dashboard" },
+  { label: "Chat", href: "/chat" },
+  { label: "Marketplace", href: "/marketplace" },
+  { label: "Channels", href: "/channels" },
+  { label: "Plugins", href: "/plugins" },
+  { label: "Instances", href: "/instances" },
+  { label: "Changesets", href: "/changesets" },
+  { label: "Network", href: "/dashboard/network" },
+  { label: "Fleet Health", href: "/fleet/health" },
+  { label: "Credits", href: "/billing/credits" },
+  { label: "Billing", href: "/billing/plans" },
+  { label: "Settings", href: "/settings/profile" },
+  { label: "Admin", href: "/admin/tenants" },
+];
+
+function isNavActive(href: string, pathname: string): boolean {
+  if (href === "/dashboard") return pathname === "/dashboard";
+  if (href === "/marketplace") return pathname === "/marketplace";
+  if (href === "/settings/profile") return pathname.startsWith("/settings");
+  if (href === "/billing/plans")
+    return pathname.startsWith("/billing") && !pathname.startsWith("/billing/credits");
+  if (href === "/billing/credits") return pathname.startsWith("/billing/credits");
+  if (href === "/admin/tenants") return pathname.startsWith("/admin");
+  return pathname.startsWith(href);
+}
+
+function balanceColorClass(balance: number): string {
+  if (balance === 0) return "text-red-500";
+  if (balance < 1) return "text-red-500";
+  if (balance <= 2) return "text-amber-500";
+  return "text-terminal";
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+}
+
+export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { data: session, isPending } = useSession();
+  const [creditBalance, setCreditBalance] = useState<number | null>(null);
+
+  const user = session?.user;
+
+  const loadBalance = useCallback(async () => {
+    try {
+      const data = await getCreditBalance();
+      setCreditBalance(data.balance);
+    } catch {
+      // Silently fail — balance is non-critical UI decoration
+    }
+  }, []);
+
+  useEffect(() => {
+    if (user) loadBalance();
+  }, [user, loadBalance]);
+
+  async function handleSignOut() {
+    try {
+      await signOut();
+    } catch {
+      // Continue to redirect even if signOut throws
+    }
+    router.push("/login");
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex h-14 items-center border-b border-sidebar-border px-6">
+        <span className="text-lg font-semibold tracking-tight text-terminal [text-shadow:0_0_12px_rgba(0,255,65,0.4)]">
+          {productName()}
+        </span>
+      </div>
+      <AccountSwitcher />
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navItems
+          .filter(
+            (item) =>
+              item.href !== "/admin/tenants" ||
+              (user as { role?: string } | undefined)?.role === "platform_admin",
+          )
+          .map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onNavigate}
+              className={cn(
+                "flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-foreground",
+                isNavActive(item.href, pathname)
+                  ? "bg-terminal/5 border-l-2 border-terminal text-terminal"
+                  : "text-muted-foreground",
+              )}
+            >
+              {item.label}
+              {item.label === "Credits" && creditBalance !== null && (
+                <span className={cn("text-xs font-mono", balanceColorClass(creditBalance))}>
+                  {formatCreditStandard(creditBalance)}
+                </span>
+              )}
+            </Link>
+          ))}
+      </nav>
+      <div className="border-t border-sidebar-border px-3 py-3">
+        {isPending ? (
+          <div className="flex items-center gap-3 px-3 py-2">
+            <Skeleton className="size-8 rounded-full" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ) : user ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-none">
+              {user.image ? (
+                <Image
+                  src={user.image}
+                  alt={user.name ?? "User avatar"}
+                  width={32}
+                  height={32}
+                  className="size-8 rounded-full object-cover"
+                />
+              ) : (
+                <span className="flex size-8 items-center justify-center rounded-full bg-sidebar-accent text-xs font-semibold">
+                  {user.name?.trim() ? getInitials(user.name) : <UserIcon className="size-4" />}
+                </span>
+              )}
+              <span className="truncate">{user.name ?? user.email}</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="start" className="w-56">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col gap-1">
+                  {user.name && <span className="text-sm font-medium">{user.name}</span>}
+                  {user.email && (
+                    <span className="text-xs text-muted-foreground">{user.email}</span>
+                  )}
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => router.push("/settings/profile")}>
+                <UserIcon />
+                Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => router.push("/settings/providers")}>
+                <SettingsIcon />
+                Settings
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleSignOut}>
+                <LogOutIcon />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <Link
+            href="/login"
+            className="flex items-center rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            Sign in
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function Sidebar() {
+  return (
+    <aside className="flex h-screen w-64 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
+      <SidebarContent />
+    </aside>
+  );
+}

package/src/components/status/status-page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { AlertTriangleIcon, CheckCircle2, RefreshCw, XCircle } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { HealthStatus, PlatformHealthResponse } from "@/lib/api";
+import { fetchPlatformHealth } from "@/lib/api";
+import { brandName } from "@/lib/brand-config";
+import { HEALTH_DOT_STYLES } from "@/lib/status-colors";
+import { cn } from "@/lib/utils";
+
+const STATUS_LABELS: Record<HealthStatus, string> = {
+  healthy: "Operational",
+  degraded: "Degraded",
+  unhealthy: "Down",
+};
+
+const BANNER_CONFIG: Record<
+  HealthStatus,
+  { text: string; border: string; bg: string; textColor: string }
+> = {
+  healthy: {
+    text: "> ALL SYSTEMS OPERATIONAL",
+    border: "border-terminal/20",
+    bg: "bg-terminal/5",
+    textColor: "text-terminal",
+  },
+  degraded: {
+    text: "> PARTIAL DEGRADATION DETECTED",
+    border: "border-amber-500/30",
+    bg: "bg-amber-500/5",
+    textColor: "text-amber-500",
+  },
+  unhealthy: {
+    text: "> SYSTEM OUTAGE DETECTED",
+    border: "border-red-500/30",
+    bg: "bg-red-500/5",
+    textColor: "text-red-500",
+  },
+};
+
+function formatUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  if (d > 0) return `${d}d ${h}h`;
+  const m = Math.floor((seconds % 3600) / 60);
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function StatusIcon({ status }: { status: HealthStatus }) {
+  switch (status) {
+    case "healthy":
+      return <CheckCircle2 className="size-4 text-emerald-500" />;
+    case "degraded":
+      return <AlertTriangleIcon className="size-4 text-amber-500" />;
+    case "unhealthy":
+      return <XCircle className="size-4 text-red-500" />;
+  }
+}
+
+export function StatusPage() {
+  const [health, setHealth] = useState<PlatformHealthResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastChecked, setLastChecked] = useState<Date | null>(null);
+
+  const load = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      const data = await fetchPlatformHealth();
+      if (data) {
+        setHealth(data);
+        setError(false);
+      } else {
+        setError(true);
+      }
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+      setLastChecked(new Date());
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+    const interval = setInterval(load, 30_000);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-16">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">Platform Status</h1>
+        <p className="text-sm text-muted-foreground">
+          Real-time health of the {brandName()} platform.
+        </p>
+      </div>
+
+      <div className="mt-8 space-y-6">
+        {loading && !health && !error && (
+          <div className="space-y-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+          </div>
+        )}
+
+        {error && !health && !loading && (
+          <div className="rounded-sm border border-red-500/30 bg-red-500/5 px-4 py-3">
+            <div className="flex items-center gap-3">
+              <XCircle className="size-5 shrink-0 text-red-500" />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-red-500">
+                  Unable to reach the {brandName()} platform
+                </p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  The health endpoint is not responding. The platform may be experiencing an outage.
+                </p>
+              </div>
+              <Button variant="outline" size="sm" onClick={load} disabled={refreshing}>
+                <RefreshCw className={cn("size-4", refreshing && "animate-spin")} />
+                Retry
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {health && (
+          <>
+            {(() => {
+              const cfg = BANNER_CONFIG[health.status];
+              return (
+                <div
+                  className={cn(
+                    "rounded-sm border px-4 py-2 text-sm font-mono",
+                    cfg.border,
+                    cfg.bg,
+                    cfg.textColor,
+                  )}
+                >
+                  {cfg.text}
+                </div>
+              );
+            })()}
+
+            <div className="space-y-3">
+              <h2 className="text-sm font-medium text-muted-foreground">Services</h2>
+              {health.services.map((svc) => (
+                <Card key={svc.name} className="border-terminal/10">
+                  <CardContent className="flex items-center justify-between p-4">
+                    <div className="flex items-center gap-3">
+                      <span className={cn("size-2 rounded-full", HEALTH_DOT_STYLES[svc.status])} />
+                      <span className="text-sm font-medium capitalize">{svc.name}</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      {svc.latencyMs !== null && (
+                        <span className="text-xs font-mono text-muted-foreground">
+                          {svc.latencyMs}ms
+                        </span>
+                      )}
+                      <div className="flex items-center gap-1.5">
+                        <StatusIcon status={svc.status} />
+                        <span
+                          className={cn(
+                            "text-xs font-mono",
+                            svc.status === "healthy" && "text-emerald-500",
+                            svc.status === "degraded" && "text-amber-500",
+                            svc.status === "unhealthy" && "text-red-500",
+                          )}
+                        >
+                          {STATUS_LABELS[svc.status]}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-4 border-t border-terminal/10 pt-4 text-xs font-mono text-muted-foreground">
+              <div className="flex items-center gap-4">
+                {health.version && <span>v{health.version}</span>}
+                <span>uptime {formatUptime(health.uptime)}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                {lastChecked && <span>checked {lastChecked.toLocaleTimeString()}</span>}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2"
+                  onClick={load}
+                  disabled={refreshing}
+                >
+                  <RefreshCw className={cn("size-3", refreshing && "animate-spin")} />
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/status-badge.tsx

@@ -0,0 +1,28 @@
+import { Badge } from "@/components/ui/badge";
+import type { InstanceStatus } from "@/lib/api";
+import { INSTANCE_STATUS_STYLES } from "@/lib/status-colors";
+import { cn } from "@/lib/utils";
+
+const statusConfig: Record<InstanceStatus, { label: string; className: string }> = {
+  running: { label: "Running", className: INSTANCE_STATUS_STYLES.running },
+  stopped: { label: "Stopped", className: INSTANCE_STATUS_STYLES.stopped },
+  degraded: { label: "Degraded", className: INSTANCE_STATUS_STYLES.degraded },
+  error: { label: "Error", className: INSTANCE_STATUS_STYLES.error },
+};
+
+export function StatusBadge({ status }: { status: InstanceStatus }) {
+  const config = statusConfig[status];
+  return (
+    <Badge variant="outline" className={cn("gap-1.5", config.className)}>
+      <span
+        className={cn("size-1.5 rounded-full", {
+          "bg-emerald-500 animate-[pulse-dot_2s_ease-in-out_infinite]": status === "running",
+          "bg-zinc-400": status === "stopped",
+          "bg-yellow-500": status === "degraded",
+          "bg-red-500 animate-[pulse-dot_0.8s_ease-in-out_infinite]": status === "error",
+        })}
+      />
+      {config.label}
+    </Badge>
+  );
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ComponentProps } from "react";
+
+export function ThemeProvider({ children, ...props }: ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      data-slot="alert-dialog-action"
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      data-slot="alert-dialog-cancel"
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-sm border border-transparent px-2 py-0.5 text-xs font-medium font-mono w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        terminal: "border-terminal text-terminal bg-terminal/10 [a&]:hover:bg-terminal/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/banner.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const bannerVariants = cva("w-full px-4 py-3 text-sm font-mono border-b flex items-center gap-3", {
+  variants: {
+    variant: {
+      default: "bg-primary/10 text-primary border-primary/20",
+      terminal: "bg-terminal/5 text-terminal border-terminal/20",
+      destructive: "bg-destructive/10 text-destructive border-destructive/20",
+      warning: "bg-amber-500/10 text-amber-500 border-amber-500/20",
+      info: "border-blue-500/25 bg-blue-500/10 text-blue-400 [&>svg]:text-blue-400",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+function Banner({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof bannerVariants>) {
+  return (
+    <div
+      data-slot="banner"
+      data-variant={variant}
+      className={cn(bannerVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Banner, bannerVariants };