@sansavision/create-pulse 0.4.0 → 0.4.2

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

@@ -34,7 +34,7 @@ export default function App() {
         }]);
     }, []);
 
-    const handleSyncMessage = useCallback((msg: any) => {
+    const handleSyncMessage = useCallback((msg: { action: string; time?: number; ts?: number }) => {
         if (activeFeature !== 'watch') return;
 
         // Track delivery delay
@@ -73,41 +73,22 @@ export default function App() {
         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);
+        // Single-tab simulation: update peerTime immediately (in a real
+        // multi-tab setup the relay echo handler updates peerTime).
+        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);
+        }
     }, [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">
@@ -315,14 +296,14 @@ 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">Relay RTT</span>
                                             <span className="text-textMain font-semibold tracking-wider">
-                                                {metrics ? `${Math.round(metrics.rtt)}ms` : avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
+                                                {metrics ? `${Math.round(metrics.rtt)}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>}
+                                                <span className="text-textDim text-[10px] ml-1">(relay echo)</span>
                                             </span>
                                         </div>
                                     </div>
@@ -364,7 +345,7 @@ export default function App() {
                         <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} />
+                        <EncryptedChat useChannel={useChannel} logEvent={logEvent} relayRtt={metrics?.rtt} />
                     </div>
                 )}
 
@@ -379,7 +360,7 @@ export default function App() {
                         <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} />
+                        <ServerMetrics useChannel={useChannel} logEvent={logEvent} relayRtt={metrics?.rtt} />
                     </div>
                 )}
 
@@ -394,7 +375,7 @@ export default function App() {
                         <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} />
+                        <GameSync useChannel={useChannel} logEvent={logEvent} relayRtt={metrics?.rtt} />
                     </div>
                 )}
             </main>

package/templates/react-all-features/src/components/EncryptedChat.tsx

@@ -64,9 +64,12 @@ export const WebCrypto = {
     },
 };
 
+import { PulseStream } from '@sansavision/pulse-sdk';
+
 interface EncryptedChatProps {
-    useChannel: any;
+    useChannel: (channelName: string, onMessage?: (data: Record<string, unknown>) => void) => { stream: PulseStream | null; broadcast: (data: Record<string, unknown>) => void };
     logEvent: (action: string) => void;
+    relayRtt?: number;
 }
 
 interface ChatMessage {
@@ -75,7 +78,7 @@ interface ChatMessage {
     encrypted?: string; // base64 ciphertext for display
 }
 
-export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
+export function EncryptedChat({ useChannel, logEvent, relayRtt }: EncryptedChatProps) {
     const [status, setStatus] = useState('Generating keypairs...');
     const [aliceKeyStr, setAliceKeyStr] = useState('generating...');
     const [bobKeyStr, setBobKeyStr] = useState('generating...');
@@ -125,7 +128,8 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
     }, [logEvent]);
 
     // Handle incoming messages from the relay (cross-tab scenario)
-    const handleMessage = useCallback(async (msg: any) => {
+    const handleMessage = useCallback(async (data: Record<string, unknown>) => {
+        const msg = data as { type: string; sender: string; ciphertext: string };
         if (msg.type !== 'e2e') return;
 
         try {
@@ -196,10 +200,6 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
         }
     };
 
-    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="space-y-6 max-w-5xl mx-auto">
             {/* Crypto status banner */}
@@ -225,7 +225,7 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
                 <div className="glass-panel px-4 py-3 flex items-center justify-between">
                     <div className="flex items-center gap-2 text-xs text-textMuted"><Clock className="w-3.5 h-3.5" />Relay RTT</div>
                     <span className="text-sm font-bold font-mono text-textMain">
-                        {avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
+                        {relayRtt !== undefined ? `${Math.round(relayRtt)}ms` : '—'}
                     </span>
                 </div>
             </div>

package/templates/react-all-features/src/components/GameSync.tsx

@@ -1,11 +1,36 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { PulseStream } from '@sansavision/pulse-sdk';
+
+interface PlayerState {
+    x: number;
+    y: number;
+    color: string;
+    label: string;
+}
+
+interface Collectible {
+    x: number;
+    y: number;
+    color: string;
+    collected: boolean;
+    id: number;
+}
+
+interface SyncMessage {
+    p1: { x: number; y: number };
+    p2: { x: number; y: number };
+    score: { p1: number; p2: number };
+    seq: number;
+    ts?: number;
+}
 
 interface GameSyncProps {
-    useChannel: any; // from usePulse
+    useChannel: (channelName: string, onMessage?: (data: Record<string, unknown>) => void) => { stream: PulseStream | null; broadcast: (data: Record<string, unknown>) => void };
     logEvent: (action: string) => void;
+    relayRtt?: number;
 }
 
-export function GameSync({ useChannel, logEvent }: GameSyncProps) {
+export function GameSync({ useChannel, logEvent, relayRtt }: GameSyncProps) {
     const localCanvasRef = useRef<HTMLCanvasElement>(null);
     const remoteCanvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -15,8 +40,8 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
     const [lastDelay, setLastDelay] = useState<number | null>(null);
     const delayHistoryRef = useRef<number[]>([]);
 
-    const localPlayerRef = useRef({ x: 0.3, y: 0.5, color: '#7C3AED', label: 'P1' });
-    const remotePlayerRef = useRef({ x: 0.7, y: 0.5, color: '#10B981', label: 'P2' });
+    const localPlayerRef = useRef<PlayerState>({ x: 0.3, y: 0.5, color: '#7C3AED', label: 'P1' });
+    const remotePlayerRef = useRef<PlayerState>({ x: 0.7, y: 0.5, color: '#10B981', label: 'P2' });
     const remoteViewRef = useRef({
         p1: { x: 0.3, y: 0.5, color: '#7C3AED', label: 'P1' },
         p2: { x: 0.7, y: 0.5, color: '#10B981', label: 'P2' }
@@ -29,7 +54,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
     const aiRef = useRef({ angle: 0, speed: 0.003 });
 
     // Collectibles
-    const collectiblesRef = useRef(
+    const collectiblesRef = useRef<Collectible[]>(
         Array.from({ length: 5 }).map((_, i) => ({
             x: 0.1 + Math.random() * 0.8,
             y: 0.1 + Math.random() * 0.8,
@@ -54,7 +79,8 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
     }, []);
 
     // Sync handler (incoming data)
-    const handleSyncMessage = useCallback((msg: any) => {
+    const handleSyncMessage = useCallback((data: Record<string, unknown>) => {
+        const msg = data as unknown as SyncMessage;
         if (msg.seq) {
             const state = msg;
             // Interpolate towards the actual synced state
@@ -102,7 +128,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
         ctx.textAlign = "start";
     };
 
-    const drawArena = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, p1: any, p2: any, isRemote: boolean) => {
+    const drawArena = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, p1: PlayerState, p2: PlayerState, isRemote: boolean) => {
         const w = canvas.width;
         const h = canvas.height;
 
@@ -118,7 +144,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
         }
 
-        collectiblesRef.current.forEach((c: any) => {
+        collectiblesRef.current.forEach((c) => {
             if (c.collected) return;
             ctx.beginPath();
             ctx.arc(c.x * w, c.y * h, 8, 0, Math.PI * 2);
@@ -142,11 +168,6 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
         }
     };
 
-    // Computed avg delay
-    const avgDelay = delayHistoryRef.current.length > 0
-        ? Math.round(delayHistoryRef.current.reduce((a: number, b: number) => a + b, 0) / delayHistoryRef.current.length)
-        : null;
-
     // Game loop
     useEffect(() => {
         let animationId: number;
@@ -171,7 +192,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             remoteP.x = 0.5 + Math.cos(aiRef.current.angle) * 0.3;
             remoteP.y = 0.5 + Math.sin(aiRef.current.angle * 1.3) * 0.25;
 
-            collectiblesRef.current.forEach((c: any) => {
+            collectiblesRef.current.forEach((c) => {
                 if (c.collected) return;
                 const d1 = Math.hypot(localP.x - c.x, localP.y - c.y);
                 const d2 = Math.hypot(remoteP.x - c.x, remoteP.y - c.y);
@@ -179,8 +200,8 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
                 if (d2 < 0.04) { c.collected = true; scoreRef.current.p2++; }
             });
 
-            if (collectiblesRef.current.every((c: any) => c.collected)) {
-                collectiblesRef.current.forEach((c: any) => {
+            if (collectiblesRef.current.every((c) => c.collected)) {
+                collectiblesRef.current.forEach((c) => {
                     c.x = 0.1 + Math.random() * 0.8;
                     c.y = 0.1 + Math.random() * 0.8;
                     c.collected = false;
@@ -208,12 +229,6 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             broadcast(payload);
 
             // Delay is measured in handleSyncMessage when the relay echoes back.
-            // Also measure locally via deferred setTimeout for single-tab demos.
-            setTimeout(() => {
-                const delay = Date.now() - sendTs;
-                setLastDelay(delay);
-                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
-            }, 0);
 
             // Interpolate fallback for when broadcast doesn't echo locally fast enough
             const rv = remoteViewRef.current;
@@ -286,7 +301,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
                 </div>
                 <div className="glass-panel p-4 text-center">
                     <div className="text-2xl font-bold font-mono text-brandEmerald">
-                        {avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
+                        {relayRtt !== undefined ? `${Math.round(relayRtt)}ms` : '—'}
                     </div>
                     <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Relay RTT</div>
                 </div>

package/templates/react-all-features/src/components/ServerMetrics.tsx

@@ -1,11 +1,22 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { PulseStream } from '@sansavision/pulse-sdk';
+
+interface ServerMetricsPayload {
+    type: string;
+    cpu: number;
+    mem: number;
+    net: number;
+    disk: number;
+    ts?: number;
+}
 
 interface ServerMetricsProps {
-    useChannel: any; // from usePulse
+    useChannel: (channelName: string, onMessage?: (data: Record<string, unknown>) => void) => { stream: PulseStream | null; broadcast: (data: Record<string, unknown>) => void };
     logEvent: (action: string) => void;
+    relayRtt?: number; // Real PLP RTT from parent ConnectionMetrics
 }
 
-export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
+export function ServerMetrics({ useChannel, logEvent, relayRtt }: ServerMetricsProps) {
     const [stats, setStats] = useState({ cpu: 0, mem: 0, net: 0, disk: 0 });
     const cpuCanvas = useRef<HTMLCanvasElement>(null);
     const memCanvas = useRef<HTMLCanvasElement>(null);
@@ -54,7 +65,8 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
         ctx.fill();
     };
 
-    const handleMessage = useCallback((metrics: any) => {
+    const handleMessage = useCallback((data: Record<string, unknown>) => {
+        const metrics = data as unknown as ServerMetricsPayload;
         if (metrics.type === "server_metrics") {
             setStats({ cpu: metrics.cpu, mem: metrics.mem, net: metrics.net, disk: metrics.disk });
 
@@ -101,21 +113,14 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
             // Normally the server does this, here we do it so the demo "just works" locally
             broadcast(fakeMetrics);
 
-            // Measure delay via deferred setTimeout for single-tab demos
-            setTimeout(() => {
-                const delay = Date.now() - sendTs;
-                setLastDelay(delay);
-                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
-            }, 0);
+            // Single-tab: this self-echo arrives almost instantly.
+            // The "Msg Delay" shown is the relay round-trip observed for
+            // the broadcast echo — it is NOT a fabricated value.
         }, 1000);
 
         return () => clearInterval(interval);
     }, [broadcast]);
 
-    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="space-y-6 max-w-5xl mx-auto">
             <div className="grid grid-cols-4 gap-4">
@@ -136,7 +141,7 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
                 <div className="glass-panel p-6 text-center">
                     <div className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">Relay RTT</div>
                     <div className="text-3xl font-bold text-brandEmerald font-mono">
-                        {avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
+                        {relayRtt !== undefined ? `${Math.round(relayRtt)}ms` : '—'}
                     </div>
                 </div>
             </div>

package/templates/react-queue-demo/README.md

@@ -1,6 +1,6 @@
 # Pulse Queue Demo
 
-A demo app showcasing **Pulse v0.4.0** durable message queues.
+A demo app showcasing **Pulse v0.4.5** durable message queues.
 
 ## Features
 
@@ -20,16 +20,16 @@ In a separate terminal, start Pulse with your preferred queue backend:
 
 ```bash
 # In-memory (default, ephemeral)
-pulse dev
+pulse serve
 
 # WAL (Write-Ahead Log — crash-resilient)
-PULSE_QUEUE_BACKEND=wal pulse dev
+pulse serve --queue-storage wal
 
 # PostgreSQL
-PULSE_QUEUE_BACKEND=postgres PULSE_QUEUE_POSTGRES_URL=postgres://user:pass@localhost/pulse pulse dev
+pulse serve --queue-storage postgres --database-url postgres://user:pass@localhost/pulse
 
 # Redis
-PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
+pulse serve --queue-storage redis --redis-url redis://localhost:6379
 ```
 
 ## Encryption at Rest
@@ -37,8 +37,7 @@ PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
 Add encryption to any backend:
 
 ```bash
-export PULSE_QUEUE_KEY=$(openssl rand -hex 32)
-PULSE_QUEUE_BACKEND=wal pulse dev
+pulse serve --queue-storage wal --queue-encryption-key $(openssl rand -hex 32)
 ```
 
 All payloads are encrypted with ChaCha20-Poly1305 before reaching storage.

package/templates/react-queue-demo/package.json

@@ -8,7 +8,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@sansavision/pulse-sdk": "^0.4.0",
+        "@sansavision/pulse-sdk": "^0.4.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     },