Show Reddit recovery status in dashboard

public/index.html

@@ -193,6 +193,47 @@
       gap: 10px;
     }
 
+    .reddit-session-banner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      margin: 18px 0 0;
+      padding: 15px 18px;
+      border: 1px solid rgba(184, 92, 92, .42);
+      border-radius: var(--r-md);
+      background: var(--clay-soft);
+      color: #7d3939;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .reddit-session-banner.unreachable {
+      border-color: rgba(212, 165, 116, .62);
+      background: var(--honey-soft);
+      color: #745022;
+    }
+
+    .reddit-session-banner[hidden] { display: none; }
+
+    .reddit-session-banner strong {
+      display: block;
+      margin-bottom: 3px;
+      font-family: var(--f-display);
+      font-size: 16px;
+    }
+
+    .reddit-session-banner span {
+      font-size: 12px;
+      line-height: 1.45;
+    }
+
+    @media (max-width: 680px) {
+      .reddit-session-banner {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+    }
+
     /* ───── Status badges ───── */
     .status-badge {
       padding: 6px 14px;
@@ -2288,6 +2329,14 @@
 
   <div class="container">
 
+    <div id="reddit-session-banner" class="reddit-session-banner" role="alert" hidden>
+      <div>
+        <strong id="reddit-session-banner-title">Reddit login required</strong>
+        <span id="reddit-session-banner-detail">Chat sync is paused until the browser session is restored.</span>
+      </div>
+      <button class="btn-primary" type="button" onclick="openLoginModal()">Open Reddit Login</button>
+    </div>
+
     <div id="cooldown-banner" style="display:none; margin:1rem 0; padding:0.85rem 1rem; border-radius:8px; background:#fff4e5; border:1px solid #f5b86a; color:#7a4a00; font-size:0.92rem; line-height:1.4;">
       <strong>⏸️ Chat throttle active.</strong>
       <span id="cooldown-reason"></span>
@@ -3957,9 +4006,13 @@
 
     let loginInfoCache = null;
 
-    function buildNovncUrl(port) {
+    function buildNovncUrl(info) {
+      if (info.publicUrl) {
+        const base = info.publicUrl.replace(/\/$/, '');
+        return `${base}/vnc.html?autoconnect=1&resize=scale&reconnect=1`;
+      }
       const proto = window.location.protocol === 'https:' ? 'https:' : 'http:';
-      return `${proto}//${window.location.hostname}:${port}/vnc.html?autoconnect=1&resize=scale&reconnect=1`;
+      return `${proto}//${window.location.hostname}:${info.novncPort}/vnc.html?autoconnect=1&resize=scale&reconnect=1`;
     }
 
     async function fetchLoginInfo() {
@@ -3986,6 +4039,7 @@
         } else {
           banner.innerHTML = 'Not logged in. Click <strong>Open Reddit login page</strong>, complete the login in the embedded browser, then click <strong>Re-check session</strong>.';
         }
+        updateRedditSessionBanner(data);
       } catch (err) {
         banner.textContent = 'Could not check session status.';
       }
@@ -3999,7 +4053,7 @@
       const newTab = document.getElementById('login-vnc-newtab');
 
       if (info && info.vncEnabled) {
-        const url = buildNovncUrl(info.novncPort);
+        const url = buildNovncUrl(info);
         if (frame.src !== url) frame.src = url;
         newTab.href = url;
         wrap.style.display = '';
@@ -4031,11 +4085,32 @@
       }
     }
 
+    async function updateRedditSessionBanner(data) {
+      const recoveryBanner = document.getElementById('reddit-session-banner');
+      const recoveryTitle = document.getElementById('reddit-session-banner-title');
+      const recoveryDetail = document.getElementById('reddit-session-banner-detail');
+      if (data.status === 'unreachable') {
+        recoveryBanner.hidden = false;
+        recoveryBanner.classList.add('unreachable');
+        recoveryTitle.textContent = 'Reddit is unreachable from this server';
+        recoveryDetail.textContent = 'Chat sync is paused. The remote login may not load until server connectivity recovers.';
+      } else if (data.status === 'login-required') {
+        recoveryBanner.hidden = false;
+        recoveryBanner.classList.remove('unreachable');
+        recoveryTitle.textContent = 'Reddit session expired';
+        recoveryDetail.textContent = 'Chat sync is paused. Open the remote browser and log in to reconnect.';
+      } else {
+        recoveryBanner.hidden = true;
+        recoveryBanner.classList.remove('unreachable');
+      }
+    }
+
     async function updateLoginButtonVisibility() {
       try {
         const res = await fetch('/api/login/status');
         const data = await res.json();
         document.getElementById('login-btn').style.display = data.loggedIn ? 'none' : '';
+        await updateRedditSessionBanner(data);
       } catch (err) {
         // If the endpoint isn't reachable yet, leave the button hidden.
       }