@wopr-network/platform-ui-core 1.0.0

package/src/components/marketplace/marketplace-tabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { MARKETPLACE_TABS, type MarketplaceTab } from "@/lib/marketplace-data";
+import { cn } from "@/lib/utils";
+
+interface MarketplaceTabsProps {
+  selected: MarketplaceTab;
+  onSelect: (tab: MarketplaceTab) => void;
+  counts: Record<string, number>;
+}
+
+export function MarketplaceTabs({ selected, onSelect, counts }: MarketplaceTabsProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {MARKETPLACE_TABS.map((tab) => {
+        const isSelected = selected === tab.id;
+        const count = counts[tab.id] ?? 0;
+
+        return (
+          <Button
+            key={tab.id}
+            data-onboarding-id={`marketplace.tab.${tab.id}`}
+            type="button"
+            variant="ghost"
+            aria-pressed={isSelected}
+            onClick={() => onSelect(tab.id)}
+            className="relative p-0 h-auto hover:bg-transparent"
+          >
+            {isSelected && (
+              <motion.div
+                layoutId="marketplace-tab-highlight"
+                className="absolute inset-0 rounded-sm bg-primary"
+                transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              />
+            )}
+            <Badge
+              variant={isSelected ? "default" : "outline"}
+              className={cn(
+                "relative cursor-pointer text-xs font-medium transition-colors",
+                isSelected && "shadow-sm",
+              )}
+            >
+              {tab.label}
+              {count > 0 && <span className="ml-1 opacity-60">{count}</span>}
+            </Badge>
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/marketplace/plugin-card.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { motion, useMotionValue, useSpring } from "framer-motion";
+import Link from "next/link";
+import { useRef } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { brandName } from "@/lib/brand-config";
+import {
+  formatInstallCount,
+  getCapabilityColor,
+  hasHostedOption,
+  type PluginManifest,
+} from "@/lib/marketplace-data";
+
+interface PluginCardProps {
+  plugin: PluginManifest;
+  index?: number;
+  installed?: boolean;
+}
+
+export function PluginCard({ plugin, index = 0, installed = false }: PluginCardProps) {
+  const hostedAvailable = hasHostedOption(plugin.capabilities);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const springRotateX = useSpring(rotateX, { stiffness: 300, damping: 30 });
+  const springRotateY = useSpring(rotateY, { stiffness: 300, damping: 30 });
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    const rect = cardRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    rotateX.set(((y - centerY) / centerY) * -6);
+    rotateY.set(((x - centerX) / centerX) * 6);
+  }
+
+  function handleMouseLeave() {
+    rotateX.set(0);
+    rotateY.set(0);
+  }
+
+  return (
+    <motion.div
+      data-plugin-card-id={plugin.id}
+      data-onboarding-id={`marketplace.card.${plugin.id}`}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, delay: index * 0.05, ease: "easeOut" }}
+    >
+      <Link href={`/marketplace/${plugin.id}`}>
+        <motion.div
+          ref={cardRef}
+          style={{
+            rotateX: springRotateX,
+            rotateY: springRotateY,
+            perspective: 800,
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          whileTap={{ scale: 0.98 }}
+        >
+          <Card className="h-full transition-colors hover:border-primary/40">
+            <CardHeader>
+              <div className="flex items-start gap-3">
+                <motion.div
+                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white transition-shadow"
+                  style={{ backgroundColor: plugin.color }}
+                  whileHover={{
+                    boxShadow: `0 0 16px 4px ${plugin.color}40`,
+                    rotate: [0, -5, 5, 0],
+                  }}
+                  transition={{ duration: 0.4 }}
+                >
+                  {plugin.name[0]}
+                </motion.div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <CardTitle className="text-base">{plugin.name}</CardTitle>
+                    <Badge variant="secondary" className="text-[10px]">
+                      v{plugin.version}
+                    </Badge>
+                  </div>
+                  <CardDescription className="mt-1 line-clamp-2">
+                    {plugin.description}
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="flex flex-wrap gap-1.5">
+                {installed && (
+                  <Badge variant="secondary" className="text-[10px]">
+                    Installed
+                  </Badge>
+                )}
+                {plugin.capabilities.map((cap) => {
+                  const color = getCapabilityColor(cap);
+                  return (
+                    <Badge
+                      key={cap}
+                      variant="outline"
+                      className={`text-[10px] ${color.bg} ${color.text} ${color.border}`}
+                    >
+                      {cap}
+                    </Badge>
+                  );
+                })}
+                {hostedAvailable && (
+                  <Badge variant="terminal" className="text-[10px]">
+                    {brandName()} Hosted
+                  </Badge>
+                )}
+              </div>
+              <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
+                <span>{formatInstallCount(plugin.installCount)} installs</span>
+                <span>{plugin.author}</span>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </Link>
+    </motion.div>
+  );
+}

package/src/components/marketplace/superpower-card.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { motion, useMotionValue, useSpring } from "framer-motion";
+import Link from "next/link";
+import { useRef } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { PluginManifest } from "@/lib/marketplace-data";
+
+interface SuperpowerCardProps {
+  plugin: PluginManifest;
+  index?: number;
+  installed?: boolean;
+}
+
+export function SuperpowerCard({ plugin, index = 0, installed = false }: SuperpowerCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const springRotateX = useSpring(rotateX, { stiffness: 300, damping: 30 });
+  const springRotateY = useSpring(rotateY, { stiffness: 300, damping: 30 });
+
+  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    const rect = cardRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    rotateX.set(((y - centerY) / centerY) * -6);
+    rotateY.set(((x - centerX) / centerX) * 6);
+  }
+
+  function handleMouseLeave() {
+    rotateX.set(0);
+    rotateY.set(0);
+  }
+
+  return (
+    <motion.div
+      data-onboarding-id={`marketplace.card.${plugin.id}`}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, delay: index * 0.05, ease: "easeOut" }}
+      style={{ perspective: 800 }}
+    >
+      <Link href={`/marketplace/${plugin.id}`}>
+        <motion.div
+          ref={cardRef}
+          style={{
+            rotateX: springRotateX,
+            rotateY: springRotateY,
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          whileTap={{ scale: 0.98 }}
+          className="group relative h-full overflow-hidden rounded-xl border border-border/50 bg-card p-6 transition-colors hover:border-primary/40"
+        >
+          {/* Gradient wash */}
+          <div
+            className="absolute inset-0 opacity-5 transition-opacity group-hover:opacity-10"
+            style={{ background: `linear-gradient(135deg, ${plugin.color}, transparent)` }}
+          />
+
+          <div className="relative">
+            {/* Icon */}
+            <div
+              className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg text-sm font-bold text-white"
+              style={{ backgroundColor: plugin.color }}
+            >
+              {plugin.name[0]}
+            </div>
+
+            {installed && (
+              <Badge variant="secondary" className="mb-2 text-[10px]">
+                Installed
+              </Badge>
+            )}
+
+            {/* Headline -- outcome copy, not tech name */}
+            <h3 className="text-base font-bold">{plugin.superpowerHeadline ?? plugin.name}</h3>
+
+            {/* Tagline */}
+            <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
+              {plugin.superpowerTagline ?? plugin.description}
+            </p>
+
+            {/* CTA */}
+            <Button
+              data-onboarding-id={`marketplace.install.${plugin.id}`}
+              size="sm"
+              variant="outline"
+              className="mt-4 hover:border-primary/40"
+              tabIndex={-1}
+            >
+              {installed ? "Manage superpower" : "Give my bot this superpower"}
+            </Button>
+          </div>
+        </motion.div>
+      </Link>
+    </motion.div>
+  );
+}

package/src/components/marketplace/superpower-content.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import type { ComponentPropsWithoutRef } from "react";
+import { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+
+const sanitizeSchema = {
+  ...defaultSchema,
+  protocols: {
+    ...defaultSchema.protocols,
+    href: ["http", "https", "mailto"],
+  },
+};
+
+interface SuperpowerContentProps {
+  markdown: string;
+}
+
+interface Section {
+  heading: string;
+  body: string;
+  collapsed: boolean;
+}
+
+function parseSections(md: string): { preamble: string; sections: Section[] } {
+  const lines = md.split("\n");
+  let preamble = "";
+  const sections: Section[] = [];
+  let current: Section | null = null;
+
+  for (const line of lines) {
+    const h2Match = line.match(/^## (.+)$/);
+    if (h2Match) {
+      if (current) sections.push(current);
+      const heading = h2Match[1];
+      current = {
+        heading,
+        body: "",
+        collapsed: /what gets installed/i.test(heading),
+      };
+    } else if (current) {
+      current.body += `${line}\n`;
+    } else {
+      preamble += `${line}\n`;
+    }
+  }
+  if (current) sections.push(current);
+
+  return { preamble, sections };
+}
+
+const mdComponents = {
+  h1: ({ children }: ComponentPropsWithoutRef<"h1">) => (
+    <h1 className="text-4xl font-bold tracking-tight lg:text-5xl">{children}</h1>
+  ),
+  p: ({ children }: ComponentPropsWithoutRef<"p">) => (
+    <p className="text-base leading-relaxed text-muted-foreground">{children}</p>
+  ),
+  em: ({ children }: ComponentPropsWithoutRef<"em">) => (
+    <em className="text-lg text-muted-foreground not-italic font-light">{children}</em>
+  ),
+  ul: ({ children }: ComponentPropsWithoutRef<"ul">) => (
+    <ul className="space-y-2 ml-1">{children}</ul>
+  ),
+  li: ({ children }: ComponentPropsWithoutRef<"li">) => (
+    <li className="flex items-start gap-2 text-sm leading-relaxed">
+      <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary/60" />
+      <span>{children}</span>
+    </li>
+  ),
+};
+
+export function SuperpowerContent({ markdown }: SuperpowerContentProps) {
+  const { preamble, sections } = useMemo(() => parseSections(markdown), [markdown]);
+
+  return (
+    <div className="space-y-6">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
+        components={mdComponents}
+      >
+        {preamble}
+      </ReactMarkdown>
+
+      {sections.map((section) =>
+        section.collapsed ? (
+          <details key={section.heading} className="group rounded-lg border p-4">
+            <summary className="cursor-pointer text-lg font-semibold">{section.heading}</summary>
+            <div className="mt-3">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
+                components={mdComponents}
+              >
+                {section.body}
+              </ReactMarkdown>
+            </div>
+          </details>
+        ) : (
+          <div key={section.heading}>
+            <h2 className="text-xl font-semibold tracking-tight mb-3">{section.heading}</h2>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
+              components={mdComponents}
+            >
+              {section.body}
+            </ReactMarkdown>
+          </div>
+        ),
+      )}
+    </div>
+  );
+}

package/src/components/marketplace/terminal-search.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Search } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface TerminalSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function TerminalSearch({
+  value,
+  onChange,
+  placeholder = "Search plugins...",
+}: TerminalSearchProps) {
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <search
+      className={cn(
+        "flex items-center gap-2 rounded-sm border px-3 py-2 font-mono text-sm transition-all max-w-sm cursor-text",
+        focused
+          ? "border-primary shadow-[0_0_8px_rgba(0,255,65,0.15)]"
+          : "border-input hover:border-primary/40",
+      )}
+      onClick={() => inputRef.current?.focus()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") inputRef.current?.focus();
+      }}
+    >
+      <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="text-primary/60">$</span>
+      <div className="relative flex-1">
+        <input
+          ref={inputRef}
+          data-onboarding-id="marketplace.search"
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          placeholder={placeholder}
+          className="w-full bg-transparent outline-none placeholder:text-muted-foreground/50"
+          aria-label="Search plugins"
+        />
+        {focused && value === "" && (
+          <motion.span
+            className="absolute left-0 top-0 text-primary pointer-events-none"
+            animate={{ opacity: [1, 1, 0, 0] }}
+            transition={{
+              duration: 1.06,
+              repeat: Infinity,
+              times: [0, 0.49, 0.5, 1],
+              ease: "linear",
+            }}
+          >
+            _
+          </motion.span>
+        )}
+      </div>
+    </search>
+  );
+}

package/src/components/oauth-buttons.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { signIn } from "@/lib/auth-client";
+import { trpc } from "@/lib/trpc";
+
+const providerLabels: Record<string, string> = {
+  github: "GitHub",
+  discord: "Discord",
+  google: "Google",
+};
+
+interface OAuthButtonsProps {
+  callbackUrl?: string;
+}
+
+export function OAuthButtons({ callbackUrl = "/" }: OAuthButtonsProps) {
+  const [loading, setLoading] = useState<string | null>(null);
+  const { data: enabledProviders, isLoading } = trpc.authSocial.enabledSocialProviders.useQuery(
+    undefined,
+    { staleTime: Number.POSITIVE_INFINITY },
+  );
+
+  async function handleOAuth(provider: string) {
+    setLoading(provider);
+    try {
+      await signIn.social({
+        provider,
+        callbackURL: callbackUrl,
+      });
+    } catch {
+      // signIn.social redirects on success; failure here means the redirect didn't happen
+    } finally {
+      setLoading(null);
+    }
+  }
+
+  if (isLoading || !enabledProviders?.length) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="relative my-4 flex items-center">
+        <Separator className="flex-1" />
+        <span className="mx-3 text-xs uppercase tracking-wider text-muted-foreground">
+          or continue with
+        </span>
+        <Separator className="flex-1" />
+      </div>
+      <div className="flex flex-col gap-2">
+        {enabledProviders.map((id: string) => (
+          <Button
+            key={id}
+            variant="outline"
+            className="w-full border-terminal/30 hover:border-terminal hover:bg-terminal/5 hover:text-terminal"
+            disabled={loading !== null}
+            onClick={() => handleOAuth(id)}
+          >
+            {loading === id ? (
+              <span className="inline-flex items-center gap-1">
+                CONNECTING
+                <span className="h-4 w-1.5 animate-pulse bg-terminal" />
+              </span>
+            ) : (
+              `Continue with ${providerLabels[id] ?? id}`
+            )}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+}