From 486d5e123f3ff828d6486f95e2e4aa7d6a999914 Mon Sep 17 00:00:00 2001
From: astromech73 <166405382+astromech73@users.noreply.github.com>
Date: Thu, 21 May 2026 11:09:51 -0500
Subject: [PATCH] Update firmware-pusher UI: fixed projection query,
 metadata.version field, improved UX

---
 firmware-pusher/index.html | 446 ++++++++++++-------------------------
 1 file changed, 148 insertions(+), 298 deletions(-)

diff --git a/firmware-pusher/index.html b/firmware-pusher/index.html
index 7e95b4e..9cb870e 100644
--- a/firmware-pusher/index.html
+++ b/firmware-pusher/index.html
@@ -5,243 +5,122 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GenieACS Firmware Pusher</title>
   <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg: #0f1117;
-      --surface: #1a1d27;
-      --border: #2a2d3a;
-      --text: #e4e4e7;
-      --text-dim: #71717a;
-      --accent: #3b82f6;
-      --accent-hover: #2563eb;
-      --success: #22c55e;
-      --error: #ef4444;
-      --warning: #f59e0b;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 1rem;
-    }
-    .card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 2rem;
-      width: 100%;
-      max-width: 480px;
-    }
-    .logo {
-      font-size: 1.5rem;
-      font-weight: 700;
-      margin-bottom: 0.25rem;
-      color: var(--accent);
-    }
-    .subtitle {
-      color: var(--text-dim);
-      font-size: 0.875rem;
-      margin-bottom: 2rem;
-    }
-    .field {
-      margin-bottom: 1.25rem;
-    }
-    label {
-      display: block;
-      font-size: 0.8rem;
-      font-weight: 600;
-      color: var(--text-dim);
-      margin-bottom: 0.5rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-    select, input {
-      width: 100%;
-      padding: 0.625rem 0.875rem;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      color: var(--text);
-      font-size: 0.9rem;
-      transition: border-color 0.15s;
-      appearance: none;
-    }
-    select:focus, input:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    select {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 0.875rem center;
-      padding-right: 2.5rem;
-      cursor: pointer;
-    }
-    .btn {
-      width: 100%;
-      padding: 0.75rem 1rem;
-      background: var(--accent);
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      font-size: 0.9rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background 0.15s, opacity 0.15s;
-    }
-    .btn:hover { background: var(--accent-hover); }
-    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .btn.loading { position: relative; }
-    .btn.loading::after {
-      content: '';
-      display: inline-block;
-      width: 1em; height: 1em;
-      border: 2px solid rgba(255,255,255,0.3);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 0.6s linear infinite;
-      margin-left: 0.5em;
-      vertical-align: middle;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-    .status {
-      margin-top: 1.25rem;
-      padding: 0.875rem 1rem;
-      border-radius: 8px;
-      font-size: 0.85rem;
-      line-height: 1.5;
-      display: none;
-    }
-    .status.show { display: block; }
-    .status.ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--success); }
-    .status.err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--error); }
-    .status.info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--accent); }
-    .status .task-id { font-family: monospace; font-size: 0.8em; color: var(--text-dim); }
-    .version-tag {
-      position: fixed;
-      bottom: 0.75rem;
-      right: 1rem;
-      font-size: 0.7rem;
-      color: var(--text-dim);
+      --bg: #0d1117; --surface: #161b22; --border: #30363d;
+      --text: #e6edf3; --muted: #8b949e; --accent: #58a6ff;
+      --ok: #3fb950; --err: #f85149; --warn: #d29922;
+      --radius: 8px;
     }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
+    .container { width: 100%; max-width: 720px; }
+    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
+    .card h1 { font-size: 1.4rem; margin-bottom: 6px; }
+    .card p { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }
+    .version-tag { background: var(--border); color: var(--muted); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 20px; }
 
-    /* Login screen */
-    .login-screen .main-ui { display: none; }
-    .main-ui .login-screen { display: none; }
-    .login-screen {
-      text-align: center;
-    }
-    .login-screen .logo { font-size: 2rem; margin-bottom: 0.5rem; }
-    .login-screen .subtitle { margin-bottom: 2rem; }
-    .login-screen .field { text-align: left; }
-    .lock-icon {
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-    }
+    /* ── Login ─────────────────────────────────────────────── */
+    .login-screen { display: flex; flex-direction: column; gap: 14px; }
+    .login-screen h2 { font-size: 1.1rem; }
+    label { font-size: 0.8rem; color: var(--muted); display: block; margin-bottom: 6px; }
+    input { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.95rem; outline: none; }
+    input:focus { border-color: var(--accent); }
+    button { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; }
+    button:hover { opacity: 0.85; }
+    button:disabled { opacity: 0.4; cursor: not-allowed; }
+    button.loading { position: relative; color: transparent; }
+    button.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.3) 50%, transparent 75%); background-size: 200% 100%; animation: shimmer 1s infinite; }
+    @keyframes shimmer { to { background-position: -200% 0; } }
 
