wiz

static/css/connect.css

@@ -26,6 +26,12 @@
     transition: background-color 0.3s;
 }
 
+/* prevent overlap: hide connect string until revealed; click surface on box */
+.qrcode-box #connectString { display: none; }
+.qrcode-box.revealed #connectString { display: block; }
+.qrcode-box #qrcode { pointer-events: none; }
+.qrcode-box { cursor: pointer; }
+
 .qrcode-box-clicked::before {
     content: "";
     position: absolute;

static/index.html

@@ -186,7 +186,7 @@
       <div class="setup-content">
         <div style="font-size: 13px; margin-top: 5px;">Scan the QR or Copy-Paste the string to establish the connection.</div>
         <div style="display: flex; justify-content: center;">
-          <div class="qrcode-box" id="codebox">
+          <div class="qrcode-box" id="codebox" aria-label="Pairing QR and string">
             <div style="font-size: 11px;">
               <div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
               <div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>

static/js/wizard.js

@@ -3,7 +3,9 @@ $(() => {
     const pages = {
         node: $('#page-node'),
         liquidity: $('#page-liquidity'),
-        backup: $('#page-backup')
+        backup: $('#page-backup'),
+        connect: $('#page-connect'),
+        status: $('#page-status')
     };
 
     // Inputs
@@ -39,6 +41,33 @@ $(() => {
         pageToShow.show();
     };
 
+    const populateStatus = async () => {
+        try {
+            const res = await fetch('/wizard/service_state');
+            if (res.status !== 200) return;
+            const s = await res.json();
+            const name = s.source_name || s.provider_name || '';
+            const relay = s.relay_url || (s.relays && s.relays[0]) || '';
+            const admin = s.admin_npub || '';
+            const avatar = s.avatar_url || (s.app_id ? `https://robohash.org/${encodeURIComponent(s.app_id)}.png?size=128x128&set=set3` : '');
+
+            const lndState = s.lnd_state; // 0 OFFLINE, 1 SYNCING, 2 ONLINE (per enum)
+            const watchdogOk = !!s.watchdog_ok;
+            const relayConnected = !!s.relay_connected;
+
+            $('#show-nodey-text').text(name || '—');
+            $('#show-nostr-text').text(relay || '—');
+            $('#adminNpub').text(admin || '—');
+            if (avatar) { $('#avatarImg').attr('src', avatar); }
+
+            const mkDot = (ok) => ok ? '<span class="green-dot">&#9679;</span>' : '<span class="yellow-dot">&#9679;</span>';
+            const lndTxt = lndState === 2 ? 'Online' : (lndState === 1 ? 'Syncing' : 'Offline');
+            $('#lndStatus').html(`${mkDot(lndState === 2)} ${lndTxt}`);
+            $('#watchdog-status').html(`${mkDot(watchdogOk)} ${watchdogOk ? 'OK' : 'Alert'}`);
+            $('#relayStatus').html(`${mkDot(relayConnected)} ${relayConnected ? 'Connected' : 'Disconnected'}`);
+        } catch { /* noop */ }
+    };
+
     // Navigation
     toLiquidityBtn.click(() => {
         const nodeName = nodeNameInput.val();
@@ -97,23 +126,41 @@ $(() => {
                 throw new Error(j.reason || "Failed to start service");
             }
             // Move to in-page connect step
-            showPage(pages.connect || $('#page-connect'));
+            showPage(pages.connect);
-            // fetch and render connect info (re-using logic from connect.html)
+            // fetch and prepare connect info
             (async () => {
                 const res = await fetch('/wizard/admin_connect_info');
                 if (res.status !== 200) return;
                 const j = await res.json();
                 if (j.connect_info && j.connect_info.enrolled_npub) {
-                    showPage(pages.status || $('#page-status'))
+                    showPage(pages.status);
-                    return
+                    await populateStatus();
+                    return;
                 }
-                const connectString = j.nprofile + ':' + j.connect_info.admin_token
+                const connectString = j.nprofile + ':' + j.connect_info.admin_token;
-                const qrElement = document.getElementById('qrcode')
+                const qrElement = document.getElementById('qrcode');
+                const codebox = $('#codebox');
+                const clickText = $('#click-text');
+                const cs = $('#connectString');
+
+                // Reset visual state
+                codebox.removeClass('revealed');
+                cs.text('');
+                if (qrElement) {
+                    while (qrElement.firstChild) qrElement.removeChild(qrElement.firstChild);
+                }
+
+                // Reveal on click: generate QR and show string
+                codebox.off('click').on('click', () => {
+                    if (!codebox.hasClass('revealed')) {
                         if (qrElement && !qrElement.firstChild) {
                             new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 });
                         }
-                const cs = document.getElementById('connectString');
+                        cs.text(connectString);
-                if (cs) cs.innerText = connectString
+                        codebox.addClass('revealed');
+                        clickText.text('Pairing code');
+                    }
+                });
             })();
         } catch (err) {
             errorTextBackup.text(err.message);
@@ -121,8 +168,9 @@ $(() => {
     });
 
     // Navigate from connect to status
-    toStatusBtn && toStatusBtn.click(() => {
+    toStatusBtn && toStatusBtn.click(async () => {
-        showPage(pages.status || $('#page-status'))
+        showPage(pages.status);
+        await populateStatus();
     })
 
     const syncRelayState = () => {
@@ -140,14 +188,7 @@ $(() => {
         }
     });
 
-    // Initial state load
+    // Initial state load (no redirects; SPA only)
-    fetch("/wizard/state").then(res => res.json()).then(data => {
-        if (data.admin_linked) {
-            location.href = 'status.html';
-        } else if (data.config_sent) {
-            location.href = 'connect.html';
-        } else {
-            // Pre-populate from service state
     fetch("/wizard/service_state").then(res => res.json()).then(state => {
         nodeNameInput.val(state.source_name);
         if (state.relay_url === 'wss://relay.lightning.pub') {
@@ -179,6 +220,4 @@ $(() => {
             manualBackupRadio.prop('checked', true);
         }
     });
-        }
-    });
 });