@sansavision/create-pulse 0.4.3 → 0.4.4

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

@@ -1,18 +1,24 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
 import {
     MessageSquare,
     Video,
+    PhoneCall,
     Database,
     Gamepad2,
     Lock,
     ArrowRight,
     Shield,
-    Wifi,
+    Zap,
     Activity,
+    Circle,
+    Swords,
 } from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
 
 const demos = [
     {
@@ -23,6 +29,14 @@ const demos = [
         color: "from-blue-500 to-blue-600",
         badge: "Pub/Sub",
     },
+    {
+        href: "/dashboard/demos/video-call",
+        icon: PhoneCall,
+        title: "Video Call",
+        desc: "Zoom-like peer-to-peer video calls using Pulse as the signaling layer. Camera, mic, screen sharing, and dynamic grid layout.",
+        color: "from-indigo-500 to-sky-500",
+        badge: "WebRTC",
+    },
     {
         href: "/dashboard/demos/watch-together",
         icon: Video,
@@ -47,6 +61,14 @@ const demos = [
         color: "from-green-500 to-emerald-600",
         badge: "State",
     },
+    {
+        href: "/dashboard/demos/arena-game",
+        icon: Swords,
+        title: "Arena Game",
+        desc: "Real-time multiplayer arena. Create a room, share the code, and compete to collect golden orbs. 30 updates/sec state sync.",
+        color: "from-orange-500 to-red-600",
+        badge: "Multiplayer",
+    },
     {
         href: "/dashboard/demos/encrypted-chat",
         icon: Lock,
@@ -59,13 +81,29 @@ const demos = [
 
 export default function DashboardPage() {
     const { data: session } = useSession();
+    const [relayConnected, setRelayConnected] = useState(false);
+
+    useEffect(() => {
+        if (!session) return;
+        let conn: PulseConnection | null = null;
+        connectWithAuth().then((c) => {
+            conn = c;
+            setRelayConnected(true);
+            c.on("disconnect", () => setRelayConnected(false));
+            c.on("reconnected", () => setRelayConnected(true));
+        }).catch(() => setRelayConnected(false));
+        return () => { conn?.disconnect(); };
+    }, [session]);
+
+    const relayUrl = process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001";
+    const plpUrl = relayUrl.replace(/^ws:\/\//, "plp://").replace(/^wss:\/\//, "plps://");
 
     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"} 👋
+                    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
@@ -74,7 +112,17 @@ export default function DashboardPage() {
             </div>
 
             {/* Connection status */}
-            <div className="glass rounded-xl p-5 mb-8 flex items-center gap-6">
+            <div className="glass rounded-xl p-5 mb-8 flex items-center gap-6 flex-wrap">
+                <div className="flex items-center gap-2">
+                    {relayConnected ? (
+                        <Circle className="w-3 h-3 text-green-400 fill-green-400 animate-pulse" />
+                    ) : (
+                        <Circle className="w-3 h-3 text-red-400 fill-red-400" />
+                    )}
+                    <span className={`text-sm font-medium ${relayConnected ? 'text-green-400' : 'text-red-400'}`}>
+                        {relayConnected ? 'Connected' : 'Disconnected'}
+                    </span>
+                </div>
                 <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">
@@ -82,11 +130,11 @@ export default function DashboardPage() {
                     </span>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Wifi className="w-4 h-4 text-cyan-400" />
+                    <Zap 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"}
+                            {plpUrl}
                         </code>
                     </span>
                 </div>

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

@@ -4,7 +4,7 @@ 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.",
+    "Full-featured demo showcasing PLP (Pulse Line Protocol) with auth, video calls, real-time chat, synchronized video, durable queues, and encrypted messaging.",
   keywords: ["pulse", "real-time", "websocket", "protocol", "auth"],
 };