From a3d254f264fdf3823a5accbc379d2d54b046352f Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Sat, 30 Aug 2025 16:14:48 -0300
Subject: [PATCH] frontend: detect and list other vehicles on blueos

---
 .../src/components/app/VehicleBanner.vue      |  26 +-
 .../src/components/app/VehiclePicker.vue      | 257 ++++++++++++++++++
 core/services/beacon/main.py                  | 113 +++++++-
 3 files changed, 385 insertions(+), 11 deletions(-)
 create mode 100644 core/frontend/src/components/app/VehiclePicker.vue

diff --git a/core/frontend/src/components/app/VehicleBanner.vue b/core/frontend/src/components/app/VehicleBanner.vue
index 0a6bb6500f..d6efe7a74d 100755
--- a/core/frontend/src/components/app/VehicleBanner.vue
+++ b/core/frontend/src/components/app/VehicleBanner.vue
@@ -18,18 +18,19 @@
         >
           ({{ system_id }})
         </span>
+      </p>
+      <div class="action-buttons-container">
         <v-btn
-          class="mx-2 edit-icon"
+          class="mx-1"
           fab
           dark
           x-small
           @click="openDialog"
         >
-          <v-icon>
-            mdi-pencil
-          </v-icon>
+          <v-icon>mdi-pencil</v-icon>
         </v-btn>
-      </p>
+        <VehiclePicker />
+      </div>
       <v-spacer />
       <image-picker
         size="35px"
@@ -74,11 +75,13 @@ import bag from '@/store/bag'
 import beacon from '@/store/beacon'
 
 import ImagePicker from './ImagePicker.vue'
