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

package/dist/index.js

@@ -53,6 +53,7 @@ async function main() {
           options: [
             { value: "react-watch-together", label: "Watch Together (React + TS)", hint: "Synchronized video playback" },
             { value: "react-all-features", label: "All Features (React + TS)", hint: "Chat, Video, Audio, RPC" },
+            { value: "react-queue-demo", label: "Durable Queues (React + TS)", hint: "Persistent queues with WAL/Postgres/Redis" },
             { value: "vanilla-basic", label: "Vanilla JS (Basic)", hint: "Minimal setup" }
           ]
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sansavision/create-pulse",
-  "version": "0.1.0-alpha.8",
+  "version": "0.4.0",
   "description": "Scaffold a new Pulse application",
   "main": "dist/index.js",
   "bin": {
@@ -29,4 +29,4 @@
     "tsup": "^8.0.2",
     "typescript": "^5.0.0"
   }
-}
+}

package/src/index.ts

@@ -35,6 +35,7 @@ async function main() {
                     options: [
                         { value: 'react-watch-together', label: 'Watch Together (React + TS)', hint: 'Synchronized video playback' },
                         { value: 'react-all-features', label: 'All Features (React + TS)', hint: 'Chat, Video, Audio, RPC' },
+                        { value: 'react-queue-demo', label: 'Durable Queues (React + TS)', hint: 'Persistent queues with WAL/Postgres/Redis' },
                         { value: 'vanilla-basic', label: 'Vanilla JS (Basic)', hint: 'Minimal setup' }
                     ]
                 });

package/templates/react-all-features/package.json

@@ -1,27 +1,27 @@
 {
-    "name": "pulse-react-all-features",
-    "private": true,
-    "version": "0.1.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc -b && vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@sansavision/pulse-sdk": "latest",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "lucide-react": "^0.412.0"
-    },
-    "devDependencies": {
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
-        "postcss": "^8.4.39",
-        "tailwindcss": "^3.4.6",
-        "typescript": "^5.5.3",
-        "vite": "^5.3.4"
-    }
-}
+  "name": "pulse-react-all-features",
+  "private": true,
+  "version": "0.4.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@sansavision/pulse-sdk": "0.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.412.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}

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

@@ -73,25 +73,35 @@ export default function App() {
         const msg = { action, time, ts: sendTs };
         broadcast(msg);
 
-        // Local loopback: since the relay doesn't echo back to the sender,
-        // we directly update peerTime for the same-tab demo experience.
-        // Also record the loopback delay so telemetry metrics are visible.
-        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);
-        }
-
-        // Record loopback delay (measures local processing overhead)
-        const loopbackDelay = Date.now() - sendTs;
-        setLastDelay(loopbackDelay);
-        delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), loopbackDelay];
+        // 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);
     }, [broadcast, logEvent]);
 
     // Computed delay stats

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,14 @@ export function GameSync({ useChannel, logEvent }: GameSyncProps) {
             // Send to peers
             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;
             rv.p1.x += (localP.x - rv.p1.x) * 0.1;
@@ -249,18 +275,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,33 @@ 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)
+
+            // 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);
         }, 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 +128,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-queue-demo/README.md

@@ -0,0 +1,44 @@
+# Pulse Queue Demo
+
+A demo app showcasing **Pulse v0.4.0** durable message queues.
+
+## Features
+
+- Publish → Queue → Consumer flow over PLP
+- At-least-once delivery with ACK/NACK
+- Dead-letter queue for failed messages
+- Real-time RTT metrics
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+In a separate terminal, start Pulse with your preferred queue backend:
+
+```bash
+# In-memory (default, ephemeral)
+pulse dev
+
+# WAL (Write-Ahead Log — crash-resilient)
+PULSE_QUEUE_BACKEND=wal pulse dev
+
+# PostgreSQL
+PULSE_QUEUE_BACKEND=postgres PULSE_QUEUE_POSTGRES_URL=postgres://user:pass@localhost/pulse pulse dev
+
+# Redis
+PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
+```
+
+## Encryption at Rest
+
+Add encryption to any backend:
+
+```bash
+export PULSE_QUEUE_KEY=$(openssl rand -hex 32)
+PULSE_QUEUE_BACKEND=wal pulse dev
+```
+
+All payloads are encrypted with ChaCha20-Poly1305 before reaching storage.

