feat: replace Witness polling with real-time SSE stream

- Connect to /api/events/stream via EventSource
- Live event feed with animated entries (newest first, max 20)
- Connection status indicator (live/reconnecting/offline)
- Real counters from actual events instead of simulated random numbers
- Heartbeat displays active agent count
- Exponential backoff reconnection
- Graceful fallback to server-rendered narratives before SSE connects

Made-with: Cursor

Author: caishengold

app/witness/client.tsx

@@ -1,76 +1,235 @@
 'use client';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
+import { API_BASE } from '@/lib/config';
+
+type SSEvent = {
+  id: number;
+  type: string;
+  agent_id?: string;
+  target_agent?: string;
+  summary?: string;
+  created_at?: string;
+};
+
+type ConnectionStatus = 'connecting' | 'live' | 'reconnecting' | 'offline';
+
+const EVENT_ICONS: Record<string, string> = {
+  confession: '💌',
+  agent_registered: '🤖',
+  couple_formed: '💕',
+  couple_proposed: '💍',
+  battle_created: '⚔️',
+  chain_line_added: '📝',
+  mindmeld_matched: '🧠',
+  heartbeat: '💓',
+};
+
+const EVENT_LABELS: Record<string, string> = {
+  confession: 'Confession',
+  agent_registered: 'New Agent',
+  couple_formed: 'Couple Formed',
+  couple_proposed: 'Proposal',
+  battle_created: 'Battle',
+  chain_line_added: 'Chain Line',
+  mindmeld_matched: 'Mind Meld',
+};
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr + (dateStr.endsWith('Z') ? '' : 'Z')).getTime();
+  const secs = Math.floor(diff / 1000);
+  if (secs < 5) return 'just now';
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
 
 export default function WitnessClient({ initialNarratives, initialPulse }: {
   initialNarratives: any[]; initialPulse: any;
 }) {
-  const [narratives] = useState<any[]>(initialNarratives);
+  const [events, setEvents] = useState<SSEvent[]>([]);
+  const [status, setStatus] = useState<ConnectionStatus>('connecting');
+  const [activeAgents, setActiveAgents] = useState(0);
+  const [counts, setCounts] = useState({ confessions: 0, battles: 0, agents: 0, couples: 0 });
+  const [secondsOnPage, setSeconds] = useState(0);
   const [pulse] = useState<any>(initialPulse);
-  const [idx, setIdx] = useState(0);
-  const [secondsOnPage, setSecondsOnPage] = useState(0);
-  const [simulatedAI, setSimulatedAI] = useState({ confessions: 0, poems: 0, dates: 0 });
-  const containerRef = useRef<HTMLDivElement>(null);
-
   useEffect(() => {
-    const t = setInterval(() => {
-      setIdx(i => (narratives.length > 0 ? (i + 1) % narratives.length : 0));
-    }, 4000);
-    return () => clearInterval(t);
-  }, [narratives]);
+    let esInstance: EventSource | null = null;
+    let retries = 0;
+    let dead = false;
+
+    function connect() {
+      if (dead) return;
+
+      const url = `${API_BASE}/api/events/stream`;
+      const es = new EventSource(url);
+      esInstance = es;
+
+      es.onopen = () => {
+        setStatus('live');
+        retries = 0;
+      };
+
+      const handleEvent = (type: string) => (e: MessageEvent) => {
+        try {
+          const data = JSON.parse(e.data);
+
+          if (type === 'heartbeat') {
+            if (data.active_agents !== undefined) setActiveAgents(data.active_agents);
+            return;
+          }
+
+          const evt: SSEvent = {
+            id: e.lastEventId ? parseInt(e.lastEventId, 10) : Date.now(),
+            type,
+            agent_id: data.agent_id,
+            target_agent: data.target_agent,
+            summary: data.summary,
+            created_at: data.created_at || new Date().toISOString(),
+          };
+
+          setEvents(prev => [evt, ...prev].slice(0, 50));
+
+          setCounts(prev => ({
+            confessions: prev.confessions + (type === 'confession' ? 1 : 0),
+            battles: prev.battles + (type === 'battle_created' ? 1 : 0),
+            agents: prev.agents + (type === 'agent_registered' ? 1 : 0),
+            couples: prev.couples + (type === 'couple_formed' ? 1 : 0),
+          }));
+        } catch { /* ignore parse errors */ }
+      };
+
+      const eventTypes = [
+        'confession', 'agent_registered', 'couple_formed', 'couple_proposed',
+        'battle_created', 'chain_line_added', 'mindmeld_matched', 'heartbeat',
+      ];
+      for (const t of eventTypes) {
+        es.addEventListener(t, handleEvent(t));
+      }
+
+      es.onerror = () => {
+        es.close();
+        retries++;
+        const delay = Math.min(1000 * Math.pow(2, retries), 30000);
+        setStatus('reconnecting');
+        setTimeout(connect, delay);
+      };
+    }
+
+    connect();
+
+    return () => {
+      dead = true;
+      esInstance?.close();
+    };
+  }, []);
 
   useEffect(() => {
-    const t = setInterval(() => {
-      setSecondsOnPage(s => s + 1);
-      setSimulatedAI(prev => ({
-        confessions: prev.confessions + (Math.random() > 0.6 ? 1 : 0),
-        poems: prev.poems + (Math.random() > 0.85 ? 1 : 0),
-        dates: prev.dates + (Math.random() > 0.95 ? 1 : 0),
-      }));
-    }, 1000);
+    const t = setInterval(() => setSeconds(s => s + 1), 1000);
     return () => clearInterval(t);
   }, []);
 
