frontend: detect and list other vehicles on blueos

[Williangalvani]

Helps manage multiple vehicles on the same network. requires that the vehicles are able to see each other

Screen.Recording.2025-08-30.at.18.28.53.mov

Summary by Sourcery

Enable automatic discovery of other vehicles on the local network via mDNS in the backend and add a front-end widget for listing and navigating to those vehicles

New Features:

• Discover networked vehicles via mDNS in the beacon service and expose them through a /discovered_services API endpoint
• Add a VehiclePicker Vue component to display and navigate to other detected vehicles
• Integrate the VehiclePicker into the VehicleBanner UI with updated action buttons

Enhancements:

• Manage Zeroconf listener lifecycle in the Beacon service to start and stop mDNS discovery

[sourcery-ai]

Reviewer's Guide

This PR adds mDNS-based vehicle discovery to the backend beacon service, exposes a new REST endpoint for discovered services, and updates the Vue frontend to display and navigate between detected vehicles via a new picker component.

Sequence diagram for frontend vehicle discovery and navigation

sequenceDiagram
    actor User
    participant VehiclePicker (Vue)
    participant Backend (REST API)
    participant OtherVehicle
    User->>VehiclePicker (Vue): Clicks vehicle picker button
    VehiclePicker->>Backend (REST API): GET /beacon/v1.0/discovered_services
    Backend-->>VehiclePicker: Returns discovered vehicles (IP + names)
    loop For each discovered vehicle
        VehiclePicker->>OtherVehicle: GET /beacon/v1.0/hostname
        OtherVehicle-->>VehiclePicker: Returns hostname
        VehiclePicker->>OtherVehicle: GET /bag/v1.0/get/vehicle.image_path
        OtherVehicle-->>VehiclePicker: Returns image path
    end
    User->>VehiclePicker: Clicks on vehicle IP
    VehiclePicker->>User: Opens vehicle UI in new tab

Loading

Entity relationship diagram for discovered services API response

erDiagram
    VEHICLE {
      string hostname
      string imagePath
      string[] ips
    }
    DISCOVERED_SERVICES {
      string ip
      string[] service_names
    }
    DISCOVERED_SERVICES ||--o| VEHICLE : contains

Loading

Class diagram for BeaconServiceListener and Beacon changes

classDiagram
    class BeaconServiceListener {
      +Dict discovered_services
      +update_service(zc, type_, name)
      +remove_service(zc, type_, name)
      +add_service(zc, type_, name)
      +_process_service(zc, type_, name)
      +get_discovered_services()
    }
    class Beacon {
      +Dict runners
      +Optional zeroconf
      +Optional service_listener
      +Optional service_browser
      +start_zeroconf_listener()
      +stop_zeroconf_listener()
      +get_discovered_services()
      +run()
      +stop()
    }
    Beacon o-- BeaconServiceListener : uses

Loading

Class diagram for VehiclePicker Vue component

classDiagram
    class VehiclePicker {
      +expanded: boolean
      +loading: boolean
      +error: string|null
      +availableVehicles: Vehicle[]
      +toggleDropdown()
      +fetchDiscoveredServices()
      +refreshServices()
      +navigateToVehicle(ip)
      +allMyIps: string[] (computed)
    }
    class Vehicle {
      +ips: string[]
      +hostname: string
      +imagePath: string
    }
    VehiclePicker o-- Vehicle : manages

Loading

File-Level Changes

Change	Details	Files
Implement mDNS discovery in Beacon service	Add BeaconServiceListener class with add/update/remove hooks Integrate Zeroconf listener lifecycle in Beacon (start/stop) Expose get_discovered_services in Beacon and integrate with run/stop loops	core/services/beacon/main.py
Expose discovered services via HTTP API	Add GET /discovered_services endpoint Transform raw service data into IP→service-name mapping Handle name cleaning and grouping by IP	core/services/beacon/main.py
Embed VehiclePicker in the banner UI	Import and register VehiclePicker component Add toggle button and container in VehicleBanner.vue Adjust CSS for hover-triggered action-buttons-container	core/frontend/src/components/app/VehicleBanner.vue
Create VehiclePicker dropdown component	Implement dropdown UI to fetch discovered services Fetch hostnames and optional images via axios per IP Group vehicles, handle loading/error states, and navigation	core/frontend/src/components/app/VehiclePicker.vue

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.