@sansavision/create-pulse 0.4.1 → 0.4.3

package/templates/nextjs-auth-demo/src/app/dashboard/demos/watch-together/page.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Video,
+    Play,
+    Pause,
+    SkipForward,
+    Users,
+    Shield,
+    Wifi,
+    WifiOff,
+    Loader2,
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+export default function WatchTogetherPage() {
+    const { data: session } = useSession();
+    const [connected, setConnected] = useState(false);
+    const [authUser, setAuthUser] = useState<{ id: string; claims: Record<string, string> } | null>(null);
+    const [connecting, setConnecting] = useState(true);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [viewers, setViewers] = useState<string[]>([]);
+    const [syncEvents, setSyncEvents] = useState<string[]>([]);
+    const connRef = useRef<PulseConnection | null>(null);
+    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+
+                connRef.current = connection;
+                setConnected(true);
+                setConnecting(false);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                const stream = connection.stream("watch-room");
+
+                stream.send(
+                    JSON.stringify({ type: "viewer-join", name: session!.user.name })
+                );
+
+                stream.on("data", (data: Uint8Array) => {
+                    try {
+                        const msg = JSON.parse(new TextDecoder().decode(data));
+                        if (msg.type === "play") {
+                            setPlaying(true);
+                            setSyncEvents((prev) => [
+                                `${msg.user} pressed play at ${msg.time?.toFixed(1)}s`,
+                                ...prev.slice(0, 9),
+                            ]);
+                        } else if (msg.type === "pause") {
+                            setPlaying(false);
+                            setSyncEvents((prev) => [
+                                `${msg.user} paused at ${msg.time?.toFixed(1)}s`,
+                                ...prev.slice(0, 9),
+                            ]);
+                        } else if (msg.type === "seek") {
+                            setCurrentTime(msg.time || 0);
+                            setSyncEvents((prev) => [
+                                `${msg.user} seeked to ${msg.time?.toFixed(1)}s`,
+                                ...prev.slice(0, 9),
+                            ]);
+                        } else if (msg.type === "viewer-join") {
+                            setViewers((prev) =>
+                                prev.includes(msg.name) ? prev : [...prev, msg.name]
+                            );
+                            setSyncEvents((prev) => [
+                                `${msg.name} joined the watch party`,
+                                ...prev.slice(0, 9),
+                            ]);
+                        }
+                    } catch {
+                        /* ignore */
+                    }
+                });
+
+                connection.on("disconnect", () => setConnected(false));
+                connection.on("reconnected", () => setConnected(true));
+            } catch (err) {
+                console.error("Failed to connect:", err);
+                setConnecting(false);
+            }
+        }
+
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+            if (intervalRef.current) clearInterval(intervalRef.current);
+        };
+    }, [session]);
+
+    useEffect(() => {
+        if (playing) {
+            intervalRef.current = setInterval(
+                () => setCurrentTime((t) => t + 0.1),
+                100
+            );
+        } else {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+        }
+        return () => {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+        };
+    }, [playing]);
+
+    function sendAction(type: string) {
+        if (!connRef.current) return;
+        const stream = connRef.current.stream("watch-room");
+        stream.send(
+            JSON.stringify({
+                type,
+                user: session?.user?.name,
+                time: currentTime,
+            })
+        );
+    }
+
+    function handlePlayPause() {
+        const action = playing ? "pause" : "play";
+        sendAction(action);
+        setPlaying(!playing);
+    }
+
+    function handleSeek(seconds: number) {
+        setCurrentTime((prev) => Math.max(0, prev + seconds));
+        sendAction("seek");
+    }
+
+    const formatTime = (t: number) => {
+        const mins = Math.floor(t / 60);
+        const secs = Math.floor(t % 60);
+        return `${mins}:${secs.toString().padStart(2, "0")}`;
+    };
+
+    return (
+        <div className="p-8">
+            <div className="flex items-center justify-between mb-8">
+                <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
+                        <Video className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold">Watch Together</h1>
+                        <p className="text-sm text-slate-500">
+                            Synchronized video playback across users
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-3">
+                    {authUser && (
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20">
+                            <Shield className="w-3.5 h-3.5 text-green-400" />
+                            <span className="text-xs text-green-400">
+                                {authUser.claims.name || authUser.id}
+                            </span>
+                        </div>
+                    )}
+                    {connected ? (
+                        <div className="flex items-center gap-2">
+                            <Wifi className="w-4 h-4 text-green-400" />
+                            <span className="text-xs text-green-400">Connected</span>
+                        </div>
+                    ) : (
+                        <div className="flex items-center gap-2">
+                            <WifiOff className="w-4 h-4 text-red-400" />
+                            <span className="text-xs text-red-400">Disconnected</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {connecting ? (
+                <div className="flex items-center justify-center py-20">
+                    <Loader2 className="w-6 h-6 animate-spin text-purple-500 mr-2" />
+                    <span className="text-slate-400">Connecting...</span>
+                </div>
+            ) : (
+                <div className="grid lg:grid-cols-3 gap-8">
+                    <div className="lg:col-span-2">
+                        <div className="glass rounded-2xl overflow-hidden">
+                            <div className="aspect-video bg-gradient-to-br from-slate-900 to-slate-800 flex items-center justify-center relative">
+                                <div className="text-center">
+                                    <Video className="w-16 h-16 text-slate-600 mx-auto mb-4" />
+                                    <p className="text-slate-500 text-sm">Simulated Video Player</p>
+                                    <p className="text-3xl font-mono text-white mt-2">{formatTime(currentTime)}</p>
+                                </div>
+                                <div className="absolute bottom-0 left-0 right-0 h-1 bg-slate-700">
+                                    <div
+                                        className="h-full bg-gradient-to-r from-pink-500 to-rose-500 transition-all"
+                                        style={{ width: `${Math.min((currentTime / 300) * 100, 100)}%` }}
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="p-4 flex items-center gap-4">
+                                <button onClick={handlePlayPause} disabled={!connected}
+                                    className="w-10 h-10 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-transform disabled:opacity-50">
+                                    {playing ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5 ml-0.5" />}
+                                </button>
+                                <button onClick={() => handleSeek(10)} disabled={!connected}
+                                    className="p-2 rounded-lg hover:bg-slate-800 transition-colors disabled:opacity-50">
+                                    <SkipForward className="w-4 h-4" />
+                                </button>
+                                <span className="text-sm text-slate-400 font-mono">{formatTime(currentTime)} / 5:00</span>
+                                <div className="flex-1" />
+                                <div className="flex items-center gap-2">
+                                    <Users className="w-4 h-4 text-slate-400" />
+                                    <span className="text-sm text-slate-400">{Math.max(viewers.length, 1)} watching</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-6">
+                        <div className="glass rounded-2xl p-6">
+                            <h3 className="text-sm font-semibold mb-3 text-pink-400">Viewers</h3>
+                            <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center text-[10px] font-bold">
+                                        {session?.user?.name?.charAt(0) || "?"}
+                                    </div>
+                                    <span className="text-sm">{session?.user?.name} (you)</span>
+                                </div>
+                                {viewers.filter((v) => v !== session?.user?.name).map((v) => (
+                                    <div key={v} className="flex items-center gap-2">
+                                        <div className="w-6 h-6 rounded-full bg-gradient-to-br from-pink-500 to-rose-500 flex items-center justify-center text-[10px] font-bold">{v.charAt(0)}</div>
+                                        <span className="text-sm">{v}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="glass rounded-2xl p-6">
+                            <h3 className="text-sm font-semibold mb-3 text-cyan-400">Sync Events</h3>
+                            <div className="space-y-2 max-h-60 overflow-y-auto">
+                                {syncEvents.length === 0 && <p className="text-xs text-slate-500">No sync events yet. Press play!</p>}
+                                {syncEvents.map((event, i) => <div key={i} className="text-xs text-slate-400">{event}</div>)}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/dashboard/layout.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useSession, signOut } from "@/lib/auth-client";
+import {
+    Zap,
+    LayoutDashboard,
+    MessageSquare,
+    Video,
+    Database,
+    Gamepad2,
+    Lock,
+    LogOut,
+    Loader2,
+    ChevronRight,
+} from "lucide-react";
+import { useEffect } from "react";
+
+const navItems = [
+    { href: "/dashboard", label: "Overview", icon: LayoutDashboard },
+    { href: "/dashboard/demos/chat", label: "Real-time Chat", icon: MessageSquare },
+    { href: "/dashboard/demos/watch-together", label: "Watch Together", icon: Video },
+    { href: "/dashboard/demos/queues", label: "Durable Queues", icon: Database },
+    { href: "/dashboard/demos/game-sync", label: "Game Sync", icon: Gamepad2 },
+    { href: "/dashboard/demos/encrypted-chat", label: "E2E Encrypted", icon: Lock },
+];
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const { data: session, isPending } = useSession();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (!isPending && !session) {
+            router.push("/auth/sign-in");
+        }
+    }, [session, isPending, router]);
+
+    if (isPending) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <Loader2 className="w-8 h-8 animate-spin text-purple-500" />
+            </div>
+        );
+    }
+
+    if (!session) return null;
+
+    return (
+        <div className="min-h-screen flex">
+            {/* Sidebar */}
+            <aside className="w-64 border-r border-slate-800 flex flex-col">
+                <div className="p-5 border-b border-slate-800">
+                    <Link href="/" className="flex items-center gap-2">
+                        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+                            <Zap className="w-5 h-5 text-white" />
+                        </div>
+                        <span className="text-lg font-bold">Pulse</span>
+                    </Link>
+                </div>
+
+                <nav className="flex-1 p-3 space-y-1">
+                    {navItems.map((item) => (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800/50 transition-all group"
+                        >
+                            <item.icon className="w-4 h-4" />
+                            <span className="flex-1">{item.label}</span>
+                            <ChevronRight className="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </Link>
+                    ))}
+                </nav>
+
+                {/* User info */}
+                <div className="p-4 border-t border-slate-800">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center text-xs font-bold">
+                            {session.user.name?.charAt(0)?.toUpperCase() || "?"}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <div className="text-sm font-medium truncate">
+                                {session.user.name}
+                            </div>
+                            <div className="text-xs text-slate-500 truncate">
+                                {session.user.email}
+                            </div>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => signOut().then(() => router.push("/"))}
+                        className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
+                    >
+                        <LogOut className="w-4 h-4" />
+                        Sign out
+                    </button>
+                </div>
+            </aside>
+
+            {/* Main content */}
+            <main className="flex-1 overflow-y-auto">{children}</main>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/dashboard/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import Link from "next/link";
+import { useSession } from "@/lib/auth-client";
+import {
+    MessageSquare,
+    Video,
+    Database,
+    Gamepad2,
+    Lock,
+    ArrowRight,
+    Shield,
+    Wifi,
+    Activity,
+} from "lucide-react";
+
+const demos = [
+    {
+        href: "/dashboard/demos/chat",
+        icon: MessageSquare,
+        title: "Real-time Chat",
+        desc: "Multi-user rooms with presence, typing indicators, and auth identity. Open a second tab with a different user to see live messaging.",
+        color: "from-blue-500 to-blue-600",
+        badge: "Pub/Sub",
+    },
+    {
+        href: "/dashboard/demos/watch-together",
+        icon: Video,
+        title: "Watch Together",
+        desc: "Synchronized video playback. Play, pause, and seek in perfect sync across all connected users.",
+        color: "from-pink-500 to-rose-600",
+        badge: "Broadcast",
+    },
+    {
+        href: "/dashboard/demos/queues",
+        icon: Database,
+        title: "Durable Queues",
+        desc: "Publish messages, simulate going offline, come back online — messages persist and are delivered. Full ACK/NACK flow.",
+        color: "from-amber-500 to-orange-600",
+        badge: "Queue",
+    },
+    {
+        href: "/dashboard/demos/game-sync",
+        icon: Gamepad2,
+        title: "Game State Sync",
+        desc: "Shared game board with real-time state sync. Multiple users can interact with the same game state simultaneously.",
+        color: "from-green-500 to-emerald-600",
+        badge: "State",
+    },
+    {
+        href: "/dashboard/demos/encrypted-chat",
+        icon: Lock,
+        title: "E2E Encrypted Chat",
+        desc: "End-to-end encrypted messaging where the relay cannot read content. Key exchange visualization included.",
+        color: "from-purple-500 to-violet-600",
+        badge: "P2P",
+    },
+];
+
+export default function DashboardPage() {
+    const { data: session } = useSession();
+
+    return (
+        <div className="p-8">
+            {/* Header */}
+            <div className="mb-8">
+                <h1 className="text-3xl font-bold mb-2">
+                    Welcome, {session?.user?.name?.split(" ")[0] || "there"} 👋
+                </h1>
+                <p className="text-slate-400 text-lg">
+                    Choose a demo to explore Pulse&apos;s capabilities with authenticated
+                    connections.
+                </p>
+            </div>
+
+            {/* Connection status */}
+            <div className="glass rounded-xl p-5 mb-8 flex items-center gap-6">
+                <div className="flex items-center gap-2">
+                    <Shield className="w-4 h-4 text-green-400" />
+                    <span className="text-sm text-green-400 font-medium">
+                        Authenticated
+                    </span>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Wifi className="w-4 h-4 text-cyan-400" />
+                    <span className="text-sm text-slate-400">
+                        Relay:{" "}
+                        <code className="text-cyan-400 bg-cyan-500/10 px-1.5 py-0.5 rounded text-xs">
+                            {process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001"}
+                        </code>
+                    </span>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Activity className="w-4 h-4 text-purple-400" />
+                    <span className="text-sm text-slate-400">
+                        Auth Mode:{" "}
+                        <code className="text-purple-400 bg-purple-500/10 px-1.5 py-0.5 rounded text-xs">
+                            webhook
+                        </code>
+                    </span>
+                </div>
+            </div>
+
+            {/* Tip */}
+            <div className="glass rounded-xl p-5 mb-8 border-l-4 border-purple-500">
+                <h3 className="text-sm font-semibold text-purple-400 mb-1">
+                    💡 Multi-User Tip
+                </h3>
+                <p className="text-sm text-slate-400">
+                    Open a second browser tab (or incognito window), create a different
+                    account, and interact simultaneously. Watch messages, video sync, and
+                    game state flow in real-time between users.
+                </p>
+            </div>
+
+            {/* Demo cards */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {demos.map((demo) => (
+                    <Link key={demo.href} href={demo.href}>
+                        <div className="demo-card glass rounded-2xl p-6 h-full cursor-pointer group">
+                            <div className="flex items-start justify-between mb-4">
+                                <div
+                                    className={`w-12 h-12 rounded-xl bg-gradient-to-br ${demo.color} flex items-center justify-center`}
+                                >
+                                    <demo.icon className="w-6 h-6 text-white" />
+                                </div>
+                                <span className="text-xs font-mono px-2 py-1 rounded-md bg-slate-800 text-slate-400 border border-slate-700">
+                                    {demo.badge}
+                                </span>
+                            </div>
+                            <h3 className="text-lg font-semibold mb-2 group-hover:text-purple-400 transition-colors">
+                                {demo.title}
+                            </h3>
+                            <p className="text-sm text-slate-400 leading-relaxed mb-4">
+                                {demo.desc}
+                            </p>
+                            <div className="flex items-center gap-1 text-sm text-purple-400 font-medium">
+                                Open Demo
+                                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+                            </div>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/globals.css

@@ -0,0 +1,96 @@
+@import "tailwindcss";
+
+:root {
+  --color-primary: #7c3aed;
+  --color-primary-light: #a78bfa;
+  --color-accent: #06b6d4;
+  --color-surface: #0f172a;
+  --color-surface-elevated: #1e293b;
+  --color-surface-hover: #334155;
+  --color-text: #f1f5f9;
+  --color-text-muted: #94a3b8;
+  --color-border: #334155;
+  --color-danger: #ef4444;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", "SF Pro Display", -apple-system, system-ui, sans-serif;
+  background: var(--color-surface);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Smooth scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+/* Glassmorphism utility */
+.glass {
+  background: rgba(30, 41, 59, 0.7);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #7c3aed, #06b6d4, #10b981);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Pulse animation */
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
+  50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.6); }
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Status indicator */
+@keyframes status-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-online {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-success);
+  animation: status-blink 2s ease-in-out infinite;
+}
+
+.status-offline {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-danger);
+}
+
+/* Card hover effect */
+.demo-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.demo-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.15);
+}

package/templates/nextjs-auth-demo/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Pulse — Real-Time Protocol Demo",
+  description:
+    "Investor-ready demo showcasing PLP (Pulse Line Protocol) with auth, real-time chat, synchronized video, durable queues, and encrypted messaging.",
+  keywords: ["pulse", "real-time", "websocket", "protocol", "auth"],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="min-h-screen antialiased">{children}</body>
+    </html>
+  );
+}