From a6c6cddf30920245ef2caeab34b54fb56fb47d84 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 03:06:39 -0400
Subject: [PATCH] feat(dashboard): show Pi IP banner when connected to phone
 hotspot

- Banner appears on dashboard only when uplink mode is 'phone'
- Shows the Pi's current IP so you can reach it from your phone's browser
- Polls every 15s, hides automatically when not on phone hotspot

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 static/js/yaris.js   | 21 +++++++++++++++++++++
 templates/index.html |  5 +++++
 2 files changed, 26 insertions(+)

diff --git a/static/js/yaris.js b/static/js/yaris.js
index b24058d..ae8e90d 100644
--- a/static/js/yaris.js
+++ b/static/js/yaris.js
@@ -326,3 +326,24 @@ window.setInterval(function () {
         message.hidden = false;
     });
 }, 30000);
+
+// ── Phone hotspot banner ───────────────────────────────────────────────────
+(function () {
+    const banner = document.getElementById('phone-hotspot-banner');
+    const ipEl = document.getElementById('phone-hotspot-ip');
+    function checkUplink() {
+        fetch('/api/uplink/status')
+            .then(r => r.ok ? r.json() : null)
+            .then(s => {
+                if (s && s.mode === 'phone' && s.ip_address) {
+                    ipEl.textContent = `http://${s.ip_address}/`;
+                    banner.hidden = false;
+                } else {
+                    banner.hidden = true;
+                }
+            })
+            .catch(() => { banner.hidden = true; });
+    }
+    checkUplink();
+    window.setInterval(checkUplink, 15000);
+})();
diff --git a/templates/index.html b/templates/index.html
index 1d7c3c5..5b02963 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,6 +9,11 @@
 {% block content %}
 <h3 class="text-dark mb-3 fw-bold">Dashboard</h3>
 
+<div id="phone-hotspot-banner" class="alert alert-info d-flex align-items-center gap-2 py-2 mb-3" hidden>
+    <i class="fas fa-mobile-alt"></i>
+    <span>Connected via phone hotspot — access this page at <strong id="phone-hotspot-ip"></strong></span>
+</div>
+
 {# ── OBD stat cards ──────────────────────────────────────────────────── #}
 <div class="row g-2 mb-3">
     <div class="col-6 col-sm-4 col-xl-2">