diff --git a/openpilot/starpilot/galaxy/tests/test_speed_source_preference.mjs b/openpilot/starpilot/galaxy/tests/test_speed_source_preference.mjs
new file mode 100644
index 0000000000..88d5ba9576
--- /dev/null
+++ b/openpilot/starpilot/galaxy/tests/test_speed_source_preference.mjs
@@ -0,0 +1,14 @@
+import assert from "node:assert/strict"
+import { validDocument } from "../web/js/onroad-layout.js"
+const metadata = { profiles: Object.fromEntries(["large", "compact"].map(name => [name, {
+ bounds: {x:0,y:0,width:100,height:100}, widgets:{}, reservedZones:[]
+}])) }
+const document = { version:4, palette:{cardFill:"#000000A6",cardBorder:"#C4CDD0B4",text:"#FFFFFFFF"},
+ layouts:{large:{},compact:{}},widgetColors:{large:{},compact:{}},roadColors:{large:{},compact:{}} }
+assert.equal(validDocument(document, metadata), true)
+for (const flag of [true, false]) assert.equal(validDocument({...document,speedSources:flag},metadata),true)
+for (const flag of [1, 0, null, "true", {}, []]) assert.equal(validDocument({...document,speedSources:flag},metadata),false)
+for (const malformed of [null,undefined,[],1,"layout",{}]) assert.equal(validDocument(malformed,metadata),false)
+assert.equal(validDocument({...document,unexpected:true},metadata),false)
+assert.equal(validDocument({...document,layouts:null},metadata),false)
+console.log("PASS speed source preference: absent/booleans/invalid flags/null/undefined/malformed documents")
diff --git a/openpilot/starpilot/galaxy/web/assets/galaxy-icon-180.png b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-180.png
new file mode 100644
index 0000000000..62972b9778
Binary files /dev/null and b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-180.png differ
diff --git a/openpilot/starpilot/galaxy/web/assets/galaxy-icon-192.png b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-192.png
new file mode 100644
index 0000000000..8547af3969
Binary files /dev/null and b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-192.png differ
diff --git a/openpilot/starpilot/galaxy/web/assets/galaxy-icon-512.png b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-512.png
new file mode 100644
index 0000000000..3b9dea092f
Binary files /dev/null and b/openpilot/starpilot/galaxy/web/assets/galaxy-icon-512.png differ
diff --git a/openpilot/starpilot/galaxy/web/assets/galaxy-icon.svg b/openpilot/starpilot/galaxy/web/assets/galaxy-icon.svg
new file mode 100644
index 0000000000..e18661d786
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/assets/galaxy-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/openpilot/starpilot/galaxy/web/assets/starpilot-logo.svg b/openpilot/starpilot/galaxy/web/assets/starpilot-logo.svg
new file mode 100644
index 0000000000..b326657a86
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/assets/starpilot-logo.svg
@@ -0,0 +1 @@
+Galaxy
+
+
+ Galaxy Opening Galaxy…
Try again
+ Enable JavaScript to open Galaxy.
+
+
+
+
+
diff --git a/openpilot/starpilot/galaxy/web/js/ambient-stars.js b/openpilot/starpilot/galaxy/web/js/ambient-stars.js
new file mode 100644
index 0000000000..044d4e5964
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/ambient-stars.js
@@ -0,0 +1,13 @@
+export function spawnAmbientStars(background, random = Math.random) {
+ if (!background || background.querySelector(".galaxy-hero")) return 0
+ for (let index = 0; index < 14; index++) {
+ const star = background.ownerDocument.createElement("i")
+ star.className = "galaxy-hero"
+ star.style.left = `${(random() * 100).toFixed(2)}%`
+ star.style.top = `${(random() * 100).toFixed(2)}%`
+ star.style.animationDelay = `${(random() * 4).toFixed(2)}s`
+ star.style.width = star.style.height = random() > 0.6 ? "3px" : "2px"
+ background.appendChild(star)
+ }
+ return 14
+}
diff --git a/openpilot/starpilot/galaxy/web/js/android-auto.js b/openpilot/starpilot/galaxy/web/js/android-auto.js
new file mode 100644
index 0000000000..f2ea67f9fd
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/android-auto.js
@@ -0,0 +1,457 @@
+import { BluetoothDeviceList } from "./bluetooth-devices.js"
+
+export function uploadPackage(path, options, progress, makeRequest = () => new XMLHttpRequest()) {
+ return new Promise((resolve, reject) => {
+ const xhr = makeRequest()
+ let settled = false
+ const abort = () => xhr.abort()
+ const finish = (callback, value) => {
+ if (settled) return
+ settled = true
+ options.signal?.removeEventListener("abort", abort)
+ callback(value)
+ }
+ xhr.open("POST", path)
+ xhr.withCredentials = true
+ xhr.timeout = 180000
+ xhr.setRequestHeader("Content-Type", "application/octet-stream")
+ xhr.upload.onprogress = (event) => {
+ if (!settled && event.lengthComputable) progress({ loaded: event.loaded, total: event.total })
+ }
+ xhr.onload = () => finish(resolve, { status: xhr.status, ok: xhr.status >= 200 && xhr.status < 300,
+ json: async () => JSON.parse(xhr.responseText) })
+ xhr.onerror = () => finish(reject, new Error("Upload interrupted. Check your connection and retry."))
+ xhr.ontimeout = () => finish(reject, new Error("Upload timed out. Check your connection and retry."))
+ xhr.onabort = () => finish(reject, new Error("Upload canceled."))
+ options.signal?.addEventListener("abort", abort, { once: true })
+ if (options.signal?.aborted) { finish(reject, new Error("Upload canceled.")); return }
+ xhr.send(options.body)
+ })
+}
+
+const ADDRESS = /^(?:[0-9A-F]{2}:){5}[0-9A-F]{2}$/
+const PROMPT = new Set(["pin", "passkey", "confirmation", "authorization", "display_pin", "display_passkey"])
+
+export function validPromptInput(prompt, value) {
+ if (prompt?.kind === "pin") return /^[\x20-\x7E]{1,16}$/.test(value)
+ if (prompt?.kind === "passkey") return /^[0-9]{1,6}$/.test(value)
+ return ["confirmation", "authorization"].includes(prompt?.kind) && value === ""
+}
+
+export function validPairingStatus(value) {
+ if (!value || typeof value.active !== "boolean" || typeof value.approved !== "boolean") return false
+ if (value.devices !== undefined && (!Array.isArray(value.devices) || !value.devices.every(validDiscoveredDevice))) return false
+ if (value.discovering !== undefined && typeof value.discovering !== "boolean") return false
+ if (value.state !== undefined && !["idle", "pairing", "paired", "failed", "connecting", "connected"].includes(value.state)) return false
+ if (value.error !== undefined && typeof value.error !== "string") return false
+ const receiver = value.receiver
+ if (receiver !== null && (!ADDRESS.test(receiver?.address) || typeof receiver.name !== "string" || receiver.name.length > 80)) return false
+ const prompt = value.prompt
+ return prompt === null || (receiver !== null && /^[0-9a-f]{32}$/.test(prompt?.id) && PROMPT.has(prompt.kind) &&
+ typeof prompt.value === "string" && prompt.value.length <= 16 && typeof prompt.displayOnly === "boolean")
+}
+
+export function validDiscoveredDevice(value) {
+ return value !== null && ADDRESS.test(value?.address) && typeof value.name === "string" && value.name.length <= 80 &&
+ ["paired", "connected", "android_auto"].every((key) => typeof value[key] === "boolean")
+}
+
+function validSelected(value) {
+ return value === null || (ADDRESS.test(value?.address) && typeof value.name === "string" && value.name.length <= 80)
+}
+
+function validSetup(value) {
+ return value && typeof value.enabled === "boolean" && typeof value.bluetoothEnabled === "boolean" &&
+ typeof value.parked === "boolean" && typeof value.installReady === "boolean" && typeof value.serviceReady === "boolean" &&
+ value.identity && typeof value.identity.installed === "boolean" && value.import &&
+ Number.isSafeInteger(value.maxUploadBytes) && value.maxUploadBytes > 0
+}
+
+export class AndroidAutoFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ uploader = uploadPackage, later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, uploader, later, cancelTimer })
+ this.active = false
+ this.generation = 0
+ this.controller = null
+ this.timer = null
+ this.pollTimer = null
+ this.setup = null
+ this.pairing = null
+ this.selected = null
+ this.runtime = null
+ this.receivers = []
+ this.endReason = ""
+ this.busy = false
+ this.refreshing = false
+ this.deviceList = new BluetoothDeviceList()
+ this.receiverList = new BluetoothDeviceList()
+ this.uploadProgress = null
+ this.error = ""
+ }
+
+ emit() { this.publish({ setup: this.setup, pairing: this.pairing, selected: this.selected, runtime: this.runtime,
+ receivers: this.receivers,
+ endReason: this.endReason, busy: this.busy, uploadProgress: this.uploadProgress, error: this.error }) }
+
+ stop(cancelPair = false) {
+ if (cancelPair && this.active && this.pairing?.active) {
+ this.fetcher("./api/android-auto/pairing/cancel", { method: "POST", credentials: "same-origin", keepalive: true,
+ headers: { "Content-Type": "application/json" }, body: "{}" }).catch(() => {})
+ }
+ this.active = false
+ this.generation++
+ this.controller?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.controller = this.timer = this.pollTimer = null
+ this.busy = false
+ this.refreshing = false
+ this.deviceList.reset()
+ this.receiverList.reset()
+ this.uploadProgress = null
+ this.pairing = null
+ this.emit()
+ }
+
+ start() {
+ this.stop()
+ this.active = true
+ return this.refresh()
+ }
+
+ async request(path, options = {}, timeout = 8000, transport = this.fetcher, background = false) {
+ if (!background) {
+ // A user action supersedes a pending poll, including a delayed JSON body.
+ this.generation++
+ this.controller?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.pollTimer = null
+ this.refreshing = false
+ }
+ const generation = this.generation
+ const controller = new AbortController()
+ this.controller = controller
+ if (!background) { this.busy = true; this.emit() }
+ let timedOut = false
+ this.timer = this.later(() => { timedOut = true; controller.abort() }, timeout)
+ try {
+ const response = await transport(path, { ...options, credentials: "same-origin", cache: "no-store", signal: controller.signal })
+ if (!this.active || this.generation !== generation || controller.signal.aborted) return null
+ if (response.status === 401) { this.stop(); this.unauthorized(); return null }
+ const data = await response.json()
+ if (!this.active || this.generation !== generation || controller.signal.aborted) return null
+ if (!response.ok) throw new Error(data?.error || "Android Auto setup is unavailable")
+ this.error = ""
+ return data
+ } catch (error) {
+ if (this.active && this.generation === generation) {
+ this.error = timedOut ? "Android Auto took too long to respond. Try again." :
+ error instanceof Error ? error.message : "Android Auto setup is unavailable"
+ }
+ return null
+ } finally {
+ if (this.controller === controller) {
+ this.cancelTimer(this.timer)
+ this.controller = this.timer = null
+ if (!background) {
+ this.busy = false
+ if (this.active && this.generation === generation && this.pollTimer === null) {
+ this.pollTimer = this.later(() => this.refresh(), this.pairing?.active ? 1000 : 5000)
+ }
+ }
+ this.emit()
+ }
+ }
+ }
+
+ async refresh() {
+ if (!this.active || this.busy || this.refreshing) return
+ this.refreshing = true
+ if (this.pollTimer !== null) { this.cancelTimer(this.pollTimer); this.pollTimer = null }
+ const generation = this.generation
+ const setup = await this.request("./api/android-auto/setup", {}, 8000, this.fetcher, true)
+ if (!this.active || this.generation !== generation) return
+ const setupValid = setup && validSetup(setup)
+ if (setupValid) this.setup = setup
+ else if (setup) this.error = "Android Auto setup response changed"
+ if (setupValid && !setup.enabled) {
+ this.pairing = this.selected = this.runtime = null
+ this.receivers = []
+ this.deviceList.reset()
+ this.receiverList.reset()
+ this.emit()
+ }
+ if (this.active && this.generation === generation && setupValid && setup.enabled) {
+ const result = await this.request("./api/android-auto/pairing/status", {}, 8000, this.fetcher, true)
+ if (!this.active || this.generation !== generation) return
+ if (result && validPairingStatus(result.pairing) && validSelected(result.selectedReceiver)) {
+ const wasActive = this.pairing?.active
+ if (!result.pairing.active) this.deviceList.reset()
+ this.pairing = { ...result.pairing, devices: this.deviceList.update(result.pairing.devices || []) }
+ this.selected = result.selectedReceiver
+ this.runtime = result.runtime && typeof result.runtime === "object" ? result.runtime : null
+ if (wasActive && !this.pairing.active && !this.selected && !this.endReason) this.endReason = "ended"
+ }
+ else if (result) this.error = "Pairing status response changed"
+ }
+ this.refreshing = false
+ this.emit()
+ if (this.active && this.generation === generation) {
+ const delay = this.pairing?.active || this.setup?.import?.state === "running" ? 1000 : 5000
+ this.pollTimer = this.later(() => this.refresh(), delay)
+ }
+ }
+
+ async action(path, body = {}, timeout = 12000) {
+ if (!this.active || this.busy || !this.setup?.parked || !this.setup?.enabled) return false
+ const result = await this.request(path, { method: "POST", headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body) }, timeout)
+ if (result === null) return false
+ if (path.endsWith('/pairing')) this.endReason = ""
+ if (path.endsWith('/cancel')) this.endReason = "canceled"
+ await this.refresh()
+ return true
+ }
+
+ async selectDevice(address) {
+ if (!ADDRESS.test(address) || !this.pairing?.active || this.pairing?.prompt ||
+ ["pairing", "connecting"].includes(this.pairing?.state) || this.runtime?.running ||
+ !this.pairing?.devices?.some((device) => device.address === address)) return false
+ return this.action("./api/android-auto/pairing/select", { address })
+ }
+
+ async loadReceivers() {
+ if (!this.active || this.busy || !this.setup?.enabled || this.pairing?.active) return false
+ const result = await this.request("./api/android-auto/receivers")
+ if (result === null) return false
+ if (!Array.isArray(result.receivers) || !result.receivers.every((car) => car !== null && validSelected(car))) {
+ this.error = "Paired car list changed"
+ this.emit()
+ return false
+ }
+ this.receivers = this.receiverList.update(result.receivers)
+ this.emit()
+ return true
+ }
+
+ async control(action, extra = {}) {
+ if (!this.active || this.busy || !this.setup?.enabled || this.pairing?.active ||
+ !["start", "stop", "select_receiver", "auto_connect"].includes(action)) return false
+ const result = await this.request("./api/android-auto/control", { method: "POST",
+ headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, ...extra }) })
+ if (result === null) return false
+ await this.refresh()
+ return true
+ }
+
+ async setEnabled(enabled) {
+ if (!this.active || this.busy || typeof enabled !== "boolean" ||
+ enabled && (!this.setup?.parked || !this.setup?.installReady)) return false
+ const result = await this.request("./api/android-auto/enable", { method: "POST",
+ headers: { "Content-Type": "application/json" }, body: JSON.stringify({ enabled }) })
+ if (result === null) return false
+ await this.refresh()
+ return true
+ }
+
+ async upload(file) {
+ if (!this.active || this.busy || !this.setup?.parked || !this.setup?.enabled ||
+ !file || !Number.isSafeInteger(file.size) || file.size <= 0 || file.size > this.setup.maxUploadBytes) {
+ this.error = "Choose an APK, XAPK, or APKM within the shown size limit."
+ this.emit()
+ return false
+ }
+ this.uploadProgress = { loaded: 0, total: file.size }
+ const generation = this.generation + 1
+ const transport = (path, options) => this.uploader(path, options, (progress) => {
+ if (this.active && generation === this.generation) { this.uploadProgress = progress; this.emit() }
+ })
+ const result = await this.request("./api/android-auto/upload", { method: "POST",
+ headers: { "Content-Type": "application/octet-stream" }, body: file }, 180000, transport)
+ this.uploadProgress = null
+ this.emit()
+ if (result === null) return false
+ await this.refresh()
+ return true
+ }
+}
+
+export const AndroidAutoPage = {
+ props: { mode: { type: String, required: true }, localAccess: { type: Boolean, required: true },
+ unauthorized: { type: Function, required: true } },
+ data: () => ({ setup: null, pairing: null, selected: null, runtime: null, receivers: [], endReason: "", busy: false, error: "",
+ pairValue: "", packageFile: null, uploadProgress: null }),
+ mounted() {
+ this.feed = new AndroidAutoFeed({ publish: (value) => Object.assign(this, value), unauthorized: this.unauthorized })
+ this.visibility = () => document.hidden ? this.feed.stop(true) : this.feed.start()
+ document.addEventListener("visibilitychange", this.visibility)
+ if (!document.hidden) this.feed.start()
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibility); this.feed?.stop(true) },
+ watch: {
+ mode() { if (!document.hidden) this.feed?.start(); else this.feed?.stop(true) },
+ localAccess() { if (!document.hidden) this.feed?.start(); else this.feed?.stop(true) },
+ 'pairing.prompt.id'() { this.pairValue = "" },
+ },
+ computed: {
+ canRespond() { return validPromptInput(this.pairing?.prompt, this.pairValue) },
+ packageError() {
+ if (!this.packageFile) return ""
+ if (!Number.isSafeInteger(this.packageFile.size) || this.packageFile.size <= 0) return "The selected file is empty or its size cannot be read."
+ if (this.setup && this.packageFile.size > this.setup.maxUploadBytes) return "The selected package exceeds the maximum size shown below."
+ return ""
+ },
+ uploadReason() {
+ if (!this.packageFile) return "Choose your Android Auto package."
+ if (this.packageError) return this.packageError
+ if (!this.setup?.parked) return "Use offroad mode or Park to upload your package."
+ if (!this.setup.enabled && !this.setup.installReady) return "The Android Auto display and encoder must be installed before uploading."
+ if (this.setup.import?.state === "running") return "Wait for the current package verification to finish."
+ if (this.busy) return "Waiting for Android Auto setup to respond…"
+ return ""
+ },
+ pairingReason() {
+ if (!this.setup) return "Load setup status first."
+ if (!this.setup.installReady) return "This build is missing the Android Auto display or encoder."
+ if (!this.setup.enabled) return "Enable Android Auto in Prepare."
+ if (!this.setup.serviceReady) return "Waiting for the Android Auto service to start."
+ if (!this.setup.bluetoothEnabled) return "Turn on Bluetooth on the Bluetooth page."
+ if (!this.setup.parked) return "Use offroad mode or Park before starting pairing."
+ if (!this.setup.identity.installed) return "Upload and verify your Android Auto package in Prepare."
+ if (this.runtime?.running) return "Stop projection before searching or pairing."
+ return ""
+ },
+ waitingForCar() { return this.pairing?.active && !this.pairing?.receiver && !this.pairing?.prompt && !this.pairing?.approved &&
+ !["pairing", "connecting", "paired", "connected", "failed"].includes(this.pairing?.state) },
+ deviceSelectionBlocked() { return this.busy || !!this.pairingReason || !this.pairing?.active ||
+ !!this.pairing?.prompt || ["pairing", "connecting"].includes(this.pairing?.state) || !!this.runtime?.running },
+ },
+ methods: {
+ refresh() { return this.feed.refresh() },
+ setEnabled(enabled) { return this.feed.setEnabled(enabled) },
+ startPairing() {
+ if (this.pairingReason || this.runtime?.running) return false
+ return this.feed.action("./api/android-auto/pairing")
+ },
+ selectDevice(address) { return this.feed.selectDevice(address) },
+ cancelPairing() { return this.feed.action("./api/android-auto/pairing/cancel") },
+ respond(accepted) {
+ const prompt = this.pairing?.prompt
+ if (!prompt || prompt.displayOnly || accepted && !this.canRespond) return
+ const value = accepted && ["pin", "passkey"].includes(prompt.kind) ? this.pairValue : ""
+ return this.feed.action("./api/android-auto/pairing/response", { prompt_id: prompt.id, accepted, value })
+ },
+ choosePackage(event) { this.packageFile = event.target.files?.[0] || null },
+ async upload() {
+ if (this.uploadReason) return false
+ const file = this.packageFile
+ if (!this.setup.enabled && !await this.feed.setEnabled(true)) return false
+ return this.feed.upload(file)
+ },
+ loadReceivers() { return this.feed.loadReceivers() },
+ control(action, extra = {}) { return this.feed.control(action, extra) },
+ },
+ template: `
+
+ Android Auto
+
Show StarPilot on your car’s wireless Android Auto display. Enable projection, upload your Android Auto package, then find your car or wireless adapter. Setup works here over local or remote Galaxy.
+
{{ error }}
+
{{ error ? "Setup could not be loaded." : "Checking Android Auto setup…" }} Retry
+
+ 1. Prepare
+
Android Auto display and encoder are not installed on this build. Projection setup is unavailable.
+
Starting the Android Auto service. Pairing is unavailable until it is ready.
+
Enable Android Auto
+ Turn Off Android Auto
+
Open Bluetooth and turn it on before pairing.
+
Use offroad mode or Park to upload a package or pair your car.
+
{{ setup.identity.message || (setup.identity.installed ? 'Your Android Auto package is ready.' : 'Upload your Android Auto APK, XAPK, or APKM.') }}
+
Where do I get the Android Auto package?
+
+ Open Android Auto by Google LLC on APKMirror , a third-party download site.
+ Download the Android Auto app package to this phone or computer. Choose the app's APK or bundle download; you do not need the APKMirror Installer app.
+ Return here, choose the downloaded APK, XAPK, or APKM file, and press Upload Package. Leave bundles zipped.
+
+ You do not install an Android app on the comma. Galaxy imports the information needed to connect to your car and checks that it is usable.
+
+
{{ setup.identity.warning }}
+
Checking your package…
+
Package verification failed: {{ setup.import.error || 'Try another package.' }}
+
Package verified and ready.
+
{{ setup.enabled ? 'Upload Package' : 'Enable and Upload Package' }}
+
Selected: {{ packageFile.name }} ({{ Math.ceil(packageFile.size / 1048576) }} MB).
+
+
+ Uploading {{ Math.round(100 * uploadProgress.loaded / uploadProgress.total) }}%
+
+
{{ uploadReason }}
+
Maximum package size: {{ Math.floor(setup.maxUploadBytes / 1048576) }} MB. Your package stays on this device.
+
2. Find and Pair
+
Using a wireless Android Auto adapter? Pair with your vehicle first, then pair with the adapter. Select the adapter to start projection.
+
Look for an adapter name such as AndroidAuto-XXXX. Keep your vehicle paired for calls.
+
Finish package verification before pairing.
+
Saved Android Auto receiver: {{ selected.name }}. Find a car or wireless adapter in offroad mode or Park.
+
Pairing canceled. Start again when your car is ready.
+
The pairing window ended without selecting a car. Try again in offroad mode or Park.
+
Open your car’s phone pairing screen or put your wireless adapter in pairing mode, then find it here.
+
{{ pairing.discovering ? "Searching nearby Bluetooth devices…" : "Search is open. Choose your car or wireless adapter below." }}
+
Approved {{ pairing.receiver?.name }}. Waiting for Bluetooth pairing to finish…
+
Pairing with {{ pairing.receiver?.name || 'the selected device' }}…
+
Connecting to {{ pairing.receiver?.name || 'the selected device' }}…
+
{{ pairing.receiver?.name || 'Device' }} {{ pairing.state === 'connected' ? 'connected' : 'paired' }} over Bluetooth.
+
{{ pairing.error }}
+
+
No devices found yet. Keep the car or adapter’s pairing screen open.
+
+ {{ device.name }} {{ device.paired ? 'Connect' : 'Pair' }}
+
+
Bluetooth pairing alone does not confirm Android Auto support.
+
+
{{ pairing.receiver.name }}
+
{{ pairing.prompt.kind === 'confirmation' ? 'Check that this code matches your car, then confirm.' :
+ pairing.prompt.kind === 'pin' ? 'Enter the PIN shown by your car.' :
+ pairing.prompt.kind === 'passkey' ? 'Enter your car’s passkey.' :
+ pairing.prompt.kind === 'authorization' ? 'Allow this car to pair?' : 'Enter this code in your car.' }}
+
{{ pairing.prompt.value }}
+
+
+ Reject
+ {{ pairing.prompt.kind === 'pin' ? 'Send PIN' : pairing.prompt.kind === 'passkey' ? 'Send Passkey' : 'Confirm' }}
+
+
{{ pairingReason }}
+
For a wireless adapter, connect your paired car in Galaxy Bluetooth first. That car is saved for automatic reconnection before the adapter starts.
+
Car: {{ runtime.companion_name }}
+
Find Car or Adapter
+ Cancel Search / Pairing
+ Refresh
+
3. Connect
+
Selected Android Auto receiver: {{ selected.name }}.
+
Select a paired Android Auto car before connecting.
+
Projection: {{ runtime.state }} — {{ runtime.detail }} .
+
+ Find Paired Cars
+ Select {{ car.name }}
+
+
+ Start Projection
+ Stop Projection
+ Automatic Connection: {{ runtime?.auto_connect ? 'On' : 'Off' }}
+
+
Wired USB setup is unavailable.
+
If this device's video encoder cannot start, projection stops and reports the error here.
+
Projection support still needs validation with your car and this device.
+
`,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/app.js b/openpilot/starpilot/galaxy/web/js/app.js
new file mode 100644
index 0000000000..5730ed7819
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/app.js
@@ -0,0 +1,226 @@
+import { createApp, reactive, defineAsyncComponent } from "../vendor/vue/vue.esm-browser.js"
+import { route, navigate, startRouter } from "./router.js"
+import { loadCatalog } from "./startup.js"
+import { Tools } from "./tools.js"
+const Logs = page(() => import("./logs.js").then((module) => module.Logs))
+const SoftwarePage = page(() => import("./software-status.js").then((module) => module.SoftwarePage))
+const NavigationPage = page(() => import("./navigation.js").then((module) => module.NavigationPage))
+const ModelsPage = page(() => import("./models.js").then((module) => module.ModelsPage))
+const LaboratoryPage = page(() => import("./model-laboratory.js").then((module) => module.LaboratoryPage))
+import { SettingsPage } from "./settings.js"
+import { ToggleSearch } from "./toggle-search.js"
+const PlotsPage = page(() => import("./plots.js").then((module) => module.PlotsPage))
+const FlmPage = page(() => import("./flm.js").then((module) => module.FlmPage))
+import { LocalAuth } from "./auth-client.js"
+import { Home } from "./home.js"
+const LocalRecordingsPage = page(() => import("./record-history.js").then((module) => module.LocalRecordingsPage))
+const CamerasPage = page(() => import("./cameras.js").then((module) => module.CamerasPage))
+const SentryEventsPage = page(() => import("./sentry.js").then((module) => module.SentryEventsPage))
+const VasmPage = page(() => import("./vasm.js").then((module) => module.VasmPage))
+const PipPage = page(() => import("./pip.js").then((module) => module.PipPage))
+import { DrivingPage, drivingPage } from "./driving.js"
+const LongitudinalCurvesPage = page(() => import("./longitudinal-curves.js").then((module) => module.LongitudinalCurvesPage))
+import { DevicePreferencesPage, devicePage } from "./device-preferences.js"
+const BluetoothPage = page(() => import("./bluetooth.js").then((module) => module.BluetoothPage))
+const AndroidAutoPage = page(() => import("./android-auto.js").then((module) => module.AndroidAutoPage))
+const VehicleControlsPage = page(() => import("./vehicle-controls.js").then((module) => module.VehicleControlsPage))
+const OnroadLayoutPage = page(() => import("./onroad-layout.js").then((module) => module.OnroadLayoutPage))
+const GalaxyPage = page(() => import("./galaxy.js").then((module) => module.GalaxyPage))
+import { DevicePicker } from "./device-picker.js"
+import { DeviceState } from "./device-state.js"
+import { InstallApp } from "./install-app.js"
+import { spawnAmbientStars } from "./ambient-stars.js"
+
+function page(loader) {
+ return defineAsyncComponent({
+ loader, delay: 150, timeout: 10000,
+ loadingComponent: { template: 'Opening page…
' },
+ errorComponent: { template: 'This page could not open. Try again
',
+ methods: { reload() { location.reload() } } },
+ onError(_error, retry, fail, attempts) { if (attempts < 2) setTimeout(retry, 500); else fail() },
+ })
+}
+
+const THEME_KEY = "galaxy-preview-theme"
+const PIN_KEY = "galaxy-preview-nav-pinned"
+const stored = (key) => { try { return localStorage.getItem(key) } catch { return null } }
+const save = (key, value) => { try { localStorage.setItem(key, value) } catch {} }
+
+const state = reactive({
+ tools: [],
+ loading: true,
+ error: "",
+ pageError: "",
+ monitorMode: "sample",
+ drawerOpen: false,
+ navPinned: stored(PIN_KEY) === "true",
+ theme: stored(THEME_KEY) === "light" ? "light" : "dark",
+ searchPage: "",
+})
+const authState = reactive({ status: "checking", error: "", localAccess: false, gatewayAccess: false })
+const authForm = reactive({ password: "" })
+const auth = new LocalAuth({ publish: (update) => Object.assign(authState, update) })
+
+const NAV = [
+ { name: "Home", path: "/", icon: "bi-house-fill" },
+ { name: "Toggles", path: "/settings", icon: "bi-toggle-on" },
+ { name: "Tools", path: "/tools", icon: "bi-tools" },
+ { name: "Recordings", path: "/recordings", icon: "bi-camera-reels" },
+]
+
+createApp({
+ components: { Home, Tools, Logs, SoftwarePage, NavigationPage, ModelsPage, LaboratoryPage, SettingsPage, ToggleSearch, PlotsPage, FlmPage, LocalRecordingsPage, CamerasPage, SentryEventsPage, VasmPage, PipPage, DrivingPage, DevicePreferencesPage, BluetoothPage, AndroidAutoPage, LongitudinalCurvesPage, VehicleControlsPage, OnroadLayoutPage, GalaxyPage, DevicePicker, DeviceState, InstallApp },
+ data: () => ({ state, authState, authForm, route, NAV }),
+ computed: {
+ currentTool() { return state.tools.find((tool) => route.path === tool.path || route.path.startsWith(tool.path + "/")) },
+ drivingSettingsPage() { return drivingPage(route.path) },
+ deviceSettingsPage() { return devicePage(route.path) },
+ pageName() {
+ if (this.currentTool) return this.currentTool.name
+ return NAV.find((item) => item.path === route.path)?.name || "This page"
+ },
+ isLight() { return state.theme === "light" },
+ connectionLabel() {
+ if (state.monitorMode !== "local") return "Preview"
+ if (authState.status === "authenticated") return authState.localAccess ? "Local connection" : "Remote connection"
+ return authState.status === "checking" ? "Connecting…" : "Not connected"
+ },
+ },
+ errorCaptured() { state.pageError = "This page could not finish loading."; return false },
+ watch: { 'route.path'() { state.pageError = "" } },
+ methods: {
+ retryStartup() { initialize() },
+ reloadPage() { location.reload() },
+ go(path) { state.drawerOpen = false; state.searchPage = ""; navigate(path) },
+ openSearchHit(hit) { state.drawerOpen = false; state.searchPage = hit.page; navigate("/settings") },
+ returnFromSearch() { state.searchPage = "" },
+ returnToCameras() { this.go("/cameras") },
+ returnToDriving() { this.go("/driving") },
+ returnToDevice() { this.go("/device-preferences") },
+ back() { if (["/cameras/pip", "/cameras/events", "/cameras/sentry-settings", "/cameras/vasm"].includes(route.path)) this.go("/cameras"); else if (route.path === "/tools") history.back(); else this.go("/tools") },
+ toggleTheme() {
+ state.theme = this.isLight ? "dark" : "light"
+ document.documentElement.dataset.theme = state.theme
+ save(THEME_KEY, state.theme)
+ },
+ togglePin() {
+ state.navPinned = !state.navPinned
+ state.drawerOpen = state.navPinned
+ save(PIN_KEY, String(state.navPinned))
+ },
+ isActive(path) { return route.path === path || route.path.startsWith(path + "/") },
+ async signIn() {
+ const password = authForm.password
+ authForm.password = ""
+ await auth.login(password)
+ },
+ async signOut() { await auth.logout() },
+ sessionExpired() { auth.expired(); auth.check() },
+ },
+ mounted() { document.documentElement.dataset.theme = state.theme },
+ template: `
+
+
+
+
+
+
+
+ Tools
+
{{ tool.name }}
+
Android Auto
+
+
+ Loading Galaxy…
+ {{ state.error }} Try again
+
+ Galaxy access
+ Checking Galaxy access…
+ Remote Galaxy access is not configured.
+ Galaxy access is unavailable.
+ Reconnect to Galaxy
+
+ {{ authState.error }}
+ Reconnect
+
+ {{ state.pageError }} Try again
+
+ Plots & Analysis
+ Live plots Compare steering and acceleration targets with measured response Recorded-drive analysis Review lateral tracking from saved drives
+ {{ pageName }} This capability is unavailable in this build. No operation was attempted.
Back to Tools
+
{{ item.name }}
+
+ Bluetooth
Bluetooth
+
View, pair and manage nearby and saved devices.
Bluetooth requires the device. No radio was checked in preview.
+
+ {{ error }}
+ Checking Bluetooth…
+
+ Adapter {{ status.powered ? 'On' : 'Off' }}
+
{{ bluetoothError(status.errorCode) }}
+
Park to restart the Bluetooth radio.
+
Turn {{ status.powered ? 'Off' : 'On' }}
+ Refresh
+ {{ status.discovering ? 'Stop Search' : 'Search' }}
Pairing {{ status.pairing.address }}
+
Waiting for the device and any confirmation below.
+
{{ status.pairing.state === 'paired' ? 'Device paired.' : status.pairing.state === 'canceled' ? 'Pairing canceled.' : 'Pairing did not complete.' }}
+
{{ status.pairing.prompt.kind === 'confirmation' ? 'Confirm this code matches the device:' :
+ status.pairing.prompt.kind === 'pin' ? 'Enter the PIN shown by the device.' :
+ status.pairing.prompt.kind === 'passkey' ? 'Enter the device passkey.' :
+ status.pairing.prompt.kind === 'authorization' ? 'Allow this device to pair?' : 'Use this code on the device:' }}
+
{{ status.pairing.prompt.value }}
+
+
Reject
+ {{ status.pairing.prompt.kind === 'pin' ? 'Submit PIN' : status.pairing.prompt.kind === 'passkey' ? 'Submit Passkey' : 'Allow' }}
+
Cancel Pairing Saved Devices No saved devices found.
+
{{ device.name }} {{ device.connected ? 'Connected' : 'Disconnected' }}
+
{{ device.connected ? 'Disconnect' : 'Connect' }}
+ Forget
Nearby Devices {{ status.discovering ? 'Searching…' : 'No nearby devices found.' }}
+
{{ device.name }}
+ Pair
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/boot.js b/openpilot/starpilot/galaxy/web/js/boot.js
new file mode 100644
index 0000000000..cc26d92ee0
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/boot.js
@@ -0,0 +1,14 @@
+const status = document.getElementById("galaxy-boot")
+const message = status.querySelector("p")
+const retry = status.querySelector("button")
+retry.addEventListener("click", () => location.reload())
+function failed() {
+ message.textContent = "Galaxy could not finish opening. Check your connection and try again."
+ retry.hidden = false
+}
+const timer = setTimeout(failed, 10000)
+import("./app.js").then(() => {
+ clearTimeout(timer)
+ if (document.querySelector("#galaxy-app .gx-app")) status.remove()
+ else failed()
+}).catch(() => { clearTimeout(timer); failed() })
diff --git a/openpilot/starpilot/galaxy/web/js/cameras.js b/openpilot/starpilot/galaxy/web/js/cameras.js
new file mode 100644
index 0000000000..6e082b7d6e
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/cameras.js
@@ -0,0 +1,100 @@
+export class CameraSnapshotFeed {
+ constructor({ publish, unauthorized, fetcher = (...args) => fetch(...args),
+ createURL = (blob) => URL.createObjectURL(blob), revokeURL = (url) => URL.revokeObjectURL(url),
+ later = setTimeout, cancelTimer = clearTimeout }) {
+ Object.assign(this, { publish, unauthorized, fetcher, createURL, revokeURL, later, cancelTimer })
+ this.request = null
+ this.url = ""
+ this.timer = null
+ }
+ stop() {
+ this.request?.abort()
+ this.request = null
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ if (this.url) this.revokeURL(this.url)
+ this.url = ""
+ this.publish({ image: "", capturing: false, error: "" })
+ }
+ async capture(camera) {
+ this.stop()
+ const request = new AbortController()
+ this.request = request
+ this.publish({ image: "", capturing: true, error: "" })
+ this.timer = this.later(() => {
+ if (this.request !== request) return
+ this.stop()
+ this.publish({ image: "", capturing: false, error: "Snapshot timed out. Turn off the vehicle and try again." })
+ }, 13500)
+ try {
+ const response = await this.fetcher("./api/cameras/snapshot", { method: "POST", credentials: "same-origin",
+ cache: "no-store", signal: request.signal, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ camera }) })
+ if (this.request !== request || request.signal.aborted) return
+ if (response.status === 401) { this.stop(); this.unauthorized(); return }
+ if (!response.ok) throw new Error(response.status === 409 ? "Turn the vehicle off before taking a snapshot." :
+ "Turn off the vehicle and open its camera preview, then try again.")
+ if (response.headers.get("Content-Type")?.split(";")[0].trim().toLowerCase() !== "image/jpeg") throw new Error("Camera image is unavailable.")
+ const blob = await response.blob()
+ if (this.request !== request || request.signal.aborted) return
+ if (!blob.size || blob.size > 1000000) throw new Error("Camera image is unavailable.")
+ this.url = this.createURL(blob)
+ this.publish({ image: this.url, capturing: false, error: "" })
+ } catch (error) {
+ if (this.request === request && !request.signal.aborted)
+ this.publish({ image: "", capturing: false, error: error.message || "Camera image is unavailable." })
+ } finally {
+ if (this.request === request) {
+ this.request = null
+ this.cancelTimer(this.timer)
+ this.timer = null
+ }
+ }
+ }
+}
+
+export const CamerasPage = {
+ name: "CamerasPage",
+ props: { mode: { type: String, required: true }, go: { type: Function, required: true },
+ unauthorized: { type: Function, required: true } },
+ data: () => ({ camera: "cabin", image: "", capturing: false, error: "" }),
+ created() { this.snapshots = new CameraSnapshotFeed({ publish: (state) => Object.assign(this.$data, state), unauthorized: this.unauthorized }) },
+ mounted() {
+ this.visibility = () => { if (document.hidden) this.snapshots.stop() }
+ document.addEventListener("visibilitychange", this.visibility)
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibility); this.snapshots.stop() },
+ watch: { mode() { this.snapshots.stop() } },
+ template: `
+
+
Cameras & Monitoring
+
Camera preferences and availability
+
+
Adjust the camera crop with a live cabin preview.
+ Open saved preferences
+ Saved preferences are unavailable in preview.
+
View captured motion events and configure Sentry notifications.
+ View motion events
+ Saved motion settings
+ Motion events are unavailable in preview.
+
Draw saved camera window regions and adjust visual warning choices. A live camera image and current warning status are unavailable here.
+ Open saved settings
+ Saved settings are unavailable in preview.
+
+
Camera Snapshot
+ Turn off the vehicle, choose a camera, then take a snapshot.
+
+ Camera
+ Cabin Wide road Road
+
+ {{ capturing ? 'Capturing…' : 'Take snapshot' }}
+ {{ capturing ? 'Cancel' : 'Clear snapshot' }}
+ {{ error }}
+
+ Camera snapshots are available on the connected device.
+ Snapshots are not saved.
+
Cloud Provider
+
Open this Developer page on your device to choose a cloud provider.
+
+ Active: {{ active.label }}
+ Next Boot: {{ selected.label }}
+ Restart required. No automatic reboot will occur.
+ Cloud accounts and uploads stay separate. Your older comma recordings keep their comma links.
+ Turn off the vehicle to change this Developer setting.
+ Use {{ provider.label }}
+ Refresh
+ {{ error }}
+
+ Controller Buttons
+ Assign physical USB or Bluetooth buttons to Quick Select and available driving screen actions. Turn off the vehicle to edit.
+ Connect to local Galaxy to manage controller buttons.
+
+ {{ state.error }}
+ Checking attached controllers…
+
+ Controller Buttons are unavailable. Reload to try again.
+ Turn off the vehicle to change controller buttons.
+ Controller settings changed. Reload before saving.
+ Save these changes before learning or removing buttons.
+ Reload
+ Save Controller Settings
+ Enable controller buttons
+
+ Attached Controllers
+ No controller is attached.
+ {{ device.name }} {{ device.bus === 3 ? 'USB' : 'Bluetooth' }}
Favorite Buttons
+ {{ slot.label }}
+ {{ slot.key ? 'Available when its control is ready' : 'Not assigned' }}
+
Learn Button Action Buttons
+ {{ slot.label }}
+
+ No action {{ option.section }} · {{ option.label }}
+ Learn Button
+ Press a button for {{ state.status.slots[state.status.learning.slot].label }} within {{ Math.ceil(state.status.learning.expiresIn) }} seconds.
+ Cancel Learning
+ {{ state.status.testing ? 'Stop Button Test' : 'Test Buttons for 20 Seconds' }}
+ Button test shows input without running its action.
+ {{ state.status.lastPress.message }}
+ Learned Buttons No buttons learned yet.
+
+
{{ binding.name }} Button {{ binding.code }} · {{ state.status.slots[binding.slot].label }}
+
Remove
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/crash-reports.js b/openpilot/starpilot/galaxy/web/js/crash-reports.js
new file mode 100644
index 0000000000..0ece1cc2df
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/crash-reports.js
@@ -0,0 +1,102 @@
+// Read-only local crash reports. State is cleared on navigation and sign-out.
+export class CrashReportsFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args) }) {
+ Object.assign(this, { publish, unauthorized, fetcher })
+ this.active = false
+ this.generation = 0
+ this.request = null
+ this.reports = []
+ }
+
+ clear() {
+ this.reports = []
+ this.publish({ reports: [], scanIncomplete: false, listLimited: false, status: "idle", error: "", selected: null, preview: null, previewStatus: "idle" })
+ }
+
+ stop() {
+ this.active = false
+ this.generation++
+ this.request?.abort()
+ this.request = null
+ this.clear()
+ }
+
+ start() {
+ this.stop()
+ this.active = true
+ return this.load()
+ }
+
+ async requestJson(url, generation, request) {
+ const response = await this.fetcher(url, { signal: request.signal, cache: "no-store" })
+ if (!this.active || generation !== this.generation || request.signal.aborted) return null
+ if (response.status === 401) {
+ this.stop()
+ this.unauthorized()
+ return null
+ }
+ if (response.status === 503) {
+ const body = await response.json().catch(() => null)
+ if (!this.active || generation !== this.generation || request.signal.aborted) return null
+ if (["access_unavailable", "setup_required"].includes(body?.code)) {
+ this.stop()
+ this.unauthorized()
+ return null
+ }
+ throw new Error("Crash reports are unavailable")
+ }
+ if (!response.ok) throw new Error(response.status === 409 ? "Report changed; refresh the list" : "Report unavailable")
+ const body = await response.json()
+ if (!this.active || generation !== this.generation || request.signal.aborted) return null
+ return body
+ }
+
+ async load() {
+ if (!this.active) return
+ const generation = ++this.generation
+ this.request?.abort()
+ const request = new AbortController()
+ this.request = request
+ this.reports = []
+ this.publish({ reports: [], scanIncomplete: false, listLimited: false, status: "loading", error: "", selected: null, preview: null, previewStatus: "idle" })
+ try {
+ const data = await this.requestJson("./api/crash-reports", generation, request)
+ if (!data) return
+ if (data.schemaVersion !== 1 || !Array.isArray(data.reports) || data.reports.length > 200 ||
+ typeof data.scanIncomplete !== "boolean" || typeof data.listLimited !== "boolean" ||
+ data.reports.some((item) => typeof item.id !== "string" || !item.id ||
+ typeof item.name !== "string" || !item.name ||
+ typeof item.size !== "number" || !Number.isFinite(item.size) || item.size < 0 ||
+ typeof item.modifiedAt !== "number" || !Number.isFinite(item.modifiedAt))) {
+ throw new Error("Invalid crash report list")
+ }
+ this.reports = data.reports
+ this.publish({ reports: data.reports, scanIncomplete: data.scanIncomplete, listLimited: data.listLimited, status: "ready", error: "", selected: null, preview: null, previewStatus: "idle" })
+ } catch (error) {
+ if (this.active && generation === this.generation) this.publish({ reports: [], scanIncomplete: false, listLimited: false, status: "unavailable", error: error.message, selected: null, preview: null, previewStatus: "idle" })
+ } finally {
+ if (generation === this.generation) this.request = null
+ }
+ }
+
+ async open(report) {
+ if (!this.active || !this.reports.some((item) => item.id === report?.id)) return
+ const generation = ++this.generation
+ this.request?.abort()
+ const request = new AbortController()
+ this.request = request
+ this.publish({ selected: report.id, preview: null, previewStatus: "loading", error: "" })
+ try {
+ const data = await this.requestJson(`./api/crash-reports/${encodeURIComponent(report.id)}`, generation, request)
+ if (!data) return
+ if (data.schemaVersion !== 1 || data.name !== report.name || typeof data.text !== "string" || typeof data.truncated !== "boolean") {
+ throw new Error("Invalid crash report")
+ }
+ this.publish({ selected: report.id, preview: data, previewStatus: "ready", error: "" })
+ } catch (error) {
+ if (this.active && generation === this.generation) this.publish({ selected: null, preview: null, previewStatus: "unavailable", error: error.message })
+ } finally {
+ if (generation === this.generation) this.request = null
+ }
+ }
+}
diff --git a/openpilot/starpilot/galaxy/web/js/device-picker.js b/openpilot/starpilot/galaxy/web/js/device-picker.js
new file mode 100644
index 0000000000..5e5973c732
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/device-picker.js
@@ -0,0 +1,92 @@
+const SLUG = /^[A-Za-z0-9]{16}$/
+const unsupported = (response) => response.status === 404 || response.status === 405
+
+async function readName(device) {
+ try {
+ const response = await fetch(`/${device.slug}/api/galaxy/device-name`, {
+ cache: "no-store", credentials: "same-origin", signal: AbortSignal.timeout(5000),
+ })
+ if (!response.ok) return device
+ const data = await response.json()
+ if (typeof data.name === "string" && Array.from(data.name).length <= 40) return { ...device, name: data.name || device.name }
+ } catch {}
+ return device
+}
+
+async function namedDevices(devices) {
+ const result = [...devices]
+ let next = 0
+ const worker = async () => {
+ while (next < devices.length) {
+ const index = next++
+ result[index] = await readName(devices[index])
+ }
+ }
+ await Promise.all(Array.from({ length: Math.min(4, devices.length) }, worker))
+ return result
+}
+
+export const DevicePicker = {
+ name: "DevicePicker",
+ data: () => ({ devices: [], activeSlug: "", loading: true, editing: "", draft: "", error: "", saving: false }),
+ computed: { visible() { return location.hostname === "galaxy.firestar.link" && this.devices.length > 1 } },
+ mounted() { if (location.hostname === "galaxy.firestar.link") this.load() },
+ methods: {
+ async load() {
+ try {
+ const response = await fetch("/_gateway/devices", { cache: "no-store", credentials: "same-origin" })
+ if (!response.ok) return
+ const data = await response.json()
+ this.activeSlug = SLUG.test(data?.activeSlug || "") ? data.activeSlug : ""
+ this.devices = Array.isArray(data?.devices) ? data.devices.filter((device) => SLUG.test(device?.slug || "")).slice(0, 40) : []
+ this.devices = await namedDevices(this.devices)
+ } catch {} finally { this.loading = false }
+ },
+ select(device) {
+ if (SLUG.test(device.slug) && device.slug !== this.activeSlug) window.location.assign(`/${device.slug}/`)
+ },
+ edit(device) { this.editing = device.slug; this.draft = device.name || ""; this.error = "" },
+ async save() {
+ if (!SLUG.test(this.editing)) return
+ const slug = this.editing
+ const name = Array.from(this.draft.trim()).slice(0, 40).join("")
+ this.saving = true
+ this.error = ""
+ try {
+ let response = await fetch(`/${slug}/api/galaxy/device-name`, {
+ method: "POST", credentials: "same-origin", headers: { "Content-Type": "application/json" },
+ signal: AbortSignal.timeout(5000), body: JSON.stringify({ name }),
+ })
+ if (unsupported(response)) {
+ response = await fetch(`/_gateway/devices/${slug}/name`, {
+ method: "PUT", credentials: "same-origin", headers: { "Content-Type": "application/json" },
+ signal: AbortSignal.timeout(7000), body: JSON.stringify({ name }),
+ })
+ }
+ const data = await response.json().catch(() => ({}))
+ if (!response.ok || typeof data.name !== "string") throw new Error(data.error || "Could not rename comma")
+ this.devices = this.devices.map((device) => device.slug === slug ? { ...device, name: data.name } : device)
+ if (this.editing === slug) this.editing = ""
+ } catch (error) { this.error = error.message }
+ finally { this.saving = false }
+ },
+ },
+ template: `
+
+
Commas
+
+
+ {{ device.name || 'Comma ' + (index + 1) }}
+ Current
+
+
+
+
Force Drive State is available on your connected device.
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/diagnostic-tools.js b/openpilot/starpilot/galaxy/web/js/diagnostic-tools.js
new file mode 100644
index 0000000000..02f45408fb
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/diagnostic-tools.js
@@ -0,0 +1,114 @@
+import { reactive } from "../vendor/vue/vue.esm-browser.js"
+import { LocalAccess } from "./local-access.js"
+
+const text = (value, max = 1024) => typeof value === "string" && value.length <= max
+const rows = value => Array.isArray(value) && value.length <= 128 && value.every(row => row && text(row.label, 128) && text(row.value))
+export function validTroubleshoot(value) {
+ return !!value && value.schemaVersion === 1 && [null, "parked", "driving", "standby"].includes(value.device?.state) &&
+ typeof value.vehicle?.available === "boolean" && typeof value.vehicle.longitudinal === "boolean" &&
+ ["fingerprint", "brand", "steering"].every(key => text(value.vehicle[key])) && rows(value.snapshot) &&
+ Array.isArray(value.sections) && value.sections.length <= 32 &&
+ value.sections.every(section => text(section.title, 128) && rows(section.rows)) && text(value.note, 2048)
+}
+export function validTmux(value) {
+ return !!value && typeof value.available === "boolean" && text(value.reason) && text(value.pane, 128) &&
+ typeof value.truncated === "boolean" && typeof value.text === "string" &&
+ new TextEncoder().encode(value.text).length <= 65536 && value.text.split("\n").length <= 301
+}
+export function troubleshootReport(data) {
+ if (!data) return ""
+ return ["StarPilot Troubleshoot", `Device: ${data.device.state || "Unavailable"}`,
+ `Vehicle: ${data.vehicle.available ? data.vehicle.fingerprint : "Unavailable"}`,
+ `Brand: ${data.vehicle.brand}`, `Longitudinal: ${data.vehicle.longitudinal ? "Available" : "Unavailable"}`, `Steering: ${data.vehicle.steering}`,
+ ...data.snapshot.map(row => `${row.label}: ${row.value}`),
+ ...data.sections.flatMap(section => ["", section.title, ...section.rows.map(row => `${row.label}: ${row.value}`)]),
+ "", data.note].join("\n")
+}
+
+export class DiagnosticFeed {
+ constructor({ endpoint, validate, publish, unauthorized = () => {}, interval = 0,
+ fetcher = (...args) => fetch(...args), later = (fn, ms) => setTimeout(fn, ms), cancel = id => clearTimeout(id) }) {
+ Object.assign(this, { endpoint, validate, publish, unauthorized, interval, fetcher, later, cancel })
+ this.active = false; this.visible = true; this.live = true; this.data = null
+ this.request = this.timer = null; this.generation = 0
+ }
+ start(mode, visible = true) { this.stop(); this.mode = mode; this.visible = visible; this.active = true
+ if (mode !== "local") { this.data = null; this.publish({ data: null, error: "This tool is unavailable in sample mode.", loading: false }); return }
+ if (visible) return this.refresh()
+ }
+ cancelPending() { this.generation++; this.request?.abort(); this.request = null
+ if (this.timer !== null) this.cancel(this.timer)
+ this.timer = null
+ }
+ stop() { this.active = false; this.cancelPending() }
+ setVisible(value) { this.visible = value; this.cancelPending(); if (value && this.active && this.live) return this.refresh() }
+ setLive(value) { this.live = value; this.cancelPending(); this.publish({ live: value, loading: false }); if (value && this.visible) return this.refresh() }
+ async refresh() {
+ if (!this.active || !this.visible || this.mode !== "local" || this.request) return
+ if (this.timer !== null) this.cancel(this.timer)
+ this.timer = null
+ const generation = ++this.generation, request = new AbortController()
+ this.request = request; this.publish({ loading: !this.data, error: "" })
+ const deadline = this.later(() => request.abort(), 4000)
+ try {
+ const response = await this.fetcher(this.endpoint, { credentials: "same-origin", cache: "no-store", signal: request.signal })
+ if (!this.active || generation !== this.generation) return
+ if (response.status === 401) { this.stop(); this.unauthorized(); return }
+ const data = await response.json()
+ if (!this.active || generation !== this.generation) return
+ if (!response.ok || !this.validate(data)) throw new Error("Unsupported diagnostic response")
+ this.data = data; this.publish({ data, error: "" })
+ } catch (error) {
+ if (this.active && generation === this.generation)
+ this.publish({ error: error.name === "AbortError" ? "Reading the tool timed out. Try Refresh." : "This tool is unavailable. Try Refresh or local access." })
+ } finally {
+ this.cancel(deadline)
+ if (this.active && generation === this.generation) {
+ this.request = null; this.publish({ loading: false })
+ if (this.interval && this.live && this.visible) this.timer = this.later(() => { this.timer = null; this.refresh() }, this.interval)
+ }
+ }
+ }
+}
+
+const props = { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } }
+function setup(props, consoleTail) {
+ const state = reactive({ loading: false, live: true, data: null, error: "", notice: "" })
+ const feed = new DiagnosticFeed({ endpoint: consoleTail ? "./api/tmux/live" : "./api/troubleshoot",
+ validate: consoleTail ? validTmux : validTroubleshoot, interval: consoleTail ? 2000 : 0,
+ publish: update => Object.assign(state, update), unauthorized: props.unauthorized })
+ return { state, feed }
+}
+const lifecycle = {
+ mounted() { this._visibility = () => this.feed.setVisible(!document.hidden)
+ document.addEventListener("visibilitychange", this._visibility); this.feed.start(this.mode, !document.hidden) },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this._visibility); this.feed.stop() },
+ watch: { mode(value) { this.feed.start(value, !document.hidden) } },
+}
+const methods = {
+ async copyText(value) { try { await navigator.clipboard.writeText(value); this.state.notice = "Visible text copied." }
+ catch { this.state.notice = "Copy is unavailable in this browser. Select the visible text to copy it." } },
+ saveText(value) { const url = URL.createObjectURL(new Blob([value], { type: "text/plain;charset=utf-8" }))
+ const link = document.createElement("a"); link.href = url; link.download = "starpilot-console.txt"; link.click(); URL.revokeObjectURL(url) },
+}
+export const TroubleshootPage = {
+ components: { LocalAccess }, props, emits: ["navigate"], ...lifecycle,
+ setup: props => setup(props, false), methods: { ...methods, report: troubleshootReport },
+ template: `
+ Read-only device, vehicle and selected settings. Change settings in Toggles.
+ Refresh Copy Report Toggles System Monitor Crash Reports
+ Loading report…
{{ state.error }}
{{ state.notice }}
+ Device Snapshot State: {{ state.data.device.state || 'Unavailable' }}
Vehicle: {{ state.data.vehicle.available ? state.data.vehicle.fingerprint : 'Unavailable' }}
Brand: {{ state.data.vehicle.brand || 'Unavailable' }} · Longitudinal: {{ state.data.vehicle.longitudinal ? 'Available' : 'Unavailable' }} · Steering: {{ state.data.vehicle.steering || 'Unavailable' }}
{{ row.label }} {{ row.value }} {{ section.title }} {{ row.label }} {{ row.value }} {{ state.data.note }}
`,
+}
+export const TmuxPage = {
+ components: { LocalAccess }, props, emits: ["navigate"], ...lifecycle,
+ setup: props => setup(props, true), methods,
+ template: `
+ Read-only launcher console tail. No commands or keyboard input are sent to the comma.
+ {{ state.live ? 'Pause' : 'Resume' }} Refresh Copy Visible Text Save Visible Text
+ {{ state.live ? 'Live · updates every 2 seconds while visible' : 'Paused' }}
Loading console…
{{ state.error }}
{{ state.notice }}
+ {{ state.data.reason }}
Pane: {{ state.data.pane }}
Console tail is limited to 300 lines and 64 KiB.
{{ state.data.text }} `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/drive-state.js b/openpilot/starpilot/galaxy/web/js/drive-state.js
new file mode 100644
index 0000000000..c9e2cf8587
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/drive-state.js
@@ -0,0 +1,67 @@
+export const validDriveState = (value) => !!value && ["auto", "offroad", "onroad"].includes(value.mode) &&
+ typeof value.available === "boolean" && typeof value.overrideAllowed === "boolean" &&
+ (value.revision === null || typeof value.revision === "string" && /^[0-9a-f]{32}$/.test(value.revision)) &&
+ [null, "offroad", "onroad"].includes(value.effective)
+
+export const DriveStatePanel = {
+ data: () => ({ state: null, error: "", busy: false }),
+ computed: {
+ pending() { return this.state?.mode !== "auto" && this.state?.effective !== this.state?.mode },
+ },
+ mounted() {
+ this.active = true
+ this.generation = 0
+ this.load()
+ this.timer = setInterval(() => { if (!document.hidden) this.load() }, 1000)
+ },
+ beforeUnmount() { this.active = false; this.generation++; clearInterval(this.timer); this.controller?.abort() },
+ methods: {
+ async load() {
+ if (this.busy || this.loading || !this.active) return
+ this.loading = true
+ const generation = ++this.generation
+ this.controller = new AbortController()
+ const controller = this.controller
+ const deadline = setTimeout(() => controller.abort(), 3000)
+ try {
+ const response = await fetch("./api/drive-state/status", { credentials: "same-origin", cache: "no-store", signal: this.controller.signal })
+ const value = await response.json()
+ if (!response.ok || !validDriveState(value)) throw new Error(value.error || "Drive state unavailable")
+ if (this.active && generation === this.generation) { this.state = value; this.error = "" }
+ } catch (error) { if (this.active && generation === this.generation) { this.state = null; this.error = "Drive state unavailable" } }
+ finally { clearTimeout(deadline); if (generation === this.generation) this.loading = false }
+ },
+ async change(mode) {
+ if (this.busy || !this.state?.available) return
+ if (mode !== "auto" && !this.state.overrideAllowed) { this.error = "Park and disengage, then retry. The device can stay on-road."; return }
+ if (mode === "offroad" && this.state.effective === "onroad" &&
+ !window.confirm("Switch to Offroad and stop driving services? Stay parked until you return to Auto.")) return
+ const revision = this.state.revision
+ this.busy = true
+ this.loading = false
+ const generation = ++this.generation
+ this.controller?.abort()
+ this.controller = new AbortController()
+ const controller = this.controller
+ const deadline = setTimeout(() => controller.abort(), 3000)
+ try {
+ const response = await fetch("./api/drive-state/action", { method: "POST", credentials: "same-origin", cache: "no-store",
+ signal: this.controller.signal, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mode, revision }) })
+ const value = await response.json()
+ if (!response.ok || !validDriveState(value)) throw new Error(value.error || "Drive state unavailable")
+ if (this.active && generation === this.generation) { this.state = value; this.error = "" }
+ } catch (error) { if (this.active && generation === this.generation) this.error = error.message }
+ finally { clearTimeout(deadline); this.busy = false; if (this.active && generation === this.generation) this.load() }
+ },
+ },
+ template: `Force Drive State
+ Device: {{ state?.effective === "onroad" ? "Onroad" : state?.effective === "offroad" ? "Offroad" : "Checking…" }}
+ Waiting for the device to switch {{ state.mode }}…
+ Auto follows the car. Force Offroad stops driving services even when the device is on-road. Park and disengage before switching; Return to Auto restores normal operation.
+ Waiting for a fresh parked, disengaged state. You do not need to turn the vehicle off.
+ The drive-state manager is unavailable. Reconnect to check again.
+ {{ mode === 'auto' ? 'Return to Auto' : mode === 'onroad' ? 'Onroad' : 'Offroad' }}
+ {{ error }}
+ Driving features
Driving Settings
+
Choose how StarPilot steers and controls speed.
Local driving settings are unavailable in preview.
+
+
+ {{ group.title }}
+
+
+ {{ item.title }} {{ item.detail }}
+
+
+
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/favorites.js b/openpilot/starpilot/galaxy/web/js/favorites.js
new file mode 100644
index 0000000000..6bf10163e2
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/favorites.js
@@ -0,0 +1,138 @@
+import { reactive } from "../vendor/vue/vue.esm-browser.js"
+import { GalaxySelect } from "./galaxy-select.js"
+
+export function validFavorites(data) {
+ return !!data && typeof data.revision === "string" && !!data.revision && typeof data.editable === "boolean" &&
+ typeof data.valid === "boolean" && Array.isArray(data.slots) && data.slots.length === 3 &&
+ data.slots.every((slot) => slot && typeof slot.enabled === "boolean" && typeof slot.show_onroad === "boolean" &&
+ (slot.key === null || typeof slot.key === "string") && typeof slot.label === "string" && slot.label.length <= 32) &&
+ Array.isArray(data.options) && data.options.length <= 128 && data.options.every((option) => option &&
+ typeof option.key === "string" && typeof option.label === "string" && ["toggle", "enum", "action"].includes(option.kind)) &&
+ new Set(data.options.map((option) => option.key)).size === data.options.length &&
+ Array.isArray(data.states) && data.states.length === 3 && data.states.every((state, index) => state &&
+ state.index === index && typeof state.available === "boolean" && typeof state.stateLabel === "string" && typeof state.reason === "string")
+}
+
+export class FavoritesFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.active = false; this.generation = 0; this.data = this.request = this.timer = null; this.needsReload = false
+ }
+ stop() {
+ this.active = false; this.generation++; this.request?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.request = this.timer = null
+ }
+ start() { this.stop(); this.active = true; return this.load() }
+ load() { return this.run() }
+ update(index, patch) {
+ if (!this.data?.editable || this.request || this.needsReload || !Number.isInteger(index) || index < 0 || index > 2 ||
+ !patch || Object.keys(patch).some((key) => !["key", "label", "enabled", "show_onroad"].includes(key))) return
+ const slots = this.data.slots.map((slot) => ({ ...slot }))
+ if (Object.hasOwn(patch, "key")) {
+ const option = this.data.options.find((entry) => entry.key === patch.key)
+ if (patch.key !== null && !option) return
+ delete slots[index].value
+ slots[index].label = option?.label.slice(0, 32) || ""
+ if (!option) Object.assign(slots[index], { enabled: false, show_onroad: false })
+ }
+ Object.assign(slots[index], patch)
+ return this.run({ revision: this.data.revision, slots })
+ }
+ async run(body = null) {
+ if (!this.active || this.request) return
+ const request = new AbortController(), generation = ++this.generation, saving = body !== null
+ this.request = request
+ this.publish({ status: saving ? "saving" : "loading", error: "", notice: "" })
+ const fail = (error) => {
+ this.needsReload ||= saving
+ this.publish({ status: this.data ? "ready" : "unavailable", needsReload: this.needsReload, error })
+ }
+ this.timer = this.later(() => {
+ if (!this.active || generation !== this.generation) return
+ request.abort(); this.generation++; this.request = this.timer = null
+ fail(saving ? "Saving timed out. Reload to check which Quick Select were saved." : "Reading Quick Select timed out. Reload to try again.")
+ }, 5000)
+ try {
+ const response = await this.fetcher("./api/favorites/slots", { credentials: "same-origin", cache: "no-store", signal: request.signal,
+ ...(saving ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) } : {}) })
+ if (!this.active || generation !== this.generation) return
+ const data = await response.json().catch(() => null)
+ if (!this.active || generation !== this.generation) return
+ if (response.status === 401 || ["access_unavailable", "setup_required"].includes(data?.code)) { this.stop(); this.unauthorized(); return }
+ if (response.status === 409) throw new Error("Quick Select changed on another screen. Reload before editing again.")
+ if (!response.ok || !validFavorites(data)) throw new Error(saving ? "Quick Select could not be confirmed. Reload before editing again." : "Saved Quick Select are unavailable.")
+ this.data = data; this.needsReload = false
+ this.publish({ status: "ready", data, needsReload: false, error: "", notice: saving ? "Quick Select saved." : "" })
+ } catch (error) {
+ if (this.active && generation === this.generation) fail(error?.message || "Quick Select are unavailable.")
+ } finally {
+ if (this.request === request) {
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.request = this.timer = null
+ }
+ }
+ }
+}
+
+export const FavoritesPage = {
+ components: { GalaxySelect },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ emits: ["close"],
+ setup(props) {
+ const state = reactive({ status: "idle", data: null, error: "", notice: "", needsReload: false })
+ const feed = new FavoritesFeed({ publish: (update) => Object.assign(state, update), unauthorized: props.unauthorized })
+ return { state, feed }
+ },
+ computed: {
+ busy() { return ["loading", "saving"].includes(this.state.status) },
+ disabled() { return !this.state.data?.editable || this.busy || this.state.needsReload },
+ byKey() { return new Map((this.state.data?.options || []).map((option) => [option.key, option])) },
+ groups() { return [...new Set((this.state.data?.options || []).map((option) => option.section || "Controls"))] },
+ },
+ mounted() { if (this.mode === "local") this.feed.start() },
+ beforeUnmount() { this.feed.stop() },
+ methods: {
+ select(index, event) { return this.feed.update(index, { key: event.target.value || null }) },
+ toggle(index, field, event) {
+ const checked = event.target.checked
+ event.target.checked = this.state.data.slots[index][field]
+ return this.feed.update(index, { [field]: checked })
+ },
+ label(index, event) {
+ const value = event.target.value.trim().slice(0, 32)
+ event.target.value = this.state.data.slots[index].label
+ if (value !== this.state.data.slots[index].label) return this.feed.update(index, { label: value })
+ },
+ },
+ template: `
+
+
+ Small UI: tap the invisible left, middle or right third. Big UI: tap or swipe the lower-left corner to open Quick Select.
+ Assigning a shortcut does not activate it. Each control keeps its usual availability; some settings can only change while parked.
+ Connect to local Galaxy to configure Quick Select.
+
+ {{ state.status === 'saving' ? 'Saving Quick Select…' : state.status === 'loading' ? 'Loading Quick Select…' : state.notice }}
+ Reload saved
+ {{ state.error }}
+ Saved Quick Select could not be read. Empty slots are shown. Choosing a control will replace the invalid saved configuration.
+
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/flm.js b/openpilot/starpilot/galaxy/web/js/flm.js
new file mode 100644
index 0000000000..f10f87efe7
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/flm.js
@@ -0,0 +1,283 @@
+import { LocalHistoryFeed, validLocalHistory } from './record-history.js'
+
+const SEGMENT = /^(?:[a-f0-9]{8}--[a-f0-9]{10}|[0-9]{4}-[0-9]{2}-[0-9]{2}--[0-9]{2}-[0-9]{2}-[0-9]{2}|[a-f0-9]{16}[|_](?:[a-f0-9]{8}--[a-f0-9]{10}|[0-9]{4}-[0-9]{2}-[0-9]{2}--[0-9]{2}-[0-9]{2}-[0-9]{2}))--[0-9]{1,6}$/
+const STATES = ['idle', 'running', 'completed', 'canceled', 'failed', 'unavailable']
+const RESULTS = ['measured', 'insufficient_samples', 'missing_car_params', 'unsupported_car', 'unsupported_controller']
+const FAILURE = {
+ not_parked: 'Park the vehicle before analyzing recordings.',
+ canceled: 'Analysis was canceled.',
+ source_changed: 'A selected recording changed. Refresh the inventory.',
+ invalid_segment: 'A selected full log is unavailable. Refresh the inventory.',
+ busy: 'Another analysis is already running.',
+ invalid_request: 'Select one to five closed full logs, then try again.',
+ operation_changed: 'The analysis session changed. Refresh status.',
+ process_failed: 'The analysis process stopped unexpectedly. Its error was saved to the device log.',
+ deadline: 'Analysis exceeded its time limit. Try one segment at a time.',
+ recording_unavailable: 'A selected recording is missing, still open, or changed. Refresh recordings.',
+ decode_failed: 'A selected full log could not be decoded. Try another segment.',
+ resource_limit: 'This recording exceeds the analysis memory limit. Try a smaller segment.',
+}
+const labelFailure = (code) => FAILURE[code] || 'Offline analysis is unavailable.'
+const finite = (value) => typeof value === 'number' && Number.isFinite(value)
+
+export function selectableSegments(inventory) {
+ if (!validLocalHistory(inventory)) return []
+ return inventory.routes.flatMap((route) => route.segments.filter((segment) => segment.files.rlog &&
+ typeof segment.segmentName === 'string' && SEGMENT.test(segment.segmentName))
+ .map((segment) => ({ routeId: route.routeId, number: segment.number, name: segment.segmentName })))
+}
+
+export function validFlmStatus(value) {
+ return value?.version === 1 && STATES.includes(value.state) &&
+ (value.operationId === null || typeof value.operationId === 'string' && /^[a-zA-Z0-9:_-]{1,100}$/.test(value.operationId)) &&
+ Number.isSafeInteger(value.selected) && value.selected >= 0 && value.selected <= 5 &&
+ Number.isSafeInteger(value.processed) && value.processed >= 0 && value.processed <= value.selected &&
+ (value.errorCode === null || typeof value.errorCode === 'string' && /^[a-z_]{1,60}$/.test(value.errorCode)) &&
+ (value.state === 'idle' ? value.operationId === null : value.operationId !== null)
+}
+
+function validSeries(points) {
+ return Array.isArray(points) && points.length <= 160 && points.every((point) =>
+ point && finite(point.mono_ns) && point.mono_ns > 0 && finite(point.desired_lat_accel) &&
+ finite(point.actual_lat_accel) && Number.isSafeInteger(point.continuity_id) && point.continuity_id >= 0)
+}
+
+function validAnalysis(value) {
+ return value && typeof value.route === 'string' && value.route.length <= 80 &&
+ Number.isSafeInteger(value.number) && value.number >= 0 && RESULTS.includes(value.status) &&
+ (value.car_params_sha256 === null || typeof value.car_params_sha256 === 'string' && /^[a-f0-9]{64}$/.test(value.car_params_sha256)) &&
+ ['messages', 'torque_frames', 'eligible_samples'].every((key) => Number.isSafeInteger(value[key]) && value[key] >= 0) &&
+ [value.mean_abs_error, value.root_mean_square_error].every((number) => number === null || finite(number) && number >= 0) &&
+ Array.isArray(value.exclusions) && value.exclusions.length <= 32 && value.exclusions.every((item) =>
+ Array.isArray(item) && item.length === 2 && typeof item[0] === 'string' && /^[a-z_]{1,60}$/.test(item[0]) &&
+ Number.isSafeInteger(item[1]) && item[1] >= 0) && validSeries(value.series) &&
+ Array.isArray(value.windows) && value.windows.length <= 128 && typeof value.windows_truncated === 'boolean'
+}
+
+export function validFlmReport(value, operationId) {
+ return value?.schemaVersion === 1 && value.purpose === 'offline_tracking_diagnostics' &&
+ value.operationId === operationId && value.tuneRecommendation === null && value.vehicleQualification === false &&
+ Array.isArray(value.segments) && value.segments.length >= 1 && value.segments.length <= 5 && value.segments.every((entry) =>
+ entry?.source && typeof entry.source.segmentName === 'string' && SEGMENT.test(entry.source.segmentName) &&
+ typeof entry.source.sha256 === 'string' && /^[a-f0-9]{64}$/.test(entry.source.sha256) &&
+ Number.isSafeInteger(entry.source.compressedBytes) && entry.source.compressedBytes > 0 &&
+ ['zst', 'bz2'].includes(entry.source.codec) && validAnalysis(entry.analysis))
+}
+
+// Each continuity ID is a distinct measured interval. Never draw through an excluded gap.
+export function flmChart(series) {
+ if (!validSeries(series) || !series.length) return { valid: false, paths: [[], []] }
+ const first = series[0].mono_ns, last = series.at(-1).mono_ns
+ const values = series.flatMap((point) => [point.desired_lat_accel, point.actual_lat_accel])
+ const lo = Math.min(0, ...values), hi = Math.max(0, ...values), span = Math.max(.01, hi - lo)
+ const x = (stamp) => 48 + Math.max(0, Math.min(1, (stamp - first) / Math.max(1, last - first))) * 576
+ const y = (value) => 132 - (value - lo) / span * 114
+ const paths = [[], []]
+ for (const [keyIndex, key] of ['desired_lat_accel', 'actual_lat_accel'].entries()) {
+ let points = [], prior = null
+ const flush = () => { if (points.length >= 2) paths[keyIndex].push(points.join(' ')); points = [] }
+ for (const point of series) {
+ if (prior && (point.continuity_id !== prior.continuity_id || point.mono_ns <= prior.mono_ns)) flush()
+ points.push(`${x(point.mono_ns).toFixed(1)},${y(point[key]).toFixed(1)}`)
+ prior = point
+ }
+ flush()
+ }
+ return { valid: true, paths, top: hi.toFixed(2), bottom: lo.toFixed(2), zeroY: y(0),
+ duration: Math.max(0, (last - first) / 1e9).toFixed(1) }
+}
+
+export class FlmFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.active = false; this.generation = 0; this.inFlight = null; this.timer = this.deadline = null; this.busy = false
+ this.status = null; this.report = null; this.error = ''
+ }
+ emit() { this.publish({ operation: this.status, report: this.report, operationError: this.error,
+ busy: this.busy, requesting: this.inFlight !== null }) }
+ stop() {
+ this.active = false; this.generation++
+ this.inFlight?.abort(); this.inFlight = null
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ if (this.deadline !== null) this.cancelTimer(this.deadline)
+ this.timer = this.deadline = null; this.busy = false; this.status = this.report = null; this.error = ''
+ this.emit()
+ }
+ start() { this.stop(); this.active = true; return this.refresh() }
+ async request(url, options = {}, timeoutMs = 10000) {
+ const generation = this.generation, controller = new AbortController()
+ this.inFlight = controller
+ this.emit()
+ let timer = null
+ const timeout = new Promise((_, reject) => { timer = this.later(() => { controller.abort(); reject(new Error('Offline analysis timed out. Refresh status before trying again.')) }, timeoutMs); this.deadline = timer })
+ try {
+ const response = await Promise.race([this.fetcher(url, { credentials: 'same-origin', cache: 'no-store', ...options, signal: controller.signal }), timeout])
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ if (response.status === 401) { this.stop(); this.unauthorized(); return null }
+ const body = await Promise.race([response.json(), timeout])
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ if (response.status === 503 && ['setup_required', 'access_unavailable'].includes(body?.code)) {
+ this.stop(); this.unauthorized(); return null
+ }
+ if (!response.ok) throw new Error(labelFailure(body?.code))
+ return body
+ } finally {
+ if (timer !== null) this.cancelTimer(timer)
+ if (this.deadline === timer) this.deadline = null
+ if (this.inFlight === controller) {
+ this.inFlight = null
+ if (this.active && generation === this.generation) this.emit()
+ }
+ }
+ }
+ schedule() {
+ if (!this.active || this.status?.state !== 'running') {
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ return
+ }
+ if (this.active && this.status?.state === 'running' && this.timer === null) {
+ this.timer = this.later(() => { this.timer = null; this.refresh() }, 1000)
+ }
+ }
+ async refresh() {
+ if (!this.active || this.inFlight || this.busy) return
+ const generation = this.generation
+ try {
+ const status = await this.request('./api/flm/status')
+ if (!this.active || generation !== this.generation || status === null) return
+ if (!validFlmStatus(status)) throw new Error('Offline analysis status is unavailable.')
+ const previousId = this.status?.operationId
+ this.status = status
+ if (previousId !== status.operationId || status.state !== 'completed') this.report = null
+ this.error = status.state === 'failed' || status.state === 'unavailable' ? labelFailure(status.errorCode) : ''
+ this.emit()
+ if (status.state === 'completed' && this.report === null) await this.loadReport(status.operationId, generation)
+ } catch (error) {
+ if (this.active && generation === this.generation) { this.error = error.message; this.emit() }
+ } finally { if (generation === this.generation) this.schedule() }
+ }
+ async loadReport(id, generation = this.generation) {
+ try {
+ const report = await this.request(`./api/flm/report?operationId=${encodeURIComponent(id)}`)
+ if (!this.active || generation !== this.generation || report === null || this.status?.operationId !== id) return
+ if (!validFlmReport(report, id)) throw new Error('Offline analysis report is unavailable.')
+ this.report = report; this.error = ''; this.emit()
+ } catch (error) {
+ if (this.active && generation === this.generation) { this.error = error.message; this.emit() }
+ }
+ }
+ async mutate(url, body) {
+ if (!this.active || this.inFlight || this.busy) return
+ const generation = this.generation
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ this.busy = true; this.error = ''; this.emit()
+ try {
+ const status = await this.request(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+ if (!this.active || generation !== this.generation || status === null) return
+ if (!validFlmStatus(status)) throw new Error('Offline analysis response is unavailable.')
+ this.status = status
+ this.report = null; this.emit()
+ } catch (error) {
+ if (this.active && generation === this.generation) { this.error = error.message; this.emit() }
+ } finally {
+ if (this.active && generation === this.generation) { this.busy = false; this.emit(); this.refresh() }
+ }
+ }
+ startAnalysis(segments) { return this.mutate('./api/flm/start', { segments }) }
+ cancelAnalysis() {
+ if (this.status?.state !== 'running' || !this.status.operationId) return
+ return this.mutate('./api/flm/cancel', { operationId: this.status.operationId })
+ }
+}
+
+export const FlmChart = {
+ name: 'FlmChart',
+ props: { series: { type: Array, required: true } },
+ computed: { chart() { return flmChart(this.series) } },
+ template: `
+ {{ chart.top }}
+ {{ chart.bottom }}
+ 0 s +{{ chart.duration }} s
+ `,
+}
+
+export const FlmPage = {
+ name: 'FlmPage',
+ components: { FlmChart },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true }, go: { type: Function, required: true } },
+ data: () => ({ inventoryStatus: 'idle', inventory: null, inventoryError: '', operation: null, report: null,
+ operationError: '', busy: false, requesting: false, selected: [] }),
+ created() {
+ this.inventoryFeed = new LocalHistoryFeed({ publish: ({ status, data, error }) => {
+ this.inventoryStatus = status; this.inventory = data; this.inventoryError = error
+ if (data) this.selected = this.selected.filter((name) => selectableSegments(data).some((segment) => segment.name === name))
+ }, unauthorized: this.unauthorized })
+ this.operationFeed = new FlmFeed({ publish: (state) => Object.assign(this.$data, state), unauthorized: this.unauthorized })
+ },
+ mounted() {
+ this.visibility = () => {
+ if (document.hidden) { this.inventoryFeed.stop(); this.operationFeed.stop() }
+ else if (this.mode === 'local') { this.inventoryFeed.start(); this.operationFeed.start() }
+ }
+ document.addEventListener('visibilitychange', this.visibility)
+ if (this.mode === 'local' && !document.hidden) { this.inventoryFeed.start(); this.operationFeed.start() }
+ },
+ beforeUnmount() { document.removeEventListener('visibilitychange', this.visibility); this.inventoryFeed.stop(); this.operationFeed.stop() },
+ computed: { available() { return selectableSegments(this.inventory) }, canAnalyze() { return this.selected.length >= 1 && this.selected.length <= 5 && !this.busy && !this.requesting && this.operation?.state !== 'running' } },
+ methods: {
+ toggle(name) { this.selected = this.selected.includes(name) ? this.selected.filter((item) => item !== name) :
+ this.selected.length < 5 ? [...this.selected, name] : this.selected },
+ analyze() { if (this.canAnalyze && this.selected.every((name) => this.available.some((item) => item.name === name))) this.operationFeed.startAnalysis(this.selected) },
+ resultLabel(status) { return ({ measured: 'Measured', insufficient_samples: 'Insufficient samples', missing_car_params: 'Missing vehicle data',
+ unsupported_car: 'Unsupported vehicle', unsupported_controller: 'Unsupported controller' })[status] || 'Unavailable' },
+ metric(value) { return finite(value) ? `${value.toFixed(2)} m/s²` : 'Unavailable' },
+ exclusions(items) { return items.map(([reason, count]) => `${reason.replaceAll('_', ' ')}: ${count}`).join(' · ') || 'None recorded' },
+ },
+ template: `
+
Offline Tracking Local recording diagnostics for Ioniq 6 steering torque tracking. Reports do not qualify a vehicle or recommend a tune.
+
Offline analysis requires authenticated local Galaxy access.
+
+ Refresh local recordings
+ Reading local recordings…
{{ inventoryError }}
+ This recording scan was incomplete. More local segments may exist.
+ Choose Full Logs Select 1–5 closed local segments. Quick logs alone cannot provide this report.
+
+ Analyze selected {{ selected.length }} of 5 selected
+
+ No closed full logs found in this scan.
+ Route {{ segment.routeId }} · Segment {{ segment.number }}
+ Analysis
+ Analyzing {{ operation.processed }} of {{ operation.selected }} selected segments…
+ Analysis completed.
+ Analysis canceled.
+ Analysis failed.
+ Analysis owner unavailable.
+ No analysis running.
+ {{ operationError }}
+ Refresh status
+ Cancel analysis
+ Offline diagnostic only · {{ report.segments.length }} {{ report.segments.length === 1 ? 'segment' : 'segments' }} · No tune recommendation
+
+ {{ entry.source.segmentName }} {{ resultLabel(entry.analysis.status) }} · Full log SHA {{ entry.source.sha256.slice(0,12) }}…
+ Eligible samples: {{ entry.analysis.eligible_samples }} · Mean absolute error: {{ metric(entry.analysis.mean_abs_error) }} · RMSE: {{ metric(entry.analysis.root_mean_square_error) }}
+ Excluded observations: {{ exclusions(entry.analysis.exclusions) }}
+ Lateral acceleration · m/s² · gaps mark excluded or interrupted data
+ Desired Actual
+ No eligible tracking series for this segment.
+
+
+
+
+ {{ label }}
+
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/galaxy-setting-row.js b/openpilot/starpilot/galaxy/web/js/galaxy-setting-row.js
new file mode 100644
index 0000000000..b9b67aee31
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/galaxy-setting-row.js
@@ -0,0 +1,184 @@
+import { GalaxySelect } from "./galaxy-select.js"
+
+export const FINE_SCRUB_HOLD_MS = 300
+export const FINE_SCRUB_FACTOR = 5
+const FINE_SCRUB_JITTER_PX = 4
+
+export function numericBounds(row) {
+ const min = Number(row.minimum), max = Number(row.maximum), step = Number(row.step)
+ return Number.isFinite(min) && Number.isFinite(max) && Number.isFinite(step) && max > min && step > 0
+ ? { min, max, step } : null
+}
+
+export function snapNumeric(value, bounds) {
+ if (!bounds || value === "" || value === null || value === undefined || !Number.isFinite(Number(value))) return null
+ const { min, max, step } = bounds
+ let lastStep = Math.floor((max - min) / step + 1e-9)
+ if (Number((min + lastStep * step).toFixed(8)) > max) lastStep--
+ const index = Math.max(0, Math.min(lastStep, Math.round((Number(value) - min) / step)))
+ return Number((min + index * step).toFixed(8))
+}
+
+export function settingControl(row) {
+ if (row.page) return "group"
+ if (row.confirm || row.repairValue) return "action"
+ if (row.choices?.length === 2 && row.choices.includes("Off") && row.choices.includes("On") && row.choices.includes(row.value)) return "switch"
+ if (numericBounds(row) && ((Number.isFinite(Number(row.value)) && row.value !== "") ||
+ (row.value === "Auto" && row.choices?.includes("Auto")))) return "slider"
+ if (row.choices?.length && row.choices.includes(row.value)) return "select"
+ return "readout"
+}
+
+export const GalaxySettingRow = {
+ name: "GalaxySettingRow",
+ components: { GalaxySelect },
+ props: {
+ row: { type: Object, required: true },
+ index: { type: Number, required: true },
+ disabled: { type: Boolean, default: false },
+ saveValue: { type: Function, required: true },
+ },
+ emits: ["open", "review"],
+ data() { return { preview: undefined, interacting: false, fineScrub: null, isFineScrubbing: false, updating: false } },
+ computed: {
+ control() { return settingControl(this.row) },
+ bounds() {
+ const bounds = numericBounds(this.row)
+ if (!bounds || !this.row.choices?.includes("Auto")) return bounds
+ const numericMax = snapNumeric(bounds.max, bounds)
+ return { ...bounds, numericMax, max: Number((numericMax + bounds.step).toFixed(8)), auto: true }
+ },
+ locked() { return this.disabled || this.updating || !this.row.available || (!this.row.action && !this.row.page) },
+ currentValue() { return this.preview !== undefined ? this.preview : this.row.value },
+ sliderValue() { return this.currentValue === "Auto" && this.bounds?.auto ? this.bounds.max : this.currentValue },
+ displayValue() {
+ return this.currentValue === "Auto" || (this.bounds?.auto && Number(this.currentValue) === this.bounds.max)
+ ? "Auto" : `${this.currentValue}${this.row.unit ? " " + this.row.unit : ""}`
+ },
+ },
+ methods: {
+ async commit(value) {
+ if (this.locked || String(value) === String(this.row.value)) { this.preview = undefined; return }
+ this.preview = value
+ this.updating = true
+ try { await this.saveValue(this.index, value) }
+ finally { this.preview = undefined; this.updating = false }
+ },
+ onSwitch(event) {
+ const next = event.target.checked ? "On" : "Off"
+ event.target.checked = this.currentValue === "On"
+ return this.commit(next)
+ },
+ onSelect(event) { return this.commit(event.target.value) },
+ beginInteract() { if (!this.locked) this.interacting = true },
+ flushSlider(raw) {
+ const numeric = snapNumeric(raw, this.bounds)
+ const next = numeric !== null && this.bounds?.auto && numeric === this.bounds.max ? "Auto" : numeric
+ this.preview = undefined
+ if (next !== null && String(next) !== String(this.row.value)) return this.commit(next)
+ },
+ clearHoldTimer() {
+ if (this._holdTimer !== undefined) clearTimeout(this._holdTimer)
+ this._holdTimer = undefined
+ },
+ startHoldTimer() {
+ this.clearHoldTimer()
+ if (!this.fineScrub || this.fineScrub.active) return
+ this._holdTimer = setTimeout(() => this.activateFineScrub(), FINE_SCRUB_HOLD_MS)
+ },
+ activateFineScrub() {
+ if (!this.fineScrub || this.fineScrub.active || this.locked) return
+ this.fineScrub.active = true
+ this.fineScrub.baseValue = snapNumeric(this.sliderValue, this.bounds) ?? this.bounds.min
+ this.fineScrub.baseX = this.fineScrub.lastX
+ this.isFineScrubbing = true
+ try { globalThis.navigator?.vibrate?.(15) } catch {}
+ },
+ onSliderInput(event) {
+ if (this.locked || this.fineScrub?.active) { event.target.value = this.sliderValue; return }
+ this.beginInteract()
+ this.preview = Number(event.target.value)
+ this.startHoldTimer()
+ },
+ onSliderCommit(event) {
+ if (this.fineScrub) return
+ this.interacting = false
+ return this.flushSlider(event.target.value)
+ },
+ onSliderBlur(event) { if (this.interacting && !this.fineScrub) return this.onSliderCommit(event) },
+ onSliderPointerDown(event) {
+ if (this.locked) return
+ this.beginInteract()
+ try { event.target.setPointerCapture?.(event.pointerId) } catch {}
+ const rect = event.target.getBoundingClientRect()
+ this.fineScrub = { active: false, baseValue: snapNumeric(this.sliderValue, this.bounds),
+ baseX: event.clientX, lastX: event.clientX, track: rect.width || 200, pointerId: event.pointerId }
+ this.startHoldTimer()
+ },
+ onSliderPointerMove(event) {
+ const scrub = this.fineScrub
+ if (!scrub || event.pointerId !== scrub.pointerId || this.locked) return
+ if (!scrub.active) {
+ if (Math.abs(event.clientX - scrub.lastX) > FINE_SCRUB_JITTER_PX) {
+ scrub.lastX = event.clientX
+ this.startHoldTimer()
+ }
+ return
+ }
+ event.preventDefault()
+ const raw = scrub.baseValue + (event.clientX - scrub.baseX) * (this.bounds.max - this.bounds.min) / scrub.track / FINE_SCRUB_FACTOR
+ const next = snapNumeric(raw, this.bounds)
+ if (next === null) return
+ this.preview = next
+ if (this.$refs.slider) this.$refs.slider.value = next
+ },
+ releasePointer(event) {
+ const pointerId = this.fineScrub?.pointerId
+ this.clearHoldTimer()
+ this.fineScrub = null
+ this.isFineScrubbing = this.interacting = false
+ try { (event?.target || this.$refs.slider)?.releasePointerCapture?.(pointerId) } catch {}
+ },
+ onSliderPointerEnd(event) {
+ if (!this.fineScrub || event.pointerId !== this.fineScrub.pointerId) return
+ const value = this.sliderValue
+ this.releasePointer(event)
+ return this.flushSlider(value)
+ },
+ onSliderCancel(event) {
+ if (!this.fineScrub || event.pointerId !== this.fineScrub.pointerId) return
+ this.releasePointer(event)
+ this.preview = undefined
+ if (this.$refs.slider) this.$refs.slider.value = this.sliderValue
+ },
+ },
+ beforeUnmount() { this.clearHoldTimer() },
+ template: `
+
+
+
{{ row.label }}
+
{{ row.reason.replace('https://firestar.link/discord', '') }}StarPilot Discord
+
{{ row.value }}
+
+
+
+
+
+
+
{{ bounds.min }} to {{ bounds.numericMax ?? bounds.max }} {{ row.unit }} · Auto at right Step: {{ bounds.step }} {{ row.unit }}
+
+
+ {{ choice }}
+
+
Manage
+
{{ row.repairValue === 'Reset' || /reset|default/i.test(row.label) ? 'Reset to Default' : row.repairValue ? 'Set ' + row.repairValue : row.label }}
+
{{ displayValue }}
+
Galaxy Tunnel Pair this comma for remote Galaxy access. Installing the Galaxy app is a separate option in the app menu.
+
Pairing is available on your comma.
+
+
+
+ Pairing saved. Scan this code or open the link when the Galaxy tunnel is connected.
+ The remote tunnel client is not installed on this device yet. The link will work after Galaxy's tunnel client is available.
+ {{ url }}
+ {{ busy ? 'Unpairing…' : 'Unpair' }}
+
+
+ Not Paired
+ Enter your existing Galaxy password to keep its saved link and QR code.
+ An earlier Galaxy pairing is available. Enter its password to keep the saved link, or choose a new password (at least 8 characters) for a new link.
+ First choose a password, then pair your comma. Open Galaxy remotely using the link and QR code when the tunnel is connected.
+ {{ busy ? 'Pairing…' : 'Set password & pair' }}
+
+ {{ error }}
+
+
+
+
+
Dashboard Your saved drives and current device
+
+
+
Dashboard information is available on your device.
+
+
+
+ {{ drives.status === 'loading' ? 'Loading your drives…' : drives.error || 'Drive history is unavailable.' }}
+ No saved drives yet.
+
+ {{ driving.last.date }}
+ This drive is still being analyzed.
+ {{ driving.last.distance }} distance
+
{{ driving.last.duration }} duration
+
{{ driving.last.engaged }} engaged
+
{{ driving.last.model }} recorded model
+
+
+
+
+
+
+
+ Saved History {{ driving.totals.distance }} {{ counted(driving.totals.drives, "drive") }} Time on the Road {{ driving.totals.duration }} {{ driving.totals.engaged }} engaged This Week {{ driving.week.distance }} {{ counted(driving.week.drives, "drive") }} · {{ driving.week.duration }}
+
+
This Week
+
+ {{ driving.week.engaged }} engaged
+
{{ driving.week.distance }} across {{ counted(driving.week.drives, "drive") }}
Distance per day · {{ driving.week.timezone }}
+
+
{{ day.label }} {{ day.distance }}
+
Personal Records
+ Records will appear as drives are saved.
+ {{ record.label }} {{ record.display }}
+
Recent Drives
+ No saved drives yet.
+
+
{{ drive.date }} {{ drive.model }}
+
{{ drive.complete ? drive.distance : 'Analyzing' }} {{ drive.duration }} · {{ drive.engaged }} engaged
+
{{ drive.ignored ? 'Excluded from totals' : drive.complete ? 'Included in totals' : 'Waiting for analysis' }}
+
+ {{ drive.ignored ? 'Include in stats' : 'Ignore drive stats' }}
+
{{ drives.error }}
+ Recorded Models
+ Recorded models will appear as drives are saved.
+
+
+
+
{{ model.name }} {{ counted(model.drives, "drive") }} · {{ model.distance }}
+
+
+
+ Live system status unavailable.
+ {{ summary.system.cpu }} CPU
+
{{ summary.system.memory }} Memory
Storage: {{ summary.system.storage }}
Sampled {{ summary.system.observed }} Open System Monitor
+
+
+ Model identity unavailable.
+ Reported health: {{ summary.model.health }}
+ Loaded variant: {{ summary.model.variant }}
+ {{ summary.model.fallback }} Open Driving Model
+
+
+ Installed software report unavailable.
+ Installed: {{ summary.software.version }}
+ Branch: {{ summary.software.branch }}
+ Last updater report: {{ summary.software.update }}
Open Software & Updates
+
+
+
+
Install Galaxy
+
{{ message }}
+
+
Local Comma Access {{ state.loading ? 'Checking…' : 'Refresh' }}
+ {{ state.error }}
+
+ On the same network, open one of these comma addresses:
+
+ These addresses come from the comma; your browser must be able to reach its network.
+
+ {{ state.data.reason || 'The comma has no local network address available.' }}
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/logs.js b/openpilot/starpilot/galaxy/web/js/logs.js
new file mode 100644
index 0000000000..9b62ced043
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/logs.js
@@ -0,0 +1,71 @@
+import { TroubleshootPage, TmuxPage } from "./diagnostic-tools.js"
+import { navigate } from "./router.js"
+import { SystemMonitor } from "./system-monitor.js"
+import { CrashReportsFeed } from "./crash-reports.js"
+
+export const Logs = {
+ name: "Logs",
+ components: { SystemMonitor, TroubleshootPage, TmuxPage },
+ props: { path: { type: String, required: true }, mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ crashes: { reports: [], scanIncomplete: false, listLimited: false, status: "idle", error: "", selected: null, preview: null, previewStatus: "idle" }, search: "" }),
+ computed: {
+ visibleReports() { return this.crashes.reports.filter((item) => item.name.toLowerCase().includes(this.search.toLowerCase())) },
+ },
+ created() {
+ this.crashFeed = new CrashReportsFeed({ publish: (update) => Object.assign(this.crashes, update), unauthorized: this.unauthorized })
+ },
+ mounted() { if (this.path === "/logs/crashes" && this.mode === "local") this.crashFeed.start() },
+ beforeUnmount() { this.crashFeed.stop() },
+ watch: {
+ path(next, previous) {
+ if (next === "/logs/crashes" && this.mode === "local") this.crashFeed.start()
+ else if (previous === "/logs/crashes") { this.crashFeed.stop(); this.search = "" }
+ },
+ },
+ methods: {
+ go: navigate,
+ openTroubleshoot() { navigate("/logs/troubleshoot") },
+ openTmux() { navigate("/logs/tmux") },
+ openMonitor() { navigate("/logs/monitor") },
+ openCrashes() { if (this.mode === "local") navigate("/logs/crashes") },
+ openLogs() { navigate("/logs") },
+ reportDate(seconds) { return new Date(seconds * 1000).toLocaleString() },
+ reportSize(bytes) { return `${(bytes / 1024).toFixed(1)} KiB` },
+ async copyPreview() {
+ if (!this.crashes.preview) return
+ try { await navigator.clipboard.writeText(this.crashes.preview.text) }
+ catch { this.crashes.error = "Copy is unavailable in this browser." }
+ },
+ },
+ template: `
+
+
Logs & Diagnostics
+
+
System Monitor {{ mode === 'sample' ? 'Inspect a synthetic activity sample' : 'Inspect local system activity' }}
+
Crash Reports Read local reports
+
Crash Reports Unavailable in preview
+
tmux Live View Read the launcher console tail
+
Troubleshoot Read device and vehicle diagnostics
+
+
+
+
+
+ Crash Reports
+ Refresh
+ Directory scan is incomplete; newer reports may be omitted.
+ Showing the 200 newest reports; older reports are omitted.
+ Loading crash reports…
+ Crash reports are unavailable.
+ {{ search ? 'No matching reports.' : 'No crash reports.' }}
+
+ {{ report.name }} {{ reportDate(report.modifiedAt) }} · {{ reportSize(report.size) }}
+
+ {{ crashes.preview.name }} Copy visible text
Preview truncated to the first 256 KiB.
{{ crashes.preview.text }} {{ crashes.error }}
+
+
This Logs & Diagnostics page is unavailable in the offline preview.
+
+
+ Local saved curves are unavailable in preview.
+
+
+ {{ profile }}
+
+ {{ category }}
+ Loading saved curve…
+ Saved curve is unavailable.
+ {{ state.error }}
+ Refresh
+
+ {{ state.data.title }} Enable saved profiles and this personality in All profile settings to use its curve.
+
Refresh Editing requires fresh parked vehicle evidence.
+
+
+ {{ graph.top.toFixed(2) }} {{ graph.bottom.toFixed(2) }}
+ 0 90 mph
+
+ Saved custom points in {{ points[0].unit }}. Use the controls below to change one point at a time.
+
+
+
+ {{ preset?.value === 'custom' ? 'Saved custom points are unavailable; review the saved profile.' : 'Choose the Custom preset to edit saved points. Preset curves remain managed by the vehicle profile.' }}
+ All profile settings
+
+
+
Confirm Saved Preference {{ state.pending.question }}
+
Cancel
+ Save
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/map-operations.js b/openpilot/starpilot/galaxy/web/js/map-operations.js
new file mode 100644
index 0000000000..b978807507
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/map-operations.js
@@ -0,0 +1,330 @@
+// One parked map operation belongs to the local owner, not to this browser tab.
+const STATES = new Set(["idle", "transferring", "validating", "selecting", "completed", "canceled", "failed", "interrupted", "unavailable"])
+const GENERATION = /^(?:|[0-9a-f]{64})$/
+const TOKEN = /^(?:nation|us_state)\.[A-Za-z0-9_-]+$/
+const ERROR_LABELS = {
+ canceled: "Canceled", interrupted: "Interrupted", selection_changed: "The saved selection changed",
+ not_parked: "Parked availability was lost", package_unavailable: "The map package is unavailable",
+ process_failed: "Map preparation failed", unavailable: "Map manager unavailable",
+}
+const ACTION_ERRORS = {
+ busy: "Another map download is running. Check its progress below.",
+ selection_changed: "The selected map changed. Refresh and review the region again.",
+ not_parked: "Map downloads need a fresh parked status. Refresh and try again.",
+ operation_changed: "This map download changed. Refresh its status before trying again.",
+}
+const integer = (value) => Number.isSafeInteger(value) && value >= 0
+const nullableText = (value) => value === null || typeof value === "string" && value.length <= 128
+const bounds = (value) => value === null || Array.isArray(value) && value.length === 4 &&
+ value.every((n) => typeof n === "number" && Number.isFinite(n)) &&
+ value[0] >= -90 && value[2] <= 90 && value[1] >= -180 && value[3] <= 180 &&
+ value[0] < value[2] && value[1] < value[3]
+
+export function validCatalog(value) {
+ if (!Array.isArray(value?.regions) || value.regions.length > 500 ||
+ !integer(value.maxGroups) || value.maxGroups < 1 || !integer(value.maxTransferBytes) ||
+ !integer(value.maxNewDiskBytes) || !GENERATION.test(value.selectedGeneration ?? "!")) return false
+ const seen = new Set()
+ return value.regions.every((region) => {
+ if (!TOKEN.test(region?.token) || region.token.length > 73 || seen.has(region.token) || typeof region.name !== "string" ||
+ !region.name.trim() || region.name.length > 128 || (region.available && (!bounds(region.bounds) || region.bounds === null)) ||
+ !integer(region.groups) || typeof region.available !== "boolean" ||
+ !(region.unavailable == null || ["invalid_bounds", "date_line_bounds", "too_large"].includes(region.unavailable)) ||
+ (region.available && (region.unavailable != null || region.groups > value.maxGroups)) ||
+ (!region.available && !["invalid_bounds", "date_line_bounds", "too_large"].includes(region.unavailable))) return false
+ seen.add(region.token)
+ return true
+ })
+}
+
+export function validSetup(value) {
+ return value?.schemaVersion === 1 && typeof value.packageReady === "boolean" &&
+ ["ready", "missing_binary", "missing_manifest", "invalid_package"].includes(value.packageState) &&
+ value.packageReady === (value.packageState === "ready") && typeof value.snapshotReady === "boolean" &&
+ GENERATION.test(value.selectedGeneration ?? "!") && value.snapshotReady === Boolean(value.selectedGeneration) &&
+ typeof value.parked === "boolean" && integer(value.freeDiskBytes) &&
+ integer(value.maxTransferBytes) && integer(value.maxNewDiskBytes)
+}
+
+export function validOperation(value) {
+ return value?.schemaVersion === 1 && STATES.has(value.state) &&
+ typeof value.ownerSession === "string" && value.ownerSession.length <= 128 &&
+ nullableText(value.operationId) && nullableText(value.regionToken) && bounds(value.bounds) &&
+ integer(value.completedGroups) && integer(value.totalGroups) && value.completedGroups <= value.totalGroups &&
+ integer(value.transferredBytes) && integer(value.transferBudgetBytes) &&
+ nullableText(value.preparedGeneration) && GENERATION.test(value.selectedGeneration ?? "!") &&
+ nullableText(value.errorCode) && typeof value.selectedForNextShadowStart === "boolean" &&
+ (!value.selectedForNextShadowStart || value.state === "completed" && value.selectedGeneration !== "")
+}
+
+export const formatBytes = (value) => !integer(value) ? "Unavailable" : value < 1024 ** 2 ? `${value} B` :
+ value < 1024 ** 3 ? `${(value / (1024 ** 2)).toFixed(1)} MiB` : `${(value / (1024 ** 3)).toFixed(1)} GiB`
+export const formatBounds = (value) => bounds(value) && value !== null ?
+ `latitude ${value[0]}°–${value[2]}°, longitude ${value[1]}°–${value[3]}°` : "extent unavailable"
+
+export class MapOperationsClient {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.active = false
+ this.generation = 0
+ this.requests = new Set()
+ this.timer = null
+ this.setup = null
+ this.catalog = null
+ this.operation = null
+ this.busy = false
+ this.error = ""
+ this.actionError = ""
+ }
+
+ emit(update = {}) {
+ this.publish({ setup: this.setup, catalog: this.catalog, operation: this.operation, busy: this.busy,
+ error: this.actionError || this.error, ...update })
+ }
+
+ stop() {
+ this.active = false
+ this.generation++
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ for (const request of this.requests) request.abort()
+ this.requests.clear()
+ this.setup = this.catalog = this.operation = null
+ this.busy = false
+ this.error = this.actionError = ""
+ this.emit()
+ }
+
+ start() {
+ this.stop()
+ this.active = true
+ this.loadCatalog()
+ this.loadStatus()
+ this.loadSetup()
+ }
+
+ async request(url, body = null) {
+ const generation = this.generation
+ const controller = new AbortController()
+ this.requests.add(controller)
+ const deadline = this.later(() => controller.abort(), 10000)
+ try {
+ const response = await this.fetcher(url, { credentials: "same-origin", cache: "no-store",
+ signal: controller.signal, ...(body === null ? {} : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }) })
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ if (response.status === 401) { this.stop(); this.unauthorized(); return null }
+ if (response.status === 409) {
+ const body = await response.json().catch(() => null)
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ const message = Object.hasOwn(ACTION_ERRORS, body?.code) ? ACTION_ERRORS[body.code] :
+ "Map request could not be completed. Refresh status and try again."
+ throw new Error(message)
+ }
+ if (response.status === 503) {
+ const body = await response.json().catch(() => null)
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ if (["setup_required", "access_unavailable"].includes(body?.code)) {
+ this.stop(); this.unauthorized(); return null
+ }
+ if (body?.code === "package_unavailable")
+ throw new Error("Offline map package is unavailable on this device.")
+ throw new Error("Offline maps service is unavailable.")
+ }
+ if (!response.ok) throw new Error("Map request was rejected.")
+ const data = await response.json()
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ return data
+ } finally {
+ this.cancelTimer(deadline)
+ this.requests.delete(controller)
+ }
+ }
+
+ async loadSetup() {
+ if (!this.active) return
+ try {
+ const data = await this.request("./api/maps/setup")
+ if (data === null) return
+ if (!validSetup(data)) throw new Error("Map setup status is unavailable.")
+ const wasReady = this.setup?.packageReady
+ this.setup = data
+ this.emit()
+ if (data.packageReady && wasReady === false) await this.loadCatalog()
+ } catch (error) { if (this.active) { this.error = error.message; this.emit() } }
+ }
+
+ async loadCatalog() {
+ if (!this.active) return
+ try {
+ const data = await this.request("./api/maps/catalog")
+ if (data === null) return
+ if (!validCatalog(data)) throw new Error("Map catalog is unavailable.")
+ this.catalog = data
+ if (this.operation !== null) this.error = ""
+ this.emit()
+ } catch (error) { if (this.active) { this.error = error.message; this.emit() } }
+ }
+
+ async loadStatus() {
+ if (!this.active || this.busy) return
+ const generation = this.generation
+ try {
+ const data = await this.request("./api/maps/operation")
+ if (data !== null) {
+ if (!validOperation(data)) throw new Error("Map operation status is unavailable.")
+ this.operation = data
+ if (this.catalog !== null) this.error = ""
+ this.emit()
+ }
+ } catch (error) {
+ if (this.active && generation === this.generation) {
+ this.operation = null; this.error = error.message; this.emit()
+ }
+ } finally {
+ if (this.active && generation === this.generation && !this.busy)
+ this.timer = this.later(() => { this.timer = null; this.loadStatus() }, 2500)
+ }
+ }
+
+ pausePolling() {
+ this.generation++
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ for (const request of this.requests) request.abort()
+ this.requests.clear()
+ }
+
+ async startRegion(region, expectedGeneration, expectedOwnerSession) {
+ if (!this.active || this.busy || !this.catalog || !this.operation || !region?.available ||
+ !this.catalog.regions.some((item) => item.token === region.token && item.available) ||
+ !["idle", "completed", "canceled", "failed", "interrupted"].includes(this.operation.state)) {
+ this.actionError = "Map operation changed. Refresh status and review again."
+ this.emit()
+ return
+ }
+ if (this.operation.selectedGeneration !== expectedGeneration || this.operation.ownerSession !== expectedOwnerSession) {
+ this.actionError = "Map selection changed. Review this region again."
+ this.emit()
+ return
+ }
+ const expected = this.operation.selectedGeneration
+ this.pausePolling()
+ const generation = this.generation
+ this.busy = true
+ this.actionError = ""
+ this.emit()
+ try {
+ const data = await this.request("./api/maps/start", { regionToken: region.token,
+ maxTransferBytes: this.catalog.maxTransferBytes, maxNewDiskBytes: this.catalog.maxNewDiskBytes,
+ expectedCurrentGeneration: expected })
+ if (data === null) return
+ if (!validOperation(data)) throw new Error("Map start status is unavailable. Refresh status.")
+ this.operation = data
+ this.emit()
+ } catch (error) { if (this.active && generation === this.generation) { this.actionError = error.message; this.emit() } }
+ finally { if (this.active && generation === this.generation) { this.busy = false; this.emit(); await this.loadStatus() } }
+ }
+
+ async cancel() {
+ if (!this.active || this.busy || !this.operation?.operationId ||
+ !["transferring", "validating", "selecting"].includes(this.operation.state)) return
+ const operationId = this.operation.operationId
+ this.pausePolling()
+ const generation = this.generation
+ this.busy = true
+ this.actionError = ""
+ this.emit()
+ try {
+ const data = await this.request("./api/maps/cancel", { operationId })
+ if (data === null) return
+ if (!validOperation(data)) throw new Error("Cancellation status is unavailable. Refresh status.")
+ this.operation = data
+ this.emit()
+ } catch (error) { if (this.active && generation === this.generation) { this.actionError = error.message; this.emit() } }
+ finally { if (this.active && generation === this.generation) { this.busy = false; this.emit(); await this.loadStatus() } }
+ }
+}
+
+export const MapOperationsPanel = {
+ name: "MapOperationsPanel",
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ setup: null, catalog: null, operation: null, busy: false, error: "", search: "", review: null }),
+ created() { this.client = new MapOperationsClient({ publish: (update) => {
+ Object.assign(this.$data, update)
+ if (update.operation === null || update.error) this.review = null
+ }, unauthorized: () => { this.review = null; this.unauthorized() } }) },
+ mounted() {
+ this.visibility = () => { if (document.hidden) { this.review = null; this.client.stop() }
+ else if (this.mode === "local") this.client.start() }
+ document.addEventListener("visibilitychange", this.visibility)
+ if (this.mode === "local" && !document.hidden) this.client.start()
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibility); this.client.stop() },
+ computed: {
+ regions() {
+ const query = this.search.trim().toLocaleLowerCase()
+ return (this.catalog?.regions || []).filter((item) => !query ||
+ `${item.name} ${item.token}`.toLocaleLowerCase().includes(query))
+ },
+ running() { return ["transferring", "validating", "selecting"].includes(this.operation?.state) },
+ },
+ methods: {
+ formatBytes, formatBounds,
+ errorLabel(code) { return ERROR_LABELS[code] || "Review this operation in Galaxy" },
+ reviewRegion(region) {
+ if (!this.busy && region.available && this.operation)
+ this.review = { region, selectedGeneration: this.operation.selectedGeneration, ownerSession: this.operation.ownerSession }
+ },
+ async confirm() {
+ const review = this.review
+ this.review = null
+ if (review) await this.client.startRegion(review.region, review.selectedGeneration, review.ownerSession)
+ },
+ },
+ template: `
+
+
+
+
Choose a region to download for offline use. Downloading another region replaces the selected map.
+
Parked map management is unavailable in the offline preview.
+
+ {{ setup.packageReady ? 'Map service ready.' : 'Map service setup required.' }} {{ setup.snapshotReady ? 'A downloaded map is selected.' : 'Choose a region after setup to download its maps.' }}
+ {{ setup.packageState === 'invalid_package' ? 'The installed map service does not match this software’s verified source package.' : 'The verified map service package is missing.' }} Install a matching Mapd package through the device software update, then retry maps. Saved map selection is retained.
+ {{ formatBytes(setup.freeDiskBytes) }} available storage. {{ setup.parked ? 'Parked downloads available.' : 'Park to download maps.' }}
{{ error }}
+ Retry maps
+ {{ error ? 'Map operation status unavailable.' : 'Loading map operation…' }}
+
+ Operation {{ operation.state }}
+ Selected map {{ operation.selectedGeneration ? 'Saved selection' : 'None' }}
+ Region {{ operation.regionToken }}
+ Progress {{ operation.completedGroups }} of {{ operation.totalGroups }} areas prepared
+ Transferred {{ formatBytes(operation.transferredBytes) }} of {{ formatBytes(operation.transferBudgetBytes) }} cap Download complete. This map will be used the next time Maps starts.
+ A downloaded map is selected.
+ {{ errorLabel(operation.errorCode) }}.
+ Cancel operation
+
+ Search regions
+
+ {{ error ? 'Map catalog unavailable.' : 'Loading map catalog…' }}
+ {{ regions.length }} regions shown · Up to {{ formatBytes(catalog.maxTransferBytes) }} transfer · {{ formatBytes(catalog.maxNewDiskBytes) }} new storage.
+
+
+
{{ region.name }} {{ region.token }} · {{ region.groups }} groups
+ Unavailable: {{ region.unavailable.replaceAll('_', ' ') }}
+
Review…
+
+
+
+
Replace Selected Map?
+
{{ review.region.name }} covers an approximate rectangle ({{ formatBounds(review.region.bounds) }}), {{ review.region.groups }} groups. This can transfer up to {{ formatBytes(catalog.maxTransferBytes) }} and use up to {{ formatBytes(catalog.maxNewDiskBytes) }} of new disk space. The result is selected for the next map service start.
+
Cancel
+ Start download
+
+
`,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/model-laboratory.js b/openpilot/starpilot/galaxy/web/js/model-laboratory.js
new file mode 100644
index 0000000000..88b40603b2
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/model-laboratory.js
@@ -0,0 +1,185 @@
+import { GalaxySelect } from "./galaxy-select.js"
+import { ModelManagerFeed } from "./models.js"
+
+export const laboratoryModels = data => data?.models || []
+export const laboratoryReady = data => laboratoryModels(data).filter(m => m.small === true && m.modelLabEligible === true && m.modelLabArtifactAvailable === true && m.modelLabArtifactInstalled === true)
+
+export const laboratoryStatusLabel = model => ({
+ unsupported: "Not supported", unpublished: "Not published", checking: "Checking download",
+ missing: "Not downloaded", "runtime-unavailable": "Downloaded", "gpu-unavailable": "Connect Chestnut",
+ installed: "Downloaded",
+})[model.modelLabStatus] || (model.modelLabArtifactInstalled ? "Downloaded" : "Not downloaded")
+
+export function laboratorySelectionError(data, configuration) {
+ if (!data) return "Waiting for parked device status"
+ if (data.isOnroad !== false) return "Turn off the vehicle before changing the model pair"
+ if (!data.runtimeSupported) return data.runtimeUnavailableReason || "Model Laboratory runtime is unavailable"
+ if (!data.chestnutReady) return "Connect a firmware-ready Chestnut to enable a pair"
+ const ready = laboratoryReady(data)
+ if (ready.length < 2) return "Download at least two eGPU variants to compose a pair"
+ if (!configuration.lateralModel || !configuration.longitudinalModel) return "Choose two downloaded eGPU variants"
+ if (configuration.lateralModel === configuration.longitudinalModel) return "Choose two different models"
+ if (![configuration.lateralModel, configuration.longitudinalModel].every(id => ready.some(m => m.value === id))) return "Both models must have downloaded eGPU variants"
+ return ""
+}
+
+export function laboratoryActionAllowed(data, action, model, configuration = data?.configuration) {
+ if (!data || data.capabilities?.[action === "enable" || action === "disable" ? "configure" : action] !== true) return false
+ if (action === "cancel") return data.download?.downloading === true && typeof data.download.jobId === "string"
+ if (data.isOnroad !== false || data.download?.downloading) return false
+ if (action === "enable") return !laboratorySelectionError(data, configuration)
+ if (action === "disable") return data.configuration.enabled === true
+ if (action === "download") return laboratoryModels(data).some(m => m.value === model?.value && m.small === true && m.modelLabEligible === true && m.modelLabArtifactAvailable === true && !m.modelLabArtifactInstalled)
+ if (action === "delete") return laboratoryReady(data).some(m => m.value === model?.value) &&
+ !(data.configuration.enabled && [data.configuration.lateralModel, data.configuration.longitudinalModel].includes(model.value))
+ return action === "refresh"
+}
+
+export function laboratoryDraft(data, draft, dirty) {
+ const configuration = { ...data.configuration, ...(dirty ? { lateralModel: draft.lateralModel, longitudinalModel: draft.longitudinalModel } : {}) }
+ if (!dirty) {
+ const ready = laboratoryReady(data)
+ if (!configuration.lateralModel) configuration.lateralModel = ready[0]?.value || ""
+ if (!configuration.longitudinalModel) configuration.longitudinalModel = ready.find(m => m.value !== configuration.lateralModel)?.value || ""
+ }
+ return configuration
+}
+
+function validPayload(data) {
+ return data?.schemaVersion === 1 && typeof data.isOnroad === "boolean" && typeof data.chestnutReady === "boolean" &&
+ typeof data.runtimeSupported === "boolean" && typeof data.configuration?.enabled === "boolean" &&
+ [data.configuration.lateralModel, data.configuration.longitudinalModel].every(id => typeof id === "string") &&
+ data.capabilities && typeof data.capabilities === "object" && typeof data.download?.downloading === "boolean" &&
+ typeof data.runtime?.active === "boolean" && typeof data.runtime?.requested === "boolean" && Array.isArray(data.models) &&
+ data.models.every(m => typeof m?.value === "string" && typeof m.label === "string") &&
+ new Set(data.models.map(m => m.value)).size === data.models.length
+}
+
+export class LaboratoryFeed extends ModelManagerFeed {
+ stop() {
+ if (this.expiry != null) this.cancel(this.expiry)
+ this.expiry = null
+ super.stop()
+ }
+ async load() {
+ if (!this.active || this.saving) return null
+ const data = await this.requestJson("laboratory")
+ if (!this.active) return null
+ if (data) {
+ this.data = validPayload(data) ? data : null
+ this.publish({ loading: false, data: this.data, error: this.data ? "" : "Invalid Model Laboratory response" })
+ if (this.expiry != null) this.cancel(this.expiry)
+ this.expiry = this.later(() => {
+ this.data = null
+ this.publish({ loading: false, data: null, error: "Laboratory status refresh delayed" })
+ }, 6000)
+ }
+ if (this.poll === null) this.poll = this.later(() => this.load(), 2000)
+ return this.data
+ }
+ async action(action, model = null, configuration) {
+ if (!this.active || this.saving || !laboratoryActionAllowed(this.data, action, model, configuration)) return null
+ const paths = { enable: "laboratory", disable: "laboratory", download: "laboratory/download", delete: "laboratory/delete", cancel: "cancel", refresh: "refresh_manifest" }
+ const payload = action === "enable" || action === "disable" ? { ...configuration, enabled: action === "enable" } :
+ action === "cancel" ? { jobId: this.data.download.jobId } : model ? { model: model.value } : {}
+ this.saving = true
+ const result = await this.requestJson(paths[action], payload)
+ if (!this.active) return null
+ this.saving = false
+ const error = this.lastError
+ await this.load()
+ if (error && this.active) this.publish({ loading: false, data: this.data, error })
+ return result
+ }
+}
+
+export const LaboratoryPage = {
+ components: { GalaxySelect },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ loading: true, status: null, error: "", message: "", busy: false, dirty: false, trackingProgress: false,
+ configuration: { enabled: false, lateralModel: "", longitudinalModel: "" } }),
+ computed: {
+ availableModels() { return laboratoryModels(this.status) },
+ readyModels() { return laboratoryReady(this.status) },
+ candidates() { return this.readyModels.filter(m => m.value !== this.configuration.lateralModel) },
+ selectionError() { return laboratorySelectionError(this.status, this.configuration) },
+ runtimeState() { return !this.status ? "Status unavailable" : !this.status.runtimeSupported ? "Unavailable" : this.status.runtime.active ? "Pair active" : this.status.runtime.requested ? "Pair requested" : "Inactive" },
+ },
+ created() {
+ this.feed = new LaboratoryFeed({ unauthorized: this.unauthorized, publish: update => {
+ this.loading = update.loading
+ this.error = update.error
+ this.status = update.data
+ if (update.data) {
+ this.configuration = laboratoryDraft(update.data, this.configuration, this.dirty)
+ if (this.trackingProgress && update.data.download.progress) {
+ this.message = update.data.download.progress
+ if (!update.data.download.downloading) this.trackingProgress = false
+ }
+ }
+ } })
+ },
+ mounted() {
+ this.visibility = () => { if (document.hidden) this.feed.stop(); else if (this.mode === "local") this.feed.start() }
+ document.addEventListener("visibilitychange", this.visibility)
+ if (this.mode === "local" && !document.hidden) this.feed.start()
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibility); this.feed.stop() },
+ methods: {
+ statusLabel: laboratoryStatusLabel,
+ can(action, model = null) { return !this.busy && laboratoryActionAllowed(this.status, action, model, this.configuration) },
+ modelLabel(id) { return this.status?.models.find(m => m.value === id)?.label || id || "Not selected" },
+ changeLateral(value) {
+ this.configuration.lateralModel = value
+ if (this.configuration.longitudinalModel === value) this.configuration.longitudinalModel = this.candidates[0]?.value || ""
+ this.dirty = true
+ },
+ async act(action, model = null) {
+ if (!this.can(action, model)) return
+ if (action === "delete" && !window.confirm(`Delete the eGPU variant for "${model.label}"? The normal on-device model will not be removed.`)) return
+ this.busy = true
+ this.message = ""
+ try {
+ const result = await this.feed.action(action, model, this.configuration)
+ if (result) {
+ this.message = result.message || "Updated"
+ this.trackingProgress = action === "download" || action === "cancel"
+ if (["enable", "disable", "delete"].includes(action)) {
+ this.dirty = false
+ if (this.status) this.configuration = laboratoryDraft(this.status, this.configuration, false)
+ }
+ }
+ } finally { this.busy = false }
+ },
+ },
+ template: `
+
+
+
+ Use lateral judgment from one model and longitudinal judgment from another. {{ status ? (status.chestnutReady ? 'Chestnut ready' : 'Chestnut required') : 'Waiting for device status' }} {{ status.isOnroad ? 'Onroad' : 'Parked' }}
Model Laboratory is available on the device. Preview does not configure a pair.
+ Loading Model Laboratory…
+ {{ error }}
+ {{ status.configurationError }}
+ {{ message }}
+
+
+
+ Browse Small and Big models here. Combining models requires compatible Chestnut downloads and support for running them together.
+ The model catalog is unavailable. Refresh to retry.
+ {{ m.label }} {{ m.value }} · {{ m.small ? 'Small' : 'Big' }} · {{ m.series || 'Unknown series' }} · {{ m.version }} {{ m.modelLabReason || 'Pair artifact status unavailable' }}
{{ statusLabel(m) }} Download eGPU variant Delete eGPU variant
{{ status.download.progress || 'Downloading…' }}
Cancel download
+
+
+
+
Lateral model Path shape, curvature, lane geometry, and driving desire Choose a model {{ m.label }} · {{ m.version }}
+
Longitudinal model Speed, acceleration, stopping, leads, and scene confidence Choose a model {{ m.label }} · {{ m.version }}
+
{{ modelLabel(configuration.lateralModel) }} steers · {{ modelLabel(configuration.longitudinalModel) }} paces
+
{{ selectionError }}
+
Enable for next drive Disable Refresh
+
+
Lateral: {{ modelLabel(status?.runtime.lateralModel) }} Longitudinal: {{ modelLabel(status?.runtime.longitudinalModel) }} {{ status.runtime.error }} {{ status.runtimeUnavailableReason || 'Pair runtime is unavailable.' }}
+
+
Model Manager is unavailable in the offline preview.
+
+
+
+
+
+
+ {{ summary.installed }} installed
+ {{ summary.missing }} missing
+ {{ summary.total }} total
+ Selected: {{ currentLabel }}
+
+
+
{{ message }}
+
+
+
Model Manager {{ error }}
+
+
+
+
Model changes and downloads require parked device status.
+
+
+
+
+ Downloading {{ downloadTargetLabel }}
+ {{ status.progress }}
+
+
+
+
+
+
+ Selections take effect the next time the driving model starts.
+
+
+
+
+
+ Model Randomizer
+ {{ status.randomizer ? 'On' : 'Off' }}
+
+
A different verified model is chosen each start. {{ status.gpuAvailable && activeBigModel ? 'Chestnut Big' : 'Small on-device' }} models are used. {{ (status.blacklistedModels || []).length }} excluded. Favorites only mark your preferred models.
+
Chestnut is not detected. Active Small is used; your Big selection is saved for later.
+
+
+ Active Small · On-device
+
+ {{ m.label || m.value }}
+
+
+
+
+ Active Big · Chestnut
+
+ None — always use Active Small
+ {{ m.label || m.value }}
+
+
+
+
+ Sort
+
+ Release Date
+ Alphabetical
+
+
+
+
+ Model hardware
+
+ Both
+ GPU models only
+ Comma models only
+
+
+
+
+
+ Your Favorite: All
+ Your Favorite: Yes
+ Your Favorite: No
+
+
+ Community: All
+ Community: Yes
+ Community: No
+
+
+
+
+
+
+ No models match these filters. Try Both or clear the favourite filters.
+
+
+
+
+
+
+ {{ m.label || m.value }}
+ Your Favorite
+ Community Favorite
+ Excluded from randomizer
+
+
+ {{ m.value }}
+ Built-in
+ {{ hardwareLabel(m) }}
+ Version {{ m.version }}
+ Released {{ m.released }}
+ Partial Files
+ File size: {{ fileSizeText(m) }}
+
+
+
+
+
{{ m.unavailableReason }}
+
+ {{ m.blacklisted ? 'Include in Randomizer' : 'Exclude from Randomizer' }}
+
+ Selected model
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ runtime.data.health.replaceAll('-', ' ') }} · {{ runtime.data.loadedId ? (runtime.data.variant === 'chestnut' ? 'Chestnut big' : 'Small') : 'No verified load receipt' }}
+
{{ runtime.data.loadedId }} · {{ runtime.data.artifactSha256.slice(0,16) }}…
+
A saved selection is waiting for the next start.
+
Fallback: {{ runtime.data.fallbackReason.replaceAll('-', ' ') }}
+
{{ runtime.error || 'Checking the running model…' }}
+
+
+
+
+ {{ dialog.title }} {{ dialog.message }}
+ Cancel {{ dialog.confirmLabel }}
+
+
+
+ Last known position · waiting for GPS
+
+ +
+ −
+ Recenter
+
+ {{error}} Retry
+
+
+
+
+ `
+}
diff --git a/openpilot/starpilot/galaxy/web/js/navigation-style.js b/openpilot/starpilot/galaxy/web/js/navigation-style.js
new file mode 100644
index 0000000000..a935b3f389
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/navigation-style.js
@@ -0,0 +1,47 @@
+if (typeof document !== "undefined") {
+ const style = document.createElement("style")
+ style.textContent = `
+.gx-navigation--fullscreen {position:fixed;inset:0;z-index:15;padding:0!important;background:#0e0e1a;overflow:hidden}
+.gx-app:has(.gx-navigation--fullscreen) .gx-appbar {background:none;box-shadow:none;pointer-events:none;transform:none}
+.gx-app:has(.gx-navigation--fullscreen) .gx-appbar__pill,.gx-app:has(.gx-navigation--fullscreen) .gx-theme-toggle {display:none}
+.gx-app:has(.gx-navigation--fullscreen) .gx-appbar__back,.gx-app:has(.gx-navigation--fullscreen) .gx-appbar__menu {position:fixed;top:auto;bottom:16px;pointer-events:auto;background:#161630;border:1px solid #343453;border-radius:12px}
+.gx-app:has(.gx-navigation--fullscreen) .gx-appbar__back {left:auto;right:72px}
+.gx-app:has(.gx-navigation--fullscreen) .gx-appbar__menu {right:16px}
+@media(min-width:768px) {.gx-nav-pinned .gx-navigation--fullscreen {left:320px}}
+.gx-navigation--fullscreen>h2 {display:none}
+.gx-navigation--fullscreen>.gx-navigation__tabs {position:absolute;bottom:16px;left:16px;z-index:4;margin:0;gap:8px}
+.gx-navigation--fullscreen .gx-navigation-map {position:absolute;inset:0;margin:0;border-radius:0;background:#0e0e1a}
+.gx-navigation--fullscreen .gx-navigation-map canvas {height:100%;background:#0e0e1a}
+.gx-navigation__panel {position:absolute;top:16px;left:16px;width:30%;max-height:calc(100% - 88px);overflow:auto;z-index:3}
+.gx-navigation__panel .gx-card {background:#0e0e1a;border:0;border-radius:16px;box-shadow:0 4px 12px #0005}
+.gx-navigation__panel .gx-navigation__section {max-width:500px;margin:8px 0;padding:8px}
+.gx-navigation__panel .gx-btn,.gx-navigation__tabs .gx-btn {border:1px solid #343453;border-radius:16px;background:#161630;box-shadow:0 2px 6px #0004;font-size:.85rem;min-height:44px;padding:8px 16px}
+.gx-navigation__search {display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 8px}
+.gx-navigation__search .gx-field {min-width:0;padding:16px;border-radius:16px;border:1px solid #343453;background:#161630;font-size:.85rem;height:49px}
+.gx-navigation__search .gx-btn {padding:8px;flex-shrink:0;min-width:112px;height:49px}
+.gx-navigation__summary-title {margin:0 0 8px;padding:0;border-radius:12px;background:#161630;text-align:center;font-size:1.2rem;line-height:1.2}
+.gx-navigation__summary>div {display:grid;grid-template-columns:32px 96px 1fr;align-items:center;font-size:1rem;font-weight:550;min-height:32px}
+.gx-navigation__summary>div>span:first-child {text-align:center}
+.gx-navigation__route-actions {display:flex;justify-content:center;gap:8px;margin-top:8px}
+.gx-navigation__route-actions .gx-btn {background:#e05577;border:0;border-radius:16px;flex:1;color:#e8e8f0;font-weight:550;letter-spacing:1px}
+.gx-navigation__panel .gx-navigation__instruction {font-size:1rem;margin:8px 0}
+.gx-navigation__panel .gx-note {font-size:.85rem}
+.gx-navigation__places {gap:8px;margin:8px 0}
+.gx-navigation__places>li {padding:16px;border:1px solid #343453!important;background:#161630!important;border-radius:12px!important;gap:8px;font-size:.85rem}
+.gx-navigation__places .gx-note {display:block;font-size:.75rem}
+.gx-navigation__actions {gap:8px}
+.gx-navigation__alternatives {display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
+.gx-navigation-map__last {position:absolute;bottom:48px;right:16px;background:#0e0e1ae8;border-radius:12px;padding:8px 12px;font-size:12px;color:#ddd}
+.gx-navigation--fullscreen .gx-navigation-map__controls {top:16px;right:16px;flex-direction:column}
+.gx-navigation-map__controls .gx-btn {background:#161630;border:1px solid #343453;border-radius:12px;box-shadow:0 2px 6px #0004}
+.gx-navigation-map > p {position:absolute;bottom:72px;right:16px;max-width:320px;background:#0e0e1a;border-radius:12px;padding:12px;font-size:12px}
+.gx-navigation__tabs button {white-space:nowrap}
+@media(max-width:768px) and (orientation:portrait) {
+.gx-navigation__panel {left:8px;top:16px;width:calc(100% - 32px);max-height:55%}
+.gx-navigation--fullscreen .gx-navigation-map__controls {top:auto;bottom:92px}
+.gx-navigation__tabs .gx-btn {font-size:12px;padding:8px}
+.gx-navigation__places>li {flex-direction:row;align-items:center}
+}
+`
+ document.head.appendChild(style)
+}
diff --git a/openpilot/starpilot/galaxy/web/js/navigation.js b/openpilot/starpilot/galaxy/web/js/navigation.js
new file mode 100644
index 0000000000..2aa1c4d45f
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/navigation.js
@@ -0,0 +1,292 @@
+import "./navigation-style.js"
+import { NavigationMap } from "./navigation-map.js"
+import { MapOperationsPanel } from "./map-operations.js"
+
+export function searchUuid() {
+ if (typeof crypto.randomUUID === "function") return crypto.randomUUID()
+ const bytes = crypto.getRandomValues(new Uint8Array(16))
+ bytes[6] = (bytes[6] & 15) | 64
+ bytes[8] = (bytes[8] & 63) | 128
+ const hex = Array.from(bytes, (value) => value.toString(16).padStart(2, "0")).join("")
+ return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`
+}
+
+export function remainingLocationLease(lease, requestStarted, now = performance.now()) {
+ return Math.max(0, Math.min(2500, lease) - Math.max(0, now - requestStarted))
+}
+
+const STATUS = new Set(["disabled", "needsKey", "noDestination", "waitingForLocation", "routing", "guiding", "arrived", "routeUnavailable", "stale"])
+const coordinate = (value) => !!value && Number.isFinite(value.latitude) && Math.abs(value.latitude) <= 90 &&
+ Number.isFinite(value.longitude) && Math.abs(value.longitude) <= 180
+export const validDestination = (value) => coordinate(value) && typeof value.id === "string" && value.id.length > 0 && value.id.length <= 256 &&
+ typeof value.name === "string" && value.name.trim().length > 0 && value.name.length <= 256
+export const validSearchResult = (value) => validDestination(value) || !!value && value.temporary === true &&
+ typeof value.id === "string" && value.id.length > 0 && value.id.length <= 256 &&
+ typeof value.name === "string" && value.name.trim().length > 0 && value.name.length <= 256 &&
+ (value.description === undefined || typeof value.description === "string" && value.description.length <= 512) &&
+ typeof value.searchId === "string" && /^[0-9a-f-]{36}$/.test(value.searchId)
+export function validNavigation(value) {
+ const instruction = value?.instruction
+ if (value?.alternatives !== undefined && (!Array.isArray(value.alternatives) || value.alternatives.length > 3 ||
+ !value.alternatives.every((row,index) => row.index === index && Number.isFinite(row.durationSeconds) && row.durationSeconds >= 0 &&
+ Number.isFinite(row.distanceMeters) && row.distanceMeters >= 0 && Array.isArray(row.geometry) && row.geometry.length <= 512 && row.geometry.every(coordinate)) ||
+ !Number.isInteger(value.selectedRoute) || value.selectedRoute < 0 || value.selectedRoute > 2)) return false
+ return !!value && typeof value.enabled === "boolean" && typeof value.isMetric === "boolean" && typeof value.hasKey === "boolean" && STATUS.has(value.status) &&
+ typeof value.revision === "string" && value.revision.length > 0 && value.revision.length <= 128 &&
+ (value.destination === null || validDestination(value.destination)) && Array.isArray(value.favorites) && value.favorites.length <= 100 &&
+ (value.location == null || coordinate(value.location) && Number.isFinite(value.location.validForMs) && value.location.validForMs >= 0 && value.location.validForMs <= 2500) &&
+ value.favorites.every(validDestination) && Array.isArray(value.route) && value.route.length <= 512 && value.route.every(coordinate) &&
+ (instruction === null || !!instruction && ["text", "maneuverType", "maneuverModifier"].every((key) =>
+ typeof instruction[key] === "string" && instruction[key].length <= 1024) &&
+ ["distanceMeters", "remainingDistanceMeters", "remainingDurationSeconds"].every((key) =>
+ Number.isFinite(instruction[key]) && instruction[key] >= 0))
+}
+
+export function routePath(points) {
+ if (!Array.isArray(points) || points.length < 2 || points.length > 512 || !points.every(coordinate)) return ""
+ const latitude = points.reduce((sum, point) => sum + point.latitude, 0) / points.length
+ const scale = Math.max(0.05, Math.cos(latitude * Math.PI / 180))
+ const firstLongitude = points[0].longitude
+ const projected = points.map((point) => [(((point.longitude - firstLongitude + 540) % 360) - 180) * scale, -point.latitude])
+ const xs = projected.map((point) => point[0]), ys = projected.map((point) => point[1])
+ const left = Math.min(...xs), top = Math.min(...ys)
+ const width = Math.max(...xs) - left, height = Math.max(...ys) - top
+ const zoom = Math.min(360 / Math.max(width, 1e-8), 180 / Math.max(height, 1e-8))
+ return projected.map(([x, y], index) => `${index ? "L" : "M"}${(200 + (x - left - width / 2) * zoom).toFixed(2)},${(110 + (y - top - height / 2) * zoom).toFixed(2)}`).join(" ")
+}
+
+export class NavigationClient {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (timer) => clearTimeout(timer) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.clientId = searchUuid()
+ this.active = false
+ this.generation = 0
+ this.controller = this.timer = null
+ this.data = null
+ this.results = []
+ this.searched = false
+ this.busy = false
+ this.error = ""
+ this.stale = false
+ }
+
+ emit() { this.publish({ data: this.data, results: this.results, searched: this.searched, busy: this.busy, error: this.error, stale: this.stale }) }
+ stop() {
+ if (this.searchId && this.data) {
+ this.fetcher("./api/navigation/action", { method: "POST", credentials: "same-origin", cache: "no-store",
+ headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "cancelSearch",
+ revision: this.data.revision, searchId: this.searchId }) }).catch(() => {})
+ }
+ this.searchId = null
+ this.active = false
+ this.generation++
+ this.controller?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.controller = this.timer = null
+ this.data = null
+ this.results = []
+ this.searched = false
+ this.error = ""
+ this.busy = this.stale = false
+ this.emit()
+ }
+ start() { this.stop(); this.active = true; return this.load() }
+ load() { return this.run("status") }
+ search(query) {
+ this.searchId = searchUuid()
+ return this.run("search", { query: query.trim(), searchId: this.searchId, clientId: this.clientId })
+ }
+ choose(place) {
+ return place.temporary ? this.action("selectPlace", { id: place.id, searchId: place.searchId }) :
+ this.action("select", { destination: place })
+ }
+ action(action, value = {}) {
+ if (!this.data || this.busy || this.stale) return Promise.resolve(null)
+ return this.run("action", { action, revision: this.data.revision, ...value })
+ }
+
+ async run(operation, body = null) {
+ if (!this.active || this.busy) return null
+ this.controller?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.timer = null
+ const requestStarted = performance.now()
+ const generation = ++this.generation
+ const controller = new AbortController()
+ this.controller = controller
+ this.busy = operation !== "status"
+ this.error = ""
+ this.emit()
+ const deadline = this.later(() => controller.abort(), operation === "search" ? 24000 : operation === "action" && body?.action === "selectPlace" ? 12000 : 4000)
+ try {
+ const response = await this.fetcher(`./api/navigation/${operation}`, {
+ credentials: "same-origin", cache: "no-store", signal: controller.signal,
+ ...(body === null ? {} : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }),
+ })
+ if (!this.active || generation !== this.generation) return null
+ const payload = await response.json()
+ if (!this.active || generation !== this.generation) return null
+ if (controller.signal.aborted) throw new Error("Navigation did not respond.")
+ if (response.status === 401 || response.status === 503 && ["access_unavailable", "setup_required"].includes(payload?.code)) {
+ this.stop(); this.unauthorized(); return null
+ }
+ if (!response.ok) throw new Error(payload?.error || "Navigation could not complete this request.")
+ if (operation === "search") {
+ if (!Array.isArray(payload.results) || payload.results.length > 20 || !payload.results.every(validSearchResult))
+ throw new Error("Search results could not be read.")
+ this.results = payload.results
+ this.searched = true
+ } else {
+ if (!validNavigation(payload)) throw new Error("Navigation status could not be read.")
+ if (payload.location) {
+ payload.location.validForMs = remainingLocationLease(payload.location.validForMs, requestStarted)
+ payload.location.expiresAt = performance.now() + payload.location.validForMs
+ }
+ if (JSON.stringify(payload) !== JSON.stringify(this.data)) this.data = payload
+ this.stale = false
+ if (operation === "action" && ["select", "selectPlace", "clear"].includes(body.action)) { this.results = []; this.searched = false }
+ }
+ return payload
+ } catch (error) {
+ if (this.active && generation === this.generation) {
+ this.error = controller.signal.aborted ? "Navigation did not respond. Reconnecting…" : error.message
+ if (operation !== "search") this.stale = true
+ }
+ return null
+ } finally {
+ this.cancelTimer(deadline)
+ if (this.active && generation === this.generation) {
+ this.controller = null
+ this.busy = false
+ this.emit()
+ this.timer = this.later(() => { this.timer = null; this.load() }, this.data?.enabled && this.data?.hasKey ? 1000 : this.data?.status === "guiding" ? 2000 : 5000)
+ }
+ }
+ }
+}
+
+export const NavigationPage = {
+ name: "NavigationPage",
+ components: { MapOperationsPanel, NavigationMap },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ data: null, results: [], busy: false, error: "", stale: false, tab: "route", favoritesOpen: false, query: "", token: "", searched: false }),
+ computed: {
+ available() { return this.mode === "local" && !!this.data && !this.stale && !this.busy },
+ path() { return routePath(this.data?.route) },
+ summary() {
+ const instruction = this.data?.instruction, route = this.data?.alternatives?.[this.data?.selectedRoute || 0]
+ return instruction ? {distance:instruction.remainingDistanceMeters,duration:instruction.remainingDurationSeconds} :
+ route ? {distance:route.distanceMeters,duration:route.durationSeconds} : null
+ },
+ statusLabel() {
+ return ({ disabled: "Navigation is off", needsKey: "Add your Mapbox key to get started", noDestination: "Where would you like to go?",
+ waitingForLocation: "Waiting for GPS", routing: "Finding your route…", guiding: "Route guidance", arrived: "You have arrived",
+ routeUnavailable: "A route could not be found", stale: "Waiting for navigation" })[this.data?.status] || "Connecting to navigation…"
+ },
+ },
+ created() { this.client = new NavigationClient({ publish: (state) => Object.assign(this.$data, state), unauthorized: this.unauthorized }) },
+ mounted() {
+ if (this.mode !== "local") return
+ this.visibilityHandler = () => document.visibilityState === "hidden" ? this.client.stop() : this.client.start()
+ document.addEventListener("visibilitychange", this.visibilityHandler)
+ if (document.visibilityState !== "hidden") this.client.start()
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibilityHandler); this.client.stop(); this.token = "" },
+ methods: {
+ async search() { await this.client.search(this.query) },
+ async saveKey() { const token = this.token.trim(); this.token = ""; await this.client.action("configure", { patch: { token } }) },
+ distance(value) {
+ const metric = this.data?.isMetric !== false
+ return metric ? value < 1000 ? `${Math.round(value)} m` : `${(value / 1000).toFixed(1)} km` :
+ value < 160.9344 ? `${Math.round(value / 0.3048 / 10) * 10} ft` : `${(value / 1609.344).toFixed(1)} mi`
+ },
+ duration(value) { const minutes = Math.max(1, Math.round(value / 60)); return minutes >= 60 ? `${Math.floor(minutes / 60)} hr ${minutes % 60} min` : `${minutes} min` },
+ isFavorite(place) { return this.data?.favorites.some((favorite) => favorite.id === place.id) },
+ },
+ template: `
+
+
Navigation
+
+ {{ item.label }}
+
+
+
+ Connect to your comma to set up navigation and choose a destination.
+ {{ error }}
+ Showing the last received route. Reconnecting before accepting changes.
+
+
+
+ Mapbox
+ One public Mapbox access token (starting with pk.) handles maps, address search, place search and routes. A separate secret token is not needed.
+ Save your token while parked. Galaxy keeps it on your comma and never displays it after saving. Saving address favorites requires permanent geocoding: a payment method on file or an enterprise agreement with Mapbox. Place-search results are available for the current route only. Map tiles use your Mapbox quota; URL-restricted keys may reject these requests.
+ Get a Mapbox access token
+ A Mapbox key is saved.
+
+
+
+
+
+
+
+ {{ data.destination.name }}
+
+
🛣️ Distance: {{distance(summary.distance)}}
+
⌛ Duration: {{duration(summary.duration)}}
+
🕗 ETA: {{new Date(Date.now()+summary.duration*1000).toLocaleTimeString([], {hour:'numeric',minute:'2-digit'})}}
+
{{statusLabel}}
+
+ {{ data.instruction.text }}
+ {{ distance(data.instruction.distanceMeters) }} · {{ duration(data.instruction.remainingDurationSeconds) }} remaining · {{ distance(data.instruction.remainingDistanceMeters) }}
+
+
+ Route {{choice.index+1}} · {{duration(choice.durationSeconds)}} · {{distance(choice.distanceMeters)}}
+
+
+ Cancel Navigation
+ {{isFavorite(data.destination) ? '♥ Unfavorite' : '♥ Favorite'}}
+
+
+
Navigation is off Enable it in Setup to use destinations and directions.
Open Setup
+
Connect Mapbox Add your key to search for places and plan a route.
Open Setup
+
+ Working…
+ No places found. Try a nearby town or a more specific address.
+
+
+ {{ place.name }}{{ place.description }} For this route only; cannot be saved.
+ Remove
+ Go
+
+
+
+
+
+
+ 65
+ mph
+
+
+
+ {{ label }}
+ 65
+
+
+
+ 65
+ MAX
+
+
+ SPEED
+ LIMIT
+ 65
+
+
+ NEW LIMIT 55
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ scene === 'experimental' ? 'E' : 'C' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ widget.label }}
+
+ `,
+}
+
+export const OnroadLayoutPage = {
+ components: { LayoutWidgetPreview },
+ props: { projection: { type: Boolean, default: false }, mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ emits: ["close", "target"],
+ setup(props) {
+ const state = reactive({ status: "idle", data: null, draft: null, needsReload: false, error: "", notice: "",
+ profile: "large", scene: "engaged", selected: null, drag: null, discard: null, colorError: "", placementError: "",
+ showFavoriteZones: false, devicePreviewOpen: false, preview: { status: "idle", error: "", url: null },
+ history: { undo: [], redo: [], group: null } })
+ let deferred = null
+ const apply = (update) => {
+ if (state.drag) { deferred = { ...deferred, ...update }; return }
+ if (deferred) {
+ update = { ...deferred, ...update }
+ deferred = null
+ if (state.draft && state.data && JSON.stringify(state.draft) !== JSON.stringify(state.data.document)) {
+ update = { ...update }
+ delete update.draft
+ if (update.data && update.data.revision !== state.data.revision) {
+ update.needsReload = true
+ update.error = "Saved values changed while editing. Your edits are kept here. Reload before saving again."
+ }
+ }
+ }
+
+ if (update.data) {
+ if (!state.data && update.data.activeProfile) state.profile = update.data.activeProfile
+ if (!update.data.metadata.profiles[state.profile]) state.profile = Object.keys(update.data.metadata.profiles)[0]
+ if (!Object.hasOwn(update.data.metadata.profiles[state.profile].widgets, state.selected))
+ state.selected = Object.keys(update.data.metadata.profiles[state.profile].widgets)[0] || null
+ state.colorError = ""
+ state.placementError = ""
+ }
+ const draftChanged = Object.hasOwn(update, "draft") && JSON.stringify(state.draft) !== JSON.stringify(update.draft)
+ for (const [key, value] of Object.entries(update)) {
+ if (JSON.stringify(state[key]) !== JSON.stringify(value)) state[key] = value
+ }
+ if (draftChanged || ["Colors and both layouts saved.", "Android Auto layout saved."].includes(update.notice)) state.history = { undo: [], redo: [], group: null }
+ }
+ const feed = new OnroadLayoutFeed({ projection: props.projection, unauthorized: props.unauthorized, publish: apply })
+ watch(() => !!state.drag, (dragging) => { if (!dragging && deferred) apply({}) }, { flush: "sync" })
+ const previewFeed = new LayoutPreviewFeed({ unauthorized: props.unauthorized,
+ publish: (update) => Object.assign(state.preview, update) })
+ watch(() => [state.draft && JSON.stringify(state.draft), state.profile, state.scene, !!state.drag, state.data?.revision],
+ () => {
+ if (props.projection && state.draft && props.mode === 'local' && !state.devicePreviewOpen) {
+ state.devicePreviewOpen = true
+ previewFeed.start()
+ }
+ if (state.devicePreviewOpen && props.mode === "local") {
+ const document = props.projection ? projectionPayload({document: state.draft}, state.data.metadata).document : state.draft
+ previewFeed.update(document, props.projection ? 'projection' : state.profile, state.scene, !!state.drag)
+ }
+ }, { flush: "sync" })
+ watch(() => props.mode, (mode) => {
+ if (mode !== "local") { state.devicePreviewOpen = false; previewFeed.stop() }
+ })
+ return { state, feed, previewFeed, scenes: PREVIEW_SCENES }
+ },
+ computed: {
+ busy() { return ["loading", "saving"].includes(this.state.status) },
+ editable() { return !!this.state.data?.editable && !this.busy && !this.state.needsReload && !this.state.discard },
+ dirty() { return !!this.state.draft && JSON.stringify(this.state.draft) !== JSON.stringify(this.state.data.document) },
+ stockChanged() { return !!this.state.draft && JSON.stringify(this.state.draft) !== JSON.stringify(this.state.data.defaults) },
+ canUndo() { return this.state.history.undo.length > 0 },
+ canRedo() { return this.state.history.redo.length > 0 },
+ profile() { return this.state.data?.metadata.profiles[this.state.profile] },
+ layout() { return this.state.draft?.layouts[this.state.profile] },
+ widgets() { return Object.entries(this.profile?.widgets || {}).map(([id, widget]) => ({ id, ...widget })) },
+ activeWidgets() { return this.widgets.filter(({ id }) => this.layout[id].enabled) },
+ renderWidgets() { return this.activeWidgets.map((item) => {
+ const below = item.visualInsetTop && this.layout[item.id].y < item.visualInsetTop
+ const widget = { ...item, visualInsetTop: below ? 0 : item.visualInsetTop || 0,
+ visualInsetBottom: below ? item.visualInsetTop : 0, visualHeaderY: below ? item.height + 8 : -(item.visualInsetTop || 0) }
+ return widget.resizable ?
+ { ...widget, width: this.layout[widget.id].size, height: this.layout[widget.id].size } : widget })
+ .sort((a, b) => (a.id === this.state.selected ? 2 : a.layer === "underlay" ? -1 : 0) -
+ (b.id === this.state.selected ? 2 : b.layer === "underlay" ? -1 : 0)) },
+ inactiveWidgets() { return this.widgets.filter(({ id }) => !this.layout[id].enabled || (this.state.drag?.fromTray && this.state.drag.id === id)) },
+ availableProfiles() { return this.state.data?.supportedProfiles || (this.state.data?.activeProfile ? [this.state.data.activeProfile] : []) },
+ selectedWidget() { return this.profile?.widgets[this.state.selected] },
+ selectedPosition() { return this.layout?.[this.state.selected] },
+ selectedColors() { return this.selectedWidget ? this.widgetColors(this.state.selected) : {} },
+ colorFields() { return (this.state.data?.metadata.paletteFields || []).filter((field) =>
+ Object.hasOwn(this.selectedWidget?.colors || {}, field.id)) },
+ roadStyle() { return this.state.draft?.roadColors[this.state.profile] || {} },
+ roadMode() { return this.roadStyle.pathMode || 'default' },
+ roadColors() { return { ...Object.fromEntries((this.state.data?.metadata.roadColorFields || []).map(field => [field.id, field.default])), ...this.roadStyle } },
+ roadGradient() {
+ if (this.roadMode === 'rainbow') return Array.from({ length: 12 }, (_, i) => ({ offset: i / 11,
+ color: 'hsl(' + i / 11 * 120 + ',100%,50%)', alpha: .5 - .4 * i / 11 }))
+ if (this.roadMode === 'color') return [1, .55, .10].map((factor, i) => ({ offset: 1 - i / 2,
+ color: this.roadColors.path.slice(0, 7), alpha: Math.floor(this.alpha(this.roadColors.path) * factor) / 255 }))
+ return [{ offset: 0, color: '#72ff5c', alpha: 0 }, { offset: .5, color: '#72ff5c', alpha: 89 / 255 },
+ { offset: 1, color: '#0df87a', alpha: 102 / 255 }]
+ },
+ limits() { return this.selectedWidget ? placementLimits(this.profile, this.state.selected, this.layout) : null },
+ },
+ mounted() {
+ if (this.mode === "local") this.feed.start()
+ this._beforeUnload = (event) => { if (this.dirty || this.state.status === "saving") { event.preventDefault(); event.returnValue = "" } }
+ window.addEventListener("beforeunload", this._beforeUnload)
+ },
+ beforeUnmount() { this.cancelDrag(); this.feed.stop(); this.previewFeed.stop(); window.removeEventListener("beforeunload", this._beforeUnload) },
+ methods: {
+ finishColorEdit() { this.state.history.group = null },
+ recordChange(before, group = null) {
+ if (JSON.stringify(before) === JSON.stringify(this.state.draft)) return
+ const history = this.state.history
+ if (!group || history.group !== group) {
+ history.undo.push(before)
+ if (history.undo.length > 50) history.undo.shift()
+ }
+ history.redo = []
+ history.group = group
+ },
+ undo() {
+ if (!this.editable || this.state.drag || !this.canUndo) return
+ this.finishColorEdit()
+ const history = this.state.history
+ history.redo.push(clone(this.state.draft))
+ this.state.draft = history.undo.pop()
+ this.state.colorError = this.state.placementError = this.state.notice = ""
+ },
+ redo() {
+ if (!this.editable || this.state.drag || !this.canRedo) return
+ this.finishColorEdit()
+ const history = this.state.history
+ history.undo.push(clone(this.state.draft))
+ this.state.draft = history.redo.pop()
+ this.state.colorError = this.state.placementError = this.state.notice = ""
+ },
+ resetToStock() {
+ if (!this.editable || this.state.drag || !this.stockChanged) return
+ const before = clone(this.state.draft)
+ this.state.draft = clone(this.state.data.defaults)
+ this.recordChange(before)
+ this.state.colorError = this.state.placementError = ""
+ this.state.notice = "Stock StarPilot colors and both layouts are restored in your draft. Save to apply them."
+ },
+ showDevicePreview() {
+ if (this.mode !== "local" || !this.state.data || !this.state.draft || this.state.drag || this.state.devicePreviewOpen) return
+ this.state.devicePreviewOpen = true
+ this.previewFeed.start()
+ this.previewFeed.update(this.projection ? projectionPayload({document: this.state.draft}, this.state.data.metadata).document : this.state.draft, this.projection ? 'projection' : this.state.profile, this.state.scene)
+ },
+ hideDevicePreview() {
+ this.state.devicePreviewOpen = false
+ this.previewFeed.stop()
+ Object.assign(this.state.preview, { status: "idle", error: "", url: null })
+ },
+ selectProfile(profile) {
+ if (!this.availableProfiles.includes(profile) || this.state.drag) return
+ this.finishColorEdit()
+ this.state.profile = profile
+ this.state.selected = Object.keys(this.profile.widgets)[0] || null
+ this.state.placementError = ""
+ },
+ changePosition(id, x, y) {
+ if (!this.editable) return
+ const position = clampPlacement(this.profile, id, x, y, this.layout)
+ if (position) {
+ const before = this.state.drag ? null : clone(this.state.draft)
+ Object.assign(this.layout[id], position)
+ if (before) this.recordChange(before)
+ this.state.placementError = ""
+ } else this.state.placementError = "Keep widgets within the screen and clear of Speed limit actions. The last valid position is kept."
+ this.state.notice = ""
+ },
+ add(id) {
+ if (!this.editable || this.state.drag || !Object.hasOwn(this.profile.widgets, id)) return
+ const before = clone(this.state.draft)
+ this.layout[id].enabled = true
+ this.recordChange(before)
+ this.state.selected = id
+ this.state.notice = ""
+ },
+ remove(id = this.state.selected) {
+ if (!this.editable || this.state.drag || !Object.hasOwn(this.profile.widgets, id)) return
+ const before = clone(this.state.draft)
+ this.layout[id].enabled = false
+ this.recordChange(before)
+ this.state.notice = ""
+ },
+ positionInput(axis, event) {
+ const number = event.target.value.trim() === "" ? NaN : Number(event.target.value)
+ if (Number.isFinite(number)) this.changePosition(this.state.selected,
+ axis === "x" ? number : this.selectedPosition.x, axis === "y" ? number : this.selectedPosition.y)
+ event.target.value = this.selectedPosition[axis]
+ },
+ resizeSelected(event) {
+ if (!this.editable || this.state.drag || !this.selectedWidget?.resizable) return
+ const size = Number(event.target.value), range = this.selectedWidget.resizable
+ if (!Number.isInteger(size) || size < range.min || size > range.max) {
+ event.target.value = this.selectedPosition.size
+ return
+ }
+ const before = clone(this.state.draft), position = this.selectedPosition
+ position.size = size
+ const next = clampPlacement(this.profile, this.state.selected, position.x, position.y, this.layout)
+ if (next) {
+ Object.assign(position, next)
+ this.recordChange(before)
+ this.state.placementError = ""
+ } else {
+ Object.assign(position, before.layouts[this.state.profile][this.state.selected])
+ this.state.placementError = "That size would cover Speed limit actions. The last valid size is kept."
+ }
+ event.target.value = position.size
+ },
+ onKey(id, event) {
+ if (!this.editable) return
+ const movement = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key]
+ if (movement) {
+ event.preventDefault()
+ const step = event.shiftKey ? 10 : 1, position = this.layout[id]
+ this.changePosition(id, position.x + movement[0] * step, position.y + movement[1] * step)
+ } else if (["Delete", "Backspace"].includes(event.key)) { event.preventDefault(); this.remove(id) }
+ else if (["Enter", " "].includes(event.key)) { event.preventDefault(); this.state.selected = id }
+ },
+ startDrag(id, event, fromTray = false) {
+ if (!this.editable || event.button > 0 || this.state.drag || !Object.hasOwn(this.profile.widgets, id)) return
+ const point = previewPoint(event, this.$refs.preview.getBoundingClientRect(), this.profile)
+ if (!point) return
+ const position = this.layout[id], widget = this.profile.widgets[id]
+ const width = widget.resizable ? position.size : widget.width
+ const height = widget.resizable ? position.size : widget.height
+ this.state.selected = id
+ this.finishColorEdit()
+ this.state.drag = { id, pointerId: event.pointerId, fromTray, before: { ...position }, historyBefore: clone(this.state.draft), inside: !fromTray,
+ offsetX: fromTray ? width / 2 : point.x - position.x,
+ offsetY: fromTray ? height / 2 : point.y - position.y }
+ this._dragTarget = this.$refs.preview
+ this._dragTarget.setPointerCapture?.(event.pointerId)
+ event.preventDefault()
+ },
+ moveDrag(event) {
+ const drag = this.state.drag
+ if (!drag || drag.pointerId !== event.pointerId) return
+ const point = previewPoint(event, this.$refs.preview.getBoundingClientRect(), this.profile)
+ if (!point) return
+ drag.inside = point.x >= 0 && point.y >= 0 && point.x <= this.profile.width && point.y <= this.profile.height
+ if (!drag.fromTray || drag.inside) {
+ const x = point.x - drag.offsetX, y = point.y - drag.offsetY
+ if (drag.fromTray) drag.inside = clampPlacement(this.profile, drag.id, x, y, this.layout) !== null
+ this.changePosition(drag.id, x, y)
+ }
+ if (drag.fromTray) this.layout[drag.id].enabled = drag.inside
+ },
+ endDrag(event) {
+ const drag = this.state.drag
+ if (!drag || drag.pointerId !== event.pointerId) return
+ this.moveDrag(event)
+ if (drag.fromTray && !drag.inside) Object.assign(this.layout[drag.id], drag.before)
+ const before = drag.historyBefore
+ this.releaseDrag()
+ this.recordChange(before)
+ },
+ releaseDrag() {
+ const id = this.state.drag?.pointerId
+ this.state.drag = null
+ if (this._dragTarget?.hasPointerCapture?.(id)) this._dragTarget.releasePointerCapture(id)
+ this._dragTarget = null
+ },
+ cancelDrag() {
+ const drag = this.state.drag
+ if (drag) Object.assign(this.layout[drag.id], drag.before)
+ this.releaseDrag()
+ },
+ resetLayout() {
+ if (!this.editable || this.state.drag) return
+ const before = clone(this.state.draft)
+ this.state.draft.layouts[this.state.profile] = clone(this.state.data.defaults.layouts[this.state.profile])
+ this.recordChange(before)
+ this.state.placementError = ""
+ this.state.notice = "This layout is reset in your draft. Save to apply it."
+ },
+ resetColors() {
+ if (!this.editable || this.state.drag || !this.colorFields.length) return
+ const before = clone(this.state.draft)
+ const profile = this.state.profile, id = this.state.selected
+ delete this.state.draft.widgetColors[profile][id]
+ const inherited = this.selectedColors
+ const stock = widgetPalette(this.state.data.defaults, this.state.data.metadata, profile, id)
+ const overrides = Object.fromEntries(Object.entries(stock).filter(([key, value]) => value !== inherited[key]))
+ if (Object.keys(overrides).length) this.state.draft.widgetColors[profile][id] = overrides
+ this.recordChange(before)
+ this.state.colorError = ""
+ this.state.notice = "This widget’s colors are reset in your draft. Save to apply them."
+ },
+ roadPoints(points) {
+ const r = this.profile.bounds
+ return points.map(([x, y]) => (r.x + x*r.width) + ',' + (r.y + y*r.height)).join(' ')
+ },
+ roadLabel(id) {
+ if (id === 'pathEdge') return this.state.profile === 'large' ? 'Path border' : 'Closest lane markings'
+ if (id === 'laneLines') return this.state.profile === 'large' ? 'Lane lines' : 'Outer lane lines'
+ return 'Path'
+ },
+ setRoadMode(mode) {
+ if (!this.editable || this.state.drag || !PATH_MODES.includes(mode)) return
+ const before = clone(this.state.draft)
+ this.state.draft.roadColors[this.state.profile].pathMode = mode
+ this.recordChange(before)
+ },
+ roadColor(id, value, group = null) {
+ if (!this.editable || this.state.drag || !ROAD_COLORS.includes(id)) return
+ if (!HEX.test(value)) { this.state.colorError = "Use eight hex digits, for example #30FF9CFF."; return }
+ const before = clone(this.state.draft)
+ this.state.draft.roadColors[this.state.profile][id] = value.toUpperCase()
+ if (id === 'path') this.state.draft.roadColors[this.state.profile].pathMode = 'color'
+ this.recordChange(before, group && this.state.profile + ':road:' + group)
+ this.state.colorError = this.state.notice = ''
+ },
+ roadRgb(id, event) {
+ const alpha = this.roadColors[id].slice(7)
+ this.roadColor(id, event.target.value + (alpha === '00' ? 'FF' : alpha), 'rgb:' + id)
+ },
+ roadAlpha(id, event) {
+ const value = Number(event.target.value)
+ if (Number.isInteger(value) && value >= 0 && value <= 255)
+ this.roadColor(id, this.roadColors[id].slice(0, 7) + value.toString(16).padStart(2, '0'), 'alpha:' + id)
+ },
+ resetRoad() {
+ if (!this.editable || this.state.drag) return
+ const before = clone(this.state.draft)
+ this.state.draft.roadColors[this.state.profile] = {}
+ this.recordChange(before)
+ this.state.colorError = ''
+ },
+ widgetColors(id) { return widgetPalette(this.state.draft, this.state.data.metadata, this.state.profile, id) },
+ color(id, value, group = null) {
+ if (!this.editable || this.state.drag || !Object.hasOwn(this.selectedWidget?.colors || {}, id)) return
+ if (!HEX.test(value)) { this.state.colorError = "Use eight hex digits, for example #000000A6. The last two digits set opacity."; return }
+ const before = clone(this.state.draft)
+ const profile = this.state.profile, widget = this.state.selected
+ this.state.draft.widgetColors[profile][widget] ||= {}
+ this.state.draft.widgetColors[profile][widget][id] = value.toUpperCase()
+ this.recordChange(before, group && profile + ':' + widget + ':' + group)
+ this.state.colorError = this.state.notice = ""
+ },
+ colorText(id, event) { this.color(id, event.target.value.trim()); this.finishColorEdit(); event.target.value = this.selectedColors[id] },
+ colorRgb(id, event) {
+ const alpha = this.selectedColors[id]?.slice(7)
+ if (alpha) this.color(id, event.target.value + (alpha === '00' ? (id === 'cardFill' ? 'A6' : 'FF') : alpha), "rgb:" + id)
+ },
+ colorAlpha(id, event) {
+ const value = Number(event.target.value)
+ if (Number.isInteger(value) && value >= 0 && value <= 255)
+ this.color(id, this.selectedColors[id].slice(0, 7) + value.toString(16).padStart(2, "0"), "alpha:" + id)
+ },
+ alpha(color) { return parseInt(color.slice(7), 16) },
+ requestLeave(action) {
+ if (this.busy || this.state.drag) return
+ if (this.dirty) this.state.discard = action
+ else this.leave(action)
+ },
+ leave(action) {
+ this.state.discard = null
+ if (action === "back") { this.hideDevicePreview(); this.$emit("close") }
+ else if (["projection", "device"].includes(action)) { this.hideDevicePreview(); this.$emit("target", action) }
+ else this.feed.load()
+ },
+ save() { if (this.editable && this.dirty && !this.state.drag) return this.feed.save(this.state.draft) },
+ },
+ template: `
+
+
+
+ Comma
+ Android Auto
+
+ Last usable screen: {{ state.data.screen.width - state.data.screen.margin_width }} × {{ state.data.screen.height - state.data.screen.margin_height }} pixels. {{ state.data.reason || '' }}
+ Connect to local Galaxy to edit this device’s colors and layouts.
+
+
+ {{ state.status === 'saving' ? 'Saving…' : state.status === 'loading' ? 'Loading…' : !state.data ? 'No saved layout loaded' : dirty ? 'Unsaved changes' : state.notice || 'Saved on this device' }}
+ Reload saved
+ Undo
+ Redo
+ Reset to stock StarPilot
+ Save changes
+
+ {{ state.error }}
+
+
{{ ['back', 'device', 'projection'].includes(state.discard) ? 'Leave without saving your changes?' : 'Discard your edits and reload the saved colors and layouts?' }}
+
Keep editing
+ {{ ['back', 'device', 'projection'].includes(state.discard) ? 'Discard and leave' : 'Discard and reload' }}
+
+ Park the vehicle and reload to edit. If it stays unavailable, reload saved settings.
+ {{ projection ? 'Default Android Auto positions are shown. Save to keep your separate layout.' : 'The saved customization is invalid. Default colors and positions are shown; save your edits to replace it.' }}
+
+ {{ tab.label }} · Active UI
+
+
+
+ Layout preview {{ profile.width }} × {{ profile.height }}
+ Drag widgets to place them. Readings are samples.
+
+
+
+
+ SAMPLE DATA
+
+ {{ sample.label }}
+ {{ sample.value }}
+
+
+
+
+ {{ zone.label }}
+
+
+
+
+
+ {{ state.devicePreviewOpen ? 'Hide Device preview' : 'Show Device preview' }}
+
+ {{ projection ? 'Android Auto renderer preview' : 'Device preview' }} Preview scene
+
+ {{ scene.label }}
+
+
+
+
{{ state.preview.status === 'editing' ? 'Finish moving the widget to refresh Device preview.' : state.preview.status === 'updating' ? 'Updating Device preview…' : state.preview.status === 'unavailable' ? state.preview.error : 'Device preview is waiting.' }}
+
Retry Device preview
+
+ The steering wheel can be resized in each layout. Existing display preferences and driving state still control when widgets appear.
+ Small speed-limit signs can overlap confirmation actions. Live confirmations hide an overlapping sign until the decision ends. Select either widget in the list to edit it.
+ Favorite tap areas apply to enabled slots. Speed-limit controls and the steering wheel take priority when the drawer is closed.
+ {{ state.placementError }}
+
+
+ Widgets
+ {{ widget.label }}
+
+
{{ selectedWidget.label }} {{ selectedWidget.resizable ? selectedPosition.size : selectedWidget.width }} × {{ selectedWidget.resizable ? selectedPosition.size : selectedWidget.height + (selectedWidget.visualInsetTop || 0) }} pixels
+
Size
+
+
The default position follows the driver’s side. A moved position stays where you place it.
+
{{ selectedWidget.note }}
+
X
+ Y
+
Use arrow keys on a preview widget to move 1 pixel, or Shift + arrow for 10.
+
+
{{ selectedWidget.label }} colors Reset widget colors
+ Only this widget in the {{ state.profile === 'large' ? 'Big' : 'Small' }} layout changes. Status indicators keep their meaning. Picking a color makes a transparent fill or border visible; use Opacity to fade it.
+
+ {{ state.colorError }}
+
+
This widget uses its original status colors.
+
Remove from layout
+
Inactive Widgets Drag onto the preview, or select Add.
+
+ Add
+
+
All available widgets are on this layout.
+
Reset this layout
+
+
Path & Lane Colors Reset road colors
+ Path style
+ Follow Appearance Settings Acceleration colors
+ Custom color Rainbow Road
+
+ Choose how the path is colored. Follow Appearance Settings uses your existing Rainbow Road preference. Acceleration colors change with acceleration and braking. Custom color stays one color. Rainbow Road shows a moving rainbow.
+ {{ state.profile === 'large' ? 'Path border colors the strips along the path. Lane lines keep their own color.' : 'Lane marking colors apply to the lines beside your lane and the outer lines separately.' }} Blue lane-centering and orange steering-effort indicators stay blue and orange.
+
+ These colors apply to this layout only. The preview uses a sample road. Follow Appearance Settings previews acceleration colors; your saved Rainbow Road preference still applies while driving.
+ {{ state.colorError }}
+
+
+
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/pip-geometry.js b/openpilot/starpilot/galaxy/web/js/pip-geometry.js
new file mode 100644
index 0000000000..f1da4fadd6
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/pip-geometry.js
@@ -0,0 +1,30 @@
+// Saved centers are pixels in the unmirrored cabin frame. Invert changes only
+// the displayed crop pixels; vehicle-side selection always uses source sides.
+export const FORMATS = [[1928, 1208], [1344, 760]]
+
+export function displayPoint(center, width, invert) {
+ return center === null ? null : [invert ? width - center[0] : center[0], center[1]]
+}
+
+export function sourcePoint(clientX, clientY, rect, width, height, invert) {
+ if (!(rect?.width > 0 && rect.height > 0) || typeof invert !== "boolean" ||
+ !FORMATS.some(([w, h]) => w === width && h === height)) return null
+ const x = (clientX - rect.left) / rect.width
+ const y = (clientY - rect.top) / rect.height
+ if (!Number.isFinite(x) || !Number.isFinite(y) || x < 0 || x > 1 || y < 0 || y > 1) return null
+ return [Math.round((invert ? 1 - x : x) * width), Math.round(y * height)]
+}
+
+const centerValid = (center, width, height, size) => center === null ||
+ (Array.isArray(center) && center.length === 2 && center.every(Number.isInteger) &&
+ center[0] - size / 2 >= 0 && center[0] + size / 2 <= width &&
+ center[1] - size / 2 >= 0 && center[1] + size / 2 <= height)
+
+export function maskDraft(width, height, cropSize, centerLeft, centerRight) {
+ if (!FORMATS.some(([w, h]) => w === width && h === height) ||
+ !Number.isInteger(cropSize) || cropSize < 20 || cropSize > Math.min(width, height) ||
+ (centerLeft === null && centerRight === null) ||
+ !centerValid(centerLeft, width, height, cropSize) ||
+ !centerValid(centerRight, width, height, cropSize)) return null
+ return { width, height, crop_size: cropSize, center_left: centerLeft, center_right: centerRight }
+}
diff --git a/openpilot/starpilot/galaxy/web/js/pip.js b/openpilot/starpilot/galaxy/web/js/pip.js
new file mode 100644
index 0000000000..8da398574c
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/pip.js
@@ -0,0 +1,243 @@
+import { reactive } from "../vendor/vue/vue.esm-browser.js"
+import { CameraSnapshotFeed } from "./cameras.js"
+import { SettingsFeed } from "./settings.js"
+import { GalaxySettingRow } from "./galaxy-setting-row.js"
+import { displayPoint, FORMATS, maskDraft, sourcePoint } from "./pip-geometry.js"
+
+const SIDES = [
+ { key: "centerRight", label: "Vehicle left / camera right", color: "#5ee5ee" },
+ { key: "centerLeft", label: "Vehicle right / camera left", color: "#ffb865" },
+]
+
+export const PipPage = {
+ name: "PipPage",
+ components: { GalaxySettingRow },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true },
+ go: { type: Function, required: true } },
+ setup(props) {
+ const state = reactive({ status: "idle", data: null, pending: null, error: "", width: 1928, height: 1208,
+ cropSize: 580, centerLeft: null, centerRight: null, invert: null, activeSide: "centerRight",
+ localNote: "", imageName: "", reviewing: false })
+ let lastView = null
+ const feed = new SettingsFeed({ unauthorized: props.unauthorized, publish: (update) => {
+ Object.assign(state, update)
+ if (update.status === "ready" && update.data?.view && update.data.view !== lastView) {
+ lastView = update.data.view
+ const editor = update.data.editor
+ if (editor) {
+ state.width = editor.width
+ state.height = editor.height
+ state.cropSize = editor.cropSize
+ state.centerLeft = editor.centerLeft === null ? null : [...editor.centerLeft]
+ state.centerRight = editor.centerRight === null ? null : [...editor.centerRight]
+ state.invert = editor.invert
+ state.localNote = ""
+ } else {
+ state.invert = null
+ state.localNote = "Restore the invalid saved crop or mirror choice before editing."
+ }
+ }
+ } })
+ return { state, feed, FORMATS, SIDES }
+ },
+ mounted() {
+ this._image = null
+ this._imageGeneration = 0
+ if (this.mode === "local") this.feed.start("pip")
+ this._liveStopped = false
+ this.snapshots = new CameraSnapshotFeed({ unauthorized: this.unauthorized, publish: (update) => {
+ if (update.error) { this.state.localNote = update.error; this._image = null; this.state.imageName = "" }
+ if (!update.image) return
+ const generation = ++this._imageGeneration
+ const image = new Image()
+ image.onload = () => {
+ if (this._liveStopped || generation !== this._imageGeneration) return
+ this._image = image
+ this.state.imageName = "Live cabin camera"
+ this.state.localNote = ""
+ this.redraw()
+ }
+ image.onerror = () => { this.state.localNote = "Camera frame could not be displayed."; this._image = null }
+ image.src = update.image
+ } })
+ const refresh = async () => {
+ if (this._liveStopped) return
+ if (this.mode === "local" && !document.hidden) await this.snapshots.capture("cabin")
+ if (!this._liveStopped) this._liveTimer = setTimeout(refresh, 1500)
+ }
+ this.visibility = () => { if (document.hidden) { this.snapshots.stop(); this._image = null; this.state.imageName = "" } }
+ document.addEventListener("visibilitychange", this.visibility)
+ refresh()
+ this.$nextTick(() => this.redraw())
+ },
+ updated() {
+ this.$nextTick(() => this.redraw())
+ },
+ beforeUnmount() {
+ this._liveStopped = true
+ clearTimeout(this._liveTimer)
+ document.removeEventListener("visibilitychange", this.visibility)
+ this.snapshots?.stop()
+ this.feed.stop()
+ this.dropImage()
+ },
+ computed: {
+ controls() { return (this.state.data?.rows || []).map((row, index) => ({ row, index }))
+ .filter(({ row }) => row.label !== "Visual camera crop editor" && !row.key?.startsWith("pip:mask:")) },
+ canEdit() { return !!this.state.imageName && this.mode === "local" && !!this.state.data?.parked && this.state.data?.editorRow >= 0 &&
+ !!this.state.data.rows[this.state.data.editorRow]?.available && this.state.status === "ready" &&
+ !this.state.pending && !this.state.reviewing && typeof this.state.invert === "boolean" &&
+ FORMATS.some(([w, h]) => w === this.state.width && h === this.state.height) },
+ },
+ methods: {
+ dropImage() {
+ this._imageGeneration++
+ if (this._image) this._image.src = ""
+ this._image = null
+ this.state.imageName = ""
+ },
+ position(axis, event) {
+ if (!this.canEdit) return
+ const center = [...(this.state[this.state.activeSide] || [this.state.width / 2, this.state.height / 2])]
+ center[axis] = Number(event.target.value)
+ const left = this.state.activeSide === "centerLeft" ? center : this.state.centerLeft
+ const right = this.state.activeSide === "centerRight" ? center : this.state.centerRight
+ if (!maskDraft(this.state.width, this.state.height, this.state.cropSize, left, right)) return
+ this.state[this.state.activeSide] = center
+ this.redraw()
+ },
+ choose(side) { if (this.canEdit) this.state.activeSide = side },
+ place(event) {
+ if (!this.canEdit) return
+ const canvas = this.$refs.canvas
+ const point = sourcePoint(event.clientX, event.clientY, canvas?.getBoundingClientRect(),
+ this.state.width, this.state.height, this.state.invert)
+ if (!point) return
+ const nextLeft = this.state.activeSide === "centerLeft" ? point : this.state.centerLeft
+ const nextRight = this.state.activeSide === "centerRight" ? point : this.state.centerRight
+ if (!maskDraft(this.state.width, this.state.height, this.state.cropSize, nextLeft, nextRight)) {
+ this.state.localNote = "Place the center far enough from the frame edge for the whole crop."
+ return
+ }
+ this.state.centerLeft = nextLeft
+ this.state.centerRight = nextRight
+ this.state.localNote = "Draft only; review both centers and crop size before saving."
+ this.redraw()
+ },
+ clear(side) {
+ if (!this.canEdit) return
+ this.state[side] = null
+ this.redraw()
+ },
+ size(event) {
+ if (!this.canEdit) return
+ const value = Number(event.target.value)
+ if (!maskDraft(this.state.width, this.state.height, value, this.state.centerLeft, this.state.centerRight)) {
+ this.state.localNote = "That crop size would cross the image edge or leave no configured side."
+ event.target.value = String(this.state.cropSize)
+ return
+ }
+ this.state.cropSize = value
+ this.redraw()
+ },
+ async saveCrop() {
+ if (!this.canEdit) return
+ const draft = maskDraft(this.state.width, this.state.height, this.state.cropSize,
+ this.state.centerLeft, this.state.centerRight)
+ if (!draft) { this.state.localNote = "Keep at least one complete crop inside the image."; return }
+ this.state.reviewing = true
+ try { await this.feed.preview(this.state.data.editorRow, 0, draft) }
+ finally { this.state.reviewing = false }
+ },
+ redraw() {
+ const canvas = this.$refs.canvas
+ if (!canvas || !FORMATS.some(([w, h]) => w === this.state.width && h === this.state.height)) return
+ if (canvas.width !== this.state.width) canvas.width = this.state.width
+ if (canvas.height !== this.state.height) canvas.height = this.state.height
+ const ctx = canvas.getContext("2d")
+ if (!ctx) return
+ const w = canvas.width, h = canvas.height
+ ctx.fillStyle = "#151821"
+ ctx.fillRect(0, 0, w, h)
+ if (this._image) {
+ if (this.state.invert) { ctx.save(); ctx.translate(w, 0); ctx.scale(-1, 1) }
+ ctx.drawImage(this._image, 0, 0, w, h)
+ if (this.state.invert) ctx.restore()
+ } else {
+ ctx.strokeStyle = "#38404e"
+ ctx.beginPath(); ctx.moveTo(w / 2, 0); ctx.lineTo(w / 2, h); ctx.stroke()
+ }
+ const preview = this.$refs.preview
+ const center = this.state[this.state.activeSide]
+ if (preview && this._image && center) {
+ preview.width = preview.height = 300
+ const crop = preview.getContext("2d")
+ crop.save()
+ if (this.state.invert) { crop.translate(300, 0); crop.scale(-1, 1) }
+ const size = this.state.cropSize
+ crop.drawImage(this._image, (center[0] - size / 2) * this._image.naturalWidth / w,
+ (center[1] - size / 2) * this._image.naturalHeight / h,
+ size * this._image.naturalWidth / w, size * this._image.naturalHeight / h, 0, 0, 300, 300)
+ crop.restore()
+ }
+ for (const side of SIDES) {
+ const center = this.state[side.key]
+ if (!center) continue
+ const [x, y] = displayPoint(center, w, this.state.invert)
+ const half = this.state.cropSize / 2
+ ctx.strokeStyle = side.color
+ ctx.lineWidth = Math.max(2, w / 640)
+ ctx.strokeRect(x - half, y - half, this.state.cropSize, this.state.cropSize)
+ ctx.beginPath(); ctx.arc(x, y, Math.max(4, w / 320), 0, Math.PI * 2); ctx.fillStyle = side.color; ctx.fill()
+ }
+ },
+ },
+ template: `
+
+
+ Local saved settings are unavailable in preview.
+
+ Loading saved settings…
+ Saved settings are unavailable.
+ {{ state.error }}
+ Refresh
+
+
{{ state.data.subtitle }} Turn the vehicle off to change these settings.
+
Refresh
+
+
+
+
Confirm Saved Preference {{ state.pending.question }}
+
Cancel
+ Save
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/plots.js b/openpilot/starpilot/galaxy/web/js/plots.js
new file mode 100644
index 0000000000..503c5fb035
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/plots.js
@@ -0,0 +1,249 @@
+// Bounded, read-only local control history. No layout or telemetry is persisted.
+export const MAX_POINTS = 240
+export const POLL_MS = 750
+const SIGNALS = ['desiredLateralAccel', 'actualLateralAccel', 'desiredLongitudinalAccel', 'actualLongitudinalAccel',
+ 'lateralP', 'lateralI', 'lateralD', 'lateralF', 'longitudinalP', 'longitudinalI', 'longitudinalF', 'speedMps']
+const STATES = ['current', 'stale', 'unavailable']
+const SOURCES = {
+ lateralSource: ['unavailable', 'torqueState', 'curvature'],
+ longitudinalSource: ['unavailable', 'aTarget', 'pidSum'],
+ lateralTermsSource: ['unavailable', 'torqueState', 'pidState'],
+ longitudinalTermsSource: ['unavailable', 'controlsState'],
+ speedSource: ['unavailable', 'deviceMotion', 'carState'],
+}
+
+export function validatePlotPayload(data) {
+ if (data?.schemaVersion !== 1 || !/^[0-9a-f]{16}$/.test(data.sessionId) || !STATES.includes(data.state) ||
+ !Number.isSafeInteger(data.sampleIndex) || data.sampleIndex < 0 ||
+ !(data.sampleAgeSeconds === null || Number.isFinite(data.sampleAgeSeconds) && data.sampleAgeSeconds >= 0) ||
+ typeof data.error !== 'string' || data.error.length > 80 || typeof data.bootStabilizing !== 'boolean' ||
+ !(data.values === null || typeof data.values === 'object')) throw new Error('Invalid plot sample')
+ if (data.state !== 'current') {
+ if (data.values !== null) throw new Error('Stale plot values')
+ return data
+ }
+ if (!data.values || data.sampleAgeSeconds === null || data.sampleAgeSeconds > 1.5 ||
+ data.values.controlsFresh !== true || typeof data.values.poseFresh !== 'boolean' ||
+ typeof data.values.controlsActive !== 'boolean' || typeof data.values.lateralControlActive !== 'boolean' ||
+ typeof data.values.longitudinalControlActive !== 'boolean') throw new Error('Invalid plot source')
+ for (const key of SIGNALS) if (!(data.values[key] === null || typeof data.values[key] === 'number' && Number.isFinite(data.values[key]))) throw new Error('Invalid plot value')
+ for (const [key, allowed] of Object.entries(SOURCES)) if (!allowed.includes(data.values[key])) throw new Error('Invalid plot source')
+ if (data.values.lateralSource === 'unavailable' && (data.values.desiredLateralAccel !== null || data.values.actualLateralAccel !== null)) throw new Error('Invalid lateral source')
+ if (data.values.longitudinalSource === 'unavailable' && data.values.desiredLongitudinalAccel !== null) throw new Error('Invalid longitudinal source')
+ if (!data.values.poseFresh && data.values.actualLongitudinalAccel !== null) throw new Error('Invalid pose source')
+ if (data.values.speedSource === 'unavailable' && data.values.speedMps !== null) throw new Error('Invalid speed source')
+ return data
+}
+
+export function appendPlotSample(history, payload, observedAt) {
+ if (payload.state !== 'current' || !payload.values) return history
+ if (history.at(-1)?.sessionId !== undefined && history.at(-1).sessionId !== payload.sessionId) history = []
+ if (payload.sampleIndex === (history.at(-1)?.index ?? 0)) return history
+ if (payload.sampleIndex < (history.at(-1)?.index ?? 0)) history = []
+ const sample = { ...payload.values, sessionId: payload.sessionId, index: payload.sampleIndex,
+ at: observedAt - payload.sampleAgeSeconds * 1000 }
+ return [...history, sample].slice(-MAX_POINTS)
+}
+
+export function matchQuality(history, desired, actual, { minSpeed = 0, minDemand = 0, great, good, fair, activeKey = 'controlsActive',
+ warnError = null, severeError = null }) {
+ const latest = history.at(-1)?.at
+ if (!Number.isFinite(latest)) return { label: 'N/A', detail: 'Waiting for data' }
+ const errors = history.filter((sample) => sample.at >= latest - 30000 && sample[activeKey] &&
+ Number.isFinite(sample[desired]) && Number.isFinite(sample[actual]) &&
+ (sample.speedMps ?? 0) >= minSpeed && Math.max(Math.abs(sample[desired]), Math.abs(sample[actual])) >= minDemand)
+ .map((sample) => Math.abs(sample[desired] - sample[actual])).sort((a, b) => a - b)
+ if (errors.length < 8) return { label: 'N/A', detail: `${errors.length} of 8 valid driving samples` }
+ const percentile = (p) => { const i = (errors.length - 1) * p; const lo = Math.floor(i); return errors[lo] + (errors[Math.ceil(i)] - errors[lo]) * (i - lo) }
+ const value = 0.7 * percentile(0.5) + 0.3 * percentile(0.9)
+ const warnFraction = warnError === null ? 0 : errors.filter((error) => error > warnError).length / errors.length
+ const severeFraction = severeError === null ? 0 : errors.filter((error) => error > severeError).length / errors.length
+ const pass = (limit, maxWarn, maxSevere) => value <= limit && warnFraction <= maxWarn && severeFraction <= maxSevere
+ return { label: pass(great, .18, .05) ? 'Great' : pass(good, .34, .12) ? 'Good' : pass(fair, .55, .24) ? 'Fair' : 'Poor',
+ detail: `${errors.length} samples / 30 s · robust error ${value.toFixed(2)} m/s²` }
+}
+
+export function chartGeometry(history, keys) {
+ const valid = history.filter((sample) => keys.some((key) => Number.isFinite(sample[key])))
+ const lo = Math.min(0, ...valid.flatMap((sample) => keys.map((key) => sample[key]).filter(Number.isFinite)))
+ const hi = Math.max(0, ...valid.flatMap((sample) => keys.map((key) => sample[key]).filter(Number.isFinite)))
+ const span = Math.max(0.01, hi - lo)
+ const first = history[0]?.at ?? 0, elapsed = Math.max(1, (history.at(-1)?.at ?? first) - first)
+ const y = (value) => 132 - (value - lo) / span * 114
+ const duration = valid.length > 1 ? Math.max(0, (history.at(-1).at - first) / 1000) : 0
+ const paths = keys.map((key) => {
+ let points = [], paths = [], previousAt = null
+ for (const sample of history) {
+ if (previousAt !== null && sample.at - previousAt > 1500) {
+ if (points.length > 1) paths.push(points.join(' ')); points = []
+ }
+ previousAt = sample.at
+ if (!Number.isFinite(sample[key])) { if (points.length > 1) paths.push(points.join(' ')); points = []; continue }
+ const x = Math.max(48, Math.min(624, 48 + (sample.at - first) / elapsed * 576))
+ points.push(`${x.toFixed(1)},${y(sample[key]).toFixed(1)}`)
+ }
+ if (points.length > 1) paths.push(points.join(' '))
+ return paths
+ })
+ return { paths, valid: valid.length > 0, top: hi.toFixed(2), bottom: lo.toFixed(2), zeroY: y(0),
+ from: duration > 0 ? `−${duration < 10 ? duration.toFixed(1) : Math.round(duration)} s` : '0 s' }
+}
+
+export function seriesPoints(history, keys) {
+ return chartGeometry(history, keys).paths
+}
+
+export class PlotsFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ now = () => performance.now(), later = (fn, ms) => setTimeout(fn, ms), cancel = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, now, later, cancel })
+ this.active = false; this.paused = false; this.generation = 0; this.displayGeneration = 0
+ this.timer = this.deadline = this.expiry = this.request = null
+ this.history = []; this.lastData = null
+ }
+ clear() {
+ for (const key of ['timer', 'deadline', 'expiry']) { if (this[key] !== null) this.cancel(this[key]); this[key] = null }
+ this.request?.abort(); this.request = null
+ }
+ stop() {
+ this.active = false; this.generation++; this.displayGeneration++; this.clear(); this.history = []; this.lastData = null
+ this.publish({ status: 'idle', data: null, history: [], error: '' })
+ }
+ start() { this.stop(); this.active = true; if (!this.paused) return this.load() }
+ setPaused(paused) {
+ this.paused = paused
+ if (paused) { this.generation++; this.displayGeneration++; this.clear(); this.publish({ status: 'paused', data: this.lastData, history: this.history, error: '' }) }
+ else if (this.active) this.load()
+ }
+ async load() {
+ if (!this.active || this.paused || this.request) return
+ const generation = ++this.generation, start = this.now(), request = new AbortController()
+ this.request = request
+ this.deadline = this.later(() => {
+ if (!this.active || generation !== this.generation) return
+ this.generation++; this.displayGeneration++; request.abort(); this.request = null; this.clear()
+ this.publish({ status: this.lastData ? 'stale' : 'unavailable', data: this.lastData, history: this.history, error: 'Plot refresh timed out' })
+ this.timer = this.later(() => { this.timer = null; this.load() }, POLL_MS)
+ }, 1500)
+ try {
+ const response = await this.fetcher('./api/plots/live', { signal: request.signal, cache: 'no-store' })
+ if (!this.active || generation !== this.generation || request.signal.aborted) return
+ if (response.status === 401) { this.stop(); this.unauthorized(); return }
+ if (response.status === 503) {
+ const body = await response.json().catch(() => null)
+ if (!this.active || generation !== this.generation || request.signal.aborted) return
+ if (['access_unavailable', 'setup_required'].includes(body?.code)) { this.stop(); this.unauthorized(); return }
+ }
+ if (!response.ok) throw new Error('Live plots unavailable')
+ const data = validatePlotPayload(await response.json())
+ if (!this.active || generation !== this.generation || request.signal.aborted) return
+ const elapsed = this.now() - start
+ if (!Number.isFinite(elapsed) || elapsed < 0 || elapsed >= 1500) throw new Error('Plot sample delayed')
+ if (this.expiry !== null) this.cancel(this.expiry)
+ this.expiry = null
+ const displayGeneration = ++this.displayGeneration
+ const remaining = data.sampleAgeSeconds === null ? 0 : 1500 - data.sampleAgeSeconds * 1000 - elapsed
+ if (data.state === 'current' && remaining > 0) {
+ this.history = appendPlotSample(this.history, data, this.now() - elapsed)
+ this.lastData = data
+ this.publish({ status: 'current', data, history: this.history, error: '' })
+ this.expiry = this.later(() => {
+ if (this.active && displayGeneration === this.displayGeneration) this.publish({ status: 'stale', data: this.lastData, history: this.history, error: 'Showing the last received sample' })
+ }, remaining)
+ } else this.publish({ status: this.lastData ? 'stale' : data.state === 'unavailable' ? 'unavailable' : 'stale', data: this.lastData, history: this.history, error: data.error || 'Waiting for fresh control data' })
+ } catch (error) {
+ if (this.active && generation === this.generation) {
+ this.displayGeneration++
+ if (this.expiry !== null) this.cancel(this.expiry)
+ this.expiry = null
+ this.publish({ status: this.lastData ? 'stale' : 'unavailable', data: this.lastData, history: this.history, error: error.message })
+ }
+ } finally {
+ if (generation === this.generation) {
+ if (this.deadline !== null) this.cancel(this.deadline); this.deadline = null
+ this.request = null
+ if (this.active && !this.paused) this.timer = this.later(() => { this.timer = null; this.load() }, POLL_MS)
+ }
+ }
+ }
+}
+
+export const PlotGraph = {
+ name: 'PlotGraph',
+ props: { chart: { type: Object, required: true }, title: { type: String, required: true }, terms: { type: Boolean, default: false } },
+ template: `
+
+ {{ chart.top }}
+ {{ chart.bottom }}
+ {{ chart.from }}
+ Latest
+
+ `,
+}
+
+export const PlotsPage = {
+ name: 'PlotsPage',
+ components: { PlotGraph },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ status: 'idle', data: null, history: [], error: '', paused: false, advanced: false }),
+ created() { this.feed = new PlotsFeed({ publish: (update) => Object.assign(this.$data, update), unauthorized: this.unauthorized }) },
+ mounted() {
+ this.visibility = () => {
+ if (document.hidden) this.feed.setPaused(true)
+ else if (!this.paused && this.mode === 'local') {
+ if (!this.feed.active) this.feed.start()
+ else this.feed.setPaused(false)
+ }
+ }
+ document.addEventListener('visibilitychange', this.visibility)
+ if (this.mode === 'local' && !document.hidden) this.feed.start()
+ },
+ beforeUnmount() { document.removeEventListener('visibilitychange', this.visibility); this.feed.stop() },
+ computed: {
+ lateralQuality() { return matchQuality(this.history, 'desiredLateralAccel', 'actualLateralAccel', { minSpeed: 0.5, minDemand: 0.008, great: 0.15, good: 0.30, fair: 0.50, activeKey: 'lateralControlActive' }) },
+ longQuality() { return matchQuality(this.history, 'desiredLongitudinalAccel', 'actualLongitudinalAccel', { minDemand: 0.05, great: 0.32, good: 0.52, fair: 0.78, activeKey: 'longitudinalControlActive', warnError: .52, severeError: .90 }) },
+ lateralChart() { return chartGeometry(this.history, ['desiredLateralAccel', 'actualLateralAccel']) },
+ longChart() { return chartGeometry(this.history, ['desiredLongitudinalAccel', 'actualLongitudinalAccel']) },
+ lateralTermsChart() { return chartGeometry(this.history, ['lateralP', 'lateralI', 'lateralD', 'lateralF']) },
+ longTermsChart() { return chartGeometry(this.history, ['longitudinalP', 'longitudinalI', 'longitudinalF']) },
+ },
+ methods: {
+ togglePause() { this.paused = !this.paused; this.feed.setPaused(this.paused) },
+ label(value, unit = 'm/s²') { return value === null || value === undefined ? 'Unavailable' : `${value.toFixed(2)} ${unit}` },
+ source(kind) { return ({ torqueState: 'Steering torque controller', curvature: 'Curvature × speed² estimate', aTarget: 'Planner target acceleration',
+ pidSum: 'PID term sum', pidState: 'Steering PID', controlsState: 'Longitudinal controller',
+ deviceMotion: 'Device motion', carState: 'Vehicle speed', unavailable: 'Unavailable' })[kind] || 'Unavailable' },
+ },
+ template: `
+
+
Plots Live local control observations. Graphs and match scores are diagnostic, not driving-control checks.
+
Offline tracking analysis
+
Live plots require the authenticated local Galaxy service.
+
+ {{ paused ? 'Resume' : 'Pause' }}
+ {{ advanced ? 'Hide' : 'Show' }} controller terms
+ {{ paused ? 'Paused' : data?.bootStabilizing ? 'Starting vehicle systems' : status === 'current' ? 'Live' : status === 'stale' ? 'Reconnecting · last received values' : status === 'unavailable' ? 'Unavailable' : 'Connecting' }}
+ {{ !paused && error ? error : 'Missing samples leave a gap in the graph.' }}
+
+
Lateral Acceleration Desired / actual · m/s² · {{ source(data?.values?.lateralSource) }}
+ Desired: {{ label(data?.values?.desiredLateralAccel) }} · Actual: {{ label(data?.values?.actualLateralAccel) }}
+ Speed source: {{ source(data?.values?.speedSource) }}
+ 30 s match: {{ !data || data?.bootStabilizing ? 'N/A' : lateralQuality.label }} · {{ data?.bootStabilizing ? 'Waiting for startup to settle' : status !== 'current' ? 'Last received window' : lateralQuality.detail }}
+
Longitudinal Acceleration Target / measured · m/s² · {{ source(data?.values?.longitudinalSource) }}; measured from {{ data?.values?.poseFresh ? 'device motion' : 'unavailable motion source' }}
+ Target: {{ label(data?.values?.desiredLongitudinalAccel) }} · Measured: {{ label(data?.values?.actualLongitudinalAccel) }}
+ 30 s match: {{ !data || data?.bootStabilizing ? 'N/A' : longQuality.label }} · {{ data?.bootStabilizing ? 'Waiting for startup to settle' : status !== 'current' ? 'Last received window' : longQuality.detail }}
+
Lateral Controller Terms P / I / D / F · controller output units · {{ source(data?.values?.lateralTermsSource) }}
+
+
Longitudinal Controller Terms P / I / F · m/s² · {{ source(data?.values?.longitudinalTermsSource) }}
+
+
Blue is target, orange is observed. Missing or stale sources are never plotted as zero.
+
+
+
Local Recordings
+
Drives and video saved on this device. Older recordings may have been removed to free space.
+
Local recordings are unavailable in the offline preview.
+
+
+ Reading local recordings…
+ {{ error }}
+
+ This scan was incomplete. More local segments may exist.
+ No recording segments found in this scan.
+
+ Quick Road Video Lower-resolution local road view · {{ playing.routeId }} · segment {{ playing.segments[playing.index].number }}
+
Close {{ playerError }}
+ Previous segment
+ {{ playing.index + 1 }} of {{ playing.segments.length }} saved Quick road segments
+ Next segment
+
+
+
Recorded Segment Details Close
+ {{ detailsName }} · For this saved segment only. Distance is estimated from recorded speed.
+ Reading closed full log…
+ {{ detailsError }}
+
+
{{ detailMetric(details.observedCarSpanSeconds) }} Recorded time span
+
{{ detailMetric(details.estimatedDistanceMeters, 'm') }} Estimated distance
+
{{ detailMetric(details.observedLatActiveSeconds) }} Steering active
+
{{ detailMetric(details.observedLongActiveSeconds) }} Longitudinal active
+
Samples have gaps or a missing source; unavailable values were not inferred.
+
+
+
+
+
+ View {{ route.segmentCount }} saved {{ route.segmentCount === 1 ? 'segment' : 'segments' }} Playback, downloads & details
+ Segment {{ segment.number }}
+
+
+
+
+
+ Notifications
+ Receive new locally recorded motion events. Notification channels work independently.
+ Notification configuration is available on your connected device.
+
+ {{ notificationError }}
+ Updating notifications…
+ The notification queue is full. Some events could not be queued.
+
+ {{ notifications.deliverySemantics }}
+
+ Subscribed browsers: {{ notifications.subscriptionCount }}
+ Remove browser {{ index + 1 }}
+
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/sentry.js b/openpilot/starpilot/galaxy/web/js/sentry.js
new file mode 100644
index 0000000000..556c7a8bb4
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/sentry.js
@@ -0,0 +1,72 @@
+import { SentryNotifications } from "./sentry-notifications.js"
+import { LocalHistoryFeed } from "./record-history.js"
+
+// Historical motion records and independently configured notifications.
+const ID = /^[0-9a-f]{32}$/
+
+export function validSentryEvents(value) {
+ if (value?.schemaVersion !== 1 || value.source !== "local" || typeof value.scanIncomplete !== "boolean" ||
+ value.capacity !== 512 || !Array.isArray(value.events) || value.events.length > 512) return false
+ const seen = new Set()
+ return value.events.every((event) => {
+ if (event === null || typeof event !== "object" || Object.keys(event).some((key) => !["eventId", "kind", "systemTimeMs", "images"].includes(key)) ||
+ (event.images !== undefined && (!Array.isArray(event.images) || event.images.length > 2 ||
+ new Set(event.images).size !== event.images.length || event.images.some((camera) => !["wide", "cabin"].includes(camera)))) ||
+ typeof event.eventId !== "string" || !ID.test(event.eventId) || seen.has(event.eventId) ||
+ !["warning", "alarm"].includes(event.kind) || !Number.isSafeInteger(event.systemTimeMs) ||
+ event.systemTimeMs <= 0 || event.systemTimeMs > 8_640_000_000_000_000) return false
+ seen.add(event.eventId)
+ return true
+ })
+}
+
+export const systemTime = (milliseconds) => Number.isSafeInteger(milliseconds) && milliseconds > 0 && milliseconds <= 8_640_000_000_000_000
+ ? new Date(milliseconds).toLocaleString() : "Unavailable"
+
+export class SentryEventsFeed extends LocalHistoryFeed {
+ static endpoint = "./api/sentry/events"
+ static valid = validSentryEvents
+ static subject = "local motion events"
+ static unavailable = "Local motion events are unavailable."
+ static invalid = "Local motion records are unavailable."
+}
+
+export const SentryEventsPage = {
+ name: "SentryEventsPage",
+ components: { SentryNotifications },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true },
+ go: { type: Function, required: true } },
+ data: () => ({ status: "idle", data: null, error: "" }),
+ created() { this.feed = new SentryEventsFeed({ publish: (update) => Object.assign(this.$data, update), unauthorized: this.unauthorized }) },
+ mounted() {
+ this.visibility = () => { if (document.hidden) this.feed.stop(); else if (this.mode === "local") this.feed.start() }
+ document.addEventListener("visibilitychange", this.visibility)
+ if (this.mode === "local" && !document.hidden) this.feed.start()
+ },
+ beforeUnmount() { document.removeEventListener("visibilitychange", this.visibility); this.feed.stop() },
+ methods: { systemTime },
+ template: `
+
+
Motion Events
+
Local motion records only · System clock times may be inaccurate
+
Back to Cameras
+
+
+
Local motion records are unavailable in preview.
+
+ Refresh events
+ Reading local motion events…
+ {{ error }}
+
+ This scan was incomplete. More local motion events may exist.
+ No local motion events found in this scan.
+
+ {{ event.kind === 'alarm' ? 'Alarm' : 'Warning' }}
+ System time: {{ systemTime(event.systemTimeMs) }}
+ Event ID: {{ event.eventId }}
+
+
+
+
+
+ Local settings are unavailable in preview.
+
+
+ {{ section.label }}
+
+
+ Saving preference…
+ Loading saved settings…
+ Saved settings are unavailable.
+ {{ state.error }}
+ Refresh
+
+
Open Theme Maker
+
Turn the vehicle off to change these settings.
+
+
+
+ No matching settings.
+
+
+
+
Confirm Saved Preference {{ state.pending.question }}
+
Cancel
+ Save
+
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/software-status.js b/openpilot/starpilot/galaxy/web/js/software-status.js
new file mode 100644
index 0000000000..ad068c0f53
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/software-status.js
@@ -0,0 +1,456 @@
+import { decodeLayoutBackup, encodeLayoutBackup, MAX_LAYOUT_BACKUP_BYTES } from "./layout-backup.js"
+
+const ACTIONS = new Set(["check", "download", "select", "install", "preferences"])
+const REQUEST_STATES = new Set(["pending", "complete", "failed"])
+const UPDATER_ACTIVE = new Set(["checking...", "downloading...", "finalizing update..."])
+const PRIMARY_BRANCHES = ["StarPilot", "Dom"]
+const unavailableOperations = () => ({ parked: false, availableBranches: [], selectedTarget: null,
+ canCheck: false, canDownload: false, canSelect: false, canInstall: false,
+ reason: "Update controls are unavailable", request: null })
+
+export function validSoftwareSnapshot(data) {
+ const text = (value) => value === null || typeof value === "string"
+ const flag = (value) => value === null || typeof value === "boolean"
+ const updater = data?.updater, operations = data?.operations, request = operations?.request
+ return data?.schemaVersion === 1 && !!data.installed && !!updater &&
+ [data.installed.version, data.installed.branch, data.installed.commit, updater.state,
+ updater.targetBranch, updater.lastSuccessAt, updater.lastFetchAt].every(text) &&
+ (data.installed.displayVersion === undefined || text(data.installed.displayVersion)) &&
+ [updater.targetChangeFound, updater.finalizedUpdateReady].every(flag) &&
+ (updater.failedCount === null || Number.isSafeInteger(updater.failedCount) && updater.failedCount >= 0) &&
+ (operations === undefined || !!operations && typeof operations.parked === "boolean" && Array.isArray(operations.availableBranches) &&
+ operations.availableBranches.length <= 256 && operations.availableBranches.every((branch) =>
+ typeof branch === "string" && branch.length > 0 && branch.length <= 128) &&
+ text(operations.selectedTarget) && text(operations.reason) &&
+ (operations.automaticDownloads === undefined || flag(operations.automaticDownloads)) &&
+ (operations.canConfigure === undefined || typeof operations.canConfigure === "boolean") &&
+ (operations.history === undefined || validHistory(operations.history)) &&
+ [operations.canCheck, operations.canDownload, operations.canSelect, operations.canInstall].every((value) => typeof value === "boolean") &&
+ (request === null || !!request && typeof request.id === "string" && request.id.length <= 100 &&
+ ACTIONS.has(request.action) && text(request.target) && REQUEST_STATES.has(request.state) && text(request.error)))
+}
+
+export function validHistory(value) {
+ const rows = (items) => Array.isArray(items) && items.length <= 20 && items.every((row) =>
+ /^[0-9a-f]{40}$/.test(row?.hash) && typeof row.date === "string" && row.date.length <= 64 &&
+ typeof row.subject === "string" && row.subject.length <= 512)
+ return !!value && rows(value.installed) && rows(value.downloaded) &&
+ [value.currentReleaseNotes, value.downloadedReleaseNotes].every((notes) => notes === null || typeof notes === "string" && notes.length <= 65536)
+}
+
+export class SoftwareStatusFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.active = false
+ this.generation = 0
+ this.controller = null
+ this.timeout = null
+ this.pollTimer = null
+ this.data = null
+ this.attempted = false
+ this.busy = false
+ this.mutating = false
+ this.blocked = false
+ this.uncertain = false
+ this.uncertainAction = null
+ this.actionPriorRequestId = null
+ this.installBaseline = null
+ this.notice = ""
+ this.error = ""
+ }
+
+ emit(status) { this.publish({ status, data: this.data, busy: this.busy, uncertain: this.uncertain,
+ notice: this.notice, error: this.error }) }
+
+ stop() {
+ this.active = false
+ this.generation++
+ this.controller?.abort()
+ if (this.timeout !== null) this.cancelTimer(this.timeout)
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.controller = this.timeout = this.pollTimer = null
+ this.data = this.installBaseline = this.uncertainAction = this.actionPriorRequestId = null
+ this.attempted = false
+ this.busy = this.mutating = this.blocked = this.uncertain = false
+ this.notice = this.error = ""
+ this.emit("idle")
+ }
+
+ start() { this.stop(); this.active = true; return this.load() }
+
+ needsRapidPoll() {
+ return this.uncertain || !!this.installBaseline || this.data?.operations?.parked === false ||
+ this.data?.operations?.request?.state === "pending" || UPDATER_ACTIVE.has(this.data?.updater?.state)
+ }
+
+ schedulePoll(delay = null) {
+ if (!this.active || this.pollTimer !== null || this.controller) return
+ const generation = this.generation
+ this.pollTimer = this.later(() => {
+ this.pollTimer = null
+ if (this.active && generation === this.generation) this.load()
+ }, delay ?? (this.needsRapidPoll() ? 1000 : 5000))
+ }
+
+ async run(body = null) {
+ if (!this.active || this.mutating) return null
+ const generation = ++this.generation
+ this.controller?.abort()
+ if (this.timeout !== null) this.cancelTimer(this.timeout)
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.pollTimer = null
+ const controller = new AbortController()
+ this.controller = controller
+ this.busy = body !== null || this.data === null
+ this.mutating = body !== null
+ if (body !== null) this.error = ""
+ this.emit(this.data ? "ready" : this.attempted ? "unavailable" : "loading")
+ this.timeout = this.later(() => {
+ if (!this.active || this.generation !== generation || this.controller !== controller) return
+ controller.abort()
+ this.generation++
+ this.controller = this.timeout = null
+ this.busy = this.mutating = false
+ this.attempted = true
+ this.blocked = true
+ if (body !== null) { this.uncertain = true; this.uncertainAction = body }
+ this.error = body !== null ? "The request timed out. Its result is unknown; wait for a fresh status before trying another action." :
+ "Software status timed out. Refresh to try again."
+ this.emit(this.data ? "ready" : "unavailable")
+ this.schedulePoll(2000)
+ }, 5000)
+ try {
+ const response = await this.fetcher(body === null ? "./api/software/status" : "./api/software/action", {
+ credentials: "same-origin", cache: "no-store", signal: controller.signal,
+ ...(body === null ? {} : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }),
+ })
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ const payload = typeof response.json === "function" ? await response.json().catch(() => null) : null
+ if (!this.active || generation !== this.generation || controller.signal.aborted) return null
+ if (response.status === 401 || response.status === 503 &&
+ ["access_unavailable", "setup_required"].includes(payload?.code)) {
+ this.stop()
+ this.unauthorized()
+ return null
+ }
+ if (!response.ok) {
+ const error = new Error(payload?.error || payload?.message || "Software request failed. Refresh to try again.")
+ error.rejected = response.status >= 400 && response.status < 500
+ throw error
+ }
+ if (!validSoftwareSnapshot(payload)) throw new Error("Software response is unavailable. Refresh to try again.")
+ this.data = payload.operations === undefined ? { ...payload, operations: unavailableOperations() } : payload
+ this.attempted = true
+ this.blocked = false
+ if (body !== null) {
+ this.uncertain = false
+ this.uncertainAction = null
+ this.actionPriorRequestId = null
+ if (body.action === "install") {
+ this.installBaseline = this.installBaseline || { commit: payload.installed.commit, branch: payload.installed.branch, target: body.branch }
+ this.notice = "Restart requested. Waiting to reconnect and verify the installed build."
+ } else this.notice = body.action === "select" ? `Target branch set to ${body.branch}. Check and download the update when ready.` :
+ body.action === "preferences" ? "Automatic download preference saved." : ""
+ } else {
+ const observed = payload.operations.request
+ const requestObserved = !!observed && !!this.uncertainAction && observed.action === this.uncertainAction.action &&
+ observed.id !== this.actionPriorRequestId &&
+ (!this.uncertainAction?.branch || observed.target === this.uncertainAction.branch)
+ const selectionObserved = this.uncertainAction?.action === "select" &&
+ payload.operations.selectedTarget === this.uncertainAction.branch
+ const preferenceObserved = this.uncertainAction?.action === "preferences" &&
+ payload.operations.automaticDownloads === this.uncertainAction.automaticDownloads
+ if (this.uncertain && (requestObserved || selectionObserved || preferenceObserved)) {
+ this.uncertain = false
+ this.uncertainAction = null
+ this.actionPriorRequestId = null
+ }
+ if (this.installBaseline && payload.installed.branch === this.installBaseline.target &&
+ (payload.installed.commit && payload.installed.commit !== this.installBaseline.commit ||
+ payload.installed.branch !== this.installBaseline.branch)) {
+ this.installBaseline = null
+ this.uncertain = false
+ this.uncertainAction = null
+ this.actionPriorRequestId = null
+ this.notice = "Installed build verified after reconnect."
+ }
+ }
+ this.error = ""
+ this.emit("ready")
+ return payload
+ } catch (error) {
+ if (this.active && generation === this.generation && !controller.signal.aborted) {
+ this.attempted = true
+ this.blocked = true
+ if (body !== null) {
+ this.uncertain = !error?.rejected
+ this.uncertainAction = this.uncertain ? body : null
+ if (error?.rejected && body.action === "install") this.installBaseline = null
+ }
+ this.error = error?.message || "Software request failed. Refresh to try again."
+ this.emit(this.data ? "ready" : this.attempted ? "unavailable" : "loading")
+ }
+ return null
+ } finally {
+ if (this.controller === controller) {
+ if (this.timeout !== null) this.cancelTimer(this.timeout)
+ this.controller = this.timeout = null
+ this.busy = this.mutating = false
+ this.emit(this.data ? "ready" : "unavailable")
+ this.schedulePoll(this.error ? 2000 : null)
+ }
+ }
+ }
+
+ load() { return this.run() }
+
+ configureAutomaticDownloads(enabled) {
+ if (!this.active || this.mutating || this.blocked || this.uncertain || this.data?.operations?.canConfigure !== true ||
+ typeof enabled !== "boolean") return null
+ return this.run({ action: "preferences", automaticDownloads: enabled,
+ expectedAutomaticDownloads: this.data.operations.automaticDownloads })
+ }
+
+ action(action, branch = null) {
+ const operations = this.data?.operations
+ const capability = { check: "canCheck", download: "canDownload", select: "canSelect", install: "canInstall" }[action]
+ if (!this.active || !capability || this.mutating || this.blocked || this.uncertain || !operations?.parked ||
+ operations[capability] !== true || operations.request?.state === "pending") return null
+ if (action === "select" && (branch === "other:" || !operations.availableBranches.includes(branch) || branch === operations.selectedTarget)) return null
+ if (["download", "install"].includes(action) && (!branch || branch !== operations.selectedTarget)) return null
+ this.actionPriorRequestId = operations.request?.id ?? null
+ if (action === "install") this.installBaseline = { commit: this.data.installed.commit,
+ branch: this.data.installed.branch, target: branch }
+ return this.run(action === "check" ? { action } : { action, branch })
+ }
+}
+
+export const SoftwarePage = {
+ name: "SoftwarePage",
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ status: "idle", data: null, busy: false, uncertain: false, notice: "", error: "",
+ primaryChoice: "", draftBranch: "", draftTouched: false, dialog: null,
+ layoutBusy: false, layoutNotice: "", layoutError: "", layoutDraft: null }),
+ created() {
+ this.feed = new SoftwareStatusFeed({ publish: (update) => {
+ Object.assign(this.$data, update)
+ if (update.data && !this.draftTouched) this.syncDraftBranch(update.data.operations.selectedTarget)
+ }, unauthorized: this.unauthorized })
+ },
+ mounted() { if (this.mode === "local") this.feed.start() },
+ beforeUnmount() { this.feed.stop() },
+ computed: {
+ operations() { return this.data?.operations },
+ pending() { return this.operations?.request?.state === "pending" },
+ actionDisabled() { return this.busy || this.uncertain || this.pending || !!this.error || !this.operations?.parked },
+ primaryBranchHelp() {
+ return this.primaryChoice === "StarPilot" ? "Stable releases. Recommended for most users." :
+ this.primaryChoice === "Dom" ? "Latest features and fixes under development. Updates regularly and may introduce bugs." : ""
+ },
+ otherBranches() {
+ const available = this.operations?.availableBranches || []
+ const selected = this.operations?.selectedTarget
+ const installed = this.data?.installed?.branch
+ return [...new Set([selected, installed, ...available].filter((branch) => branch && branch !== "other:" && !PRIMARY_BRANCHES.includes(branch)))].map((branch) => ({
+ name: branch, listed: available.includes(branch), current: branch === installed,
+ }))
+ },
+ canStageBranch() {
+ return !!this.draftBranch && this.draftBranch !== "other:" &&
+ this.operations?.availableBranches.includes(this.draftBranch) &&
+ this.draftBranch !== this.operations.selectedTarget &&
+ (this.primaryChoice === "other:" ? !PRIMARY_BRANCHES.includes(this.draftBranch) : this.primaryChoice === this.draftBranch)
+ },
+ },
+ methods: {
+ async layoutRequest(document = undefined, revision = undefined) {
+ const response = await fetch("./api/ui/layout", document === undefined ? {
+ credentials: "same-origin", cache: "no-store",
+ } : {
+ method: "POST", credentials: "same-origin", cache: "no-store",
+ headers: { "Content-Type": "application/json" }, body: JSON.stringify({ revision, document }),
+ })
+ if (response.status === 401) this.unauthorized()
+ const value = await response.json().catch(() => ({}))
+ if (!response.ok) throw new Error(value.error || "Visual layout is unavailable. Refresh and try again.")
+ return value
+ },
+ async exportLayout() {
+ if (this.layoutBusy) return
+ this.layoutBusy = true
+ this.layoutNotice = this.layoutError = ""
+ try {
+ const snapshot = await this.layoutRequest()
+ if (snapshot.valid !== true) throw new Error("Saved visual layout is invalid. Repair it in Theme Maker before exporting.")
+ const contents = await encodeLayoutBackup(snapshot.document)
+ const url = URL.createObjectURL(new Blob([contents], { type: "application/json" }))
+ try {
+ const link = document.createElement("a")
+ link.href = url
+ link.download = "StarPilot-visual-layout-backup.json"
+ document.body.append(link)
+ link.click()
+ link.remove()
+ } finally { setTimeout(() => URL.revokeObjectURL(url), 1000) }
+ this.layoutNotice = "Visual layout backup downloaded."
+ } catch (error) { this.layoutError = error.message || "Could not export visual layout." }
+ finally { this.layoutBusy = false }
+ },
+ async chooseLayoutFile(event) {
+ const file = event.target.files?.[0]
+ event.target.value = ""
+ if (!file || this.layoutBusy) return
+ this.layoutError = this.layoutNotice = ""
+ try {
+ if (file.size > MAX_LAYOUT_BACKUP_BYTES) throw new Error("Visual layout backup is too large.")
+ this.layoutDraft = await decodeLayoutBackup(await file.text())
+ this.dialog = { action: "restoreLayout", title: "Restore visual layout",
+ message: "Replace the saved onroad layout and colors with this backup? Turn off the vehicle first. Other settings stay as they are.",
+ label: "Restore layout" }
+ } catch (error) { this.layoutDraft = null; this.layoutError = error.message || "Could not read visual layout backup." }
+ },
+ async restoreLayout() {
+ const draft = this.layoutDraft
+ this.layoutDraft = null
+ if (!draft || this.layoutBusy) return
+ this.layoutBusy = true
+ this.layoutError = this.layoutNotice = ""
+ try {
+ const current = await this.layoutRequest()
+ if (current.editable !== true) throw new Error("Park the vehicle before restoring the visual layout.")
+ const saved = await this.layoutRequest(draft, current.revision)
+ if (saved.valid !== true) throw new Error("Visual layout could not be verified after restore.")
+ this.layoutNotice = "Visual layout restored."
+ } catch (error) { this.layoutError = error.message || "Could not restore visual layout." }
+ finally { this.layoutBusy = false }
+ },
+ syncDraftBranch(branch) {
+ this.draftBranch = branch || ""
+ this.primaryChoice = PRIMARY_BRANCHES.includes(this.draftBranch) ? this.draftBranch : this.draftBranch ? "other:" : ""
+ },
+ onPrimaryBranchChange() {
+ this.draftTouched = true
+ if (this.primaryChoice === "other:") {
+ if (!this.otherBranches.some((option) => option.name === this.draftBranch)) {
+ const selected = this.operations?.selectedTarget
+ this.draftBranch = this.otherBranches.some((option) => option.name === selected) ? selected : ""
+ }
+ } else this.draftBranch = this.primaryChoice
+ },
+ onOtherBranchChange() { this.draftTouched = true },
+ shown(value) { return value ?? "Unavailable" },
+ reported(value) { return value ? new Date(value).toLocaleString() : "Unavailable" },
+ shortCommit(value) { return value ? value.slice(0, 12) : "Unavailable" },
+ requestMessage(request) {
+ if (!request) return ""
+ if (request.state === "failed") return request.error || "Update request failed. Refresh and try again."
+ if (request.action === "install") return "Restart requested. Waiting to reconnect and verify the installed build."
+ if (request.state === "pending") return request.action === "check" ? "Checking for updates…" : "Downloading and preparing update…"
+ return request.action === "check" ? "Update check finished." : request.action === "download" ? "Download finished." : "Target branch saved."
+ },
+ chooseBranch() {
+ if (!this.operations?.canSelect || this.actionDisabled || !this.canStageBranch) return
+ this.dialog = { action: "select", branch: this.draftBranch, title: "Change target branch",
+ message: `Set ${this.draftBranch} as the target branch? This only stages the choice. Check for updates and download separately.`, label: "Set target branch" }
+ },
+ askInstall() {
+ if (this.actionDisabled || !this.operations?.canInstall || !this.operations.selectedTarget) return
+ this.dialog = { action: "install", branch: this.operations.selectedTarget, title: "Restart and install update",
+ message: `Restart the device to install the finalized update for ${this.operations.selectedTarget}? Keep the vehicle parked and the device accessible.`, label: "Restart & install" }
+ },
+ closeDialog() { this.dialog = null; this.layoutDraft = null },
+ async confirmDialog() {
+ const choice = this.dialog
+ if (!choice) return
+ this.dialog = null
+ if (choice.action === "restoreLayout") { await this.restoreLayout(); return }
+ const result = await this.feed.action(choice.action, choice.branch)
+ if (result && choice.action === "select") {
+ this.draftTouched = false
+ this.syncDraftBranch(result.operations.selectedTarget)
+ }
+ },
+ },
+ template: `
+
+
Software & Updates
+
Turn off the vehicle before checking, downloading or installing updates. Selecting a branch saves the target for the next check.
+
Software updates are unavailable in preview.
+
+ Refresh status
+ Check for updates
+ Loading software updates…
+ {{ error }}
+ Refresh
+ {{ notice }}
+
+ Installed Build
+ Version {{ shown(data.installed.displayVersion ?? data.installed.version) }} Branch {{ shown(data.installed.branch) }}
+ Commit {{ shortCommit(data.installed.commit) }} Target Branch
+ Current target: {{ shown(operations.selectedTarget) }}
+
+ Choose a branch
+ StarPilot — Release Dom — Development
+ Other branches…
+ Set target branch
+ {{ primaryBranchHelp }}
+
+
Other branches
+
Additional branches from this installation's repository.
+
+ {{ otherBranches.length ? 'Select another branch' : 'No other branches available' }}
+ {{ branch.name }}{{ branch.current ? ' (current)' : '' }}{{ !branch.listed && !branch.current ? ' (unavailable)' : '' }}
+
This branch is not in the updater's available list and cannot be selected yet.
+ No branch list is available yet. Check for updates to refresh it.
Update
+ {{ operations.reason }}
+ Park the vehicle to change or install software.
+ {{ requestMessage(operations.request) }}
+ {{ data.updater.state }}
+ An update was found for the target branch.
+ No target change reported by the last check.
+ Download update
+ Restart & install
+ Last checked {{ reported(data.updater.lastSuccessAt) }} Last download {{ reported(data.updater.lastFetchAt) }}
+ Visual Layout Backup
+ Save or restore your onroad layout and colors. This file does not include driving settings, calibration, credentials, or models.
+
+ Download backup
+ Restore from file
+
+ {{ layoutNotice }}
+ {{ layoutError }}
+
+
+ Release Notes & History
+ Installed Release Notes {{ operations.history.currentReleaseNotes }} Downloaded Release Notes {{ operations.history.downloadedReleaseNotes }}
+ {{ group.label }}
+ No local history is available for this build.
+
+ {{ entry.subject }} {{ reported(entry.date) }} · {{ shortCommit(entry.hash) }}
+
+
+
+
+
{{ dialog.title }} {{ dialog.message }}
+
Cancel
+ {{ dialog.label }}
+
+
+
+
Loading sound packs…
+
Sound packs are unavailable.
+
{{ state.error }}
+
Park the vehicle to download sound packs.
+
No sound packs are available.
+
+
{{ pack.name }}
+
+ Installed
+ Download
+
+
+
+
{{ job.state === 'verifying' ? 'Verifying' : 'Downloading' }} {{ state.snapshot.packs.find(pack => pack.id === job.pack)?.name || 'sound pack' }} · {{ progress }}%
+
Sound pack installed. Choose it from the pack selector above when ready.
+
Download cancelled.
+
Download failed: {{ job.error || 'Unknown error.' }}
+
{{ progress }}%
+
Cancel download
+
+
`,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/startup.js b/openpilot/starpilot/galaxy/web/js/startup.js
new file mode 100644
index 0000000000..cbe1c52771
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/startup.js
@@ -0,0 +1,36 @@
+export async function requestJson(url, { fetcher = (...args) => fetch(...args), timeout = 8000,
+ later = (fn, ms) => setTimeout(fn, ms), cancel = id => clearTimeout(id) } = {}) {
+ const controller = new AbortController()
+ let timer
+ try {
+ return await Promise.race([
+ (async () => {
+ const response = await fetcher(url, { cache: "no-store", credentials: "same-origin", signal: controller.signal })
+ if (!response.ok) throw new Error("Galaxy could not be reached")
+ return response.json()
+ })(),
+ new Promise((_, reject) => {
+ timer = later(() => { controller.abort(); reject(new Error("Galaxy took too long to respond")) }, timeout)
+ }),
+ ])
+ } finally {
+ cancel(timer)
+ controller.abort()
+ }
+}
+
+export async function loadCatalog(options) {
+ const [catalog, runtime] = await Promise.all([
+ requestJson("./data/catalog.json", options), requestJson("./data/runtime.json", options),
+ ])
+ if (runtime?.schemaVersion !== 1 || !["sample", "local"].includes(runtime.monitor)) throw new Error("Invalid Galaxy runtime")
+ const available = ["/system", "/navigation", "/manage_models", "/model_laboratory", "/cameras", "/appearance",
+ "/developer/connect", "/device-preferences", "/driving", "/tuning", "/bluetooth", "/vehicle", "/theme_maker", "/galaxy", "/android-auto"]
+ if (catalog?.mode !== "offline-preview" || !Array.isArray(catalog.tools) || catalog.tools.some(tool =>
+ typeof tool?.path !== "string" || !tool.path.startsWith("/") || typeof tool.name !== "string" ||
+ (tool.path === "/logs" ? tool.availability !== "partial-preview" :
+ available.includes(tool.path) ? tool.availability !== "local-only" : tool.availability !== "unavailable"))) {
+ throw new Error("Invalid Galaxy catalog")
+ }
+ return { tools: catalog.tools.slice().sort((a, b) => a.name.localeCompare(b.name)), mode: runtime.monitor }
+}
diff --git a/openpilot/starpilot/galaxy/web/js/system-monitor-data.js b/openpilot/starpilot/galaxy/web/js/system-monitor-data.js
new file mode 100644
index 0000000000..5e822fb035
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/system-monitor-data.js
@@ -0,0 +1,76 @@
+// Shared boundary; the selected transport must explicitly choose its source mode.
+const object = (value) => value !== null && typeof value === "object" && !Array.isArray(value)
+const number = (value, min = 0, max = Infinity) => typeof value === "number" && Number.isFinite(value) && value >= min && value <= max ? value : null
+const text = (value) => typeof value === "string" && value.trim() ? value : null
+const percent = (value) => number(value, 0, 100)
+const integer = (value, min = 0) => Number.isSafeInteger(value) && value >= min ? value : null
+
+export function normalizeSnapshot(raw, expectedMode = "synthetic-preview") {
+ if (!["synthetic-preview", "local-runtime"].includes(expectedMode) ||
+ !object(raw) || raw.mode !== expectedMode || raw.schemaVersion !== 1 ||
+ !Array.isArray(raw.cores) || !Array.isArray(raw.processes) || !object(raw.memory) || !object(raw.storage) ||
+ number(raw.sampledAt, 1) === null || !text(raw.source)) {
+ throw new Error("Invalid System Monitor sample")
+ }
+ const cores = raw.cores.map((core) => {
+ if (!object(core) || !text(core.name)) throw new Error("Invalid CPU core in sample")
+ return { name: core.name, percent: percent(core.percent) }
+ })
+ if (new Set(cores.map((core) => core.name)).size !== cores.length) throw new Error("Duplicate CPU core in sample")
+ const processes = raw.processes.map((process) => {
+ if (!object(process) || integer(process.pid, 1) === null || !text(process.name) || !text(process.user) ||
+ typeof process.kernel !== "boolean" || !text(process.state)) throw new Error("Invalid process in sample")
+ return { pid: process.pid, name: process.name, user: process.user, kernel: process.kernel,
+ state: process.state, cpu: percent(process.cpu), memoryMiB: number(process.memoryMiB) }
+ })
+ if (new Set(processes.map((process) => process.pid)).size !== processes.length) throw new Error("Duplicate process PID in sample")
+ const memory = { totalMiB: number(raw.memory.totalMiB, 0.01), usedMiB: number(raw.memory.usedMiB),
+ availableMiB: number(raw.memory.availableMiB), percent: percent(raw.memory.percent) }
+ const storage = { usedGiB: number(raw.storage.usedGiB), totalGiB: number(raw.storage.totalGiB) }
+ if (memory.totalMiB !== null && (memory.usedMiB !== null && memory.usedMiB > memory.totalMiB ||
+ memory.availableMiB !== null && memory.availableMiB > memory.totalMiB)) {
+ memory.usedMiB = null; memory.availableMiB = null; memory.percent = null
+ }
+ if (storage.totalGiB !== null && storage.usedGiB !== null && storage.usedGiB > storage.totalGiB) storage.usedGiB = null
+ const v = object(raw.vitals) ? raw.vitals : {}
+ const vitals = Object.fromEntries(["cpuTempC", "gpuTempC", "hotspotTempC", "gpuEdgeTempC", "memoryUsedBytes", "memoryTotalBytes",
+ "onboardMaxAgeMs", "maxAgeMs", "memoryMaxAgeMs"].map((key) => [key, number(v[key])]))
+ return { source: raw.source, sampledAt: raw.sampledAt, cpuPercent: percent(raw.cpuPercent), cores, memory, storage,
+ uptimeSeconds: number(raw.uptimeSeconds), processCount: integer(raw.processCount), processes, vitals }
+}
+
+const FEATURE_LABELS = new Map([
+ ["selfdrive.controls.controlsd", "Steering and speed control"],
+ ["selfdrive.modeld.modeld", "Driving model"],
+ ["system.hardware.hardwared", "Power and temperature management"],
+ ["system.loggerd.uploader", "Log uploads"],
+ ["system.manager.manager", "Process manager"],
+])
+export const processFeature = (process) => process.kernel ? "" : FEATURE_LABELS.get(process.name.replace(/^openpilot\./, "")) || ""
+const PROCESS_STATES = new Map([["R", "Running"], ["S", "Sleeping"], ["D", "Waiting"], ["T", "Stopped"],
+ ["t", "Tracing"], ["Z", "Zombie"], ["I", "Idle"]])
+export const processState = (state) => PROCESS_STATES.get(state) || state
+export const displayNumber = (value, suffix = "") => value === null || value === undefined ? "—" : `${value.toFixed(1)}${suffix}`
+
+export function vital(snapshot, field, budget, elapsedMs = 0) {
+ const v = snapshot?.vitals
+ if ((field === "memoryUsedBytes" || field === "memoryTotalBytes") && v?.memoryUsedBytes != null && v?.memoryTotalBytes != null &&
+ v.memoryUsedBytes > v.memoryTotalBytes) return null
+ return v && v[budget] > 0 && elapsedMs >= 0 && elapsedMs < v[budget] ? v[field] ?? null : null
+}
+
+export function processRows(snapshot, { query = "", scope = "comma", sort = "cpu", descending = true } = {}) {
+ const q = query.trim().toLowerCase()
+ const keys = new Set(["name", "pid", "cpu", "memoryMiB", "user", "state"])
+ const key = keys.has(sort) ? sort : "cpu"
+ return (snapshot?.processes || []).filter((p) =>
+ (scope === "all" || (scope === "users" ? !p.kernel : p.user === "comma")) &&
+ (!q || `${p.name} ${processFeature(p)} ${p.pid} ${p.user} ${processState(p.state)}`.toLowerCase().includes(q))
+ ).slice().sort((a, b) => {
+ const av = a[key], bv = b[key]
+ if (av === null) return bv === null ? a.pid - b.pid : 1
+ if (bv === null) return -1
+ const cmp = typeof av === "number" ? av - bv : String(av).localeCompare(String(bv))
+ return (descending ? -cmp : cmp) || a.pid - b.pid
+ })
+}
diff --git a/openpilot/starpilot/galaxy/web/js/system-monitor.js b/openpilot/starpilot/galaxy/web/js/system-monitor.js
new file mode 100644
index 0000000000..25af4d96b8
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/system-monitor.js
@@ -0,0 +1,60 @@
+import { displayNumber, processFeature, processRows, processState, vital } from "./system-monitor-data.js"
+import { MonitorFeed } from "./monitor-feed.js"
+
+export const SystemMonitor = {
+ name: "SystemMonitor",
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ data: () => ({ snapshot: null, status: "loading", error: "", query: "", scope: "comma", sort: "cpu", descending: true }),
+ mounted() {
+ this.feed = new MonitorFeed({ mode: this.mode, publish: (state) => Object.assign(this, state), unauthorized: this.unauthorized })
+ this.feed.start()
+ },
+ beforeUnmount() { this.feed?.stop() },
+ computed: {
+ rows() { return processRows(this.snapshot, this) },
+ captured() { return this.snapshot ? new Date(this.snapshot.sampledAt * 1000).toLocaleString() : "—" },
+ uptime() {
+ const s = this.snapshot?.uptimeSeconds
+ return s === null || s === undefined ? "—" : `${Math.floor(s / 3600)}h ${Math.floor(s / 60) % 60}m`
+ },
+ vramUsed() { return vital(this.snapshot, "memoryUsedBytes", "memoryMaxAgeMs") },
+ vramTotal() { return vital(this.snapshot, "memoryTotalBytes", "memoryMaxAgeMs") },
+ },
+ methods: {
+ number: displayNumber,
+ feature: processFeature,
+ state: processState,
+ sensor(field, budget) { return vital(this.snapshot, field, budget) },
+ sortBy(key) { if (this.sort === key) this.descending = !this.descending; else { this.sort = key; this.descending = ["cpu", "memoryMiB"].includes(key) } },
+ arrow(key) { return this.sort === key ? (this.descending ? " ↓" : " ↑") : "" },
+ ariaSort(key) { return this.sort !== key ? "none" : this.descending ? "descending" : "ascending" },
+ },
+ template: `
+
+
+
Illustrative values only. No device was read.
+
Read-only system activity. Updates every few seconds.
+
{{ error }}
+
Loading system activity…
+
+
+
CPU {{ number(snapshot.cpuPercent, '%') }} {{ snapshot.cores.length }} cores · overall usage
+
Memory {{ number(snapshot.memory.percent, '%') }} {{ snapshot.memory.usedMiB == null ? '—' : number(snapshot.memory.usedMiB / 1024) }} / {{ snapshot.memory.totalMiB == null ? '—' : number(snapshot.memory.totalMiB / 1024) }} GiB
+
Processes {{ snapshot.processCount ?? '—' }} Uptime {{ uptime }}
+
Storage {{ number(snapshot.storage.usedGiB) }} GiB {{ number(snapshot.storage.totalGiB) }} GiB total
+
Onboard CPU temperature {{ number(sensor('cpuTempC', 'onboardMaxAgeMs'), ' °C') }}
+
Onboard GPU temperature {{ number(sensor('gpuTempC', 'onboardMaxAgeMs'), ' °C') }}
+
eGPU hotspot temperature {{ number(sensor('hotspotTempC', 'maxAgeMs'), ' °C') }}
+
eGPU temperature {{ number(sensor('gpuEdgeTempC', 'maxAgeMs'), ' °C') }}
+
eGPU VRAM {{ vramUsed == null ? '—' : number(vramUsed / 1073741824) + ' GiB' }} {{ number(vramTotal / 1073741824) }} GiB total
+
CPU cores {{ core.name.toUpperCase() }} {{ number(core.percent, '%') }} Comma processes Apps and services All processes
+ {{ rows.length }} processes shown. {{ snapshot.cpuPercent == null ? 'CPU sample unavailable.' : '' }}
+
+ {{ column[1] }}{{ arrow(column[0]) }} {{ process.name }} ({{ feature(process) }}) {{ process.pid }} {{ number(process.cpu, '%') }} {{ number(process.memoryMiB) }} MiB {{ process.user }} {{ state(process.state) }} No matching processes.
+
+
+
+
+
+
Searching saved settings…
+
+ {{ hit.label }} {{ hit.section }} · {{ hit.title }}
+
+
Some settings could not be searched. Try again.
+
No matching saved settings.
+
+
+
Tools
+
+
+ {{ tool.name }}
+ {{ tool.description }}
+ {{ tool.availability === 'partial-preview' ? 'Sample available' : 'Connect to your device to use this tool' }}
+
+
+
+
+ Local saved settings are unavailable in preview.
+
+ Loading saved settings…
+ Saved settings are unavailable.
+ {{ state.error }}
+ Refresh
+
+
{{ state.data.subtitle }} Turn the vehicle off to change these settings.
+
Refresh
+
+
+ Camera Window Regions
+ The display is mirrored: vehicle left is camera right; vehicle right is camera left. Trace visible side glass, leaving pillars and interior out.
+ Camera frame size
+ Saved {{ state.width }} × {{ state.height }} — choose a supported size
+ {{ w }} × {{ h }}
+ Optional local still (PNG/JPEG, exact selected size, under 8 MB)
+
+ Remove local still
+ {{ state.imageName ? 'Local still: ' + state.imageName : 'Empty dimension-matched canvas; no camera image is requested.' }}
+
+ {{ displaySide(side) }}
+ {{ state[side].length }} vertices
+ Undo last
+ Clear side
+
{{ state.localNote }}
+ Review saved regions…
+ A saved choice alone does not activate monitoring. The selected image never leaves this browser.
+
+
+
Confirm Saved Preference {{ state.pending.question }}
+
Cancel
+ Save
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/js/vehicle-controls.js b/openpilot/starpilot/galaxy/web/js/vehicle-controls.js
new file mode 100644
index 0000000000..b60e29f626
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/js/vehicle-controls.js
@@ -0,0 +1,202 @@
+import { reactive } from "../vendor/vue/vue.esm-browser.js"
+import { SettingsPage } from "./settings.js"
+
+export function validVehiclePage(data) {
+ return data?.version === 1 && typeof data.parked === "boolean" && typeof data.readable === "boolean" &&
+ typeof data.valid === "boolean" && (data.selected === null || typeof data.selected === "string") &&
+ typeof data.selectedLabel === "string" && data.selectedLabel.length <= 120 &&
+ (data.reported === null || (typeof data.reported?.platform === "string" && typeof data.reported?.label === "string" &&
+ typeof data.reported?.make === "string")) &&
+ (data.view === null || typeof data.view === "string" && data.view.length <= 64) &&
+ Array.isArray(data.choices) && data.choices.length <= 1000 && data.choices.every((item) =>
+ typeof item?.platform === "string" && item.platform.length <= 100 && item.platform !== "MOCK" &&
+ typeof item.make === "string" && item.make.length <= 100 && typeof item.label === "string" && item.label.length <= 120) &&
+ (!data.readable || data.view !== null) && (!data.valid || data.selected === null ||
+ data.choices.some((item) => item.platform === data.selected))
+}
+
+export class VehicleSelectionFeed {
+ constructor({ publish, unauthorized = () => {}, fetcher = (...args) => fetch(...args),
+ later = (fn, ms) => setTimeout(fn, ms), cancelTimer = (id) => clearTimeout(id) }) {
+ Object.assign(this, { publish, unauthorized, fetcher, later, cancelTimer })
+ this.active = false
+ this.generation = 0
+ this.request = null
+ this.timer = null
+ this.pollTimer = null
+ this.data = null
+ this.pending = null
+ this.busy = false
+ this.error = ""
+ }
+
+ emit(status, error = this.error) { this.error = error; this.publish({ status, data: this.data, pending: this.pending, busy: this.busy, error }) }
+ stop() {
+ this.active = false
+ this.generation++
+ this.request?.abort()
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.request = this.timer = this.pollTimer = null
+ this.data = this.pending = null
+ this.busy = false
+ this.emit("idle", "")
+ }
+ start() { this.stop(); this.active = true; return this.refresh() }
+
+ async run(path, body = null) {
+ if (!this.active || this.request) return null
+ if (this.pollTimer !== null) this.cancelTimer(this.pollTimer)
+ this.pollTimer = null
+ const generation = this.generation
+ const request = new AbortController()
+ this.request = request
+ this.busy = true
+ this.emit(body === null ? (this.data ? "ready" : "loading") : "saving")
+ this.timer = this.later(() => {
+ if (!this.active || this.generation !== generation || this.request !== request) return
+ this.request = null
+ this.timer = null
+ this.generation++
+ this.busy = false
+ this.data = this.pending = null
+ request.abort()
+ this.emit("unavailable", "Vehicle selection timed out. Refresh saved values before trying again.")
+ }, 8000)
+ try {
+ const response = await this.fetcher(path, { credentials: "same-origin", cache: "no-store", signal: request.signal,
+ ...(body === null ? {} : { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }) })
+ if (!this.active || this.generation !== generation || this.request !== request || request.signal.aborted) return null
+ const result = await response.json()
+ if (!this.active || this.generation !== generation || this.request !== request || request.signal.aborted) return null
+ if (response.status === 401 || response.status === 503 && ["setup_required", "access_unavailable"].includes(result?.code)) {
+ this.stop(); this.unauthorized(); return null
+ }
+ if (response.status === 409) {
+ this.data = this.pending = null
+ this.emit("unavailable", result?.code === "unverified" ?
+ "Save could not be confirmed. Refresh saved values before trying again." :
+ "Saved vehicle changed. Refresh before choosing again.")
+ return null
+ }
+ if (!response.ok) throw new Error("Vehicle selection is unavailable. Refresh to try again.")
+ this.error = ""
+ return result
+ } catch (error) {
+ if (this.active && this.generation === generation && this.request === request && !request.signal.aborted) {
+ this.data = this.pending = null
+ this.emit("unavailable", error?.message || "Vehicle selection is unavailable.")
+ }
+ return null
+ } finally {
+ if (this.request === request) {
+ if (this.timer !== null) this.cancelTimer(this.timer)
+ this.request = this.timer = null
+ this.busy = false
+ this.emit(this.data ? "ready" : "unavailable")
+ }
+ }
+ }
+
+ async refresh() {
+ if (!this.active || this.request) return
+ this.pending = null
+ const generation = this.generation
+ const data = await this.run("./api/vehicle-selection")
+ if (!this.active || this.generation !== generation) return
+ if (data && validVehiclePage(data)) {
+ this.data = data
+ this.emit("ready")
+ if (!data.parked && data.readable) this.pollTimer = this.later(() => {
+ this.pollTimer = null
+ this.refresh()
+ }, 1000)
+ } else if (data) {
+ this.data = null
+ this.emit("unavailable", "Vehicle selection response was invalid.")
+ }
+ }
+
+ async preview(platform) {
+ if (!this.active || this.request || this.pending || !this.data?.parked || !this.data.readable ||
+ (!this.data.valid && platform !== null) ||
+ (platform !== null && !this.data.choices.some((item) => item.platform === platform))) return
+ const result = await this.run("./api/vehicle-selection/preview", { view: this.data.view, platform })
+ if (result && typeof result.intent === "string" && result.intent.length <= 64 && typeof result.question === "string") {
+ this.pending = result
+ this.emit("ready")
+ }
+ }
+
+ cancel() { this.pending = null; if (this.active) this.emit(this.data ? "ready" : "unavailable") }
+
+ async confirm() {
+ if (!this.active || this.request || !this.pending?.intent) return
+ const intent = this.pending.intent
+ this.pending = null
+ this.data = null
+ const result = await this.run("./api/vehicle-selection/confirm", { intent, confirmed: true })
+ if (!this.active) return
+ if (result?.saved !== true) {
+ if (!this.error) this.emit("unavailable", "Save could not be confirmed. Refresh saved values before trying again.")
+ return
+ }
+ await this.refresh()
+ }
+}
+
+export const VehicleControlsPage = {
+ components: { SettingsPage },
+ props: { mode: { type: String, required: true }, unauthorized: { type: Function, required: true } },
+ setup(props) {
+ const state = reactive({ status: "idle", data: null, pending: null, busy: false, error: "", query: "", make: "" })
+ const feed = new VehicleSelectionFeed({ publish: (update) => Object.assign(state, update), unauthorized: props.unauthorized })
+ return { state, feed }
+ },
+ computed: {
+ makes() { return [...new Set((this.state.data?.choices || []).map((item) => item.make))] },
+ models() {
+ const needle = this.state.query.trim().toLocaleLowerCase()
+ return (this.state.data?.choices || []).filter((item) => (!this.state.make || item.make === this.state.make) &&
+ (!needle || `${item.make} ${item.label} ${item.platform}`.toLocaleLowerCase().includes(needle)))
+ },
+ },
+ mounted() { if (this.mode === "local") this.feed.start() },
+ beforeUnmount() { this.feed.stop() },
+ methods: { choose(platform) { this.feed.preview(platform) } },
+ template: `
+
+
+ Local vehicle selection is unavailable in preview.
+
+ {{ state.error }}
+ Refresh
+ Loading vehicle selection…
+
+ Saved for next start {{ state.data.selectedLabel }}
+
Saved choice needs review. Only Auto can repair it.
+
Last identified vehicle {{ state.data.reported?.label || 'Not available' }}
+
This is a cached report, not current vehicle confirmation.
Changes require fresh parked vehicle evidence.
+ Refresh
+ Choose Auto detection
+
+ Choose a Vehicle
+
+ All makes {{ make }}
+
+
+ {{ item.label }} {{ item.make }}
+
+
+
+
Confirm Vehicle Selection {{ state.pending.question }}
+
The choice takes effect after the next start.
+
Cancel
+ Save
+ `,
+}
diff --git a/openpilot/starpilot/galaxy/web/manifest.webmanifest b/openpilot/starpilot/galaxy/web/manifest.webmanifest
new file mode 100644
index 0000000000..a2c4ef63a2
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/manifest.webmanifest
@@ -0,0 +1,30 @@
+{
+ "name": "StarPilot Galaxy",
+ "short_name": "Galaxy",
+ "id": "./",
+ "start_url": "./",
+ "scope": "./",
+ "display": "standalone",
+ "background_color": "#0e0a1a",
+ "theme_color": "#6f42a6",
+ "icons": [
+ {
+ "src": "./assets/galaxy-icon.svg",
+ "sizes": "any",
+ "type": "image/svg+xml",
+ "purpose": "any maskable"
+ },
+ {
+ "src": "./assets/galaxy-icon-192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "any maskable"
+ },
+ {
+ "src": "./assets/galaxy-icon-512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "any maskable"
+ }
+ ]
+}
diff --git a/openpilot/starpilot/galaxy/web/sentry-push-worker.js b/openpilot/starpilot/galaxy/web/sentry-push-worker.js
new file mode 100644
index 0000000000..2c1d429939
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/sentry-push-worker.js
@@ -0,0 +1,20 @@
+self.addEventListener("push", event => {
+ event.waitUntil((async () => {
+ let value
+ try { value = event.data.json() } catch { value = {} }
+ const id = typeof value?.eventId === "string" && /^[0-9a-f]{32}$/.test(value.eventId) ? value.eventId : "sentry"
+ const body = typeof value?.body === "string" ? value.body.slice(0, 256) : "Parked motion detected."
+ await self.registration.showNotification("StarPilot Sentry Mode", { body, tag: id,
+ data: { url: new URL("./#/cameras/events", self.registration.scope).href } })
+ })())
+})
+self.addEventListener("notificationclick", event => {
+ event.notification.close()
+ event.waitUntil((async () => {
+ const url = new URL("./#/cameras/events", self.registration.scope).href
+ const windows = await self.clients.matchAll({ type: "window", includeUncontrolled: true })
+ const existing = windows.find(client => client.url.startsWith(self.registration.scope))
+ if (existing) { await existing.navigate(url); return existing.focus() }
+ return self.clients.openWindow(url)
+ })())
+})
diff --git a/openpilot/starpilot/galaxy/web/vendor/.gitattributes b/openpilot/starpilot/galaxy/web/vendor/.gitattributes
new file mode 100644
index 0000000000..1b2b7bc8f8
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/vendor/.gitattributes
@@ -0,0 +1,2 @@
+# Preserve the exact upstream Vue bundle, including its existing whitespace.
+vue/vue.esm-browser.js -text whitespace=-blank-at-eol
diff --git a/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/bootstrap-icons.min.css b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/bootstrap-icons.min.css
new file mode 100644
index 0000000000..dadd6dcac4
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/bootstrap-icons.min.css
@@ -0,0 +1,5 @@
+/*!
+ * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
+ * Copyright 2019-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
+ */@font-face{font-display:block;font-family:bootstrap-icons;src:url("fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6") format("woff2"),url("fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6") format("woff")}.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bi-123::before{content:"\f67f"}.bi-alarm-fill::before{content:"\f101"}.bi-alarm::before{content:"\f102"}.bi-align-bottom::before{content:"\f103"}.bi-align-center::before{content:"\f104"}.bi-align-end::before{content:"\f105"}.bi-align-middle::before{content:"\f106"}.bi-align-start::before{content:"\f107"}.bi-align-top::before{content:"\f108"}.bi-alt::before{content:"\f109"}.bi-app-indicator::before{content:"\f10a"}.bi-app::before{content:"\f10b"}.bi-archive-fill::before{content:"\f10c"}.bi-archive::before{content:"\f10d"}.bi-arrow-90deg-down::before{content:"\f10e"}.bi-arrow-90deg-left::before{content:"\f10f"}.bi-arrow-90deg-right::before{content:"\f110"}.bi-arrow-90deg-up::before{content:"\f111"}.bi-arrow-bar-down::before{content:"\f112"}.bi-arrow-bar-left::before{content:"\f113"}.bi-arrow-bar-right::before{content:"\f114"}.bi-arrow-bar-up::before{content:"\f115"}.bi-arrow-clockwise::before{content:"\f116"}.bi-arrow-counterclockwise::before{content:"\f117"}.bi-arrow-down-circle-fill::before{content:"\f118"}.bi-arrow-down-circle::before{content:"\f119"}.bi-arrow-down-left-circle-fill::before{content:"\f11a"}.bi-arrow-down-left-circle::before{content:"\f11b"}.bi-arrow-down-left-square-fill::before{content:"\f11c"}.bi-arrow-down-left-square::before{content:"\f11d"}.bi-arrow-down-left::before{content:"\f11e"}.bi-arrow-down-right-circle-fill::before{content:"\f11f"}.bi-arrow-down-right-circle::before{content:"\f120"}.bi-arrow-down-right-square-fill::before{content:"\f121"}.bi-arrow-down-right-square::before{content:"\f122"}.bi-arrow-down-right::before{content:"\f123"}.bi-arrow-down-short::before{content:"\f124"}.bi-arrow-down-square-fill::before{content:"\f125"}.bi-arrow-down-square::before{content:"\f126"}.bi-arrow-down-up::before{content:"\f127"}.bi-arrow-down::before{content:"\f128"}.bi-arrow-left-circle-fill::before{content:"\f129"}.bi-arrow-left-circle::before{content:"\f12a"}.bi-arrow-left-right::before{content:"\f12b"}.bi-arrow-left-short::before{content:"\f12c"}.bi-arrow-left-square-fill::before{content:"\f12d"}.bi-arrow-left-square::before{content:"\f12e"}.bi-arrow-left::before{content:"\f12f"}.bi-arrow-repeat::before{content:"\f130"}.bi-arrow-return-left::before{content:"\f131"}.bi-arrow-return-right::before{content:"\f132"}.bi-arrow-right-circle-fill::before{content:"\f133"}.bi-arrow-right-circle::before{content:"\f134"}.bi-arrow-right-short::before{content:"\f135"}.bi-arrow-right-square-fill::before{content:"\f136"}.bi-arrow-right-square::before{content:"\f137"}.bi-arrow-right::before{content:"\f138"}.bi-arrow-up-circle-fill::before{content:"\f139"}.bi-arrow-up-circle::before{content:"\f13a"}.bi-arrow-up-left-circle-fill::before{content:"\f13b"}.bi-arrow-up-left-circle::before{content:"\f13c"}.bi-arrow-up-left-square-fill::before{content:"\f13d"}.bi-arrow-up-left-square::before{content:"\f13e"}.bi-arrow-up-left::before{content:"\f13f"}.bi-arrow-up-right-circle-fill::before{content:"\f140"}.bi-arrow-up-right-circle::before{content:"\f141"}.bi-arrow-up-right-square-fill::before{content:"\f142"}.bi-arrow-up-right-square::before{content:"\f143"}.bi-arrow-up-right::before{content:"\f144"}.bi-arrow-up-short::before{content:"\f145"}.bi-arrow-up-square-fill::before{content:"\f146"}.bi-arrow-up-square::before{content:"\f147"}.bi-arrow-up::before{content:"\f148"}.bi-arrows-angle-contract::before{content:"\f149"}.bi-arrows-angle-expand::before{content:"\f14a"}.bi-arrows-collapse::before{content:"\f14b"}.bi-arrows-expand::before{content:"\f14c"}.bi-arrows-fullscreen::before{content:"\f14d"}.bi-arrows-move::before{content:"\f14e"}.bi-aspect-ratio-fill::before{content:"\f14f"}.bi-aspect-ratio::before{content:"\f150"}.bi-asterisk::before{content:"\f151"}.bi-at::before{content:"\f152"}.bi-award-fill::before{content:"\f153"}.bi-award::before{content:"\f154"}.bi-back::before{content:"\f155"}.bi-backspace-fill::before{content:"\f156"}.bi-backspace-reverse-fill::before{content:"\f157"}.bi-backspace-reverse::before{content:"\f158"}.bi-backspace::before{content:"\f159"}.bi-badge-3d-fill::before{content:"\f15a"}.bi-badge-3d::before{content:"\f15b"}.bi-badge-4k-fill::before{content:"\f15c"}.bi-badge-4k::before{content:"\f15d"}.bi-badge-8k-fill::before{content:"\f15e"}.bi-badge-8k::before{content:"\f15f"}.bi-badge-ad-fill::before{content:"\f160"}.bi-badge-ad::before{content:"\f161"}.bi-badge-ar-fill::before{content:"\f162"}.bi-badge-ar::before{content:"\f163"}.bi-badge-cc-fill::before{content:"\f164"}.bi-badge-cc::before{content:"\f165"}.bi-badge-hd-fill::before{content:"\f166"}.bi-badge-hd::before{content:"\f167"}.bi-badge-tm-fill::before{content:"\f168"}.bi-badge-tm::before{content:"\f169"}.bi-badge-vo-fill::before{content:"\f16a"}.bi-badge-vo::before{content:"\f16b"}.bi-badge-vr-fill::before{content:"\f16c"}.bi-badge-vr::before{content:"\f16d"}.bi-badge-wc-fill::before{content:"\f16e"}.bi-badge-wc::before{content:"\f16f"}.bi-bag-check-fill::before{content:"\f170"}.bi-bag-check::before{content:"\f171"}.bi-bag-dash-fill::before{content:"\f172"}.bi-bag-dash::before{content:"\f173"}.bi-bag-fill::before{content:"\f174"}.bi-bag-plus-fill::before{content:"\f175"}.bi-bag-plus::before{content:"\f176"}.bi-bag-x-fill::before{content:"\f177"}.bi-bag-x::before{content:"\f178"}.bi-bag::before{content:"\f179"}.bi-bar-chart-fill::before{content:"\f17a"}.bi-bar-chart-line-fill::before{content:"\f17b"}.bi-bar-chart-line::before{content:"\f17c"}.bi-bar-chart-steps::before{content:"\f17d"}.bi-bar-chart::before{content:"\f17e"}.bi-basket-fill::before{content:"\f17f"}.bi-basket::before{content:"\f180"}.bi-basket2-fill::before{content:"\f181"}.bi-basket2::before{content:"\f182"}.bi-basket3-fill::before{content:"\f183"}.bi-basket3::before{content:"\f184"}.bi-battery-charging::before{content:"\f185"}.bi-battery-full::before{content:"\f186"}.bi-battery-half::before{content:"\f187"}.bi-battery::before{content:"\f188"}.bi-bell-fill::before{content:"\f189"}.bi-bell::before{content:"\f18a"}.bi-bezier::before{content:"\f18b"}.bi-bezier2::before{content:"\f18c"}.bi-bicycle::before{content:"\f18d"}.bi-binoculars-fill::before{content:"\f18e"}.bi-binoculars::before{content:"\f18f"}.bi-blockquote-left::before{content:"\f190"}.bi-blockquote-right::before{content:"\f191"}.bi-book-fill::before{content:"\f192"}.bi-book-half::before{content:"\f193"}.bi-book::before{content:"\f194"}.bi-bookmark-check-fill::before{content:"\f195"}.bi-bookmark-check::before{content:"\f196"}.bi-bookmark-dash-fill::before{content:"\f197"}.bi-bookmark-dash::before{content:"\f198"}.bi-bookmark-fill::before{content:"\f199"}.bi-bookmark-heart-fill::before{content:"\f19a"}.bi-bookmark-heart::before{content:"\f19b"}.bi-bookmark-plus-fill::before{content:"\f19c"}.bi-bookmark-plus::before{content:"\f19d"}.bi-bookmark-star-fill::before{content:"\f19e"}.bi-bookmark-star::before{content:"\f19f"}.bi-bookmark-x-fill::before{content:"\f1a0"}.bi-bookmark-x::before{content:"\f1a1"}.bi-bookmark::before{content:"\f1a2"}.bi-bookmarks-fill::before{content:"\f1a3"}.bi-bookmarks::before{content:"\f1a4"}.bi-bookshelf::before{content:"\f1a5"}.bi-bootstrap-fill::before{content:"\f1a6"}.bi-bootstrap-reboot::before{content:"\f1a7"}.bi-bootstrap::before{content:"\f1a8"}.bi-border-all::before{content:"\f1a9"}.bi-border-bottom::before{content:"\f1aa"}.bi-border-center::before{content:"\f1ab"}.bi-border-inner::before{content:"\f1ac"}.bi-border-left::before{content:"\f1ad"}.bi-border-middle::before{content:"\f1ae"}.bi-border-outer::before{content:"\f1af"}.bi-border-right::before{content:"\f1b0"}.bi-border-style::before{content:"\f1b1"}.bi-border-top::before{content:"\f1b2"}.bi-border-width::before{content:"\f1b3"}.bi-border::before{content:"\f1b4"}.bi-bounding-box-circles::before{content:"\f1b5"}.bi-bounding-box::before{content:"\f1b6"}.bi-box-arrow-down-left::before{content:"\f1b7"}.bi-box-arrow-down-right::before{content:"\f1b8"}.bi-box-arrow-down::before{content:"\f1b9"}.bi-box-arrow-in-down-left::before{content:"\f1ba"}.bi-box-arrow-in-down-right::before{content:"\f1bb"}.bi-box-arrow-in-down::before{content:"\f1bc"}.bi-box-arrow-in-left::before{content:"\f1bd"}.bi-box-arrow-in-right::before{content:"\f1be"}.bi-box-arrow-in-up-left::before{content:"\f1bf"}.bi-box-arrow-in-up-right::before{content:"\f1c0"}.bi-box-arrow-in-up::before{content:"\f1c1"}.bi-box-arrow-left::before{content:"\f1c2"}.bi-box-arrow-right::before{content:"\f1c3"}.bi-box-arrow-up-left::before{content:"\f1c4"}.bi-box-arrow-up-right::before{content:"\f1c5"}.bi-box-arrow-up::before{content:"\f1c6"}.bi-box-seam::before{content:"\f1c7"}.bi-box::before{content:"\f1c8"}.bi-braces::before{content:"\f1c9"}.bi-bricks::before{content:"\f1ca"}.bi-briefcase-fill::before{content:"\f1cb"}.bi-briefcase::before{content:"\f1cc"}.bi-brightness-alt-high-fill::before{content:"\f1cd"}.bi-brightness-alt-high::before{content:"\f1ce"}.bi-brightness-alt-low-fill::before{content:"\f1cf"}.bi-brightness-alt-low::before{content:"\f1d0"}.bi-brightness-high-fill::before{content:"\f1d1"}.bi-brightness-high::before{content:"\f1d2"}.bi-brightness-low-fill::before{content:"\f1d3"}.bi-brightness-low::before{content:"\f1d4"}.bi-broadcast-pin::before{content:"\f1d5"}.bi-broadcast::before{content:"\f1d6"}.bi-brush-fill::before{content:"\f1d7"}.bi-brush::before{content:"\f1d8"}.bi-bucket-fill::before{content:"\f1d9"}.bi-bucket::before{content:"\f1da"}.bi-bug-fill::before{content:"\f1db"}.bi-bug::before{content:"\f1dc"}.bi-building::before{content:"\f1dd"}.bi-bullseye::before{content:"\f1de"}.bi-calculator-fill::before{content:"\f1df"}.bi-calculator::before{content:"\f1e0"}.bi-calendar-check-fill::before{content:"\f1e1"}.bi-calendar-check::before{content:"\f1e2"}.bi-calendar-date-fill::before{content:"\f1e3"}.bi-calendar-date::before{content:"\f1e4"}.bi-calendar-day-fill::before{content:"\f1e5"}.bi-calendar-day::before{content:"\f1e6"}.bi-calendar-event-fill::before{content:"\f1e7"}.bi-calendar-event::before{content:"\f1e8"}.bi-calendar-fill::before{content:"\f1e9"}.bi-calendar-minus-fill::before{content:"\f1ea"}.bi-calendar-minus::before{content:"\f1eb"}.bi-calendar-month-fill::before{content:"\f1ec"}.bi-calendar-month::before{content:"\f1ed"}.bi-calendar-plus-fill::before{content:"\f1ee"}.bi-calendar-plus::before{content:"\f1ef"}.bi-calendar-range-fill::before{content:"\f1f0"}.bi-calendar-range::before{content:"\f1f1"}.bi-calendar-week-fill::before{content:"\f1f2"}.bi-calendar-week::before{content:"\f1f3"}.bi-calendar-x-fill::before{content:"\f1f4"}.bi-calendar-x::before{content:"\f1f5"}.bi-calendar::before{content:"\f1f6"}.bi-calendar2-check-fill::before{content:"\f1f7"}.bi-calendar2-check::before{content:"\f1f8"}.bi-calendar2-date-fill::before{content:"\f1f9"}.bi-calendar2-date::before{content:"\f1fa"}.bi-calendar2-day-fill::before{content:"\f1fb"}.bi-calendar2-day::before{content:"\f1fc"}.bi-calendar2-event-fill::before{content:"\f1fd"}.bi-calendar2-event::before{content:"\f1fe"}.bi-calendar2-fill::before{content:"\f1ff"}.bi-calendar2-minus-fill::before{content:"\f200"}.bi-calendar2-minus::before{content:"\f201"}.bi-calendar2-month-fill::before{content:"\f202"}.bi-calendar2-month::before{content:"\f203"}.bi-calendar2-plus-fill::before{content:"\f204"}.bi-calendar2-plus::before{content:"\f205"}.bi-calendar2-range-fill::before{content:"\f206"}.bi-calendar2-range::before{content:"\f207"}.bi-calendar2-week-fill::before{content:"\f208"}.bi-calendar2-week::before{content:"\f209"}.bi-calendar2-x-fill::before{content:"\f20a"}.bi-calendar2-x::before{content:"\f20b"}.bi-calendar2::before{content:"\f20c"}.bi-calendar3-event-fill::before{content:"\f20d"}.bi-calendar3-event::before{content:"\f20e"}.bi-calendar3-fill::before{content:"\f20f"}.bi-calendar3-range-fill::before{content:"\f210"}.bi-calendar3-range::before{content:"\f211"}.bi-calendar3-week-fill::before{content:"\f212"}.bi-calendar3-week::before{content:"\f213"}.bi-calendar3::before{content:"\f214"}.bi-calendar4-event::before{content:"\f215"}.bi-calendar4-range::before{content:"\f216"}.bi-calendar4-week::before{content:"\f217"}.bi-calendar4::before{content:"\f218"}.bi-camera-fill::before{content:"\f219"}.bi-camera-reels-fill::before{content:"\f21a"}.bi-camera-reels::before{content:"\f21b"}.bi-camera-video-fill::before{content:"\f21c"}.bi-camera-video-off-fill::before{content:"\f21d"}.bi-camera-video-off::before{content:"\f21e"}.bi-camera-video::before{content:"\f21f"}.bi-camera::before{content:"\f220"}.bi-camera2::before{content:"\f221"}.bi-capslock-fill::before{content:"\f222"}.bi-capslock::before{content:"\f223"}.bi-card-checklist::before{content:"\f224"}.bi-card-heading::before{content:"\f225"}.bi-card-image::before{content:"\f226"}.bi-card-list::before{content:"\f227"}.bi-card-text::before{content:"\f228"}.bi-caret-down-fill::before{content:"\f229"}.bi-caret-down-square-fill::before{content:"\f22a"}.bi-caret-down-square::before{content:"\f22b"}.bi-caret-down::before{content:"\f22c"}.bi-caret-left-fill::before{content:"\f22d"}.bi-caret-left-square-fill::before{content:"\f22e"}.bi-caret-left-square::before{content:"\f22f"}.bi-caret-left::before{content:"\f230"}.bi-caret-right-fill::before{content:"\f231"}.bi-caret-right-square-fill::before{content:"\f232"}.bi-caret-right-square::before{content:"\f233"}.bi-caret-right::before{content:"\f234"}.bi-caret-up-fill::before{content:"\f235"}.bi-caret-up-square-fill::before{content:"\f236"}.bi-caret-up-square::before{content:"\f237"}.bi-caret-up::before{content:"\f238"}.bi-cart-check-fill::before{content:"\f239"}.bi-cart-check::before{content:"\f23a"}.bi-cart-dash-fill::before{content:"\f23b"}.bi-cart-dash::before{content:"\f23c"}.bi-cart-fill::before{content:"\f23d"}.bi-cart-plus-fill::before{content:"\f23e"}.bi-cart-plus::before{content:"\f23f"}.bi-cart-x-fill::before{content:"\f240"}.bi-cart-x::before{content:"\f241"}.bi-cart::before{content:"\f242"}.bi-cart2::before{content:"\f243"}.bi-cart3::before{content:"\f244"}.bi-cart4::before{content:"\f245"}.bi-cash-stack::before{content:"\f246"}.bi-cash::before{content:"\f247"}.bi-cast::before{content:"\f248"}.bi-chat-dots-fill::before{content:"\f249"}.bi-chat-dots::before{content:"\f24a"}.bi-chat-fill::before{content:"\f24b"}.bi-chat-left-dots-fill::before{content:"\f24c"}.bi-chat-left-dots::before{content:"\f24d"}.bi-chat-left-fill::before{content:"\f24e"}.bi-chat-left-quote-fill::before{content:"\f24f"}.bi-chat-left-quote::before{content:"\f250"}.bi-chat-left-text-fill::before{content:"\f251"}.bi-chat-left-text::before{content:"\f252"}.bi-chat-left::before{content:"\f253"}.bi-chat-quote-fill::before{content:"\f254"}.bi-chat-quote::before{content:"\f255"}.bi-chat-right-dots-fill::before{content:"\f256"}.bi-chat-right-dots::before{content:"\f257"}.bi-chat-right-fill::before{content:"\f258"}.bi-chat-right-quote-fill::before{content:"\f259"}.bi-chat-right-quote::before{content:"\f25a"}.bi-chat-right-text-fill::before{content:"\f25b"}.bi-chat-right-text::before{content:"\f25c"}.bi-chat-right::before{content:"\f25d"}.bi-chat-square-dots-fill::before{content:"\f25e"}.bi-chat-square-dots::before{content:"\f25f"}.bi-chat-square-fill::before{content:"\f260"}.bi-chat-square-quote-fill::before{content:"\f261"}.bi-chat-square-quote::before{content:"\f262"}.bi-chat-square-text-fill::before{content:"\f263"}.bi-chat-square-text::before{content:"\f264"}.bi-chat-square::before{content:"\f265"}.bi-chat-text-fill::before{content:"\f266"}.bi-chat-text::before{content:"\f267"}.bi-chat::before{content:"\f268"}.bi-check-all::before{content:"\f269"}.bi-check-circle-fill::before{content:"\f26a"}.bi-check-circle::before{content:"\f26b"}.bi-check-square-fill::before{content:"\f26c"}.bi-check-square::before{content:"\f26d"}.bi-check::before{content:"\f26e"}.bi-check2-all::before{content:"\f26f"}.bi-check2-circle::before{content:"\f270"}.bi-check2-square::before{content:"\f271"}.bi-check2::before{content:"\f272"}.bi-chevron-bar-contract::before{content:"\f273"}.bi-chevron-bar-down::before{content:"\f274"}.bi-chevron-bar-expand::before{content:"\f275"}.bi-chevron-bar-left::before{content:"\f276"}.bi-chevron-bar-right::before{content:"\f277"}.bi-chevron-bar-up::before{content:"\f278"}.bi-chevron-compact-down::before{content:"\f279"}.bi-chevron-compact-left::before{content:"\f27a"}.bi-chevron-compact-right::before{content:"\f27b"}.bi-chevron-compact-up::before{content:"\f27c"}.bi-chevron-contract::before{content:"\f27d"}.bi-chevron-double-down::before{content:"\f27e"}.bi-chevron-double-left::before{content:"\f27f"}.bi-chevron-double-right::before{content:"\f280"}.bi-chevron-double-up::before{content:"\f281"}.bi-chevron-down::before{content:"\f282"}.bi-chevron-expand::before{content:"\f283"}.bi-chevron-left::before{content:"\f284"}.bi-chevron-right::before{content:"\f285"}.bi-chevron-up::before{content:"\f286"}.bi-circle-fill::before{content:"\f287"}.bi-circle-half::before{content:"\f288"}.bi-circle-square::before{content:"\f289"}.bi-circle::before{content:"\f28a"}.bi-clipboard-check::before{content:"\f28b"}.bi-clipboard-data::before{content:"\f28c"}.bi-clipboard-minus::before{content:"\f28d"}.bi-clipboard-plus::before{content:"\f28e"}.bi-clipboard-x::before{content:"\f28f"}.bi-clipboard::before{content:"\f290"}.bi-clock-fill::before{content:"\f291"}.bi-clock-history::before{content:"\f292"}.bi-clock::before{content:"\f293"}.bi-cloud-arrow-down-fill::before{content:"\f294"}.bi-cloud-arrow-down::before{content:"\f295"}.bi-cloud-arrow-up-fill::before{content:"\f296"}.bi-cloud-arrow-up::before{content:"\f297"}.bi-cloud-check-fill::before{content:"\f298"}.bi-cloud-check::before{content:"\f299"}.bi-cloud-download-fill::before{content:"\f29a"}.bi-cloud-download::before{content:"\f29b"}.bi-cloud-drizzle-fill::before{content:"\f29c"}.bi-cloud-drizzle::before{content:"\f29d"}.bi-cloud-fill::before{content:"\f29e"}.bi-cloud-fog-fill::before{content:"\f29f"}.bi-cloud-fog::before{content:"\f2a0"}.bi-cloud-fog2-fill::before{content:"\f2a1"}.bi-cloud-fog2::before{content:"\f2a2"}.bi-cloud-hail-fill::before{content:"\f2a3"}.bi-cloud-hail::before{content:"\f2a4"}.bi-cloud-haze-fill::before{content:"\f2a6"}.bi-cloud-haze::before{content:"\f2a7"}.bi-cloud-haze2-fill::before{content:"\f2a8"}.bi-cloud-lightning-fill::before{content:"\f2a9"}.bi-cloud-lightning-rain-fill::before{content:"\f2aa"}.bi-cloud-lightning-rain::before{content:"\f2ab"}.bi-cloud-lightning::before{content:"\f2ac"}.bi-cloud-minus-fill::before{content:"\f2ad"}.bi-cloud-minus::before{content:"\f2ae"}.bi-cloud-moon-fill::before{content:"\f2af"}.bi-cloud-moon::before{content:"\f2b0"}.bi-cloud-plus-fill::before{content:"\f2b1"}.bi-cloud-plus::before{content:"\f2b2"}.bi-cloud-rain-fill::before{content:"\f2b3"}.bi-cloud-rain-heavy-fill::before{content:"\f2b4"}.bi-cloud-rain-heavy::before{content:"\f2b5"}.bi-cloud-rain::before{content:"\f2b6"}.bi-cloud-slash-fill::before{content:"\f2b7"}.bi-cloud-slash::before{content:"\f2b8"}.bi-cloud-sleet-fill::before{content:"\f2b9"}.bi-cloud-sleet::before{content:"\f2ba"}.bi-cloud-snow-fill::before{content:"\f2bb"}.bi-cloud-snow::before{content:"\f2bc"}.bi-cloud-sun-fill::before{content:"\f2bd"}.bi-cloud-sun::before{content:"\f2be"}.bi-cloud-upload-fill::before{content:"\f2bf"}.bi-cloud-upload::before{content:"\f2c0"}.bi-cloud::before{content:"\f2c1"}.bi-clouds-fill::before{content:"\f2c2"}.bi-clouds::before{content:"\f2c3"}.bi-cloudy-fill::before{content:"\f2c4"}.bi-cloudy::before{content:"\f2c5"}.bi-code-slash::before{content:"\f2c6"}.bi-code-square::before{content:"\f2c7"}.bi-code::before{content:"\f2c8"}.bi-collection-fill::before{content:"\f2c9"}.bi-collection-play-fill::before{content:"\f2ca"}.bi-collection-play::before{content:"\f2cb"}.bi-collection::before{content:"\f2cc"}.bi-columns-gap::before{content:"\f2cd"}.bi-columns::before{content:"\f2ce"}.bi-command::before{content:"\f2cf"}.bi-compass-fill::before{content:"\f2d0"}.bi-compass::before{content:"\f2d1"}.bi-cone-striped::before{content:"\f2d2"}.bi-cone::before{content:"\f2d3"}.bi-controller::before{content:"\f2d4"}.bi-cpu-fill::before{content:"\f2d5"}.bi-cpu::before{content:"\f2d6"}.bi-credit-card-2-back-fill::before{content:"\f2d7"}.bi-credit-card-2-back::before{content:"\f2d8"}.bi-credit-card-2-front-fill::before{content:"\f2d9"}.bi-credit-card-2-front::before{content:"\f2da"}.bi-credit-card-fill::before{content:"\f2db"}.bi-credit-card::before{content:"\f2dc"}.bi-crop::before{content:"\f2dd"}.bi-cup-fill::before{content:"\f2de"}.bi-cup-straw::before{content:"\f2df"}.bi-cup::before{content:"\f2e0"}.bi-cursor-fill::before{content:"\f2e1"}.bi-cursor-text::before{content:"\f2e2"}.bi-cursor::before{content:"\f2e3"}.bi-dash-circle-dotted::before{content:"\f2e4"}.bi-dash-circle-fill::before{content:"\f2e5"}.bi-dash-circle::before{content:"\f2e6"}.bi-dash-square-dotted::before{content:"\f2e7"}.bi-dash-square-fill::before{content:"\f2e8"}.bi-dash-square::before{content:"\f2e9"}.bi-dash::before{content:"\f2ea"}.bi-diagram-2-fill::before{content:"\f2eb"}.bi-diagram-2::before{content:"\f2ec"}.bi-diagram-3-fill::before{content:"\f2ed"}.bi-diagram-3::before{content:"\f2ee"}.bi-diamond-fill::before{content:"\f2ef"}.bi-diamond-half::before{content:"\f2f0"}.bi-diamond::before{content:"\f2f1"}.bi-dice-1-fill::before{content:"\f2f2"}.bi-dice-1::before{content:"\f2f3"}.bi-dice-2-fill::before{content:"\f2f4"}.bi-dice-2::before{content:"\f2f5"}.bi-dice-3-fill::before{content:"\f2f6"}.bi-dice-3::before{content:"\f2f7"}.bi-dice-4-fill::before{content:"\f2f8"}.bi-dice-4::before{content:"\f2f9"}.bi-dice-5-fill::before{content:"\f2fa"}.bi-dice-5::before{content:"\f2fb"}.bi-dice-6-fill::before{content:"\f2fc"}.bi-dice-6::before{content:"\f2fd"}.bi-disc-fill::before{content:"\f2fe"}.bi-disc::before{content:"\f2ff"}.bi-discord::before{content:"\f300"}.bi-display-fill::before{content:"\f301"}.bi-display::before{content:"\f302"}.bi-distribute-horizontal::before{content:"\f303"}.bi-distribute-vertical::before{content:"\f304"}.bi-door-closed-fill::before{content:"\f305"}.bi-door-closed::before{content:"\f306"}.bi-door-open-fill::before{content:"\f307"}.bi-door-open::before{content:"\f308"}.bi-dot::before{content:"\f309"}.bi-download::before{content:"\f30a"}.bi-droplet-fill::before{content:"\f30b"}.bi-droplet-half::before{content:"\f30c"}.bi-droplet::before{content:"\f30d"}.bi-earbuds::before{content:"\f30e"}.bi-easel-fill::before{content:"\f30f"}.bi-easel::before{content:"\f310"}.bi-egg-fill::before{content:"\f311"}.bi-egg-fried::before{content:"\f312"}.bi-egg::before{content:"\f313"}.bi-eject-fill::before{content:"\f314"}.bi-eject::before{content:"\f315"}.bi-emoji-angry-fill::before{content:"\f316"}.bi-emoji-angry::before{content:"\f317"}.bi-emoji-dizzy-fill::before{content:"\f318"}.bi-emoji-dizzy::before{content:"\f319"}.bi-emoji-expressionless-fill::before{content:"\f31a"}.bi-emoji-expressionless::before{content:"\f31b"}.bi-emoji-frown-fill::before{content:"\f31c"}.bi-emoji-frown::before{content:"\f31d"}.bi-emoji-heart-eyes-fill::before{content:"\f31e"}.bi-emoji-heart-eyes::before{content:"\f31f"}.bi-emoji-laughing-fill::before{content:"\f320"}.bi-emoji-laughing::before{content:"\f321"}.bi-emoji-neutral-fill::before{content:"\f322"}.bi-emoji-neutral::before{content:"\f323"}.bi-emoji-smile-fill::before{content:"\f324"}.bi-emoji-smile-upside-down-fill::before{content:"\f325"}.bi-emoji-smile-upside-down::before{content:"\f326"}.bi-emoji-smile::before{content:"\f327"}.bi-emoji-sunglasses-fill::before{content:"\f328"}.bi-emoji-sunglasses::before{content:"\f329"}.bi-emoji-wink-fill::before{content:"\f32a"}.bi-emoji-wink::before{content:"\f32b"}.bi-envelope-fill::before{content:"\f32c"}.bi-envelope-open-fill::before{content:"\f32d"}.bi-envelope-open::before{content:"\f32e"}.bi-envelope::before{content:"\f32f"}.bi-eraser-fill::before{content:"\f330"}.bi-eraser::before{content:"\f331"}.bi-exclamation-circle-fill::before{content:"\f332"}.bi-exclamation-circle::before{content:"\f333"}.bi-exclamation-diamond-fill::before{content:"\f334"}.bi-exclamation-diamond::before{content:"\f335"}.bi-exclamation-octagon-fill::before{content:"\f336"}.bi-exclamation-octagon::before{content:"\f337"}.bi-exclamation-square-fill::before{content:"\f338"}.bi-exclamation-square::before{content:"\f339"}.bi-exclamation-triangle-fill::before{content:"\f33a"}.bi-exclamation-triangle::before{content:"\f33b"}.bi-exclamation::before{content:"\f33c"}.bi-exclude::before{content:"\f33d"}.bi-eye-fill::before{content:"\f33e"}.bi-eye-slash-fill::before{content:"\f33f"}.bi-eye-slash::before{content:"\f340"}.bi-eye::before{content:"\f341"}.bi-eyedropper::before{content:"\f342"}.bi-eyeglasses::before{content:"\f343"}.bi-facebook::before{content:"\f344"}.bi-file-arrow-down-fill::before{content:"\f345"}.bi-file-arrow-down::before{content:"\f346"}.bi-file-arrow-up-fill::before{content:"\f347"}.bi-file-arrow-up::before{content:"\f348"}.bi-file-bar-graph-fill::before{content:"\f349"}.bi-file-bar-graph::before{content:"\f34a"}.bi-file-binary-fill::before{content:"\f34b"}.bi-file-binary::before{content:"\f34c"}.bi-file-break-fill::before{content:"\f34d"}.bi-file-break::before{content:"\f34e"}.bi-file-check-fill::before{content:"\f34f"}.bi-file-check::before{content:"\f350"}.bi-file-code-fill::before{content:"\f351"}.bi-file-code::before{content:"\f352"}.bi-file-diff-fill::before{content:"\f353"}.bi-file-diff::before{content:"\f354"}.bi-file-earmark-arrow-down-fill::before{content:"\f355"}.bi-file-earmark-arrow-down::before{content:"\f356"}.bi-file-earmark-arrow-up-fill::before{content:"\f357"}.bi-file-earmark-arrow-up::before{content:"\f358"}.bi-file-earmark-bar-graph-fill::before{content:"\f359"}.bi-file-earmark-bar-graph::before{content:"\f35a"}.bi-file-earmark-binary-fill::before{content:"\f35b"}.bi-file-earmark-binary::before{content:"\f35c"}.bi-file-earmark-break-fill::before{content:"\f35d"}.bi-file-earmark-break::before{content:"\f35e"}.bi-file-earmark-check-fill::before{content:"\f35f"}.bi-file-earmark-check::before{content:"\f360"}.bi-file-earmark-code-fill::before{content:"\f361"}.bi-file-earmark-code::before{content:"\f362"}.bi-file-earmark-diff-fill::before{content:"\f363"}.bi-file-earmark-diff::before{content:"\f364"}.bi-file-earmark-easel-fill::before{content:"\f365"}.bi-file-earmark-easel::before{content:"\f366"}.bi-file-earmark-excel-fill::before{content:"\f367"}.bi-file-earmark-excel::before{content:"\f368"}.bi-file-earmark-fill::before{content:"\f369"}.bi-file-earmark-font-fill::before{content:"\f36a"}.bi-file-earmark-font::before{content:"\f36b"}.bi-file-earmark-image-fill::before{content:"\f36c"}.bi-file-earmark-image::before{content:"\f36d"}.bi-file-earmark-lock-fill::before{content:"\f36e"}.bi-file-earmark-lock::before{content:"\f36f"}.bi-file-earmark-lock2-fill::before{content:"\f370"}.bi-file-earmark-lock2::before{content:"\f371"}.bi-file-earmark-medical-fill::before{content:"\f372"}.bi-file-earmark-medical::before{content:"\f373"}.bi-file-earmark-minus-fill::before{content:"\f374"}.bi-file-earmark-minus::before{content:"\f375"}.bi-file-earmark-music-fill::before{content:"\f376"}.bi-file-earmark-music::before{content:"\f377"}.bi-file-earmark-person-fill::before{content:"\f378"}.bi-file-earmark-person::before{content:"\f379"}.bi-file-earmark-play-fill::before{content:"\f37a"}.bi-file-earmark-play::before{content:"\f37b"}.bi-file-earmark-plus-fill::before{content:"\f37c"}.bi-file-earmark-plus::before{content:"\f37d"}.bi-file-earmark-post-fill::before{content:"\f37e"}.bi-file-earmark-post::before{content:"\f37f"}.bi-file-earmark-ppt-fill::before{content:"\f380"}.bi-file-earmark-ppt::before{content:"\f381"}.bi-file-earmark-richtext-fill::before{content:"\f382"}.bi-file-earmark-richtext::before{content:"\f383"}.bi-file-earmark-ruled-fill::before{content:"\f384"}.bi-file-earmark-ruled::before{content:"\f385"}.bi-file-earmark-slides-fill::before{content:"\f386"}.bi-file-earmark-slides::before{content:"\f387"}.bi-file-earmark-spreadsheet-fill::before{content:"\f388"}.bi-file-earmark-spreadsheet::before{content:"\f389"}.bi-file-earmark-text-fill::before{content:"\f38a"}.bi-file-earmark-text::before{content:"\f38b"}.bi-file-earmark-word-fill::before{content:"\f38c"}.bi-file-earmark-word::before{content:"\f38d"}.bi-file-earmark-x-fill::before{content:"\f38e"}.bi-file-earmark-x::before{content:"\f38f"}.bi-file-earmark-zip-fill::before{content:"\f390"}.bi-file-earmark-zip::before{content:"\f391"}.bi-file-earmark::before{content:"\f392"}.bi-file-easel-fill::before{content:"\f393"}.bi-file-easel::before{content:"\f394"}.bi-file-excel-fill::before{content:"\f395"}.bi-file-excel::before{content:"\f396"}.bi-file-fill::before{content:"\f397"}.bi-file-font-fill::before{content:"\f398"}.bi-file-font::before{content:"\f399"}.bi-file-image-fill::before{content:"\f39a"}.bi-file-image::before{content:"\f39b"}.bi-file-lock-fill::before{content:"\f39c"}.bi-file-lock::before{content:"\f39d"}.bi-file-lock2-fill::before{content:"\f39e"}.bi-file-lock2::before{content:"\f39f"}.bi-file-medical-fill::before{content:"\f3a0"}.bi-file-medical::before{content:"\f3a1"}.bi-file-minus-fill::before{content:"\f3a2"}.bi-file-minus::before{content:"\f3a3"}.bi-file-music-fill::before{content:"\f3a4"}.bi-file-music::before{content:"\f3a5"}.bi-file-person-fill::before{content:"\f3a6"}.bi-file-person::before{content:"\f3a7"}.bi-file-play-fill::before{content:"\f3a8"}.bi-file-play::before{content:"\f3a9"}.bi-file-plus-fill::before{content:"\f3aa"}.bi-file-plus::before{content:"\f3ab"}.bi-file-post-fill::before{content:"\f3ac"}.bi-file-post::before{content:"\f3ad"}.bi-file-ppt-fill::before{content:"\f3ae"}.bi-file-ppt::before{content:"\f3af"}.bi-file-richtext-fill::before{content:"\f3b0"}.bi-file-richtext::before{content:"\f3b1"}.bi-file-ruled-fill::before{content:"\f3b2"}.bi-file-ruled::before{content:"\f3b3"}.bi-file-slides-fill::before{content:"\f3b4"}.bi-file-slides::before{content:"\f3b5"}.bi-file-spreadsheet-fill::before{content:"\f3b6"}.bi-file-spreadsheet::before{content:"\f3b7"}.bi-file-text-fill::before{content:"\f3b8"}.bi-file-text::before{content:"\f3b9"}.bi-file-word-fill::before{content:"\f3ba"}.bi-file-word::before{content:"\f3bb"}.bi-file-x-fill::before{content:"\f3bc"}.bi-file-x::before{content:"\f3bd"}.bi-file-zip-fill::before{content:"\f3be"}.bi-file-zip::before{content:"\f3bf"}.bi-file::before{content:"\f3c0"}.bi-files-alt::before{content:"\f3c1"}.bi-files::before{content:"\f3c2"}.bi-film::before{content:"\f3c3"}.bi-filter-circle-fill::before{content:"\f3c4"}.bi-filter-circle::before{content:"\f3c5"}.bi-filter-left::before{content:"\f3c6"}.bi-filter-right::before{content:"\f3c7"}.bi-filter-square-fill::before{content:"\f3c8"}.bi-filter-square::before{content:"\f3c9"}.bi-filter::before{content:"\f3ca"}.bi-flag-fill::before{content:"\f3cb"}.bi-flag::before{content:"\f3cc"}.bi-flower1::before{content:"\f3cd"}.bi-flower2::before{content:"\f3ce"}.bi-flower3::before{content:"\f3cf"}.bi-folder-check::before{content:"\f3d0"}.bi-folder-fill::before{content:"\f3d1"}.bi-folder-minus::before{content:"\f3d2"}.bi-folder-plus::before{content:"\f3d3"}.bi-folder-symlink-fill::before{content:"\f3d4"}.bi-folder-symlink::before{content:"\f3d5"}.bi-folder-x::before{content:"\f3d6"}.bi-folder::before{content:"\f3d7"}.bi-folder2-open::before{content:"\f3d8"}.bi-folder2::before{content:"\f3d9"}.bi-fonts::before{content:"\f3da"}.bi-forward-fill::before{content:"\f3db"}.bi-forward::before{content:"\f3dc"}.bi-front::before{content:"\f3dd"}.bi-fullscreen-exit::before{content:"\f3de"}.bi-fullscreen::before{content:"\f3df"}.bi-funnel-fill::before{content:"\f3e0"}.bi-funnel::before{content:"\f3e1"}.bi-gear-fill::before{content:"\f3e2"}.bi-gear-wide-connected::before{content:"\f3e3"}.bi-gear-wide::before{content:"\f3e4"}.bi-gear::before{content:"\f3e5"}.bi-gem::before{content:"\f3e6"}.bi-geo-alt-fill::before{content:"\f3e7"}.bi-geo-alt::before{content:"\f3e8"}.bi-geo-fill::before{content:"\f3e9"}.bi-geo::before{content:"\f3ea"}.bi-gift-fill::before{content:"\f3eb"}.bi-gift::before{content:"\f3ec"}.bi-github::before{content:"\f3ed"}.bi-globe::before{content:"\f3ee"}.bi-globe2::before{content:"\f3ef"}.bi-google::before{content:"\f3f0"}.bi-graph-down::before{content:"\f3f1"}.bi-graph-up::before{content:"\f3f2"}.bi-grid-1x2-fill::before{content:"\f3f3"}.bi-grid-1x2::before{content:"\f3f4"}.bi-grid-3x2-gap-fill::before{content:"\f3f5"}.bi-grid-3x2-gap::before{content:"\f3f6"}.bi-grid-3x2::before{content:"\f3f7"}.bi-grid-3x3-gap-fill::before{content:"\f3f8"}.bi-grid-3x3-gap::before{content:"\f3f9"}.bi-grid-3x3::before{content:"\f3fa"}.bi-grid-fill::before{content:"\f3fb"}.bi-grid::before{content:"\f3fc"}.bi-grip-horizontal::before{content:"\f3fd"}.bi-grip-vertical::before{content:"\f3fe"}.bi-hammer::before{content:"\f3ff"}.bi-hand-index-fill::before{content:"\f400"}.bi-hand-index-thumb-fill::before{content:"\f401"}.bi-hand-index-thumb::before{content:"\f402"}.bi-hand-index::before{content:"\f403"}.bi-hand-thumbs-down-fill::before{content:"\f404"}.bi-hand-thumbs-down::before{content:"\f405"}.bi-hand-thumbs-up-fill::before{content:"\f406"}.bi-hand-thumbs-up::before{content:"\f407"}.bi-handbag-fill::before{content:"\f408"}.bi-handbag::before{content:"\f409"}.bi-hash::before{content:"\f40a"}.bi-hdd-fill::before{content:"\f40b"}.bi-hdd-network-fill::before{content:"\f40c"}.bi-hdd-network::before{content:"\f40d"}.bi-hdd-rack-fill::before{content:"\f40e"}.bi-hdd-rack::before{content:"\f40f"}.bi-hdd-stack-fill::before{content:"\f410"}.bi-hdd-stack::before{content:"\f411"}.bi-hdd::before{content:"\f412"}.bi-headphones::before{content:"\f413"}.bi-headset::before{content:"\f414"}.bi-heart-fill::before{content:"\f415"}.bi-heart-half::before{content:"\f416"}.bi-heart::before{content:"\f417"}.bi-heptagon-fill::before{content:"\f418"}.bi-heptagon-half::before{content:"\f419"}.bi-heptagon::before{content:"\f41a"}.bi-hexagon-fill::before{content:"\f41b"}.bi-hexagon-half::before{content:"\f41c"}.bi-hexagon::before{content:"\f41d"}.bi-hourglass-bottom::before{content:"\f41e"}.bi-hourglass-split::before{content:"\f41f"}.bi-hourglass-top::before{content:"\f420"}.bi-hourglass::before{content:"\f421"}.bi-house-door-fill::before{content:"\f422"}.bi-house-door::before{content:"\f423"}.bi-house-fill::before{content:"\f424"}.bi-house::before{content:"\f425"}.bi-hr::before{content:"\f426"}.bi-hurricane::before{content:"\f427"}.bi-image-alt::before{content:"\f428"}.bi-image-fill::before{content:"\f429"}.bi-image::before{content:"\f42a"}.bi-images::before{content:"\f42b"}.bi-inbox-fill::before{content:"\f42c"}.bi-inbox::before{content:"\f42d"}.bi-inboxes-fill::before{content:"\f42e"}.bi-inboxes::before{content:"\f42f"}.bi-info-circle-fill::before{content:"\f430"}.bi-info-circle::before{content:"\f431"}.bi-info-square-fill::before{content:"\f432"}.bi-info-square::before{content:"\f433"}.bi-info::before{content:"\f434"}.bi-input-cursor-text::before{content:"\f435"}.bi-input-cursor::before{content:"\f436"}.bi-instagram::before{content:"\f437"}.bi-intersect::before{content:"\f438"}.bi-journal-album::before{content:"\f439"}.bi-journal-arrow-down::before{content:"\f43a"}.bi-journal-arrow-up::before{content:"\f43b"}.bi-journal-bookmark-fill::before{content:"\f43c"}.bi-journal-bookmark::before{content:"\f43d"}.bi-journal-check::before{content:"\f43e"}.bi-journal-code::before{content:"\f43f"}.bi-journal-medical::before{content:"\f440"}.bi-journal-minus::before{content:"\f441"}.bi-journal-plus::before{content:"\f442"}.bi-journal-richtext::before{content:"\f443"}.bi-journal-text::before{content:"\f444"}.bi-journal-x::before{content:"\f445"}.bi-journal::before{content:"\f446"}.bi-journals::before{content:"\f447"}.bi-joystick::before{content:"\f448"}.bi-justify-left::before{content:"\f449"}.bi-justify-right::before{content:"\f44a"}.bi-justify::before{content:"\f44b"}.bi-kanban-fill::before{content:"\f44c"}.bi-kanban::before{content:"\f44d"}.bi-key-fill::before{content:"\f44e"}.bi-key::before{content:"\f44f"}.bi-keyboard-fill::before{content:"\f450"}.bi-keyboard::before{content:"\f451"}.bi-ladder::before{content:"\f452"}.bi-lamp-fill::before{content:"\f453"}.bi-lamp::before{content:"\f454"}.bi-laptop-fill::before{content:"\f455"}.bi-laptop::before{content:"\f456"}.bi-layer-backward::before{content:"\f457"}.bi-layer-forward::before{content:"\f458"}.bi-layers-fill::before{content:"\f459"}.bi-layers-half::before{content:"\f45a"}.bi-layers::before{content:"\f45b"}.bi-layout-sidebar-inset-reverse::before{content:"\f45c"}.bi-layout-sidebar-inset::before{content:"\f45d"}.bi-layout-sidebar-reverse::before{content:"\f45e"}.bi-layout-sidebar::before{content:"\f45f"}.bi-layout-split::before{content:"\f460"}.bi-layout-text-sidebar-reverse::before{content:"\f461"}.bi-layout-text-sidebar::before{content:"\f462"}.bi-layout-text-window-reverse::before{content:"\f463"}.bi-layout-text-window::before{content:"\f464"}.bi-layout-three-columns::before{content:"\f465"}.bi-layout-wtf::before{content:"\f466"}.bi-life-preserver::before{content:"\f467"}.bi-lightbulb-fill::before{content:"\f468"}.bi-lightbulb-off-fill::before{content:"\f469"}.bi-lightbulb-off::before{content:"\f46a"}.bi-lightbulb::before{content:"\f46b"}.bi-lightning-charge-fill::before{content:"\f46c"}.bi-lightning-charge::before{content:"\f46d"}.bi-lightning-fill::before{content:"\f46e"}.bi-lightning::before{content:"\f46f"}.bi-link-45deg::before{content:"\f470"}.bi-link::before{content:"\f471"}.bi-linkedin::before{content:"\f472"}.bi-list-check::before{content:"\f473"}.bi-list-nested::before{content:"\f474"}.bi-list-ol::before{content:"\f475"}.bi-list-stars::before{content:"\f476"}.bi-list-task::before{content:"\f477"}.bi-list-ul::before{content:"\f478"}.bi-list::before{content:"\f479"}.bi-lock-fill::before{content:"\f47a"}.bi-lock::before{content:"\f47b"}.bi-mailbox::before{content:"\f47c"}.bi-mailbox2::before{content:"\f47d"}.bi-map-fill::before{content:"\f47e"}.bi-map::before{content:"\f47f"}.bi-markdown-fill::before{content:"\f480"}.bi-markdown::before{content:"\f481"}.bi-mask::before{content:"\f482"}.bi-megaphone-fill::before{content:"\f483"}.bi-megaphone::before{content:"\f484"}.bi-menu-app-fill::before{content:"\f485"}.bi-menu-app::before{content:"\f486"}.bi-menu-button-fill::before{content:"\f487"}.bi-menu-button-wide-fill::before{content:"\f488"}.bi-menu-button-wide::before{content:"\f489"}.bi-menu-button::before{content:"\f48a"}.bi-menu-down::before{content:"\f48b"}.bi-menu-up::before{content:"\f48c"}.bi-mic-fill::before{content:"\f48d"}.bi-mic-mute-fill::before{content:"\f48e"}.bi-mic-mute::before{content:"\f48f"}.bi-mic::before{content:"\f490"}.bi-minecart-loaded::before{content:"\f491"}.bi-minecart::before{content:"\f492"}.bi-moisture::before{content:"\f493"}.bi-moon-fill::before{content:"\f494"}.bi-moon-stars-fill::before{content:"\f495"}.bi-moon-stars::before{content:"\f496"}.bi-moon::before{content:"\f497"}.bi-mouse-fill::before{content:"\f498"}.bi-mouse::before{content:"\f499"}.bi-mouse2-fill::before{content:"\f49a"}.bi-mouse2::before{content:"\f49b"}.bi-mouse3-fill::before{content:"\f49c"}.bi-mouse3::before{content:"\f49d"}.bi-music-note-beamed::before{content:"\f49e"}.bi-music-note-list::before{content:"\f49f"}.bi-music-note::before{content:"\f4a0"}.bi-music-player-fill::before{content:"\f4a1"}.bi-music-player::before{content:"\f4a2"}.bi-newspaper::before{content:"\f4a3"}.bi-node-minus-fill::before{content:"\f4a4"}.bi-node-minus::before{content:"\f4a5"}.bi-node-plus-fill::before{content:"\f4a6"}.bi-node-plus::before{content:"\f4a7"}.bi-nut-fill::before{content:"\f4a8"}.bi-nut::before{content:"\f4a9"}.bi-octagon-fill::before{content:"\f4aa"}.bi-octagon-half::before{content:"\f4ab"}.bi-octagon::before{content:"\f4ac"}.bi-option::before{content:"\f4ad"}.bi-outlet::before{content:"\f4ae"}.bi-paint-bucket::before{content:"\f4af"}.bi-palette-fill::before{content:"\f4b0"}.bi-palette::before{content:"\f4b1"}.bi-palette2::before{content:"\f4b2"}.bi-paperclip::before{content:"\f4b3"}.bi-paragraph::before{content:"\f4b4"}.bi-patch-check-fill::before{content:"\f4b5"}.bi-patch-check::before{content:"\f4b6"}.bi-patch-exclamation-fill::before{content:"\f4b7"}.bi-patch-exclamation::before{content:"\f4b8"}.bi-patch-minus-fill::before{content:"\f4b9"}.bi-patch-minus::before{content:"\f4ba"}.bi-patch-plus-fill::before{content:"\f4bb"}.bi-patch-plus::before{content:"\f4bc"}.bi-patch-question-fill::before{content:"\f4bd"}.bi-patch-question::before{content:"\f4be"}.bi-pause-btn-fill::before{content:"\f4bf"}.bi-pause-btn::before{content:"\f4c0"}.bi-pause-circle-fill::before{content:"\f4c1"}.bi-pause-circle::before{content:"\f4c2"}.bi-pause-fill::before{content:"\f4c3"}.bi-pause::before{content:"\f4c4"}.bi-peace-fill::before{content:"\f4c5"}.bi-peace::before{content:"\f4c6"}.bi-pen-fill::before{content:"\f4c7"}.bi-pen::before{content:"\f4c8"}.bi-pencil-fill::before{content:"\f4c9"}.bi-pencil-square::before{content:"\f4ca"}.bi-pencil::before{content:"\f4cb"}.bi-pentagon-fill::before{content:"\f4cc"}.bi-pentagon-half::before{content:"\f4cd"}.bi-pentagon::before{content:"\f4ce"}.bi-people-fill::before{content:"\f4cf"}.bi-people::before{content:"\f4d0"}.bi-percent::before{content:"\f4d1"}.bi-person-badge-fill::before{content:"\f4d2"}.bi-person-badge::before{content:"\f4d3"}.bi-person-bounding-box::before{content:"\f4d4"}.bi-person-check-fill::before{content:"\f4d5"}.bi-person-check::before{content:"\f4d6"}.bi-person-circle::before{content:"\f4d7"}.bi-person-dash-fill::before{content:"\f4d8"}.bi-person-dash::before{content:"\f4d9"}.bi-person-fill::before{content:"\f4da"}.bi-person-lines-fill::before{content:"\f4db"}.bi-person-plus-fill::before{content:"\f4dc"}.bi-person-plus::before{content:"\f4dd"}.bi-person-square::before{content:"\f4de"}.bi-person-x-fill::before{content:"\f4df"}.bi-person-x::before{content:"\f4e0"}.bi-person::before{content:"\f4e1"}.bi-phone-fill::before{content:"\f4e2"}.bi-phone-landscape-fill::before{content:"\f4e3"}.bi-phone-landscape::before{content:"\f4e4"}.bi-phone-vibrate-fill::before{content:"\f4e5"}.bi-phone-vibrate::before{content:"\f4e6"}.bi-phone::before{content:"\f4e7"}.bi-pie-chart-fill::before{content:"\f4e8"}.bi-pie-chart::before{content:"\f4e9"}.bi-pin-angle-fill::before{content:"\f4ea"}.bi-pin-angle::before{content:"\f4eb"}.bi-pin-fill::before{content:"\f4ec"}.bi-pin::before{content:"\f4ed"}.bi-pip-fill::before{content:"\f4ee"}.bi-pip::before{content:"\f4ef"}.bi-play-btn-fill::before{content:"\f4f0"}.bi-play-btn::before{content:"\f4f1"}.bi-play-circle-fill::before{content:"\f4f2"}.bi-play-circle::before{content:"\f4f3"}.bi-play-fill::before{content:"\f4f4"}.bi-play::before{content:"\f4f5"}.bi-plug-fill::before{content:"\f4f6"}.bi-plug::before{content:"\f4f7"}.bi-plus-circle-dotted::before{content:"\f4f8"}.bi-plus-circle-fill::before{content:"\f4f9"}.bi-plus-circle::before{content:"\f4fa"}.bi-plus-square-dotted::before{content:"\f4fb"}.bi-plus-square-fill::before{content:"\f4fc"}.bi-plus-square::before{content:"\f4fd"}.bi-plus::before{content:"\f4fe"}.bi-power::before{content:"\f4ff"}.bi-printer-fill::before{content:"\f500"}.bi-printer::before{content:"\f501"}.bi-puzzle-fill::before{content:"\f502"}.bi-puzzle::before{content:"\f503"}.bi-question-circle-fill::before{content:"\f504"}.bi-question-circle::before{content:"\f505"}.bi-question-diamond-fill::before{content:"\f506"}.bi-question-diamond::before{content:"\f507"}.bi-question-octagon-fill::before{content:"\f508"}.bi-question-octagon::before{content:"\f509"}.bi-question-square-fill::before{content:"\f50a"}.bi-question-square::before{content:"\f50b"}.bi-question::before{content:"\f50c"}.bi-rainbow::before{content:"\f50d"}.bi-receipt-cutoff::before{content:"\f50e"}.bi-receipt::before{content:"\f50f"}.bi-reception-0::before{content:"\f510"}.bi-reception-1::before{content:"\f511"}.bi-reception-2::before{content:"\f512"}.bi-reception-3::before{content:"\f513"}.bi-reception-4::before{content:"\f514"}.bi-record-btn-fill::before{content:"\f515"}.bi-record-btn::before{content:"\f516"}.bi-record-circle-fill::before{content:"\f517"}.bi-record-circle::before{content:"\f518"}.bi-record-fill::before{content:"\f519"}.bi-record::before{content:"\f51a"}.bi-record2-fill::before{content:"\f51b"}.bi-record2::before{content:"\f51c"}.bi-reply-all-fill::before{content:"\f51d"}.bi-reply-all::before{content:"\f51e"}.bi-reply-fill::before{content:"\f51f"}.bi-reply::before{content:"\f520"}.bi-rss-fill::before{content:"\f521"}.bi-rss::before{content:"\f522"}.bi-rulers::before{content:"\f523"}.bi-save-fill::before{content:"\f524"}.bi-save::before{content:"\f525"}.bi-save2-fill::before{content:"\f526"}.bi-save2::before{content:"\f527"}.bi-scissors::before{content:"\f528"}.bi-screwdriver::before{content:"\f529"}.bi-search::before{content:"\f52a"}.bi-segmented-nav::before{content:"\f52b"}.bi-server::before{content:"\f52c"}.bi-share-fill::before{content:"\f52d"}.bi-share::before{content:"\f52e"}.bi-shield-check::before{content:"\f52f"}.bi-shield-exclamation::before{content:"\f530"}.bi-shield-fill-check::before{content:"\f531"}.bi-shield-fill-exclamation::before{content:"\f532"}.bi-shield-fill-minus::before{content:"\f533"}.bi-shield-fill-plus::before{content:"\f534"}.bi-shield-fill-x::before{content:"\f535"}.bi-shield-fill::before{content:"\f536"}.bi-shield-lock-fill::before{content:"\f537"}.bi-shield-lock::before{content:"\f538"}.bi-shield-minus::before{content:"\f539"}.bi-shield-plus::before{content:"\f53a"}.bi-shield-shaded::before{content:"\f53b"}.bi-shield-slash-fill::before{content:"\f53c"}.bi-shield-slash::before{content:"\f53d"}.bi-shield-x::before{content:"\f53e"}.bi-shield::before{content:"\f53f"}.bi-shift-fill::before{content:"\f540"}.bi-shift::before{content:"\f541"}.bi-shop-window::before{content:"\f542"}.bi-shop::before{content:"\f543"}.bi-shuffle::before{content:"\f544"}.bi-signpost-2-fill::before{content:"\f545"}.bi-signpost-2::before{content:"\f546"}.bi-signpost-fill::before{content:"\f547"}.bi-signpost-split-fill::before{content:"\f548"}.bi-signpost-split::before{content:"\f549"}.bi-signpost::before{content:"\f54a"}.bi-sim-fill::before{content:"\f54b"}.bi-sim::before{content:"\f54c"}.bi-skip-backward-btn-fill::before{content:"\f54d"}.bi-skip-backward-btn::before{content:"\f54e"}.bi-skip-backward-circle-fill::before{content:"\f54f"}.bi-skip-backward-circle::before{content:"\f550"}.bi-skip-backward-fill::before{content:"\f551"}.bi-skip-backward::before{content:"\f552"}.bi-skip-end-btn-fill::before{content:"\f553"}.bi-skip-end-btn::before{content:"\f554"}.bi-skip-end-circle-fill::before{content:"\f555"}.bi-skip-end-circle::before{content:"\f556"}.bi-skip-end-fill::before{content:"\f557"}.bi-skip-end::before{content:"\f558"}.bi-skip-forward-btn-fill::before{content:"\f559"}.bi-skip-forward-btn::before{content:"\f55a"}.bi-skip-forward-circle-fill::before{content:"\f55b"}.bi-skip-forward-circle::before{content:"\f55c"}.bi-skip-forward-fill::before{content:"\f55d"}.bi-skip-forward::before{content:"\f55e"}.bi-skip-start-btn-fill::before{content:"\f55f"}.bi-skip-start-btn::before{content:"\f560"}.bi-skip-start-circle-fill::before{content:"\f561"}.bi-skip-start-circle::before{content:"\f562"}.bi-skip-start-fill::before{content:"\f563"}.bi-skip-start::before{content:"\f564"}.bi-slack::before{content:"\f565"}.bi-slash-circle-fill::before{content:"\f566"}.bi-slash-circle::before{content:"\f567"}.bi-slash-square-fill::before{content:"\f568"}.bi-slash-square::before{content:"\f569"}.bi-slash::before{content:"\f56a"}.bi-sliders::before{content:"\f56b"}.bi-smartwatch::before{content:"\f56c"}.bi-snow::before{content:"\f56d"}.bi-snow2::before{content:"\f56e"}.bi-snow3::before{content:"\f56f"}.bi-sort-alpha-down-alt::before{content:"\f570"}.bi-sort-alpha-down::before{content:"\f571"}.bi-sort-alpha-up-alt::before{content:"\f572"}.bi-sort-alpha-up::before{content:"\f573"}.bi-sort-down-alt::before{content:"\f574"}.bi-sort-down::before{content:"\f575"}.bi-sort-numeric-down-alt::before{content:"\f576"}.bi-sort-numeric-down::before{content:"\f577"}.bi-sort-numeric-up-alt::before{content:"\f578"}.bi-sort-numeric-up::before{content:"\f579"}.bi-sort-up-alt::before{content:"\f57a"}.bi-sort-up::before{content:"\f57b"}.bi-soundwave::before{content:"\f57c"}.bi-speaker-fill::before{content:"\f57d"}.bi-speaker::before{content:"\f57e"}.bi-speedometer::before{content:"\f57f"}.bi-speedometer2::before{content:"\f580"}.bi-spellcheck::before{content:"\f581"}.bi-square-fill::before{content:"\f582"}.bi-square-half::before{content:"\f583"}.bi-square::before{content:"\f584"}.bi-stack::before{content:"\f585"}.bi-star-fill::before{content:"\f586"}.bi-star-half::before{content:"\f587"}.bi-star::before{content:"\f588"}.bi-stars::before{content:"\f589"}.bi-stickies-fill::before{content:"\f58a"}.bi-stickies::before{content:"\f58b"}.bi-sticky-fill::before{content:"\f58c"}.bi-sticky::before{content:"\f58d"}.bi-stop-btn-fill::before{content:"\f58e"}.bi-stop-btn::before{content:"\f58f"}.bi-stop-circle-fill::before{content:"\f590"}.bi-stop-circle::before{content:"\f591"}.bi-stop-fill::before{content:"\f592"}.bi-stop::before{content:"\f593"}.bi-stoplights-fill::before{content:"\f594"}.bi-stoplights::before{content:"\f595"}.bi-stopwatch-fill::before{content:"\f596"}.bi-stopwatch::before{content:"\f597"}.bi-subtract::before{content:"\f598"}.bi-suit-club-fill::before{content:"\f599"}.bi-suit-club::before{content:"\f59a"}.bi-suit-diamond-fill::before{content:"\f59b"}.bi-suit-diamond::before{content:"\f59c"}.bi-suit-heart-fill::before{content:"\f59d"}.bi-suit-heart::before{content:"\f59e"}.bi-suit-spade-fill::before{content:"\f59f"}.bi-suit-spade::before{content:"\f5a0"}.bi-sun-fill::before{content:"\f5a1"}.bi-sun::before{content:"\f5a2"}.bi-sunglasses::before{content:"\f5a3"}.bi-sunrise-fill::before{content:"\f5a4"}.bi-sunrise::before{content:"\f5a5"}.bi-sunset-fill::before{content:"\f5a6"}.bi-sunset::before{content:"\f5a7"}.bi-symmetry-horizontal::before{content:"\f5a8"}.bi-symmetry-vertical::before{content:"\f5a9"}.bi-table::before{content:"\f5aa"}.bi-tablet-fill::before{content:"\f5ab"}.bi-tablet-landscape-fill::before{content:"\f5ac"}.bi-tablet-landscape::before{content:"\f5ad"}.bi-tablet::before{content:"\f5ae"}.bi-tag-fill::before{content:"\f5af"}.bi-tag::before{content:"\f5b0"}.bi-tags-fill::before{content:"\f5b1"}.bi-tags::before{content:"\f5b2"}.bi-telegram::before{content:"\f5b3"}.bi-telephone-fill::before{content:"\f5b4"}.bi-telephone-forward-fill::before{content:"\f5b5"}.bi-telephone-forward::before{content:"\f5b6"}.bi-telephone-inbound-fill::before{content:"\f5b7"}.bi-telephone-inbound::before{content:"\f5b8"}.bi-telephone-minus-fill::before{content:"\f5b9"}.bi-telephone-minus::before{content:"\f5ba"}.bi-telephone-outbound-fill::before{content:"\f5bb"}.bi-telephone-outbound::before{content:"\f5bc"}.bi-telephone-plus-fill::before{content:"\f5bd"}.bi-telephone-plus::before{content:"\f5be"}.bi-telephone-x-fill::before{content:"\f5bf"}.bi-telephone-x::before{content:"\f5c0"}.bi-telephone::before{content:"\f5c1"}.bi-terminal-fill::before{content:"\f5c2"}.bi-terminal::before{content:"\f5c3"}.bi-text-center::before{content:"\f5c4"}.bi-text-indent-left::before{content:"\f5c5"}.bi-text-indent-right::before{content:"\f5c6"}.bi-text-left::before{content:"\f5c7"}.bi-text-paragraph::before{content:"\f5c8"}.bi-text-right::before{content:"\f5c9"}.bi-textarea-resize::before{content:"\f5ca"}.bi-textarea-t::before{content:"\f5cb"}.bi-textarea::before{content:"\f5cc"}.bi-thermometer-half::before{content:"\f5cd"}.bi-thermometer-high::before{content:"\f5ce"}.bi-thermometer-low::before{content:"\f5cf"}.bi-thermometer-snow::before{content:"\f5d0"}.bi-thermometer-sun::before{content:"\f5d1"}.bi-thermometer::before{content:"\f5d2"}.bi-three-dots-vertical::before{content:"\f5d3"}.bi-three-dots::before{content:"\f5d4"}.bi-toggle-off::before{content:"\f5d5"}.bi-toggle-on::before{content:"\f5d6"}.bi-toggle2-off::before{content:"\f5d7"}.bi-toggle2-on::before{content:"\f5d8"}.bi-toggles::before{content:"\f5d9"}.bi-toggles2::before{content:"\f5da"}.bi-tools::before{content:"\f5db"}.bi-tornado::before{content:"\f5dc"}.bi-trash-fill::before{content:"\f5dd"}.bi-trash::before{content:"\f5de"}.bi-trash2-fill::before{content:"\f5df"}.bi-trash2::before{content:"\f5e0"}.bi-tree-fill::before{content:"\f5e1"}.bi-tree::before{content:"\f5e2"}.bi-triangle-fill::before{content:"\f5e3"}.bi-triangle-half::before{content:"\f5e4"}.bi-triangle::before{content:"\f5e5"}.bi-trophy-fill::before{content:"\f5e6"}.bi-trophy::before{content:"\f5e7"}.bi-tropical-storm::before{content:"\f5e8"}.bi-truck-flatbed::before{content:"\f5e9"}.bi-truck::before{content:"\f5ea"}.bi-tsunami::before{content:"\f5eb"}.bi-tv-fill::before{content:"\f5ec"}.bi-tv::before{content:"\f5ed"}.bi-twitch::before{content:"\f5ee"}.bi-twitter::before{content:"\f5ef"}.bi-type-bold::before{content:"\f5f0"}.bi-type-h1::before{content:"\f5f1"}.bi-type-h2::before{content:"\f5f2"}.bi-type-h3::before{content:"\f5f3"}.bi-type-italic::before{content:"\f5f4"}.bi-type-strikethrough::before{content:"\f5f5"}.bi-type-underline::before{content:"\f5f6"}.bi-type::before{content:"\f5f7"}.bi-ui-checks-grid::before{content:"\f5f8"}.bi-ui-checks::before{content:"\f5f9"}.bi-ui-radios-grid::before{content:"\f5fa"}.bi-ui-radios::before{content:"\f5fb"}.bi-umbrella-fill::before{content:"\f5fc"}.bi-umbrella::before{content:"\f5fd"}.bi-union::before{content:"\f5fe"}.bi-unlock-fill::before{content:"\f5ff"}.bi-unlock::before{content:"\f600"}.bi-upc-scan::before{content:"\f601"}.bi-upc::before{content:"\f602"}.bi-upload::before{content:"\f603"}.bi-vector-pen::before{content:"\f604"}.bi-view-list::before{content:"\f605"}.bi-view-stacked::before{content:"\f606"}.bi-vinyl-fill::before{content:"\f607"}.bi-vinyl::before{content:"\f608"}.bi-voicemail::before{content:"\f609"}.bi-volume-down-fill::before{content:"\f60a"}.bi-volume-down::before{content:"\f60b"}.bi-volume-mute-fill::before{content:"\f60c"}.bi-volume-mute::before{content:"\f60d"}.bi-volume-off-fill::before{content:"\f60e"}.bi-volume-off::before{content:"\f60f"}.bi-volume-up-fill::before{content:"\f610"}.bi-volume-up::before{content:"\f611"}.bi-vr::before{content:"\f612"}.bi-wallet-fill::before{content:"\f613"}.bi-wallet::before{content:"\f614"}.bi-wallet2::before{content:"\f615"}.bi-watch::before{content:"\f616"}.bi-water::before{content:"\f617"}.bi-whatsapp::before{content:"\f618"}.bi-wifi-1::before{content:"\f619"}.bi-wifi-2::before{content:"\f61a"}.bi-wifi-off::before{content:"\f61b"}.bi-wifi::before{content:"\f61c"}.bi-wind::before{content:"\f61d"}.bi-window-dock::before{content:"\f61e"}.bi-window-sidebar::before{content:"\f61f"}.bi-window::before{content:"\f620"}.bi-wrench::before{content:"\f621"}.bi-x-circle-fill::before{content:"\f622"}.bi-x-circle::before{content:"\f623"}.bi-x-diamond-fill::before{content:"\f624"}.bi-x-diamond::before{content:"\f625"}.bi-x-octagon-fill::before{content:"\f626"}.bi-x-octagon::before{content:"\f627"}.bi-x-square-fill::before{content:"\f628"}.bi-x-square::before{content:"\f629"}.bi-x::before{content:"\f62a"}.bi-youtube::before{content:"\f62b"}.bi-zoom-in::before{content:"\f62c"}.bi-zoom-out::before{content:"\f62d"}.bi-bank::before{content:"\f62e"}.bi-bank2::before{content:"\f62f"}.bi-bell-slash-fill::before{content:"\f630"}.bi-bell-slash::before{content:"\f631"}.bi-cash-coin::before{content:"\f632"}.bi-check-lg::before{content:"\f633"}.bi-coin::before{content:"\f634"}.bi-currency-bitcoin::before{content:"\f635"}.bi-currency-dollar::before{content:"\f636"}.bi-currency-euro::before{content:"\f637"}.bi-currency-exchange::before{content:"\f638"}.bi-currency-pound::before{content:"\f639"}.bi-currency-yen::before{content:"\f63a"}.bi-dash-lg::before{content:"\f63b"}.bi-exclamation-lg::before{content:"\f63c"}.bi-file-earmark-pdf-fill::before{content:"\f63d"}.bi-file-earmark-pdf::before{content:"\f63e"}.bi-file-pdf-fill::before{content:"\f63f"}.bi-file-pdf::before{content:"\f640"}.bi-gender-ambiguous::before{content:"\f641"}.bi-gender-female::before{content:"\f642"}.bi-gender-male::before{content:"\f643"}.bi-gender-trans::before{content:"\f644"}.bi-headset-vr::before{content:"\f645"}.bi-info-lg::before{content:"\f646"}.bi-mastodon::before{content:"\f647"}.bi-messenger::before{content:"\f648"}.bi-piggy-bank-fill::before{content:"\f649"}.bi-piggy-bank::before{content:"\f64a"}.bi-pin-map-fill::before{content:"\f64b"}.bi-pin-map::before{content:"\f64c"}.bi-plus-lg::before{content:"\f64d"}.bi-question-lg::before{content:"\f64e"}.bi-recycle::before{content:"\f64f"}.bi-reddit::before{content:"\f650"}.bi-safe-fill::before{content:"\f651"}.bi-safe2-fill::before{content:"\f652"}.bi-safe2::before{content:"\f653"}.bi-sd-card-fill::before{content:"\f654"}.bi-sd-card::before{content:"\f655"}.bi-skype::before{content:"\f656"}.bi-slash-lg::before{content:"\f657"}.bi-translate::before{content:"\f658"}.bi-x-lg::before{content:"\f659"}.bi-safe::before{content:"\f65a"}.bi-apple::before{content:"\f65b"}.bi-microsoft::before{content:"\f65d"}.bi-windows::before{content:"\f65e"}.bi-behance::before{content:"\f65c"}.bi-dribbble::before{content:"\f65f"}.bi-line::before{content:"\f660"}.bi-medium::before{content:"\f661"}.bi-paypal::before{content:"\f662"}.bi-pinterest::before{content:"\f663"}.bi-signal::before{content:"\f664"}.bi-snapchat::before{content:"\f665"}.bi-spotify::before{content:"\f666"}.bi-stack-overflow::before{content:"\f667"}.bi-strava::before{content:"\f668"}.bi-wordpress::before{content:"\f669"}.bi-vimeo::before{content:"\f66a"}.bi-activity::before{content:"\f66b"}.bi-easel2-fill::before{content:"\f66c"}.bi-easel2::before{content:"\f66d"}.bi-easel3-fill::before{content:"\f66e"}.bi-easel3::before{content:"\f66f"}.bi-fan::before{content:"\f670"}.bi-fingerprint::before{content:"\f671"}.bi-graph-down-arrow::before{content:"\f672"}.bi-graph-up-arrow::before{content:"\f673"}.bi-hypnotize::before{content:"\f674"}.bi-magic::before{content:"\f675"}.bi-person-rolodex::before{content:"\f676"}.bi-person-video::before{content:"\f677"}.bi-person-video2::before{content:"\f678"}.bi-person-video3::before{content:"\f679"}.bi-person-workspace::before{content:"\f67a"}.bi-radioactive::before{content:"\f67b"}.bi-webcam-fill::before{content:"\f67c"}.bi-webcam::before{content:"\f67d"}.bi-yin-yang::before{content:"\f67e"}.bi-bandaid-fill::before{content:"\f680"}.bi-bandaid::before{content:"\f681"}.bi-bluetooth::before{content:"\f682"}.bi-body-text::before{content:"\f683"}.bi-boombox::before{content:"\f684"}.bi-boxes::before{content:"\f685"}.bi-dpad-fill::before{content:"\f686"}.bi-dpad::before{content:"\f687"}.bi-ear-fill::before{content:"\f688"}.bi-ear::before{content:"\f689"}.bi-envelope-check-fill::before{content:"\f68b"}.bi-envelope-check::before{content:"\f68c"}.bi-envelope-dash-fill::before{content:"\f68e"}.bi-envelope-dash::before{content:"\f68f"}.bi-envelope-exclamation-fill::before{content:"\f691"}.bi-envelope-exclamation::before{content:"\f692"}.bi-envelope-plus-fill::before{content:"\f693"}.bi-envelope-plus::before{content:"\f694"}.bi-envelope-slash-fill::before{content:"\f696"}.bi-envelope-slash::before{content:"\f697"}.bi-envelope-x-fill::before{content:"\f699"}.bi-envelope-x::before{content:"\f69a"}.bi-explicit-fill::before{content:"\f69b"}.bi-explicit::before{content:"\f69c"}.bi-git::before{content:"\f69d"}.bi-infinity::before{content:"\f69e"}.bi-list-columns-reverse::before{content:"\f69f"}.bi-list-columns::before{content:"\f6a0"}.bi-meta::before{content:"\f6a1"}.bi-nintendo-switch::before{content:"\f6a4"}.bi-pc-display-horizontal::before{content:"\f6a5"}.bi-pc-display::before{content:"\f6a6"}.bi-pc-horizontal::before{content:"\f6a7"}.bi-pc::before{content:"\f6a8"}.bi-playstation::before{content:"\f6a9"}.bi-plus-slash-minus::before{content:"\f6aa"}.bi-projector-fill::before{content:"\f6ab"}.bi-projector::before{content:"\f6ac"}.bi-qr-code-scan::before{content:"\f6ad"}.bi-qr-code::before{content:"\f6ae"}.bi-quora::before{content:"\f6af"}.bi-quote::before{content:"\f6b0"}.bi-robot::before{content:"\f6b1"}.bi-send-check-fill::before{content:"\f6b2"}.bi-send-check::before{content:"\f6b3"}.bi-send-dash-fill::before{content:"\f6b4"}.bi-send-dash::before{content:"\f6b5"}.bi-send-exclamation-fill::before{content:"\f6b7"}.bi-send-exclamation::before{content:"\f6b8"}.bi-send-fill::before{content:"\f6b9"}.bi-send-plus-fill::before{content:"\f6ba"}.bi-send-plus::before{content:"\f6bb"}.bi-send-slash-fill::before{content:"\f6bc"}.bi-send-slash::before{content:"\f6bd"}.bi-send-x-fill::before{content:"\f6be"}.bi-send-x::before{content:"\f6bf"}.bi-send::before{content:"\f6c0"}.bi-steam::before{content:"\f6c1"}.bi-terminal-dash::before{content:"\f6c3"}.bi-terminal-plus::before{content:"\f6c4"}.bi-terminal-split::before{content:"\f6c5"}.bi-ticket-detailed-fill::before{content:"\f6c6"}.bi-ticket-detailed::before{content:"\f6c7"}.bi-ticket-fill::before{content:"\f6c8"}.bi-ticket-perforated-fill::before{content:"\f6c9"}.bi-ticket-perforated::before{content:"\f6ca"}.bi-ticket::before{content:"\f6cb"}.bi-tiktok::before{content:"\f6cc"}.bi-window-dash::before{content:"\f6cd"}.bi-window-desktop::before{content:"\f6ce"}.bi-window-fullscreen::before{content:"\f6cf"}.bi-window-plus::before{content:"\f6d0"}.bi-window-split::before{content:"\f6d1"}.bi-window-stack::before{content:"\f6d2"}.bi-window-x::before{content:"\f6d3"}.bi-xbox::before{content:"\f6d4"}.bi-ethernet::before{content:"\f6d5"}.bi-hdmi-fill::before{content:"\f6d6"}.bi-hdmi::before{content:"\f6d7"}.bi-usb-c-fill::before{content:"\f6d8"}.bi-usb-c::before{content:"\f6d9"}.bi-usb-fill::before{content:"\f6da"}.bi-usb-plug-fill::before{content:"\f6db"}.bi-usb-plug::before{content:"\f6dc"}.bi-usb-symbol::before{content:"\f6dd"}.bi-usb::before{content:"\f6de"}.bi-boombox-fill::before{content:"\f6df"}.bi-displayport::before{content:"\f6e1"}.bi-gpu-card::before{content:"\f6e2"}.bi-memory::before{content:"\f6e3"}.bi-modem-fill::before{content:"\f6e4"}.bi-modem::before{content:"\f6e5"}.bi-motherboard-fill::before{content:"\f6e6"}.bi-motherboard::before{content:"\f6e7"}.bi-optical-audio-fill::before{content:"\f6e8"}.bi-optical-audio::before{content:"\f6e9"}.bi-pci-card::before{content:"\f6ea"}.bi-router-fill::before{content:"\f6eb"}.bi-router::before{content:"\f6ec"}.bi-thunderbolt-fill::before{content:"\f6ef"}.bi-thunderbolt::before{content:"\f6f0"}.bi-usb-drive-fill::before{content:"\f6f1"}.bi-usb-drive::before{content:"\f6f2"}.bi-usb-micro-fill::before{content:"\f6f3"}.bi-usb-micro::before{content:"\f6f4"}.bi-usb-mini-fill::before{content:"\f6f5"}.bi-usb-mini::before{content:"\f6f6"}.bi-cloud-haze2::before{content:"\f6f7"}.bi-device-hdd-fill::before{content:"\f6f8"}.bi-device-hdd::before{content:"\f6f9"}.bi-device-ssd-fill::before{content:"\f6fa"}.bi-device-ssd::before{content:"\f6fb"}.bi-displayport-fill::before{content:"\f6fc"}.bi-mortarboard-fill::before{content:"\f6fd"}.bi-mortarboard::before{content:"\f6fe"}.bi-terminal-x::before{content:"\f6ff"}.bi-arrow-through-heart-fill::before{content:"\f700"}.bi-arrow-through-heart::before{content:"\f701"}.bi-badge-sd-fill::before{content:"\f702"}.bi-badge-sd::before{content:"\f703"}.bi-bag-heart-fill::before{content:"\f704"}.bi-bag-heart::before{content:"\f705"}.bi-balloon-fill::before{content:"\f706"}.bi-balloon-heart-fill::before{content:"\f707"}.bi-balloon-heart::before{content:"\f708"}.bi-balloon::before{content:"\f709"}.bi-box2-fill::before{content:"\f70a"}.bi-box2-heart-fill::before{content:"\f70b"}.bi-box2-heart::before{content:"\f70c"}.bi-box2::before{content:"\f70d"}.bi-braces-asterisk::before{content:"\f70e"}.bi-calendar-heart-fill::before{content:"\f70f"}.bi-calendar-heart::before{content:"\f710"}.bi-calendar2-heart-fill::before{content:"\f711"}.bi-calendar2-heart::before{content:"\f712"}.bi-chat-heart-fill::before{content:"\f713"}.bi-chat-heart::before{content:"\f714"}.bi-chat-left-heart-fill::before{content:"\f715"}.bi-chat-left-heart::before{content:"\f716"}.bi-chat-right-heart-fill::before{content:"\f717"}.bi-chat-right-heart::before{content:"\f718"}.bi-chat-square-heart-fill::before{content:"\f719"}.bi-chat-square-heart::before{content:"\f71a"}.bi-clipboard-check-fill::before{content:"\f71b"}.bi-clipboard-data-fill::before{content:"\f71c"}.bi-clipboard-fill::before{content:"\f71d"}.bi-clipboard-heart-fill::before{content:"\f71e"}.bi-clipboard-heart::before{content:"\f71f"}.bi-clipboard-minus-fill::before{content:"\f720"}.bi-clipboard-plus-fill::before{content:"\f721"}.bi-clipboard-pulse::before{content:"\f722"}.bi-clipboard-x-fill::before{content:"\f723"}.bi-clipboard2-check-fill::before{content:"\f724"}.bi-clipboard2-check::before{content:"\f725"}.bi-clipboard2-data-fill::before{content:"\f726"}.bi-clipboard2-data::before{content:"\f727"}.bi-clipboard2-fill::before{content:"\f728"}.bi-clipboard2-heart-fill::before{content:"\f729"}.bi-clipboard2-heart::before{content:"\f72a"}.bi-clipboard2-minus-fill::before{content:"\f72b"}.bi-clipboard2-minus::before{content:"\f72c"}.bi-clipboard2-plus-fill::before{content:"\f72d"}.bi-clipboard2-plus::before{content:"\f72e"}.bi-clipboard2-pulse-fill::before{content:"\f72f"}.bi-clipboard2-pulse::before{content:"\f730"}.bi-clipboard2-x-fill::before{content:"\f731"}.bi-clipboard2-x::before{content:"\f732"}.bi-clipboard2::before{content:"\f733"}.bi-emoji-kiss-fill::before{content:"\f734"}.bi-emoji-kiss::before{content:"\f735"}.bi-envelope-heart-fill::before{content:"\f736"}.bi-envelope-heart::before{content:"\f737"}.bi-envelope-open-heart-fill::before{content:"\f738"}.bi-envelope-open-heart::before{content:"\f739"}.bi-envelope-paper-fill::before{content:"\f73a"}.bi-envelope-paper-heart-fill::before{content:"\f73b"}.bi-envelope-paper-heart::before{content:"\f73c"}.bi-envelope-paper::before{content:"\f73d"}.bi-filetype-aac::before{content:"\f73e"}.bi-filetype-ai::before{content:"\f73f"}.bi-filetype-bmp::before{content:"\f740"}.bi-filetype-cs::before{content:"\f741"}.bi-filetype-css::before{content:"\f742"}.bi-filetype-csv::before{content:"\f743"}.bi-filetype-doc::before{content:"\f744"}.bi-filetype-docx::before{content:"\f745"}.bi-filetype-exe::before{content:"\f746"}.bi-filetype-gif::before{content:"\f747"}.bi-filetype-heic::before{content:"\f748"}.bi-filetype-html::before{content:"\f749"}.bi-filetype-java::before{content:"\f74a"}.bi-filetype-jpg::before{content:"\f74b"}.bi-filetype-js::before{content:"\f74c"}.bi-filetype-jsx::before{content:"\f74d"}.bi-filetype-key::before{content:"\f74e"}.bi-filetype-m4p::before{content:"\f74f"}.bi-filetype-md::before{content:"\f750"}.bi-filetype-mdx::before{content:"\f751"}.bi-filetype-mov::before{content:"\f752"}.bi-filetype-mp3::before{content:"\f753"}.bi-filetype-mp4::before{content:"\f754"}.bi-filetype-otf::before{content:"\f755"}.bi-filetype-pdf::before{content:"\f756"}.bi-filetype-php::before{content:"\f757"}.bi-filetype-png::before{content:"\f758"}.bi-filetype-ppt::before{content:"\f75a"}.bi-filetype-psd::before{content:"\f75b"}.bi-filetype-py::before{content:"\f75c"}.bi-filetype-raw::before{content:"\f75d"}.bi-filetype-rb::before{content:"\f75e"}.bi-filetype-sass::before{content:"\f75f"}.bi-filetype-scss::before{content:"\f760"}.bi-filetype-sh::before{content:"\f761"}.bi-filetype-svg::before{content:"\f762"}.bi-filetype-tiff::before{content:"\f763"}.bi-filetype-tsx::before{content:"\f764"}.bi-filetype-ttf::before{content:"\f765"}.bi-filetype-txt::before{content:"\f766"}.bi-filetype-wav::before{content:"\f767"}.bi-filetype-woff::before{content:"\f768"}.bi-filetype-xls::before{content:"\f76a"}.bi-filetype-xml::before{content:"\f76b"}.bi-filetype-yml::before{content:"\f76c"}.bi-heart-arrow::before{content:"\f76d"}.bi-heart-pulse-fill::before{content:"\f76e"}.bi-heart-pulse::before{content:"\f76f"}.bi-heartbreak-fill::before{content:"\f770"}.bi-heartbreak::before{content:"\f771"}.bi-hearts::before{content:"\f772"}.bi-hospital-fill::before{content:"\f773"}.bi-hospital::before{content:"\f774"}.bi-house-heart-fill::before{content:"\f775"}.bi-house-heart::before{content:"\f776"}.bi-incognito::before{content:"\f777"}.bi-magnet-fill::before{content:"\f778"}.bi-magnet::before{content:"\f779"}.bi-person-heart::before{content:"\f77a"}.bi-person-hearts::before{content:"\f77b"}.bi-phone-flip::before{content:"\f77c"}.bi-plugin::before{content:"\f77d"}.bi-postage-fill::before{content:"\f77e"}.bi-postage-heart-fill::before{content:"\f77f"}.bi-postage-heart::before{content:"\f780"}.bi-postage::before{content:"\f781"}.bi-postcard-fill::before{content:"\f782"}.bi-postcard-heart-fill::before{content:"\f783"}.bi-postcard-heart::before{content:"\f784"}.bi-postcard::before{content:"\f785"}.bi-search-heart-fill::before{content:"\f786"}.bi-search-heart::before{content:"\f787"}.bi-sliders2-vertical::before{content:"\f788"}.bi-sliders2::before{content:"\f789"}.bi-trash3-fill::before{content:"\f78a"}.bi-trash3::before{content:"\f78b"}.bi-valentine::before{content:"\f78c"}.bi-valentine2::before{content:"\f78d"}.bi-wrench-adjustable-circle-fill::before{content:"\f78e"}.bi-wrench-adjustable-circle::before{content:"\f78f"}.bi-wrench-adjustable::before{content:"\f790"}.bi-filetype-json::before{content:"\f791"}.bi-filetype-pptx::before{content:"\f792"}.bi-filetype-xlsx::before{content:"\f793"}.bi-1-circle-fill::before{content:"\f796"}.bi-1-circle::before{content:"\f797"}.bi-1-square-fill::before{content:"\f798"}.bi-1-square::before{content:"\f799"}.bi-2-circle-fill::before{content:"\f79c"}.bi-2-circle::before{content:"\f79d"}.bi-2-square-fill::before{content:"\f79e"}.bi-2-square::before{content:"\f79f"}.bi-3-circle-fill::before{content:"\f7a2"}.bi-3-circle::before{content:"\f7a3"}.bi-3-square-fill::before{content:"\f7a4"}.bi-3-square::before{content:"\f7a5"}.bi-4-circle-fill::before{content:"\f7a8"}.bi-4-circle::before{content:"\f7a9"}.bi-4-square-fill::before{content:"\f7aa"}.bi-4-square::before{content:"\f7ab"}.bi-5-circle-fill::before{content:"\f7ae"}.bi-5-circle::before{content:"\f7af"}.bi-5-square-fill::before{content:"\f7b0"}.bi-5-square::before{content:"\f7b1"}.bi-6-circle-fill::before{content:"\f7b4"}.bi-6-circle::before{content:"\f7b5"}.bi-6-square-fill::before{content:"\f7b6"}.bi-6-square::before{content:"\f7b7"}.bi-7-circle-fill::before{content:"\f7ba"}.bi-7-circle::before{content:"\f7bb"}.bi-7-square-fill::before{content:"\f7bc"}.bi-7-square::before{content:"\f7bd"}.bi-8-circle-fill::before{content:"\f7c0"}.bi-8-circle::before{content:"\f7c1"}.bi-8-square-fill::before{content:"\f7c2"}.bi-8-square::before{content:"\f7c3"}.bi-9-circle-fill::before{content:"\f7c6"}.bi-9-circle::before{content:"\f7c7"}.bi-9-square-fill::before{content:"\f7c8"}.bi-9-square::before{content:"\f7c9"}.bi-airplane-engines-fill::before{content:"\f7ca"}.bi-airplane-engines::before{content:"\f7cb"}.bi-airplane-fill::before{content:"\f7cc"}.bi-airplane::before{content:"\f7cd"}.bi-alexa::before{content:"\f7ce"}.bi-alipay::before{content:"\f7cf"}.bi-android::before{content:"\f7d0"}.bi-android2::before{content:"\f7d1"}.bi-box-fill::before{content:"\f7d2"}.bi-box-seam-fill::before{content:"\f7d3"}.bi-browser-chrome::before{content:"\f7d4"}.bi-browser-edge::before{content:"\f7d5"}.bi-browser-firefox::before{content:"\f7d6"}.bi-browser-safari::before{content:"\f7d7"}.bi-c-circle-fill::before{content:"\f7da"}.bi-c-circle::before{content:"\f7db"}.bi-c-square-fill::before{content:"\f7dc"}.bi-c-square::before{content:"\f7dd"}.bi-capsule-pill::before{content:"\f7de"}.bi-capsule::before{content:"\f7df"}.bi-car-front-fill::before{content:"\f7e0"}.bi-car-front::before{content:"\f7e1"}.bi-cassette-fill::before{content:"\f7e2"}.bi-cassette::before{content:"\f7e3"}.bi-cc-circle-fill::before{content:"\f7e6"}.bi-cc-circle::before{content:"\f7e7"}.bi-cc-square-fill::before{content:"\f7e8"}.bi-cc-square::before{content:"\f7e9"}.bi-cup-hot-fill::before{content:"\f7ea"}.bi-cup-hot::before{content:"\f7eb"}.bi-currency-rupee::before{content:"\f7ec"}.bi-dropbox::before{content:"\f7ed"}.bi-escape::before{content:"\f7ee"}.bi-fast-forward-btn-fill::before{content:"\f7ef"}.bi-fast-forward-btn::before{content:"\f7f0"}.bi-fast-forward-circle-fill::before{content:"\f7f1"}.bi-fast-forward-circle::before{content:"\f7f2"}.bi-fast-forward-fill::before{content:"\f7f3"}.bi-fast-forward::before{content:"\f7f4"}.bi-filetype-sql::before{content:"\f7f5"}.bi-fire::before{content:"\f7f6"}.bi-google-play::before{content:"\f7f7"}.bi-h-circle-fill::before{content:"\f7fa"}.bi-h-circle::before{content:"\f7fb"}.bi-h-square-fill::before{content:"\f7fc"}.bi-h-square::before{content:"\f7fd"}.bi-indent::before{content:"\f7fe"}.bi-lungs-fill::before{content:"\f7ff"}.bi-lungs::before{content:"\f800"}.bi-microsoft-teams::before{content:"\f801"}.bi-p-circle-fill::before{content:"\f804"}.bi-p-circle::before{content:"\f805"}.bi-p-square-fill::before{content:"\f806"}.bi-p-square::before{content:"\f807"}.bi-pass-fill::before{content:"\f808"}.bi-pass::before{content:"\f809"}.bi-prescription::before{content:"\f80a"}.bi-prescription2::before{content:"\f80b"}.bi-r-circle-fill::before{content:"\f80e"}.bi-r-circle::before{content:"\f80f"}.bi-r-square-fill::before{content:"\f810"}.bi-r-square::before{content:"\f811"}.bi-repeat-1::before{content:"\f812"}.bi-repeat::before{content:"\f813"}.bi-rewind-btn-fill::before{content:"\f814"}.bi-rewind-btn::before{content:"\f815"}.bi-rewind-circle-fill::before{content:"\f816"}.bi-rewind-circle::before{content:"\f817"}.bi-rewind-fill::before{content:"\f818"}.bi-rewind::before{content:"\f819"}.bi-train-freight-front-fill::before{content:"\f81a"}.bi-train-freight-front::before{content:"\f81b"}.bi-train-front-fill::before{content:"\f81c"}.bi-train-front::before{content:"\f81d"}.bi-train-lightrail-front-fill::before{content:"\f81e"}.bi-train-lightrail-front::before{content:"\f81f"}.bi-truck-front-fill::before{content:"\f820"}.bi-truck-front::before{content:"\f821"}.bi-ubuntu::before{content:"\f822"}.bi-unindent::before{content:"\f823"}.bi-unity::before{content:"\f824"}.bi-universal-access-circle::before{content:"\f825"}.bi-universal-access::before{content:"\f826"}.bi-virus::before{content:"\f827"}.bi-virus2::before{content:"\f828"}.bi-wechat::before{content:"\f829"}.bi-yelp::before{content:"\f82a"}.bi-sign-stop-fill::before{content:"\f82b"}.bi-sign-stop-lights-fill::before{content:"\f82c"}.bi-sign-stop-lights::before{content:"\f82d"}.bi-sign-stop::before{content:"\f82e"}.bi-sign-turn-left-fill::before{content:"\f82f"}.bi-sign-turn-left::before{content:"\f830"}.bi-sign-turn-right-fill::before{content:"\f831"}.bi-sign-turn-right::before{content:"\f832"}.bi-sign-turn-slight-left-fill::before{content:"\f833"}.bi-sign-turn-slight-left::before{content:"\f834"}.bi-sign-turn-slight-right-fill::before{content:"\f835"}.bi-sign-turn-slight-right::before{content:"\f836"}.bi-sign-yield-fill::before{content:"\f837"}.bi-sign-yield::before{content:"\f838"}.bi-ev-station-fill::before{content:"\f839"}.bi-ev-station::before{content:"\f83a"}.bi-fuel-pump-diesel-fill::before{content:"\f83b"}.bi-fuel-pump-diesel::before{content:"\f83c"}.bi-fuel-pump-fill::before{content:"\f83d"}.bi-fuel-pump::before{content:"\f83e"}.bi-0-circle-fill::before{content:"\f83f"}.bi-0-circle::before{content:"\f840"}.bi-0-square-fill::before{content:"\f841"}.bi-0-square::before{content:"\f842"}.bi-rocket-fill::before{content:"\f843"}.bi-rocket-takeoff-fill::before{content:"\f844"}.bi-rocket-takeoff::before{content:"\f845"}.bi-rocket::before{content:"\f846"}.bi-stripe::before{content:"\f847"}.bi-subscript::before{content:"\f848"}.bi-superscript::before{content:"\f849"}.bi-trello::before{content:"\f84a"}.bi-envelope-at-fill::before{content:"\f84b"}.bi-envelope-at::before{content:"\f84c"}.bi-regex::before{content:"\f84d"}.bi-text-wrap::before{content:"\f84e"}.bi-sign-dead-end-fill::before{content:"\f84f"}.bi-sign-dead-end::before{content:"\f850"}.bi-sign-do-not-enter-fill::before{content:"\f851"}.bi-sign-do-not-enter::before{content:"\f852"}.bi-sign-intersection-fill::before{content:"\f853"}.bi-sign-intersection-side-fill::before{content:"\f854"}.bi-sign-intersection-side::before{content:"\f855"}.bi-sign-intersection-t-fill::before{content:"\f856"}.bi-sign-intersection-t::before{content:"\f857"}.bi-sign-intersection-y-fill::before{content:"\f858"}.bi-sign-intersection-y::before{content:"\f859"}.bi-sign-intersection::before{content:"\f85a"}.bi-sign-merge-left-fill::before{content:"\f85b"}.bi-sign-merge-left::before{content:"\f85c"}.bi-sign-merge-right-fill::before{content:"\f85d"}.bi-sign-merge-right::before{content:"\f85e"}.bi-sign-no-left-turn-fill::before{content:"\f85f"}.bi-sign-no-left-turn::before{content:"\f860"}.bi-sign-no-parking-fill::before{content:"\f861"}.bi-sign-no-parking::before{content:"\f862"}.bi-sign-no-right-turn-fill::before{content:"\f863"}.bi-sign-no-right-turn::before{content:"\f864"}.bi-sign-railroad-fill::before{content:"\f865"}.bi-sign-railroad::before{content:"\f866"}.bi-building-add::before{content:"\f867"}.bi-building-check::before{content:"\f868"}.bi-building-dash::before{content:"\f869"}.bi-building-down::before{content:"\f86a"}.bi-building-exclamation::before{content:"\f86b"}.bi-building-fill-add::before{content:"\f86c"}.bi-building-fill-check::before{content:"\f86d"}.bi-building-fill-dash::before{content:"\f86e"}.bi-building-fill-down::before{content:"\f86f"}.bi-building-fill-exclamation::before{content:"\f870"}.bi-building-fill-gear::before{content:"\f871"}.bi-building-fill-lock::before{content:"\f872"}.bi-building-fill-slash::before{content:"\f873"}.bi-building-fill-up::before{content:"\f874"}.bi-building-fill-x::before{content:"\f875"}.bi-building-fill::before{content:"\f876"}.bi-building-gear::before{content:"\f877"}.bi-building-lock::before{content:"\f878"}.bi-building-slash::before{content:"\f879"}.bi-building-up::before{content:"\f87a"}.bi-building-x::before{content:"\f87b"}.bi-buildings-fill::before{content:"\f87c"}.bi-buildings::before{content:"\f87d"}.bi-bus-front-fill::before{content:"\f87e"}.bi-bus-front::before{content:"\f87f"}.bi-ev-front-fill::before{content:"\f880"}.bi-ev-front::before{content:"\f881"}.bi-globe-americas::before{content:"\f882"}.bi-globe-asia-australia::before{content:"\f883"}.bi-globe-central-south-asia::before{content:"\f884"}.bi-globe-europe-africa::before{content:"\f885"}.bi-house-add-fill::before{content:"\f886"}.bi-house-add::before{content:"\f887"}.bi-house-check-fill::before{content:"\f888"}.bi-house-check::before{content:"\f889"}.bi-house-dash-fill::before{content:"\f88a"}.bi-house-dash::before{content:"\f88b"}.bi-house-down-fill::before{content:"\f88c"}.bi-house-down::before{content:"\f88d"}.bi-house-exclamation-fill::before{content:"\f88e"}.bi-house-exclamation::before{content:"\f88f"}.bi-house-gear-fill::before{content:"\f890"}.bi-house-gear::before{content:"\f891"}.bi-house-lock-fill::before{content:"\f892"}.bi-house-lock::before{content:"\f893"}.bi-house-slash-fill::before{content:"\f894"}.bi-house-slash::before{content:"\f895"}.bi-house-up-fill::before{content:"\f896"}.bi-house-up::before{content:"\f897"}.bi-house-x-fill::before{content:"\f898"}.bi-house-x::before{content:"\f899"}.bi-person-add::before{content:"\f89a"}.bi-person-down::before{content:"\f89b"}.bi-person-exclamation::before{content:"\f89c"}.bi-person-fill-add::before{content:"\f89d"}.bi-person-fill-check::before{content:"\f89e"}.bi-person-fill-dash::before{content:"\f89f"}.bi-person-fill-down::before{content:"\f8a0"}.bi-person-fill-exclamation::before{content:"\f8a1"}.bi-person-fill-gear::before{content:"\f8a2"}.bi-person-fill-lock::before{content:"\f8a3"}.bi-person-fill-slash::before{content:"\f8a4"}.bi-person-fill-up::before{content:"\f8a5"}.bi-person-fill-x::before{content:"\f8a6"}.bi-person-gear::before{content:"\f8a7"}.bi-person-lock::before{content:"\f8a8"}.bi-person-slash::before{content:"\f8a9"}.bi-person-up::before{content:"\f8aa"}.bi-scooter::before{content:"\f8ab"}.bi-taxi-front-fill::before{content:"\f8ac"}.bi-taxi-front::before{content:"\f8ad"}.bi-amd::before{content:"\f8ae"}.bi-database-add::before{content:"\f8af"}.bi-database-check::before{content:"\f8b0"}.bi-database-dash::before{content:"\f8b1"}.bi-database-down::before{content:"\f8b2"}.bi-database-exclamation::before{content:"\f8b3"}.bi-database-fill-add::before{content:"\f8b4"}.bi-database-fill-check::before{content:"\f8b5"}.bi-database-fill-dash::before{content:"\f8b6"}.bi-database-fill-down::before{content:"\f8b7"}.bi-database-fill-exclamation::before{content:"\f8b8"}.bi-database-fill-gear::before{content:"\f8b9"}.bi-database-fill-lock::before{content:"\f8ba"}.bi-database-fill-slash::before{content:"\f8bb"}.bi-database-fill-up::before{content:"\f8bc"}.bi-database-fill-x::before{content:"\f8bd"}.bi-database-fill::before{content:"\f8be"}.bi-database-gear::before{content:"\f8bf"}.bi-database-lock::before{content:"\f8c0"}.bi-database-slash::before{content:"\f8c1"}.bi-database-up::before{content:"\f8c2"}.bi-database-x::before{content:"\f8c3"}.bi-database::before{content:"\f8c4"}.bi-houses-fill::before{content:"\f8c5"}.bi-houses::before{content:"\f8c6"}.bi-nvidia::before{content:"\f8c7"}.bi-person-vcard-fill::before{content:"\f8c8"}.bi-person-vcard::before{content:"\f8c9"}.bi-sina-weibo::before{content:"\f8ca"}.bi-tencent-qq::before{content:"\f8cb"}.bi-wikipedia::before{content:"\f8cc"}.bi-alphabet-uppercase::before{content:"\f2a5"}.bi-alphabet::before{content:"\f68a"}.bi-amazon::before{content:"\f68d"}.bi-arrows-collapse-vertical::before{content:"\f690"}.bi-arrows-expand-vertical::before{content:"\f695"}.bi-arrows-vertical::before{content:"\f698"}.bi-arrows::before{content:"\f6a2"}.bi-ban-fill::before{content:"\f6a3"}.bi-ban::before{content:"\f6b6"}.bi-bing::before{content:"\f6c2"}.bi-cake::before{content:"\f6e0"}.bi-cake2::before{content:"\f6ed"}.bi-cookie::before{content:"\f6ee"}.bi-copy::before{content:"\f759"}.bi-crosshair::before{content:"\f769"}.bi-crosshair2::before{content:"\f794"}.bi-emoji-astonished-fill::before{content:"\f795"}.bi-emoji-astonished::before{content:"\f79a"}.bi-emoji-grimace-fill::before{content:"\f79b"}.bi-emoji-grimace::before{content:"\f7a0"}.bi-emoji-grin-fill::before{content:"\f7a1"}.bi-emoji-grin::before{content:"\f7a6"}.bi-emoji-surprise-fill::before{content:"\f7a7"}.bi-emoji-surprise::before{content:"\f7ac"}.bi-emoji-tear-fill::before{content:"\f7ad"}.bi-emoji-tear::before{content:"\f7b2"}.bi-envelope-arrow-down-fill::before{content:"\f7b3"}.bi-envelope-arrow-down::before{content:"\f7b8"}.bi-envelope-arrow-up-fill::before{content:"\f7b9"}.bi-envelope-arrow-up::before{content:"\f7be"}.bi-feather::before{content:"\f7bf"}.bi-feather2::before{content:"\f7c4"}.bi-floppy-fill::before{content:"\f7c5"}.bi-floppy::before{content:"\f7d8"}.bi-floppy2-fill::before{content:"\f7d9"}.bi-floppy2::before{content:"\f7e4"}.bi-gitlab::before{content:"\f7e5"}.bi-highlighter::before{content:"\f7f8"}.bi-marker-tip::before{content:"\f802"}.bi-nvme-fill::before{content:"\f803"}.bi-nvme::before{content:"\f80c"}.bi-opencollective::before{content:"\f80d"}.bi-pci-card-network::before{content:"\f8cd"}.bi-pci-card-sound::before{content:"\f8ce"}.bi-radar::before{content:"\f8cf"}.bi-send-arrow-down-fill::before{content:"\f8d0"}.bi-send-arrow-down::before{content:"\f8d1"}.bi-send-arrow-up-fill::before{content:"\f8d2"}.bi-send-arrow-up::before{content:"\f8d3"}.bi-sim-slash-fill::before{content:"\f8d4"}.bi-sim-slash::before{content:"\f8d5"}.bi-sourceforge::before{content:"\f8d6"}.bi-substack::before{content:"\f8d7"}.bi-threads-fill::before{content:"\f8d8"}.bi-threads::before{content:"\f8d9"}.bi-transparency::before{content:"\f8da"}.bi-twitter-x::before{content:"\f8db"}.bi-type-h4::before{content:"\f8dc"}.bi-type-h5::before{content:"\f8dd"}.bi-type-h6::before{content:"\f8de"}.bi-backpack-fill::before{content:"\f8df"}.bi-backpack::before{content:"\f8e0"}.bi-backpack2-fill::before{content:"\f8e1"}.bi-backpack2::before{content:"\f8e2"}.bi-backpack3-fill::before{content:"\f8e3"}.bi-backpack3::before{content:"\f8e4"}.bi-backpack4-fill::before{content:"\f8e5"}.bi-backpack4::before{content:"\f8e6"}.bi-brilliance::before{content:"\f8e7"}.bi-cake-fill::before{content:"\f8e8"}.bi-cake2-fill::before{content:"\f8e9"}.bi-duffle-fill::before{content:"\f8ea"}.bi-duffle::before{content:"\f8eb"}.bi-exposure::before{content:"\f8ec"}.bi-gender-neuter::before{content:"\f8ed"}.bi-highlights::before{content:"\f8ee"}.bi-luggage-fill::before{content:"\f8ef"}.bi-luggage::before{content:"\f8f0"}.bi-mailbox-flag::before{content:"\f8f1"}.bi-mailbox2-flag::before{content:"\f8f2"}.bi-noise-reduction::before{content:"\f8f3"}.bi-passport-fill::before{content:"\f8f4"}.bi-passport::before{content:"\f8f5"}.bi-person-arms-up::before{content:"\f8f6"}.bi-person-raised-hand::before{content:"\f8f7"}.bi-person-standing-dress::before{content:"\f8f8"}.bi-person-standing::before{content:"\f8f9"}.bi-person-walking::before{content:"\f8fa"}.bi-person-wheelchair::before{content:"\f8fb"}.bi-shadows::before{content:"\f8fc"}.bi-suitcase-fill::before{content:"\f8fd"}.bi-suitcase-lg-fill::before{content:"\f8fe"}.bi-suitcase-lg::before{content:"\f8ff"}.bi-suitcase::before{content:"\f900"}.bi-suitcase2-fill::before{content:"\f901"}.bi-suitcase2::before{content:"\f902"}.bi-vignette::before{content:"\f903"}
\ No newline at end of file
diff --git a/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff
new file mode 100644
index 0000000000..51204d27de
Binary files /dev/null and b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff differ
diff --git a/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2 b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2
new file mode 100644
index 0000000000..92c4830216
Binary files /dev/null and b/openpilot/starpilot/galaxy/web/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2 differ
diff --git a/openpilot/starpilot/galaxy/web/vendor/notices/Bootstrap-Icons-MIT.txt b/openpilot/starpilot/galaxy/web/vendor/notices/Bootstrap-Icons-MIT.txt
new file mode 100644
index 0000000000..2165a59605
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/vendor/notices/Bootstrap-Icons-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2024 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/openpilot/starpilot/galaxy/web/vendor/notices/Vue-MIT.txt b/openpilot/starpilot/galaxy/web/vendor/notices/Vue-MIT.txt
new file mode 100644
index 0000000000..b202669cba
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/vendor/notices/Vue-MIT.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present Yuxi (Evan) You and Vue contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/openpilot/starpilot/galaxy/web/vendor/vue/vue.esm-browser.js b/openpilot/starpilot/galaxy/web/vendor/vue/vue.esm-browser.js
new file mode 100644
index 0000000000..c2fd80a85d
--- /dev/null
+++ b/openpilot/starpilot/galaxy/web/vendor/vue/vue.esm-browser.js
@@ -0,0 +1,16774 @@
+/**
+* vue v3.4.38
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function makeMap(str, expectsLowerCase) {
+ const set = new Set(str.split(","));
+ return expectsLowerCase ? (val) => set.has(val.toLowerCase()) : (val) => set.has(val);
+}
+
+const EMPTY_OBJ = Object.freeze({}) ;
+const EMPTY_ARR = Object.freeze([]) ;
+const NOOP = () => {
+};
+const NO = () => false;
+const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
+(key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
+const isModelListener = (key) => key.startsWith("onUpdate:");
+const extend = Object.assign;
+const remove = (arr, el) => {
+ const i = arr.indexOf(el);
+ if (i > -1) {
+ arr.splice(i, 1);
+ }
+};
+const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+const hasOwn = (val, key) => hasOwnProperty$1.call(val, key);
+const isArray = Array.isArray;
+const isMap = (val) => toTypeString(val) === "[object Map]";
+const isSet = (val) => toTypeString(val) === "[object Set]";
+const isDate = (val) => toTypeString(val) === "[object Date]";
+const isRegExp = (val) => toTypeString(val) === "[object RegExp]";
+const isFunction = (val) => typeof val === "function";
+const isString = (val) => typeof val === "string";
+const isSymbol = (val) => typeof val === "symbol";
+const isObject = (val) => val !== null && typeof val === "object";
+const isPromise = (val) => {
+ return (isObject(val) || isFunction(val)) && isFunction(val.then) && isFunction(val.catch);
+};
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
+const toRawType = (value) => {
+ return toTypeString(value).slice(8, -1);
+};
+const isPlainObject = (val) => toTypeString(val) === "[object Object]";
+const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
+const isReservedProp = /* @__PURE__ */ makeMap(
+ // the leading comma is intentional so empty string "" is also included
+ ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
+);
+const isBuiltInDirective = /* @__PURE__ */ makeMap(
+ "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
+);
+const cacheStringFunction = (fn) => {
+ const cache = /* @__PURE__ */ Object.create(null);
+ return (str) => {
+ const hit = cache[str];
+ return hit || (cache[str] = fn(str));
+ };
+};
+const camelizeRE = /-(\w)/g;
+const camelize = cacheStringFunction((str) => {
+ return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+});
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = cacheStringFunction(
+ (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
+);
+const capitalize = cacheStringFunction((str) => {
+ return str.charAt(0).toUpperCase() + str.slice(1);
+});
+const toHandlerKey = cacheStringFunction((str) => {
+ const s = str ? `on${capitalize(str)}` : ``;
+ return s;
+});
+const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+const invokeArrayFns = (fns, ...arg) => {
+ for (let i = 0; i < fns.length; i++) {
+ fns[i](...arg);
+ }
+};
+const def = (obj, key, value, writable = false) => {
+ Object.defineProperty(obj, key, {
+ configurable: true,
+ enumerable: false,
+ writable,
+ value
+ });
+};
+const looseToNumber = (val) => {
+ const n = parseFloat(val);
+ return isNaN(n) ? val : n;
+};
+const toNumber = (val) => {
+ const n = isString(val) ? Number(val) : NaN;
+ return isNaN(n) ? val : n;
+};
+let _globalThis;
+const getGlobalThis = () => {
+ return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
+};
+
+const PatchFlagNames = {
+ [1]: `TEXT`,
+ [2]: `CLASS`,
+ [4]: `STYLE`,
+ [8]: `PROPS`,
+ [16]: `FULL_PROPS`,
+ [32]: `NEED_HYDRATION`,
+ [64]: `STABLE_FRAGMENT`,
+ [128]: `KEYED_FRAGMENT`,
+ [256]: `UNKEYED_FRAGMENT`,
+ [512]: `NEED_PATCH`,
+ [1024]: `DYNAMIC_SLOTS`,
+ [2048]: `DEV_ROOT_FRAGMENT`,
+ [-1]: `HOISTED`,
+ [-2]: `BAIL`
+};
+
+const slotFlagsText = {
+ [1]: "STABLE",
+ [2]: "DYNAMIC",
+ [3]: "FORWARDED"
+};
+
+const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error";
+const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
+
+const range = 2;
+function generateCodeFrame(source, start = 0, end = source.length) {
+ start = Math.max(0, Math.min(start, source.length));
+ end = Math.max(0, Math.min(end, source.length));
+ if (start > end) return "";
+ let lines = source.split(/(\r?\n)/);
+ const newlineSequences = lines.filter((_, idx) => idx % 2 === 1);
+ lines = lines.filter((_, idx) => idx % 2 === 0);
+ let count = 0;
+ const res = [];
+ for (let i = 0; i < lines.length; i++) {
+ count += lines[i].length + (newlineSequences[i] && newlineSequences[i].length || 0);
+ if (count >= start) {
+ for (let j = i - range; j <= i + range || end > count; j++) {
+ if (j < 0 || j >= lines.length) continue;
+ const line = j + 1;
+ res.push(
+ `${line}${" ".repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`
+ );
+ const lineLength = lines[j].length;
+ const newLineSeqLength = newlineSequences[j] && newlineSequences[j].length || 0;
+ if (j === i) {
+ const pad = start - (count - (lineLength + newLineSeqLength));
+ const length = Math.max(
+ 1,
+ end > count ? lineLength - pad : end - start
+ );
+ res.push(` | ` + " ".repeat(pad) + "^".repeat(length));
+ } else if (j > i) {
+ if (end > count) {
+ const length = Math.max(Math.min(end - count, lineLength), 1);
+ res.push(` | ` + "^".repeat(length));
+ }
+ count += lineLength + newLineSeqLength;
+ }
+ }
+ break;
+ }
+ }
+ return res.join("\n");
+}
+
+function normalizeStyle(value) {
+ if (isArray(value)) {
+ const res = {};
+ for (let i = 0; i < value.length; i++) {
+ const item = value[i];
+ const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item);
+ if (normalized) {
+ for (const key in normalized) {
+ res[key] = normalized[key];
+ }
+ }
+ }
+ return res;
+ } else if (isString(value) || isObject(value)) {
+ return value;
+ }
+}
+const listDelimiterRE = /;(?![^(]*\))/g;
+const propertyDelimiterRE = /:([^]+)/;
+const styleCommentRE = /\/\*[^]*?\*\//g;
+function parseStringStyle(cssText) {
+ const ret = {};
+ cssText.replace(styleCommentRE, "").split(listDelimiterRE).forEach((item) => {
+ if (item) {
+ const tmp = item.split(propertyDelimiterRE);
+ tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
+ }
+ });
+ return ret;
+}
+function stringifyStyle(styles) {
+ let ret = "";
+ if (!styles || isString(styles)) {
+ return ret;
+ }
+ for (const key in styles) {
+ const value = styles[key];
+ if (isString(value) || typeof value === "number") {
+ const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key);
+ ret += `${normalizedKey}:${value};`;
+ }
+ }
+ return ret;
+}
+function normalizeClass(value) {
+ let res = "";
+ if (isString(value)) {
+ res = value;
+ } else if (isArray(value)) {
+ for (let i = 0; i < value.length; i++) {
+ const normalized = normalizeClass(value[i]);
+ if (normalized) {
+ res += normalized + " ";
+ }
+ }
+ } else if (isObject(value)) {
+ for (const name in value) {
+ if (value[name]) {
+ res += name + " ";
+ }
+ }
+ }
+ return res.trim();
+}
+function normalizeProps(props) {
+ if (!props) return null;
+ let { class: klass, style } = props;
+ if (klass && !isString(klass)) {
+ props.class = normalizeClass(klass);
+ }
+ if (style) {
+ props.style = normalizeStyle(style);
+ }
+ return props;
+}
+
+const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
+const MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
+const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
+const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS);
+const isMathMLTag = /* @__PURE__ */ makeMap(MATH_TAGS);
+const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS);
+
+const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
+const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs);
+const isBooleanAttr = /* @__PURE__ */ makeMap(
+ specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`
+);
+function includeBooleanAttr(value) {
+ return !!value || value === "";
+}
+const isKnownHtmlAttr = /* @__PURE__ */ makeMap(
+ `accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap`
+);
+const isKnownSvgAttr = /* @__PURE__ */ makeMap(
+ `xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`
+);
+function isRenderableAttrValue(value) {
+ if (value == null) {
+ return false;
+ }
+ const type = typeof value;
+ return type === "string" || type === "number" || type === "boolean";
+}
+
+function looseCompareArrays(a, b) {
+ if (a.length !== b.length) return false;
+ let equal = true;
+ for (let i = 0; equal && i < a.length; i++) {
+ equal = looseEqual(a[i], b[i]);
+ }
+ return equal;
+}
+function looseEqual(a, b) {
+ if (a === b) return true;
+ let aValidType = isDate(a);
+ let bValidType = isDate(b);
+ if (aValidType || bValidType) {
+ return aValidType && bValidType ? a.getTime() === b.getTime() : false;
+ }
+ aValidType = isSymbol(a);
+ bValidType = isSymbol(b);
+ if (aValidType || bValidType) {
+ return a === b;
+ }
+ aValidType = isArray(a);
+ bValidType = isArray(b);
+ if (aValidType || bValidType) {
+ return aValidType && bValidType ? looseCompareArrays(a, b) : false;
+ }
+ aValidType = isObject(a);
+ bValidType = isObject(b);
+ if (aValidType || bValidType) {
+ if (!aValidType || !bValidType) {
+ return false;
+ }
+ const aKeysCount = Object.keys(a).length;
+ const bKeysCount = Object.keys(b).length;
+ if (aKeysCount !== bKeysCount) {
+ return false;
+ }
+ for (const key in a) {
+ const aHasKey = a.hasOwnProperty(key);
+ const bHasKey = b.hasOwnProperty(key);
+ if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key])) {
+ return false;
+ }
+ }
+ }
+ return String(a) === String(b);
+}
+function looseIndexOf(arr, val) {
+ return arr.findIndex((item) => looseEqual(item, val));
+}
+
+const isRef$1 = (val) => {
+ return !!(val && val.__v_isRef === true);
+};
+const toDisplayString = (val) => {
+ return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? isRef$1(val) ? toDisplayString(val.value) : JSON.stringify(val, replacer, 2) : String(val);
+};
+const replacer = (_key, val) => {
+ if (isRef$1(val)) {
+ return replacer(_key, val.value);
+ } else if (isMap(val)) {
+ return {
+ [`Map(${val.size})`]: [...val.entries()].reduce(
+ (entries, [key, val2], i) => {
+ entries[stringifySymbol(key, i) + " =>"] = val2;
+ return entries;
+ },
+ {}
+ )
+ };
+ } else if (isSet(val)) {
+ return {
+ [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
+ };
+ } else if (isSymbol(val)) {
+ return stringifySymbol(val);
+ } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+ return String(val);
+ }
+ return val;
+};
+const stringifySymbol = (v, i = "") => {
+ var _a;
+ return (
+ // Symbol.description in es2019+ so we need to cast here to pass
+ // the lib: es2016 check
+ isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v
+ );
+};
+
+function warn$2(msg, ...args) {
+ console.warn(`[Vue warn] ${msg}`, ...args);
+}
+
+let activeEffectScope;
+class EffectScope {
+ constructor(detached = false) {
+ this.detached = detached;
+ /**
+ * @internal
+ */
+ this._active = true;
+ /**
+ * @internal
+ */
+ this.effects = [];
+ /**
+ * @internal
+ */
+ this.cleanups = [];
+ this.parent = activeEffectScope;
+ if (!detached && activeEffectScope) {
+ this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
+ this
+ ) - 1;
+ }
+ }
+ get active() {
+ return this._active;
+ }
+ run(fn) {
+ if (this._active) {
+ const currentEffectScope = activeEffectScope;
+ try {
+ activeEffectScope = this;
+ return fn();
+ } finally {
+ activeEffectScope = currentEffectScope;
+ }
+ } else {
+ warn$2(`cannot run an inactive effect scope.`);
+ }
+ }
+ /**
+ * This should only be called on non-detached scopes
+ * @internal
+ */
+ on() {
+ activeEffectScope = this;
+ }
+ /**
+ * This should only be called on non-detached scopes
+ * @internal
+ */
+ off() {
+ activeEffectScope = this.parent;
+ }
+ stop(fromParent) {
+ if (this._active) {
+ let i, l;
+ for (i = 0, l = this.effects.length; i < l; i++) {
+ this.effects[i].stop();
+ }
+ for (i = 0, l = this.cleanups.length; i < l; i++) {
+ this.cleanups[i]();
+ }
+ if (this.scopes) {
+ for (i = 0, l = this.scopes.length; i < l; i++) {
+ this.scopes[i].stop(true);
+ }
+ }
+ if (!this.detached && this.parent && !fromParent) {
+ const last = this.parent.scopes.pop();
+ if (last && last !== this) {
+ this.parent.scopes[this.index] = last;
+ last.index = this.index;
+ }
+ }
+ this.parent = void 0;
+ this._active = false;
+ }
+ }
+}
+function effectScope(detached) {
+ return new EffectScope(detached);
+}
+function recordEffectScope(effect, scope = activeEffectScope) {
+ if (scope && scope.active) {
+ scope.effects.push(effect);
+ }
+}
+function getCurrentScope() {
+ return activeEffectScope;
+}
+function onScopeDispose(fn) {
+ if (activeEffectScope) {
+ activeEffectScope.cleanups.push(fn);
+ } else {
+ warn$2(
+ `onScopeDispose() is called when there is no active effect scope to be associated with.`
+ );
+ }
+}
+
+let activeEffect;
+class ReactiveEffect {
+ constructor(fn, trigger, scheduler, scope) {
+ this.fn = fn;
+ this.trigger = trigger;
+ this.scheduler = scheduler;
+ this.active = true;
+ this.deps = [];
+ /**
+ * @internal
+ */
+ this._dirtyLevel = 4;
+ /**
+ * @internal
+ */
+ this._trackId = 0;
+ /**
+ * @internal
+ */
+ this._runnings = 0;
+ /**
+ * @internal
+ */
+ this._shouldSchedule = false;
+ /**
+ * @internal
+ */
+ this._depsLength = 0;
+ recordEffectScope(this, scope);
+ }
+ get dirty() {
+ if (this._dirtyLevel === 2 || this._dirtyLevel === 3) {
+ this._dirtyLevel = 1;
+ pauseTracking();
+ for (let i = 0; i < this._depsLength; i++) {
+ const dep = this.deps[i];
+ if (dep.computed) {
+ triggerComputed(dep.computed);
+ if (this._dirtyLevel >= 4) {
+ break;
+ }
+ }
+ }
+ if (this._dirtyLevel === 1) {
+ this._dirtyLevel = 0;
+ }
+ resetTracking();
+ }
+ return this._dirtyLevel >= 4;
+ }
+ set dirty(v) {
+ this._dirtyLevel = v ? 4 : 0;
+ }
+ run() {
+ this._dirtyLevel = 0;
+ if (!this.active) {
+ return this.fn();
+ }
+ let lastShouldTrack = shouldTrack;
+ let lastEffect = activeEffect;
+ try {
+ shouldTrack = true;
+ activeEffect = this;
+ this._runnings++;
+ preCleanupEffect(this);
+ return this.fn();
+ } finally {
+ postCleanupEffect(this);
+ this._runnings--;
+ activeEffect = lastEffect;
+ shouldTrack = lastShouldTrack;
+ }
+ }
+ stop() {
+ if (this.active) {
+ preCleanupEffect(this);
+ postCleanupEffect(this);
+ this.onStop && this.onStop();
+ this.active = false;
+ }
+ }
+}
+function triggerComputed(computed) {
+ return computed.value;
+}
+function preCleanupEffect(effect2) {
+ effect2._trackId++;
+ effect2._depsLength = 0;
+}
+function postCleanupEffect(effect2) {
+ if (effect2.deps.length > effect2._depsLength) {
+ for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
+ cleanupDepEffect(effect2.deps[i], effect2);
+ }
+ effect2.deps.length = effect2._depsLength;
+ }
+}
+function cleanupDepEffect(dep, effect2) {
+ const trackId = dep.get(effect2);
+ if (trackId !== void 0 && effect2._trackId !== trackId) {
+ dep.delete(effect2);
+ if (dep.size === 0) {
+ dep.cleanup();
+ }
+ }
+}
+function effect(fn, options) {
+ if (fn.effect instanceof ReactiveEffect) {
+ fn = fn.effect.fn;
+ }
+ const _effect = new ReactiveEffect(fn, NOOP, () => {
+ if (_effect.dirty) {
+ _effect.run();
+ }
+ });
+ if (options) {
+ extend(_effect, options);
+ if (options.scope) recordEffectScope(_effect, options.scope);
+ }
+ if (!options || !options.lazy) {
+ _effect.run();
+ }
+ const runner = _effect.run.bind(_effect);
+ runner.effect = _effect;
+ return runner;
+}
+function stop(runner) {
+ runner.effect.stop();
+}
+let shouldTrack = true;
+let pauseScheduleStack = 0;
+const trackStack = [];
+function pauseTracking() {
+ trackStack.push(shouldTrack);
+ shouldTrack = false;
+}
+function resetTracking() {
+ const last = trackStack.pop();
+ shouldTrack = last === void 0 ? true : last;
+}
+function pauseScheduling() {
+ pauseScheduleStack++;
+}
+function resetScheduling() {
+ pauseScheduleStack--;
+ while (!pauseScheduleStack && queueEffectSchedulers.length) {
+ queueEffectSchedulers.shift()();
+ }
+}
+function trackEffect(effect2, dep, debuggerEventExtraInfo) {
+ var _a;
+ if (dep.get(effect2) !== effect2._trackId) {
+ dep.set(effect2, effect2._trackId);
+ const oldDep = effect2.deps[effect2._depsLength];
+ if (oldDep !== dep) {
+ if (oldDep) {
+ cleanupDepEffect(oldDep, effect2);
+ }
+ effect2.deps[effect2._depsLength++] = dep;
+ } else {
+ effect2._depsLength++;
+ }
+ {
+ (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+ }
+ }
+}
+const queueEffectSchedulers = [];
+function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
+ var _a;
+ pauseScheduling();
+ for (const effect2 of dep.keys()) {
+ let tracking;
+ if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+ effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0);
+ effect2._dirtyLevel = dirtyLevel;
+ }
+ if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
+ {
+ (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+ }
+ effect2.trigger();
+ if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) {
+ effect2._shouldSchedule = false;
+ if (effect2.scheduler) {
+ queueEffectSchedulers.push(effect2.scheduler);
+ }
+ }
+ }
+ }
+ resetScheduling();
+}
+
+const createDep = (cleanup, computed) => {
+ const dep = /* @__PURE__ */ new Map();
+ dep.cleanup = cleanup;
+ dep.computed = computed;
+ return dep;
+};
+
+const targetMap = /* @__PURE__ */ new WeakMap();
+const ITERATE_KEY = Symbol("iterate" );
+const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
+function track(target, type, key) {
+ if (shouldTrack && activeEffect) {
+ let depsMap = targetMap.get(target);
+ if (!depsMap) {
+ targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
+ }
+ let dep = depsMap.get(key);
+ if (!dep) {
+ depsMap.set(key, dep = createDep(() => depsMap.delete(key)));
+ }
+ trackEffect(
+ activeEffect,
+ dep,
+ {
+ target,
+ type,
+ key
+ }
+ );
+ }
+}
+function trigger(target, type, key, newValue, oldValue, oldTarget) {
+ const depsMap = targetMap.get(target);
+ if (!depsMap) {
+ return;
+ }
+ let deps = [];
+ if (type === "clear") {
+ deps = [...depsMap.values()];
+ } else if (key === "length" && isArray(target)) {
+ const newLength = Number(newValue);
+ depsMap.forEach((dep, key2) => {
+ if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
+ deps.push(dep);
+ }
+ });
+ } else {
+ if (key !== void 0) {
+ deps.push(depsMap.get(key));
+ }
+ switch (type) {
+ case "add":
+ if (!isArray(target)) {
+ deps.push(depsMap.get(ITERATE_KEY));
+ if (isMap(target)) {
+ deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+ }
+ } else if (isIntegerKey(key)) {
+ deps.push(depsMap.get("length"));
+ }
+ break;
+ case "delete":
+ if (!isArray(target)) {
+ deps.push(depsMap.get(ITERATE_KEY));
+ if (isMap(target)) {
+ deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+ }
+ }
+ break;
+ case "set":
+ if (isMap(target)) {
+ deps.push(depsMap.get(ITERATE_KEY));
+ }
+ break;
+ }
+ }
+ pauseScheduling();
+ for (const dep of deps) {
+ if (dep) {
+ triggerEffects(
+ dep,
+ 4,
+ {
+ target,
+ type,
+ key,
+ newValue,
+ oldValue,
+ oldTarget
+ }
+ );
+ }
+ }
+ resetScheduling();
+}
+function getDepFromReactive(object, key) {
+ const depsMap = targetMap.get(object);
+ return depsMap && depsMap.get(key);
+}
+
+const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
+const builtInSymbols = new Set(
+ /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
+);
+const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
+function createArrayInstrumentations() {
+ const instrumentations = {};
+ ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
+ instrumentations[key] = function(...args) {
+ const arr = toRaw(this);
+ for (let i = 0, l = this.length; i < l; i++) {
+ track(arr, "get", i + "");
+ }
+ const res = arr[key](...args);
+ if (res === -1 || res === false) {
+ return arr[key](...args.map(toRaw));
+ } else {
+ return res;
+ }
+ };
+ });
+ ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
+ instrumentations[key] = function(...args) {
+ pauseTracking();
+ pauseScheduling();
+ const res = toRaw(this)[key].apply(this, args);
+ resetScheduling();
+ resetTracking();
+ return res;
+ };
+ });
+ return instrumentations;
+}
+function hasOwnProperty(key) {
+ if (!isSymbol(key)) key = String(key);
+ const obj = toRaw(this);
+ track(obj, "has", key);
+ return obj.hasOwnProperty(key);
+}
+class BaseReactiveHandler {
+ constructor(_isReadonly = false, _isShallow = false) {
+ this._isReadonly = _isReadonly;
+ this._isShallow = _isShallow;
+ }
+ get(target, key, receiver) {
+ const isReadonly2 = this._isReadonly, isShallow2 = this._isShallow;
+ if (key === "__v_isReactive") {
+ return !isReadonly2;
+ } else if (key === "__v_isReadonly") {
+ return isReadonly2;
+ } else if (key === "__v_isShallow") {
+ return isShallow2;
+ } else if (key === "__v_raw") {
+ if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
+ // this means the receiver is a user proxy of the reactive proxy
+ Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+ return target;
+ }
+ return;
+ }
+ const targetIsArray = isArray(target);
+ if (!isReadonly2) {
+ if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
+ return Reflect.get(arrayInstrumentations, key, receiver);
+ }
+ if (key === "hasOwnProperty") {
+ return hasOwnProperty;
+ }
+ }
+ const res = Reflect.get(target, key, receiver);
+ if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
+ return res;
+ }
+ if (!isReadonly2) {
+ track(target, "get", key);
+ }
+ if (isShallow2) {
+ return res;
+ }
+ if (isRef(res)) {
+ return targetIsArray && isIntegerKey(key) ? res : res.value;
+ }
+ if (isObject(res)) {
+ return isReadonly2 ? readonly(res) : reactive(res);
+ }
+ return res;
+ }
+}
+class MutableReactiveHandler extends BaseReactiveHandler {
+ constructor(isShallow2 = false) {
+ super(false, isShallow2);
+ }
+ set(target, key, value, receiver) {
+ let oldValue = target[key];
+ if (!this._isShallow) {
+ const isOldValueReadonly = isReadonly(oldValue);
+ if (!isShallow(value) && !isReadonly(value)) {
+ oldValue = toRaw(oldValue);
+ value = toRaw(value);
+ }
+ if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
+ if (isOldValueReadonly) {
+ return false;
+ } else {
+ oldValue.value = value;
+ return true;
+ }
+ }
+ }
+ const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
+ const result = Reflect.set(target, key, value, receiver);
+ if (target === toRaw(receiver)) {
+ if (!hadKey) {
+ trigger(target, "add", key, value);
+ } else if (hasChanged(value, oldValue)) {
+ trigger(target, "set", key, value, oldValue);
+ }
+ }
+ return result;
+ }
+ deleteProperty(target, key) {
+ const hadKey = hasOwn(target, key);
+ const oldValue = target[key];
+ const result = Reflect.deleteProperty(target, key);
+ if (result && hadKey) {
+ trigger(target, "delete", key, void 0, oldValue);
+ }
+ return result;
+ }
+ has(target, key) {
+ const result = Reflect.has(target, key);
+ if (!isSymbol(key) || !builtInSymbols.has(key)) {
+ track(target, "has", key);
+ }
+ return result;
+ }
+ ownKeys(target) {
+ track(
+ target,
+ "iterate",
+ isArray(target) ? "length" : ITERATE_KEY
+ );
+ return Reflect.ownKeys(target);
+ }
+}
+class ReadonlyReactiveHandler extends BaseReactiveHandler {
+ constructor(isShallow2 = false) {
+ super(true, isShallow2);
+ }
+ set(target, key) {
+ {
+ warn$2(
+ `Set operation on key "${String(key)}" failed: target is readonly.`,
+ target
+ );
+ }
+ return true;
+ }
+ deleteProperty(target, key) {
+ {
+ warn$2(
+ `Delete operation on key "${String(key)}" failed: target is readonly.`,
+ target
+ );
+ }
+ return true;
+ }
+}
+const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
+const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
+ true
+);
+const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
+
+const toShallow = (value) => value;
+const getProto = (v) => Reflect.getPrototypeOf(v);
+function get(target, key, isReadonly2 = false, isShallow2 = false) {
+ target = target["__v_raw"];
+ const rawTarget = toRaw(target);
+ const rawKey = toRaw(key);
+ if (!isReadonly2) {
+ if (hasChanged(key, rawKey)) {
+ track(rawTarget, "get", key);
+ }
+ track(rawTarget, "get", rawKey);
+ }
+ const { has: has2 } = getProto(rawTarget);
+ const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+ if (has2.call(rawTarget, key)) {
+ return wrap(target.get(key));
+ } else if (has2.call(rawTarget, rawKey)) {
+ return wrap(target.get(rawKey));
+ } else if (target !== rawTarget) {
+ target.get(key);
+ }
+}
+function has(key, isReadonly2 = false) {
+ const target = this["__v_raw"];
+ const rawTarget = toRaw(target);
+ const rawKey = toRaw(key);
+ if (!isReadonly2) {
+ if (hasChanged(key, rawKey)) {
+ track(rawTarget, "has", key);
+ }
+ track(rawTarget, "has", rawKey);
+ }
+ return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
+}
+function size(target, isReadonly2 = false) {
+ target = target["__v_raw"];
+ !isReadonly2 && track(toRaw(target), "iterate", ITERATE_KEY);
+ return Reflect.get(target, "size", target);
+}
+function add(value, _isShallow = false) {
+ if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+ value = toRaw(value);
+ }
+ const target = toRaw(this);
+ const proto = getProto(target);
+ const hadKey = proto.has.call(target, value);
+ if (!hadKey) {
+ target.add(value);
+ trigger(target, "add", value, value);
+ }
+ return this;
+}
+function set(key, value, _isShallow = false) {
+ if (!_isShallow && !isShallow(value) && !isReadonly(value)) {
+ value = toRaw(value);
+ }
+ const target = toRaw(this);
+ const { has: has2, get: get2 } = getProto(target);
+ let hadKey = has2.call(target, key);
+ if (!hadKey) {
+ key = toRaw(key);
+ hadKey = has2.call(target, key);
+ } else {
+ checkIdentityKeys(target, has2, key);
+ }
+ const oldValue = get2.call(target, key);
+ target.set(key, value);
+ if (!hadKey) {
+ trigger(target, "add", key, value);
+ } else if (hasChanged(value, oldValue)) {
+ trigger(target, "set", key, value, oldValue);
+ }
+ return this;
+}
+function deleteEntry(key) {
+ const target = toRaw(this);
+ const { has: has2, get: get2 } = getProto(target);
+ let hadKey = has2.call(target, key);
+ if (!hadKey) {
+ key = toRaw(key);
+ hadKey = has2.call(target, key);
+ } else {
+ checkIdentityKeys(target, has2, key);
+ }
+ const oldValue = get2 ? get2.call(target, key) : void 0;
+ const result = target.delete(key);
+ if (hadKey) {
+ trigger(target, "delete", key, void 0, oldValue);
+ }
+ return result;
+}
+function clear() {
+ const target = toRaw(this);
+ const hadItems = target.size !== 0;
+ const oldTarget = isMap(target) ? new Map(target) : new Set(target) ;
+ const result = target.clear();
+ if (hadItems) {
+ trigger(target, "clear", void 0, void 0, oldTarget);
+ }
+ return result;
+}
+function createForEach(isReadonly2, isShallow2) {
+ return function forEach(callback, thisArg) {
+ const observed = this;
+ const target = observed["__v_raw"];
+ const rawTarget = toRaw(target);
+ const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+ !isReadonly2 && track(rawTarget, "iterate", ITERATE_KEY);
+ return target.forEach((value, key) => {
+ return callback.call(thisArg, wrap(value), wrap(key), observed);
+ });
+ };
+}
+function createIterableMethod(method, isReadonly2, isShallow2) {
+ return function(...args) {
+ const target = this["__v_raw"];
+ const rawTarget = toRaw(target);
+ const targetIsMap = isMap(rawTarget);
+ const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
+ const isKeyOnly = method === "keys" && targetIsMap;
+ const innerIterator = target[method](...args);
+ const wrap = isShallow2 ? toShallow : isReadonly2 ? toReadonly : toReactive;
+ !isReadonly2 && track(
+ rawTarget,
+ "iterate",
+ isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+ );
+ return {
+ // iterator protocol
+ next() {
+ const { value, done } = innerIterator.next();
+ return done ? { value, done } : {
+ value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+ done
+ };
+ },
+ // iterable protocol
+ [Symbol.iterator]() {
+ return this;
+ }
+ };
+ };
+}
+function createReadonlyMethod(type) {
+ return function(...args) {
+ {
+ const key = args[0] ? `on key "${args[0]}" ` : ``;
+ warn$2(
+ `${capitalize(type)} operation ${key}failed: target is readonly.`,
+ toRaw(this)
+ );
+ }
+ return type === "delete" ? false : type === "clear" ? void 0 : this;
+ };
+}
+function createInstrumentations() {
+ const mutableInstrumentations2 = {
+ get(key) {
+ return get(this, key);
+ },
+ get size() {
+ return size(this);
+ },
+ has,
+ add,
+ set,
+ delete: deleteEntry,
+ clear,
+ forEach: createForEach(false, false)
+ };
+ const shallowInstrumentations2 = {
+ get(key) {
+ return get(this, key, false, true);
+ },
+ get size() {
+ return size(this);
+ },
+ has,
+ add(value) {
+ return add.call(this, value, true);
+ },
+ set(key, value) {
+ return set.call(this, key, value, true);
+ },
+ delete: deleteEntry,
+ clear,
+ forEach: createForEach(false, true)
+ };
+ const readonlyInstrumentations2 = {
+ get(key) {
+ return get(this, key, true);
+ },
+ get size() {
+ return size(this, true);
+ },
+ has(key) {
+ return has.call(this, key, true);
+ },
+ add: createReadonlyMethod("add"),
+ set: createReadonlyMethod("set"),
+ delete: createReadonlyMethod("delete"),
+ clear: createReadonlyMethod("clear"),
+ forEach: createForEach(true, false)
+ };
+ const shallowReadonlyInstrumentations2 = {
+ get(key) {
+ return get(this, key, true, true);
+ },
+ get size() {
+ return size(this, true);
+ },
+ has(key) {
+ return has.call(this, key, true);
+ },
+ add: createReadonlyMethod("add"),
+ set: createReadonlyMethod("set"),
+ delete: createReadonlyMethod("delete"),
+ clear: createReadonlyMethod("clear"),
+ forEach: createForEach(true, true)
+ };
+ const iteratorMethods = [
+ "keys",
+ "values",
+ "entries",
+ Symbol.iterator
+ ];
+ iteratorMethods.forEach((method) => {
+ mutableInstrumentations2[method] = createIterableMethod(method, false, false);
+ readonlyInstrumentations2[method] = createIterableMethod(method, true, false);
+ shallowInstrumentations2[method] = createIterableMethod(method, false, true);
+ shallowReadonlyInstrumentations2[method] = createIterableMethod(
+ method,
+ true,
+ true
+ );
+ });
+ return [
+ mutableInstrumentations2,
+ readonlyInstrumentations2,
+ shallowInstrumentations2,
+ shallowReadonlyInstrumentations2
+ ];
+}
+const [
+ mutableInstrumentations,
+ readonlyInstrumentations,
+ shallowInstrumentations,
+ shallowReadonlyInstrumentations
+] = /* @__PURE__ */ createInstrumentations();
+function createInstrumentationGetter(isReadonly2, shallow) {
+ const instrumentations = shallow ? isReadonly2 ? shallowReadonlyInstrumentations : shallowInstrumentations : isReadonly2 ? readonlyInstrumentations : mutableInstrumentations;
+ return (target, key, receiver) => {
+ if (key === "__v_isReactive") {
+ return !isReadonly2;
+ } else if (key === "__v_isReadonly") {
+ return isReadonly2;
+ } else if (key === "__v_raw") {
+ return target;
+ }
+ return Reflect.get(
+ hasOwn(instrumentations, key) && key in target ? instrumentations : target,
+ key,
+ receiver
+ );
+ };
+}
+const mutableCollectionHandlers = {
+ get: /* @__PURE__ */ createInstrumentationGetter(false, false)
+};
+const shallowCollectionHandlers = {
+ get: /* @__PURE__ */ createInstrumentationGetter(false, true)
+};
+const readonlyCollectionHandlers = {
+ get: /* @__PURE__ */ createInstrumentationGetter(true, false)
+};
+const shallowReadonlyCollectionHandlers = {
+ get: /* @__PURE__ */ createInstrumentationGetter(true, true)
+};
+function checkIdentityKeys(target, has2, key) {
+ const rawKey = toRaw(key);
+ if (rawKey !== key && has2.call(target, rawKey)) {
+ const type = toRawType(target);
+ warn$2(
+ `Reactive ${type} contains both the raw and reactive versions of the same object${type === `Map` ? ` as keys` : ``}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`
+ );
+ }
+}
+
+const reactiveMap = /* @__PURE__ */ new WeakMap();
+const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
+const readonlyMap = /* @__PURE__ */ new WeakMap();
+const shallowReadonlyMap = /* @__PURE__ */ new WeakMap();
+function targetTypeMap(rawType) {
+ switch (rawType) {
+ case "Object":
+ case "Array":
+ return 1 /* COMMON */;
+ case "Map":
+ case "Set":
+ case "WeakMap":
+ case "WeakSet":
+ return 2 /* COLLECTION */;
+ default:
+ return 0 /* INVALID */;
+ }
+}
+function getTargetType(value) {
+ return value["__v_skip"] || !Object.isExtensible(value) ? 0 /* INVALID */ : targetTypeMap(toRawType(value));
+}
+function reactive(target) {
+ if (isReadonly(target)) {
+ return target;
+ }
+ return createReactiveObject(
+ target,
+ false,
+ mutableHandlers,
+ mutableCollectionHandlers,
+ reactiveMap
+ );
+}
+function shallowReactive(target) {
+ return createReactiveObject(
+ target,
+ false,
+ shallowReactiveHandlers,
+ shallowCollectionHandlers,
+ shallowReactiveMap
+ );
+}
+function readonly(target) {
+ return createReactiveObject(
+ target,
+ true,
+ readonlyHandlers,
+ readonlyCollectionHandlers,
+ readonlyMap
+ );
+}
+function shallowReadonly(target) {
+ return createReactiveObject(
+ target,
+ true,
+ shallowReadonlyHandlers,
+ shallowReadonlyCollectionHandlers,
+ shallowReadonlyMap
+ );
+}
+function createReactiveObject(target, isReadonly2, baseHandlers, collectionHandlers, proxyMap) {
+ if (!isObject(target)) {
+ {
+ warn$2(
+ `value cannot be made ${isReadonly2 ? "readonly" : "reactive"}: ${String(
+ target
+ )}`
+ );
+ }
+ return target;
+ }
+ if (target["__v_raw"] && !(isReadonly2 && target["__v_isReactive"])) {
+ return target;
+ }
+ const existingProxy = proxyMap.get(target);
+ if (existingProxy) {
+ return existingProxy;
+ }
+ const targetType = getTargetType(target);
+ if (targetType === 0 /* INVALID */) {
+ return target;
+ }
+ const proxy = new Proxy(
+ target,
+ targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers
+ );
+ proxyMap.set(target, proxy);
+ return proxy;
+}
+function isReactive(value) {
+ if (isReadonly(value)) {
+ return isReactive(value["__v_raw"]);
+ }
+ return !!(value && value["__v_isReactive"]);
+}
+function isReadonly(value) {
+ return !!(value && value["__v_isReadonly"]);
+}
+function isShallow(value) {
+ return !!(value && value["__v_isShallow"]);
+}
+function isProxy(value) {
+ return value ? !!value["__v_raw"] : false;
+}
+function toRaw(observed) {
+ const raw = observed && observed["__v_raw"];
+ return raw ? toRaw(raw) : observed;
+}
+function markRaw(value) {
+ if (Object.isExtensible(value)) {
+ def(value, "__v_skip", true);
+ }
+ return value;
+}
+const toReactive = (value) => isObject(value) ? reactive(value) : value;
+const toReadonly = (value) => isObject(value) ? readonly(value) : value;
+
+const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided. Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`;
+class ComputedRefImpl {
+ constructor(getter, _setter, isReadonly, isSSR) {
+ this.getter = getter;
+ this._setter = _setter;
+ this.dep = void 0;
+ this.__v_isRef = true;
+ this["__v_isReadonly"] = false;
+ this.effect = new ReactiveEffect(
+ () => getter(this._value),
+ () => triggerRefValue(
+ this,
+ this.effect._dirtyLevel === 2 ? 2 : 3
+ )
+ );
+ this.effect.computed = this;
+ this.effect.active = this._cacheable = !isSSR;
+ this["__v_isReadonly"] = isReadonly;
+ }
+ get value() {
+ const self = toRaw(this);
+ if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) {
+ triggerRefValue(self, 4);
+ }
+ trackRefValue(self);
+ if (self.effect._dirtyLevel >= 2) {
+ if (this._warnRecursive) {
+ warn$2(COMPUTED_SIDE_EFFECT_WARN, `
+
+getter: `, this.getter);
+ }
+ triggerRefValue(self, 2);
+ }
+ return self._value;
+ }
+ set value(newValue) {
+ this._setter(newValue);
+ }
+ // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
+ get _dirty() {
+ return this.effect.dirty;
+ }
+ set _dirty(v) {
+ this.effect.dirty = v;
+ }
+ // #endregion
+}
+function computed$1(getterOrOptions, debugOptions, isSSR = false) {
+ let getter;
+ let setter;
+ const onlyGetter = isFunction(getterOrOptions);
+ if (onlyGetter) {
+ getter = getterOrOptions;
+ setter = () => {
+ warn$2("Write operation failed: computed value is readonly");
+ } ;
+ } else {
+ getter = getterOrOptions.get;
+ setter = getterOrOptions.set;
+ }
+ const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
+ if (debugOptions && !isSSR) {
+ cRef.effect.onTrack = debugOptions.onTrack;
+ cRef.effect.onTrigger = debugOptions.onTrigger;
+ }
+ return cRef;
+}
+
+function trackRefValue(ref2) {
+ var _a;
+ if (shouldTrack && activeEffect) {
+ ref2 = toRaw(ref2);
+ trackEffect(
+ activeEffect,
+ (_a = ref2.dep) != null ? _a : ref2.dep = createDep(
+ () => ref2.dep = void 0,
+ ref2 instanceof ComputedRefImpl ? ref2 : void 0
+ ),
+ {
+ target: ref2,
+ type: "get",
+ key: "value"
+ }
+ );
+ }
+}
+function triggerRefValue(ref2, dirtyLevel = 4, newVal, oldVal) {
+ ref2 = toRaw(ref2);
+ const dep = ref2.dep;
+ if (dep) {
+ triggerEffects(
+ dep,
+ dirtyLevel,
+ {
+ target: ref2,
+ type: "set",
+ key: "value",
+ newValue: newVal,
+ oldValue: oldVal
+ }
+ );
+ }
+}
+function isRef(r) {
+ return !!(r && r.__v_isRef === true);
+}
+function ref(value) {
+ return createRef(value, false);
+}
+function shallowRef(value) {
+ return createRef(value, true);
+}
+function createRef(rawValue, shallow) {
+ if (isRef(rawValue)) {
+ return rawValue;
+ }
+ return new RefImpl(rawValue, shallow);
+}
+class RefImpl {
+ constructor(value, __v_isShallow) {
+ this.__v_isShallow = __v_isShallow;
+ this.dep = void 0;
+ this.__v_isRef = true;
+ this._rawValue = __v_isShallow ? value : toRaw(value);
+ this._value = __v_isShallow ? value : toReactive(value);
+ }
+ get value() {
+ trackRefValue(this);
+ return this._value;
+ }
+ set value(newVal) {
+ const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
+ newVal = useDirectValue ? newVal : toRaw(newVal);
+ if (hasChanged(newVal, this._rawValue)) {
+ const oldVal = this._rawValue;
+ this._rawValue = newVal;
+ this._value = useDirectValue ? newVal : toReactive(newVal);
+ triggerRefValue(this, 4, newVal, oldVal);
+ }
+ }
+}
+function triggerRef(ref2) {
+ triggerRefValue(ref2, 4, ref2.value );
+}
+function unref(ref2) {
+ return isRef(ref2) ? ref2.value : ref2;
+}
+function toValue(source) {
+ return isFunction(source) ? source() : unref(source);
+}
+const shallowUnwrapHandlers = {
+ get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
+ set: (target, key, value, receiver) => {
+ const oldValue = target[key];
+ if (isRef(oldValue) && !isRef(value)) {
+ oldValue.value = value;
+ return true;
+ } else {
+ return Reflect.set(target, key, value, receiver);
+ }
+ }
+};
+function proxyRefs(objectWithRefs) {
+ return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers);
+}
+class CustomRefImpl {
+ constructor(factory) {
+ this.dep = void 0;
+ this.__v_isRef = true;
+ const { get, set } = factory(
+ () => trackRefValue(this),
+ () => triggerRefValue(this)
+ );
+ this._get = get;
+ this._set = set;
+ }
+ get value() {
+ return this._get();
+ }
+ set value(newVal) {
+ this._set(newVal);
+ }
+}
+function customRef(factory) {
+ return new CustomRefImpl(factory);
+}
+function toRefs(object) {
+ if (!isProxy(object)) {
+ warn$2(`toRefs() expects a reactive object but received a plain one.`);
+ }
+ const ret = isArray(object) ? new Array(object.length) : {};
+ for (const key in object) {
+ ret[key] = propertyToRef(object, key);
+ }
+ return ret;
+}
+class ObjectRefImpl {
+ constructor(_object, _key, _defaultValue) {
+ this._object = _object;
+ this._key = _key;
+ this._defaultValue = _defaultValue;
+ this.__v_isRef = true;
+ }
+ get value() {
+ const val = this._object[this._key];
+ return val === void 0 ? this._defaultValue : val;
+ }
+ set value(newVal) {
+ this._object[this._key] = newVal;
+ }
+ get dep() {
+ return getDepFromReactive(toRaw(this._object), this._key);
+ }
+}
+class GetterRefImpl {
+ constructor(_getter) {
+ this._getter = _getter;
+ this.__v_isRef = true;
+ this.__v_isReadonly = true;
+ }
+ get value() {
+ return this._getter();
+ }
+}
+function toRef(source, key, defaultValue) {
+ if (isRef(source)) {
+ return source;
+ } else if (isFunction(source)) {
+ return new GetterRefImpl(source);
+ } else if (isObject(source) && arguments.length > 1) {
+ return propertyToRef(source, key, defaultValue);
+ } else {
+ return ref(source);
+ }
+}
+function propertyToRef(source, key, defaultValue) {
+ const val = source[key];
+ return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
+}
+
+const TrackOpTypes = {
+ "GET": "get",
+ "HAS": "has",
+ "ITERATE": "iterate"
+};
+const TriggerOpTypes = {
+ "SET": "set",
+ "ADD": "add",
+ "DELETE": "delete",
+ "CLEAR": "clear"
+};
+
+const stack$1 = [];
+function pushWarningContext(vnode) {
+ stack$1.push(vnode);
+}
+function popWarningContext() {
+ stack$1.pop();
+}
+let isWarning = false;
+function warn$1(msg, ...args) {
+ if (isWarning) return;
+ isWarning = true;
+ pauseTracking();
+ const instance = stack$1.length ? stack$1[stack$1.length - 1].component : null;
+ const appWarnHandler = instance && instance.appContext.config.warnHandler;
+ const trace = getComponentTrace();
+ if (appWarnHandler) {
+ callWithErrorHandling(
+ appWarnHandler,
+ instance,
+ 11,
+ [
+ // eslint-disable-next-line no-restricted-syntax
+ msg + args.map((a) => {
+ var _a, _b;
+ return (_b = (_a = a.toString) == null ? void 0 : _a.call(a)) != null ? _b : JSON.stringify(a);
+ }).join(""),
+ instance && instance.proxy,
+ trace.map(
+ ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+ ).join("\n"),
+ trace
+ ]
+ );
+ } else {
+ const warnArgs = [`[Vue warn]: ${msg}`, ...args];
+ if (trace.length && // avoid spamming console during tests
+ true) {
+ warnArgs.push(`
+`, ...formatTrace(trace));
+ }
+ console.warn(...warnArgs);
+ }
+ resetTracking();
+ isWarning = false;
+}
+function getComponentTrace() {
+ let currentVNode = stack$1[stack$1.length - 1];
+ if (!currentVNode) {
+ return [];
+ }
+ const normalizedStack = [];
+ while (currentVNode) {
+ const last = normalizedStack[0];
+ if (last && last.vnode === currentVNode) {
+ last.recurseCount++;
+ } else {
+ normalizedStack.push({
+ vnode: currentVNode,
+ recurseCount: 0
+ });
+ }
+ const parentInstance = currentVNode.component && currentVNode.component.parent;
+ currentVNode = parentInstance && parentInstance.vnode;
+ }
+ return normalizedStack;
+}
+function formatTrace(trace) {
+ const logs = [];
+ trace.forEach((entry, i) => {
+ logs.push(...i === 0 ? [] : [`
+`], ...formatTraceEntry(entry));
+ });
+ return logs;
+}
+function formatTraceEntry({ vnode, recurseCount }) {
+ const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
+ const isRoot = vnode.component ? vnode.component.parent == null : false;
+ const open = ` at <${formatComponentName(
+ vnode.component,
+ vnode.type,
+ isRoot
+ )}`;
+ const close = `>` + postfix;
+ return vnode.props ? [open, ...formatProps(vnode.props), close] : [open + close];
+}
+function formatProps(props) {
+ const res = [];
+ const keys = Object.keys(props);
+ keys.slice(0, 3).forEach((key) => {
+ res.push(...formatProp(key, props[key]));
+ });
+ if (keys.length > 3) {
+ res.push(` ...`);
+ }
+ return res;
+}
+function formatProp(key, value, raw) {
+ if (isString(value)) {
+ value = JSON.stringify(value);
+ return raw ? value : [`${key}=${value}`];
+ } else if (typeof value === "number" || typeof value === "boolean" || value == null) {
+ return raw ? value : [`${key}=${value}`];
+ } else if (isRef(value)) {
+ value = formatProp(key, toRaw(value.value), true);
+ return raw ? value : [`${key}=Ref<`, value, `>`];
+ } else if (isFunction(value)) {
+ return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];
+ } else {
+ value = toRaw(value);
+ return raw ? value : [`${key}=`, value];
+ }
+}
+function assertNumber(val, type) {
+ if (val === void 0) {
+ return;
+ } else if (typeof val !== "number") {
+ warn$1(`${type} is not a valid number - got ${JSON.stringify(val)}.`);
+ } else if (isNaN(val)) {
+ warn$1(`${type} is NaN - the duration expression might be incorrect.`);
+ }
+}
+
+const ErrorCodes = {
+ "SETUP_FUNCTION": 0,
+ "0": "SETUP_FUNCTION",
+ "RENDER_FUNCTION": 1,
+ "1": "RENDER_FUNCTION",
+ "WATCH_GETTER": 2,
+ "2": "WATCH_GETTER",
+ "WATCH_CALLBACK": 3,
+ "3": "WATCH_CALLBACK",
+ "WATCH_CLEANUP": 4,
+ "4": "WATCH_CLEANUP",
+ "NATIVE_EVENT_HANDLER": 5,
+ "5": "NATIVE_EVENT_HANDLER",
+ "COMPONENT_EVENT_HANDLER": 6,
+ "6": "COMPONENT_EVENT_HANDLER",
+ "VNODE_HOOK": 7,
+ "7": "VNODE_HOOK",
+ "DIRECTIVE_HOOK": 8,
+ "8": "DIRECTIVE_HOOK",
+ "TRANSITION_HOOK": 9,
+ "9": "TRANSITION_HOOK",
+ "APP_ERROR_HANDLER": 10,
+ "10": "APP_ERROR_HANDLER",
+ "APP_WARN_HANDLER": 11,
+ "11": "APP_WARN_HANDLER",
+ "FUNCTION_REF": 12,
+ "12": "FUNCTION_REF",
+ "ASYNC_COMPONENT_LOADER": 13,
+ "13": "ASYNC_COMPONENT_LOADER",
+ "SCHEDULER": 14,
+ "14": "SCHEDULER",
+ "COMPONENT_UPDATE": 15,
+ "15": "COMPONENT_UPDATE"
+};
+const ErrorTypeStrings$1 = {
+ ["sp"]: "serverPrefetch hook",
+ ["bc"]: "beforeCreate hook",
+ ["c"]: "created hook",
+ ["bm"]: "beforeMount hook",
+ ["m"]: "mounted hook",
+ ["bu"]: "beforeUpdate hook",
+ ["u"]: "updated",
+ ["bum"]: "beforeUnmount hook",
+ ["um"]: "unmounted hook",
+ ["a"]: "activated hook",
+ ["da"]: "deactivated hook",
+ ["ec"]: "errorCaptured hook",
+ ["rtc"]: "renderTracked hook",
+ ["rtg"]: "renderTriggered hook",
+ [0]: "setup function",
+ [1]: "render function",
+ [2]: "watcher getter",
+ [3]: "watcher callback",
+ [4]: "watcher cleanup function",
+ [5]: "native event handler",
+ [6]: "component event handler",
+ [7]: "vnode hook",
+ [8]: "directive hook",
+ [9]: "transition hook",
+ [10]: "app errorHandler",
+ [11]: "app warnHandler",
+ [12]: "ref function",
+ [13]: "async component loader",
+ [14]: "scheduler flush",
+ [15]: "component update"
+};
+function callWithErrorHandling(fn, instance, type, args) {
+ try {
+ return args ? fn(...args) : fn();
+ } catch (err) {
+ handleError(err, instance, type);
+ }
+}
+function callWithAsyncErrorHandling(fn, instance, type, args) {
+ if (isFunction(fn)) {
+ const res = callWithErrorHandling(fn, instance, type, args);
+ if (res && isPromise(res)) {
+ res.catch((err) => {
+ handleError(err, instance, type);
+ });
+ }
+ return res;
+ }
+ if (isArray(fn)) {
+ const values = [];
+ for (let i = 0; i < fn.length; i++) {
+ values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));
+ }
+ return values;
+ } else {
+ warn$1(
+ `Invalid value type passed to callWithAsyncErrorHandling(): ${typeof fn}`
+ );
+ }
+}
+function handleError(err, instance, type, throwInDev = true) {
+ const contextVNode = instance ? instance.vnode : null;
+ if (instance) {
+ let cur = instance.parent;
+ const exposedInstance = instance.proxy;
+ const errorInfo = ErrorTypeStrings$1[type] ;
+ while (cur) {
+ const errorCapturedHooks = cur.ec;
+ if (errorCapturedHooks) {
+ for (let i = 0; i < errorCapturedHooks.length; i++) {
+ if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {
+ return;
+ }
+ }
+ }
+ cur = cur.parent;
+ }
+ const appErrorHandler = instance.appContext.config.errorHandler;
+ if (appErrorHandler) {
+ pauseTracking();
+ callWithErrorHandling(
+ appErrorHandler,
+ null,
+ 10,
+ [err, exposedInstance, errorInfo]
+ );
+ resetTracking();
+ return;
+ }
+ }
+ logError(err, type, contextVNode, throwInDev);
+}
+function logError(err, type, contextVNode, throwInDev = true) {
+ {
+ const info = ErrorTypeStrings$1[type];
+ if (contextVNode) {
+ pushWarningContext(contextVNode);
+ }
+ warn$1(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
+ if (contextVNode) {
+ popWarningContext();
+ }
+ if (throwInDev) {
+ throw err;
+ } else {
+ console.error(err);
+ }
+ }
+}
+
+let isFlushing = false;
+let isFlushPending = false;
+const queue = [];
+let flushIndex = 0;
+const pendingPostFlushCbs = [];
+let activePostFlushCbs = null;
+let postFlushIndex = 0;
+const resolvedPromise = /* @__PURE__ */ Promise.resolve();
+let currentFlushPromise = null;
+const RECURSION_LIMIT = 100;
+function nextTick(fn) {
+ const p = currentFlushPromise || resolvedPromise;
+ return fn ? p.then(this ? fn.bind(this) : fn) : p;
+}
+function findInsertionIndex(id) {
+ let start = flushIndex + 1;
+ let end = queue.length;
+ while (start < end) {
+ const middle = start + end >>> 1;
+ const middleJob = queue[middle];
+ const middleJobId = getId(middleJob);
+ if (middleJobId < id || middleJobId === id && middleJob.pre) {
+ start = middle + 1;
+ } else {
+ end = middle;
+ }
+ }
+ return start;
+}
+function queueJob(job) {
+ if (!queue.length || !queue.includes(
+ job,
+ isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
+ )) {
+ if (job.id == null) {
+ queue.push(job);
+ } else {
+ queue.splice(findInsertionIndex(job.id), 0, job);
+ }
+ queueFlush();
+ }
+}
+function queueFlush() {
+ if (!isFlushing && !isFlushPending) {
+ isFlushPending = true;
+ currentFlushPromise = resolvedPromise.then(flushJobs);
+ }
+}
+function invalidateJob(job) {
+ const i = queue.indexOf(job);
+ if (i > flushIndex) {
+ queue.splice(i, 1);
+ }
+}
+function queuePostFlushCb(cb) {
+ if (!isArray(cb)) {
+ if (!activePostFlushCbs || !activePostFlushCbs.includes(
+ cb,
+ cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
+ )) {
+ pendingPostFlushCbs.push(cb);
+ }
+ } else {
+ pendingPostFlushCbs.push(...cb);
+ }
+ queueFlush();
+}
+function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
+ {
+ seen = seen || /* @__PURE__ */ new Map();
+ }
+ for (; i < queue.length; i++) {
+ const cb = queue[i];
+ if (cb && cb.pre) {
+ if (instance && cb.id !== instance.uid) {
+ continue;
+ }
+ if (checkRecursiveUpdates(seen, cb)) {
+ continue;
+ }
+ queue.splice(i, 1);
+ i--;
+ cb();
+ }
+ }
+}
+function flushPostFlushCbs(seen) {
+ if (pendingPostFlushCbs.length) {
+ const deduped = [...new Set(pendingPostFlushCbs)].sort(
+ (a, b) => getId(a) - getId(b)
+ );
+ pendingPostFlushCbs.length = 0;
+ if (activePostFlushCbs) {
+ activePostFlushCbs.push(...deduped);
+ return;
+ }
+ activePostFlushCbs = deduped;
+ {
+ seen = seen || /* @__PURE__ */ new Map();
+ }
+ for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
+ const cb = activePostFlushCbs[postFlushIndex];
+ if (checkRecursiveUpdates(seen, cb)) {
+ continue;
+ }
+ if (cb.active !== false) cb();
+ }
+ activePostFlushCbs = null;
+ postFlushIndex = 0;
+ }
+}
+const getId = (job) => job.id == null ? Infinity : job.id;
+const comparator = (a, b) => {
+ const diff = getId(a) - getId(b);
+ if (diff === 0) {
+ if (a.pre && !b.pre) return -1;
+ if (b.pre && !a.pre) return 1;
+ }
+ return diff;
+};
+function flushJobs(seen) {
+ isFlushPending = false;
+ isFlushing = true;
+ {
+ seen = seen || /* @__PURE__ */ new Map();
+ }
+ queue.sort(comparator);
+ const check = (job) => checkRecursiveUpdates(seen, job) ;
+ try {
+ for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
+ const job = queue[flushIndex];
+ if (job && job.active !== false) {
+ if (check(job)) {
+ continue;
+ }
+ callWithErrorHandling(
+ job,
+ job.i,
+ job.i ? 15 : 14
+ );
+ }
+ }
+ } finally {
+ flushIndex = 0;
+ queue.length = 0;
+ flushPostFlushCbs(seen);
+ isFlushing = false;
+ currentFlushPromise = null;
+ if (queue.length || pendingPostFlushCbs.length) {
+ flushJobs(seen);
+ }
+ }
+}
+function checkRecursiveUpdates(seen, fn) {
+ if (!seen.has(fn)) {
+ seen.set(fn, 1);
+ } else {
+ const count = seen.get(fn);
+ if (count > RECURSION_LIMIT) {
+ const instance = fn.i;
+ const componentName = instance && getComponentName(instance.type);
+ handleError(
+ `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
+ null,
+ 10
+ );
+ return true;
+ } else {
+ seen.set(fn, count + 1);
+ }
+ }
+}
+
+let isHmrUpdating = false;
+const hmrDirtyComponents = /* @__PURE__ */ new Map();
+{
+ getGlobalThis().__VUE_HMR_RUNTIME__ = {
+ createRecord: tryWrap(createRecord),
+ rerender: tryWrap(rerender),
+ reload: tryWrap(reload)
+ };
+}
+const map = /* @__PURE__ */ new Map();
+function registerHMR(instance) {
+ const id = instance.type.__hmrId;
+ let record = map.get(id);
+ if (!record) {
+ createRecord(id, instance.type);
+ record = map.get(id);
+ }
+ record.instances.add(instance);
+}
+function unregisterHMR(instance) {
+ map.get(instance.type.__hmrId).instances.delete(instance);
+}
+function createRecord(id, initialDef) {
+ if (map.has(id)) {
+ return false;
+ }
+ map.set(id, {
+ initialDef: normalizeClassComponent(initialDef),
+ instances: /* @__PURE__ */ new Set()
+ });
+ return true;
+}
+function normalizeClassComponent(component) {
+ return isClassComponent(component) ? component.__vccOpts : component;
+}
+function rerender(id, newRender) {
+ const record = map.get(id);
+ if (!record) {
+ return;
+ }
+ record.initialDef.render = newRender;
+ [...record.instances].forEach((instance) => {
+ if (newRender) {
+ instance.render = newRender;
+ normalizeClassComponent(instance.type).render = newRender;
+ }
+ instance.renderCache = [];
+ isHmrUpdating = true;
+ instance.effect.dirty = true;
+ instance.update();
+ isHmrUpdating = false;
+ });
+}
+function reload(id, newComp) {
+ const record = map.get(id);
+ if (!record) return;
+ newComp = normalizeClassComponent(newComp);
+ updateComponentDef(record.initialDef, newComp);
+ const instances = [...record.instances];
+ for (let i = 0; i < instances.length; i++) {
+ const instance = instances[i];
+ const oldComp = normalizeClassComponent(instance.type);
+ let dirtyInstances = hmrDirtyComponents.get(oldComp);
+ if (!dirtyInstances) {
+ if (oldComp !== record.initialDef) {
+ updateComponentDef(oldComp, newComp);
+ }
+ hmrDirtyComponents.set(oldComp, dirtyInstances = /* @__PURE__ */ new Set());
+ }
+ dirtyInstances.add(instance);
+ instance.appContext.propsCache.delete(instance.type);
+ instance.appContext.emitsCache.delete(instance.type);
+ instance.appContext.optionsCache.delete(instance.type);
+ if (instance.ceReload) {
+ dirtyInstances.add(instance);
+ instance.ceReload(newComp.styles);
+ dirtyInstances.delete(instance);
+ } else if (instance.parent) {
+ instance.parent.effect.dirty = true;
+ queueJob(() => {
+ instance.parent.update();
+ dirtyInstances.delete(instance);
+ });
+ } else if (instance.appContext.reload) {
+ instance.appContext.reload();
+ } else if (typeof window !== "undefined") {
+ window.location.reload();
+ } else {
+ console.warn(
+ "[HMR] Root or manually mounted instance modified. Full reload required."
+ );
+ }
+ }
+ queuePostFlushCb(() => {
+ hmrDirtyComponents.clear();
+ });
+}
+function updateComponentDef(oldComp, newComp) {
+ extend(oldComp, newComp);
+ for (const key in oldComp) {
+ if (key !== "__file" && !(key in newComp)) {
+ delete oldComp[key];
+ }
+ }
+}
+function tryWrap(fn) {
+ return (id, arg) => {
+ try {
+ return fn(id, arg);
+ } catch (e) {
+ console.error(e);
+ console.warn(
+ `[HMR] Something went wrong during Vue component hot-reload. Full reload required.`
+ );
+ }
+ };
+}
+
+let devtools$1;
+let buffer = [];
+let devtoolsNotInstalled = false;
+function emit$1(event, ...args) {
+ if (devtools$1) {
+ devtools$1.emit(event, ...args);
+ } else if (!devtoolsNotInstalled) {
+ buffer.push({ event, args });
+ }
+}
+function setDevtoolsHook$1(hook, target) {
+ var _a, _b;
+ devtools$1 = hook;
+ if (devtools$1) {
+ devtools$1.enabled = true;
+ buffer.forEach(({ event, args }) => devtools$1.emit(event, ...args));
+ buffer = [];
+ } else if (
+ // handle late devtools injection - only do this if we are in an actual
+ // browser environment to avoid the timer handle stalling test runner exit
+ // (#4815)
+ typeof window !== "undefined" && // some envs mock window but not fully
+ window.HTMLElement && // also exclude jsdom
+ // eslint-disable-next-line no-restricted-syntax
+ !((_b = (_a = window.navigator) == null ? void 0 : _a.userAgent) == null ? void 0 : _b.includes("jsdom"))
+ ) {
+ const replay = target.__VUE_DEVTOOLS_HOOK_REPLAY__ = target.__VUE_DEVTOOLS_HOOK_REPLAY__ || [];
+ replay.push((newHook) => {
+ setDevtoolsHook$1(newHook, target);
+ });
+ setTimeout(() => {
+ if (!devtools$1) {
+ target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
+ devtoolsNotInstalled = true;
+ buffer = [];
+ }
+ }, 3e3);
+ } else {
+ devtoolsNotInstalled = true;
+ buffer = [];
+ }
+}
+function devtoolsInitApp(app, version) {
+ emit$1("app:init" /* APP_INIT */, app, version, {
+ Fragment,
+ Text,
+ Comment,
+ Static
+ });
+}
+function devtoolsUnmountApp(app) {
+ emit$1("app:unmount" /* APP_UNMOUNT */, app);
+}
+const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
+ "component:added" /* COMPONENT_ADDED */
+);
+const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
+const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
+ "component:removed" /* COMPONENT_REMOVED */
+);
+const devtoolsComponentRemoved = (component) => {
+ if (devtools$1 && typeof devtools$1.cleanupBuffer === "function" && // remove the component if it wasn't buffered
+ !devtools$1.cleanupBuffer(component)) {
+ _devtoolsComponentRemoved(component);
+ }
+};
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function createDevtoolsComponentHook(hook) {
+ return (component) => {
+ emit$1(
+ hook,
+ component.appContext.app,
+ component.uid,
+ component.parent ? component.parent.uid : void 0,
+ component
+ );
+ };
+}
+const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
+ "perf:start" /* PERFORMANCE_START */
+);
+const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
+ "perf:end" /* PERFORMANCE_END */
+);
+function createDevtoolsPerformanceHook(hook) {
+ return (component, type, time) => {
+ emit$1(hook, component.appContext.app, component.uid, component, type, time);
+ };
+}
+function devtoolsComponentEmit(component, event, params) {
+ emit$1(
+ "component:emit" /* COMPONENT_EMIT */,
+ component.appContext.app,
+ component,
+ event,
+ params
+ );
+}
+
+let currentRenderingInstance = null;
+let currentScopeId = null;
+function setCurrentRenderingInstance(instance) {
+ const prev = currentRenderingInstance;
+ currentRenderingInstance = instance;
+ currentScopeId = instance && instance.type.__scopeId || null;
+ return prev;
+}
+function pushScopeId(id) {
+ currentScopeId = id;
+}
+function popScopeId() {
+ currentScopeId = null;
+}
+const withScopeId = (_id) => withCtx;
+function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot) {
+ if (!ctx) return fn;
+ if (fn._n) {
+ return fn;
+ }
+ const renderFnWithContext = (...args) => {
+ if (renderFnWithContext._d) {
+ setBlockTracking(-1);
+ }
+ const prevInstance = setCurrentRenderingInstance(ctx);
+ let res;
+ try {
+ res = fn(...args);
+ } finally {
+ setCurrentRenderingInstance(prevInstance);
+ if (renderFnWithContext._d) {
+ setBlockTracking(1);
+ }
+ }
+ {
+ devtoolsComponentUpdated(ctx);
+ }
+ return res;
+ };
+ renderFnWithContext._n = true;
+ renderFnWithContext._c = true;
+ renderFnWithContext._d = true;
+ return renderFnWithContext;
+}
+
+function validateDirectiveName(name) {
+ if (isBuiltInDirective(name)) {
+ warn$1("Do not use built-in directive ids as custom directive id: " + name);
+ }
+}
+function withDirectives(vnode, directives) {
+ if (currentRenderingInstance === null) {
+ warn$1(`withDirectives can only be used inside render functions.`);
+ return vnode;
+ }
+ const instance = getComponentPublicInstance(currentRenderingInstance);
+ const bindings = vnode.dirs || (vnode.dirs = []);
+ for (let i = 0; i < directives.length; i++) {
+ let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
+ if (dir) {
+ if (isFunction(dir)) {
+ dir = {
+ mounted: dir,
+ updated: dir
+ };
+ }
+ if (dir.deep) {
+ traverse(value);
+ }
+ bindings.push({
+ dir,
+ instance,
+ value,
+ oldValue: void 0,
+ arg,
+ modifiers
+ });
+ }
+ }
+ return vnode;
+}
+function invokeDirectiveHook(vnode, prevVNode, instance, name) {
+ const bindings = vnode.dirs;
+ const oldBindings = prevVNode && prevVNode.dirs;
+ for (let i = 0; i < bindings.length; i++) {
+ const binding = bindings[i];
+ if (oldBindings) {
+ binding.oldValue = oldBindings[i].value;
+ }
+ let hook = binding.dir[name];
+ if (hook) {
+ pauseTracking();
+ callWithAsyncErrorHandling(hook, instance, 8, [
+ vnode.el,
+ binding,
+ vnode,
+ prevVNode
+ ]);
+ resetTracking();
+ }
+ }
+}
+
+const leaveCbKey = Symbol("_leaveCb");
+const enterCbKey$1 = Symbol("_enterCb");
+function useTransitionState() {
+ const state = {
+ isMounted: false,
+ isLeaving: false,
+ isUnmounting: false,
+ leavingVNodes: /* @__PURE__ */ new Map()
+ };
+ onMounted(() => {
+ state.isMounted = true;
+ });
+ onBeforeUnmount(() => {
+ state.isUnmounting = true;
+ });
+ return state;
+}
+const TransitionHookValidator = [Function, Array];
+const BaseTransitionPropsValidators = {
+ mode: String,
+ appear: Boolean,
+ persisted: Boolean,
+ // enter
+ onBeforeEnter: TransitionHookValidator,
+ onEnter: TransitionHookValidator,
+ onAfterEnter: TransitionHookValidator,
+ onEnterCancelled: TransitionHookValidator,
+ // leave
+ onBeforeLeave: TransitionHookValidator,
+ onLeave: TransitionHookValidator,
+ onAfterLeave: TransitionHookValidator,
+ onLeaveCancelled: TransitionHookValidator,
+ // appear
+ onBeforeAppear: TransitionHookValidator,
+ onAppear: TransitionHookValidator,
+ onAfterAppear: TransitionHookValidator,
+ onAppearCancelled: TransitionHookValidator
+};
+const recursiveGetSubtree = (instance) => {
+ const subTree = instance.subTree;
+ return subTree.component ? recursiveGetSubtree(subTree.component) : subTree;
+};
+const BaseTransitionImpl = {
+ name: `BaseTransition`,
+ props: BaseTransitionPropsValidators,
+ setup(props, { slots }) {
+ const instance = getCurrentInstance();
+ const state = useTransitionState();
+ return () => {
+ const children = slots.default && getTransitionRawChildren(slots.default(), true);
+ if (!children || !children.length) {
+ return;
+ }
+ let child = children[0];
+ if (children.length > 1) {
+ let hasFound = false;
+ for (const c of children) {
+ if (c.type !== Comment) {
+ if (hasFound) {
+ warn$1(
+ " can only be used on a single element or component. Use for lists."
+ );
+ break;
+ }
+ child = c;
+ hasFound = true;
+ }
+ }
+ }
+ const rawProps = toRaw(props);
+ const { mode } = rawProps;
+ if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
+ warn$1(`invalid mode: ${mode}`);
+ }
+ if (state.isLeaving) {
+ return emptyPlaceholder(child);
+ }
+ const innerChild = getKeepAliveChild(child);
+ if (!innerChild) {
+ return emptyPlaceholder(child);
+ }
+ let enterHooks = resolveTransitionHooks(
+ innerChild,
+ rawProps,
+ state,
+ instance,
+ // #11061, ensure enterHooks is fresh after clone
+ (hooks) => enterHooks = hooks
+ );
+ setTransitionHooks(innerChild, enterHooks);
+ const oldChild = instance.subTree;
+ const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
+ if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild) && recursiveGetSubtree(instance).type !== Comment) {
+ const leavingHooks = resolveTransitionHooks(
+ oldInnerChild,
+ rawProps,
+ state,
+ instance
+ );
+ setTransitionHooks(oldInnerChild, leavingHooks);
+ if (mode === "out-in" && innerChild.type !== Comment) {
+ state.isLeaving = true;
+ leavingHooks.afterLeave = () => {
+ state.isLeaving = false;
+ if (instance.update.active !== false) {
+ instance.effect.dirty = true;
+ instance.update();
+ }
+ };
+ return emptyPlaceholder(child);
+ } else if (mode === "in-out" && innerChild.type !== Comment) {
+ leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
+ const leavingVNodesCache = getLeavingNodesForType(
+ state,
+ oldInnerChild
+ );
+ leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
+ el[leaveCbKey] = () => {
+ earlyRemove();
+ el[leaveCbKey] = void 0;
+ delete enterHooks.delayedLeave;
+ };
+ enterHooks.delayedLeave = delayedLeave;
+ };
+ }
+ }
+ return child;
+ };
+ }
+};
+const BaseTransition = BaseTransitionImpl;
+function getLeavingNodesForType(state, vnode) {
+ const { leavingVNodes } = state;
+ let leavingVNodesCache = leavingVNodes.get(vnode.type);
+ if (!leavingVNodesCache) {
+ leavingVNodesCache = /* @__PURE__ */ Object.create(null);
+ leavingVNodes.set(vnode.type, leavingVNodesCache);
+ }
+ return leavingVNodesCache;
+}
+function resolveTransitionHooks(vnode, props, state, instance, postClone) {
+ const {
+ appear,
+ mode,
+ persisted = false,
+ onBeforeEnter,
+ onEnter,
+ onAfterEnter,
+ onEnterCancelled,
+ onBeforeLeave,
+ onLeave,
+ onAfterLeave,
+ onLeaveCancelled,
+ onBeforeAppear,
+ onAppear,
+ onAfterAppear,
+ onAppearCancelled
+ } = props;
+ const key = String(vnode.key);
+ const leavingVNodesCache = getLeavingNodesForType(state, vnode);
+ const callHook = (hook, args) => {
+ hook && callWithAsyncErrorHandling(
+ hook,
+ instance,
+ 9,
+ args
+ );
+ };
+ const callAsyncHook = (hook, args) => {
+ const done = args[1];
+ callHook(hook, args);
+ if (isArray(hook)) {
+ if (hook.every((hook2) => hook2.length <= 1)) done();
+ } else if (hook.length <= 1) {
+ done();
+ }
+ };
+ const hooks = {
+ mode,
+ persisted,
+ beforeEnter(el) {
+ let hook = onBeforeEnter;
+ if (!state.isMounted) {
+ if (appear) {
+ hook = onBeforeAppear || onBeforeEnter;
+ } else {
+ return;
+ }
+ }
+ if (el[leaveCbKey]) {
+ el[leaveCbKey](
+ true
+ /* cancelled */
+ );
+ }
+ const leavingVNode = leavingVNodesCache[key];
+ if (leavingVNode && isSameVNodeType(vnode, leavingVNode) && leavingVNode.el[leaveCbKey]) {
+ leavingVNode.el[leaveCbKey]();
+ }
+ callHook(hook, [el]);
+ },
+ enter(el) {
+ let hook = onEnter;
+ let afterHook = onAfterEnter;
+ let cancelHook = onEnterCancelled;
+ if (!state.isMounted) {
+ if (appear) {
+ hook = onAppear || onEnter;
+ afterHook = onAfterAppear || onAfterEnter;
+ cancelHook = onAppearCancelled || onEnterCancelled;
+ } else {
+ return;
+ }
+ }
+ let called = false;
+ const done = el[enterCbKey$1] = (cancelled) => {
+ if (called) return;
+ called = true;
+ if (cancelled) {
+ callHook(cancelHook, [el]);
+ } else {
+ callHook(afterHook, [el]);
+ }
+ if (hooks.delayedLeave) {
+ hooks.delayedLeave();
+ }
+ el[enterCbKey$1] = void 0;
+ };
+ if (hook) {
+ callAsyncHook(hook, [el, done]);
+ } else {
+ done();
+ }
+ },
+ leave(el, remove) {
+ const key2 = String(vnode.key);
+ if (el[enterCbKey$1]) {
+ el[enterCbKey$1](
+ true
+ /* cancelled */
+ );
+ }
+ if (state.isUnmounting) {
+ return remove();
+ }
+ callHook(onBeforeLeave, [el]);
+ let called = false;
+ const done = el[leaveCbKey] = (cancelled) => {
+ if (called) return;
+ called = true;
+ remove();
+ if (cancelled) {
+ callHook(onLeaveCancelled, [el]);
+ } else {
+ callHook(onAfterLeave, [el]);
+ }
+ el[leaveCbKey] = void 0;
+ if (leavingVNodesCache[key2] === vnode) {
+ delete leavingVNodesCache[key2];
+ }
+ };
+ leavingVNodesCache[key2] = vnode;
+ if (onLeave) {
+ callAsyncHook(onLeave, [el, done]);
+ } else {
+ done();
+ }
+ },
+ clone(vnode2) {
+ const hooks2 = resolveTransitionHooks(
+ vnode2,
+ props,
+ state,
+ instance,
+ postClone
+ );
+ if (postClone) postClone(hooks2);
+ return hooks2;
+ }
+ };
+ return hooks;
+}
+function emptyPlaceholder(vnode) {
+ if (isKeepAlive(vnode)) {
+ vnode = cloneVNode(vnode);
+ vnode.children = null;
+ return vnode;
+ }
+}
+function getKeepAliveChild(vnode) {
+ if (!isKeepAlive(vnode)) {
+ return vnode;
+ }
+ if (vnode.component) {
+ return vnode.component.subTree;
+ }
+ const { shapeFlag, children } = vnode;
+ if (children) {
+ if (shapeFlag & 16) {
+ return children[0];
+ }
+ if (shapeFlag & 32 && isFunction(children.default)) {
+ return children.default();
+ }
+ }
+}
+function setTransitionHooks(vnode, hooks) {
+ if (vnode.shapeFlag & 6 && vnode.component) {
+ setTransitionHooks(vnode.component.subTree, hooks);
+ } else if (vnode.shapeFlag & 128) {
+ vnode.ssContent.transition = hooks.clone(vnode.ssContent);
+ vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
+ } else {
+ vnode.transition = hooks;
+ }
+}
+function getTransitionRawChildren(children, keepComment = false, parentKey) {
+ let ret = [];
+ let keyedFragmentCount = 0;
+ for (let i = 0; i < children.length; i++) {
+ let child = children[i];
+ const key = parentKey == null ? child.key : String(parentKey) + String(child.key != null ? child.key : i);
+ if (child.type === Fragment) {
+ if (child.patchFlag & 128) keyedFragmentCount++;
+ ret = ret.concat(
+ getTransitionRawChildren(child.children, keepComment, key)
+ );
+ } else if (keepComment || child.type !== Comment) {
+ ret.push(key != null ? cloneVNode(child, { key }) : child);
+ }
+ }
+ if (keyedFragmentCount > 1) {
+ for (let i = 0; i < ret.length; i++) {
+ ret[i].patchFlag = -2;
+ }
+ }
+ return ret;
+}
+
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function defineComponent(options, extraOptions) {
+ return isFunction(options) ? (
+ // #8326: extend call and options.name access are considered side-effects
+ // by Rollup, so we have to wrap it in a pure-annotated IIFE.
+ /* @__PURE__ */ (() => extend({ name: options.name }, extraOptions, { setup: options }))()
+ ) : options;
+}
+
+const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function defineAsyncComponent(source) {
+ if (isFunction(source)) {
+ source = { loader: source };
+ }
+ const {
+ loader,
+ loadingComponent,
+ errorComponent,
+ delay = 200,
+ timeout,
+ // undefined = never times out
+ suspensible = true,
+ onError: userOnError
+ } = source;
+ let pendingRequest = null;
+ let resolvedComp;
+ let retries = 0;
+ const retry = () => {
+ retries++;
+ pendingRequest = null;
+ return load();
+ };
+ const load = () => {
+ let thisRequest;
+ return pendingRequest || (thisRequest = pendingRequest = loader().catch((err) => {
+ err = err instanceof Error ? err : new Error(String(err));
+ if (userOnError) {
+ return new Promise((resolve, reject) => {
+ const userRetry = () => resolve(retry());
+ const userFail = () => reject(err);
+ userOnError(err, userRetry, userFail, retries + 1);
+ });
+ } else {
+ throw err;
+ }
+ }).then((comp) => {
+ if (thisRequest !== pendingRequest && pendingRequest) {
+ return pendingRequest;
+ }
+ if (!comp) {
+ warn$1(
+ `Async component loader resolved to undefined. If you are using retry(), make sure to return its return value.`
+ );
+ }
+ if (comp && (comp.__esModule || comp[Symbol.toStringTag] === "Module")) {
+ comp = comp.default;
+ }
+ if (comp && !isObject(comp) && !isFunction(comp)) {
+ throw new Error(`Invalid async component load result: ${comp}`);
+ }
+ resolvedComp = comp;
+ return comp;
+ }));
+ };
+ return defineComponent({
+ name: "AsyncComponentWrapper",
+ __asyncLoader: load,
+ get __asyncResolved() {
+ return resolvedComp;
+ },
+ setup() {
+ const instance = currentInstance;
+ if (resolvedComp) {
+ return () => createInnerComp(resolvedComp, instance);
+ }
+ const onError = (err) => {
+ pendingRequest = null;
+ handleError(
+ err,
+ instance,
+ 13,
+ !errorComponent
+ );
+ };
+ if (suspensible && instance.suspense || false) {
+ return load().then((comp) => {
+ return () => createInnerComp(comp, instance);
+ }).catch((err) => {
+ onError(err);
+ return () => errorComponent ? createVNode(errorComponent, {
+ error: err
+ }) : null;
+ });
+ }
+ const loaded = ref(false);
+ const error = ref();
+ const delayed = ref(!!delay);
+ if (delay) {
+ setTimeout(() => {
+ delayed.value = false;
+ }, delay);
+ }
+ if (timeout != null) {
+ setTimeout(() => {
+ if (!loaded.value && !error.value) {
+ const err = new Error(
+ `Async component timed out after ${timeout}ms.`
+ );
+ onError(err);
+ error.value = err;
+ }
+ }, timeout);
+ }
+ load().then(() => {
+ loaded.value = true;
+ if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+ instance.parent.effect.dirty = true;
+ queueJob(instance.parent.update);
+ }
+ }).catch((err) => {
+ onError(err);
+ error.value = err;
+ });
+ return () => {
+ if (loaded.value && resolvedComp) {
+ return createInnerComp(resolvedComp, instance);
+ } else if (error.value && errorComponent) {
+ return createVNode(errorComponent, {
+ error: error.value
+ });
+ } else if (loadingComponent && !delayed.value) {
+ return createVNode(loadingComponent);
+ }
+ };
+ }
+ });
+}
+function createInnerComp(comp, parent) {
+ const { ref: ref2, props, children, ce } = parent.vnode;
+ const vnode = createVNode(comp, props, children);
+ vnode.ref = ref2;
+ vnode.ce = ce;
+ delete parent.vnode.ce;
+ return vnode;
+}
+
+const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
+const KeepAliveImpl = {
+ name: `KeepAlive`,
+ // Marker for special handling inside the renderer. We are not using a ===
+ // check directly on KeepAlive in the renderer, because importing it directly
+ // would prevent it from being tree-shaken.
+ __isKeepAlive: true,
+ props: {
+ include: [String, RegExp, Array],
+ exclude: [String, RegExp, Array],
+ max: [String, Number]
+ },
+ setup(props, { slots }) {
+ const instance = getCurrentInstance();
+ const sharedContext = instance.ctx;
+ const cache = /* @__PURE__ */ new Map();
+ const keys = /* @__PURE__ */ new Set();
+ let current = null;
+ {
+ instance.__v_cache = cache;
+ }
+ const parentSuspense = instance.suspense;
+ const {
+ renderer: {
+ p: patch,
+ m: move,
+ um: _unmount,
+ o: { createElement }
+ }
+ } = sharedContext;
+ const storageContainer = createElement("div");
+ sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
+ const instance2 = vnode.component;
+ move(vnode, container, anchor, 0, parentSuspense);
+ patch(
+ instance2.vnode,
+ vnode,
+ container,
+ anchor,
+ instance2,
+ parentSuspense,
+ namespace,
+ vnode.slotScopeIds,
+ optimized
+ );
+ queuePostRenderEffect(() => {
+ instance2.isDeactivated = false;
+ if (instance2.a) {
+ invokeArrayFns(instance2.a);
+ }
+ const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+ if (vnodeHook) {
+ invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+ }
+ }, parentSuspense);
+ {
+ devtoolsComponentAdded(instance2);
+ }
+ };
+ sharedContext.deactivate = (vnode) => {
+ const instance2 = vnode.component;
+ invalidateMount(instance2.m);
+ invalidateMount(instance2.a);
+ move(vnode, storageContainer, null, 1, parentSuspense);
+ queuePostRenderEffect(() => {
+ if (instance2.da) {
+ invokeArrayFns(instance2.da);
+ }
+ const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+ if (vnodeHook) {
+ invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+ }
+ instance2.isDeactivated = true;
+ }, parentSuspense);
+ {
+ devtoolsComponentAdded(instance2);
+ }
+ };
+ function unmount(vnode) {
+ resetShapeFlag(vnode);
+ _unmount(vnode, instance, parentSuspense, true);
+ }
+ function pruneCache(filter) {
+ cache.forEach((vnode, key) => {
+ const name = getComponentName(vnode.type);
+ if (name && (!filter || !filter(name))) {
+ pruneCacheEntry(key);
+ }
+ });
+ }
+ function pruneCacheEntry(key) {
+ const cached = cache.get(key);
+ if (cached && (!current || !isSameVNodeType(cached, current))) {
+ unmount(cached);
+ } else if (current) {
+ resetShapeFlag(current);
+ }
+ cache.delete(key);
+ keys.delete(key);
+ }
+ watch(
+ () => [props.include, props.exclude],
+ ([include, exclude]) => {
+ include && pruneCache((name) => matches(include, name));
+ exclude && pruneCache((name) => !matches(exclude, name));
+ },
+ // prune post-render after `current` has been updated
+ { flush: "post", deep: true }
+ );
+ let pendingCacheKey = null;
+ const cacheSubtree = () => {
+ if (pendingCacheKey != null) {
+ if (isSuspense(instance.subTree.type)) {
+ queuePostRenderEffect(() => {
+ cache.set(pendingCacheKey, getInnerChild(instance.subTree));
+ }, instance.subTree.suspense);
+ } else {
+ cache.set(pendingCacheKey, getInnerChild(instance.subTree));
+ }
+ }
+ };
+ onMounted(cacheSubtree);
+ onUpdated(cacheSubtree);
+ onBeforeUnmount(() => {
+ cache.forEach((cached) => {
+ const { subTree, suspense } = instance;
+ const vnode = getInnerChild(subTree);
+ if (cached.type === vnode.type && cached.key === vnode.key) {
+ resetShapeFlag(vnode);
+ const da = vnode.component.da;
+ da && queuePostRenderEffect(da, suspense);
+ return;
+ }
+ unmount(cached);
+ });
+ });
+ return () => {
+ pendingCacheKey = null;
+ if (!slots.default) {
+ return null;
+ }
+ const children = slots.default();
+ const rawVNode = children[0];
+ if (children.length > 1) {
+ {
+ warn$1(`KeepAlive should contain exactly one component child.`);
+ }
+ current = null;
+ return children;
+ } else if (!isVNode(rawVNode) || !(rawVNode.shapeFlag & 4) && !(rawVNode.shapeFlag & 128)) {
+ current = null;
+ return rawVNode;
+ }
+ let vnode = getInnerChild(rawVNode);
+ if (vnode.type === Comment) {
+ current = null;
+ return vnode;
+ }
+ const comp = vnode.type;
+ const name = getComponentName(
+ isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
+ );
+ const { include, exclude, max } = props;
+ if (include && (!name || !matches(include, name)) || exclude && name && matches(exclude, name)) {
+ current = vnode;
+ return rawVNode;
+ }
+ const key = vnode.key == null ? comp : vnode.key;
+ const cachedVNode = cache.get(key);
+ if (vnode.el) {
+ vnode = cloneVNode(vnode);
+ if (rawVNode.shapeFlag & 128) {
+ rawVNode.ssContent = vnode;
+ }
+ }
+ pendingCacheKey = key;
+ if (cachedVNode) {
+ vnode.el = cachedVNode.el;
+ vnode.component = cachedVNode.component;
+ if (vnode.transition) {
+ setTransitionHooks(vnode, vnode.transition);
+ }
+ vnode.shapeFlag |= 512;
+ keys.delete(key);
+ keys.add(key);
+ } else {
+ keys.add(key);
+ if (max && keys.size > parseInt(max, 10)) {
+ pruneCacheEntry(keys.values().next().value);
+ }
+ }
+ vnode.shapeFlag |= 256;
+ current = vnode;
+ return isSuspense(rawVNode.type) ? rawVNode : vnode;
+ };
+ }
+};
+const KeepAlive = KeepAliveImpl;
+function matches(pattern, name) {
+ if (isArray(pattern)) {
+ return pattern.some((p) => matches(p, name));
+ } else if (isString(pattern)) {
+ return pattern.split(",").includes(name);
+ } else if (isRegExp(pattern)) {
+ return pattern.test(name);
+ }
+ return false;
+}
+function onActivated(hook, target) {
+ registerKeepAliveHook(hook, "a", target);
+}
+function onDeactivated(hook, target) {
+ registerKeepAliveHook(hook, "da", target);
+}
+function registerKeepAliveHook(hook, type, target = currentInstance) {
+ const wrappedHook = hook.__wdc || (hook.__wdc = () => {
+ let current = target;
+ while (current) {
+ if (current.isDeactivated) {
+ return;
+ }
+ current = current.parent;
+ }
+ return hook();
+ });
+ injectHook(type, wrappedHook, target);
+ if (target) {
+ let current = target.parent;
+ while (current && current.parent) {
+ if (isKeepAlive(current.parent.vnode)) {
+ injectToKeepAliveRoot(wrappedHook, type, target, current);
+ }
+ current = current.parent;
+ }
+ }
+}
+function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {
+ const injected = injectHook(
+ type,
+ hook,
+ keepAliveRoot,
+ true
+ /* prepend */
+ );
+ onUnmounted(() => {
+ remove(keepAliveRoot[type], injected);
+ }, target);
+}
+function resetShapeFlag(vnode) {
+ vnode.shapeFlag &= ~256;
+ vnode.shapeFlag &= ~512;
+}
+function getInnerChild(vnode) {
+ return vnode.shapeFlag & 128 ? vnode.ssContent : vnode;
+}
+
+function injectHook(type, hook, target = currentInstance, prepend = false) {
+ if (target) {
+ const hooks = target[type] || (target[type] = []);
+ const wrappedHook = hook.__weh || (hook.__weh = (...args) => {
+ pauseTracking();
+ const reset = setCurrentInstance(target);
+ const res = callWithAsyncErrorHandling(hook, target, type, args);
+ reset();
+ resetTracking();
+ return res;
+ });
+ if (prepend) {
+ hooks.unshift(wrappedHook);
+ } else {
+ hooks.push(wrappedHook);
+ }
+ return wrappedHook;
+ } else {
+ const apiName = toHandlerKey(ErrorTypeStrings$1[type].replace(/ hook$/, ""));
+ warn$1(
+ `${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().` + (` If you are using async setup(), make sure to register lifecycle hooks before the first await statement.` )
+ );
+ }
+}
+const createHook = (lifecycle) => (hook, target = currentInstance) => {
+ if (!isInSSRComponentSetup || lifecycle === "sp") {
+ injectHook(lifecycle, (...args) => hook(...args), target);
+ }
+};
+const onBeforeMount = createHook("bm");
+const onMounted = createHook("m");
+const onBeforeUpdate = createHook("bu");
+const onUpdated = createHook("u");
+const onBeforeUnmount = createHook("bum");
+const onUnmounted = createHook("um");
+const onServerPrefetch = createHook("sp");
+const onRenderTriggered = createHook(
+ "rtg"
+);
+const onRenderTracked = createHook(
+ "rtc"
+);
+function onErrorCaptured(hook, target = currentInstance) {
+ injectHook("ec", hook, target);
+}
+
+const COMPONENTS = "components";
+const DIRECTIVES = "directives";
+function resolveComponent(name, maybeSelfReference) {
+ return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+}
+const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
+function resolveDynamicComponent(component) {
+ if (isString(component)) {
+ return resolveAsset(COMPONENTS, component, false) || component;
+ } else {
+ return component || NULL_DYNAMIC_COMPONENT;
+ }
+}
+function resolveDirective(name) {
+ return resolveAsset(DIRECTIVES, name);
+}
+function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+ const instance = currentRenderingInstance || currentInstance;
+ if (instance) {
+ const Component = instance.type;
+ if (type === COMPONENTS) {
+ const selfName = getComponentName(
+ Component,
+ false
+ );
+ if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
+ return Component;
+ }
+ }
+ const res = (
+ // local registration
+ // check instance[type] first which is resolved for options API
+ resolve(instance[type] || Component[type], name) || // global registration
+ resolve(instance.appContext[type], name)
+ );
+ if (!res && maybeSelfReference) {
+ return Component;
+ }
+ if (warnMissing && !res) {
+ const extra = type === COMPONENTS ? `
+If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
+ warn$1(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
+ }
+ return res;
+ } else {
+ warn$1(
+ `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
+ );
+ }
+}
+function resolve(registry, name) {
+ return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]);
+}
+
+function renderList(source, renderItem, cache, index) {
+ let ret;
+ const cached = cache && cache[index];
+ if (isArray(source) || isString(source)) {
+ ret = new Array(source.length);
+ for (let i = 0, l = source.length; i < l; i++) {
+ ret[i] = renderItem(source[i], i, void 0, cached && cached[i]);
+ }
+ } else if (typeof source === "number") {
+ if (!Number.isInteger(source)) {
+ warn$1(`The v-for range expect an integer value but got ${source}.`);
+ }
+ ret = new Array(source);
+ for (let i = 0; i < source; i++) {
+ ret[i] = renderItem(i + 1, i, void 0, cached && cached[i]);
+ }
+ } else if (isObject(source)) {
+ if (source[Symbol.iterator]) {
+ ret = Array.from(
+ source,
+ (item, i) => renderItem(item, i, void 0, cached && cached[i])
+ );
+ } else {
+ const keys = Object.keys(source);
+ ret = new Array(keys.length);
+ for (let i = 0, l = keys.length; i < l; i++) {
+ const key = keys[i];
+ ret[i] = renderItem(source[key], key, i, cached && cached[i]);
+ }
+ }
+ } else {
+ ret = [];
+ }
+ if (cache) {
+ cache[index] = ret;
+ }
+ return ret;
+}
+
+function createSlots(slots, dynamicSlots) {
+ for (let i = 0; i < dynamicSlots.length; i++) {
+ const slot = dynamicSlots[i];
+ if (isArray(slot)) {
+ for (let j = 0; j < slot.length; j++) {
+ slots[slot[j].name] = slot[j].fn;
+ }
+ } else if (slot) {
+ slots[slot.name] = slot.key ? (...args) => {
+ const res = slot.fn(...args);
+ if (res) res.key = slot.key;
+ return res;
+ } : slot.fn;
+ }
+ }
+ return slots;
+}
+
+function renderSlot(slots, name, props = {}, fallback, noSlotted) {
+ if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+ if (name !== "default") props.name = name;
+ return createVNode("slot", props, fallback && fallback());
+ }
+ let slot = slots[name];
+ if (slot && slot.length > 1) {
+ warn$1(
+ `SSR-optimized slot function detected in a non-SSR-optimized render function. You need to mark this component with $dynamic-slots in the parent template.`
+ );
+ slot = () => [];
+ }
+ if (slot && slot._c) {
+ slot._d = false;
+ }
+ openBlock();
+ const validSlotContent = slot && ensureValidVNode(slot(props));
+ const rendered = createBlock(
+ Fragment,
+ {
+ key: (props.key || // slot content array of a dynamic conditional slot may have a branch
+ // key attached in the `createSlots` helper, respect that
+ validSlotContent && validSlotContent.key || `_${name}`) + // #7256 force differentiate fallback content from actual content
+ (!validSlotContent && fallback ? "_fb" : "")
+ },
+ validSlotContent || (fallback ? fallback() : []),
+ validSlotContent && slots._ === 1 ? 64 : -2
+ );
+ if (!noSlotted && rendered.scopeId) {
+ rendered.slotScopeIds = [rendered.scopeId + "-s"];
+ }
+ if (slot && slot._c) {
+ slot._d = true;
+ }
+ return rendered;
+}
+function ensureValidVNode(vnodes) {
+ return vnodes.some((child) => {
+ if (!isVNode(child)) return true;
+ if (child.type === Comment) return false;
+ if (child.type === Fragment && !ensureValidVNode(child.children))
+ return false;
+ return true;
+ }) ? vnodes : null;
+}
+
+function toHandlers(obj, preserveCaseIfNecessary) {
+ const ret = {};
+ if (!isObject(obj)) {
+ warn$1(`v-on with no argument expects an object value.`);
+ return ret;
+ }
+ for (const key in obj) {
+ ret[preserveCaseIfNecessary && /[A-Z]/.test(key) ? `on:${key}` : toHandlerKey(key)] = obj[key];
+ }
+ return ret;
+}
+
+const getPublicInstance = (i) => {
+ if (!i) return null;
+ if (isStatefulComponent(i)) return getComponentPublicInstance(i);
+ return getPublicInstance(i.parent);
+};
+const publicPropertiesMap = (
+ // Move PURE marker to new line to workaround compiler discarding it
+ // due to type annotation
+ /* @__PURE__ */ extend(/* @__PURE__ */ Object.create(null), {
+ $: (i) => i,
+ $el: (i) => i.vnode.el,
+ $data: (i) => i.data,
+ $props: (i) => shallowReadonly(i.props) ,
+ $attrs: (i) => shallowReadonly(i.attrs) ,
+ $slots: (i) => shallowReadonly(i.slots) ,
+ $refs: (i) => shallowReadonly(i.refs) ,
+ $parent: (i) => getPublicInstance(i.parent),
+ $root: (i) => getPublicInstance(i.root),
+ $emit: (i) => i.emit,
+ $options: (i) => resolveMergedOptions(i) ,
+ $forceUpdate: (i) => i.f || (i.f = () => {
+ i.effect.dirty = true;
+ queueJob(i.update);
+ }),
+ $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)),
+ $watch: (i) => instanceWatch.bind(i)
+ })
+);
+const isReservedPrefix = (key) => key === "_" || key === "$";
+const hasSetupBinding = (state, key) => state !== EMPTY_OBJ && !state.__isScriptSetup && hasOwn(state, key);
+const PublicInstanceProxyHandlers = {
+ get({ _: instance }, key) {
+ if (key === "__v_skip") {
+ return true;
+ }
+ const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
+ if (key === "__isVue") {
+ return true;
+ }
+ let normalizedProps;
+ if (key[0] !== "$") {
+ const n = accessCache[key];
+ if (n !== void 0) {
+ switch (n) {
+ case 1 /* SETUP */:
+ return setupState[key];
+ case 2 /* DATA */:
+ return data[key];
+ case 4 /* CONTEXT */:
+ return ctx[key];
+ case 3 /* PROPS */:
+ return props[key];
+ }
+ } else if (hasSetupBinding(setupState, key)) {
+ accessCache[key] = 1 /* SETUP */;
+ return setupState[key];
+ } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
+ accessCache[key] = 2 /* DATA */;
+ return data[key];
+ } else if (
+ // only cache other properties when instance has declared (thus stable)
+ // props
+ (normalizedProps = instance.propsOptions[0]) && hasOwn(normalizedProps, key)
+ ) {
+ accessCache[key] = 3 /* PROPS */;
+ return props[key];
+ } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+ accessCache[key] = 4 /* CONTEXT */;
+ return ctx[key];
+ } else if (shouldCacheAccess) {
+ accessCache[key] = 0 /* OTHER */;
+ }
+ }
+ const publicGetter = publicPropertiesMap[key];
+ let cssModule, globalProperties;
+ if (publicGetter) {
+ if (key === "$attrs") {
+ track(instance.attrs, "get", "");
+ markAttrsAccessed();
+ } else if (key === "$slots") {
+ track(instance, "get", key);
+ }
+ return publicGetter(instance);
+ } else if (
+ // css module (injected by vue-loader)
+ (cssModule = type.__cssModules) && (cssModule = cssModule[key])
+ ) {
+ return cssModule;
+ } else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
+ accessCache[key] = 4 /* CONTEXT */;
+ return ctx[key];
+ } else if (
+ // global properties
+ globalProperties = appContext.config.globalProperties, hasOwn(globalProperties, key)
+ ) {
+ {
+ return globalProperties[key];
+ }
+ } else if (currentRenderingInstance && (!isString(key) || // #1091 avoid internal isRef/isVNode checks on component instance leading
+ // to infinite warning loop
+ key.indexOf("__v") !== 0)) {
+ if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
+ warn$1(
+ `Property ${JSON.stringify(
+ key
+ )} must be accessed via $data because it starts with a reserved character ("$" or "_") and is not proxied on the render context.`
+ );
+ } else if (instance === currentRenderingInstance) {
+ warn$1(
+ `Property ${JSON.stringify(key)} was accessed during render but is not defined on instance.`
+ );
+ }
+ }
+ },
+ set({ _: instance }, key, value) {
+ const { data, setupState, ctx } = instance;
+ if (hasSetupBinding(setupState, key)) {
+ setupState[key] = value;
+ return true;
+ } else if (setupState.__isScriptSetup && hasOwn(setupState, key)) {
+ warn$1(`Cannot mutate 
+