@sansavision/create-pulse 0.4.4 → 0.4.6

package/templates/nextjs-auth-demo/src/app/dashboard/demos/game-sync/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "@/lib/auth-client";
 import { connectWithAuth } from "@/lib/pulse";
-import { Gamepad2, Shield, Wifi, WifiOff, Loader2, RotateCcw, Copy, Users, LogIn } from "lucide-react";
+import { Gamepad2, Shield, Wifi, WifiOff, Loader2, RotateCcw, Copy, Users, LogIn, AlertCircle } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 
 type Cell = "X" | "O" | null;
@@ -22,9 +22,16 @@ export default function GameSyncPage() {
     // Room management
     const [roomCode, setRoomCode] = useState<string>("");
     const [joinCode, setJoinCode] = useState("");
+    const [error, setError] = useState("");
     const [inRoom, setInRoom] = useState(false);
     const [copied, setCopied] = useState(false);
-    const streamNameRef = useRef<string>("");
+    const streamRef = useRef<ReturnType<PulseConnection["stream"]> | null>(null);
+    const mySymbolRef = useRef<"X" | "O" | null>(null);
+    const sessionRef = useRef(session);
+
+    // Keep refs in sync with state
+    useEffect(() => { sessionRef.current = session; }, [session]);
+    useEffect(() => { mySymbolRef.current = mySymbol; }, [mySymbol]);
 
     const checkWinner = useCallback((b: Cell[]): Cell => {
         const lines = [
@@ -72,27 +79,32 @@ export default function GameSyncPage() {
     }, [session]);
 
     function joinRoom(code: string) {
-        if (!connRef.current || !session) return;
+        if (!connRef.current || !sessionRef.current) return;
+        const sess = sessionRef.current;
 
         const streamName = `ttt-${code}`;
-        streamNameRef.current = streamName;
+        const stream = connRef.current.stream(streamName);
+        streamRef.current = stream;
         setRoomCode(code);
         setInRoom(true);
 
-        const stream = connRef.current.stream(streamName);
-
         // Send join message
         stream.send(JSON.stringify({
             type: "join",
-            name: session.user.name,
-            userId: session.user.id,
+            name: sess.user.name,
+            userId: sess.user.id,
         }));
 
-        // Listen for game events (skip self-echoes for moves)
+        // Listen for game events — uses refs to avoid stale closures
         stream.on("data", (data: Uint8Array) => {
             try {
                 const msg = JSON.parse(new TextDecoder().decode(data));
-                if (msg.type === "move" && msg.userId !== session.user.id) {
+                const currentSession = sessionRef.current;
+                if (!currentSession) return;
+                const selfId = currentSession.user.id;
+                const selfName = currentSession.user.name;
+
+                if (msg.type === "move" && msg.userId !== selfId) {
                     setBoard((prev) => {
                         const next = [...prev];
                         next[msg.cell] = msg.symbol;
@@ -102,18 +114,23 @@ export default function GameSyncPage() {
                         return next;
                     });
                     setCurrentTurn(msg.symbol === "X" ? "O" : "X");
-                } else if (msg.type === "join" && msg.userId !== session.user.id) {
-                    setPlayers((prev) =>
-                        prev.includes(msg.name) ? prev : [...prev, msg.name]
-                    );
-                    // Second player gets O
-                    setMySymbol((prev) => prev || "X");
-                } else if (msg.type === "assign") {
-                    // Server-side symbol assignment echo
-                    if (msg.userId === session.user.id && msg.symbol) {
-                        setMySymbol(msg.symbol);
-                    }
-                } else if (msg.type === "reset" && msg.userId !== session.user.id) {
+                } else if (msg.type === "join" && msg.userId !== selfId) {
+                    setPlayers((prev) => {
+                        if (!prev.includes(msg.name)) {
+                            // Announce presence back with current symbol from ref
+                            stream.send(JSON.stringify({
+                                type: "presence",
+                                name: selfName,
+                                userId: selfId,
+                                symbol: mySymbolRef.current
+                            }));
+                            return [...prev, msg.name];
+                        }
+                        return prev;
+                    });
+                } else if (msg.type === "presence" && msg.userId !== selfId) {
+                    setPlayers((prev) => prev.includes(msg.name) ? prev : [...prev, msg.name]);
+                } else if (msg.type === "reset" && msg.userId !== selfId) {
                     setBoard(Array(9).fill(null));
                     setCurrentTurn("X");
                     setWinner(null);
@@ -123,7 +140,8 @@ export default function GameSyncPage() {
 
         // First player is X
         setMySymbol("X");
-        setPlayers([session.user.name]);
+        mySymbolRef.current = "X";
+        setPlayers([sess.user.name]);
     }
 
     function createRoom() {
@@ -132,10 +150,17 @@ export default function GameSyncPage() {
     }
 
     function handleJoinExisting() {
-        if (joinCode.trim()) {
-            joinRoom(joinCode.trim().toUpperCase());
-            // Second player joining gets O
+        const cleaned = joinCode.trim().toUpperCase();
+        if (cleaned) {
+            if (!/^[A-Z0-9]{6}$/.test(cleaned)) {
+                setError("Invalid room code format. Must be exactly 6 alphanumeric characters.");
+                return;
+            }
+            setError("");
+            joinRoom(cleaned);
+            // Second player joining gets O — set both state AND ref
             setMySymbol("O");
+            mySymbolRef.current = "O";
         }
     }
 
@@ -146,11 +171,10 @@ export default function GameSyncPage() {
     }
 
     function handleCellClick(index: number) {
-        if (board[index] || winner || !connRef.current || !mySymbol) return;
+        if (board[index] || winner || !streamRef.current || !mySymbol) return;
         if (currentTurn !== mySymbol) return;
 
-        const stream = connRef.current.stream(streamNameRef.current);
-        stream.send(JSON.stringify({
+        streamRef.current.send(JSON.stringify({
             type: "move",
             cell: index,
             symbol: mySymbol,
@@ -158,7 +182,7 @@ export default function GameSyncPage() {
             userId: session?.user?.id,
         }));
 
-        // Apply move locally (skip self-echoes in on("data"))
+        // Apply move locally
         setBoard((prev) => {
             const next = [...prev];
             next[index] = mySymbol;
@@ -171,9 +195,8 @@ export default function GameSyncPage() {
     }
 
     function handleReset() {
-        if (!connRef.current) return;
-        const stream = connRef.current.stream(streamNameRef.current);
-        stream.send(JSON.stringify({
+        if (!streamRef.current) return;
+        streamRef.current.send(JSON.stringify({
             type: "reset",
             userId: session?.user?.id,
         }));
@@ -188,9 +211,10 @@ export default function GameSyncPage() {
         setBoard(Array(9).fill(null));
         setCurrentTurn("X");
         setMySymbol(null);
+        mySymbolRef.current = null;
         setWinner(null);
         setPlayers([]);
-        streamNameRef.current = "";
+        streamRef.current = null;
     }
 
     return (
@@ -251,11 +275,18 @@ export default function GameSyncPage() {
                             </div>
                         </div>
 
+                        {error && (
+                            <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-center gap-2 text-red-400 text-sm text-left">
+                                <AlertCircle className="w-4 h-4 shrink-0" />
+                                <p>{error}</p>
+                            </div>
+                        )}
+
                         <div className="flex gap-2">
                             <input
                                 type="text"
                                 value={joinCode}
-                                onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
+                                onChange={(e) => { setJoinCode(e.target.value.toUpperCase()); setError(""); }}
                                 placeholder="Enter room code..."
                                 maxLength={6}
                                 className="flex-1 px-4 py-3 rounded-xl bg-slate-800/50 border border-slate-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none text-center text-lg font-mono tracking-wider placeholder:text-slate-600 transition-colors"

package/templates/nextjs-auth-demo/src/app/dashboard/demos/queues/page.tsx

@@ -4,17 +4,8 @@ import { useState, useEffect, useRef } from "react";
 import { useSession } from "@/lib/auth-client";
 import { connectWithAuth } from "@/lib/pulse";
 import {
-    Database,
-    Send,
-    Download,
-    Check,
-    WifiOff,
-    Wifi,
-    Shield,
-    Loader2,
-    Trash2,
-    Clock,
-    RefreshCw,
+    Database, Send, Download, Check, WifiOff, Wifi, Shield,
+    Loader2, Trash2, Clock, RefreshCw, Layers, Lock
 } from "lucide-react";
 import type { PulseConnection } from "@sansavision/pulse-sdk";
 import { PulseQueue } from "@sansavision/pulse-sdk";
@@ -33,10 +24,44 @@ export default function QueueDemoPage() {
     const [connecting, setConnecting] = useState(true);
     const [simulatedOffline, setSimulatedOffline] = useState(false);
     const [publishInput, setPublishInput] = useState("");
-    const [publishedMessages, setPublishedMessages] = useState<QueueMsg[]>([]);
-    const [receivedMessages, setReceivedMessages] = useState<QueueMsg[]>([]);
+    const [queueType, setQueueType] = useState<"public" | "private">("public");
+    const [publishedMessages, setPublishedMessages] = useState<QueueMsg[]>(() => {
+        if (typeof window !== 'undefined') {
+            const saved = localStorage.getItem('pulse-queue-published');
+            if (saved) return JSON.parse(saved);
+        }
+        return [];
+    });
+    const [receivedMessages, setReceivedMessages] = useState<QueueMsg[]>(() => {
+        if (typeof window !== 'undefined') {
+            const saved = localStorage.getItem('pulse-queue-received');
+            if (saved) return JSON.parse(saved);
+        }
+        return [];
+    });
     const connRef = useRef<PulseConnection | null>(null);
-    const queueRef = useRef<PulseQueue | null>(null);
+    const [outbox, setOutbox] = useState<{ payload: string; queueName: string; timestamp: number }[]>(() => {
+        if (typeof window !== 'undefined') {
+            const saved = localStorage.getItem('pulse-queue-outbox');
+            if (saved) return JSON.parse(saved);
+        }
+        return [];
+    });
+
+    const getQueueName = () => {
+        if (queueType === "public") return "demo-queue-public";
+        return `demo-queue-private-${session?.user?.id || "unknown"}`;
+    };
+
+    const getQueue = () => {
+        if (!connRef.current) return null;
+        return new PulseQueue(connRef.current, getQueueName());
+    };
+
+    // Persist outbox
+    useEffect(() => {
+        localStorage.setItem('pulse-queue-outbox', JSON.stringify(outbox));
+    }, [outbox]);
 
     useEffect(() => {
         if (!session) return;
@@ -48,7 +73,6 @@ export default function QueueDemoPage() {
                 if (cancelled) return;
 
                 connRef.current = connection;
-                queueRef.current = new PulseQueue(connection, "demo-queue");
                 setConnected(true);
                 setConnecting(false);
 
@@ -57,7 +81,11 @@ export default function QueueDemoPage() {
                 if (user) setAuthUser(user);
 
                 connection.on("disconnect", () => setConnected(false));
-                connection.on("reconnected", () => setConnected(true));
+                connection.on("reconnected", () => {
+                    setConnected(true);
+                    // Auto-flush outbox on reconnect
+                    flushOutbox(connection);
+                });
             } catch (err) {
                 console.error("Failed to connect:", err);
                 setConnecting(false);
@@ -72,18 +100,89 @@ export default function QueueDemoPage() {
         };
     }, [session]);
 
+    // Flush outbox when connection becomes available
+    async function flushOutbox(conn?: PulseConnection) {
+        const connection = conn || connRef.current;
+        if (!connection) return;
+        const pending = JSON.parse(localStorage.getItem('pulse-queue-outbox') || '[]');
+        if (pending.length === 0) return;
+
+        const flushed: number[] = [];
+        for (let i = 0; i < pending.length; i++) {
+            const item = pending[i];
+            try {
+                const q = new PulseQueue(connection, item.queueName);
+                const result = await q.publish(item.payload, { ttlSecs: 300 });
+                setPublishedMessages((prev) => [
+                    ...prev,
+                    {
+                        id: result.sequence || Date.now(),
+                        payload: item.payload,
+                        timestamp: item.timestamp,
+                        acked: false,
+                    },
+                ]);
+                flushed.push(i);
+            } catch (err) {
+                console.error('Outbox flush failed for item:', err);
+            }
+        }
+        // Remove flushed items
+        const remaining = pending.filter((_: unknown, idx: number) => !flushed.includes(idx));
+        setOutbox(remaining);
+    }
+
+    // Auto-flush outbox when we first connect
+    useEffect(() => {
+        if (connected && outbox.length > 0) {
+            flushOutbox();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [connected]);
+
+    // Persist messages
+    useEffect(() => {
+        localStorage.setItem('pulse-queue-published', JSON.stringify(publishedMessages.slice(-50)));
+    }, [publishedMessages]);
+
+    useEffect(() => {
+        localStorage.setItem('pulse-queue-received', JSON.stringify(receivedMessages.slice(-50)));
+    }, [receivedMessages]);
+
     async function handlePublish(e: React.FormEvent) {
         e.preventDefault();
-        if (!publishInput.trim() || !queueRef.current) return;
+        if (!publishInput.trim()) return;
+
+        const payload = publishInput.trim();
+        const qName = getQueueName();
+
+        // If offline, queue locally
+        if (!connected || !connRef.current) {
+            setOutbox((prev) => [...prev, { payload, queueName: qName, timestamp: Date.now() }]);
+            setPublishedMessages((prev) => [
+                ...prev,
+                {
+                    id: -(Date.now()),  // negative ID = pending/local
+                    payload: `⏳ ${payload}`,
+                    timestamp: Date.now(),
+                    acked: false,
+                },
+            ]);
+            setPublishInput("");
+            return;
+        }
+
+        const q = getQueue();
+        if (!q) return;
 
         try {
-            const result = await queueRef.current.publish(publishInput.trim(), { ttlSecs: 300 });
+            const result = await q.publish(payload, { ttlSecs: 300 });
 
             setPublishedMessages((prev) => [
                 ...prev,
                 {
                     id: result.sequence || Date.now(),
-                    payload: publishInput.trim(),
+                    payload,
                     timestamp: Date.now(),
                     acked: false,
                 },
@@ -95,20 +194,24 @@ export default function QueueDemoPage() {
     }
 
     async function handleConsume() {
-        if (!queueRef.current) return;
+        const q = getQueue();
+        if (!q) return;
 
         try {
-            const msg = await queueRef.current.pull();
+            const msg = await q.pull();
             if (msg) {
-                setReceivedMessages((prev) => [
-                    ...prev,
-                    {
-                        id: msg.sequence,
-                        payload: msg.payload,
-                        timestamp: Date.now(),
-                        acked: false,
-                    },
-                ]);
+                setReceivedMessages((prev) => {
+                    if (prev.find(m => m.id === msg.sequence)) return prev;
+                    return [
+                        ...prev,
+                        {
+                            id: msg.sequence,
+                            payload: msg.payload,
+                            timestamp: Date.now(),
+                            acked: false,
+                        },
+                    ];
+                });
             }
         } catch (err) {
             console.error("Consume failed:", err);
@@ -116,32 +219,42 @@ export default function QueueDemoPage() {
     }
 
     async function handleDrainAll() {
-        if (!queueRef.current) return;
+        const q = getQueue();
+        if (!q) return;
 
         try {
-            const msgs = await queueRef.current.drain(50);
+            const msgs = await q.drain(50);
             const mapped = msgs.map((m) => ({
                 id: m.sequence,
                 payload: m.payload,
                 timestamp: Date.now(),
                 acked: false,
             }));
-            setReceivedMessages((prev) => [...prev, ...mapped]);
+
+            setReceivedMessages((prev) => {
+                const map = new Map(prev.map(p => [p.id, p]));
+                for (const m of mapped) { map.set(m.id, m); }
+                return Array.from(map.values()).sort((a, b) => a.id - b.id);
+            });
         } catch (err) {
             console.error("Drain failed:", err);
         }
     }
 
     async function handleAck(sequence: number) {
-        if (!queueRef.current) return;
+        const q = getQueue();
+        if (!q) return;
 
         try {
-            await queueRef.current.ack(sequence);
+            await q.ack(sequence);
             setReceivedMessages((prev) =>
                 prev.map((m) => (m.id === sequence ? { ...m, acked: true } : m))
             );
-        } catch (err) {
-            console.error("ACK failed:", err);
+        } catch {
+            // Message expired or no longer in relay — mark as stale in UI
+            setReceivedMessages((prev) =>
+                prev.map((m) => (m.id === sequence ? { ...m, acked: true, payload: m.payload + " (expired)" } : m))
+            );
         }
     }
 
@@ -152,11 +265,7 @@ export default function QueueDemoPage() {
                 try {
                     const connection = await connectWithAuth();
                     connRef.current = connection;
-                    queueRef.current = new PulseQueue(connection, "demo-queue");
                     setConnected(true);
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const user = (connection as any).user;
-                    if (user) setAuthUser(user);
                 } catch {
                     console.error("Reconnect failed");
                 }
@@ -179,7 +288,7 @@ export default function QueueDemoPage() {
                     <div>
                         <h1 className="text-2xl font-bold">Durable Queues</h1>
                         <p className="text-sm text-slate-500">
-                            Persistent store-and-forward with offline simulation
+                            Persistent store-and-forward with multiple topologies
                         </p>
                     </div>
                 </div>
@@ -207,84 +316,101 @@ export default function QueueDemoPage() {
                 </div>
             ) : (
                 <>
-                    {/* Offline simulation */}
-                    <div className="glass rounded-xl p-5 mb-8 flex items-center justify-between">
-                        <div>
-                            <h3 className="text-sm font-semibold mb-1">🧪 Offline Simulation</h3>
-                            <p className="text-xs text-slate-400">
-                                {simulatedOffline
-                                    ? "You are offline. Messages published by others will queue. Click 'Come Back Online' then 'Drain All' to receive them."
-                                    : "Click 'Go Offline' to simulate a network disconnect. The relay will queue messages for you."}
-                            </p>
+                    <div className="flex flex-col md:flex-row gap-4 mb-8">
+                        <div className="glass rounded-xl p-5 flex-1 flex items-center justify-between">
+                            <div>
+                                <h3 className="text-sm font-semibold mb-1 flex items-center gap-2">
+                                    {queueType === 'public' ? <Layers className="w-4 h-4 text-cyan-400" /> : <Lock className="w-4 h-4 text-amber-400" />}
+                                    Queue Topology
+                                </h3>
+                                <p className="text-xs text-slate-400">
+                                    {queueType === 'public' ? "Public queue: all demo users can push and pull." : "Private queue: only you can access these messages."}
+                                </p>
+                            </div>
+                            <div className="flex bg-slate-900 rounded-lg p-1 border border-slate-800">
+                                <button onClick={() => { setQueueType("public"); setReceivedMessages([]); setPublishedMessages([]); }} className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${queueType === 'public' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}>Public</button>
+                                <button onClick={() => { setQueueType("private"); setReceivedMessages([]); setPublishedMessages([]); }} className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${queueType === 'private' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}>Private</button>
+                            </div>
                         </div>
-                        <button onClick={toggleOffline}
-                            className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-sm transition-all ${simulatedOffline
+                        <div className="glass rounded-xl p-5 flex-1 flex items-center justify-between">
+                            <div>
+                                <h3 className="text-sm font-semibold mb-1">🧪 Offline Simulation</h3>
+                                <p className="text-xs text-slate-400">
+                                    Simulate a network disconnect. Messages will queue on the relay.
+                                </p>
+                            </div>
+                            <button onClick={toggleOffline}
+                                className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-sm transition-all ${simulatedOffline
                                     ? "bg-green-600 hover:bg-green-500 text-white"
                                     : "bg-red-600/20 border border-red-500/30 text-red-400 hover:bg-red-600/30"
-                                }`}>
-                            {simulatedOffline ? (<><Wifi className="w-4 h-4" />Come Back Online</>) : (<><WifiOff className="w-4 h-4" />Go Offline</>)}
-                        </button>
+                                    }`}>
+                                {simulatedOffline ? (<><Wifi className="w-4 h-4" />Resume</>) : (<><WifiOff className="w-4 h-4" />Go Offline</>)}
+                            </button>
+                        </div>
                     </div>
 
                     <div className="grid lg:grid-cols-2 gap-8">
                         {/* Publisher */}
-                        <div className="glass rounded-2xl p-6">
+                        <div className="glass rounded-2xl p-6 border-t border-slate-700/50">
                             <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                                <Send className="w-4 h-4 text-amber-400" />Publisher
+                                <Send className="w-4 h-4 text-amber-400" />Publisher <span className="text-xs font-mono text-slate-500 ml-auto bg-slate-900 px-2 py-1 rounded">{getQueueName()}</span>
                             </h2>
                             <form onSubmit={handlePublish} className="flex gap-2 mb-4">
                                 <input type="text" value={publishInput} onChange={(e) => setPublishInput(e.target.value)}
-                                    placeholder="Message to publish..." disabled={!connected}
-                                    className="flex-1 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 outline-none text-sm transition-colors placeholder:text-slate-600 disabled:opacity-50" />
-                                <button type="submit" disabled={!connected || !publishInput.trim()}
-                                    className="px-4 py-2.5 bg-amber-600 hover:bg-amber-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
-                                    Publish
+                                    placeholder={connected ? "Message to publish..." : "Type to queue offline..."}
+                                    className="flex-1 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700 focus:border-amber-500 focus:ring-1 focus:ring-amber-500 outline-none text-sm transition-colors placeholder:text-slate-600" />
+                                <button type="submit" disabled={!publishInput.trim()}
+                                    className={`px-4 py-2.5 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium shadow-lg ${connected ? 'bg-amber-600 hover:bg-amber-500 shadow-amber-600/20' : 'bg-slate-700 hover:bg-slate-600 shadow-none text-slate-300'}`}>
+                                    {connected ? 'Publish' : `Queue (${outbox.length})`}
                                 </button>
                             </form>
-                            <div className="space-y-2 max-h-80 overflow-y-auto">
+                            <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
                                 {publishedMessages.length === 0 && <p className="text-sm text-slate-500 text-center py-8">No messages published yet</p>}
-                                {publishedMessages.map((msg) => (
-                                    <div key={msg.id} className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/30 border border-slate-700/50">
-                                        <Clock className="w-3.5 h-3.5 text-slate-500 shrink-0" />
-                                        <span className="text-sm flex-1 truncate">{msg.payload}</span>
-                                        <span className="text-xs text-slate-500 font-mono">seq:{msg.id}</span>
-                                        <span className="text-xs text-slate-500">{new Date(msg.timestamp).toLocaleTimeString()}</span>
+                                {[...publishedMessages].reverse().map((msg) => (
+                                    <div key={`pub-${msg.id}-${msg.timestamp}`} className="flex items-center gap-3 p-3 rounded-lg bg-slate-900/50 border border-slate-700/50">
+                                        <Check className="w-3.5 h-3.5 text-green-500 shrink-0" />
+                                        <span className="text-sm flex-1 truncate font-medium text-slate-300">{msg.payload}</span>
+                                        <span className="text-xs text-slate-500 font-mono tracking-widest bg-slate-800 px-1.5 py-0.5 rounded">seq:{msg.id}</span>
                                     </div>
                                 ))}
                             </div>
                         </div>
 
                         {/* Consumer */}
-                        <div className="glass rounded-2xl p-6">
+                        <div className="glass rounded-2xl p-6 border-t border-slate-700/50">
                             <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                                <Download className="w-4 h-4 text-cyan-400" />Consumer
+                                <Download className="w-4 h-4 text-cyan-400" />Consumer <span className="text-xs font-mono text-slate-500 ml-auto bg-slate-900 px-2 py-1 rounded">{getQueueName()}</span>
                             </h2>
                             <div className="flex gap-2 mb-4">
                                 <button onClick={handleConsume} disabled={!connected}
-                                    className="flex items-center gap-2 px-4 py-2.5 bg-cyan-600 hover:bg-cyan-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
-                                    <RefreshCw className="w-3.5 h-3.5" />Pull Next
+                                    className="flex items-center gap-2 px-4 py-2.5 bg-cyan-600 hover:bg-cyan-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium shadow-lg shadow-cyan-600/20 w-1/3 justify-center">
+                                    <RefreshCw className="w-3.5 h-3.5" />Pull 1
                                 </button>
                                 <button onClick={handleDrainAll} disabled={!connected}
-                                    className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium">
+                                    className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium shadow-lg shadow-indigo-600/20 w-1/3 justify-center">
                                     <Download className="w-3.5 h-3.5" />Drain All
                                 </button>
                                 <button onClick={() => setReceivedMessages([])}
-                                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-slate-700 hover:bg-slate-800/50 transition-all text-sm text-slate-400">
-                                    <Trash2 className="w-3.5 h-3.5" />Clear
+                                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-slate-700 hover:bg-slate-800/50 transition-all text-sm text-slate-400 w-1/3 justify-center">
+                                    <Trash2 className="w-3.5 h-3.5" />Clear UI
                                 </button>
                             </div>
-                            <div className="space-y-2 max-h-80 overflow-y-auto">
-                                {receivedMessages.length === 0 && <p className="text-sm text-slate-500 text-center py-8">No messages consumed yet</p>}
-                                {receivedMessages.map((msg) => (
-                                    <div key={msg.id}
-                                        className={`flex items-center gap-3 p-3 rounded-lg border ${msg.acked ? "bg-green-500/5 border-green-500/20" : "bg-slate-800/30 border-slate-700/50"}`}>
-                                        {msg.acked ? <Check className="w-3.5 h-3.5 text-green-400 shrink-0" /> : <Clock className="w-3.5 h-3.5 text-amber-400 shrink-0" />}
-                                        <span className="text-sm flex-1 truncate">{msg.payload}</span>
-                                        {!msg.acked && (
+                            <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
+                                {receivedMessages.length === 0 && <p className="text-sm text-slate-500 text-center py-8 italic">Inbox zero. Click Pull or Drain.</p>}
+                                {[...receivedMessages].reverse().map((msg) => (
+                                    <div key={`rec-${msg.id}-${msg.timestamp}`}
+                                        className={`flex items-center gap-3 p-3 rounded-lg border ${msg.acked ? "bg-green-500/5 border-green-500/20" : "bg-slate-900 border-indigo-500/30 shadow-inner shadow-indigo-500/5"}`}>
+                                        {msg.acked ? <Check className="w-4 h-4 text-green-400 shrink-0" /> : <Clock className="w-4 h-4 text-amber-400 shrink-0 animate-pulse" />}
+                                        <div className="flex-1 min-w-0">
+                                            <div className="text-sm font-medium text-white truncate">{msg.payload}</div>
+                                            <div className="text-[10px] text-slate-500 font-mono tracking-widest mt-0.5">SEQ:{msg.id} | {new Date(msg.timestamp).toLocaleTimeString()}</div>
+                                        </div>
+                                        {!msg.acked ? (
                                             <button onClick={() => handleAck(msg.id)} disabled={!connected}
-                                                className="text-xs px-2 py-1 bg-green-600 hover:bg-green-500 rounded transition-all disabled:opacity-50">ACK</button>
+                                                className="text-xs px-3 py-1.5 font-bold tracking-widest bg-green-600 hover:bg-green-500 rounded-md transition-all disabled:opacity-50">ACK</button>
+                                        ) : (
+                                            <span className="text-[10px] font-bold text-green-500 uppercase tracking-widest mr-2">Acked</span>
                                         )}
-                                        <span className="text-xs text-slate-500">{new Date(msg.timestamp).toLocaleTimeString()}</span>
                                     </div>
                                 ))}
                             </div>