From f4bbe45c2508227746d6b70357856eabc899d17f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 11 Sep 2024 22:44:39 +0200
Subject: [PATCH 1/8] feat: add heartbeat to the moonraker websocket (#2003)

---
 src/plugins/webSocketClient.ts | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/plugins/webSocketClient.ts b/src/plugins/webSocketClient.ts
index 6e4820240..a2a6addbc 100644
--- a/src/plugins/webSocketClient.ts
+++ b/src/plugins/webSocketClient.ts
@@ -14,6 +14,7 @@ export class WebSocketClient {
     timerId: number | null = null
     store: Store<RootState> | null = null
     waits: Wait[] = []
+    heartbeatTimer: number | null = null
 
     constructor(options: WebSocketPluginOptions) {
         this.url = options.url
@@ -89,7 +90,7 @@ export class WebSocketClient {
             isConnecting: true,
         })
 
-        await this.instance?.close()
+        this.instance?.close()
         this.instance = new WebSocket(this.url)
 
         this.instance.onopen = () => {
@@ -116,14 +117,19 @@ export class WebSocketClient {
         this.instance.onmessage = (msg) => {
             if (this.store === null) return
 
+            // websocket is alive
+            this.heartbeat()
+
             const data = JSON.parse(msg.data)
             if (Array.isArray(data)) {
                 for (const message of data) {
                     this.handleMessage(message)
                 }
-            } else {
-                this.handleMessage(data)
+
+                return
             }
+
+            this.handleMessage(data)
         }
     }
 
@@ -194,6 +200,17 @@ export class WebSocketClient {
 
         this.instance.send(JSON.stringify(body))
     }
+
+    heartbeat(): void {
+        if (this.heartbeatTimer) clearInterval(this.heartbeatTimer)
+
+        this.heartbeatTimer = window.setTimeout(() => {
+            if (this.instance?.readyState !== WebSocket.OPEN || !this.store) return
+
+            this.close()
+            this.store?.dispatch('socket/onClose')
+        }, 10000)
+    }
 }
 
 export function WebSocketPlugin(Vue: typeof _Vue, options: WebSocketPluginOptions): void {

From f1085452233f5d59e312aa9d379cb1c6ea58404b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 11 Sep 2024 22:44:57 +0200
Subject: [PATCH 2/8] fix(ExtruderPanel): fix extrude and speed factor output
 (#2002)

---
 .../panels/Extruder/EstimatedExtrusionOutput.vue     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/Extruder/EstimatedExtrusionOutput.vue b/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
index 2ce18edae..bce476324 100644
--- a/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
+++ b/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
@@ -16,10 +16,10 @@
                     </template>
                     <span>
                         <div v-if="speed_factor !== 1">
-                            {{ $t('Panels.ToolheadControlPanel.SpeedFactor') }}: {{ speed_factor * 100 }} %
+                            {{ $t('Panels.ToolheadControlPanel.SpeedFactor') }}: {{ speedFactorOutput }} %
                         </div>
                         <div v-if="extrudeFactor !== 1">
-                            {{ $t('Panels.ExtruderControlPanel.ExtrusionFactor') }}: {{ extrudeFactor * 100 }} %
+                            {{ $t('Panels.ExtruderControlPanel.ExtrusionFactor') }}: {{ extrudeFactorOutput }} %
                         </div>
                     </span>
                 </v-tooltip>
@@ -64,5 +64,13 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin, ExtruderM
     get showTooltip() {
         return this.speed_factor !== 1 || this.extrudeFactor !== 1
     }
+
+    get speedFactorOutput() {
+        return (this.speed_factor * 100).toFixed(0)
+    }
+
+    get extrudeFactorOutput() {
+        return (this.extrudeFactor * 100).toFixed(0)
+    }
 }
 </script>

From 682a3dce6bc97d8eea0c344499bf1f7a68d3006e Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Sun, 15 Sep 2024 11:19:37 +0200
Subject: [PATCH 3/8] fix(Editor): Trigger gotoLine only when change is from
 sidebar (#2012)

---
 src/components/TheEditor.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index 215ed1ccd..dce57ec45 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -67,14 +67,15 @@
                             dense
                             :active="structureActive"
                             :open="structureOpen"
-                            item-key="line"
+                            :item-key="treeviewItemKeyProp"
                             :items="configFileStructure"
                             class="w-100"
                             @update:active="activeChanges">
                             <template #label="{ item }">
                                 <div
                                     class="cursor-pointer _structure-sidebar-item"
-                                    :class="item.type == 'item' ? 'ͼp' : 'ͼt'">
+                                    :class="item.type == 'item' ? 'ͼp' : 'ͼt'"
+                                    @click="activeChangesItemClick">
                                     {{ item.name }}
                                 </div>
                             </template>
@@ -188,8 +189,10 @@ export default class TheEditor extends Mixins(BaseMixin) {
     dialogConfirmChange = false
     dialogDevices = false
     fileStructureSidebar = true
+    treeviewItemKeyProp = 'line' as const
     structureActive: number[] = []
     structureOpen: number[] = []
+    structureActiveChangedBySidebar: boolean = false
 
     formatFilesize = formatFilesize
 
@@ -424,8 +427,23 @@ export default class TheEditor extends Mixins(BaseMixin) {
         this.fileStructureSidebar = !this.fileStructureSidebar
     }
 
-    activeChanges(key: any) {
-        this.editor?.gotoLine(key)
+    // Relies on event bubbling to flip the flag before treeview active change is handled
+    activeChangesItemClick() {
+        this.structureActiveChangedBySidebar = true
+    }
+
+    activeChanges(activeItems: Array<ConfigFileSection[typeof this.treeviewItemKeyProp]>) {
+        if (!this.structureActiveChangedBySidebar) {
+            return
+        }
+
+        this.structureActiveChangedBySidebar = false
+
+        if (!activeItems.length) {
+            return
+        }
+
+        this.editor?.gotoLine(activeItems[0])
     }
 
     lineChanges(line: number) {

From 2a49060962fafd8ead55d26d1dda56604d53b910 Mon Sep 17 00:00:00 2001
From: "Michal Dziekonski (mdz)" <michal.dziekonski+github@gmail.com>
Date: Sun, 15 Sep 2024 12:12:26 +0200
Subject: [PATCH 4/8] fix(HistoryPanel): Fix History thumbnails of files in
 folders (#2010)

---
 .../panels/History/HistoryListEntryJob.vue    | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/panels/History/HistoryListEntryJob.vue b/src/components/panels/History/HistoryListEntryJob.vue
index aa8da85d9..d6444cfc4 100644
--- a/src/components/panels/History/HistoryListEntryJob.vue
+++ b/src/components/panels/History/HistoryListEntryJob.vue
@@ -134,6 +134,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import HistoryListPanelDetailsDialog from '@/components/dialogs/HistoryListPanelDetailsDialog.vue'
 import Panel from '@/components/ui/Panel.vue'
 import BaseMixin from '@/components/mixins/base'
+import { FileStateFileThumbnail } from '@/store/files/types'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
 import {
@@ -187,40 +188,22 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
         if ((this.item.metadata?.thumbnails?.length ?? 0) < 1) return false
 
         const thumbnail = this.item.metadata?.thumbnails?.find(
-            (thumb: any) =>
+            (thumb) =>
                 thumb.width >= thumbnailSmallMin &&
                 thumb.width <= thumbnailSmallMax &&
                 thumb.height >= thumbnailSmallMin &&
                 thumb.height <= thumbnailSmallMax
         )
 
-        let relative_url = ''
-        if (this.item.filename.lastIndexOf('/') !== -1) {
-            relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/'))
-        }
-
-        if ((thumbnail?.relative_path ?? null) === null) return false
-
-        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail?.relative_path)}?timestamp=${
-            this.item.metadata.modified
-        }`
+        return thumbnail ? this.createThumbnailUrl(thumbnail) : false
     }
 
     get bigThumbnail() {
         if ((this.item.metadata?.thumbnails?.length ?? 0) < 1) return false
 
-        const thumbnail = this.item.metadata?.thumbnails?.find((thumb: any) => thumb.width >= thumbnailBigMin)
-
-        let relative_url = ''
-        if (this.item.filename.lastIndexOf('/') !== -1) {
-            relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/') + 1)
-        }
-
-        if ((thumbnail?.relative_path ?? null) === null) return false
+        const thumbnail = this.item.metadata?.thumbnails?.find((thumb) => thumb.width >= thumbnailBigMin)
 
-        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail?.relative_path)}?timestamp=${
-            this.item.metadata.modified
-        }`
+        return thumbnail ? this.createThumbnailUrl(thumbnail) : false
     }
 
     get statusIcon() {
@@ -331,5 +314,16 @@ export default class HistoryListPanel extends Mixins(BaseMixin) {
                 return value
         }
     }
+
+    createThumbnailUrl(thumbnail: FileStateFileThumbnail) {
+        let relative_url = ''
+        if (this.item.filename.lastIndexOf('/') !== -1) {
+            relative_url = this.item.filename.substring(0, this.item.filename.lastIndexOf('/') + 1)
+        }
+
+        return `${this.apiUrl}/server/files/gcodes/${encodeURI(relative_url + thumbnail.relative_path)}?timestamp=${
+            this.item.metadata.modified
+        }`
+    }
 }
 </script>

From f4ee321c4e85abf5eb30bec9be2a39c6604f9b2e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 15 Sep 2024 14:52:15 +0200
Subject: [PATCH 5/8] fix(webcam): fix some connection issues in
 Camera-Streamer (#1981)

---
 src/components/webcams/WebcamWrapperItem.vue  |   2 +-
 .../streamers/WebrtcCameraStreamer.vue        | 277 +++++++++++-------
 2 files changed, 167 insertions(+), 112 deletions(-)

diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
index 00d4a9078..caf299a05 100644
--- a/src/components/webcams/WebcamWrapperItem.vue
+++ b/src/components/webcams/WebcamWrapperItem.vue
@@ -19,7 +19,7 @@
             <j-muxer-stream-async :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-camerastreamer'">
-            <webrtc-camera-streamer-async :cam-settings="webcam" :printer-url="printerUrl" />
+            <webrtc-camera-streamer-async :cam-settings="webcam" :printer-url="printerUrl" :page="page" />
         </template>
         <template v-else-if="service === 'webrtc-janus'">
             <janus-streamer-async :cam-settings="webcam" :printer-url="printerUrl" />
diff --git a/src/components/webcams/streamers/WebrtcCameraStreamer.vue b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
index 334ff82e4..f3df789f0 100644
--- a/src/components/webcams/streamers/WebrtcCameraStreamer.vue
+++ b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
@@ -23,17 +23,22 @@ import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
 
+interface CameraStreamerResponse extends RTCSessionDescriptionInit {
+    id: string
+    iceServers?: RTCIceServer[]
+}
+
 @Component
 export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin) {
-    private pc: RTCPeerConnection | null = null
-    private useStun = false
-    private remote_pc_id: string | null = null
-    private aspectRatio: null | number = null
-    private status: string = 'connecting'
-    private restartTimer: number | null = null
+    pc: RTCPeerConnection | null = null
+    useStun = false
+    aspectRatio: null | number = null
+    status: string = 'connecting'
+    restartTimer: number | null = null
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) declare readonly printerUrl: string | null
+    @Prop({ type: String, default: null }) readonly page!: string | null
     @Ref() declare stream: HTMLVideoElement
 
     get url() {
@@ -55,128 +60,178 @@ export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin)
         return output
     }
 
-    startStream() {
-        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-        const requestIceServers = this.useStun ? [{ urls: ['stun:stun.l.google.com:19302'] }] : null
-
-        // This WebRTC signaling pattern is designed for camera-streamer, a common webcam server the supports WebRTC.
-        fetch(this.url, {
-            body: JSON.stringify({
-                type: 'request',
-                iceServers: requestIceServers,
-            }),
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            method: 'POST',
-        })
-            .then((response) => response.json())
-            .then((answer) => {
-                let peerConnectionConfig: any = {
-                    sdpSemantics: 'unified-plan',
-                }
-                // It's important to set any ICE servers returned, which could include servers we requested or servers
-                // setup by the server. But note that older versions of camera-streamer won't return this property.
-                if (answer.iceServers) {
-                    peerConnectionConfig.iceServers = answer.iceServers
-                }
-                this.pc = new RTCPeerConnection(peerConnectionConfig)
-                this.pc.addTransceiver('video', { direction: 'recvonly' })
-                this.pc.addEventListener(
-                    'track',
-                    (evt) => {
-                        if (evt.track.kind == 'video' && this.$refs.stream) {
-                            // @ts-ignore
-                            this.$refs.stream.srcObject = evt.streams[0]
-                        }
-                    },
-                    false
-                )
-                this.pc.addEventListener('connectionstatechange', () => {
-                    this.status = (this.pc?.connectionState ?? '').toString()
-
-                    // clear restartTimer if it is set
-                    if (this.restartTimer) window.clearTimeout(this.restartTimer)
-
-                    if (['failed', 'disconnected'].includes(this.status)) {
-                        // set restartTimer to restart stream after 5 seconds
-                        this.restartTimer = window.setTimeout(() => {
-                            this.restartStream()
-                        }, 5000)
-                    }
-                })
-                this.pc.addEventListener('icecandidate', (e) => {
-                    if (e.candidate) {
-                        return fetch(this.url, {
-                            body: JSON.stringify({
-                                type: 'remote_candidate',
-                                id: this.remote_pc_id,
-                                candidates: [e.candidate],
-                            }),
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            method: 'POST',
-                        }).catch(function (error) {
-                            window.console.error(error)
-                        })
-                    }
-                })
-
-                this.remote_pc_id = answer.id
-                return this.pc?.setRemoteDescription(answer)
+    get expanded(): boolean {
+        if (this.page !== 'dashboard') return true
+
+        return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
+    }
+
+    // start or stop the video when the expanded state changes
+    @Watch('expanded', { immediate: true })
+    expandChanged(newExpanded: boolean): void {
+        if (!newExpanded) {
+            this.terminate()
+            return
+        }
+
+        this.start()
+    }
+
+    // This WebRTC signaling pattern is designed for camera-streamer, a common webcam server the supports WebRTC.
+    async start() {
+        if (this.restartTimer) {
+            this.log('Clearing restart timer before starting stream')
+            window.clearTimeout(this.restartTimer)
+        }
+
+        if (!this.expanded) {
+            this.log('Not expanded, not starting stream')
+            return
+        }
+
+        this.log(`Requesting ICE servers from ${this.url}`)
+
+        try {
+            const requestIceServers = this.useStun ? [{ urls: ['stun:stun.l.google.com:19302'] }] : null
+            const response = await fetch(this.url, {
+                body: JSON.stringify({ type: 'request', iceServers: requestIceServers }),
+                method: 'POST',
             })
-            .then(() => this.pc?.createAnswer())
-            .then((answer) => this.pc?.setLocalDescription(answer))
-            .then(() => {
-                const offer = this.pc?.localDescription
-                return fetch(this.url, {
-                    body: JSON.stringify({
-                        type: offer?.type,
-                        id: this.remote_pc_id,
-                        sdp: offer?.sdp,
-                    }),
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    method: 'POST',
-                })
+            if (response.status !== 200) {
+                this.log(`Failed to start stream: ${response.status}`)
+                this.restartStream()
+                return
+            }
+
+            const answer = await response.json()
+            await this.onIceServers(answer)
+        } catch (e) {
+            this.log('Failed to start stream', e)
+        }
+    }
+
+    async onIceServers(iceResponse: CameraStreamerResponse) {
+        if (this.pc) this.pc.close()
+
+        // It's important to set any ICE servers returned, which could include servers we requested or servers
+        // setup by the server. But note that older versions of camera-streamer won't return this property.
+        let peerConnectionConfig: RTCConfiguration = {
+            iceServers: iceResponse.iceServers ?? [],
+            // https://webrtc.org/getting-started/unified-plan-transition-guide
+            // @ts-ignore
+            sdpSemantics: 'unified-plan',
+        }
+        this.pc = new RTCPeerConnection(peerConnectionConfig)
+
+        this.pc.addTransceiver('video', { direction: 'recvonly' })
+
+        this.pc.onicecandidate = (e: RTCPeerConnectionIceEvent) => this.onIceCandidate(e, iceResponse.id)
+        this.pc.onconnectionstatechange = () => this.onConnectionStateChange()
+        this.pc.ontrack = (e) => this.onTrack(e)
+
+        await this.pc?.setRemoteDescription(iceResponse)
+        const answer = await this.pc.createAnswer()
+        await this.pc.setLocalDescription(answer)
+
+        const offer = this.pc.localDescription
+        if (!offer) {
+            this.log('Failed to create offer')
+            this.restartStream()
+            return
+        }
+
+        try {
+            const response = await fetch(this.url, {
+                body: JSON.stringify({
+                    type: offer?.type,
+                    id: iceResponse.id,
+                    sdp: offer?.sdp,
+                }),
+                headers: { 'Content-Type': 'application/json' },
+                method: 'POST',
             })
-            .then((response: any) => {
-                if (isFirefox) this.status = 'connected'
-                return response.json()
+            if (response.status !== 200) {
+                this.log(`Failed to send offer: ${response.status}`)
+                this.restartStream()
+            }
+        } catch (e) {
+            this.log('Failed to send offer', e)
+            this.restartStream()
+        }
+    }
+
+    async onIceCandidate(e: RTCPeerConnectionIceEvent, id: string) {
+        if (!e.candidate) return
+
+        try {
+            const response = await fetch(this.url, {
+                body: JSON.stringify({
+                    id,
+                    type: 'remote_candidate',
+                    candidates: [e.candidate],
+                }),
+                headers: { 'Content-Type': 'application/json' },
+                method: 'POST',
             })
-            .catch((e) => {
-                window.console.error(e)
+            if (response.status !== 200) {
+                this.log(`Failed to send ICE candidate: ${response.status}`)
+                this.restartStream()
+            }
+        } catch (e) {
+            this.log('Failed to send ICE candidate', e)
+            this.restartStream()
+        }
+    }
 
-                // clear restartTimer if it is set
-                if (this.restartTimer) window.clearTimeout(this.restartTimer)
+    onConnectionStateChange() {
+        this.status = this.pc?.connectionState ?? 'connecting'
 
-                // set restartTimer to restart stream after 5 seconds
-                this.restartTimer = window.setTimeout(() => {
-                    this.restartStream()
-                }, 5000)
-            })
+        this.log(`State: ${this.status}`)
+
+        if (['failed', 'disconnected'].includes(this.status)) {
+            this.restartStream(5000)
+        }
     }
 
-    mounted() {
-        this.startStream()
+    onTrack(e: RTCTrackEvent) {
+        if (e.track.kind !== 'video') return
+
+        this.stream.srcObject = e.streams[0]
+    }
+
+    log(msg: string, obj?: any) {
+        const message = `[WebRTC camera-streamer] ${msg}`
+        if (obj) {
+            window.console.log(message, obj)
+            return
+        }
+
+        window.console.log(message)
     }
 
     beforeDestroy() {
-        this.pc?.close()
+        this.terminate()
         if (this.restartTimer) window.clearTimeout(this.restartTimer)
     }
 
-    restartStream() {
+    terminate() {
+        this.log('Terminating stream')
         this.pc?.close()
-        setTimeout(async () => {
-            this.startStream()
-        }, 500)
+    }
+
+    restartStream(delay = 500) {
+        this.terminate()
+
+        if (this.restartTimer) return
+
+        this.restartTimer = window.setTimeout(async () => {
+            this.restartTimer = null
+            await this.start()
+        }, delay)
     }
 
     @Watch('url')
-    async changedUrl() {
+    changedUrl() {
         this.restartStream()
     }
 }

From 3b4de5fc2525640dc27385ffe1c2e4ebbb99d07d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 15 Sep 2024 19:58:45 +0200
Subject: [PATCH 6/8] fix(Editor): fix editor width when sidebar is hidden
 (#2014)

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
---
 src/components/TheEditor.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index dce57ec45..8a14bd2b3 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -60,6 +60,7 @@
                         :name="filename"
                         :file-extension="fileExtension"
                         class="codemirror"
+                        :class="{ withSidebar: fileStructureSidebar }"
                         @lineChange="lineChanges" />
                     <div v-if="fileStructureSidebar" class="d-none d-md-flex structure-sidebar">
                         <v-treeview
@@ -524,10 +525,14 @@ export default class TheEditor extends Mixins(BaseMixin) {
 }
 
 @media screen and (min-width: 960px) {
-    .codemirror {
+    .codemirror:not(.withSidebar) {
+        width: 100%;
+    }
+    .codemirror.withSidebar {
         width: calc(100% - 300px);
     }
 }
+
 .structure-sidebar {
     width: 300px;
     overflow-y: auto;

From de697da87b0c77262c242034988114d01d4bd743 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 16 Sep 2024 00:45:12 +0200
Subject: [PATCH 7/8] chore(websocket): add function to send and wait for
 response (#2004)

---
 src/plugins/webSocketClient.ts | 51 ++++++++++++++++++++++++++++------
 src/store/server/actions.ts    | 40 +++++++++++++-------------
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/plugins/webSocketClient.ts b/src/plugins/webSocketClient.ts
index a2a6addbc..e1618eac5 100644
--- a/src/plugins/webSocketClient.ts
+++ b/src/plugins/webSocketClient.ts
@@ -30,6 +30,13 @@ export class WebSocketClient {
     handleMessage(data: any) {
         const wait = this.getWaitById(data.id)
 
+        // reject promise if it exists
+        if ('error' in data && wait?.reject) {
+            wait.reject(data.error)
+            this.removeWaitById(wait.id)
+            return
+        }
+
         // report error messages
         if (data.error?.message) {
             // only report errors, if not disconnected and no init component
@@ -37,12 +44,7 @@ export class WebSocketClient {
                 window.console.error(`Response Error: ${data.error.message} (${wait?.action ?? 'no action'})`)
             }
 
-            if (data.error.message === 'Unauthorized' && wait?.action === 'server/setConnectionId') {
-                this.close()
-                this.store?.dispatch('socket/setConnectionFailed', data.error.message)
-            }
-
-            if (wait?.id) {
+            if (wait) {
                 const modulename = wait.action?.split('/')[1] ?? null
 
                 if (
@@ -69,8 +71,11 @@ export class WebSocketClient {
             return
         }
 
+        // resolve promise if it exists
+        if (wait?.resolve) wait.resolve(data.result ?? {})
+
         // pass result to action
-        if (wait?.action) {
+        if (wait.action) {
             let result = data.result
             if (result === 'ok') result = { result: result }
             if (typeof result === 'string') result = { result: result }
@@ -164,7 +169,7 @@ export class WebSocketClient {
 
         if (options.loading) this.store?.dispatch('socket/addLoading', { name: options.loading })
 
-        this.instance.send(
+        this.instance?.send(
             JSON.stringify({
                 jsonrpc: '2.0',
                 method,
@@ -174,6 +179,34 @@ export class WebSocketClient {
         )
     }
 
+    async emitAndWait(method: string, params: Params, options: emitOptions = {}): Promise<any> {
+        return new Promise((resolve, reject) => {
+            if (this.instance?.readyState !== WebSocket.OPEN) reject()
+
+            const id = this.messageId++
+            this.waits.push({
+                id: id,
+                params: params,
+                action: options.action ?? null,
+                actionPayload: options.actionPayload ?? {},
+                loading: options.loading ?? null,
+                resolve,
+                reject,
+            })
+
+            if (options.loading) this.store?.dispatch('socket/addLoading', { name: options.loading })
+
+            this.instance?.send(
+                JSON.stringify({
+                    jsonrpc: '2.0',
+                    method,
+                    params,
+                    id,
+                })
+            )
+        })
+    }
+
     emitBatch(messages: BatchMessage[]): void {
         if (messages.length === 0) return
         if (this.instance?.readyState !== WebSocket.OPEN) return
@@ -245,6 +278,8 @@ export interface Wait {
     action?: string | null
     actionPayload?: any
     loading?: string | null
+    resolve?: (value: any) => void
+    reject?: (reason: any) => void
 }
 
 interface Params {
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index 270b3e7e7..a32a32a2b 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -16,16 +16,33 @@ export const actions: ActionTree<ServerState, RootState> = {
         dispatch('updateManager/reset')
     },
 
-    async init({ dispatch }) {
+    async init({ commit, dispatch, rootState }) {
         window.console.debug('init Server')
 
+        // identify client
+        try {
+            const connection = await Vue.$socket.emitAndWait('server.connection.identify', {
+                client_name: 'mainsail',
+                version: rootState.packageVersion,
+                type: 'web',
+                url: 'https://github.com/mainsail-crew/mainsail',
+            })
+            commit('setConnectionId', connection.connection_id)
+        } catch (e: any) {
+            if (e.message === 'Unauthorized') {
+                this.dispatch('socket/setConnectionFailed', e.message)
+            }
+
+            window.console.error('Error while identifying client: ' + e.message)
+            return
+        }
+
         dispatch('socket/addInitModule', 'server/info', { root: true })
         dispatch('socket/addInitModule', 'server/config', { root: true })
         dispatch('socket/addInitModule', 'server/systemInfo', { root: true })
         dispatch('socket/addInitModule', 'server/procStats', { root: true })
         dispatch('socket/addInitModule', 'server/databaseList', { root: true })
 
-        dispatch('identify')
         Vue.$socket.emit('server.info', {}, { action: 'server/initServerInfo' })
         Vue.$socket.emit('server.config', {}, { action: 'server/initServerConfig' })
         Vue.$socket.emit('machine.system_info', {}, { action: 'server/initSystemInfo' })
@@ -35,25 +52,6 @@ export const actions: ActionTree<ServerState, RootState> = {
         await dispatch('socket/removeInitModule', 'server', { root: true })
     },
 
-    identify({ dispatch, rootState }): void {
-        dispatch('socket/addInitModule', 'server/identify', { root: true })
-        Vue.$socket.emit(
-            'server.connection.identify',
-            {
-                client_name: 'mainsail',
-                version: rootState.packageVersion,
-                type: 'web',
-                url: 'https://github.com/mainsail-crew/mainsail',
-            },
-            { action: 'server/setConnectionId' }
-        )
-    },
-
-    setConnectionId({ commit, dispatch }, payload) {
-        commit('setConnectionId', payload.connection_id)
-        dispatch('socket/removeInitModule', 'server/identify', { root: true })
-    },
-
     checkDatabases({ dispatch, commit }, payload) {
         if (payload.namespaces?.includes('mainsail')) {
             dispatch('socket/addInitModule', 'gui/init', { root: true })

From 6caeca54f6371b3e978c73cb48a285123b8b5f0d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 18 Sep 2024 07:51:30 +0200
Subject: [PATCH 8/8] build(deps-dev): bump vite from 4.5.3 to 4.5.5 (#2017)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.3 to 4.5.5.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.5/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.5/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cc060d99e..5f3be9aa0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,7 +81,7 @@
                 "start-server-and-test": "^2.0.5",
                 "typescript": "^4.5.5",
                 "unplugin-vue-components": "^0.22.12",
-                "vite": "^4.5.3",
+                "vite": "^4.5.5",
                 "vite-plugin-checker": "^0.6.0",
                 "vite-plugin-package-version": "^1.0.2",
                 "vite-plugin-pwa": "^0.16.4",
@@ -9600,9 +9600,9 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.5.3",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
-            "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
+            "version": "4.5.5",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz",
+            "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index c97fef7c1..1a97707ef 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
         "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^4.5.3",
+        "vite": "^4.5.5",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",