@sansavision/create-pulse 0.1.0-alpha.12 → 0.1.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sansavision/create-pulse",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.2",
   "description": "Scaffold a new Pulse application",
   "main": "dist/index.js",
   "bin": {

package/templates/react-all-features/src/App.tsx

@@ -1,33 +1,26 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback } from 'react';
 import { usePulse } from './hooks/usePulse';
 import { VideoPlayer } from './components/VideoPlayer';
-import { GameSync } from './components/GameSync';
-import { EncryptedChat } from './components/EncryptedChat';
-import { ServerMetrics } from './components/ServerMetrics';
-import { Activity, Users, MessageSquare, Video, LineChart, ArrowLeft, Gamepad2 } from 'lucide-react';
+import { Activity, Users, MessageSquare, Video, LineChart, ArrowLeft } from 'lucide-react';
 
 const VIDEO_URL = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
 const STREAM_NAME = "watch-together-demo";
 
 export default function App() {
-    const { isConnected, isConnecting, metrics, reconnectAttempt, useChannel } = usePulse({
+    const { isConnected, isConnecting, metrics, useChannel } = usePulse({
         relayUrl: 'ws://localhost:4001',
         apiKey: 'demo'
     });
 
-    const [activeFeature, setActiveFeature] = useState<'hub' | 'watch' | 'chat' | 'metrics' | 'game'>('hub');
+    const [activeFeature, setActiveFeature] = useState<'hub' | 'watch' | 'chat' | 'metrics'>('hub');
 
     const [hostTime, setHostTime] = useState(0);
     const [peerTime, setPeerTime] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
     const [events, setEvents] = useState<{ id: number, action: string, time: string }[]>([]);
 
-    // Track relay message delay
-    const [lastDelay, setLastDelay] = useState<number | null>(null);
-    const delayHistoryRef = useRef<number[]>([]);
-
     const logEvent = useCallback((action: string) => {
-        setEvents(prev => [...prev.slice(-19), {
+        setEvents(prev => [...prev.slice(-4), {
             id: Date.now(),
             action,
             time: new Date().toISOString().substring(11, 23)
@@ -36,15 +29,7 @@ export default function App() {
 
     const handleSyncMessage = useCallback((msg: any) => {
         if (activeFeature !== 'watch') return;
-
-        // Track delivery delay
-        if (msg.ts) {
-            const delay = Date.now() - msg.ts;
-            setLastDelay(delay);
-            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
-        }
-
-        logEvent(`RECV: ${msg.action} @ ${msg.time?.toFixed(2)}s`);
+        logEvent(`RECV: ${msg.action}`);
 
         switch (msg.action) {
             case 'play':
@@ -68,47 +53,10 @@ export default function App() {
     const { broadcast } = useChannel(STREAM_NAME, handleSyncMessage);
 
     const broadcastAction = useCallback((action: string, time: number) => {
-        logEvent(`SEND: ${action} @ ${time.toFixed(2)}s`);
-        const sendTs = Date.now();
-        const msg = { action, time, ts: sendTs };
-        broadcast(msg);
-
-        // Single-tab simulation: defer peerTime update by the measured relay
-        // round-trip so that drift is visible and realistic. In a real
-        // multi-tab setup the relay echo handler (handleSyncMessage) updates
-        // peerTime — but since the relay does not echo back to the sender,
-        // we simulate it here with the actual measured delay.
-        const simulatedDelay = delayHistoryRef.current.length > 0
-            ? delayHistoryRef.current[delayHistoryRef.current.length - 1]
-            : 4; // sensible default ~4ms first message
-
-        setTimeout(() => {
-            if (action === 'tick') {
-                setPeerTime(time);
-            } else if (action === 'play') {
-                setIsPlaying(true);
-                setPeerTime(time);
-            } else if (action === 'pause') {
-                setIsPlaying(false);
-                setPeerTime(time);
-            } else if (action === 'seek') {
-                setPeerTime(time);
-            }
-        }, simulatedDelay);
-
-        // Measure delay after the event loop processes the send
-        setTimeout(() => {
-            const delay = Date.now() - sendTs;
-            setLastDelay(delay);
-            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
-        }, 0);
+        logEvent(`SEND: ${action}`);
+        broadcast({ action, time, ts: Date.now() });
     }, [broadcast, logEvent]);
 
-    // Computed delay stats
-    const avgDelay = delayHistoryRef.current.length > 0
-        ? Math.round(delayHistoryRef.current.reduce((a: number, b: number) => a + b, 0) / delayHistoryRef.current.length)
-        : null;
-
     return (
         <div className="min-h-screen">
             {/* Header */}
@@ -138,7 +86,7 @@ export default function App() {
                         <div className="flex items-center gap-2">
                             <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-brandEmerald shadow-[0_0_8px_var(--tw-shadow-color)] shadow-brandEmerald' : isConnecting ? 'bg-brandAmber shadow-[0_0_8px_var(--tw-shadow-color)] shadow-brandAmber' : 'bg-brandRose'}`} />
                             <span className={isConnected ? 'text-brandEmerald' : 'text-textMuted'}>
-                                {isConnected ? 'Relay Connected' : isConnecting && reconnectAttempt > 0 ? `Reconnecting (#${reconnectAttempt})...` : isConnecting ? 'Connecting...' : 'Disconnected'}
+                                {isConnected ? 'Relay Connected' : isConnecting ? 'Connecting...' : 'Disconnected'}
                             </span>
                         </div>
                         {metrics && (
@@ -191,26 +139,6 @@ export default function App() {
                                 </div>
                             </div>
 
-                            {/* Game Sync Card */}
-                            <div onClick={() => setActiveFeature('game')} className="glass-panel p-7 cursor-pointer hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden">
-                                <div className="absolute -top-16 -right-16 w-48 h-48 bg-purple-500/20 rounded-full blur-[40px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                                <div className="flex items-center gap-4 mb-4">
-                                    <div className="w-12 h-12 rounded-xl flex items-center justify-center bg-purple-500/10 text-purple-400">
-                                        <Gamepad2 className="w-6 h-6" />
-                                    </div>
-                                    <div className="flex flex-col gap-1">
-                                        <span className="text-[10px] font-bold uppercase tracking-wider bg-purple-500/20 text-purple-400 px-2.5 py-1 rounded-full w-fit">Realtime</span>
-                                        <span className="text-xs text-textDim font-mono">StreamMode::Realtime</span>
-                                    </div>
-                                </div>
-                                <h3 className="text-lg font-bold mb-2">Game State Sync</h3>
-                                <p className="text-sm text-textMuted leading-relaxed mb-6">60Hz realtime game loop syncing player positions. Sub-10ms latency updates over Pulse.</p>
-                                <div className="flex gap-2 relative z-10">
-                                    <span className="px-2.5 py-1 rounded-full text-[10px] border border-pulseBorder text-textMuted bg-white/5">React</span>
-                                    <span className="px-2.5 py-1 rounded-full text-[10px] border border-pulseBorder text-textMuted bg-white/5">Canvas</span>
-                                </div>
-                            </div>
-
                             {/* Chat Card */}
                             <div onClick={() => setActiveFeature('chat')} className="glass-panel p-7 cursor-pointer hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden">
                                 <div className="absolute -top-16 -right-16 w-48 h-48 bg-brandEmerald/20 rounded-full blur-[40px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@@ -223,7 +151,7 @@ export default function App() {
                                         <span className="text-xs text-textDim font-mono">StreamMode::P2P</span>
                                     </div>
                                 </div>
-                                <h3 className="text-lg font-bold mb-2">Encrypted Chat</h3>
+                                <h3 className="text-lg font-bold mb-2">Encrypted Chat (Stub)</h3>
                                 <p className="text-sm text-textMuted leading-relaxed mb-6">Two browser tabs exchanging messages over X25519 double-ratchet encryption. The relay routes opaque ciphertexts.</p>
                                 <div className="flex gap-2 relative z-10">
                                     <span className="px-2.5 py-1 rounded-full text-[10px] border border-pulseBorder text-textMuted bg-white/5">React</span>
@@ -243,7 +171,7 @@ export default function App() {
                                         <span className="text-xs text-textDim font-mono">StreamMode::Realtime</span>
                                     </div>
                                 </div>
-                                <h3 className="text-lg font-bold mb-2">Server Metrics</h3>
+                                <h3 className="text-lg font-bold mb-2">Server Metrics (Stub)</h3>
                                 <p className="text-sm text-textMuted leading-relaxed mb-6">Server pushes live system metrics to a React dashboard over Pulse Realtime stream for zero-config observability.</p>
                                 <div className="flex gap-2 relative z-10">
                                     <span className="px-2.5 py-1 rounded-full text-[10px] border border-pulseBorder text-textMuted bg-white/5">React</span>
@@ -309,20 +237,7 @@ export default function App() {
                                         <div className="flex justify-between items-center p-3 rounded-lg bg-black/30 border border-pulseBorder">
                                             <span className="text-textMuted">Drift</span>
                                             <span className={`font-semibold tracking-wider ${Math.abs(hostTime - peerTime) > 0.15 ? 'text-brandAmber' : 'text-brandEmerald'}`}>
-                                                {Math.abs(hostTime - peerTime) < 0.001 ? '0.000' : Math.abs(hostTime - peerTime).toFixed(3)}s
-                                            </span>
-                                        </div>
-                                        <div className="flex justify-between items-center p-3 rounded-lg bg-black/30 border border-pulseBorder">
-                                            <span className="text-textMuted">Relay RTT</span>
-                                            <span className="text-textMain font-semibold tracking-wider">
-                                                {metrics ? `${Math.round(metrics.rtt)}ms` : avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
-                                            </span>
-                                        </div>
-                                        <div className="flex justify-between items-center p-3 rounded-lg bg-black/30 border border-pulseBorder">
-                                            <span className="text-textMuted">Msg Delay</span>
-                                            <span className={`font-semibold tracking-wider ${lastDelay !== null && lastDelay > 50 ? 'text-brandAmber' : 'text-brandEmerald'}`}>
-                                                {lastDelay !== null ? `${lastDelay}ms` : '—'}
-                                                {avgDelay !== null && <span className="text-textDim text-[10px] ml-1">avg {avgDelay}ms</span>}
+                                                {Math.abs(hostTime - peerTime).toFixed(3)}s
                                             </span>
                                         </div>
                                     </div>
@@ -362,9 +277,14 @@ export default function App() {
                         </div>
 
                         <h2 className="text-3xl font-bold tracking-tight mb-2">Encrypted Chat</h2>
-                        <div className="text-textMuted mb-6 text-sm">Real Web Crypto API (ECDH P-256 + AES-GCM) powering E2E encryption over Pulse Relay.</div>
 
-                        <EncryptedChat useChannel={useChannel} logEvent={logEvent} />
+                        <div className="flex flex-col items-center justify-center py-24 glass-panel mt-12 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-green-900/10 to-transparent">
+                            <MessageSquare className="w-16 h-16 text-brandEmerald mb-6 opacity-80" />
+                            <h3 className="text-2xl font-bold mb-3">Chat Components Setup Here</h3>
+                            <p className="text-textMuted text-center max-w-md mx-auto leading-relaxed">
+                                Implementation for the E2E encrypted React UI chat components go here. Refer to the base HTML demo for logical structure.
+                            </p>
+                        </div>
                     </div>
                 )}
 
@@ -373,28 +293,18 @@ export default function App() {
                         <div className="flex items-center gap-3 text-sm text-textDim mb-6">
                             <span className="text-brandPurple cursor-pointer hover:text-brandCyan transition-colors" onClick={() => setActiveFeature('hub')}>Hub</span>
                             <span>/</span>
-                            <span className="text-textMain">Server Metrics Dashboard</span>
+                            <span className="text-textMain">Server Metrics</span>
                         </div>
 
                         <h2 className="text-3xl font-bold tracking-tight mb-2">Server Metrics Dashboard</h2>
-                        <div className="text-textMuted mb-6 text-sm">Receiving live server telemetry via Pulse STREAM_DATA and rendering realtime charts.</div>
 
-                        <ServerMetrics useChannel={useChannel} logEvent={logEvent} />
-                    </div>
-                )}
-
-                {activeFeature === 'game' && (
-                    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
-                        <div className="flex items-center gap-3 text-sm text-textDim mb-6">
-                            <span className="text-brandPurple cursor-pointer hover:text-brandCyan transition-colors" onClick={() => setActiveFeature('hub')}>Hub</span>
-                            <span>/</span>
-                            <span className="text-textMain">Game State Sync</span>
+                        <div className="flex flex-col items-center justify-center py-24 glass-panel mt-12 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-900/10 to-transparent">
+                            <LineChart className="w-16 h-16 text-brandCyan mb-6 opacity-80" />
+                            <h3 className="text-2xl font-bold mb-3">Dashboard Charts Setup Here</h3>
+                            <p className="text-textMuted text-center max-w-md mt-2">
+                                Bind <code className="bg-black/50 text-brandCyan px-2 py-1 rounded-md border border-pulseBorder font-mono text-xs shadow-inner">useChannel('server-metrics')</code> to Recharts or Chart.js here.
+                            </p>
                         </div>
-
-                        <h2 className="text-3xl font-bold tracking-tight mb-2">Game State Sync</h2>
-                        <div className="text-textMuted mb-6 text-sm">Sending 60Hz tick payloads over Pulse relay and interpolating remote peer states smoothly via Canvas API.</div>
-
-                        <GameSync useChannel={useChannel} logEvent={logEvent} />
                     </div>
                 )}
             </main>

package/templates/react-all-features/src/hooks/usePulse.ts

@@ -4,153 +4,73 @@ import { Pulse, PulseConnection, PulseStream, ConnectionMetrics } from '@sansavi
 interface UsePulseOptions {
     relayUrl?: string;
     apiKey?: string;
-    /** Max reconnect attempts before giving up (0 = infinite). Default: 0 */
-    maxReconnectAttempts?: number;
-    /** Initial delay between reconnect attempts in ms. Default: 500 */
-    reconnectBaseDelay?: number;
-    /** Maximum delay between reconnect attempts in ms. Default: 8000 */
-    reconnectMaxDelay?: number;
 }
 
 export function usePulse(options: UsePulseOptions = {}) {
     const {
         relayUrl = 'ws://localhost:4001',
-        apiKey = 'demo',
-        maxReconnectAttempts = 0,       // 0 = infinite
-        reconnectBaseDelay = 500,
-        reconnectMaxDelay = 8000,
+        apiKey = 'demo'
     } = options;
 
     const [isConnected, setIsConnected] = useState(false);
     const [metrics, setMetrics] = useState<ConnectionMetrics | null>(null);
     const [error, setError] = useState<Error | null>(null);
     const [isConnecting, setIsConnecting] = useState(true);
-    const [reconnectAttempt, setReconnectAttempt] = useState(0);
 
     const connectionRef = useRef<PulseConnection | null>(null);
-    const mountedRef = useRef(true);
-    const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const attemptRef = useRef(0);
 
-    // Connect (or reconnect) to the relay
-    const connect = useCallback(() => {
-        if (!mountedRef.current) return;
+    // Establish connection on mount
+    useEffect(() => {
+        let mounted = true;
+        const pulse = new Pulse({ apiKey });
 
         setIsConnecting(true);
-        setError(null);
-
-        const pulse = new Pulse({ apiKey });
 
         pulse.connect(relayUrl)
             .then(conn => {
-                if (!mountedRef.current) {
+                if (!mounted) {
                     conn.disconnect();
                     return;
                 }
 
-                // Success — reset backoff state
-                attemptRef.current = 0;
-                setReconnectAttempt(0);
-
                 connectionRef.current = conn;
                 setIsConnected(true);
                 setIsConnecting(false);
 
-                conn.on('metrics', (m: ConnectionMetrics) => {
-                    if (mountedRef.current) setMetrics(m);
+                conn.on('metrics', (m) => {
+                    if (mounted) setMetrics(m);
                 });
 
                 conn.on('disconnect', () => {
-                    if (!mountedRef.current) return;
-                    connectionRef.current = null;
-                    setIsConnected(false);
-                    setMetrics(null);
-
-                    // Schedule reconnect with exponential backoff
-                    scheduleReconnect();
+                    if (mounted) setIsConnected(false);
                 });
             })
             .catch(err => {
-                if (!mountedRef.current) return;
-                setError(err);
-                setIsConnecting(false);
-                setIsConnected(false);
-
-                // Schedule reconnect on failed connect too
-                scheduleReconnect();
+                if (mounted) {
+                    setError(err);
+                    setIsConnecting(false);
+                }
             });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [relayUrl, apiKey]);
-
-    const scheduleReconnect = useCallback(() => {
-        if (!mountedRef.current) return;
-
-        const attempt = attemptRef.current;
-        if (maxReconnectAttempts > 0 && attempt >= maxReconnectAttempts) {
-            setError(new Error(`Failed to reconnect after ${maxReconnectAttempts} attempts`));
-            setIsConnecting(false);
-            return;
-        }
-
-        attemptRef.current = attempt + 1;
-        setReconnectAttempt(attempt + 1);
-
-        // Exponential backoff with jitter: base * 2^attempt + random jitter
-        const delay = Math.min(
-            reconnectBaseDelay * Math.pow(2, attempt) + Math.random() * 200,
-            reconnectMaxDelay
-        );
-
-        console.log(`[Pulse] Reconnecting in ${Math.round(delay)}ms (attempt ${attempt + 1})...`);
-
-        reconnectTimerRef.current = setTimeout(() => {
-            if (mountedRef.current) {
-                connect();
-            }
-        }, delay);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reconnectBaseDelay, reconnectMaxDelay, maxReconnectAttempts, connect]);
-
-    // Initial connection on mount
-    useEffect(() => {
-        mountedRef.current = true;
-        connect();
 
         return () => {
-            mountedRef.current = false;
-
-            // Clear any pending reconnect timer
-            if (reconnectTimerRef.current) {
-                clearTimeout(reconnectTimerRef.current);
-                reconnectTimerRef.current = null;
-            }
-
+            mounted = false;
             if (connectionRef.current) {
                 connectionRef.current.disconnect();
                 connectionRef.current = null;
             }
         };
-    }, [connect]);
+    }, [relayUrl, apiKey]);
 
-    // Helper to open a pub/sub stream — automatically re-subscribes on reconnection
+    // Helper to open a pub/sub or RPC stream and manage its lifecycle
     const useChannel = useCallback((channelName: string, onMessage?: (data: any) => void) => {
         const [stream, setStream] = useState<PulseStream | null>(null);
 
         useEffect(() => {
-            if (!isConnected || !connectionRef.current) {
-                setStream(null);
-                return;
-            }
+            if (!isConnected || !connectionRef.current) return;
 
-            let newStream: PulseStream;
-            try {
-                newStream = connectionRef.current.stream(channelName, {
-                    qos: 'interactive-data'
-                });
-            } catch (err) {
-                console.error('[Pulse] Failed to open stream:', err);
-                return;
-            }
+            const newStream = connectionRef.current.stream(channelName, {
+                qos: 'interactive-data' // Best for low-latency sync
+            });
 
             setStream(newStream);
 
@@ -187,7 +107,6 @@ export function usePulse(options: UsePulseOptions = {}) {
         isConnecting,
         metrics,
         error,
-        reconnectAttempt,
         connection: connectionRef.current,
         useChannel
     };