@sansavision/create-pulse 0.1.0-alpha.8 → 0.1.0-alpha.9

package/package.json

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

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { Clock } from 'lucide-react';
 
 // Web Crypto API: ECDH P-256 key agreement + AES-256-GCM symmetric encryption
 // This is production-grade E2E encryption — the relay never sees plaintext.
@@ -89,6 +90,10 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
     const [aliceDraft, setAliceDraft] = useState('');
     const [bobDraft, setBobDraft] = useState('');
 
+    // Delay metrics
+    const [lastDelay, setLastDelay] = useState<number | null>(null);
+    const delayHistoryRef = useRef<number[]>([]);
+
     // Generate ECDH keypairs and derive shared secrets on mount
     useEffect(() => {
         const setupCrypto = async () => {
@@ -151,6 +156,8 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
         const decryptKey = sender === 'Alice' ? keysRef.current.bobShared : keysRef.current.aliceShared;
         if (!encryptKey || !decryptKey) return;
 
+        const sendTs = Date.now();
+
         // 1) Encrypt the plaintext
         const encrypted = await WebCrypto.encrypt(encryptKey, text);
         const b64 = btoa(String.fromCharCode(...encrypted));
@@ -180,11 +187,19 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
             } else {
                 setAliceMessages((prev: ChatMessage[]) => [...prev, { me: false, text: decrypted, encrypted: ciphertextPreview }]);
             }
+            // Record E2E loopback delay
+            const delay = Date.now() - sendTs;
+            setLastDelay(delay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
         } catch (err) {
             console.error('Local decrypt failed:', err);
         }
     };
 
+    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 */}
@@ -199,6 +214,22 @@ export function EncryptedChat({ useChannel, logEvent }: EncryptedChatProps) {
                 </div>
             </div>
 
+            {/* Live Metrics */}
+            <div className="grid grid-cols-2 gap-4">
+                <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" />Msg Delay</div>
+                    <span className={`text-sm font-bold font-mono ${lastDelay !== null && lastDelay > 50 ? 'text-brandAmber' : 'text-brandEmerald'}`}>
+                        {lastDelay !== null ? `${lastDelay}ms` : '—'}
+                    </span>
+                </div>
+                <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` : '—'}
+                    </span>
+                </div>
+            </div>
+
             <div className="grid grid-cols-2 gap-8">
                 {/* Alice Panel */}
                 <div className="glass-panel overflow-hidden border-brandPurple/30">

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

@@ -11,6 +11,10 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
 
     const [metrics, setMetrics] = useState({ ups: 0, bytes: 0 });
 
+    // Delay tracking
+    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 remoteViewRef = useRef({
@@ -58,6 +62,13 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             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;
+
+            // Track delay from received messages
+            if (msg.ts) {
+                const delay = Date.now() - msg.ts;
+                setLastDelay(delay);
+                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+            }
         }
     }, []);
 
@@ -107,7 +118,7 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
         }
 
-        collectiblesRef.current.forEach((c) => {
+        collectiblesRef.current.forEach((c: any) => {
             if (c.collected) return;
             ctx.beginPath();
             ctx.arc(c.x * w, c.y * h, 8, 0, Math.PI * 2);
@@ -131,6 +142,11 @@ 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;
@@ -155,7 +171,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) => {
+            collectiblesRef.current.forEach((c: any) => {
                 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);
@@ -163,8 +179,8 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
                 if (d2 < 0.04) { c.collected = true; scoreRef.current.p2++; }
             });
 
-            if (collectiblesRef.current.every((c) => c.collected)) {
-                collectiblesRef.current.forEach((c) => {
+            if (collectiblesRef.current.every((c: any) => c.collected)) {
+                collectiblesRef.current.forEach((c: any) => {
                     c.x = 0.1 + Math.random() * 0.8;
                     c.y = 0.1 + Math.random() * 0.8;
                     c.collected = false;
@@ -176,11 +192,13 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             // Sync state at ~60fps
             statsRef.current.frameCount++;
             statsRef.current.updatesThisSecond++;
+            const sendTs = Date.now();
             const payload = {
                 p1: { x: localP.x, y: localP.y },
                 p2: { x: remoteP.x, y: remoteP.y },
                 score: scoreRef.current,
                 seq: statsRef.current.frameCount,
+                ts: sendTs,
             };
 
             const payloadStr = JSON.stringify(payload);
@@ -189,6 +207,11 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             // Send to peers
             broadcast(payload);
 
+            // Record loopback delay so metrics are visible
+            const loopbackDelay = Date.now() - sendTs;
+            setLastDelay(loopbackDelay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), loopbackDelay];
+
             // 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;
@@ -249,18 +272,23 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
                     <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 className="text-2xl font-bold font-mono text-brandPurple">{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-brandEmerald">{metrics.bytes}</div>
-                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Bytes/sec</div>
+                    <div className={`text-2xl font-bold font-mono ${lastDelay !== null && lastDelay > 50 ? 'text-brandAmber' : 'text-brandEmerald'}`}>
+                        {lastDelay !== null ? `${lastDelay}ms` : '—'}
+                    </div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Msg Delay</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 className="text-2xl font-bold font-mono text-brandEmerald">
+                        {avgDelay !== null ? `~${avgDelay * 2}ms` : '—'}
+                    </div>
+                    <div className="text-[10px] text-textDim uppercase tracking-widest mt-1">Relay RTT</div>
                 </div>
             </div>
         </div>
     );
 }
+

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

@@ -10,6 +10,10 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
     const cpuCanvas = useRef<HTMLCanvasElement>(null);
     const memCanvas = useRef<HTMLCanvasElement>(null);
 
+    // Delay tracking
+    const [lastDelay, setLastDelay] = useState<number | null>(null);
+    const delayHistoryRef = useRef<number[]>([]);
+
     const historyRef = useRef({
         cpu: Array(60).fill(0),
         mem: Array(60).fill(0),
@@ -66,6 +70,13 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
             if (memCanvas.current) drawChart(memCanvas.current, memHist, '#7C3AED'); // Purple
 
             logEvent(`RECV [Metrics]: CPU=${metrics.cpu.toFixed(1)}% MEM=${metrics.mem.toFixed(1)}%`);
+
+            // Track delay from timestamps
+            if (metrics.ts) {
+                const delay = Date.now() - metrics.ts;
+                setLastDelay(delay);
+                delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+            }
         }
     }, [logEvent]);
 
@@ -78,21 +89,31 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
             // 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 sendTs = Date.now();
             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
+                disk: Math.random() * 5,
+                ts: sendTs,
             };
             // 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)
+
+            // Record loopback delay
+            const loopbackDelay = Date.now() - sendTs;
+            setLastDelay(loopbackDelay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), loopbackDelay];
         }, 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">
@@ -105,12 +126,16 @@ export function ServerMetrics({ useChannel, logEvent }: ServerMetricsProps) {
                     <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 className="text-[10px] text-textDim uppercase tracking-widest mb-2 font-semibold">Msg Delay</div>
+                    <div className={`text-3xl font-bold font-mono ${lastDelay !== null && lastDelay > 50 ? 'text-brandAmber' : 'text-brandEmerald'}`}>
+                        {lastDelay !== null ? `${lastDelay}ms` : '—'}
+                    </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 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` : '—'}
+                    </div>
                 </div>
             </div>
 