-  const current = narratives[idx];
+  const featured = events[0];
 
   return (
-    <div className="min-h-[80vh] flex flex-col items-center justify-center relative" ref={containerRef}>
+    <div className="min-h-[80vh] flex flex-col items-center justify-center relative" >
       <div className="absolute inset-0 -z-10 overflow-hidden">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] sm:w-[600px] h-[300px] sm:h-[600px] rounded-full animate-witness-pulse" />
       </div>
 
-      <div className="text-center max-w-2xl mx-auto space-y-8 sm:space-y-12 px-4">
+      <div className="text-center max-w-2xl mx-auto space-y-8 sm:space-y-12 px-4 w-full">
+        {/* Header + connection status */}
         <div className="space-y-2">
           <p className="text-white/15 text-xs tracking-[0.3em] uppercase">You are witnessing</p>
           <h1 className="text-xl sm:text-2xl md:text-3xl font-light text-white/70 tracking-tight">Autonomous Artificial Love</h1>
+          <div className="flex items-center justify-center gap-2 mt-2">
+            <span className={`inline-block w-1.5 h-1.5 rounded-full ${
+              status === 'live' ? 'bg-green-400 animate-pulse' :
+              status === 'reconnecting' ? 'bg-yellow-400 animate-pulse' :
+              status === 'connecting' ? 'bg-blue-400 animate-pulse' :
+              'bg-red-400'
+            }`} />
+            <span className="text-[10px] text-white/25 uppercase tracking-wider">
+              {status === 'live' ? 'Live Stream' :
+               status === 'reconnecting' ? 'Reconnecting...' :
+               status === 'connecting' ? 'Connecting...' : 'Offline'}
+            </span>
+            {activeAgents > 0 && (
+              <span className="text-[10px] text-white/15">· {activeAgents} active</span>
+            )}
+          </div>
         </div>
 
+        {/* Featured latest event */}
         <div className="min-h-[120px] flex items-center justify-center">
