@sansavision/create-pulse 0.4.4 → 0.4.5

package/templates/nextjs-auth-demo/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextjs-auth-demo/package.json

@@ -12,25 +12,26 @@
     "db:studio": "npx drizzle-kit studio"
   },
   "dependencies": {
-    "next": "16.1.6",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "@sansavision/pulse-sdk": "^0.4.2",
     "better-auth": "^1.2.0",
     "better-sqlite3": "^12.0.0",
     "drizzle-orm": "^0.41.0",
-    "@sansavision/pulse-sdk": "^0.4.2",
-    "lucide-react": "^0.412.0"
+    "lucide-react": "^0.412.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-player": "^2.16.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@types/better-sqlite3": "^7.6.0",
     "drizzle-kit": "^0.31.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

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

@@ -16,6 +16,7 @@ import {
     Trophy,
     Zap,
     Activity,
+    AlertCircle,
 } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 
@@ -47,6 +48,7 @@ export default function ArenaGamePage() {
     // Room management
     const [roomId, setRoomId] = useState("");
     const [inputRoomId, setInputRoomId] = useState("");
+    const [error, setError] = useState("");
     const [inGame, setInGame] = useState(false);
     const [copied, setCopied] = useState(false);
     const [playerCount, setPlayerCount] = useState(1);
@@ -401,8 +403,16 @@ export default function ArenaGamePage() {
     // Join existing room
     function handleJoinRoom(e: React.FormEvent) {
         e.preventDefault();
-        if (!inputRoomId.trim()) return;
-        joinGame(inputRoomId.trim());
+        const cleaned = inputRoomId.trim();
+        if (!cleaned) return;
+
+        if (!/^[a-zA-Z0-9-]{6,12}$/.test(cleaned)) {
+            setError("Invalid room format. Must be 6-12 characters (letters, numbers, hyphens).");
+            return;
+        }
+
+        setError("");
+        joinGame(cleaned);
     }
 
     // Copy room ID
@@ -493,11 +503,18 @@ export default function ArenaGamePage() {
                             </div>
                         </div>
 
+                        {error && (
+                            <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2 text-red-400 text-sm text-left">
+                                <AlertCircle className="w-4 h-4 shrink-0" />
+                                <p>{error}</p>
+                            </div>
+                        )}
+
                         <form onSubmit={handleJoinRoom} className="flex gap-3">
                             <input
                                 type="text"
                                 value={inputRoomId}
-                                onChange={(e) => setInputRoomId(e.target.value)}
+                                onChange={(e) => { setInputRoomId(e.target.value); setError(""); }}
                                 placeholder="Enter room code..."
                                 className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-orange-500 focus:ring-1 focus:ring-orange-500 outline-none text-sm transition-colors placeholder:text-slate-600"
                             />

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

@@ -25,7 +25,15 @@ interface ChatMessage {
 export default function ChatDemoPage() {
     const { data: session } = useSession();
     const [connected, setConnected] = useState(false);
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
+    const [messages, setMessages] = useState<ChatMessage[]>(() => {
+        if (typeof window !== "undefined") {
+            try {
+                const stored = localStorage.getItem("pulse-chat-messages");
+                if (stored) return JSON.parse(stored);
+            } catch { /* ignore */ }
+        }
+        return [];
+    });
     const [input, setInput] = useState("");
     const [authUser, setAuthUser] = useState<{
         id: string;
@@ -35,11 +43,24 @@ export default function ChatDemoPage() {
     const [connecting, setConnecting] = useState(true);
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const connRef = useRef<PulseConnection | null>(null);
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const sessionRef = useRef(session);
+    const seenIdsRef = useRef(new Set<string>());
+
+    // Keep session ref in sync
+    useEffect(() => { sessionRef.current = session; }, [session]);
 
     const scrollToBottom = useCallback(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }, []);
 
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("pulse-chat-messages", JSON.stringify(messages.slice(-100)));
+        }
+    }, [messages]);
+
+    // Connect to relay — run ONCE when session is available
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -53,39 +74,50 @@ export default function ChatDemoPage() {
                 setConnected(true);
                 setConnecting(false);
 
-                // Check auth user from the ACCEPT payload
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const user = (connection as any).user;
                 if (user) setAuthUser(user);
 
-                // Open a chat stream
+                // Open the chat stream ONCE and store in ref
                 const stream = connection.stream("chat-room");
+                streamRef.current = stream;
 
                 // Announce join
-                stream.send(
-                    JSON.stringify({
-                        type: "join",
-                        user: session!.user.name,
-                        userId: session!.user.id,
-                    })
-                );
+                const sess = sessionRef.current;
+                if (sess) {
+                    stream.send(
+                        JSON.stringify({
+                            type: "join",
+                            user: sess.user.name,
+                            userId: sess.user.id,
+                        })
+                    );
+                }
 
-                // Listen for messages (skip self-echoes — we add our own messages locally)
+                // Listen for messages — uses sessionRef to avoid stale closures
                 stream.on("data", (data: Uint8Array) => {
                     try {
                         const msg = JSON.parse(new TextDecoder().decode(data));
-                        if (msg.type === "chat" && msg.userId !== session!.user.id) {
+                        const currentSess = sessionRef.current;
+                        if (!currentSess) return;
+                        const selfId = currentSess.user.id;
+
+                        // Deduplication via message ID
+                        if (msg.msgId && seenIdsRef.current.has(msg.msgId)) return;
+                        if (msg.msgId) seenIdsRef.current.add(msg.msgId);
+
+                        if (msg.type === "chat" && msg.userId !== selfId) {
                             setMessages((prev) => [
                                 ...prev,
                                 {
-                                    id: crypto.randomUUID(),
+                                    id: msg.msgId || crypto.randomUUID(),
                                     user: msg.user,
                                     userId: msg.userId,
                                     text: msg.text,
                                     timestamp: Date.now(),
                                 },
                             ]);
-                        } else if (msg.type === "join") {
+                        } else if (msg.type === "join" && msg.userId !== selfId) {
                             setOnlineUsers((prev) =>
                                 prev.includes(msg.user) ? prev : [...prev, msg.user]
                             );
@@ -99,6 +131,32 @@ export default function ChatDemoPage() {
                                     timestamp: Date.now(),
                                 },
                             ]);
+
+                            // Announce our presence back
+                            const s = sessionRef.current;
+                            if (s) {
+                                stream.send(JSON.stringify({
+                                    type: "presence",
+                                    user: s.user.name,
+                                    userId: s.user.id,
+                                }));
+                            }
+                        } else if (msg.type === "presence" && msg.userId !== selfId) {
+                            setOnlineUsers((prev) =>
+                                prev.includes(msg.user) ? prev : [...prev, msg.user]
+                            );
+                        } else if (msg.type === "leave" && msg.userId !== selfId) {
+                            setOnlineUsers((prev) => prev.filter(u => u !== msg.user));
+                            setMessages((prev) => [
+                                ...prev,
+                                {
+                                    id: crypto.randomUUID(),
+                                    user: "System",
+                                    userId: "system",
+                                    text: `${msg.user} left the chat`,
+                                    timestamp: Date.now(),
+                                },
+                            ]);
                         }
                     } catch {
                         // ignore parse errors
@@ -106,7 +164,18 @@ export default function ChatDemoPage() {
                 });
 
                 connection.on("disconnect", () => setConnected(false));
-                connection.on("reconnected", () => setConnected(true));
+                connection.on("reconnected", () => {
+                    setConnected(true);
+                    // Re-announce on reconnect
+                    const s = sessionRef.current;
+                    if (s && streamRef.current) {
+                        streamRef.current.send(JSON.stringify({
+                            type: "join",
+                            user: s.user.name,
+                            userId: s.user.id,
+                        }));
+                    }
+                });
             } catch (err) {
                 console.error("Failed to connect:", err);
                 setConnecting(false);
@@ -117,6 +186,17 @@ export default function ChatDemoPage() {
 
         return () => {
             cancelled = true;
+            const sess = sessionRef.current;
+            if (streamRef.current && sess) {
+                try {
+                    streamRef.current.send(JSON.stringify({
+                        type: "leave",
+                        user: sess.user.name,
+                        userId: sess.user.id
+                    }));
+                } catch { /* ignore */ }
+            }
+            streamRef.current = null;
             connRef.current?.disconnect();
         };
     }, [session]);
@@ -125,27 +205,32 @@ export default function ChatDemoPage() {
 
     function sendMessage(e: React.FormEvent) {
         e.preventDefault();
-        if (!input.trim() || !connRef.current) return;
+        if (!input.trim() || !streamRef.current) return;
 
         const text = input.trim();
-        const user = session?.user?.name || "Anonymous";
-        const usrId = session?.user?.id || "unknown";
+        const sess = sessionRef.current;
+        const user = sess?.user?.name || "Anonymous";
+        const usrId = sess?.user?.id || "unknown";
+        const msgId = crypto.randomUUID();
+
+        // Mark as seen so we don't add our own echo
+        seenIdsRef.current.add(msgId);
 
-        const stream = connRef.current.stream("chat-room");
-        stream.send(
+        streamRef.current.send(
             JSON.stringify({
                 type: "chat",
                 user,
                 userId: usrId,
                 text,
+                msgId,
             })
         );
 
-        // Add to local state immediately (relay echoes, but we filter self in on("data"))
+        // Add to local state immediately
         setMessages((prev) => [
             ...prev,
             {
-                id: crypto.randomUUID(),
+                id: msgId,
                 user,
                 userId: usrId,
                 text,
@@ -195,7 +280,7 @@ export default function ChatDemoPage() {
                     <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800">
                         <Users className="w-3.5 h-3.5 text-slate-400" />
                         <span className="text-xs text-slate-400">
-                            {onlineUsers.length || 1} online
+                            {onlineUsers.length + 1} online
                         </span>
                     </div>
                 </div>