+import VehiclePicker from './VehiclePicker.vue'
 
 export default Vue.extend({
   name: 'VehicleBanner',
   components: {
     ImagePicker,
+    VehiclePicker,
   },
   data() {
     return {
@@ -166,7 +169,7 @@ export default Vue.extend({
 })
 </script>
 <style scoped>
-  #vehicle-name:hover .edit-icon{
+  #vehicle-banner:hover .action-buttons-container{
     display: inline-flex;
   }
 
@@ -181,10 +184,13 @@ export default Vue.extend({
     margin-bottom: 0 !important;
     position: relative;
   }
-  .edit-icon {
+
+  .action-buttons-container {
     display: none;
-    right: 0;
-    bottom: 0;
-    position: absolute;
+    position: fixed;
+    right: 70px;
+    z-index: 10;
+    align-items: center;
+    gap: 4px;
   }
 </style>
diff --git a/core/frontend/src/components/app/VehiclePicker.vue b/core/frontend/src/components/app/VehiclePicker.vue
new file mode 100644
index 0000000000..ceb5651e5d
--- /dev/null
+++ b/core/frontend/src/components/app/VehiclePicker.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="vehicle-picker">
+    <v-btn
+      :loading="loading"
+      class="mx-1"
+      fab
+      dark
+      x-small
+      @click="toggleDropdown"
+    >
+      <v-icon>{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+    </v-btn>
+
+    <v-menu
+      v-model="expanded"
+      :close-on-content-click="false"
+      offset-y
+      min-width="150"
+    >
+      <template #activator="{ }" />
+
+      <v-card>
+        <v-card-title class="subtitle-2 pa-2">
+          Other Vehicles detected on your network
+          <v-spacer />
+          <v-btn
+            icon
+            x-small
+            @click="refreshServices"
+          >
+            <v-icon small>
+              mdi-refresh
+            </v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-divider />
+
+        <v-list v-if="availableVehicles.length > 0" dense>
+          <v-list-item
+            v-for="vehicle in availableVehicles"
+            :key="vehicle.hostname"
+          >
+            <v-list-item-avatar>
+              <v-img
+                v-if="vehicle.imagePath"
+                :src="vehicle.imagePath"
+                :alt="vehicle.hostname"
+                aspect-ratio="1"
+                class="vehicle-image"
+              >
+                <template #error>
+                  <v-icon color="primary">
+                    mdi-submarine
+                  </v-icon>
+                </template>
+              </v-img>
+              <v-icon v-else color="primary">
+                mdi-submarine
+              </v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title>
+                <span class="vehicle-name">
+                  {{ vehicle.hostname }}
+                </span>
+                {{ allMyIps.includes(vehicle.ips[0]) ? '(This Vehicle)' : '' }}
+              </v-list-item-title>
+              <v-list-item-title v-for="ip in vehicle.ips" :key="ip" class="caption" @click="navigateToVehicle(ip)">
+                {{ ip }}
+                <v-icon x-small color="primary">
+                  mdi-launch
+                </v-icon>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+
+        <v-card-text v-else-if="!loading" class="text-center text--secondary">
+          <div v-if="error">
+            <v-icon color="error">
+              mdi-alert-circle
+            </v-icon>
+            <div class="caption">
+              {{ error }}
+            </div>
+          </div>
+          <div v-else>
+            No vehicles discovered
+          </div>
+        </v-card-text>
+
+        <v-card-text v-else class="text-center">
+          <v-progress-circular
+            indeterminate
+            size="24"
+            width="2"
+          />
+          <div class="caption mt-2">
+            Discovering vehicles...
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios'
+import Vue from 'vue'
+
+import system_information from '@/store/system-information'
+
+interface DiscoveredServices {
+  [ip: string]: string[]
+}
+
+interface Vehicle {
+  ips: string[]
+  hostname: string
+  imagePath?: string
+}
+
+export default Vue.extend({
+  name: 'VehiclePicker',
+  data() {
+    return {
+      expanded: false,
+      loading: false,
+      error: null as string | null,
+      availableVehicles: [] as Vehicle[],
+    }
+  },
+  computed: {
+    allMyIps(): string[] {
+      return system_information.system?.network.flatMap((network) => network.ips.map((ip) => ip.split('/')[0])) || []
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      this.expanded = !this.expanded
+      if (this.expanded && this.availableVehicles.length === 0) {
+        this.fetchDiscoveredServices()
+      }
+    },
+
+    async fetchDiscoveredServices() {
+      this.loading = true
+      this.error = null
+      this.availableVehicles = []
+
+      try {
+        const response = await axios.get('/beacon/v1.0/discovered_services', {
+          timeout: 10000,
+        })
+
+        const discoveredServices: DiscoveredServices = response.data
+        const ips = Object.keys(discoveredServices)
+
+        if (ips.length === 0) {
+          this.error = 'No vehicles discovered'
+          this.loading = false
+          return
+        }
+
+        let completedRequests = 0
+
+        ips.forEach(async (ip) => {
+          try {
+            const hostnameResponse = await axios.get(`http://${ip}/beacon/v1.0/hostname`, {
+              timeout: 5000,
+            })
+
+            let imagePath: string | undefined
+            try {
+              const imageResponse = await axios.get(`http://${ip}/bag/v1.0/get/vehicle.image_path`, {
+                timeout: 3000,
+              })
+              imagePath = `http://${ip}${imageResponse.data.url}`
+            } catch {
+              // Image not available, use fallback
+            }
+
+            const newVehicle: Vehicle = {
+              ips: [ip],
+              hostname: hostnameResponse.data,
+              imagePath,
+            }
+
+            const existingVehicleIndex = this.availableVehicles.findIndex(
+              (v) => v.hostname === newVehicle.hostname,
+            )
+
+            if (existingVehicleIndex >= 0) {
+              this.availableVehicles[existingVehicleIndex].ips.push(...newVehicle.ips)
+              if (newVehicle.imagePath && !this.availableVehicles[existingVehicleIndex].imagePath) {
+                this.availableVehicles[existingVehicleIndex].imagePath = newVehicle.imagePath
+              }
+            } else {
+              this.availableVehicles.push(newVehicle)
+            }
+
+            this.availableVehicles.sort((a, b) => a.hostname.localeCompare(b.hostname))
+          } catch (error) {
+            console.warn(`Failed to fetch hostname for ${ip}:`, error)
+          } finally {
+            completedRequests += 1
+            if (completedRequests === ips.length) {
+              this.loading = false
+              if (this.availableVehicles.length === 0) {
+                this.error = 'No accessible vehicles found'
+              }
+            }
+          }
+        })
+      } catch (error) {
+        console.error('Failed to fetch discovered services:', error)
+        this.error = 'Failed to discover vehicles'
+        this.availableVehicles = []
+        this.loading = false
+      }
+    },
+
+    async refreshServices() {
+      await this.fetchDiscoveredServices()
+    },
+
+    navigateToVehicle(ip: string) {
+      window.open(`http://${ip}`, '_blank')
+      this.expanded = false
+    },
+  },
+})
+</script>
+
+<style scoped>
+.vehicle-picker {
+  display: inline-block;
+}
+
+.caption:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.vehicle-image {
+  border-radius: 4px;
+}
+
+.v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.vehicle-name {
+  font-size: 1.2rem;
+}
+</style>
diff --git a/core/services/beacon/main.py b/core/services/beacon/main.py
index ee4447466d..ed923d6bae 100755
--- a/core/services/beacon/main.py
+++ b/core/services/beacon/main.py
@@ -17,7 +17,7 @@
 from fastapi_versioning import VersionedFastAPI, version
 from loguru import logger
 from uvicorn import Config, Server
-from zeroconf import IPVersion
+from zeroconf import IPVersion, ServiceBrowser, ServiceListener, Zeroconf
 from zeroconf.asyncio import AsyncServiceInfo, AsyncZeroconf
 
 from settings import ServiceTypes, SettingsV4
@@ -26,6 +26,46 @@
 SERVICE_NAME = "beacon"
 
 
+class BeaconServiceListener(ServiceListener):
+    """
+    Custom ServiceListener for the Beacon service to discover and track mDNS services
+    """
+
+    def __init__(self) -> None:
+        self.discovered_services: Dict[str, str] = {}
+
+    def update_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} updated")
+        self._process_service(zc, type_, name)
+
+    def remove_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} removed")
+        if name in self.discovered_services:
+            del self.discovered_services[name]
+
+    def add_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} added")
+        self._process_service(zc, type_, name)
+
+    def _process_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        """Process a service and extract its IP address"""
+        try:
+            info = zc.get_service_info(type_, name)
+            if info and info.addresses:
+                # Convert the first IP address from bytes to string
+                ip_address = socket.inet_ntoa(info.addresses[0])
+                self.discovered_services[name] = ip_address
+                logger.info(f"Service {name} at {ip_address}")
+            else:
+                logger.warning(f"No address info available for service {name}")
+        except Exception as e:
+            logger.warning(f"Error processing service {name}: {e}")
+
+    def get_discovered_services(self) -> Dict[str, str]:
+        """Return a copy of the discovered services dictionary"""
+        return self.discovered_services.copy()
+
+
 class AsyncRunner:
     def __init__(self, ip_version: IPVersion, interface: str, interface_name: str) -> None:
         self.ip_version = ip_version
@@ -78,6 +118,11 @@ class Beacon:
 
     def __init__(self) -> None:
         self.runners: Dict[str, AsyncRunner] = {}
+        # Initialize zeroconf listener components
+        self.zeroconf: Optional[Zeroconf] = None
+        self.service_listener: Optional[BeaconServiceListener] = None
+        self.service_browser: Optional[ServiceBrowser] = None
+
         try:
             self.manager = Manager(SERVICE_NAME, SettingsV4)
         except Exception as e:
@@ -228,10 +273,50 @@ def create_user_runners(self) -> Dict[str, AsyncRunner]:
                     runners[f"{interface_name}-{domain}-{ip}"] = runner
         return runners
 
+    def start_zeroconf_listener(self) -> None:
+        """
+        Start the zeroconf listener to discover services on the network
+        """
+        if self.zeroconf is None:
+            try:
+                self.zeroconf = Zeroconf()
+                self.service_listener = BeaconServiceListener()
+                self.service_browser = ServiceBrowser(self.zeroconf, "_http._tcp.local.", self.service_listener)
+                logger.info("Zeroconf listener started, discovering _http._tcp.local. services")
+            except Exception as e:
+                logger.warning(f"Failed to start zeroconf listener: {e}")
+
+    def stop_zeroconf_listener(self) -> None:
+        """
+        Stop the zeroconf listener and clean up resources
+        """
+        if self.zeroconf is not None:
+            try:
+                if self.service_browser is not None:
+                    self.service_browser.cancel()
+                    self.service_browser = None
+                self.zeroconf.close()
+                self.zeroconf = None
+                self.service_listener = None
+                logger.info("Zeroconf listener stopped")
+            except Exception as e:
+                logger.warning(f"Error stopping zeroconf listener: {e}")
+
+    def get_discovered_services(self) -> Dict[str, str]:
+        """
+        Get the dictionary of discovered services (service_name: ip_address)
+        """
+        if self.service_listener is not None:
+            return self.service_listener.get_discovered_services()
+        return {}
+
     async def run(self) -> None:
         """
         This is the "main loop" from Beacon.
         """
+        # Start the zeroconf listener when the beacon starts running
+        self.start_zeroconf_listener()
+
         while True:
             # re-load settings in case something changed
             self.manager.load()
@@ -263,6 +348,8 @@ async def run(self) -> None:
 
     async def stop(self) -> None:
         await asyncio.gather(*[runner.unregister_services() for runner in self.runners.values()])
+        # Stop the zeroconf listener when the beacon stops
+        self.stop_zeroconf_listener()
 
 
 logging.basicConfig(level=logging.DEBUG)
@@ -319,6 +406,30 @@ def get_ip(request: Request) -> Any:
         return IpInfo(client_ip=request.scope["client"][0], interface_ip=request.scope["server"][0])
 
 
+@app.get("/discovered_services", response_model=Dict[str, List[str]], summary="Discovered mDNS services")
+@version(1, 0)
+def get_discovered_services() -> Any:
+    """Returns a dictionary with IP addresses as keys and lists of service names as values"""
+    services = {
+        service.replace("_http._tcp.local.", ""): ip for service, ip in beacon.get_discovered_services().items()
+    }
+
+    # Group services by IP address
+    ip_to_services: Dict[str, List[str]] = {}
+
+    for service_name, ip in services.items():
+        # Remove trailing dot if present
+        clean_name = service_name.rstrip(".")
+
+        # Initialize the IP list if it doesn't exist
+        if ip not in ip_to_services:
+            ip_to_services[ip] = []
+
+        ip_to_services[ip].append(clean_name)
+
+    return ip_to_services
+
+
 app = VersionedFastAPI(app, version="1.0.0", prefix_format="/v{major}.{minor}", enable_latest=True)