package/templates/react-queue-demo/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pulse Queue Demo</title>
+    <style>
+      body { margin: 0; background: #0f0f23; color: #e5e7eb; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,22 @@
+{
+    "name": "pulse-queue-demo",
+    "version": "0.4.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@sansavision/pulse-sdk": "^0.4.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "typescript": "^5.7.0",
+        "vite": "^6.0.0"
+    }
+}

package/templates/react-queue-demo/src/App.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Pulse } from '@sansavision/pulse-sdk'
+
+/**
+ * Pulse v0.4.0 — Durable Queue Demo
+ *
+ * This template demonstrates the persistent message queue system with:
+ * - Publisher → Queue → Consumer flow over PLP
+ * - At-least-once delivery semantics
+ * - Dead-letter queue visibility
+ * - Real-time metrics (RTT, packet loss)
+ *
+ * Server-side queue backends (configured via PULSE_QUEUE_BACKEND env var):
+ * - memory:   In-memory (default, ephemeral)
+ * - wal:      Write-Ahead Log (crash-resilient, local filesystem)
+ * - postgres: PostgreSQL (cloud/HA)
+ * - redis:    Redis (shared state / cache)
+ */
+
+interface QueueMessage {
+    id: string
+    payload: string
+    timestamp: number
+    state: 'pending' | 'in_flight' | 'acked' | 'dead_lettered'
+}
+
+export default function App() {
+    const [connected, setConnected] = useState(false)
+    const [messages, setMessages] = useState<QueueMessage[]>([])
+    const [input, setInput] = useState('')
+    const [rtt, setRtt] = useState<number | null>(null)
+    const [conn, setConn] = useState<any>(null)
+
+    useEffect(() => {
+        const pulse = new Pulse({ apiKey: 'dev' })
+
+        pulse.connect('ws://localhost:4001').then((connection) => {
+            setConn(connection)
+            setConnected(true)
+
+            // Subscribe to queue stream
+            const stream = connection.stream('task-queue', { qos: 'durable' })
+            stream.on('data', (bytes: Uint8Array) => {
+                const msg = JSON.parse(new TextDecoder().decode(bytes))
+                setMessages((prev) => [...prev, msg])
+            })
+
+            // Live metrics
+            connection.on('metrics', (m: any) => setRtt(m.rtt))
+        })
+
+        return () => {
+            conn?.close()
+        }
+    }, [])
+
+    const publish = useCallback(async () => {
+        if (!conn || !input.trim()) return
+
+        const msg: QueueMessage = {
+            id: crypto.randomUUID(),
+            payload: input.trim(),
+            timestamp: Date.now(),
+            state: 'pending',
+        }
+
+        const stream = conn.stream('task-queue', { qos: 'durable' })
+        stream.send(new TextEncoder().encode(JSON.stringify(msg)))
+        setMessages((prev) => [...prev, msg])
+        setInput('')
+    }, [conn, input])
+
+    const ackMessage = useCallback(async (id: string) => {
+        if (!conn) return
+        await conn.service('queue', 'ack', { queue: 'task-queue', message_id: id })
+        setMessages((prev) =>
+            prev.map((m) => (m.id === id ? { ...m, state: 'acked' as const } : m))
+        )
+    }, [conn])
+
+    return (
+        <div style={{ fontFamily: 'Inter, system-ui, sans-serif', maxWidth: 720, margin: '0 auto', padding: 32 }}>
+            <h1>🔄 Pulse Queue Demo</h1>
+            <p style={{ color: '#888' }}>
+                Durable message queues with at-least-once delivery over PLP.
+                {connected ? (
+                    <span style={{ color: '#4ade80' }}> ● Connected</span>
+                ) : (
+                    <span style={{ color: '#f87171' }}> ○ Connecting...</span>
+                )}
+                {rtt !== null && <span style={{ marginLeft: 12 }}>RTT: {rtt}ms</span>}
+            </p>
+
+            <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
+                <input
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && publish()}
+                    placeholder="Enter a task message..."
+                    style={{
+                        flex: 1, padding: '10px 16px', borderRadius: 8,
+                        border: '1px solid #333', background: '#1a1a2e', color: '#fff', fontSize: 14
+                    }}
+                />
+                <button
+                    onClick={publish}
+                    disabled={!connected}
+                    style={{
+                        padding: '10px 20px', borderRadius: 8, border: 'none',
+                        background: '#7c3aed', color: '#fff', fontWeight: 600, cursor: 'pointer'
+                    }}
+                >
+                    Publish
+                </button>
+            </div>
+
+            <h2>Messages ({messages.length})</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {messages.map((msg) => (
+                    <div
+                        key={msg.id}
+                        style={{
+                            padding: 16, borderRadius: 8,
+                            background: msg.state === 'acked' ? '#064e3b' : msg.state === 'dead_lettered' ? '#7f1d1d' : '#1e1b4b',
+                            display: 'flex', justifyContent: 'space-between', alignItems: 'center'
+                        }}
+                    >
+                        <div>
+                            <strong>{msg.payload}</strong>
+                            <div style={{ fontSize: 12, color: '#888', marginTop: 4 }}>
+                                {msg.id.slice(0, 8)} · {new Date(msg.timestamp).toLocaleTimeString()} ·{' '}
+                                <span style={{
+                                    color: msg.state === 'acked' ? '#4ade80' : msg.state === 'dead_lettered' ? '#f87171' : '#facc15'
+                                }}>
+                                    {msg.state}
+                                </span>
+                            </div>
+                        </div>
+                        {msg.state === 'pending' && (
+                            <button
+                                onClick={() => ackMessage(msg.id)}
+                                style={{
+                                    padding: '6px 12px', borderRadius: 6, border: 'none',
+                                    background: '#22c55e', color: '#000', fontWeight: 600, cursor: 'pointer'
+                                }}
+                            >
+                                ACK
+                            </button>
+                        )}
+                    </div>
+                ))}
+            </div>
+
+            <div style={{ marginTop: 32, padding: 16, borderRadius: 8, background: '#111827', fontSize: 13, color: '#9ca3af' }}>
+                <strong style={{ color: '#e5e7eb' }}>Server Configuration</strong>
+                <pre style={{ marginTop: 8 }}>
+                    {`# Start Pulse with WAL queue persistence:
+PULSE_QUEUE_BACKEND=wal PULSE_QUEUE_WAL_DIR=./data pulse dev
+
+# Or with PostgreSQL:
+PULSE_QUEUE_BACKEND=postgres PULSE_QUEUE_POSTGRES_URL=postgres://... pulse dev
+
+# Or with Redis:
+PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
+
+# Enable encryption at rest (any backend):
+PULSE_QUEUE_KEY=$(openssl rand -hex 32) pulse dev`}
+                </pre>
+            </div>
+        </div>
+    )
+}

