@sansavision/create-pulse 0.4.2 → 0.4.4

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "@/lib/auth-client";
 import { connectWithAuth } from "@/lib/pulse";
-import { Lock, Send, Shield, Wifi, WifiOff, Loader2, Key, ShieldCheck, Eye, EyeOff } from "lucide-react";
+import { Lock, Send, Shield, Wifi, WifiOff, Loader2, Key, ShieldCheck, Eye, EyeOff, Code, X, ChevronDown } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 
 interface EncryptedMessage {
@@ -12,8 +12,26 @@ interface EncryptedMessage {
     plaintext: string;
     ciphertext: string;
     timestamp: number;
+    type: "text" | "code";
+    language?: string;
 }
 
+const CODE_LANGUAGES = [
+    { value: "javascript", label: "JavaScript" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "python", label: "Python" },
+    { value: "rust", label: "Rust" },
+    { value: "go", label: "Go" },
+    { value: "java", label: "Java" },
+    { value: "css", label: "CSS" },
+    { value: "html", label: "HTML" },
+    { value: "sql", label: "SQL" },
+    { value: "bash", label: "Bash" },
+    { value: "json", label: "JSON" },
+    { value: "yaml", label: "YAML" },
+    { value: "plaintext", label: "Plain Text" },
+];
+
 export default function EncryptedChatPage() {
     const { data: session } = useSession();
     const [connected, setConnected] = useState(false);
@@ -22,12 +40,17 @@ export default function EncryptedChatPage() {
     const [messages, setMessages] = useState<EncryptedMessage[]>([]);
     const [input, setInput] = useState("");
     const [showCiphertext, setShowCiphertext] = useState(false);
+    const [showCodeEditor, setShowCodeEditor] = useState(false);
+    const [codeContent, setCodeContent] = useState("");
+    const [codeLanguage, setCodeLanguage] = useState("javascript");
+    const [showLangDropdown, setShowLangDropdown] = useState(false);
     const [encryptionKey] = useState(() =>
         Array.from(crypto.getRandomValues(new Uint8Array(16)))
             .map((b) => b.toString(16).padStart(2, "0")).join("")
     );
     const connRef = useRef<PulseConnection | null>(null);
     const messagesEndRef = useRef<HTMLDivElement>(null);
+    const codeTextareaRef = useRef<HTMLTextAreaElement>(null);
 
     const scrollToBottom = useCallback(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -65,10 +88,12 @@ export default function EncryptedChatPage() {
 
                 const stream = connection.stream("encrypted-room");
 
+                // Listen for messages (skip self-echoes — we add our own messages locally)
                 stream.on("data", (data: Uint8Array) => {
                     try {
                         const msg = JSON.parse(new TextDecoder().decode(data));
-                        if (msg.type === "encrypted-msg") {
+                        const selfName = session?.user?.name || "Anonymous";
+                        if ((msg.type === "encrypted-msg" || msg.type === "encrypted-code") && msg.sender !== selfName) {
                             const decrypted = simpleDecrypt(msg.ciphertext, encryptionKey);
                             setMessages((prev) => [
                                 ...prev,
@@ -78,6 +103,8 @@ export default function EncryptedChatPage() {
                                     plaintext: decrypted,
                                     ciphertext: msg.ciphertext,
                                     timestamp: Date.now(),
+                                    type: msg.type === "encrypted-code" ? "code" : "text",
+                                    language: msg.language,
                                 },
                             ]);
                         }
@@ -108,12 +135,87 @@ export default function EncryptedChatPage() {
 
         const plaintext = input.trim();
         const ciphertext = simpleEncrypt(plaintext, encryptionKey);
+        const sender = session?.user?.name || "Anonymous";
 
         const stream = connRef.current.stream("encrypted-room");
-        stream.send(JSON.stringify({ type: "encrypted-msg", sender: session?.user?.name || "Anonymous", ciphertext }));
+        stream.send(JSON.stringify({ type: "encrypted-msg", sender, ciphertext }));
+
+        // Add to local state immediately (relay echoes, but we filter self in on("data"))
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                sender,
+                plaintext,
+                ciphertext,
+                timestamp: Date.now(),
+                type: "text",
+            },
+        ]);
         setInput("");
     }
 
+    function sendCode() {
+        if (!codeContent.trim() || !connRef.current) return;
+
+        const plaintext = codeContent.trim();
+        const ciphertext = simpleEncrypt(plaintext, encryptionKey);
+        const sender = session?.user?.name || "Anonymous";
+
+        const stream = connRef.current.stream("encrypted-room");
+        stream.send(JSON.stringify({
+            type: "encrypted-code",
+            sender,
+            ciphertext,
+            language: codeLanguage,
+        }));
+
+        // Add to local state immediately
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                sender,
+                plaintext,
+                ciphertext,
+                timestamp: Date.now(),
+                type: "code",
+                language: codeLanguage,
+            },
+        ]);
+        setCodeContent("");
+        setShowCodeEditor(false);
+    }
+
+    function handleCodeKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+        // Handle Tab key for indentation
+        if (e.key === "Tab") {
+            e.preventDefault();
+            const textarea = e.currentTarget;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const newValue = codeContent.substring(0, start) + "  " + codeContent.substring(end);
+            setCodeContent(newValue);
+            // Set cursor position after the tab
+            setTimeout(() => {
+                textarea.selectionStart = textarea.selectionEnd = start + 2;
+            }, 0);
+        }
+        // Cmd/Ctrl+Enter to send
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            sendCode();
+        }
+    }
+
+    function openCodeEditor() {
+        setShowCodeEditor(true);
+        setTimeout(() => codeTextareaRef.current?.focus(), 100);
+    }
+
+    const getLanguageLabel = (val: string) =>
+        CODE_LANGUAGES.find((l) => l.value === val)?.label || val;
+
     return (
         <div className="h-screen flex flex-col">
             <div className="p-4 border-b border-slate-800">
@@ -169,10 +271,37 @@ export default function EncryptedChatPage() {
                 {messages.map((msg) => (
                     <div key={msg.id}>
                         <div className={`flex ${msg.sender === session?.user?.name ? "justify-end" : "justify-start"}`}>
-                            <div className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.sender === session?.user?.name ? "bg-purple-600 text-white rounded-br-md" : "glass text-slate-200 rounded-bl-md"}`}>
-                                {msg.sender !== session?.user?.name && <div className="text-xs text-purple-400 font-medium mb-1">{msg.sender}</div>}
-                                <div className="flex items-center gap-1.5"><Lock className="w-3 h-3 text-green-400 shrink-0" />{msg.plaintext}</div>
-                            </div>
+                            {msg.type === "code" ? (
+                                /* Code snippet message */
+                                <div className={`max-w-lg w-full rounded-2xl overflow-hidden border ${msg.sender === session?.user?.name
+                                    ? "border-purple-500/30 bg-purple-950/30"
+                                    : "border-slate-700 bg-slate-800/50"
+                                    }`}>
+                                    <div className="flex items-center justify-between px-4 py-2 border-b border-slate-700/50 bg-slate-900/50">
+                                        <div className="flex items-center gap-2">
+                                            <Code className="w-3.5 h-3.5 text-purple-400" />
+                                            <span className="text-xs font-medium text-purple-400">
+                                                {getLanguageLabel(msg.language || "plaintext")}
+                                            </span>
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <Lock className="w-3 h-3 text-green-400" />
+                                            {msg.sender !== session?.user?.name && (
+                                                <span className="text-xs text-slate-400">{msg.sender}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <pre className="p-4 text-sm font-mono overflow-x-auto text-slate-200 leading-relaxed">
+                                        <code>{msg.plaintext}</code>
+                                    </pre>
+                                </div>
+                            ) : (
+                                /* Normal text message */
+                                <div className={`max-w-md px-4 py-2.5 rounded-2xl text-sm ${msg.sender === session?.user?.name ? "bg-purple-600 text-white rounded-br-md" : "glass text-slate-200 rounded-bl-md"}`}>
+                                    {msg.sender !== session?.user?.name && <div className="text-xs text-purple-400 font-medium mb-1">{msg.sender}</div>}
+                                    <div className="flex items-center gap-1.5"><Lock className="w-3 h-3 text-green-400 shrink-0" />{msg.plaintext}</div>
+                                </div>
+                            )}
                         </div>
                         {showCiphertext && (
                             <div className={`mt-1 text-xs font-mono text-slate-600 ${msg.sender === session?.user?.name ? "text-right" : "text-left"} px-4`}>
@@ -184,7 +313,91 @@ export default function EncryptedChatPage() {
                 <div ref={messagesEndRef} />
             </div>
 
+            {/* Code Editor Panel */}
+            {showCodeEditor && (
+                <div className="border-t border-slate-800 bg-slate-900/80 backdrop-blur">
+                    <div className="flex items-center justify-between px-4 py-2 border-b border-slate-800">
+                        <div className="flex items-center gap-3">
+                            <div className="flex items-center gap-2">
+                                <Code className="w-4 h-4 text-purple-400" />
+                                <span className="text-sm font-medium text-purple-400">Share Code Snippet</span>
+                            </div>
+                            {/* Language selector */}
+                            <div className="relative">
+                                <button
+                                    onClick={() => setShowLangDropdown(!showLangDropdown)}
+                                    className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-slate-800 border border-slate-700 hover:border-slate-600 transition-colors text-xs"
+                                >
+                                    {getLanguageLabel(codeLanguage)}
+                                    <ChevronDown className="w-3 h-3 text-slate-400" />
+                                </button>
+                                {showLangDropdown && (
+                                    <div className="absolute bottom-full left-0 mb-1 w-44 max-h-52 overflow-y-auto rounded-lg bg-slate-800 border border-slate-700 shadow-xl z-50">
+                                        {CODE_LANGUAGES.map((lang) => (
+                                            <button
+                                                key={lang.value}
+                                                onClick={() => { setCodeLanguage(lang.value); setShowLangDropdown(false); }}
+                                                className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-700 transition-colors ${codeLanguage === lang.value ? "text-purple-400 bg-purple-500/10" : "text-slate-300"
+                                                    }`}
+                                            >
+                                                {lang.label}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <span className="text-[10px] text-slate-500">⌘+Enter to send</span>
+                            <button
+                                onClick={() => { setShowCodeEditor(false); setCodeContent(""); }}
+                                className="p-1 rounded hover:bg-slate-800 transition-colors"
+                            >
+                                <X className="w-4 h-4 text-slate-400" />
+                            </button>
+                        </div>
+                    </div>
+                    <div className="p-3">
+                        <textarea
+                            ref={codeTextareaRef}
+                            value={codeContent}
+                            onChange={(e) => setCodeContent(e.target.value)}
+                            onKeyDown={handleCodeKeyDown}
+                            placeholder="Paste or type your code here..."
+                            spellCheck={false}
+                            className="w-full h-32 px-4 py-3 rounded-xl bg-slate-950 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm font-mono text-slate-200 resize-none transition-colors placeholder:text-slate-600 leading-relaxed"
+                        />
+                        <div className="flex justify-end gap-2 mt-2">
+                            <button
+                                onClick={() => { setShowCodeEditor(false); setCodeContent(""); }}
+                                className="px-4 py-2 rounded-lg text-xs text-slate-400 hover:bg-slate-800 transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={sendCode}
+                                disabled={!connected || !codeContent.trim()}
+                                className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-xs font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+                            >
+                                <Lock className="w-3 h-3" />
+                                Send Encrypted
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Message input */}
             <form onSubmit={sendMessage} className="p-4 border-t border-slate-800 flex gap-3">
+                <button
+                    type="button"
+                    onClick={openCodeEditor}
+                    disabled={!connected}
+                    className="px-3 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 hover:border-purple-500 hover:bg-purple-500/10 transition-all disabled:opacity-50 disabled:cursor-not-allowed group"
+                    title="Share code snippet"
+                >
+                    <Code className="w-4 h-4 text-slate-400 group-hover:text-purple-400 transition-colors" />
+                </button>
                 <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type an encrypted message..."
                     disabled={!connected}
                     className="flex-1 px-4 py-2.5 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50" />

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

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "@/lib/auth-client";
 import { connectWithAuth } from "@/lib/pulse";
-import { Gamepad2, Shield, Wifi, WifiOff, Loader2, RotateCcw } from "lucide-react";
+import { Gamepad2, Shield, Wifi, WifiOff, Loader2, RotateCcw, Copy, Users, LogIn } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 
 type Cell = "X" | "O" | null;
@@ -15,10 +15,16 @@ export default function GameSyncPage() {
     const [connecting, setConnecting] = useState(true);
     const [board, setBoard] = useState<Cell[]>(Array(9).fill(null));
     const [currentTurn, setCurrentTurn] = useState<"X" | "O">("X");
-    const [mySymbol, setMySymbol] = useState<"X" | "O">("X");
+    const [mySymbol, setMySymbol] = useState<"X" | "O" | null>(null);
     const [winner, setWinner] = useState<string | null>(null);
     const [players, setPlayers] = useState<string[]>([]);
     const connRef = useRef<PulseConnection | null>(null);
+    // Room management
+    const [roomCode, setRoomCode] = useState<string>("");
+    const [joinCode, setJoinCode] = useState("");
+    const [inRoom, setInRoom] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const streamNameRef = useRef<string>("");
 
     const checkWinner = useCallback((b: Cell[]): Cell => {
         const lines = [
@@ -32,6 +38,7 @@ export default function GameSyncPage() {
         return null;
     }, []);
 
+    // Connect to relay on mount
     useEffect(() => {
         if (!session) return;
         let cancelled = false;
@@ -49,46 +56,8 @@ export default function GameSyncPage() {
                 const user = (connection as any).user;
                 if (user) setAuthUser(user);
 
-                const stream = connection.stream("game-room");
-
-                stream.send(JSON.stringify({
-                    type: "join",
-                    name: session!.user.name,
-                    userId: session!.user.id,
-                }));
-
-                stream.on("data", (data: Uint8Array) => {
-                    try {
-                        const msg = JSON.parse(new TextDecoder().decode(data));
-                        if (msg.type === "move") {
-                            setBoard((prev) => {
-                                const next = [...prev];
-                                next[msg.cell] = msg.symbol;
-                                const w = checkWinner(next);
-                                if (w) setWinner(`${msg.name} (${w}) wins!`);
-                                else if (next.every((c) => c)) setWinner("Draw!");
-                                return next;
-                            });
-                            setCurrentTurn(msg.symbol === "X" ? "O" : "X");
-                        } else if (msg.type === "join") {
-                            setPlayers((prev) =>
-                                prev.includes(msg.name) ? prev : [...prev, msg.name]
-                            );
-                            if (msg.userId !== session?.user?.id) {
-                                setMySymbol("X");
-                            }
-                        } else if (msg.type === "reset") {
-                            setBoard(Array(9).fill(null));
-                            setCurrentTurn("X");
-                            setWinner(null);
-                        }
-                    } catch { /* ignore */ }
-                });
-
                 connection.on("disconnect", () => setConnected(false));
                 connection.on("reconnected", () => setConnected(true));
-
-                setMySymbol("X");
             } catch (err) {
                 console.error("Failed to connect:", err);
                 setConnecting(false);
@@ -100,28 +69,128 @@ export default function GameSyncPage() {
             cancelled = true;
             connRef.current?.disconnect();
         };
-    }, [session, checkWinner]);
+    }, [session]);
+
+    function joinRoom(code: string) {
+        if (!connRef.current || !session) return;
+
+        const streamName = `ttt-${code}`;
+        streamNameRef.current = streamName;
+        setRoomCode(code);
+        setInRoom(true);
+
+        const stream = connRef.current.stream(streamName);
+
+        // Send join message
+        stream.send(JSON.stringify({
+            type: "join",
+            name: session.user.name,
+            userId: session.user.id,
+        }));
+
+        // Listen for game events (skip self-echoes for moves)
+        stream.on("data", (data: Uint8Array) => {
+            try {
+                const msg = JSON.parse(new TextDecoder().decode(data));
+                if (msg.type === "move" && msg.userId !== session.user.id) {
+                    setBoard((prev) => {
+                        const next = [...prev];
+                        next[msg.cell] = msg.symbol;
+                        const w = checkWinner(next);
+                        if (w) setWinner(`${msg.name} (${w}) wins!`);
+                        else if (next.every((c) => c)) setWinner("Draw!");
+                        return next;
+                    });
+                    setCurrentTurn(msg.symbol === "X" ? "O" : "X");
+                } else if (msg.type === "join" && msg.userId !== session.user.id) {
+                    setPlayers((prev) =>
+                        prev.includes(msg.name) ? prev : [...prev, msg.name]
+                    );
+                    // Second player gets O
+                    setMySymbol((prev) => prev || "X");
+                } else if (msg.type === "assign") {
+                    // Server-side symbol assignment echo
+                    if (msg.userId === session.user.id && msg.symbol) {
+                        setMySymbol(msg.symbol);
+                    }
+                } else if (msg.type === "reset" && msg.userId !== session.user.id) {
+                    setBoard(Array(9).fill(null));
+                    setCurrentTurn("X");
+                    setWinner(null);
+                }
+            } catch { /* ignore */ }
+        });
+
+        // First player is X
+        setMySymbol("X");
+        setPlayers([session.user.name]);
+    }
+
+    function createRoom() {
+        const code = Math.random().toString(36).substring(2, 8).toUpperCase();
+        joinRoom(code);
+    }
+
+    function handleJoinExisting() {
+        if (joinCode.trim()) {
+            joinRoom(joinCode.trim().toUpperCase());
+            // Second player joining gets O
+            setMySymbol("O");
+        }
+    }
+
+    function copyRoomCode() {
+        navigator.clipboard.writeText(roomCode);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }
 
     function handleCellClick(index: number) {
-        if (board[index] || winner || !connRef.current) return;
+        if (board[index] || winner || !connRef.current || !mySymbol) return;
         if (currentTurn !== mySymbol) return;
 
-        const stream = connRef.current.stream("game-room");
+        const stream = connRef.current.stream(streamNameRef.current);
         stream.send(JSON.stringify({
             type: "move",
             cell: index,
             symbol: mySymbol,
             name: session?.user?.name,
+            userId: session?.user?.id,
         }));
+
+        // Apply move locally (skip self-echoes in on("data"))
+        setBoard((prev) => {
+            const next = [...prev];
+            next[index] = mySymbol;
+            const w = checkWinner(next);
+            if (w) setWinner(`${session?.user?.name} (${mySymbol}) wins!`);
+            else if (next.every((c) => c)) setWinner("Draw!");
+            return next;
+        });
+        setCurrentTurn(mySymbol === "X" ? "O" : "X");
     }
 
     function handleReset() {
         if (!connRef.current) return;
-        const stream = connRef.current.stream("game-room");
-        stream.send(JSON.stringify({ type: "reset" }));
+        const stream = connRef.current.stream(streamNameRef.current);
+        stream.send(JSON.stringify({
+            type: "reset",
+            userId: session?.user?.id,
+        }));
+        setBoard(Array(9).fill(null));
+        setCurrentTurn("X");
+        setWinner(null);
+    }
+
+    function leaveRoom() {
+        setInRoom(false);
+        setRoomCode("");
         setBoard(Array(9).fill(null));
         setCurrentTurn("X");
+        setMySymbol(null);
         setWinner(null);
+        setPlayers([]);
+        streamNameRef.current = "";
     }
 
     return (
@@ -133,7 +202,7 @@ export default function GameSyncPage() {
                     </div>
                     <div>
                         <h1 className="text-2xl font-bold">Game State Sync</h1>
-                        <p className="text-sm text-slate-500">Real-time tic-tac-toe with state sync</p>
+                        <p className="text-sm text-slate-500">Real-time tic-tac-toe with room-based multiplayer</p>
                     </div>
                 </div>
                 <div className="flex items-center gap-3">
@@ -155,14 +224,89 @@ export default function GameSyncPage() {
                 <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>
+            ) : !inRoom ? (
+                /* ── Room Lobby ── */
+                <div className="max-w-lg mx-auto">
+                    <div className="glass rounded-2xl p-8 text-center mb-6">
+                        <div className="text-5xl mb-4">🎮</div>
+                        <h2 className="text-xl font-bold mb-2">Join or Create a Game</h2>
+                        <p className="text-sm text-slate-400 mb-6">
+                            Create a room and share the code with a friend, or join an existing room to play tic-tac-toe!
+                        </p>
+
+                        <button
+                            onClick={createRoom}
+                            disabled={!connected}
+                            className="w-full py-3.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-400 hover:to-emerald-500 rounded-xl font-semibold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed mb-6"
+                        >
+                            🎲 Create New Room
+                        </button>
+
+                        <div className="relative mb-6">
+                            <div className="absolute inset-0 flex items-center">
+                                <div className="w-full border-t border-slate-700" />
+                            </div>
+                            <div className="relative flex justify-center text-xs">
+                                <span className="px-3 bg-slate-800 text-slate-500 uppercase tracking-wider">Or Join Existing</span>
+                            </div>
+                        </div>
+
+                        <div className="flex gap-2">
+                            <input
+                                type="text"
+                                value={joinCode}
+                                onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                                placeholder="Enter room code..."
+                                maxLength={6}
+                                className="flex-1 px-4 py-3 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none text-center text-lg font-mono tracking-wider placeholder:text-slate-600 transition-colors"
+                            />
+                            <button
+                                onClick={handleJoinExisting}
+                                disabled={!connected || !joinCode.trim()}
+                                className="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-xl font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                            >
+                                <LogIn className="w-4 h-4" />Join
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="glass rounded-xl p-4 text-center">
+                        <p className="text-xs text-slate-400">
+                            💡 <span className="text-green-400 font-medium">How It Works</span> — Game state is synced in real-time via Pulse streams.
+                            Each room gets its own stream, so multiple games can run simultaneously.
+                        </p>
+                    </div>
+                </div>
             ) : (
+                /* ── Game Board ── */
                 <div className="max-w-lg mx-auto">
+                    {/* Room header */}
+                    <div className="glass rounded-xl p-4 mb-4 flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <button onClick={copyRoomCode}
+                                className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20 hover:bg-green-500/20 transition-colors">
+                                <span className="text-xs text-slate-400">Room:</span>
+                                <span className="text-sm font-mono font-bold text-green-400">{roomCode}</span>
+                                <Copy className="w-3 h-3 text-green-400" />
+                            </button>
+                            {copied && <span className="text-xs text-green-400 animate-pulse">Copied!</span>}
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <div className="flex items-center gap-1.5">
+                                <Users className="w-3.5 h-3.5 text-slate-400" />
+                                <span className="text-xs text-slate-400">{players.length} player(s)</span>
+                            </div>
+                            <button onClick={leaveRoom}
+                                className="text-xs text-red-400 hover:text-red-300 transition-colors">Leave</button>
+                        </div>
+                    </div>
+
+                    {/* Game info */}
                     <div className="glass rounded-xl p-4 mb-6 flex items-center justify-between">
                         <div className="text-sm">You are: <span className={`font-bold text-lg ${mySymbol === "X" ? "text-cyan-400" : "text-pink-400"}`}>{mySymbol}</span></div>
                         <div className="text-sm text-slate-400">
                             {winner || (<>Turn: <span className={`font-bold ${currentTurn === "X" ? "text-cyan-400" : "text-pink-400"}`}>{currentTurn}</span>{currentTurn === mySymbol && " (your turn)"}</>)}
                         </div>
-                        <div className="text-sm text-slate-400">{Math.max(players.length, 1)} player(s)</div>
                     </div>
 
                     <div className="grid grid-cols-3 gap-3 mb-6">
@@ -185,6 +329,14 @@ export default function GameSyncPage() {
                             </button>
                         </div>
                     )}
+
+                    {players.length < 2 && !winner && (
+                        <div className="text-center glass rounded-xl p-4 mt-4">
+                            <Loader2 className="w-5 h-5 animate-spin text-green-400 mx-auto mb-2" />
+                            <p className="text-sm text-slate-400">Waiting for opponent to join...</p>
+                            <p className="text-xs text-slate-500 mt-1">Share code <span className="font-mono font-bold text-green-400">{roomCode}</span> with a friend</p>
+                        </div>
+                    )}
                 </div>
             )}
         </div>