-    /* Device / firmware info badges */
-    .badge {
-      display: inline-block;
-      font-size: 0.7rem;
-      padding: 0.15rem 0.4rem;
-      border-radius: 4px;
-      background: rgba(59,130,246,0.15);
-      color: var(--accent);
-      margin-left: 0.5rem;
-      vertical-align: middle;
-      font-family: monospace;
-    }
-    .fw-info { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.25rem; }
-    hr.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
-    .inline-field { display: flex; gap: 0.75rem; }
-    .inline-field .field { flex: 1; }
+    /* ── Main UI ───────────────────────────────────────────── */
+    .main-ui { display: none; }
+    .main-ui.visible { display: block; }
+    .connected-as { font-size: 0.8rem; color: var(--muted); margin-bottom: 20px; }
+    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
+    .box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
+    .box h3 { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
+    select { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 0.9rem; }
+    select option { background: var(--surface); }
+    .box-meta { font-size: 0.75rem; color: var(--muted); margin-top: 8px; min-height: 18px; }
+    .status-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
+    #fwCount { font-size: 0.8rem; color: var(--muted); }
+    .btn-row { display: flex; gap: 10px; align-items: center; }
+    #btnPush { background: var(--ok); flex: 1; }
+    #btnPush:hover:not(:disabled) { background: #2ea043; }
+    #btnLogout { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 10px 16px; }
+    .status-box { font-size: 0.8rem; min-height: 48px; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); word-break: break-all; }
+    .status-box.ok { border-color: rgba(63,185,80,0.4); color: var(--ok); }
+    .status-box.err { border-color: rgba(248,81,73,0.4); color: var(--err); }
+    #statusBox { display: none; }
+    #statusBox.visible { display: block; }
+    @media (max-width: 540px) { .grid { grid-template-columns: 1fr; } }
   </style>
 </head>
 <body>
+<div class="container">
+  <div class="card">
 
-<!-- LOGIN SCREEN -->
-<div class="card login-screen" id="loginScreen">
-  <div class="lock-icon">🔐</div>
-  <div class="logo">GenieACS Firmware Pusher</div>
-  <div class="subtitle">Enter your GenieACS credentials to continue</div>
-  <div class="field">
-    <label>Username</label>
-    <input type="text" id="inUser" value="admin" autocomplete="username" spellcheck="false" />
-  </div>
-  <div class="field">
-    <label>Password</label>
-    <input type="password" id="inPass" autocomplete="current-password" spellcheck="false" />
-  </div>
-  <button class="btn" id="btnConnect" onclick="connect()">Connect</button>
-  <div class="status" id="loginStatus"></div>
-</div>
-
-<!-- MAIN UI -->
-<div class="card main-ui" id="mainUI">
-  <div class="logo">GenieACS Firmware Pusher</div>
-  <div class="subtitle">
-    <span id="connectedAs">Connected</span>
-    <button onclick="logout()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.75rem;margin-left:0.5rem;text-decoration:underline;">disconnect</button>
-  </div>
-
-  <hr class="divider">
-
-  <div class="inline-field">
-    <div class="field">
-      <label>Device</label>
-      <select id="selDevice">
-        <option value="">— Loading devices… —</option>
-      </select>
-      <div class="fw-info" id="devInfo"></div>
+    <!-- Login screen -->
+    <div id="loginScreen" class="login-screen">
+      <div class="version-tag">GenieACS Firmware Pusher v1.0</div>
+      <h2>Sign in</h2>
+      <div id="loginStatus"></div>
+      <div>
+        <label for="inUser">Username</label>
+        <input id="inUser" type="text" placeholder="admin" value="admin" autocomplete="username">
+      </div>
+      <div>
+        <label for="inPass">Password</label>
+        <input id="inPass" type="password" placeholder="GenieACS password" autocomplete="current-password">
+      </div>
+      <button id="btnConnect" onclick="connect()">Connect</button>
     </div>
