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

package/package.json

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

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

@@ -1,7 +1,10 @@
 import { useState, useCallback } from 'react';
 import { usePulse } from './hooks/usePulse';
 import { VideoPlayer } from './components/VideoPlayer';
-import { Activity, Users, MessageSquare, Video, LineChart, ArrowLeft } from 'lucide-react';
+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';
 
 const VIDEO_URL = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
 const STREAM_NAME = "watch-together-demo";
@@ -12,7 +15,7 @@ export default function App() {
         apiKey: 'demo'
     });
 
-    const [activeFeature, setActiveFeature] = useState<'hub' | 'watch' | 'chat' | 'metrics'>('hub');
+    const [activeFeature, setActiveFeature] = useState<'hub' | 'watch' | 'chat' | 'metrics' | 'game'>('hub');
 
     const [hostTime, setHostTime] = useState(0);
     const [peerTime, setPeerTime] = useState(0);
@@ -139,6 +142,26 @@ 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>
@@ -277,14 +300,9 @@ 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>
 
-                        <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>
+                        <EncryptedChat useChannel={useChannel} logEvent={logEvent} />
                     </div>
                 )}
 
@@ -293,18 +311,28 @@ 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</span>
+                            <span className="text-textMain">Server Metrics Dashboard</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>
 
-                        <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>
+                        <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>
+
+                        <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/components/EncryptedChat.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+
+// Simplified port of Web Crypto API usage from pulse-demos
+// In a real app we'd place this in a shared utility file
+export const WebCrypto = {
+    async generateKeyPair() {
+        return crypto.subtle.generateKey(
+            { name: "ECDH", namedCurve: "P-256" },
+            true,
+            ["deriveKey"]
+        );
+    },
+
+    async exportPublicKey(keyPair: CryptoKeyPair) {
+        const raw = await crypto.subtle.exportKey("raw", keyPair.publicKey);
+        return btoa(String.fromCharCode(...new Uint8Array(raw)));
+    },
+
+    async importPublicKey(base64: string) {
+        const raw = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+        return crypto.subtle.importKey(
+            "raw",
+            raw,
+            { name: "ECDH", namedCurve: "P-256" },
+            true,
+            []
+        );
+    },
+
+    async deriveSharedKey(privateKey: CryptoKey, peerPublicKey: CryptoKey) {
+        return crypto.subtle.deriveKey(
+            { name: "ECDH", public: peerPublicKey },
+            privateKey,
+            { name: "AES-GCM", length: 256 },
+            false,
+            ["encrypt", "decrypt"]
+        );
+    },
+
+    async encrypt(sharedKey: CryptoKey, plaintext: string) {
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const encoded = new TextEncoder().encode(plaintext);
+        const ciphertext = await crypto.subtle.encrypt(
+            { name: "AES-GCM", iv },
+            sharedKey,
+            encoded
+        );
+        const result = new Uint8Array(iv.length + ciphertext.byteLength);
+        result.set(iv, 0);
+        result.set(new Uint8Array(ciphertext), iv.length);
+        return result;
+    },
+
+    async decrypt(sharedKey: CryptoKey, data: Uint8Array) {
+        const iv = data.slice(0, 12);
+        const ciphertext = data.slice(12);
+        const decrypted = await crypto.subtle.decrypt(
+            { name: "AES-GCM", iv },
+            sharedKey,
+            ciphertext
+        );
+        return new TextDecoder().decode(decrypted);
+    },
+};
+
+interface EncryptedChatProps {
+    // Both users will share the primary connection for demoing
+    // but we simulate the end-to-end crypto locally.
+    useChannel: any;
+    logEvent: (action: string) => void;
+}
+
+export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
+    const [status, setStatus] = useState('Pending');
+    const [aliceKeyStr, setAliceKeyStr] = useState('generating...');
+    const [bobKeyStr, setBobKeyStr] = useState('generating...');
+    const keysRef = useRef<{ alice: CryptoKey | null, bob: CryptoKey | null }>({ alice: null, bob: null });
+
+    const [aliceMessages, setAliceMessages] = useState<{ me: boolean, text: string }[]>([]);
+    const [bobMessages, setBobMessages] = useState<{ me: boolean, text: string }[]>([]);
+
+    const [aliceDraft, setAliceDraft] = useState('');
+    const [bobDraft, setBobDraft] = useState('');
+
+    useEffect(() => {
+        const setupCrypto = async () => {
+            try {
+                const aliceKP = await WebCrypto.generateKeyPair();
+                const bobKP = await WebCrypto.generateKeyPair();
+
+                const alicePub = await WebCrypto.exportPublicKey(aliceKP);
+                const bobPub = await WebCrypto.exportPublicKey(bobKP);
+
+                setAliceKeyStr(`Pub: ${alicePub.slice(0, 16)}...`);
+                setBobKeyStr(`Pub: ${bobPub.slice(0, 16)}...`);
+
+                const bobPubImported = await WebCrypto.importPublicKey(bobPub);
+                const alicePubImported = await WebCrypto.importPublicKey(alicePub);
+
+                keysRef.current.alice = await WebCrypto.deriveSharedKey(aliceKP.privateKey, bobPubImported);
+                keysRef.current.bob = await WebCrypto.deriveSharedKey(bobKP.privateKey, alicePubImported);
+
+                setStatus('Ready (AES-256-GCM Derived)');
+                logEvent('KEYS DERIVED: AES-256-GCM');
+            } catch (err) {
+                console.error(err);
+                setStatus('Failed to generate keys');
+            }
+        };
+        setupCrypto();
+    }, [logEvent]);
+
+    const handleMessage = useCallback(async (msg: any) => {
+        // Here msg payload is base64 string
+        if (msg.type !== 'e2e') return;
+
+        try {
+            const raw = Uint8Array.from(atob(msg.ciphertext), (c) => c.charCodeAt(0));
+            // Simulate receiving the payload
+            logEvent(`RECV: ${raw.length} opaque bytes`);
+
+            if (msg.sender === 'Alice') {
+                if (!keysRef.current.bob) return;
+                const decrypted = await WebCrypto.decrypt(keysRef.current.bob, raw);
+                setBobMessages(prev => [...prev, { me: false, text: decrypted }]);
+            } else {
+                if (!keysRef.current.alice) return;
+                const decrypted = await WebCrypto.decrypt(keysRef.current.alice, raw);
+                setAliceMessages(prev => [...prev, { me: false, text: decrypted }]);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }, [logEvent]);
+
+    const { broadcast } = useChannel('e2e-chat', handleMessage);
+
+    const handleSend = async (sender: 'Alice' | 'Bob', text: string) => {
+        if (!text.trim()) return;
+        const key = sender === 'Alice' ? keysRef.current.alice : keysRef.current.bob;
+        if (!key) return;
+
+        if (sender === 'Alice') {
+            setAliceMessages(prev => [...prev, { me: true, text }]);
+            setAliceDraft('');
+        } else {
+            setBobMessages(prev => [...prev, { me: true, text }]);
+            setBobDraft('');
+        }
+
+        const encrypted = await WebCrypto.encrypt(key, text);
+        const b64 = btoa(String.fromCharCode(...encrypted));
+
+        logEvent(`SEND: Opaque Ciphertext (${encrypted.length} bytes)`);
+        broadcast({ type: 'e2e', sender, ciphertext: b64 });
+    };
+
+    return (
+        <div className="space-y-6 max-w-5xl mx-auto">
+            <div className="glass-panel px-6 py-4 flex items-center justify-between text-sm">
+                <div className="flex gap-2 items-center">
+                    <span className="text-brandEmerald">●</span>
+                    <span className="text-textMuted font-mono">ECDH Key Exchange:</span>
+                    <span className="text-textMain font-mono font-bold tracking-wide">{status}</span>
+                </div>
+                <div className="text-textDim text-xs border border-pulseBorder px-3 py-1 rounded-full">
+                    P-256 + AES-GCM
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-8">
+                {/* Alice Panel */}
+                <div className="glass-panel overflow-hidden border-brandPurple/30">
+                    <div className="p-4 border-b border-pulseBorder flex items-center gap-3 bg-black/20">
+                        <div className="w-10 h-10 rounded-full bg-[linear-gradient(135deg,var(--tw-colors-brandPurple),#5b21b6)] flex items-center justify-center font-bold text-white shadow-lg shadow-brandPurple/20">A</div>
+                        <div>
+                            <div className="font-semibold text-textMain">Alice</div>
+                            <div className="text-[10px] text-textDim font-mono">{aliceKeyStr}</div>
+                        </div>
+                    </div>
+                    <div className="h-[300px] bg-black/10 p-4 overflow-y-auto flex flex-col gap-3">
+                        {aliceMessages.map((m, i) => (
+                            <div key={i} className={`px-4 py-2 text-sm rounded-2xl max-w-[80%] ${m.me ? 'bg-brandPurple text-white self-end rounded-br-sm' : 'bg-surface border border-pulseBorder text-textMain self-start rounded-bl-sm'}`}>
+                                {m.text}
+                            </div>
+                        ))}
+                    </div>
+                    <div className="p-4 bg-black/30 border-t border-pulseBorder flex gap-2">
+                        <input
+                            className="flex-1 bg-surface border border-pulseBorder rounded-full px-4 py-2 text-sm outline-none focus:border-brandPurple transition-colors text-textMain placeholder:text-textDim mix-blend-screen"
+                            placeholder="Type as Alice..."
+                            value={aliceDraft}
+                            onChange={e => setAliceDraft(e.target.value)}
+                            onKeyDown={e => e.key === 'Enter' && handleSend('Alice', aliceDraft)}
+                        />
+                        <button onClick={() => handleSend('Alice', aliceDraft)} className="bg-brandPurple hover:bg-brandPurple/90 text-white px-5 rounded-full text-sm font-semibold transition-all shadow-lg shadow-brandPurple/20 hover:scale-105 active:scale-95">Send</button>
+                    </div>
+                </div>
+
+                {/* Bob Panel */}
+                <div className="glass-panel overflow-hidden border-brandCyan/30">
+                    <div className="p-4 border-b border-pulseBorder flex items-center gap-3 bg-black/20">
+                        <div className="w-10 h-10 rounded-full bg-[linear-gradient(135deg,var(--tw-colors-brandCyan),#0e7490)] flex items-center justify-center font-bold text-white shadow-lg shadow-brandCyan/20">B</div>
+                        <div>
+                            <div className="font-semibold text-textMain">Bob</div>
+                            <div className="text-[10px] text-textDim font-mono">{bobKeyStr}</div>
+                        </div>
+                    </div>
+                    <div className="h-[300px] bg-black/10 p-4 overflow-y-auto flex flex-col gap-3">
+                        {bobMessages.map((m, i) => (
+                            <div key={i} className={`px-4 py-2 text-sm rounded-2xl max-w-[80%] ${m.me ? 'bg-brandCyan text-[#0a0a14] font-medium self-end rounded-br-sm' : 'bg-surface border border-pulseBorder text-textMain self-start rounded-bl-sm'}`}>
+                                {m.text}
+                            </div>
+                        ))}
+                    </div>
+                    <div className="p-4 bg-black/30 border-t border-pulseBorder flex gap-2">
+                        <input
+                            className="flex-1 bg-surface border border-pulseBorder rounded-full px-4 py-2 text-sm outline-none focus:border-brandCyan transition-colors text-textMain placeholder:text-textDim mix-blend-screen"
+                            placeholder="Type as Bob..."
+                            value={bobDraft}
+                            onChange={e => setBobDraft(e.target.value)}
+                            onKeyDown={e => e.key === 'Enter' && handleSend('Bob', bobDraft)}
+                        />
+                        <button onClick={() => handleSend('Bob', bobDraft)} className="bg-brandCyan hover:bg-brandCyan/90 text-[#0a0a14] px-5 rounded-full text-sm font-bold transition-all shadow-lg shadow-brandCyan/20 hover:scale-105 active:scale-95">Send</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,266 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+
+interface GameSyncProps {
+    useChannel: any; // from usePulse
+    logEvent: (action: string) => void;
+}
+
+export function GameSync({ useChannel, logEvent }: GameSyncProps) {
+    const localCanvasRef = useRef<HTMLCanvasElement>(null);
+    const remoteCanvasRef = useRef<HTMLCanvasElement>(null);
+
+    const [metrics, setMetrics] = useState({ ups: 0, bytes: 0 });
+
+    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 remoteViewRef = useRef({
+        p1: { x: 0.3, y: 0.5, color: '#7C3AED', label: 'P1' },
+        p2: { x: 0.7, y: 0.5, color: '#10B981', label: 'P2' }
+    });
+
+    const scoreRef = useRef({ p1: 0, p2: 0 });
+    const keysRef = useRef<{ [key: string]: boolean }>({});
+
+    // AI state
+    const aiRef = useRef({ angle: 0, speed: 0.003 });
+
+    // Collectibles
+    const collectiblesRef = useRef(
+        Array.from({ length: 5 }).map((_, i) => ({
+            x: 0.1 + Math.random() * 0.8,
+            y: 0.1 + Math.random() * 0.8,
+            color: '#F59E0B',
+            collected: false,
+            id: i,
+        }))
+    );
+
+    const statsRef = useRef({ updatesThisSecond: 0, bytesThisSecond: 0, frameCount: 0 });
+
+    // Input listeners
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => { keysRef.current[e.key.toLowerCase()] = true; };
+        const handleKeyUp = (e: KeyboardEvent) => { keysRef.current[e.key.toLowerCase()] = false; };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+
+    // Sync handler (incoming data)
+    const handleSyncMessage = useCallback((msg: any) => {
+        if (msg.seq) {
+            const state = msg;
+            // Interpolate towards the actual synced state
+            remoteViewRef.current.p1.x += (state.p1.x - remoteViewRef.current.p1.x) * 0.7;
+            remoteViewRef.current.p1.y += (state.p1.y - remoteViewRef.current.p1.y) * 0.7;
+            remoteViewRef.current.p2.x += (state.p2.x - remoteViewRef.current.p2.x) * 0.7;
+            remoteViewRef.current.p2.y += (state.p2.y - remoteViewRef.current.p2.y) * 0.7;
+        }
+    }, []);
+
+    const { broadcast } = useChannel('game-sync', handleSyncMessage);
+
+    // Drawing helpers
+    const drawPlayer = (ctx: CanvasRenderingContext2D, x: number, y: number, color: string, label: string) => {
+        ctx.beginPath();
+        ctx.arc(x, y, 24, 0, Math.PI * 2);
+        ctx.fillStyle = color + "30";
+        ctx.fill();
+
+        ctx.beginPath();
+        ctx.arc(x, y, 18, 0, Math.PI * 2);
+        ctx.fillStyle = color + "50";
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2;
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 15;
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+
+        ctx.fillStyle = "white";
+        ctx.font = "bold 11px 'Inter', sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(label, x, y);
+        ctx.textAlign = "start";
+    };
+
+    const drawArena = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, p1: any, p2: any, isRemote: boolean) => {
+        const w = canvas.width;
+        const h = canvas.height;
+
+        ctx.fillStyle = "#0a0a14";
+        ctx.fillRect(0, 0, w, h);
+
+        ctx.strokeStyle = "rgba(255,255,255,0.04)";
+        ctx.lineWidth = 1;
+        for (let x = 0; x < w; x += 40) {
+            ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
+        }
+        for (let y = 0; y < h; y += 40) {
+            ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+        }
+
+        collectiblesRef.current.forEach((c) => {
+            if (c.collected) return;
+            ctx.beginPath();
+            ctx.arc(c.x * w, c.y * h, 8, 0, Math.PI * 2);
+            ctx.fillStyle = c.color;
+            ctx.fill();
+            ctx.shadowColor = c.color;
+            ctx.shadowBlur = 12;
+            ctx.fill();
+            ctx.shadowBlur = 0;
+        });
+
+        drawPlayer(ctx, p1.x * w, p1.y * h, p1.color, p1.label);
+        drawPlayer(ctx, p2.x * w, p2.y * h, p2.color, p2.label);
+
+        ctx.fillStyle = "rgba(255,255,255,0.5)";
+        ctx.font = "12px monospace";
+        ctx.fillText(`P1: ${scoreRef.current.p1}  P2: ${scoreRef.current.p2}`, 10, 20);
+        if (isRemote) {
+            ctx.fillStyle = "rgba(6,182,212,0.5)";
+            ctx.fillText("🔗 Synced via Pulse", w - 150, 20);
+        }
+    };
+
+    // Game loop
+    useEffect(() => {
+        let animationId: number;
+        const SPEED = 0.006;
+
+        const tick = () => {
+            if (!localCanvasRef.current || !remoteCanvasRef.current) return;
+            const localCtx = localCanvasRef.current.getContext('2d');
+            const remoteCtx = remoteCanvasRef.current.getContext('2d');
+            if (!localCtx || !remoteCtx) return;
+
+            const keys = keysRef.current;
+            const localP = localPlayerRef.current;
+            const remoteP = remotePlayerRef.current;
+
+            if (keys["w"] || keys["arrowup"]) localP.y = Math.max(0.05, localP.y - SPEED);
+            if (keys["s"] || keys["arrowdown"]) localP.y = Math.min(0.95, localP.y + SPEED);
+            if (keys["a"] || keys["arrowleft"]) localP.x = Math.max(0.05, localP.x - SPEED);
+            if (keys["d"] || keys["arrowright"]) localP.x = Math.min(0.95, localP.x + SPEED);
+
+            aiRef.current.angle += aiRef.current.speed;
+            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) => {
+                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);
+                if (d1 < 0.04) { c.collected = true; scoreRef.current.p1++; }
+                if (d2 < 0.04) { c.collected = true; scoreRef.current.p2++; }
+            });
+
+            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;
+                });
+            }
+
+            drawArena(localCtx, localCanvasRef.current, localP, remoteP, false);
+
+            // Sync state at ~60fps
+            statsRef.current.frameCount++;
+            statsRef.current.updatesThisSecond++;
+            const payload = {
+                p1: { x: localP.x, y: localP.y },
+                p2: { x: remoteP.x, y: remoteP.y },
+                score: scoreRef.current,
+                seq: statsRef.current.frameCount,
+            };
+
+            const payloadStr = JSON.stringify(payload);
+            statsRef.current.bytesThisSecond += payloadStr.length;
+
+            // Send to peers
+            broadcast(payload);
+
+            // Interpolate fallback for when broadcast doesn't echo locally fast enough
+            const rv = remoteViewRef.current;
+            rv.p1.x += (localP.x - rv.p1.x) * 0.1;
+            rv.p1.y += (localP.y - rv.p1.y) * 0.1;
+            rv.p2.x += (remoteP.x - rv.p2.x) * 0.1;
+            rv.p2.y += (remoteP.y - rv.p2.y) * 0.1;
+
+            drawArena(remoteCtx, remoteCanvasRef.current, rv.p1, rv.p2, true);
+
+            animationId = requestAnimationFrame(tick);
+        };
+
+        animationId = requestAnimationFrame(tick);
+
+        // Stats ticker
+        const statsInterval = setInterval(() => {
+            setMetrics({
+                ups: statsRef.current.updatesThisSecond,
+                bytes: statsRef.current.bytesThisSecond
+            });
+            if (statsRef.current.updatesThisSecond > 0) {
+                logEvent(`STATE_UPDATE: seq=${statsRef.current.frameCount} (${Math.floor(statsRef.current.bytesThisSecond / 60)}B/frame)`);
+            }
+            statsRef.current.updatesThisSecond = 0;
+            statsRef.current.bytesThisSecond = 0;
+        }, 1000);
+
+        return () => {
+            cancelAnimationFrame(animationId);
+            clearInterval(statsInterval);
+        };
+    }, [broadcast, logEvent]);
+
+    return (
+        <div className="space-y-6">
+            <div className="grid grid-cols-2 gap-6 w-full max-w-4xl mx-auto">
+                <div>
+                    <div className="text-xs text-textMuted mb-2 uppercase tracking-wide font-semibold">Your View (WASD to move)</div>
+                    <canvas
+                        ref={localCanvasRef}
+                        width={600} height={400}
+                        className="w-full bg-black/40 border border-pulseBorder rounded-2xl shadow-lg ring-1 ring-white/5 object-contain"
+                    />
+                </div>
+                <div>
+                    <div className="text-xs text-textMuted mb-2 uppercase tracking-wide font-semibold">Remote Peer View (Synced via Pulse)</div>
+                    <canvas
+                        ref={remoteCanvasRef}
+                        width={600} height={400}
+                        className="w-full bg-black/40 border border-brandCyan/30 rounded-2xl shadow-[0_0_20px_rgba(6,182,212,0.1)] ring-1 ring-brandCyan/20 object-contain"
+                    />
+                </div>
+            </div>
+
+            <div className="grid grid-cols-4 gap-4 max-w-4xl mx-auto">
+                <div className="glass-panel p-4 text-center">
+                    <div className="text-2xl font-bold font-mono text-brandCyan">{metrics.ups}</div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Updates/sec</div>
+                </div>
+                <div className="glass-panel p-4 text-center">
+                    <div className="text-2xl font-bold font-mono text-brandPurple">60Hz</div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Target Sync</div>
+                </div>
+                <div className="glass-panel p-4 text-center">
+                    <div className="text-2xl font-bold font-mono text-brandEmerald">{metrics.bytes}</div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Bytes/sec</div>
+                </div>
+                <div className="glass-panel p-4 text-center">
+                    <div className="text-2xl font-bold font-mono text-brandAmber">ON</div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Interpolation</div>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,133 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+
+interface ServerMetricsProps {
+    useChannel: any; // from usePulse
+    logEvent: (action: string) => void;
+}
+
+export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
+    const [stats, setStats] = useState({ cpu: 0, mem: 0, net: 0, disk: 0 });
+    const cpuCanvas = useRef<HTMLCanvasElement>(null);
+    const memCanvas = useRef<HTMLCanvasElement>(null);
+
+    const historyRef = useRef({
+        cpu: Array(60).fill(0),
+        mem: Array(60).fill(0),
+    });
+
+    const drawChart = (canvas: HTMLCanvasElement, data: number[], color: string) => {
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const w = (canvas.width = canvas.offsetWidth * (window.devicePixelRatio || 1));
+        const h = (canvas.height = canvas.offsetHeight * (window.devicePixelRatio || 1));
+
+        ctx.clearRect(0, 0, w, h);
+
+        ctx.strokeStyle = "rgba(255,255,255,0.06)";
+        ctx.lineWidth = 1;
+        for (let i = 0; i <= 4; i++) {
+            const y = (h * i) / 4;
+            ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
+        }
+
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2 * (window.devicePixelRatio || 1);
+        ctx.lineJoin = "round";
+        ctx.beginPath();
+        for (let i = 0; i < data.length; i++) {
+            const x = (i / 59) * w;
+            const y = h - (Math.min(data[i], 100) / 100) * h;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+
+        ctx.lineTo(w, h);
+        ctx.lineTo(0, h);
+        ctx.closePath();
+        // Fallback transparent fill
+        ctx.fillStyle = color.replace('rgb', 'rgba').replace(')', ', 0.15)');
+        ctx.fill();
+    };
+
+    const handleMessage = useCallback((metrics: any) => {
+        if (metrics.type === "server_metrics") {
+            setStats({ cpu: metrics.cpu, mem: metrics.mem, net: metrics.net, disk: metrics.disk });
+
+            const cpuHist = historyRef.current.cpu;
+            const memHist = historyRef.current.mem;
+
+            cpuHist.push(metrics.cpu);
+            memHist.push(metrics.mem);
+            if (cpuHist.length > 60) cpuHist.shift();
+            if (memHist.length > 60) memHist.shift();
+
+            if (cpuCanvas.current) drawChart(cpuCanvas.current, cpuHist, '#06B6D4'); // Cyan
+            if (memCanvas.current) drawChart(memCanvas.current, memHist, '#7C3AED'); // Purple
+
+            logEvent(`RECV [Metrics]: CPU=${metrics.cpu.toFixed(1)}% MEM=${metrics.mem.toFixed(1)}%`);
+        }
+    }, [logEvent]);
+
+    const { broadcast } = useChannel("server-metrics", handleMessage);
+
+    // If no backend is pushing to us, we will simulate the backend pushing metrics.
+    // In a real app the Rust `server-rust` does this.
+    useEffect(() => {
+        const interval = setInterval(() => {
+            // Check if we haven't received real data in the last tick
+            // For the sake of the demo, if we want this React app to just work standalone:
+            // We simulate that the server is broadcasting.
+            const fakeMetrics = {
+                type: "server_metrics",
+                cpu: 10 + Math.random() * 20 + Math.sin(Date.now() / 1000) * 10,
+                mem: 40 + Math.random() * 5 + Math.cos(Date.now() / 2000) * 10,
+                net: Math.random() * 100,
+                disk: Math.random() * 5
+            };
+            // Normally the server does this, here we do it so the demo "just works" locally
+            broadcast(fakeMetrics);
+            // We handle it directly in handleMessage too (since broadcast goes up to the relay and back)
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [broadcast]);
+
+    return (
+        <div className="space-y-6 max-w-5xl mx-auto">
+            <div className="grid grid-cols-4 gap-4">
+                <div className="glass-panel p-6 text-center">
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">CPU Usage</div>
+                    <div className="text-3xl font-bold text-brandCyan font-mono">{stats.cpu.toFixed(1)}%</div>
+                </div>
+                <div className="glass-panel p-6 text-center">
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">Memory</div>
+                    <div className="text-3xl font-bold text-brandPurple font-mono">{stats.mem.toFixed(1)}%</div>
+                </div>
+                <div className="glass-panel p-6 text-center">
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">Network</div>
+                    <div className="text-3xl font-bold text-brandEmerald font-mono">{stats.net.toFixed(0)} Mbps</div>
+                </div>
+                <div className="glass-panel p-6 text-center">
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">Disk I/O</div>
+                    <div className="text-3xl font-bold text-brandAmber font-mono">{stats.disk.toFixed(1)}%</div>
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-6">
+                <div className="glass-panel p-4">
+                    <div className="text-xs uppercase tracking-widest text-textDim font-bold mb-4 border-b border-pulseBorder pb-2">CPU % Over Time</div>
+                    <canvas ref={cpuCanvas} className="w-full h-48 border border-white/5 rounded-xl bg-black/40"></canvas>
+                </div>
+                <div className="glass-panel p-4">
+                    <div className="text-xs uppercase tracking-widest text-textDim font-bold mb-4 border-b border-pulseBorder pb-2">Memory % Over Time</div>
+                    <canvas ref={memCanvas} className="w-full h-48 border border-white/5 rounded-xl bg-black/40"></canvas>
+                </div>
+            </div>
+            <div className="text-center text-xs text-textMuted bg-brandAmber/10 border border-brandAmber/20 p-3 rounded-lg flex items-center justify-center gap-2 max-w-lg mx-auto">
+                <span className="w-2 h-2 rounded-full bg-brandAmber shadow-[0_0_8px_var(--tw-colors-brandAmber)] animate-pulse"></span>
+                In standalone mode, data is simulated and echoed through the Pulse Relay.
+            </div>
+        </div>
+    );
+}