@sansavision/create-pulse 0.4.1 → 0.4.3

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

@@ -0,0 +1,192 @@
+"use client";
+
+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 type { PulseConnection } from "@sansavision/pulse-sdk";
+
+type Cell = "X" | "O" | null;
+
+export default function GameSyncPage() {
+    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 [board, setBoard] = useState<Cell[]>(Array(9).fill(null));
+    const [currentTurn, setCurrentTurn] = useState<"X" | "O">("X");
+    const [mySymbol, setMySymbol] = useState<"X" | "O">("X");
+    const [winner, setWinner] = useState<string | null>(null);
+    const [players, setPlayers] = useState<string[]>([]);
+    const connRef = useRef<PulseConnection | null>(null);
+
+    const checkWinner = useCallback((b: Cell[]): Cell => {
+        const lines = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],
+            [0, 4, 8], [2, 4, 6],
+        ];
+        for (const [a, c, d] of lines) {
+            if (b[a] && b[a] === b[c] && b[a] === b[d]) return b[a];
+        }
+        return 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("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);
+            }
+        }
+
+        init();
+        return () => {
+            cancelled = true;
+            connRef.current?.disconnect();
+        };
+    }, [session, checkWinner]);
+
+    function handleCellClick(index: number) {
+        if (board[index] || winner || !connRef.current) return;
+        if (currentTurn !== mySymbol) return;
+
+        const stream = connRef.current.stream("game-room");
+        stream.send(JSON.stringify({
+            type: "move",
+            cell: index,
+            symbol: mySymbol,
+            name: session?.user?.name,
+        }));
+    }
+
+    function handleReset() {
+        if (!connRef.current) return;
+        const stream = connRef.current.stream("game-room");
+        stream.send(JSON.stringify({ type: "reset" }));
+        setBoard(Array(9).fill(null));
+        setCurrentTurn("X");
+        setWinner(null);
+    }
+
+    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-green-500 to-emerald-600 flex items-center justify-center">
+                        <Gamepad2 className="w-6 h-6 text-white" />
+                    </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>
+                    </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-1.5"><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-1.5"><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="max-w-lg mx-auto">
+                    <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">
+                        {board.map((cell, i) => (
+                            <button key={i} onClick={() => handleCellClick(i)}
+                                disabled={!!cell || !!winner || currentTurn !== mySymbol || !connected}
+                                className={`aspect-square rounded-xl text-4xl font-bold transition-all ${cell ? "glass" : "bg-slate-800/50 border border-slate-700 hover:border-purple-500 hover:bg-slate-800"
+                                    } ${!cell && !winner && currentTurn === mySymbol ? "cursor-pointer" : "cursor-default"} disabled:opacity-60`}>
+                                <span className={cell === "X" ? "text-cyan-400" : "text-pink-400"}>{cell}</span>
+                            </button>
+                        ))}
+                    </div>
+
+                    {winner && (
+                        <div className="text-center">
+                            <p className="text-xl font-bold mb-4 gradient-text">{winner}</p>
+                            <button onClick={handleReset}
+                                className="inline-flex items-center gap-2 px-6 py-2.5 bg-purple-600 hover:bg-purple-500 rounded-lg font-medium transition-all">
+                                <RotateCcw className="w-4 h-4" />Play Again
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,297 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    Database,
+    Send,
+    Download,
+    Check,
+    WifiOff,
+    Wifi,
+    Shield,
+    Loader2,
+    Trash2,
+    Clock,
+    RefreshCw,
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+import { PulseQueue } from "@sansavision/pulse-sdk";
+
+interface QueueMsg {
+    id: number;
+    payload: string;
+    timestamp: number;
+    acked: boolean;
+}
+
+export default function QueueDemoPage() {
+    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 [simulatedOffline, setSimulatedOffline] = useState(false);
+    const [publishInput, setPublishInput] = useState("");
+    const [publishedMessages, setPublishedMessages] = useState<QueueMsg[]>([]);
+    const [receivedMessages, setReceivedMessages] = useState<QueueMsg[]>([]);
+    const connRef = useRef<PulseConnection | null>(null);
+    const queueRef = useRef<PulseQueue | null>(null);
+
+    useEffect(() => {
+        if (!session) return;
+        let cancelled = false;
+
+        async function init() {
+            try {
+                const connection = await connectWithAuth();
+                if (cancelled) return;
+
+                connRef.current = connection;
+                queueRef.current = new PulseQueue(connection, "demo-queue");
+                setConnected(true);
+                setConnecting(false);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const user = (connection as any).user;
+                if (user) setAuthUser(user);
+
+                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();
+        };
+    }, [session]);
+
+    async function handlePublish(e: React.FormEvent) {
+        e.preventDefault();
+        if (!publishInput.trim() || !queueRef.current) return;
+
+        try {
+            const result = await queueRef.current.publish(publishInput.trim(), { ttlSecs: 300 });
+
+            setPublishedMessages((prev) => [
+                ...prev,
+                {
+                    id: result.sequence || Date.now(),
+                    payload: publishInput.trim(),
+                    timestamp: Date.now(),
+                    acked: false,
+                },
+            ]);
+            setPublishInput("");
+        } catch (err) {
+            console.error("Publish failed:", err);
+        }
+    }
+
+    async function handleConsume() {
+        if (!queueRef.current) return;
+
+        try {
+            const msg = await queueRef.current.pull();
+            if (msg) {
+                setReceivedMessages((prev) => [
+                    ...prev,
+                    {
+                        id: msg.sequence,
+                        payload: msg.payload,
+                        timestamp: Date.now(),
+                        acked: false,
+                    },
+                ]);
+            }
+        } catch (err) {
+            console.error("Consume failed:", err);
+        }
+    }
+
+    async function handleDrainAll() {
+        if (!queueRef.current) return;
+
+        try {
+            const msgs = await queueRef.current.drain(50);
+            const mapped = msgs.map((m) => ({
+                id: m.sequence,
+                payload: m.payload,
+                timestamp: Date.now(),
+                acked: false,
+            }));
+            setReceivedMessages((prev) => [...prev, ...mapped]);
+        } catch (err) {
+            console.error("Drain failed:", err);
+        }
+    }
+
+    async function handleAck(sequence: number) {
+        if (!queueRef.current) return;
+
+        try {
+            await queueRef.current.ack(sequence);
+            setReceivedMessages((prev) =>
+                prev.map((m) => (m.id === sequence ? { ...m, acked: true } : m))
+            );
+        } catch (err) {
+            console.error("ACK failed:", err);
+        }
+    }
+
+    function toggleOffline() {
+        if (simulatedOffline) {
+            setSimulatedOffline(false);
+            async function reconnect() {
+                try {
+                    const connection = await connectWithAuth();
+                    connRef.current = connection;
+                    queueRef.current = new PulseQueue(connection, "demo-queue");
+                    setConnected(true);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const user = (connection as any).user;
+                    if (user) setAuthUser(user);
+                } catch {
+                    console.error("Reconnect failed");
+                }
+            }
+            reconnect();
+        } else {
+            setSimulatedOffline(true);
+            connRef.current?.disconnect();
+            setConnected(false);
+        }
+    }
+
+    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-amber-500 to-orange-600 flex items-center justify-center">
+                        <Database className="w-6 h-6 text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-bold">Durable Queues</h1>
+                        <p className="text-sm text-slate-500">
+                            Persistent store-and-forward with offline simulation
+                        </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>
+                    )}
+                    <div className="flex items-center gap-2">
+                        {connected ? (
+                            <><div className="status-online" /><span className="text-xs text-green-400">Online</span></>
+                        ) : (
+                            <><div className="status-offline" /><span className="text-xs text-red-400">{simulatedOffline ? "Simulated Offline" : "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 to Pulse relay...</span>
+                </div>
+            ) : (
+                <>
+                    {/* Offline simulation */}
+                    <div className="glass rounded-xl p-5 mb-8 flex items-center justify-between">
+                        <div>
+                            <h3 className="text-sm font-semibold mb-1">🧪 Offline Simulation</h3>
+                            <p className="text-xs text-slate-400">
+                                {simulatedOffline
+                                    ? "You are offline. Messages published by others will queue. Click 'Come Back Online' then 'Drain All' to receive them."
+                                    : "Click 'Go Offline' to simulate a network disconnect. The relay will queue messages for you."}
+                            </p>
+                        </div>
+                        <button onClick={toggleOffline}
+                            className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-sm transition-all ${simulatedOffline
+                                    ? "bg-green-600 hover:bg-green-500 text-white"
+                                    : "bg-red-600/20 border border-red-500/30 text-red-400 hover:bg-red-600/30"
+                                }`}>
+                            {simulatedOffline ? (<><Wifi className="w-4 h-4" />Come Back Online</>) : (<><WifiOff className="w-4 h-4" />Go Offline</>)}
+                        </button>
+                    </div>
+
+                    <div className="grid lg:grid-cols-2 gap-8">
+                        {/* Publisher */}
+                        <div className="glass rounded-2xl p-6">
+                            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                <Send className="w-4 h-4 text-amber-400" />Publisher
+                            </h2>
+                            <form onSubmit={handlePublish} className="flex gap-2 mb-4">
+                                <input type="text" value={publishInput} onChange={(e) => setPublishInput(e.target.value)}
+                                    placeholder="Message to publish..." disabled={!connected}
+                                    className="flex-1 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50" />
+                                <button type="submit" disabled={!connected || !publishInput.trim()}
+                                    className="px-4 py-2.5 bg-amber-600 hover:bg-amber-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
+                                    Publish
+                                </button>
+                            </form>
+                            <div className="space-y-2 max-h-80 overflow-y-auto">
+                                {publishedMessages.length === 0 && <p className="text-sm text-slate-500 text-center py-8">No messages published yet</p>}
+                                {publishedMessages.map((msg) => (
+                                    <div key={msg.id} className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/30 border border-slate-700/50">
+                                        <Clock className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                                        <span className="text-sm flex-1 truncate">{msg.payload}</span>
+                                        <span className="text-xs text-slate-500 font-mono">seq:{msg.id}</span>
+                                        <span className="text-xs text-slate-500">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Consumer */}
+                        <div className="glass rounded-2xl p-6">
+                            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                <Download className="w-4 h-4 text-cyan-400" />Consumer
+                            </h2>
+                            <div className="flex gap-2 mb-4">
+                                <button onClick={handleConsume} disabled={!connected}
+                                    className="flex items-center gap-2 px-4 py-2.5 bg-cyan-600 hover:bg-cyan-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
+                                    <RefreshCw className="w-3.5 h-3.5" />Pull Next
+                                </button>
+                                <button onClick={handleDrainAll} disabled={!connected}
+                                    className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
+                                    <Download className="w-3.5 h-3.5" />Drain All
+                                </button>
+                                <button onClick={() => setReceivedMessages([])}
+                                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-slate-700 hover:bg-slate-800/50 transition-all text-sm text-slate-400">
+                                    <Trash2 className="w-3.5 h-3.5" />Clear
+                                </button>
+                            </div>
+                            <div className="space-y-2 max-h-80 overflow-y-auto">
+                                {receivedMessages.length === 0 && <p className="text-sm text-slate-500 text-center py-8">No messages consumed yet</p>}
+                                {receivedMessages.map((msg) => (
+                                    <div key={msg.id}
+                                        className={`flex items-center gap-3 p-3 rounded-lg border ${msg.acked ? "bg-green-500/5 border-green-500/20" : "bg-slate-800/30 border-slate-700/50"}`}>
+                                        {msg.acked ? <Check className="w-3.5 h-3.5 text-green-400 shrink-0" /> : <Clock className="w-3.5 h-3.5 text-amber-400 shrink-0" />}
+                                        <span className="text-sm flex-1 truncate">{msg.payload}</span>
+                                        {!msg.acked && (
+                                            <button onClick={() => handleAck(msg.id)} disabled={!connected}
+                                                className="text-xs px-2 py-1 bg-green-600 hover:bg-green-500 rounded transition-all disabled:opacity-50">ACK</button>
+                                        )}
+                                        <span className="text-xs text-slate-500">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}