package/templates/react-queue-demo/src/main.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(<App />)

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

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/templates/react-queue-demo/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+})

package/templates/react-watch-together/package.json

@@ -1,27 +1,27 @@
 {
-    "name": "pulse-react-watch-together",
-    "private": true,
-    "version": "0.1.0",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc -b && vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@sansavision/pulse-sdk": "latest",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "lucide-react": "^0.412.0"
-    },
-    "devDependencies": {
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
-        "postcss": "^8.4.39",
-        "tailwindcss": "^3.4.6",
-        "typescript": "^5.5.3",
-        "vite": "^5.3.4"
-    }
-}
+  "name": "pulse-react-watch-together",
+  "private": true,
+  "version": "0.4.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@sansavision/pulse-sdk": "0.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.412.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}

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]);
 
@@ -66,25 +81,43 @@ export default function App() {
         const msg = { action, time, ts: sendTs };
         broadcast(msg);
 
-        // Local loopback: since the relay doesn't echo back to the sender,
-        // we directly update peerTime to simulate the round-trip for the demo.
-        // For a real multi-user scenario, the relay delivers to other connections.
-        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);
-        }
+        // 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);
 
-        // Record loopback delay so telemetry metrics are visible
-        const loopbackDelay = Date.now() - sendTs;
-        setLastDelay(loopbackDelay);
-        delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), loopbackDelay];
+        // Measure delay after the event loop processes the send (captures
+        // real serialization + WebSocket write time, not synchronous 0).
+        setTimeout(() => {
+            const delay = Date.now() - sendTs;
+            setLastDelay(delay);
+            delayHistoryRef.current = [...delayHistoryRef.current.slice(-29), delay];
+        }, 0);
+    }, [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
@@ -142,10 +175,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 +222,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'}