+
+    <!-- Main UI -->
+    <div id="mainUI" class="main-ui">
+      <div class="version-tag">GenieACS Firmware Pusher v1.0</div>
+      <div class="connected-as" id="connectedAs"></div>
+      <div id="statusBox"></div>
+
+      <div class="grid">
+        <div class="box">
+          <h3>Device</h3>
+          <select id="selDevice"><option value="">Loading…</option></select>
+          <div class="box-meta" id="devInfo"></div>
+        </div>
+        <div class="box">
+          <h3>Firmware <span id="fwCount"></span></h3>
+          <select id="selFw"><option value="">Loading…</option></select>
+          <div class="box-meta" id="fwInfo"></div>
+        </div>
+      </div>
+
+      <div class="status-line">
+        <button id="btnPush" disabled onclick="pushFirmware()">Push Firmware</button>
+        <button id="btnLogout" onclick="logout()">Logout</button>
+      </div>
+    </div>
+
   </div>
-
-  <div class="field">
-    <label>
-      Firmware
-      <span class="badge" id="fwCount"></span>
-    </label>
-    <select id="selFw">
-      <option value="">— Loading files… —</option>
-    </select>
-    <div class="fw-info" id="fwInfo"></div>
-  </div>
-
-  <button class="btn" id="btnPush" onclick="pushFirmware()" disabled>
-    Push Firmware
-  </button>
-
-  <div class="status" id="statusBox"></div>
 </div>
 
-<div class="version-tag">GenieACS Firmware Pusher v1.0</div>
-
 <script>
-  const NBI = 'https://nbi.yoda.ddnsgeek.com';
+  // ── Config ───────────────────────────────────────────────
+  // NBI is empty string → all API calls go through nginx on the same host (no CORS, no external auth)
+  const NBI = '';
 
   // ── Auth helpers ───────────────────────────────────────────
   function getCreds() {
     return { user: sessionStorage.getItem('nbi_user'), pass: sessionStorage.getItem('nbi_pass') };
   }
-
   function b64auth() {
     const { user, pass } = getCreds();
     return 'Basic ' + btoa(user + ':' + pass);
   }
-
   function logout() {
     sessionStorage.removeItem('nbi_user');
     sessionStorage.removeItem('nbi_pass');
-    document.getElementById('mainUI').classList.remove('main-ui');
-    document.getElementById('mainUI').classList.add('login-screen');
-    document.getElementById('loginScreen').classList.add('login-screen');
-    document.getElementById('loginScreen').style.display = '';
-    document.getElementById('inPass').value = '';
-    clearStatus();
+    location.reload();
   }
 
   // ── API helpers ────────────────────────────────────────────
@@ -262,26 +141,21 @@
     const user = document.getElementById('inUser').value.trim();
     const pass = document.getElementById('inPass').value;
     if (!user || !pass) { showStatus('loginStatus', 'Please enter username and password.', 'err'); return; }
-
     const btn = document.getElementById('btnConnect');
     btn.classList.add('loading'); btn.disabled = true;
     clearStatus('loginStatus');
