feat: SSE live stream + URL heartbeat QR codes update in real-time without page reload

app.py

@@ -1,21 +1,46 @@
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request, jsonify, Response, stream_with_context
 from flask_cors import CORS
 from datetime import datetime
 import os
+import json
+import time
+import threading
 
 app = Flask(__name__)
 CORS(app)
 
-# In-memory store for the frontend base URL.
-# The Cloudflare Worker calls /api/update-urls whenever the frontend URL changes.
+# ── In-memory state ───────────────────────────────────────────────────────────
+# The Cloudflare Worker calls /api/update-urls whenever the Electron app
+# re-registers its cloudflared tunnel URL (every 1 s for the first 30 s,
+# then every 10 s as a slow heartbeat).
 current_urls = {
     'base_url': '',
     'last_updated': '',
     'portals': []
 }
 
-# All AEGIS analysis windows + their metadata.
-# Paths MUST match the React Router routes defined in frontend/src/App.tsx.
+# SSE subscriber queues — each connected browser gets its own queue.
+# When /api/update-urls is called, we push the new data to all queues.
+_sse_lock = threading.Lock()
+_sse_clients: list = []   # list of threading.Queue
+
+
+def _broadcast_sse(data: dict):
+    """Push a JSON payload to every connected SSE client."""
+    msg = f"data: {json.dumps(data)}\n\n"
+    with _sse_lock:
+        dead = []
+        for q in _sse_clients:
+            try:
+                q.put_nowait(msg)
+            except Exception:
+                dead.append(q)
+        for q in dead:
+            _sse_clients.remove(q)
+
+
+# ── Window definitions ────────────────────────────────────────────────────────
+# Paths MUST match the React Router routes in frontend/src/App.tsx
 WINDOW_DEFINITIONS = [
     {
         'window': 1,
@@ -135,19 +160,17 @@ def index():
 
 @app.route('/ping', methods=['GET'])
 def ping():
-    """UptimeRobot keep-alive — returns 200 instantly, no heavy work."""
+    """UptimeRobot keep-alive."""
     return jsonify({'status': 'ok', 'message': 'AR Space is alive'}), 200
 
 
 @app.route('/health')
 def health():
-    """Health check."""
     return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
 
 
 @app.route('/api/status')
 def status():
-    """Current AR system status — called by the worker."""
     return jsonify({
         'status': 'online',
         'base_url': current_urls.get('base_url', ''),
@@ -160,15 +183,15 @@ def status():
 @app.route('/api/update-urls', methods=['POST'])
 def update_urls():
     """
-    Called by the Cloudflare Worker (or directly) to register the frontend
-    base URL.  Once set, /api/qr-data returns ready-to-use QR links.
+    Called by the Cloudflare Worker every ~1 s (burst) then every 10 s.
+    Updates in-memory state and pushes to all SSE subscribers instantly.
     """
     try:
         data = request.get_json()
         if not data or 'base_url' not in data:
             return jsonify({'error': 'base_url is required'}), 400
 
-        base_url = data['base_url'].rstrip('/')
+        base_url  = data['base_url'].rstrip('/')
         portals   = build_portals(base_url)
         timestamp = datetime.now().isoformat()
 
@@ -178,6 +201,13 @@ def update_urls():
             'portals':      portals,
         })
 
+        # Push to all connected SSE clients immediately
+        _broadcast_sse({
+            'base_url':  base_url,
+            'timestamp': timestamp,
+            'portals':   portals,
+        })
+
         return jsonify({
             'success':       True,
             'message':       'URLs updated successfully',
@@ -190,13 +220,59 @@ def update_urls():
         return jsonify({'error': str(e)}), 500
 
 
-@app.route('/api/qr-data', methods=['GET'])
-def qr_data():
+@app.route('/api/stream')
+def sse_stream():
     """
-    Returns all window URLs ready for QR-code generation.
-    Window 11 frontend calls this via the worker proxy to render the QR grid.
-    Optional ?window=N to get a single window's data.
+    Server-Sent Events endpoint.
+    The dashboard connects here and receives live updates whenever
+    /api/update-urls is called (i.e. every 1 s during the 30 s burst
+    and every 10 s after that).
     """
+    import queue as _queue
+
+    q = _queue.Queue(maxsize=50)
+    with _sse_lock:
+        _sse_clients.append(q)
+
+    # Send the current state immediately on connect so the page
+    # renders QR codes even if no new update arrives yet.
+    if current_urls.get('base_url'):
+        initial = json.dumps({
+            'base_url':  current_urls['base_url'],
+            'timestamp': current_urls['last_updated'],
+            'portals':   current_urls['portals'],
+        })
+        q.put_nowait(f"data: {initial}\n\n")
+
+    def generate():
+        try:
+            while True:
+                try:
+                    msg = q.get(timeout=25)
+                    yield msg
+                except Exception:
+                    # Send keep-alive comment every 25 s to prevent proxy timeouts
+                    yield ": keepalive\n\n"
+        except GeneratorExit:
+            pass
+        finally:
+            with _sse_lock:
+                if q in _sse_clients:
+                    _sse_clients.remove(q)
+
+    return Response(
+        stream_with_context(generate()),
+        mimetype='text/event-stream',
+        headers={
+            'Cache-Control': 'no-cache',
+            'X-Accel-Buffering': 'no',   # nginx: disable buffering
+            'Connection': 'keep-alive',
+        }
+    )
+
+
+@app.route('/api/qr-data', methods=['GET'])
+def qr_data():
     window_param = request.args.get('window')
     base_url     = current_urls.get('base_url', '')
 
@@ -230,7 +306,6 @@ def qr_data():
 
 @app.route('/api/windows', methods=['GET'])
 def windows():
-    """Static list of all window definitions (no base_url needed)."""
     return jsonify({
         'success': True,
         'windows': WINDOW_DEFINITIONS,
@@ -240,4 +315,4 @@ def windows():
 
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=False)
+    app.run(host='0.0.0.0', port=port, debug=False, threaded=True)

templates/ar_dashboard.html

@@ -5,9 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AEGIS BIO DIGITAL LAB — AR Portal</title>
 
-    <!-- QR Code generator (no external dependency for QR, uses qrcode.js CDN) -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-    <!-- Lucide icons -->
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 
     <style>
@@ -20,7 +18,7 @@
             min-height: 100vh;
         }
 
-        /* ── Header ─────────────────────────────────────────────────────── */
+        /* ── Header ── */
         .header {
             background: rgba(0,0,0,.5);
             padding: 1.25rem 2rem;
@@ -35,172 +33,167 @@
             -webkit-background-clip: text; -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-        .header .subtitle { font-size: .95rem; opacity: .7; margin-top: .25rem; }
-
+        .header .subtitle { font-size: .9rem; opacity: .65; margin-top: .2rem; }
         .status-bar {
             display: flex; justify-content: center; gap: 2rem;
-            margin-top: .75rem; flex-wrap: wrap;
+            margin-top: .6rem; flex-wrap: wrap;
         }
-        .status-item { display: flex; align-items: center; gap: .4rem; font-size: .85rem; opacity: .8; }
+        .status-item { display: flex; align-items: center; gap: .35rem; font-size: .82rem; opacity: .8; }
         .online  { color: #4caf50; }
-        .offline { color: #f44336; }
+        .pending { color: orange; }
+
+        /* ── Live indicator ── */
+        #live-dot {
+            display: inline-block; width: 8px; height: 8px;
+            border-radius: 50%; background: #4caf50;
+            margin-right: 4px;
+            animation: blink 1.2s ease-in-out infinite;
+        }
+        #live-dot.waiting { background: orange; animation: none; }
+        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
 
-        /* ── Base URL banner ────────────────────────────────────────────── */
+        /* ── URL banner ── */
         .url-banner {
-            margin: 1rem 2rem;
-            padding: .75rem 1.25rem;
-            border-radius: 10px;
-            border: 1px solid rgba(0,200,255,.25);
-            background: rgba(0,0,0,.35);
-            display: flex; align-items: center; gap: .75rem;
-            font-size: .85rem; word-break: break-all;
+            margin: .75rem 1.5rem;
+            padding: .6rem 1rem;
+            border-radius: 8px;
+            border: 1px solid rgba(0,200,255,.2);
+            background: rgba(0,0,0,.3);
+            display: flex; align-items: center; gap: .6rem;
+            font-size: .82rem; word-break: break-all;
         }
         .url-banner .label { color: #00d4ff; white-space: nowrap; font-weight: 600; }
-        .url-banner .value { opacity: .85; }
         .url-banner.no-url { border-color: rgba(255,165,0,.3); }
         .url-banner.no-url .label { color: orange; }
 
-        /* ── Grid ───────────────────────────────────────────────────────── */
-        .main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
-
+        /* ── Grid ── */
+        .main { padding: 1.25rem 1.5rem; max-width: 1400px; margin: 0 auto; }
         .portals-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-            gap: 1.25rem;
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            gap: 1.1rem;
         }
 
-        /* ── Portal card ─────────────────────────────────────────────────── */
+        /* ── Card ── */
         .portal-card {
             background: rgba(0,0,0,.45);
-            border: 1px solid rgba(0,200,255,.2);
-            border-radius: 14px;
-            padding: 1.25rem;
-            display: flex; flex-direction: column; align-items: center;
-            gap: .75rem;
-            transition: transform .25s, border-color .25s, box-shadow .25s;
+            border: 1px solid rgba(0,200,255,.18);
+            border-radius: 12px;
+            padding: 1.1rem;
+            display: flex; flex-direction: column; align-items: center; gap: .65rem;
+            transition: transform .22s, border-color .22s, box-shadow .22s;
             backdrop-filter: blur(8px);
         }
         .portal-card:hover {
-            transform: translateY(-4px);
-            border-color: rgba(0,200,255,.55);
-            box-shadow: 0 8px 28px rgba(0,180,255,.2);
+            transform: translateY(-3px);
+            border-color: rgba(0,200,255,.5);
+            box-shadow: 0 6px 22px rgba(0,180,255,.18);
         }
-
         .portal-icon {
-            width: 48px; height: 48px; border-radius: 10px;
+            width: 44px; height: 44px; border-radius: 9px;
             display: flex; align-items: center; justify-content: center;
-            flex-shrink: 0;
         }
-        .portal-icon svg { width: 22px; height: 22px; color: white; }
-
+        .portal-icon svg { width: 20px; height: 20px; color: white; }
         .portal-info { text-align: center; width: 100%; }
-        .portal-info h3 { font-size: 1rem; margin-bottom: .3rem; color: #d0eeff; }
-        .portal-info .win-badge {
-            display: inline-block; font-size: .7rem; color: #00d4ff;
-            border: 1px solid rgba(0,212,255,.35); border-radius: 20px;
-            padding: .1rem .5rem; margin-bottom: .4rem;
+        .portal-info h3 { font-size: .95rem; color: #d0eeff; margin-bottom: .25rem; }
+        .win-badge {
+            display: inline-block; font-size: .68rem; color: #00d4ff;
+            border: 1px solid rgba(0,212,255,.3); border-radius: 20px;
+            padding: .08rem .45rem; margin-bottom: .3rem;
         }
-        .portal-info p { font-size: .8rem; opacity: .7; line-height: 1.4; }
+        .portal-info p { font-size: .76rem; opacity: .65; line-height: 1.4; }
 
-        /* QR code box */
+        /* QR box */
         .qr-wrap {
-            background: white; border-radius: 8px;
-            padding: 6px; display: inline-block;
+            background: white; border-radius: 7px; padding: 5px;
+            display: inline-block;
             box-shadow: 0 2px 10px rgba(0,0,0,.4);
+            min-width: 130px; min-height: 130px;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .qr-wrap .qr-placeholder {
+            font-size: .72rem; color: #aaa; text-align: center; padding: .5rem;
         }
-        .qr-wrap canvas, .qr-wrap img { display: block; }
 
         .launch-btn {
-            display: inline-flex; align-items: center; gap: .4rem;
-            padding: .45rem 1rem;
-            background: rgba(0,200,255,.15);
-            border: 1px solid rgba(0,200,255,.35);
-            border-radius: 20px;
-            color: #00d4ff; font-size: .82rem; font-weight: 500;
-            text-decoration: none;
-            transition: background .2s, color .2s;
-            cursor: pointer;
+            display: inline-flex; align-items: center; gap: .35rem;
+            padding: .4rem .9rem;
+            background: rgba(0,200,255,.14);
+            border: 1px solid rgba(0,200,255,.3);
+            border-radius: 18px; color: #00d4ff;
+            font-size: .78rem; font-weight: 500;
+            text-decoration: none; cursor: pointer;
+            transition: background .18s, color .18s;
         }
-        .launch-btn:hover { background: rgba(0,200,255,.3); color: white; }
-        .launch-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
-
-        /* ── Color classes ───────────────────────────────────────────────── */
-        .color-blue    { background: linear-gradient(135deg,#2196f3,#1565c0); }
-        .color-purple  { background: linear-gradient(135deg,#9c27b0,#6a1b9a); }
-        .color-yellow  { background: linear-gradient(135deg,#ff9800,#e65100); }
-        .color-red     { background: linear-gradient(135deg,#f44336,#b71c1c); }
-        .color-cyan    { background: linear-gradient(135deg,#00bcd4,#006064); }
-        .color-orange  { background: linear-gradient(135deg,#ff5722,#bf360c); }
-        .color-green   { background: linear-gradient(135deg,#4caf50,#1b5e20); }
-        .color-pink    { background: linear-gradient(135deg,#e91e63,#880e4f); }
-        .color-indigo  { background: linear-gradient(135deg,#3f51b5,#1a237e); }
-        .color-teal    { background: linear-gradient(135deg,#009688,#004d40); }
-
-        /* ── No-URL placeholder ─────────────────────────────────────────── */
-        .no-url-msg {
-            text-align: center; padding: 3rem 1rem; opacity: .6;
-            grid-column: 1/-1;
+        .launch-btn:hover { background: rgba(0,200,255,.28); color: white; }
+
+        /* Color classes */
+        .color-blue   { background: linear-gradient(135deg,#2196f3,#1565c0); }
+        .color-purple { background: linear-gradient(135deg,#9c27b0,#6a1b9a); }
+        .color-yellow { background: linear-gradient(135deg,#ff9800,#e65100); }
+        .color-red    { background: linear-gradient(135deg,#f44336,#b71c1c); }
+        .color-cyan   { background: linear-gradient(135deg,#00bcd4,#006064); }
+        .color-orange { background: linear-gradient(135deg,#ff5722,#bf360c); }
+        .color-green  { background: linear-gradient(135deg,#4caf50,#1b5e20); }
+        .color-pink   { background: linear-gradient(135deg,#e91e63,#880e4f); }
+        .color-indigo { background: linear-gradient(135deg,#3f51b5,#1a237e); }
+        .color-teal   { background: linear-gradient(135deg,#009688,#004d40); }
+
+        /* No-URL placeholder */
+        .waiting-msg {
+            grid-column: 1/-1; text-align: center; padding: 3rem 1rem;
         }
-        .no-url-msg h3 { font-size: 1.3rem; color: orange; margin-bottom: .75rem; }
-        .no-url-msg p  { font-size: .9rem; line-height: 1.6; }
+        .waiting-msg h3 { color: orange; margin-bottom: .6rem; font-size: 1.2rem; }
+        .waiting-msg p  { opacity: .6; font-size: .88rem; line-height: 1.6; }
 
-        /* ── Footer ─────────────────────────────────────────────────────── */
         footer {
-            text-align: center; padding: 2rem;
-            border-top: 1px solid rgba(0,200,255,.2);
-            font-size: .8rem; opacity: .55; margin-top: 2rem;
+            text-align: center; padding: 1.5rem;
+            border-top: 1px solid rgba(0,200,255,.15);
+            font-size: .75rem; opacity: .45; margin-top: 1.5rem;
         }
 
-        /* ── Responsive ─────────────────────────────────────────────────── */
         @media (max-width: 600px) {
             .portals-grid { grid-template-columns: 1fr; }
             .header h1 { font-size: 1.4rem; }
-            .status-bar { gap: 1rem; }
         }
     </style>
 </head>
 <body>
 
-<!-- ── Header ───────────────────────────────────────────────────────────── -->
 <header class="header">
     <h1>AEGIS BIO DIGITAL LAB</h1>
-    <div class="subtitle">AUGMENTED REALITY PORTAL — QR ACCESS DASHBOARD</div>
+    <div class="subtitle">AUGMENTED REALITY PORTAL — LIVE QR ACCESS</div>
     <div class="status-bar">
-        <div class="status-item online">
-            <i data-lucide="radio" style="width:14px;height:14px;"></i>
-            <span>AR Space Online</span>
+        <div class="status-item" id="live-status">
+            <span id="live-dot" class="waiting"></span>
+            <span id="live-label">Connecting to live stream…</span>
         </div>
         <div class="status-item">
-            <i data-lucide="clock" style="width:14px;height:14px;"></i>
-            <span id="ts">{{ last_updated or 'Not yet synced' }}</span>
+            <i data-lucide="clock" style="width:13px;height:13px;"></i>
+            <span id="ts">{{ last_updated or '—' }}</span>
         </div>
         <div class="status-item">
-            <i data-lucide="layout-grid" style="width:14px;height:14px;"></i>
-            <span>{{ portals|length }} windows</span>
+            <i data-lucide="layout-grid" style="width:13px;height:13px;"></i>
+            <span id="portal-count">{{ portals|length }} windows</span>
         </div>
     </div>
 </header>
 
-<!-- ── Base URL banner ───────────────────────────────────────────────────── -->
-{% if base_url %}
-<div class="url-banner">
-    <span class="label"><i data-lucide="link" style="width:14px;height:14px;vertical-align:middle;"></i> Base URL:</span>
-    <span class="value">{{ base_url }}</span>
-</div>
-{% else %}
-<div class="url-banner no-url">
-    <span class="label">⚠ Base URL not set.</span>
-    <span class="value">Start the Electron app — cloudflared will register the tunnel URL automatically.</span>
+<div class="url-banner {% if not base_url %}no-url{% endif %}" id="url-banner">
+    {% if base_url %}
+    <span class="label">🔗 Base URL:</span>
+    <span id="url-value">{{ base_url }}</span>
+    {% else %}
+    <span class="label">⚠ Waiting for tunnel URL…</span>
+    <span id="url-value" style="opacity:.6">Start the Electron app — cloudflared registers the URL automatically.</span>
+    {% endif %}
 </div>
-{% endif %}
 
-<!-- ── Portal grid ───────────────────────────────────────────────────────── -->
 <main class="main">
     <div class="portals-grid" id="grid">
-
         {% if portals %}
             {% for p in portals %}
-            <div class="portal-card">
+            <div class="portal-card" id="card-{{ p.window }}">
                 <div class="portal-icon color-{{ p.color }}">
                     <i data-lucide="{{ p.icon }}"></i>
                 </div>
@@ -209,76 +202,166 @@
                     <h3>{{ p.name }}</h3>
                     <p>{{ p.description }}</p>
                 </div>
-                <!-- QR code rendered by JS below -->
                 <div class="qr-wrap" id="qr-{{ p.window }}"></div>
                 <a class="launch-btn" href="{{ p.url }}" target="_blank" rel="noopener noreferrer">
-                    <i data-lucide="external-link" style="width:13px;height:13px;"></i>
+                    <i data-lucide="external-link" style="width:12px;height:12px;"></i>
                     Open Window {{ p.window }}
                 </a>
             </div>
             {% endfor %}
         {% else %}
-            <div class="no-url-msg">
-                <h3>⚠ No URLs configured yet</h3>
-                <p>
-                    Start the Electron app — cloudflared will create a public tunnel and
-                    automatically POST the URL to the Cloudflare Worker, which forwards it
-                    here. Refresh this page once the tunnel is up.
-                </p>
+            <div class="waiting-msg" id="waiting-msg">
+                <h3>⏳ Waiting for live URL…</h3>
+                <p>The QR codes will appear automatically once the Electron app<br>
+                   starts cloudflared and registers the tunnel URL.</p>
             </div>
         {% endif %}
-
     </div>
 </main>
 
-<footer>
-    <p>AEGIS Bio Digital Lab 10 · AR Portal · Powered by Cloudflare Quick Tunnels</p>
-</footer>
+<footer>AEGIS Bio Digital Lab 10 · AR Portal · Live via Cloudflare Quick Tunnels</footer>
+
+<script id="portals-data" type="application/json">{{ portals | tojson }}</script>
 
 <script>
-    // ── Lucide icons ────────────────────────────────────────────────────────
-    lucide.createIcons();
+lucide.createIcons();
 
-    // ── Inject portal URLs from Jinja so JS can read them ──────────────────
-    const PORTALS = {{ portals | tojson }};
+// ── Initial portals from server-side render ──────────────────────────────────
+const INITIAL_PORTALS = JSON.parse(document.getElementById('portals-data').textContent || '[]');
 
-    // ── Render QR codes ─────────────────────────────────────────────────────
-    PORTALS.forEach(function(p) {
-        const el = document.getElementById('qr-' + p.window);
-        if (!el || !p.url) return;
-        try {
-            new QRCode(el, {
-                text: p.url,
-                width: 140,
-                height: 140,
-                colorDark: '#000000',
-                colorLight: '#ffffff',
-                correctLevel: QRCode.CorrectLevel.M,
-            });
-        } catch(e) {
-            el.textContent = p.url;
+// ── QR rendering ─────────────────────────────────────────────────────────────
+const _qrInstances = {};
+
+function renderQR(windowNum, url) {
+    const el = document.getElementById('qr-' + windowNum);
+    if (!el) return;
+
+    // Clear previous QR
+    el.innerHTML = '';
+    delete _qrInstances[windowNum];
+
+    if (!url) {
+        el.innerHTML = '<div class="qr-placeholder">No URL</div>';
+        return;
+    }
+    try {
+        _qrInstances[windowNum] = new QRCode(el, {
+            text: url,
+            width: 130, height: 130,
+            colorDark: '#000000', colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.M,
+        });
+    } catch(e) {
+        el.innerHTML = `<div class="qr-placeholder" style="font-size:.65rem;word-break:break-all;">${url}</div>`;
+    }
+}
+
+// Render initial QRs from SSR data
+INITIAL_PORTALS.forEach(p => renderQR(p.window, p.url));
+
+// ── Build/update the grid from fresh portal data ─────────────────────────────
+function updateGrid(portals) {
+    const grid = document.getElementById('grid');
+
+    // Remove the "waiting" placeholder if present
+    const waiting = document.getElementById('waiting-msg');
+    if (waiting) waiting.remove();
+
+    // Color map
+    const COLORS = {
+        1:'blue',2:'blue',3:'purple',4:'yellow',5:'red',
+        6:'cyan',7:'orange',8:'green',9:'pink',10:'indigo',11:'teal'
+    };
+    const ICONS = {
+        1:'home',2:'cpu',3:'git-branch',4:'trending-up',5:'shield',
+        6:'cloud',7:'activity',8:'zap',9:'image',10:'eye',11:'scan'
+    };
+
+    portals.forEach(p => {
+        let card = document.getElementById('card-' + p.window);
+
+        if (!card) {
+            // Create new card
+            card = document.createElement('div');
+            card.className = 'portal-card';
+            card.id = 'card-' + p.window;
+            card.innerHTML = `
+                <div class="portal-icon color-${COLORS[p.window] || 'blue'}">
+                    <i data-lucide="${ICONS[p.window] || 'globe'}"></i>
+                </div>
+                <div class="portal-info">
+                    <span class="win-badge">Window ${p.window}</span>
+                    <h3>${p.name}</h3>
+                    <p>${p.description}</p>
+                </div>
+                <div class="qr-wrap" id="qr-${p.window}"></div>
+                <a class="launch-btn" href="${p.url}" target="_blank" rel="noopener noreferrer">
+                    <i data-lucide="external-link" style="width:12px;height:12px;"></i>
+                    Open Window ${p.window}
+                </a>`;
+            grid.appendChild(card);
+            lucide.createIcons();
+        } else {
+            // Update the launch button URL
+            const btn = card.querySelector('.launch-btn');
+            if (btn) btn.href = p.url;
         }
+
+        // Always re-render QR with new URL
+        renderQR(p.window, p.url);
     });
+}
 
-    // ── Live clock ───────────────────────────────────────────────────────────
-    function tick() {
-        const el = document.getElementById('ts');
-        if (el && !el.dataset.server) {
-            el.textContent = new Date().toLocaleString();
-        }
-    }
-    {% if last_updated %}
-    // Keep the server timestamp for first render, then switch to clock
-    setTimeout(function() {
-        const el = document.getElementById('ts');
-        if (el) { el.dataset.server = ''; setInterval(tick, 1000); }
-    }, 3000);
-    {% else %}
-    setInterval(tick, 1000);
-    {% endif %}
+// ── URL banner update ─────────────────────────────────────────────────────────
+function updateBanner(baseUrl, timestamp) {
+    const banner = document.getElementById('url-banner');
+    const val    = document.getElementById('url-value');
+    const ts     = document.getElementById('ts');
+    const count  = document.getElementById('portal-count');
+
+    if (val) val.textContent = baseUrl;
+    if (ts)  ts.textContent  = timestamp ? new Date(timestamp).toLocaleString() : '—';
+    banner.classList.remove('no-url');
+
+    // Update window count after grid is built
+    setTimeout(() => {
+        const cards = document.querySelectorAll('.portal-card').length;
+        if (count) count.textContent = cards + ' windows';
+    }, 200);
+}
+
+// ── SSE live stream ───────────────────────────────────────────────────────────
+const dot   = document.getElementById('live-dot');
+const label = document.getElementById('live-label');
+
+function connectSSE() {
+    const es = new EventSource('/api/stream');
+
+    es.onopen = () => {
+        dot.classList.remove('waiting');
+        label.textContent = 'Live';
+    };
+
+    es.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.base_url && data.portals && data.portals.length) {
+                updateBanner(data.base_url, data.timestamp);
+                updateGrid(data.portals);
+            }
+        } catch(e) { /* ignore malformed */ }
+    };
+
+    es.onerror = () => {
+        dot.classList.add('waiting');
+        label.textContent = 'Reconnecting…';
+        es.close();
+        // Reconnect after 2 s
+        setTimeout(connectSSE, 2000);
+    };
+}
 
-    // ── Auto-refresh every 60 s so new URLs appear without manual reload ────
-    setTimeout(function() { location.reload(); }, 60000);
+connectSSE();
 </script>
 </body>
 </html>