@wopr-network/platform-ui-core 1.0.0

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

@@ -0,0 +1,268 @@
+"use client";
+
+import { AnimatePresence } from "framer-motion";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CategoryFilter } from "@/components/marketplace/category-filter";
+import { MarketplaceEmptyState } from "@/components/marketplace/empty-state";
+import { FeaturedHeroes } from "@/components/marketplace/featured-heroes";
+import { FirstVisitHero } from "@/components/marketplace/first-visit-hero";
+import { MarketplaceTabs } from "@/components/marketplace/marketplace-tabs";
+import { PluginCard } from "@/components/marketplace/plugin-card";
+import { SuperpowerCard } from "@/components/marketplace/superpower-card";
+import { TerminalSearch } from "@/components/marketplace/terminal-search";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { BotStatusResponse } from "@/lib/api";
+import { apiFetch } from "@/lib/api";
+import { eventName, productName, storageKey } from "@/lib/brand-config";
+import { toUserMessage } from "@/lib/errors";
+import {
+  listInstalledPlugins,
+  listMarketplacePlugins,
+  type MarketplaceTab,
+  type PluginCategory,
+  type PluginManifest,
+} from "@/lib/marketplace-data";
+
+const FIRST_VISIT_KEY = storageKey("marketplace-visited");
+
+export default function MarketplacePage() {
+  const [plugins, setPlugins] = useState<PluginManifest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [activeTab, setActiveTab] = useState<MarketplaceTab>("superpower");
+  const [showFirstVisit, setShowFirstVisit] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<PluginCategory | null>(null);
+  const [installedIds, setInstalledIds] = useState<Set<string>>(new Set());
+
+  const searchParams = useSearchParams();
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [data, bots] = await Promise.all([
+        listMarketplacePlugins(),
+        apiFetch<BotStatusResponse[]>("/fleet/bots").catch(() => [] as BotStatusResponse[]),
+      ]);
+      setPlugins(data);
+      const activeBotId = bots[0]?.id;
+      if (activeBotId) {
+        try {
+          const installed = await listInstalledPlugins(activeBotId);
+          setInstalledIds(new Set(installed.map((p) => p.pluginId)));
+        } catch {
+          setInstalledIds(new Set());
+        }
+      }
+    } catch (err) {
+      setError(toUserMessage(err, "Failed to load marketplace plugins"));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    const q = searchParams.get("q");
+    if (q) {
+      setSearch(q);
+    }
+  }, [searchParams]);
+
+  useEffect(() => {
+    function handleMarketplaceEvent(e: Event) {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.type === "filter") {
+        setSearch(detail.query ?? "");
+      } else if (detail?.type === "clearFilter") {
+        setSearch("");
+      }
+    }
+    const evtName = eventName("marketplace");
+    window.addEventListener(evtName, handleMarketplaceEvent);
+    return () => window.removeEventListener(evtName, handleMarketplaceEvent);
+  }, []);
+
+  // Detect first visit
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const visited = localStorage.getItem(FIRST_VISIT_KEY);
+    if (!visited) {
+      setShowFirstVisit(true);
+    }
+  }, []);
+
+  function handleDismissFirstVisit() {
+    setShowFirstVisit(false);
+    localStorage.setItem(FIRST_VISIT_KEY, "1");
+  }
+
+  // Superpower plugins
+  const superpowers = useMemo(
+    () => plugins.filter((p) => p.marketplaceTab === "superpower"),
+    [plugins],
+  );
+
+  // Category counts for current tab
+  const categoryCounts = useMemo(() => {
+    const tabPlugins = plugins.filter((p) => (p.marketplaceTab ?? "utility") === activeTab);
+    const counts: Record<string, number> = {};
+    for (const p of tabPlugins) {
+      counts[p.category] = (counts[p.category] ?? 0) + 1;
+    }
+    return counts;
+  }, [plugins, activeTab]);
+
+  // Tab counts
+  const tabCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const p of plugins) {
+      const tab = p.marketplaceTab ?? "utility";
+      counts[tab] = (counts[tab] ?? 0) + 1;
+    }
+    return counts;
+  }, [plugins]);
+
+  // Filtered plugins by tab + category + search
+  const filtered = useMemo(() => {
+    let result = plugins.filter((p) => (p.marketplaceTab ?? "utility") === activeTab);
+    if (selectedCategory) {
+      result = result.filter((p) => p.category === selectedCategory);
+    }
+    if (search.trim()) {
+      const term = search.toLowerCase();
+      result = result.filter(
+        (p) =>
+          p.name.toLowerCase().includes(term) ||
+          p.description.toLowerCase().includes(term) ||
+          (p.superpowerHeadline?.toLowerCase().includes(term) ?? false) ||
+          (p.superpowerTagline?.toLowerCase().includes(term) ?? false) ||
+          p.tags.some((t) => t.toLowerCase().includes(term)),
+      );
+    }
+    return result;
+  }, [plugins, activeTab, selectedCategory, search]);
+
+  // Loading skeleton
+  if (loading) {
+    return (
+      <div className="p-6 space-y-6">
+        <div className="space-y-2">
+          <Skeleton className="h-7 w-56" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <div className="space-y-4">
+          <Skeleton className="h-7 w-52" />
+          <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+            {Array.from({ length: 4 }, (_, n) => `fh-sk-${n}`).map((skId) => (
+              <div key={skId} className="rounded-xl border border-border/50 p-6 space-y-3">
+                <Skeleton className="h-14 w-14 rounded-xl" />
+                <Skeleton className="h-5 w-28" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+        <Skeleton className="h-9 w-64" />
+        <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-xl border border-border/50 p-6 space-y-4">
+              <Skeleton className="h-10 w-10 rounded-lg" />
+              <Skeleton className="h-5 w-32" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-8 w-48" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6 text-center space-y-4">
+        <p className="text-sm text-red-500">{error}</p>
+        <Button variant="outline" onClick={load}>
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* First-visit cinematic overlay */}
+      <AnimatePresence>
+        {showFirstVisit && (
+          <FirstVisitHero superpowers={superpowers} onDismiss={handleDismissFirstVisit} />
+        )}
+      </AnimatePresence>
+
+      <div className="p-6 space-y-6">
+        {/* Page header */}
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Browse Superpowers</h1>
+          <p className="text-sm text-muted-foreground">
+            Give your {productName()} abilities it was born to have.
+          </p>
+        </div>
+
+        {/* Featured hero section — hidden during search */}
+        {!search.trim() && <FeaturedHeroes superpowers={superpowers} />}
+
+        {/* Search + tabs */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <TerminalSearch value={search} onChange={setSearch} placeholder="Search superpowers..." />
+        </div>
+
+        <MarketplaceTabs
+          selected={activeTab}
+          onSelect={(tab) => {
+            setActiveTab(tab);
+            setSelectedCategory(null);
+          }}
+          counts={tabCounts}
+        />
+
+        {activeTab !== "superpower" && (
+          <CategoryFilter
+            selected={selectedCategory}
+            onSelect={setSelectedCategory}
+            counts={categoryCounts}
+          />
+        )}
+
+        {/* Plugin grid */}
+        {filtered.length === 0 ? (
+          <MarketplaceEmptyState hasSearch={search.trim().length > 0} searchTerm={search} />
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {filtered.map((plugin, i) =>
+              activeTab === "superpower" ? (
+                <SuperpowerCard
+                  key={plugin.id}
+                  plugin={plugin}
+                  index={i}
+                  installed={installedIds.has(plugin.id)}
+                />
+              ) : (
+                <PluginCard
+                  key={plugin.id}
+                  plugin={plugin}
+                  index={i}
+                  installed={installedIds.has(plugin.id)}
+                />
+              ),
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/app/(dashboard)/not-found.tsx

@@ -0,0 +1,46 @@
+import { ArrowLeftIcon, HomeIcon, TerminalIcon } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+
+export default function DashboardNotFound() {
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <Card className="w-full max-w-lg border-terminal/20">
+        <CardHeader>
+          <div className="flex items-center gap-3">
+            <TerminalIcon className="size-5 text-terminal" />
+            <span className="text-sm font-medium uppercase tracking-widest text-muted-foreground">
+              system error
+            </span>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="font-mono text-6xl font-bold text-terminal">404</p>
+          <p className="text-lg text-foreground">
+            Route not found
+            <span className="animate-ellipsis" />
+          </p>
+          <p className="text-sm text-muted-foreground">
+            The requested page does not exist or has been moved. Check the URL or navigate back to
+            the dashboard.
+          </p>
+        </CardContent>
+        <CardFooter className="gap-3">
+          <Button variant="terminal" asChild>
+            <Link href="/dashboard">
+              <HomeIcon />
+              Dashboard
+            </Link>
+          </Button>
+          <Button variant="outline" asChild>
+            <Link href="/dashboard">
+              <ArrowLeftIcon />
+              Go Back
+            </Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,267 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Bot, ChevronRight, Rocket, Sparkles } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { getBrandConfig, storageKey } from "@/lib/brand-config";
+import { presets } from "@/lib/onboarding-data";
+import {
+  isOnboardingComplete,
+  loadOnboardingState,
+  markOnboardingComplete,
+  saveOnboardingState,
+} from "@/lib/onboarding-store";
+
+const MAX_STEP = 2;
+
+export default function OnboardingPage() {
+  const router = useRouter();
+  const [step, setStep] = useState(0);
+  const [botName, setBotName] = useState("");
+  const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router.push is stable; using [router] causes infinite re-renders
+  useEffect(() => {
+    if (isOnboardingComplete()) {
+      router.push("/marketplace");
+      return;
+    }
+    const saved = loadOnboardingState();
+    const restoredStep = saved.currentStep;
+    if (!Number.isNaN(restoredStep) && restoredStep >= 0 && restoredStep <= MAX_STEP) {
+      setStep(restoredStep);
+    }
+    if (saved.instanceName) {
+      setBotName(saved.instanceName);
+    }
+    try {
+      const savedPreset = localStorage.getItem(storageKey("onboarding-preset"));
+      if (savedPreset) setSelectedPreset(savedPreset);
+    } catch {
+      // ignore — storage may be blocked
+    }
+  }, [router.push]);
+
+  useEffect(() => {
+    try {
+      if (selectedPreset) {
+        localStorage.setItem(storageKey("onboarding-preset"), selectedPreset);
+      }
+    } catch {
+      // ignore
+    }
+  }, [selectedPreset]);
+
+  function handleNameNext() {
+    if (!botName.trim()) return;
+    saveOnboardingState({ ...loadOnboardingState(), instanceName: botName.trim(), currentStep: 1 });
+    setStep(1);
+  }
+
+  function handlePresetNext() {
+    if (!selectedPreset) return;
+    saveOnboardingState({ ...loadOnboardingState(), currentStep: 2 });
+    setStep(2);
+  }
+
+  function handleLaunch() {
+    const state = loadOnboardingState();
+    const preset = presets.find((p) => p.id === selectedPreset);
+    saveOnboardingState({
+      ...state,
+      instanceName: botName.trim(),
+      channels: preset?.channels ?? [],
+      plugins: preset?.plugins ?? state.plugins,
+    });
+    markOnboardingComplete();
+    router.push("/marketplace");
+  }
+
+  function handleSkip() {
+    markOnboardingComplete();
+    router.push("/marketplace");
+  }
+
+  const selectedPresetData = presets.find((p) => p.id === selectedPreset);
+
+  return (
+    <div className="flex min-h-full items-center justify-center px-4 py-12">
+      <div className="w-full max-w-lg">
+        {/* Progress */}
+        <div className="mb-6 flex items-center justify-center gap-2">
+          {[0, 1, 2].map((s) => (
+            <div
+              key={s}
+              className={`h-1.5 w-12 rounded-full transition-colors ${
+                s <= step ? "bg-terminal" : "bg-terminal/20"
+              }`}
+            />
+          ))}
+        </div>
+
+        {step === 0 && (
+          <motion.div
+            key="step-0"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+          >
+            <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+              <CardHeader className="items-center text-center">
+                <div className="rounded-full bg-terminal/10 p-3">
+                  <Bot className="size-8 text-terminal" />
+                </div>
+                <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+                  Name your bot
+                </CardTitle>
+                <CardDescription>Give your bot a name. You can change this later.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Input
+                  data-onboarding-id="onboarding.name-bot"
+                  placeholder="e.g. Jarvis, Friday, HAL..."
+                  value={botName}
+                  onChange={(e) => setBotName(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleNameNext()}
+                  className="border-terminal/20 bg-black/50 text-center text-lg"
+                  autoFocus
+                />
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                <Button variant="ghost" size="sm" onClick={handleSkip}>
+                  Skip setup
+                </Button>
+                <Button
+                  data-onboarding-id="onboarding.continue.name"
+                  variant="terminal"
+                  onClick={handleNameNext}
+                  disabled={!botName.trim()}
+                >
+                  Next <ChevronRight className="ml-1 size-4" />
+                </Button>
+              </CardFooter>
+            </Card>
+          </motion.div>
+        )}
+
+        {step === 1 && (
+          <motion.div
+            key="step-1"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+          >
+            <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+              <CardHeader className="items-center text-center">
+                <div className="rounded-full bg-terminal/10 p-3">
+                  <Sparkles className="size-8 text-terminal" />
+                </div>
+                <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+                  Pick a preset
+                </CardTitle>
+                <CardDescription>
+                  Choose a starting configuration. You can customize everything later.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {presets
+                  .filter((p) => p.id !== "custom")
+                  .map((p) => (
+                    <button
+                      key={p.id}
+                      type="button"
+                      data-onboarding-id={`onboarding.select-preset.${p.id}`}
+                      onClick={() => setSelectedPreset(p.id)}
+                      className={`w-full rounded-md border px-4 py-3 text-left transition-colors ${
+                        selectedPreset === p.id
+                          ? "border-terminal bg-terminal/10 text-terminal"
+                          : "border-terminal/20 bg-black/30 text-muted-foreground hover:border-terminal/40"
+                      }`}
+                    >
+                      <div className="text-sm font-medium">{p.name}</div>
+                      <div className="text-xs text-muted-foreground">{p.description}</div>
+                    </button>
+                  ))}
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                <Button variant="ghost" size="sm" onClick={() => setStep(0)}>
+                  Back
+                </Button>
+                <Button
+                  data-onboarding-id="onboarding.continue.preset"
+                  variant="terminal"
+                  onClick={handlePresetNext}
+                  disabled={!selectedPreset}
+                >
+                  Next <ChevronRight className="ml-1 size-4" />
+                </Button>
+              </CardFooter>
+            </Card>
+          </motion.div>
+        )}
+
+        {step === 2 && (
+          <motion.div
+            key="step-2"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+          >
+            <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
+              <CardHeader className="items-center text-center">
+                <div className="rounded-full bg-terminal/10 p-3">
+                  <Rocket className="size-8 text-terminal" />
+                </div>
+                <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
+                  Ready to launch
+                </CardTitle>
+                <CardDescription>Here&apos;s what we&apos;ll set up for you.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm">
+                <div className="flex items-center justify-between rounded-sm border border-terminal/10 px-3 py-2">
+                  <span className="text-muted-foreground">Bot name</span>
+                  <span className="font-medium text-terminal">{botName}</span>
+                </div>
+                <div className="flex items-center justify-between rounded-sm border border-terminal/10 px-3 py-2">
+                  <span className="text-muted-foreground">Preset</span>
+                  <span className="font-medium text-terminal">{selectedPresetData?.name}</span>
+                </div>
+                {selectedPresetData && selectedPresetData.channels.length > 0 && (
+                  <div className="flex items-center justify-between rounded-sm border border-terminal/10 px-3 py-2">
+                    <span className="text-muted-foreground">Channels</span>
+                    <span className="font-medium text-terminal">
+                      {selectedPresetData.channels.join(", ")}
+                    </span>
+                  </div>
+                )}
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                <Button variant="ghost" size="sm" onClick={() => setStep(1)}>
+                  Back
+                </Button>
+                <Button
+                  data-onboarding-id="onboarding.launch"
+                  variant="terminal"
+                  onClick={handleLaunch}
+                >
+                  Launch <Rocket className="ml-1 size-4" />
+                </Button>
+              </CardFooter>
+            </Card>
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}