@wopr-network/platform-ui-core 1.0.0

package/src/app/(dashboard)/dashboard/network/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { FriendsTab } from "@/components/instances/friends-tab";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { Instance } from "@/lib/api";
+import { listInstances } from "@/lib/api";
+import { productName } from "@/lib/brand-config";
+import { toUserMessage } from "@/lib/errors";
+
+export default function NetworkPage() {
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedInstanceId, setSelectedInstanceId] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    listInstances()
+      .then((data) => {
+        if (!cancelled) {
+          setInstances(data);
+          if (data.length === 1) {
+            setSelectedInstanceId(data[0].id);
+          }
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) setError(toUserMessage(err, "Failed to load instances"));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="p-8">
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-widest uppercase">Friends &amp; Network</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Manage P2P connections, friend requests, and auto-accept rules for your {productName()}{" "}
+            bot instances.
+          </p>
+        </div>
+        <div className="w-full sm:w-56 shrink-0">
+          {loading ? (
+            <Skeleton className="h-9 w-full" />
+          ) : error ? (
+            <p className="text-sm text-destructive">{error}</p>
+          ) : instances.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No instances found.</p>
+          ) : (
+            <Select
+              value={selectedInstanceId ?? ""}
+              onValueChange={(v) => setSelectedInstanceId(v)}
+            >
+              <SelectTrigger className="w-full" aria-label="Select instance">
+                <SelectValue placeholder="Select instance..." />
+              </SelectTrigger>
+              <SelectContent>
+                {instances.map((inst) => (
+                  <SelectItem key={inst.id} value={inst.id}>
+                    {inst.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      </div>
+
+      {!loading && !error && !selectedInstanceId && instances.length > 0 && (
+        <div className="flex h-64 flex-col items-center justify-center gap-3 rounded-sm border border-dashed border-terminal/20">
+          <p className="font-mono text-sm text-terminal/60">
+            &gt; SELECT AN INSTANCE TO MANAGE FRIENDS
+          </p>
+        </div>
+      )}
+
+      {selectedInstanceId && (
+        <FriendsTab key={selectedInstanceId} instanceId={selectedInstanceId} />
+      )}
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,13 @@
+import { CommandCenter } from "@/components/dashboard/command-center";
+import { SetupChecklist } from "@/components/onboarding/setup-checklist";
+
+export default function DashboardPage() {
+  return (
+    <>
+      <div className="p-6 pb-0">
+        <SetupChecklist />
+      </div>
+      <CommandCenter />
+    </>
+  );
+}

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

package/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,113 @@
+/**
+ * data-onboarding-id convention (WOP-1036)
+ * -----------------------------------------
+ * Format: {page}.{action}.{qualifier?}
+ * - page:      marketplace | onboarding | provider | fleet | pricing | dashboard | launch
+ * - action:    verb describing what clicking does (install, continue, skip, select, search, etc.)
+ * - qualifier:  optional disambiguator — typically a dynamic ID (pluginId, botId, plan, channelId)
+ *
+ * IDs are STABLE. Do not rename without updating onboarding.md skill file.
+ * Bot uses: onboarding.click("marketplace.install.wopr-plugin-secretary")
+ */
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { MenuIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { EmailVerificationBanner } from "@/components/auth/email-verification-banner";
+import { EmailVerificationResultBanner } from "@/components/auth/email-verification-result-banner";
+import { SuspensionBanner } from "@/components/billing/suspension-banner";
+import { ChatWidget } from "@/components/chat";
+import { Sidebar, SidebarContent } from "@/components/sidebar";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { usePageContext } from "@/hooks/use-page-context";
+import { useWebMCP } from "@/hooks/use-webmcp";
+import { productName } from "@/lib/brand-config";
+import { ChatProvider } from "@/lib/chat/chat-context";
+
+export default function DashboardLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  useWebMCP();
+  usePageContext();
+
+  const pathname = usePathname();
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  // Auto-close sheet on navigation — pathname dep is intentional
+  // biome-ignore lint/correctness/useExhaustiveDependencies: close sheet when pathname changes
+  useEffect(() => {
+    setSheetOpen(false);
+  }, [pathname]);
+
+  return (
+    <ChatProvider>
+      {/* Desktop layout - hidden on mobile with CSS */}
+      <div className="hidden lg:flex h-screen">
+        <Sidebar />
+        <div className="crt-scanlines flex flex-1 flex-col overflow-auto">
+          <SuspensionBanner />
+          <EmailVerificationBanner />
+          <Suspense>
+            <EmailVerificationResultBanner />
+          </Suspense>
+          <AnimatePresence mode="wait">
+            <motion.main
+              key={pathname}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: "easeInOut" }}
+              className="flex-1 overflow-auto"
+            >
+              {children}
+            </motion.main>
+          </AnimatePresence>
+        </div>
+      </div>
+
+      {/* Mobile layout - hidden on desktop with CSS */}
+      <div className="crt-scanlines flex lg:hidden h-screen flex-col">
+        <header className="flex h-14 shrink-0 items-center border-b border-sidebar-border bg-sidebar px-4 gap-3">
+          <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" aria-label="Open navigation menu">
+                <MenuIcon className="size-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="left"
+              className="w-64 bg-sidebar text-sidebar-foreground p-0"
+              aria-label="Navigation"
+            >
+              <SidebarContent onNavigate={() => setSheetOpen(false)} />
+            </SheetContent>
+          </Sheet>
+          <span className="text-lg font-semibold tracking-tight">{productName()}</span>
+        </header>
+        <SuspensionBanner />
+        <EmailVerificationBanner />
+        <Suspense>
+          <EmailVerificationResultBanner />
+        </Suspense>
+        <AnimatePresence mode="wait">
+          <motion.main
+            key={pathname}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="flex-1 overflow-auto"
+          >
+            {children}
+          </motion.main>
+        </AnimatePresence>
+      </div>
+      {!pathname.startsWith("/chat") && <ChatWidget />}
+    </ChatProvider>
+  );
+}

package/src/app/(dashboard)/loading.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DashboardLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-64" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }, (_, n) => `sk-${n}`).map((skId, _i) => (
+          <div key={skId} className="rounded-sm border p-4 space-y-3">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-8 w-12" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+        ))}
+      </div>
+      <div className="rounded-sm border p-6 space-y-4">
+        <Skeleton className="h-5 w-32" />
+        {Array.from({ length: 5 }, (_, n) => `sk-${n}`).map((skId) => (
+          <Skeleton key={skId} className="h-4 w-full" />
+        ))}
+      </div>
+    </div>
+  );
+}