@wopr-network/platform-ui-core 1.0.0

package/src/components/onboarding/setup-checklist.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { CapabilitySetting, ChannelInfo } from "@/lib/api";
+import { getCreditBalance, listChannels, listInstances } from "@/lib/api";
+import { productName, storageKey } from "@/lib/brand-config";
+import { formatCreditStandard } from "@/lib/format-credit";
+import { listMarketplacePlugins } from "@/lib/marketplace-data";
+import { channelPlugins, type PluginOption, superpowers } from "@/lib/onboarding-data";
+import { listCapabilities } from "@/lib/settings-api";
+
+const STORAGE_KEY = storageKey("setup-checklist-dismissed");
+
+interface ChannelStatus {
+  id: string;
+  name: string;
+  color: string;
+  ready: boolean;
+}
+
+interface SuperpowerStatus {
+  id: string;
+  name: string;
+  color: string;
+  ready: boolean;
+  requiresKey: boolean;
+}
+
+function resolveChannelStatuses(
+  selectedIds: string[],
+  connectedChannels: Map<string, ChannelInfo["status"]>,
+  allChannels: PluginOption[],
+): ChannelStatus[] {
+  return selectedIds.map((id) => {
+    if (id === "web-ui") {
+      return { id, name: "Web UI", color: "#3B82F6", ready: true };
+    }
+    const plugin = allChannels.find((c) => c.id === id);
+    return {
+      id,
+      name: plugin?.name ?? id,
+      color: plugin?.color ?? "#71717A",
+      ready: connectedChannels.get(id) === "connected",
+    };
+  });
+}
+
+// Map superpower IDs to capability names used by the backend
+const SUPERPOWER_TO_CAPABILITY: Record<string, string> = {
+  "image-gen": "image-gen",
+  "video-gen": "image-gen",
+  voice: "transcription",
+  memory: "embeddings",
+  search: "text-gen",
+  "text-gen": "text-gen",
+};
+
+function resolveSuperpowerStatuses(
+  selectedIds: string[],
+  capabilities: CapabilitySetting[],
+): SuperpowerStatus[] {
+  return selectedIds.map((id) => {
+    const sp = superpowers.find((s) => s.id === id);
+    const capName = SUPERPOWER_TO_CAPABILITY[id];
+    const cap = capName ? capabilities.find((c) => c.capability === capName) : undefined;
+
+    const ready = cap
+      ? cap.mode === "hosted" || (cap.mode === "byok" && cap.keyStatus === "valid")
+      : !sp?.requiresKey;
+
+    return {
+      id,
+      name: sp?.name ?? id,
+      color: sp?.color ?? "#71717A",
+      ready,
+      requiresKey: sp?.requiresKey ?? false,
+    };
+  });
+}
+
+export function SetupChecklist() {
+  const [dismissed, setDismissed] = useState(true); // default true to avoid flash
+  const [selectedChannels, setSelectedChannels] = useState<string[]>([]);
+  const [selectedSuperpowers, setSelectedSuperpowers] = useState<string[]>([]);
+  const [creditBalance, setCreditBalance] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [hasInstances, setHasInstances] = useState(false);
+  const [connectedChannels, setConnectedChannels] = useState<Map<string, ChannelInfo["status"]>>(
+    new Map(),
+  );
+  const [capabilities, setCapabilities] = useState<CapabilitySetting[]>([]);
+  const [allChannels, setAllChannels] = useState<PluginOption[]>(channelPlugins);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    setDismissed(stored === "true");
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        const [instancesResult, creditsResult, capabilitiesResult, marketplaceResult] =
+          await Promise.allSettled([
+            listInstances(),
+            getCreditBalance(),
+            listCapabilities(),
+            listMarketplacePlugins(),
+          ]);
+        if (cancelled) return;
+
+        if (instancesResult.status === "fulfilled") {
+          const instances = instancesResult.value;
+          setHasInstances(instances.length > 0);
+
+          const channels = new Set<string>();
+          const supers = new Set<string>();
+          for (const inst of instances) {
+            for (const ch of inst.channels ?? []) {
+              channels.add(ch);
+            }
+            for (const p of inst.plugins ?? []) {
+              if (p.enabled) supers.add(p.id);
+            }
+          }
+          setSelectedChannels([...channels]);
+          setSelectedSuperpowers([...supers]);
+
+          // Fetch channel connection status for each instance
+          const channelMap = new Map<string, ChannelInfo["status"]>();
+          const channelFetches = instances.map((inst) =>
+            listChannels(inst.id).catch(() => [] as ChannelInfo[]),
+          );
+          const channelResults = await Promise.all(channelFetches);
+          if (!cancelled) {
+            for (const channelList of channelResults) {
+              for (const ch of channelList) {
+                // If any instance has this channel connected, mark it connected
+                const existing = channelMap.get(ch.type);
+                if (!existing || ch.status === "connected") {
+                  channelMap.set(ch.type, ch.status);
+                }
+              }
+            }
+            setConnectedChannels(channelMap);
+          }
+        }
+
+        if (creditsResult.status === "fulfilled") {
+          setCreditBalance(formatCreditStandard(creditsResult.value.balance));
+        }
+
+        if (capabilitiesResult.status === "fulfilled") {
+          setCapabilities(capabilitiesResult.value);
+        }
+
+        if (!cancelled && marketplaceResult.status === "fulfilled") {
+          const marketplaceChannels = marketplaceResult.value
+            .filter((m) => m.category === "channel")
+            .map((m) => ({
+              id: m.id,
+              name: m.name,
+              description: m.description,
+              icon: m.icon,
+              color: m.color,
+              capabilities: m.capabilities,
+              configFields: [],
+            }));
+          setAllChannels([...marketplaceChannels, ...channelPlugins]);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    localStorage.setItem(STORAGE_KEY, "true");
+    setDismissed(true);
+  }, []);
+
+  if (dismissed) return null;
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <Skeleton className="h-4 w-48 rounded-sm bg-terminal/5" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {[0, 1, 2].map((section) => (
+            <div key={section}>
+              <Skeleton className="mb-2 h-3 w-20 rounded-sm bg-terminal/5" />
+              <Skeleton className="mb-1.5 h-8 w-full rounded-sm bg-terminal/5" />
+              <Skeleton className="mb-1.5 h-8 w-full rounded-sm bg-terminal/5" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // No instances — checklist is meaningless
+  if (!hasInstances) return null;
+
+  const channels = resolveChannelStatuses(selectedChannels, connectedChannels, allChannels);
+  const powers = resolveSuperpowerStatuses(selectedSuperpowers, capabilities);
+  const allComplete = channels.every((c) => c.ready) && powers.every((p) => p.ready);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Let&apos;s get your {productName()} running</CardTitle>
+          <Button
+            data-onboarding-id="dashboard.checklist.dismiss"
+            variant="ghost"
+            size="xs"
+            onClick={handleDismiss}
+          >
+            Dismiss
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Channels */}
+        {channels.length > 0 && (
+          <section>
+            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Channels
+            </h3>
+            <div className="space-y-1.5">
+              {channels.map((ch) => (
+                <div
+                  key={ch.id}
+                  className="flex items-center justify-between rounded-sm px-3 py-2 text-sm"
+                >
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="inline-block size-2 rounded-full"
+                      style={{ backgroundColor: ch.color }}
+                    />
+                    <span className="font-medium">{ch.name}</span>
+                  </div>
+                  {ch.ready ? (
+                    <Badge variant="terminal">Ready</Badge>
+                  ) : (
+                    <Button
+                      data-onboarding-id={`dashboard.checklist.setup-channel.${ch.id}`}
+                      asChild
+                      variant="link"
+                      size="xs"
+                      className="h-auto p-0"
+                    >
+                      <Link href="/settings/providers">Set up &rarr;</Link>
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Superpowers */}
+        {powers.length > 0 && (
+          <section>
+            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Superpowers
+            </h3>
+            <div className="space-y-1.5">
+              {powers.map((sp) => (
+                <div
+                  key={sp.id}
+                  className="flex items-center justify-between rounded-sm px-3 py-2 text-sm"
+                >
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="inline-block size-2 rounded-full"
+                      style={{ backgroundColor: sp.color }}
+                    />
+                    <span className="font-medium">{sp.name}</span>
+                  </div>
+                  {sp.ready ? (
+                    <Badge variant="terminal">Ready (Hosted)</Badge>
+                  ) : (
+                    <Button
+                      data-onboarding-id={`dashboard.checklist.configure-key.${sp.id}`}
+                      asChild
+                      variant="link"
+                      size="xs"
+                      className="h-auto p-0"
+                    >
+                      <Link href="/settings/providers">Configure key &rarr;</Link>
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Credits */}
+        <section>
+          <h3 className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Credits
+          </h3>
+          <div className="flex items-center gap-2 rounded-sm px-3 py-2 text-sm">
+            <span className="font-medium">Balance</span>
+            <Badge variant="secondary">{creditBalance ?? "$0.00"}</Badge>
+          </div>
+        </section>
+
+        {/* Footer hint */}
+        {!allComplete && (
+          <p className="text-xs text-muted-foreground">
+            Complete the channel setup to start using your {productName()}.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/onboarding/step-superpowers.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useMemo } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { usePluginRegistry } from "@/hooks/use-plugin-registry";
+import { productName } from "@/lib/brand-config";
+import { cn } from "@/lib/utils";
+
+// Types previously from use-onboarding, inlined for WOP-1018 compatibility
+type WizardMode = "onboarding" | "fleet-add";
+interface ExistingBot {
+  id: string;
+  name: string;
+  plugins: string[];
+  superpowers: string[];
+}
+
+interface StepSuperpowersProps {
+  selected: string[];
+  onToggle: (id: string) => void;
+  mode?: WizardMode;
+  existingBots?: ExistingBot[];
+  stepNumber?: string;
+  stepCode?: string;
+}
+
+export function StepSuperpowers({
+  selected,
+  onToggle,
+  mode = "onboarding",
+  existingBots = [],
+  stepNumber = "04",
+  stepCode = "SUPERPOWERS",
+}: StepSuperpowersProps) {
+  const { superpowers } = usePluginRegistry();
+  const isFleetAdd = mode === "fleet-add";
+
+  // Build a map of superpower id -> list of bot names that use it
+  const usageMap = useMemo(() => {
+    if (!isFleetAdd) return new Map<string, string[]>();
+    const map = new Map<string, string[]>();
+    for (const bot of existingBots) {
+      for (const spId of bot.superpowers) {
+        const list = map.get(spId) || [];
+        list.push(bot.name);
+        map.set(spId, list);
+      }
+    }
+    return map;
+  }, [isFleetAdd, existingBots]);
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center space-y-2">
+        <div
+          className="inline-block font-mono text-xs tracking-[0.3em] text-terminal uppercase"
+          aria-hidden="true"
+        >
+          STEP {stepNumber} {"//"} {stepCode}
+        </div>
+        <h2 className="text-2xl font-bold tracking-tight">Give your {productName()} superpowers</h2>
+        <p className="mt-2 text-muted-foreground">
+          {isFleetAdd
+            ? "Pre-checked from your other bots. Add or remove as you like."
+            : "Pick as many as you want. All optional."}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        {superpowers.map((sp) => {
+          const isSelected = selected.includes(sp.id);
+          const usedBy = usageMap.get(sp.id);
+          const isUsedByFleet = isFleetAdd && usedBy && usedBy.length > 0;
+          return (
+            <Card
+              key={sp.id}
+              className={cn(
+                "py-3 transition-all",
+                isSelected
+                  ? "border-terminal/60 bg-terminal/5 shadow-[0_0_8px_rgba(0,255,65,0.1)]"
+                  : "border-border/50 hover:border-terminal/30",
+              )}
+            >
+              <CardContent className="flex items-center justify-between gap-4 py-0">
+                <div className="flex items-center gap-3">
+                  <div
+                    className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white"
+                    style={{ backgroundColor: sp.color }}
+                  >
+                    {sp.name[0]}
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">{sp.name}</p>
+                    <p className="text-xs text-muted-foreground">{sp.tagline}</p>
+                    {isUsedByFleet && (
+                      <p className="text-xs text-primary">
+                        {usedBy.join(", ")} {usedBy.length === 1 ? "uses" : "use"} this
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <Switch
+                  data-onboarding-id={`onboarding.superpower.${sp.id}`}
+                  checked={isSelected}
+                  onCheckedChange={() => onToggle(sp.id)}
+                  aria-label={`Toggle ${sp.name}`}
+                />
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {selected.length === 0 && (
+        <p className="text-center font-mono text-xs tracking-wider text-terminal/40 mt-4">
+          NO SUPERPOWERS SELECTED — ALL OPTIONAL
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/plugin-setup/index.ts

@@ -0,0 +1 @@
+export { SetupChatPanel } from "./setup-chat-panel";

package/src/components/plugin-setup/setup-chat-panel.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { ChatInput } from "@/components/chat/chat-input";
+import { ChatMessage } from "@/components/chat/chat-message";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import type { ChatMessage as ChatMessageType } from "@/lib/chat/types";
+
+interface SetupChatPanelProps {
+  isOpen: boolean;
+  pluginName: string | null;
+  messages: ChatMessageType[];
+  isConnected: boolean;
+  isTyping: boolean;
+  isComplete: boolean;
+  onSend: (text: string) => void;
+  onClose: () => void;
+}
+
+export function SetupChatPanel({
+  isOpen,
+  pluginName,
+  messages,
+  isConnected,
+  isTyping,
+  isComplete,
+  onSend,
+  onClose,
+}: SetupChatPanelProps) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on message/typing state changes is intentional
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+
+  return (
+    <Sheet
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <SheetContent side="right" className="flex w-full flex-col p-0 sm:w-[440px]">
+        {/* Header */}
+        <SheetHeader className="border-b border-border bg-card px-4 py-3">
+          <div className="flex items-center gap-2.5">
+            <span
+              className={`h-1.5 w-1.5 rounded-full ${
+                isConnected ? "animate-pulse bg-terminal" : "bg-muted-foreground"
+              }`}
+            />
+            <div>
+              <SheetTitle className="text-sm font-mono uppercase tracking-[0.15em]">
+                {pluginName ?? "Plugin"} Setup
+              </SheetTitle>
+              <SheetDescription className="text-xs font-mono text-muted-foreground">
+                {isComplete ? "Configuration complete" : "Configure via conversation"}
+              </SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        {/* Messages area */}
+        <div className="flex-1 space-y-3 overflow-y-auto px-4 py-4">
+          {messages.length === 0 && !isConnected && (
+            <p className="font-mono text-sm text-terminal/60 animate-pulse">
+              &gt; Initializing setup...
+            </p>
+          )}
+
+          <AnimatePresence initial={false}>
+            {messages.map((msg) => (
+              <motion.div
+                key={msg.id}
+                initial={
+                  msg.role === "user"
+                    ? { opacity: 0, x: 8 }
+                    : msg.role === "bot"
+                      ? { opacity: 0, x: -8 }
+                      : { opacity: 0 }
+                }
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.15, ease: "easeOut" }}
+              >
+                {msg.role === "bot" ? (
+                  <div className="flex gap-2">
+                    <span className="mt-0.5 font-mono text-sm text-terminal/40 select-none">
+                      &gt;
+                    </span>
+                    <p className="font-mono text-sm leading-relaxed text-terminal">{msg.content}</p>
+                  </div>
+                ) : msg.role === "event" ? (
+                  <div className="flex gap-2">
+                    <span className="mt-0.5 font-mono text-sm text-destructive/60 select-none">
+                      !
+                    </span>
+                    <p className="font-mono text-sm leading-relaxed text-destructive">
+                      {msg.content}
+                    </p>
+                  </div>
+                ) : (
+                  <ChatMessage message={msg} />
+                )}
+              </motion.div>
+            ))}
+          </AnimatePresence>
+
+          {/* Typing indicator */}
+          <AnimatePresence>
+            {isTyping && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="flex items-center gap-1.5 pl-5"
+              >
+                {[0, 1, 2].map((i) => (
+                  <motion.span
+                    key={i}
+                    className="h-1 w-1 rounded-full bg-terminal"
+                    animate={{ opacity: [0.2, 1, 0.2] }}
+                    transition={{
+                      repeat: Number.POSITIVE_INFINITY,
+                      duration: 1.2,
+                      delay: i * 0.15,
+                    }}
+                  />
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Completion state */}
+          <AnimatePresence>
+            {isComplete && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="flex flex-col items-center justify-center gap-2 py-4"
+              >
+                <CheckCircle2 className="h-8 w-8 text-terminal" />
+                <span className="font-mono text-sm uppercase tracking-wider text-terminal">
+                  Setup complete
+                </span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input area or Done button */}
+        <AnimatePresence>
+          {isComplete ? (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4, duration: 0.2 }}
+              className="border-t border-border p-4"
+            >
+              <Button
+                onClick={onClose}
+                className="w-full rounded-sm bg-terminal font-mono text-black hover:bg-terminal/80"
+              >
+                Done
+              </Button>
+            </motion.div>
+          ) : (
+            <motion.div exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+              <ChatInput onSend={onSend} disabled={!isConnected} />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/pricing/dividend-calculator.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+export function DividendCalculator() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-8">
+      <Card className="border-terminal/20 bg-terminal/5">
+        <CardContent className="space-y-4 py-6">
+          <p className="text-center text-sm uppercase tracking-widest text-muted-foreground">
+            The math. Open and honest.
+          </p>
+          <div className="space-y-2 text-center">
+            <p className="text-lg text-foreground">
+              <span className="font-semibold text-terminal">100K active users</span> &middot;{" "}
+              <span className="font-semibold text-terminal">$20/month average spend</span> &middot;
+              equal daily share
+            </p>
+            <p className="text-muted-foreground">
+              Projected dividend: <span className="font-semibold text-terminal">~$0.67/day</span>.
+              Average daily spend: <span className="font-semibold text-terminal">~$0.67</span>.
+            </p>
+            <p className="text-xl font-bold text-terminal" data-testid="net-cost">
+              Net cost of credits at scale: $0.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="border-amber-500/20 bg-amber-500/5">
+        <CardContent className="space-y-2 py-6 text-center">
+          <p className="text-sm uppercase tracking-widest text-amber-500">
+            Early adopter advantage
+          </p>
+          <p className="text-foreground">
+            The earlier you join, the more you accumulate. Day 1 users in a 100K community collect{" "}
+            <span className="font-semibold text-terminal">~$132</span> in their first 60 days on a
+            $5 minimum spend.
+          </p>
+          <p className="text-sm text-muted-foreground">
+            The math doesn&apos;t lie — being early pays.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}