feat: show WiFi SSID / Ethernet status in kiosk, click opens WiFi Manager

Author: Kiosk

screen.html

@@ -149,10 +149,11 @@
         .qr-url { color: #4a9eff; font-family: monospace; margin-top: 8px; word-break: break-all; text-decoration: none; transition: color 0.2s; display: block; text-align: center; line-height: 1.3; }
         .qr-url:hover { color: #7bc0ff; text-decoration: underline; }
 
-        .status { position: fixed; bottom: max(8px, 1.5vh); right: max(8px, 1.5vw); padding: max(4px, 0.8vmin) max(8px, 1.5vmin); border-radius: max(3px, 0.5vmin); font-size: max(10px, min(2vw, 2vh, 14px)); z-index: 1001; transition: opacity 0.3s, visibility 0.3s; opacity: 0.7; }
+        .status { position: fixed; bottom: max(8px, 1.5vh); right: max(8px, 1.5vw); padding: max(4px, 0.8vmin) max(8px, 1.5vmin); border-radius: max(3px, 0.5vmin); font-size: max(10px, min(2vw, 2vh, 14px)); z-index: 1001; transition: opacity 0.3s, visibility 0.3s; opacity: 0.7; cursor: pointer; }
         .status.hidden { opacity: 0; visibility: hidden; }
         .status.connecting { background: #FF9800; color: #000; }
         .status.connected { background: #4CAF50; color: #fff; }
+        .status.disconnected { background: #666; color: #fff; }
         .status.error { background: #f44336; color: #fff; }
 
         #audioMutedIndicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 12px 24px; border-radius: 8px; font-size: 16px; z-index: 3000; cursor: pointer; display: none; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.2); }
@@ -340,6 +341,24 @@
             el.textContent = text;
         }
 
+        // Network status: poll connection info and display WiFi SSID / Ethernet / Disconnected
+        let _networkPollInterval = null;
+        function updateNetworkStatus() {
+            fetch('/api/network-info').then(r => r.json()).then(info => {
+                const conn = info.connection;
+                if (conn?.type === 'wifi') updateStatus('connected', '📶 ' + conn.name);
+                else if (conn?.type === 'ethernet') updateStatus('connected', '🔌 Ethernet');
+                else updateStatus('disconnected', '⚠ No Internet');
+            }).catch(() => updateStatus('disconnected', '⚠ No Internet'));
+        }
+        // Poll network status every 10s to catch changes
+        _networkPollInterval = setInterval(updateNetworkStatus, 10000);
+
+        // Click status label → open WiFi Manager
+        document.getElementById('status').addEventListener('click', () => {
+            window.location.href = 'http://' + window.location.hostname + ':3457';
+        });
+
         function connectWebSocket() {
             updateStatus('connecting', 'Connecting...');
             wsManager = new WebSocketManager({
@@ -364,7 +383,7 @@
             switch (msg.type) {
                 case 'registered':
                     console.log('Screen registered:', msg.screenId);
-                    updateStatus('connected', 'Ready: ' + screenId);
+                    updateNetworkStatus();
                     break;
 
                 case 'controller-connected':

server.ts

@@ -368,7 +368,18 @@ const serverConfig = {
     }
 
     if (pathname === "/api/network-info") {
-      return new Response(JSON.stringify({ ip: LOCAL_IP, port: PORT, url: LOCAL_IP ? `http://${LOCAL_IP}:${PORT}` : null }),
+      // Include active connection info (WiFi SSID or Ethernet)
+      let connection = { type: "unknown", name: "" };
+      try {
+        const result = Bun.spawnSync({ cmd: ["nmcli", "-t", "-f", "NAME,TYPE,DEVICE", "connection", "show", "--active"] });
+        const lines = result.stdout.toString().trim().split("\n");
+        for (const line of lines) {
+          const [name, type, device] = line.split(":");
+          if (type === "802-11-wireless") { connection = { type: "wifi", name }; break; }
+          if (type === "802-3-ethernet" && connection.type !== "wifi") { connection = { type: "ethernet", name: device || name }; }
+        }
+      } catch {}
+      return new Response(JSON.stringify({ ip: LOCAL_IP, port: PORT, url: LOCAL_IP ? `http://${LOCAL_IP}:${PORT}` : null, connection }),
         { headers: { "Content-Type": "application/json", ...getHeaders(req) } });
     }