-
     try {
-      // Test auth by fetching devices
+      // Test auth
       const test = await fetch(NBI + '/devices?projection=_id', {
         headers: { 'Authorization': 'Basic ' + btoa(user + ':' + pass) }
       });
       if (test.status === 401) throw new Error('Invalid credentials');
       if (!test.ok) throw new Error('Server error: ' + test.status);
-
       sessionStorage.setItem('nbi_user', user);
       sessionStorage.setItem('nbi_pass', pass);
-
       document.getElementById('loginScreen').style.display = 'none';
-      document.getElementById('mainUI').classList.add('main-ui');
+      document.getElementById('mainUI').classList.add('visible');
       document.getElementById('connectedAs').textContent = 'Connected as ' + user;
-
       await loadDevices();
       await loadFiles();
     } catch(e) {
@@ -301,22 +175,17 @@
     const info = document.getElementById('devInfo');
     sel.innerHTML = '<option value="">Loading…</option>';
     try {
-      const devs = await api('/devices?projection=InternetGatewayDevice.');
+      const devs = await api('/devices?projection=_id,InternetGatewayDevice.DeviceInfo.SoftwareVersion,InternetGatewayDevice.ManagementServer.ConnectionRequestURL');
       sel.innerHTML = '';
       if (!devs || devs.length === 0) {
         sel.innerHTML = '<option value="">No devices found</option>';
         return;
       }
-      // Sort: online first, then by ID
-      devs.sort((a, b) => {
-        const ia = a._id.toLowerCase(), ib = b._id.toLowerCase();
-        return ia.localeCompare(ib);
-      });
+      devs.sort((a, b) => a._id.toLowerCase().localeCompare(b._id.toLowerCase()));
       for (const d of devs) {
         const serial = d._id.includes('-') ? d._id.split('-').pop() : d._id;
-        const igd = d.InternetGatewayDevice || {};
-        const sw = igd.DeviceInfo?.SoftwareVersion?._value || '—';
-        const url = igd.ManagementServer?.ConnectionRequestURL?._value || '';
+        const sw = d.InternetGatewayDevice?.DeviceInfo?.SoftwareVersion?._value || '—';
+        const url = d.InternetGatewayDevice?.ManagementServer?.ConnectionRequestURL?._value || '';
         const online = url && !url.includes('://0.') ? '🟢' : '⚫';
         const opt = document.createElement('option');
         opt.value = d._id;
@@ -340,7 +209,7 @@
     btn.disabled = !sel.value || !fw.value;
   }
 
-  // ── Load firmware files ─────────────────────────────────────
+  // ── Load firmware files ───────────────────────────────────
   async function loadFiles() {
     const sel = document.getElementById('selFw');
     const count = document.getElementById('fwCount');
@@ -355,10 +224,10 @@
         return;
       }
       count.textContent = files.length + ' file' + (files.length !== 1 ? 's' : '');
-      // Sort by version descending
+      // Sort by version descending (use metadata.version or fall back to filename)
       files.sort((a, b) => {
-        const va = (a.version || '0').split('.').map(Number);
-        const vb = (b.version || '0').split('.').map(Number);
+        const va = (a.metadata?.version || a.filename || '').split('.').map(Number);
+        const vb = (b.metadata?.version || b.filename || '').split('.').map(Number);
         for (let i = 0; i < Math.max(va.length, vb.length); i++) {
           const na = va[i] || 0, nb = vb[i] || 0;
           if (na !== nb) return nb - na;
@@ -366,13 +235,14 @@
         return 0;
       });
       for (const f of files) {
+        const ver = f.metadata?.version || '';
+        const fname = f.filename || f._id || '';
+        const sz = f.length ? fmtSize(f.length) : '';
         const opt = document.createElement('option');
-        opt.value = f.fileName;
-        const ver = f.version || f.fileName.match(/R(\d+[\d.]*)/)?.[1] || '—';
-        const sz = f.size ? fmtSize(f.size) : '';
-        opt.textContent = f.version ? `R${f.version}${sz ? '  (' + sz + ')' : ''}` : f.fileName;
-        opt.dataset.version = f.version || '';
-        opt.dataset.size = f.size || '';
+        opt.value = fname;
+        opt.textContent = ver ? `R${ver}${sz ? '  (' + sz + ')' : ''}` : fname;
+        opt.dataset.version = ver;
+        opt.dataset.size = f.length || '';
         sel.appendChild(opt);
       }
       sel.addEventListener('change', onFwChange);
@@ -384,93 +254,73 @@
   }
 
   function onFwChange() {
-    const sel = document.getElementById('selFw');
     const btn = document.getElementById('btnPush');
+    const sel = document.getElementById('selDevice');
+    const fw = document.getElementById('selFw');
     const info = document.getElementById('fwInfo');
-    const opt = sel.options[sel.selectedIndex];
-    if (opt && opt.value) {
-      const sz = opt.dataset.size ? fmtSize(parseInt(opt.dataset.size)) : '';
-      info.textContent = opt.value + (sz ? '  ·  ' + sz : '');
-    } else {
-      info.textContent = '';
+    info.textContent = '';
+    btn.disabled = !sel.value || !fw.value;
+    if (fw.value) {
+      const opt = fw.options[fw.selectedIndex];
+      if (opt && opt.dataset.version) info.textContent = 'Version: ' + opt.dataset.version;
     }
-    btn.disabled = !document.getElementById('selDevice').value || !sel.value;
   }
 
-  // ── Push firmware ──────────────────────────────────────────
+  // ── Push firmware ─────────────────────────────────────────
   async function pushFirmware() {
     const devId = document.getElementById('selDevice').value;
-    const fileName = document.getElementById('selFw').value;
+    const fwFile = document.getElementById('selFw').value;
     const btn = document.getElementById('btnPush');
     const status = document.getElementById('statusBox');
-
-    if (!devId || !fileName) return;
-
-    clearStatus();
-    btn.classList.add('loading'); btn.disabled = true;
-
+    if (!devId || !fwFile) return;
+    btn.disabled = true; btn.textContent = 'Pushing…';
+    status.className = 'status-box'; status.textContent = '';
+    status.classList.add('visible');
     try {
       const task = await api('/devices/' + encodeURIComponent(devId) + '/tasks', 'POST', {
-        name: 'download',
-        fileType: '1 Firmware Upgrade Image',
-        fileName: fileName,
-        productClass: 'GigaSpire'
+        name: 'FirmwareDownloadImage',
+        arguments: { File: fwFile }
       });
-
-      if (task && task.name === 'download') {
-        showStatus('statusBox',
-          `✓ Firmware push queued successfully. Task ID: <span class="task-id">${task.id}</span>`,
-          'ok');
-      } else {
-        showStatus('statusBox', '✓ Task created: ' + JSON.stringify(task).slice(0, 100), 'ok');
-      }
+      status.innerHTML = `✓ Task created — refresh device list after 1–2 min to see new version`;
+      status.className = 'status-box ok';
+      setTimeout(() => { status.classList.remove('visible'); }, 8000);
     } catch(e) {
       if (e.message === 'AUTH') {
-        showStatus('statusBox', 'Session expired. Please reconnect.', 'err');
-        setTimeout(logout, 1500);
+        status.textContent = 'Session expired. Please reconnect.';
+        status.className = 'status-box err';
+        setTimeout(() => logout(), 2000);
       } else {
-        showStatus('statusBox', 'Failed to push firmware: ' + e.message, 'err');
+        status.textContent = 'Failed to push firmware: ' + e.message;
+        status.className = 'status-box err';
       }
     } finally {
-      btn.classList.remove('loading'); btn.disabled = false;
+      btn.disabled = false; btn.textContent = 'Push Firmware';
     }
   }
 
-  // ── UI helpers ─────────────────────────────────────────────
+  // ── Status helpers ─────────────────────────────────────────
   function showStatus(id, html, type) {
     const el = document.getElementById(id);
+    if (!el) return;
     el.innerHTML = html;
-    el.className = 'status show ' + type;
-  }
-  function clearStatus(id = 'statusBox') {
-    const el = document.getElementById(id);
-    if (el) { el.className = 'status'; el.innerHTML = ''; }
+    el.style.color = type === 'err' ? 'var(--err)' : type === 'ok' ? 'var(--ok)' : '';
   }
+  function clearStatus(id) { showStatus(id, '', ''); }
   function fmtSize(bytes) {
     if (!bytes) return '';
-    if (bytes >= 1e9) return (bytes/1e9).toFixed(1) + ' GB';
-    if (bytes >= 1e6) return (bytes/1e6).toFixed(0) + ' MB';
-    return (bytes/1e3).toFixed(0) + ' KB';
+    const units = ['B','KB','MB','GB'];
+    let i = 0;
+    while (bytes >= 1024 && i < units.length - 1) { bytes /= 1024; i++; }
+    return bytes.toFixed(1) + ' ' + units[i];
   }
 
-  // ── Boot ──────────────────────────────────────────────────
-  (function init() {
-    const { user, pass } = getCreds();
-    if (user && pass) {
-      // Restore session
-      document.getElementById('inUser').value = user;
-      document.getElementById('loginScreen').style.display = 'none';
-      document.getElementById('mainUI').classList.add('main-ui');
-      document.getElementById('connectedAs').textContent = 'Connected as ' + user;
-      loadDevices().then(loadFiles).catch(() => logout());
-    } else {
-      document.getElementById('loginScreen').classList.add('login-screen');
-    }
-    // Enter key on password field
-    document.getElementById('inPass').addEventListener('keydown', e => {
-      if (e.key === 'Enter') connect();
-    });
-  })();
+  // ── Init: re-attach if already logged in ───────────────────
+  if (sessionStorage.getItem('nbi_user')) {
+    document.getElementById('loginScreen').style.display = 'none';
+    document.getElementById('mainUI').classList.add('visible');
+    document.getElementById('connectedAs').textContent = 'Connected as ' + sessionStorage.getItem('nbi_user');
+    loadDevices().then(loadFiles).catch(() => logout());
+  }
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file