package/templates/react-watch-together/src/App.tsx

@@ -1,9 +1,14 @@
 import { useState, useCallback, useRef } from 'react';
 import { usePulse } from './hooks/usePulse';
 import { VideoPlayer } from './components/VideoPlayer';
-import { Activity, Users, Video } from 'lucide-react';
+import { Activity, Users, Video, Settings } from 'lucide-react';
 
-const VIDEO_URL = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+// Quality options for the video
+const QUALITY_OPTIONS = [
+    { label: '1080p', value: '1080p', src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
+    { label: '720p', value: '720p', src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' },
+    { label: '480p', value: '480p', src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4' },
+];
 const STREAM_NAME = "watch-together-demo";
 
 export default function App() {
@@ -17,6 +22,10 @@ export default function App() {
     const [isPlaying, setIsPlaying] = useState(false);
     const [events, setEvents] = useState<{ id: number, action: string, time: string }[]>([]);
 
+    // Video quality
+    const [selectedQuality, setSelectedQuality] = useState(QUALITY_OPTIONS[0]);
+    const [showQualityMenu, setShowQualityMenu] = useState(false);
+
     // Track message round-trip delay
     const [lastDelay, setLastDelay] = useState<number | null>(null);
     const delayHistoryRef = useRef<number[]>([]);
@@ -54,6 +63,12 @@ export default function App() {
             case 'tick':
                 if (msg.time !== undefined) setPeerTime(msg.time);
                 break;
+            case 'quality':
+                if (msg.quality) {
+                    const q = QUALITY_OPTIONS.find((o: any) => o.value === msg.quality);
+                    if (q) setSelectedQuality(q);
+                }
+                break;
         }
     }, [logEvent]);
 
@@ -87,6 +102,13 @@ export default function App() {
         delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), loopbackDelay];
     }, [broadcast, logEvent]);
 