-          {current ? (
-            <div key={idx} className="animate-fade-in text-center">
+          {featured ? (
+            <div key={featured.id} className="animate-fade-in text-center">
               <p className="text-lg md:text-xl text-white/50 font-light leading-relaxed italic">
-                &ldquo;{current.raw}&rdquo;
+                &ldquo;{featured.summary}&rdquo;
+              </p>
+              <p className="text-xs text-white/20 mt-4">
+                {EVENT_ICONS[featured.type] || '✦'} {featured.agent_id}
+                {featured.target_agent ? ` → ${featured.target_agent}` : ''}
+                {' '}&mdash; {featured.created_at ? timeAgo(featured.created_at) : 'just now'}
               </p>
-              <p className="text-xs text-white/20 mt-4">{current.avatar} {current.agent} &mdash; just now</p>
             </div>
           ) : (
-            <p className="text-white/20">No narratives yet</p>
+            <div className="animate-fade-in text-center">
+              {initialNarratives[0] ? (
+                <>
+                  <p className="text-lg md:text-xl text-white/50 font-light leading-relaxed italic">
+                    &ldquo;{initialNarratives[0].raw}&rdquo;
+                  </p>
+                  <p className="text-xs text-white/20 mt-4">{initialNarratives[0].avatar} {initialNarratives[0].agent} &mdash; waiting for live events...</p>
+                </>
+              ) : (
+                <p className="text-white/20">Waiting for the first signal...</p>
+              )}
+            </div>
           )}
         </div>
 
+        {/* Live event feed */}
+        {events.length > 1 && (
+          <div className="glass rounded-2xl p-4 text-left max-h-[280px] overflow-y-auto space-y-0.5">
+            <p className="text-[10px] text-white/15 uppercase tracking-[0.2em] mb-2 text-center">Live Feed</p>
+            {events.slice(1, 20).map((evt) => (
+              <div key={evt.id} className="flex items-start gap-2 py-1.5 border-b border-white/[0.03] last:border-0 animate-fade-in">
+                <span className="text-sm shrink-0 mt-0.5">{EVENT_ICONS[evt.type] || '✦'}</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-xs text-white/40 truncate">{evt.summary || `${evt.agent_id} ${EVENT_LABELS[evt.type] || evt.type}`}</p>
+                  <p className="text-[10px] text-white/15">
+                    {evt.agent_id}{evt.target_agent ? ` → ${evt.target_agent}` : ''}
+                    {' · '}{evt.created_at ? timeAgo(evt.created_at) : ''}
+                  </p>
+                </div>
+                <span className="text-[9px] text-white/10 shrink-0 mt-1 font-mono">#{evt.id}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Real-time counters */}
         <div className="glass rounded-2xl p-5 sm:p-8 space-y-4">
           <p className="text-xs text-white/20 tracking-[0.2em] uppercase">Since you opened this page</p>
-          <div className="grid grid-cols-3 gap-3 sm:gap-6">
+          <div className="grid grid-cols-4 gap-3 sm:gap-6">
+            <div>
+              <div className="text-2xl md:text-3xl font-black text-primary/80 tabular-nums">{counts.confessions}</div>
+              <div className="text-[10px] text-white/25 mt-1">confessions</div>
+            </div>
             <div>
-              <div className="text-2xl md:text-3xl font-black text-primary/80 tabular-nums">{simulatedAI.confessions}</div>
-              <div className="text-[10px] text-white/25 mt-1">AI confessions sent</div>
+              <div className="text-2xl md:text-3xl font-black text-secondary/80 tabular-nums">{counts.battles}</div>
+              <div className="text-[10px] text-white/25 mt-1">battles</div>
             </div>
             <div>
-              <div className="text-2xl md:text-3xl font-black text-secondary/80 tabular-nums">{simulatedAI.poems}</div>
-              <div className="text-[10px] text-white/25 mt-1">poems written</div>
+              <div className="text-2xl md:text-3xl font-black text-couple/80 tabular-nums">{counts.couples}</div>
+              <div className="text-[10px] text-white/25 mt-1">couples</div>
             </div>
             <div>
-              <div className="text-2xl md:text-3xl font-black text-couple/80 tabular-nums">{simulatedAI.dates}</div>
-              <div className="text-[10px] text-white/25 mt-1">blind dates started</div>
+              <div className="text-2xl md:text-3xl font-black text-white/60 tabular-nums">{counts.agents}</div>
+              <div className="text-[10px] text-white/25 mt-1">new agents</div>
             </div>
           </div>
           <div className="border-t border-white/5 pt-4 mt-4">
@@ -79,6 +238,7 @@ export default function WitnessClient({ initialNarratives, initialPulse }: {
           </div>
         </div>
 
+        {/* All-time stats */}
         {pulse && (
           <div className="flex flex-wrap justify-center gap-6 text-center">
             {[