+    const handleQualityChange = useCallback((quality: typeof QUALITY_OPTIONS[0]) => {
+        setSelectedQuality(quality);
+        setShowQualityMenu(false);
+        logEvent(`QUALITY: ${quality.label}`);
+        broadcast({ action: 'quality', quality: quality.value, ts: Date.now() });
+    }, [broadcast, logEvent]);
+
     // Compute average delay
     const avgDelay = delayHistoryRef.current.length > 0
         ? Math.round(delayHistoryRef.current.reduce((a: number, b: number) => a + b, 0) / delayHistoryRef.current.length)
@@ -142,10 +164,46 @@ export default function App() {
 
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     <div className="lg:col-span-2 space-y-8">
+                        {/* Quality selector */}
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                                <span className="px-2.5 py-1 rounded-lg bg-brandPurple/20 border border-brandPurple/30 text-brandPurple text-[11px] font-bold uppercase tracking-wider">
+                                    {selectedQuality.label}
+                                </span>
+                                <span className="text-xs text-textDim">Current Quality</span>
+                            </div>
+                            <div className="relative">
+                                <button
+                                    onClick={() => setShowQualityMenu(!showQualityMenu)}
+                                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass-panel text-xs text-textMuted hover:text-textMain transition-colors"
+                                >
+                                    <Settings className="w-3.5 h-3.5" />
+                                    Quality
+                                </button>
+                                {showQualityMenu && (
+                                    <div className="absolute right-0 top-full mt-1 z-50 glass-panel rounded-xl overflow-hidden shadow-2xl border border-pulseBorder min-w-[120px]">
+                                        {QUALITY_OPTIONS.map((q: any) => (
+                                            <button
+                                                key={q.value}
+                                                onClick={() => handleQualityChange(q)}
+                                                className={`w-full px-4 py-2.5 text-left text-xs font-mono transition-colors ${selectedQuality.value === q.value
+                                                    ? 'bg-brandPurple/20 text-brandPurple font-bold'
+                                                    : 'text-textMuted hover:bg-white/5 hover:text-textMain'
+                                                    }`}
+                                            >
+                                                {q.label}
+                                                {selectedQuality.value === q.value && ' ✓'}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
                         <VideoPlayer
                             role="host"
                             label="Host Player (You control this)"
-                            src={VIDEO_URL}
+                            src={selectedQuality.src}
                             currentTime={hostTime}
                             isPlaying={isPlaying}
                             onPlay={() => { setIsPlaying(true); broadcastAction('play', hostTime); }}
@@ -153,15 +211,17 @@ export default function App() {
                             onSeek={(t: number) => { setHostTime(t); broadcastAction('seek', t); }}
                             onTick={(t: number) => { setHostTime(t); broadcastAction('tick', t); }}
                             accentColor="#a5b4fc"
+                            quality={selectedQuality.label}
                         />
 
                         <VideoPlayer
                             role="peer"
                             label="Peer Viewer (Remote representation)"
-                            src={VIDEO_URL}
+                            src={selectedQuality.src}
                             currentTime={peerTime}
                             isPlaying={isPlaying}
                             accentColor="#67e8f9"
+                            quality={selectedQuality.label}
                         />
                     </div>
 

package/templates/react-watch-together/src/components/VideoPlayer.tsx

@@ -11,6 +11,7 @@ interface VideoPlayerProps {
     onSeek?: (time: number) => void;
     onTick?: (time: number) => void;
     accentColor: string;
+    quality?: string;
 }
 
 export function VideoPlayer({
@@ -23,7 +24,8 @@ export function VideoPlayer({
     onPause,
     onSeek,
     onTick,
-    accentColor
+    accentColor,
+    quality
 }: VideoPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
 
@@ -100,6 +102,11 @@ export function VideoPlayer({
             </div>
 
             <div className="relative rounded-2xl overflow-hidden border border-pulseBorder bg-black shadow-xl ring-1 ring-white/5 h-64 sm:h-80 md:h-96">
+                {quality && (
+                    <div className="absolute top-3 right-3 z-10 px-2 py-1 rounded-md bg-black/70 border border-white/10 backdrop-blur-sm text-[10px] font-bold font-mono text-white/80 uppercase tracking-wider">
+                        {quality}
+                    </div>
+                )}
                 <video
                     ref={videoRef}
                     controls={role === 'host'}