From 09a46341eef4cc54aa815c39f98ff5b18f5d647d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 28 Oct 2023 21:39:35 +0200
Subject: [PATCH 01/18] style: move style block to the end

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/console/ConsoleTableEntry.vue | 50 ++++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index 2ef07f65b..794701fbc 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -1,28 +1,3 @@
-<style scoped>
-.consoleTableRow {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.95em;
-
-    &.default {
-        .col {
-            padding-top: 8px !important;
-            padding-bottom: 8px !important;
-        }
-
-        & + .consoleTableRow .col {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
-        }
-    }
-
-    &.compact {
-        .col {
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-        }
-    }
-}
-</style>
-
 <template>
     <v-row :class="'ma-0 ' + entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
@@ -68,3 +43,28 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+.consoleTableRow {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.95em;
+
+    &.default {
+        .col {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+        }
+
+        & + .consoleTableRow .col {
+            border-top: 1px solid rgba(255, 255, 255, 0.12);
+        }
+    }
+
+    &.compact {
+        .col {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+        }
+    }
+}
+</style>

From f0a0ab4da810d0760db2415a4cfa1f21a5c68af6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 28 Oct 2023 22:25:10 +0200
Subject: [PATCH 02/18] feat: add action type of events

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/console/ConsoleTableEntry.vue | 23 ++++++++++++--------
 src/store/server/actions.ts                  |  3 +++
 src/store/server/mutations.ts                |  8 ++++---
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/console/ConsoleTableEntry.vue b/src/components/console/ConsoleTableEntry.vue
index 794701fbc..b8930895d 100644
--- a/src/components/console/ConsoleTableEntry.vue
+++ b/src/components/console/ConsoleTableEntry.vue
@@ -1,10 +1,7 @@
 <template>
-    <v-row :class="'ma-0 ' + entryStyle">
+    <v-row :class="entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
-        <v-col
-            :class="colorConsoleMessage(event) + ' ' + 'console-message'"
-            @click.capture="commandClick"
-            v-html="event.formatMessage"></v-col>
+        <v-col :class="messageClass" @click.capture="commandClick" v-html="event.formatMessage" />
     </v-row>
 </template>
 
@@ -20,17 +17,25 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     declare readonly event: ServerStateEvent
 
     get entryStyle() {
-        return this.$store.state.gui.console.entryStyle ?? 'default'
+        const classes = ['ma-0']
+        classes.push(this.$store.state.gui.console.entryStyle ?? 'default')
+        if (this.event.type === 'action') classes.push('text--disabled')
+
+        return classes
     }
 
     get entryFormatTime() {
         return this.formatTime(this.event.date.getTime(), true)
     }
 
-    colorConsoleMessage(item: ServerStateEvent): string {
-        if (item.message.startsWith('!! ')) return 'error--text'
+    get messageClass() {
+        const classes = ['console-message']
+
+        if (this.event.type === 'action') classes.push('text--disabled')
+        else if (this.event.message.startsWith('!! ')) classes.push('error--text')
+        else classes.push('text--primary')
 
-        return 'text--primary'
+        return classes
     }
 
     commandClick(event: Event) {
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index c48195bcf..d24f4c42c 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -247,6 +247,8 @@ export const actions: ActionTree<ServerState, RootState> = {
         let message = payload
         let type = 'response'
 
+        window.console.log(payload)
+
         if (typeof payload === 'object' && 'type' in payload) type = payload.type
 
         if ('message' in payload) message = payload.message
@@ -254,6 +256,7 @@ export const actions: ActionTree<ServerState, RootState> = {
         else if ('error' in payload) message = message.error.message
 
         let formatMessage = formatConsoleMessage(message)
+        if (type === 'response' && message.startsWith('// action:')) type = 'action'
 
         const filters = rootGetters['gui/console/getConsolefilterRules']
         let boolImport = true
diff --git a/src/store/server/mutations.ts b/src/store/server/mutations.ts
index 5c4bdc292..d31d00693 100644
--- a/src/store/server/mutations.ts
+++ b/src/store/server/mutations.ts
@@ -101,13 +101,15 @@ export const mutations: MutationTree<ServerState> = {
             const date = new Date(message.time * 1000)
             let formatMessage = formatConsoleMessage(message.message)
 
-            if (message.type === 'command') formatMessage = '<a class="command text--blue">' + formatMessage + '</a>'
+            let type = message.type
+            if (type === 'command') formatMessage = '<a class="command text--blue">' + formatMessage + '</a>'
+            if (type === 'response' && message.message.startsWith('// action:')) type = 'action'
 
             state.events.push({
-                date: date,
+                date,
                 message: message.message,
                 formatMessage: formatMessage,
-                type: message.type,
+                type,
             })
         })
 

From c9b7e58047197729ee548f0f1eabb0d497d88e87 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 28 Oct 2023 23:16:57 +0200
Subject: [PATCH 03/18] feat: add action command prompt dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                                   |   3 +
 .../dialogs/TheActionCommandPrompt.vue        | 111 ++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 src/components/dialogs/TheActionCommandPrompt.vue

diff --git a/src/App.vue b/src/App.vue
index d7e9ce822..e21c5df23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,7 @@
             <the-manual-probe-dialog />
             <the-bed-screws-dialog />
             <the-screws-tilt-adjust-dialog />
+            <the-action-command-prompt />
         </template>
         <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'" />
         <the-connecting-dialog v-else />
@@ -41,11 +42,13 @@ import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 import { setAndLoadLocale } from './plugins/i18n'
+import TheActionCommandPrompt from '@/components/dialogs/TheActionCommandPrompt.vue'
 
 Component.registerHooks(['metaInfo'])
 
 @Component({
     components: {
+        TheActionCommandPrompt,
         TheTimelapseRenderingSnackbar,
         TheEditor,
         TheSelectPrinterDialog,
diff --git a/src/components/dialogs/TheActionCommandPrompt.vue b/src/components/dialogs/TheActionCommandPrompt.vue
new file mode 100644
index 000000000..f6ac113f9
--- /dev/null
+++ b/src/components/dialogs/TheActionCommandPrompt.vue
@@ -0,0 +1,111 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent :fullscreen="isMobile">
+        <panel
+            :title="headline"
+            :icon="mdiArrowCollapseDown"
+            card-class="manual_probe-dialog"
+            :margin-bottom="false"
+            style="overflow: hidden"
+            :height="isMobile ? 0 : 548">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col>{{ activePrompt.length }}</v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text>
+                    {{ $t('BedScrews.Abort') }}
+                </v-btn>
+                <v-btn color="primary" text>
+                    {{ $t('BedScrews.Adjusted') }}
+                </v-btn>
+                <v-btn color="primary" text>
+                    {{ $t('BedScrews.Accept') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+
+import { mdiArrowCollapseDown, mdiInformation, mdiCloseThick } from '@mdi/js'
+import ControlMixin from '@/components/mixins/control'
+import { ServerStateEvent } from '@/store/server/types'
+@Component({
+    components: { Panel, Responsive },
+})
+export default class TheActionCommandPrompt extends Mixins(BaseMixin, ControlMixin) {
+    mdiArrowCollapseDown = mdiArrowCollapseDown
+    mdiInformation = mdiInformation
+    mdiCloseThick = mdiCloseThick
+
+    get events() {
+        return this.$store.state.server.events
+    }
+
+    get actions() {
+        return this.events.filter((event: ServerStateEvent) => event.type === 'action')
+    }
+
+    get lastPromptStartPos() {
+        if (this.lastPromptShowPos === -1) return -1
+
+        return this.actions.lastIndexOf(
+            (event: ServerStateEvent) => event.message.startsWith('action:prompt_start'),
+            this.lastPromptShowPos
+        )
+    }
+
+    get lastPromptShowPos() {
+        return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_show'))
+    }
+
+    get lastPromptClosePos() {
+        return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_close'))
+    }
+
+    get showDialog() {
+        if (this.lastPromptStartPos === -1) return false
+
+        return this.lastPromptStartPos > this.lastPromptClosePos
+    }
+
+    get activePrompt() {
+        if (this.lastPromptShowPos === -1) return []
+
+        const events = this.actions.slice(this.lastPromptStartPos, this.lastPromptShowPos)
+        window.console.log(events)
+
+        return events
+    }
+
+    get headline() {
+        return 'Bla bla headline'
+    }
+
+    closePrompt() {
+        const gcode = `RESPOND type="action" msg="action:prompt_close"`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+
+    sendAdjusted() {
+        const gcode = `ADJUSTED`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAccept' })
+    }
+}
+</script>
+
+<style scoped></style>

From 1f17ba60c5e26f53c48a7bfe5354eda757c3f81f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 00:25:39 +0200
Subject: [PATCH 04/18] feat: add action command prompt dialog and panel
 buttons

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/TheActionCommandPrompt.vue        | 104 +++++++++++-------
 .../TheActionCommandPromptActionButton.vue    |  44 ++++++++
 2 files changed, 109 insertions(+), 39 deletions(-)
 create mode 100644 src/components/dialogs/TheActionCommandPromptActionButton.vue

diff --git a/src/components/dialogs/TheActionCommandPrompt.vue b/src/components/dialogs/TheActionCommandPrompt.vue
index f6ac113f9..8f0ee9b1f 100644
--- a/src/components/dialogs/TheActionCommandPrompt.vue
+++ b/src/components/dialogs/TheActionCommandPrompt.vue
@@ -2,8 +2,8 @@
     <v-dialog :value="showDialog" width="400" persistent :fullscreen="isMobile">
         <panel
             :title="headline"
-            :icon="mdiArrowCollapseDown"
-            card-class="manual_probe-dialog"
+            :icon="mdiInformation"
+            card-class="action_command_prompt-dialog"
             :margin-bottom="false"
             style="overflow: hidden"
             :height="isMobile ? 0 : 548">
@@ -13,21 +13,19 @@
                 </v-btn>
             </template>
             <v-card-text>
-                <v-row>
-                    <v-col>{{ activePrompt.length }}</v-col>
-                </v-row>
+                <template v-for="(event, index) in activePromptContent">
+                    <v-row :key="index">
+                        <v-col>{{ event.message }}</v-col>
+                    </v-row>
+                </template>
             </v-card-text>
-            <v-card-actions>
+            <v-card-actions v-if="buttonPrimary || buttonSecondary">
                 <v-spacer />
-                <v-btn text>
-                    {{ $t('BedScrews.Abort') }}
-                </v-btn>
-                <v-btn color="primary" text>
-                    {{ $t('BedScrews.Adjusted') }}
-                </v-btn>
-                <v-btn color="primary" text>
-                    {{ $t('BedScrews.Accept') }}
-                </v-btn>
+                <the-action-command-prompt-action-button
+                    v-if="buttonSecondary"
+                    :event="buttonSecondary"
+                    type="secondary" />
+                <the-action-command-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
             </v-card-actions>
         </panel>
     </v-dialog>
@@ -37,16 +35,14 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import Responsive from '@/components/ui/Responsive.vue'
 
-import { mdiArrowCollapseDown, mdiInformation, mdiCloseThick } from '@mdi/js'
-import ControlMixin from '@/components/mixins/control'
+import { mdiCloseThick, mdiInformation } from '@mdi/js'
 import { ServerStateEvent } from '@/store/server/types'
+
 @Component({
-    components: { Panel, Responsive },
+    components: { Panel },
 })
-export default class TheActionCommandPrompt extends Mixins(BaseMixin, ControlMixin) {
-    mdiArrowCollapseDown = mdiArrowCollapseDown
+export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
     mdiCloseThick = mdiCloseThick
 
@@ -58,52 +54,82 @@ export default class TheActionCommandPrompt extends Mixins(BaseMixin, ControlMix
         return this.events.filter((event: ServerStateEvent) => event.type === 'action')
     }
 
-    get lastPromptStartPos() {
+    get lastPromptBeginPos() {
         if (this.lastPromptShowPos === -1) return -1
 
-        return this.actions.lastIndexOf(
-            (event: ServerStateEvent) => event.message.startsWith('action:prompt_start'),
+        return this.actions.findLastIndex(
+            (event: ServerStateEvent) => event.message.startsWith('// action:prompt_begin'),
             this.lastPromptShowPos
         )
     }
 
     get lastPromptShowPos() {
-        return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_show'))
+        return this.actions.findLastIndex((event: ServerStateEvent) =>
+            event.message.startsWith('// action:prompt_show')
+        )
     }
 
     get lastPromptClosePos() {
-        return this.actions.lastIndexOf((event: ServerStateEvent) => event.message.startsWith('action:prompt_close'))
+        return this.actions.findLastIndex((event: ServerStateEvent) =>
+            event.message.startsWith('// action:prompt_close')
+        )
     }
 
     get showDialog() {
-        if (this.lastPromptStartPos === -1) return false
+        if (this.lastPromptBeginPos === -1) return false
 
-        return this.lastPromptStartPos > this.lastPromptClosePos
+        return this.lastPromptBeginPos > this.lastPromptClosePos
     }
 
     get activePrompt() {
         if (this.lastPromptShowPos === -1) return []
 
-        const events = this.actions.slice(this.lastPromptStartPos, this.lastPromptShowPos)
-        window.console.log(events)
+        return this.actions.slice(this.lastPromptBeginPos, this.lastPromptShowPos)
+    }
+
+    get activePromptContent() {
+        const allowedTypes = ['button', 'text']
+
+        return this.activePrompt.filter((event: ServerStateEvent) => {
+            let type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
 
-        return events
+            return allowedTypes.includes(type)
+        })
     }
 
     get headline() {
-        return 'Bla bla headline'
+        if (!this.showDialog || this.lastPromptBeginPos === -1) return ''
+
+        return (this.actions[this.lastPromptBeginPos].message ?? '')
+            .replace('// action:prompt_begin', '')
+            .replace(/"/g, '')
+            .trim()
     }
 
-    closePrompt() {
-        const gcode = `RESPOND type="action" msg="action:prompt_close"`
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
+    get buttonPrimary() {
+        const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
+            event.message.startsWith('// action:prompt_button_primary')
+        )
+
+        if (index === -1) return null
+
+        return this.activePrompt[index]
     }
 
-    sendAdjusted() {
-        const gcode = `ADJUSTED`
+    get buttonSecondary() {
+        const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
+            event.message.startsWith('// action:prompt_button_secondary')
+        )
+
+        if (index === -1) return null
+
+        return this.activePrompt[index]
+    }
+
+    closePrompt() {
+        const gcode = `RESPOND type="command" msg="action:prompt_close"`
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAccept' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
     }
 }
 </script>
diff --git a/src/components/dialogs/TheActionCommandPromptActionButton.vue b/src/components/dialogs/TheActionCommandPromptActionButton.vue
new file mode 100644
index 000000000..c8f0273f6
--- /dev/null
+++ b/src/components/dialogs/TheActionCommandPromptActionButton.vue
@@ -0,0 +1,44 @@
+<template>
+    <v-btn :color="color" text @click="clickButton">
+        {{ text }}
+    </v-btn>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEvent } from '@/store/server/types'
+
+@Component({})
+export default class TheActionCommandPromptActionButton extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEvent
+    @Prop({ type: String, required: true }) readonly type!: 'primary' | 'secondary'
+
+    get filtertedMessageSplits() {
+        return (this.event.message ?? '')
+            .replace(`// action:prompt_button_${this.type}`, '')
+            .replace(/"/g, '')
+            .trim()
+            .split('|')
+    }
+
+    get text() {
+        return this.filtertedMessageSplits[0]
+    }
+
+    get command() {
+        return this.filtertedMessageSplits[1] ?? this.text
+    }
+
+    get color() {
+        return this.type === 'primary' ? 'primary' : ''
+    }
+
+    clickButton() {
+        this.$store.dispatch('server/addEvent', { message: this.command, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.command })
+    }
+}
+</script>
+
+<style scoped></style>

From 45f2288ac5fecab5de029a2fe9254788af00fb8c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 09:36:29 +0100
Subject: [PATCH 05/18] refactor: rename TheActionCommandPromptActionButton to
 ActionCommandPromptActionButton

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 ...nButton.vue => ActionCommandPromptActionButton.vue} |  2 +-
 src/components/dialogs/TheActionCommandPrompt.vue      | 10 ++++------
 src/sw.ts                                              |  2 ++
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/dialogs/{TheActionCommandPromptActionButton.vue => ActionCommandPromptActionButton.vue} (93%)

diff --git a/src/components/dialogs/TheActionCommandPromptActionButton.vue b/src/components/dialogs/ActionCommandPromptActionButton.vue
similarity index 93%
rename from src/components/dialogs/TheActionCommandPromptActionButton.vue
rename to src/components/dialogs/ActionCommandPromptActionButton.vue
index c8f0273f6..7f1c1c398 100644
--- a/src/components/dialogs/TheActionCommandPromptActionButton.vue
+++ b/src/components/dialogs/ActionCommandPromptActionButton.vue
@@ -10,7 +10,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerStateEvent } from '@/store/server/types'
 
 @Component({})
-export default class TheActionCommandPromptActionButton extends Mixins(BaseMixin) {
+export default class ActionCommandPromptActionButton extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) readonly event!: ServerStateEvent
     @Prop({ type: String, required: true }) readonly type!: 'primary' | 'secondary'
 
diff --git a/src/components/dialogs/TheActionCommandPrompt.vue b/src/components/dialogs/TheActionCommandPrompt.vue
index 8f0ee9b1f..6a4c6aa30 100644
--- a/src/components/dialogs/TheActionCommandPrompt.vue
+++ b/src/components/dialogs/TheActionCommandPrompt.vue
@@ -21,11 +21,8 @@
             </v-card-text>
             <v-card-actions v-if="buttonPrimary || buttonSecondary">
                 <v-spacer />
-                <the-action-command-prompt-action-button
-                    v-if="buttonSecondary"
-                    :event="buttonSecondary"
-                    type="secondary" />
-                <the-action-command-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
+                <action-command-prompt-action-button v-if="buttonSecondary" :event="buttonSecondary" type="secondary" />
+                <action-command-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
             </v-card-actions>
         </panel>
     </v-dialog>
@@ -38,9 +35,10 @@ import Panel from '@/components/ui/Panel.vue'
 
 import { mdiCloseThick, mdiInformation } from '@mdi/js'
 import { ServerStateEvent } from '@/store/server/types'
+import ActionCommandPromptActionButton from '@/components/dialogs/ActionCommandPromptActionButton.vue'
 
 @Component({
-    components: { Panel },
+    components: { ActionCommandPromptActionButton, Panel },
 })
 export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
diff --git a/src/sw.ts b/src/sw.ts
index 811433b4c..4686000d3 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -6,6 +6,8 @@ declare let self: ServiceWorkerGlobalScope
 import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
 
+// disable workbox logs
+self.__wb_disable_dev_logs = true
 cleanupOutdatedCaches() // cleanup everything that's not needed anymore
 
 precacheAndRoute(self.__WB_MANIFEST) //cache our new stuff

From 056e370cbb2ebe52ac58e95860e6bf499b1c3b95 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 11:01:17 +0100
Subject: [PATCH 06/18] feat: add ActionCommandPromptButtons

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/ActionCommandPromptButton.vue     | 34 +++++++++++++++++
 .../dialogs/ActionCommandPromptText.vue       | 22 +++++++++++
 .../dialogs/TheActionCommandPrompt.vue        | 37 ++++++++++++++-----
 src/store/server/types.ts                     |  6 +++
 4 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 src/components/dialogs/ActionCommandPromptButton.vue
 create mode 100644 src/components/dialogs/ActionCommandPromptText.vue

diff --git a/src/components/dialogs/ActionCommandPromptButton.vue b/src/components/dialogs/ActionCommandPromptButton.vue
new file mode 100644
index 000000000..9bc1bc215
--- /dev/null
+++ b/src/components/dialogs/ActionCommandPromptButton.vue
@@ -0,0 +1,34 @@
+<template>
+    <v-row>
+        <v-col>
+            <v-btn @click="sendCommand">{{ text }}</v-btn>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPromptContent } from '@/store/server/types'
+
+@Component({})
+export default class ActionCommandPromptButton extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
+
+    get splits() {
+        return this.event.message.split('|')
+    }
+
+    get text() {
+        return this.splits[0]
+    }
+
+    get command() {
+        return this.splits[1] ?? this.text
+    }
+
+    sendCommand() {
+        window.console.log('send command: ', this.command)
+    }
+}
+</script>
diff --git a/src/components/dialogs/ActionCommandPromptText.vue b/src/components/dialogs/ActionCommandPromptText.vue
new file mode 100644
index 000000000..25b796293
--- /dev/null
+++ b/src/components/dialogs/ActionCommandPromptText.vue
@@ -0,0 +1,22 @@
+<template>
+    <v-row>
+        <v-col>
+            <p>{{ text }}</p>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPromptContent } from '@/store/server/types'
+
+@Component({})
+export default class ActionCommandPromptText extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
+
+    get text() {
+        return this.event.message
+    }
+}
+</script>
diff --git a/src/components/dialogs/TheActionCommandPrompt.vue b/src/components/dialogs/TheActionCommandPrompt.vue
index 6a4c6aa30..f9b90e8e1 100644
--- a/src/components/dialogs/TheActionCommandPrompt.vue
+++ b/src/components/dialogs/TheActionCommandPrompt.vue
@@ -14,9 +14,8 @@
             </template>
             <v-card-text>
                 <template v-for="(event, index) in activePromptContent">
-                    <v-row :key="index">
-                        <v-col>{{ event.message }}</v-col>
-                    </v-row>
+                    <action-command-prompt-text v-if="event.type === 'text'" :key="index" :event="event" />
+                    <action-command-prompt-button v-if="event.type === 'button'" :key="index" :event="event" />
                 </template>
             </v-card-text>
             <v-card-actions v-if="buttonPrimary || buttonSecondary">
@@ -34,11 +33,13 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 
 import { mdiCloseThick, mdiInformation } from '@mdi/js'
-import { ServerStateEvent } from '@/store/server/types'
+import { ServerStateEvent, ServerStateEventPromptContent } from '@/store/server/types'
 import ActionCommandPromptActionButton from '@/components/dialogs/ActionCommandPromptActionButton.vue'
+import ActionCommandPromptText from '@/components/dialogs/ActionCommandPromptText.vue'
+import ActionCommandPromptButton from '@/components/dialogs/ActionCommandPromptButton.vue'
 
 @Component({
-    components: { ActionCommandPromptActionButton, Panel },
+    components: { ActionCommandPromptButton, ActionCommandPromptText, ActionCommandPromptActionButton, Panel },
 })
 export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
@@ -87,12 +88,30 @@ export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
 
     get activePromptContent() {
         const allowedTypes = ['button', 'text']
+        const activePromptContent: ServerStateEventPromptContent[] = this.activePrompt.map(
+            (event: ServerStateEvent) => {
+                const type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
+                const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
+
+                const promptContent: ServerStateEventPromptContent = {
+                    date: event.date,
+                    type,
+                    message,
+                }
+
+                return promptContent
+            }
+        )
+
+        window.console.log(activePromptContent)
+
+        const output = activePromptContent.filter((event: ServerStateEventPromptContent) =>
+            allowedTypes.includes(event.type)
+        )
 
-        return this.activePrompt.filter((event: ServerStateEvent) => {
-            let type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
+        window.console.log(output)
 
-            return allowedTypes.includes(type)
-        })
+        return output
     }
 
     get headline() {
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index d11c23c88..d3683f092 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -71,6 +71,12 @@ export interface ServerStateEvent {
     formatMessage: string | string[]
 }
 
+export interface ServerStateEventPromptContent {
+    date: Date
+    type: string
+    message: string
+}
+
 export interface ServerStateCpuInfo {
     bits: string
     cpu_count: number

From aace58037c22b0c6fa2a5b09ed21177b0d542f38 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 11:05:20 +0100
Subject: [PATCH 07/18] refactor: rename action-command-prompt to macro-prompt

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                                   |  6 +++---
 ...Button.vue => MacroPromptActionButton.vue} |  2 +-
 ...PromptButton.vue => MacroPromptButton.vue} |  2 +-
 ...mandPromptText.vue => MacroPromptText.vue} |  2 +-
 ...onCommandPrompt.vue => TheMacroPrompt.vue} | 20 +++++++++----------
 5 files changed, 16 insertions(+), 16 deletions(-)
 rename src/components/dialogs/{ActionCommandPromptActionButton.vue => MacroPromptActionButton.vue} (93%)
 rename src/components/dialogs/{ActionCommandPromptButton.vue => MacroPromptButton.vue} (90%)
 rename src/components/dialogs/{ActionCommandPromptText.vue => MacroPromptText.vue} (87%)
 rename src/components/dialogs/{TheActionCommandPrompt.vue => TheMacroPrompt.vue} (81%)

diff --git a/src/App.vue b/src/App.vue
index e21c5df23..315e6cfe5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
             <the-manual-probe-dialog />
             <the-bed-screws-dialog />
             <the-screws-tilt-adjust-dialog />
-            <the-action-command-prompt />
+            <the-macro-prompt />
         </template>
         <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'" />
         <the-connecting-dialog v-else />
@@ -42,13 +42,13 @@ import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 import { setAndLoadLocale } from './plugins/i18n'
-import TheActionCommandPrompt from '@/components/dialogs/TheActionCommandPrompt.vue'
+import TheMacroPrompt from '@/components/dialogs/TheMacroPrompt.vue'
 
 Component.registerHooks(['metaInfo'])
 
 @Component({
     components: {
-        TheActionCommandPrompt,
+        TheMacroPrompt,
         TheTimelapseRenderingSnackbar,
         TheEditor,
         TheSelectPrinterDialog,
diff --git a/src/components/dialogs/ActionCommandPromptActionButton.vue b/src/components/dialogs/MacroPromptActionButton.vue
similarity index 93%
rename from src/components/dialogs/ActionCommandPromptActionButton.vue
rename to src/components/dialogs/MacroPromptActionButton.vue
index 7f1c1c398..904578899 100644
--- a/src/components/dialogs/ActionCommandPromptActionButton.vue
+++ b/src/components/dialogs/MacroPromptActionButton.vue
@@ -10,7 +10,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerStateEvent } from '@/store/server/types'
 
 @Component({})
-export default class ActionCommandPromptActionButton extends Mixins(BaseMixin) {
+export default class MacroPromptActionButton extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) readonly event!: ServerStateEvent
     @Prop({ type: String, required: true }) readonly type!: 'primary' | 'secondary'
 
diff --git a/src/components/dialogs/ActionCommandPromptButton.vue b/src/components/dialogs/MacroPromptButton.vue
similarity index 90%
rename from src/components/dialogs/ActionCommandPromptButton.vue
rename to src/components/dialogs/MacroPromptButton.vue
index 9bc1bc215..3b8cafc75 100644
--- a/src/components/dialogs/ActionCommandPromptButton.vue
+++ b/src/components/dialogs/MacroPromptButton.vue
@@ -12,7 +12,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerStateEventPromptContent } from '@/store/server/types'
 
 @Component({})
-export default class ActionCommandPromptButton extends Mixins(BaseMixin) {
+export default class MacroPromptButton extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
 
     get splits() {
diff --git a/src/components/dialogs/ActionCommandPromptText.vue b/src/components/dialogs/MacroPromptText.vue
similarity index 87%
rename from src/components/dialogs/ActionCommandPromptText.vue
rename to src/components/dialogs/MacroPromptText.vue
index 25b796293..858752c3b 100644
--- a/src/components/dialogs/ActionCommandPromptText.vue
+++ b/src/components/dialogs/MacroPromptText.vue
@@ -12,7 +12,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerStateEventPromptContent } from '@/store/server/types'
 
 @Component({})
-export default class ActionCommandPromptText extends Mixins(BaseMixin) {
+export default class MacroPromptText extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
 
     get text() {
diff --git a/src/components/dialogs/TheActionCommandPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
similarity index 81%
rename from src/components/dialogs/TheActionCommandPrompt.vue
rename to src/components/dialogs/TheMacroPrompt.vue
index f9b90e8e1..acfc82ff1 100644
--- a/src/components/dialogs/TheActionCommandPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -3,7 +3,7 @@
         <panel
             :title="headline"
             :icon="mdiInformation"
-            card-class="action_command_prompt-dialog"
+            card-class="macro_prompt-dialog"
             :margin-bottom="false"
             style="overflow: hidden"
             :height="isMobile ? 0 : 548">
@@ -14,14 +14,14 @@
             </template>
             <v-card-text>
                 <template v-for="(event, index) in activePromptContent">
-                    <action-command-prompt-text v-if="event.type === 'text'" :key="index" :event="event" />
-                    <action-command-prompt-button v-if="event.type === 'button'" :key="index" :event="event" />
+                    <macro-prompt-text v-if="event.type === 'text'" :key="index" :event="event" />
+                    <macro-prompt-button v-if="event.type === 'button'" :key="index" :event="event" />
                 </template>
             </v-card-text>
             <v-card-actions v-if="buttonPrimary || buttonSecondary">
                 <v-spacer />
-                <action-command-prompt-action-button v-if="buttonSecondary" :event="buttonSecondary" type="secondary" />
-                <action-command-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
+                <macro-prompt-action-button v-if="buttonSecondary" :event="buttonSecondary" type="secondary" />
+                <macro-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
             </v-card-actions>
         </panel>
     </v-dialog>
@@ -34,14 +34,14 @@ import Panel from '@/components/ui/Panel.vue'
 
 import { mdiCloseThick, mdiInformation } from '@mdi/js'
 import { ServerStateEvent, ServerStateEventPromptContent } from '@/store/server/types'
-import ActionCommandPromptActionButton from '@/components/dialogs/ActionCommandPromptActionButton.vue'
-import ActionCommandPromptText from '@/components/dialogs/ActionCommandPromptText.vue'
-import ActionCommandPromptButton from '@/components/dialogs/ActionCommandPromptButton.vue'
+import MacroPromptActionButton from '@/components/dialogs/MacroPromptActionButton.vue'
+import MacroPromptText from '@/components/dialogs/MacroPromptText.vue'
+import MacroPromptButton from '@/components/dialogs/MacroPromptButton.vue'
 
 @Component({
-    components: { ActionCommandPromptButton, ActionCommandPromptText, ActionCommandPromptActionButton, Panel },
+    components: { MacroPromptButton, MacroPromptText, MacroPromptActionButton, Panel },
 })
-export default class TheActionCommandPrompt extends Mixins(BaseMixin) {
+export default class TheMacroPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
     mdiCloseThick = mdiCloseThick
 

From 646be2807080e0b2a9b6f9c75d15ca065c4cc2b1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 11:10:25 +0100
Subject: [PATCH 08/18] fix: fix margin bottom of MacroPromptText

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/MacroPromptText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/MacroPromptText.vue b/src/components/dialogs/MacroPromptText.vue
index 858752c3b..08d7b6a83 100644
--- a/src/components/dialogs/MacroPromptText.vue
+++ b/src/components/dialogs/MacroPromptText.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row>
         <v-col>
-            <p>{{ text }}</p>
+            <p class="mb-0">{{ text }}</p>
         </v-col>
     </v-row>
 </template>

From c1ec7598fb08b829cf96966a9023e167b3a575e1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 12:16:10 +0100
Subject: [PATCH 09/18] refactor: remove debug output in store/server/action

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/server/actions.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index d24f4c42c..b5a915735 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -247,8 +247,6 @@ export const actions: ActionTree<ServerState, RootState> = {
         let message = payload
         let type = 'response'
 
-        window.console.log(payload)
-
         if (typeof payload === 'object' && 'type' in payload) type = payload.type
 
         if ('message' in payload) message = payload.message

From 30a15c91fdc42d347c52ec2d1c43124e49a0eefc Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 12:16:34 +0100
Subject: [PATCH 10/18] feat: add macro-prompt button-group support

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/MacroPromptButton.vue  | 10 +++----
 .../dialogs/MacroPromptButtonGroup.vue        | 18 +++++++++++++
 src/components/dialogs/TheMacroPrompt.vue     | 26 +++++++++++++++----
 src/store/server/types.ts                     |  1 +
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/components/dialogs/MacroPromptButtonGroup.vue

diff --git a/src/components/dialogs/MacroPromptButton.vue b/src/components/dialogs/MacroPromptButton.vue
index 3b8cafc75..23aad221d 100644
--- a/src/components/dialogs/MacroPromptButton.vue
+++ b/src/components/dialogs/MacroPromptButton.vue
@@ -1,9 +1,5 @@
 <template>
-    <v-row>
-        <v-col>
-            <v-btn @click="sendCommand">{{ text }}</v-btn>
-        </v-col>
-    </v-row>
+    <v-btn :color="color" class="mx-2" @click="sendCommand">{{ text }}</v-btn>
 </template>
 
 <script lang="ts">
@@ -27,6 +23,10 @@ export default class MacroPromptButton extends Mixins(BaseMixin) {
         return this.splits[1] ?? this.text
     }
 
+    get color() {
+        return this.splits[2] ?? ''
+    }
+
     sendCommand() {
         window.console.log('send command: ', this.command)
     }
diff --git a/src/components/dialogs/MacroPromptButtonGroup.vue b/src/components/dialogs/MacroPromptButtonGroup.vue
new file mode 100644
index 000000000..aa99b9cbc
--- /dev/null
+++ b/src/components/dialogs/MacroPromptButtonGroup.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-row>
+        <v-col class="text-center">
+            <macro-prompt-button v-for="(button, index) in children" :key="index" :event="button" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPromptContent } from '@/store/server/types'
+
+@Component({})
+export default class MacroPromptButton extends Mixins(BaseMixin) {
+    @Prop({ type: Array, required: true }) readonly children!: ServerStateEventPromptContent[]
+}
+</script>
diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index acfc82ff1..5a5400109 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -15,7 +15,11 @@
             <v-card-text>
                 <template v-for="(event, index) in activePromptContent">
                     <macro-prompt-text v-if="event.type === 'text'" :key="index" :event="event" />
-                    <macro-prompt-button v-if="event.type === 'button'" :key="index" :event="event" />
+                    <macro-prompt-button-group
+                        v-if="event.type === 'button_group'"
+                        :key="index"
+                        :children="event.children ?? []" />
+                    <macro-prompt-button-group v-if="event.type === 'button'" :key="index" :children="[event]" />
                 </template>
             </v-card-text>
             <v-card-actions v-if="buttonPrimary || buttonSecondary">
@@ -87,7 +91,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     }
 
     get activePromptContent() {
-        const allowedTypes = ['button', 'text']
+        const allowedTypes = ['button', 'text', 'button_group_start', 'button_group_end']
         const activePromptContent: ServerStateEventPromptContent[] = this.activePrompt.map(
             (event: ServerStateEvent) => {
                 const type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
@@ -103,13 +107,25 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
             }
         )
 
-        window.console.log(activePromptContent)
-
         const output = activePromptContent.filter((event: ServerStateEventPromptContent) =>
             allowedTypes.includes(event.type)
         )
 
-        window.console.log(output)
+        while (output.findIndex((event) => event.type === 'button_group_start') !== -1) {
+            const start = output.findIndex((event) => event.type === 'button_group_start')
+            const end = output.findIndex((event) => event.type === 'button_group_end')
+
+            const buttons = output.slice(start + 1, end)
+
+            output[start] = {
+                date: buttons[0].date,
+                type: 'button_group',
+                message: '',
+                children: buttons,
+            }
+
+            output.splice(start + 1, buttons.length + 1)
+        }
 
         return output
     }
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index d3683f092..620047219 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -75,6 +75,7 @@ export interface ServerStateEventPromptContent {
     date: Date
     type: string
     message: string
+    children?: ServerStateEventPromptContent[]
 }
 
 export interface ServerStateCpuInfo {

From 3e2936877b9a0f8a433051667fdc8deb4893dfee Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 12:45:11 +0100
Subject: [PATCH 11/18] refactor: simplyfy filters

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/MacroPromptButton.vue  |  7 +-
 .../dialogs/MacroPromptButtonGroup.vue        | 10 ++-
 src/components/dialogs/TheMacroPrompt.vue     | 77 ++++++++++---------
 src/store/server/types.ts                     |  4 +-
 4 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/components/dialogs/MacroPromptButton.vue b/src/components/dialogs/MacroPromptButton.vue
index 23aad221d..e3959c151 100644
--- a/src/components/dialogs/MacroPromptButton.vue
+++ b/src/components/dialogs/MacroPromptButton.vue
@@ -5,11 +5,11 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerStateEventPromptContent } from '@/store/server/types'
+import { ServerStateEventPrompt } from '@/store/server/types'
 
 @Component({})
 export default class MacroPromptButton extends Mixins(BaseMixin) {
-    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPrompt
 
     get splits() {
         return this.event.message.split('|')
@@ -28,7 +28,8 @@ export default class MacroPromptButton extends Mixins(BaseMixin) {
     }
 
     sendCommand() {
-        window.console.log('send command: ', this.command)
+        this.$store.dispatch('server/addEvent', { message: this.command, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.command })
     }
 }
 </script>
diff --git a/src/components/dialogs/MacroPromptButtonGroup.vue b/src/components/dialogs/MacroPromptButtonGroup.vue
index aa99b9cbc..d4206460a 100644
--- a/src/components/dialogs/MacroPromptButtonGroup.vue
+++ b/src/components/dialogs/MacroPromptButtonGroup.vue
@@ -1,7 +1,10 @@
 <template>
     <v-row>
         <v-col class="text-center">
-            <macro-prompt-button v-for="(button, index) in children" :key="index" :event="button" />
+            <macro-prompt-button
+                v-for="(button, index) in children"
+                :key="'prompt_' + groupIndex + '_' + index"
+                :event="button" />
         </v-col>
     </v-row>
 </template>
@@ -9,10 +12,11 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerStateEventPromptContent } from '@/store/server/types'
+import { ServerStateEventPrompt } from '@/store/server/types'
 
 @Component({})
 export default class MacroPromptButton extends Mixins(BaseMixin) {
-    @Prop({ type: Array, required: true }) readonly children!: ServerStateEventPromptContent[]
+    @Prop({ type: Array, required: true }) readonly children!: ServerStateEventPrompt[]
+    @Prop({ type: Number, required: true }) readonly groupIndex!: number
 }
 </script>
diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index 5a5400109..aa279877a 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -14,12 +14,17 @@
             </template>
             <v-card-text>
                 <template v-for="(event, index) in activePromptContent">
-                    <macro-prompt-text v-if="event.type === 'text'" :key="index" :event="event" />
+                    <macro-prompt-text v-if="event.type === 'text'" :key="'prompt_' + index" :event="event" />
                     <macro-prompt-button-group
                         v-if="event.type === 'button_group'"
-                        :key="index"
+                        :key="'prompt_' + index"
+                        :group-index="index"
                         :children="event.children ?? []" />
-                    <macro-prompt-button-group v-if="event.type === 'button'" :key="index" :children="[event]" />
+                    <macro-prompt-button-group
+                        v-if="event.type === 'button'"
+                        :key="'prompt_' + index"
+                        :group-index="index"
+                        :children="[event]" />
                 </template>
             </v-card-text>
             <v-card-actions v-if="buttonPrimary || buttonSecondary">
@@ -39,6 +44,7 @@ import Panel from '@/components/ui/Panel.vue'
 import { mdiCloseThick, mdiInformation } from '@mdi/js'
 import { ServerStateEvent, ServerStateEventPromptContent } from '@/store/server/types'
 import MacroPromptActionButton from '@/components/dialogs/MacroPromptActionButton.vue'
+import { ServerStateEvent, ServerStateEventPrompt } from '@/store/server/types'
 import MacroPromptText from '@/components/dialogs/MacroPromptText.vue'
 import MacroPromptButton from '@/components/dialogs/MacroPromptButton.vue'
 
@@ -57,25 +63,38 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
         return this.events.filter((event: ServerStateEvent) => event.type === 'action')
     }
 
+    get macroPromptEvents() {
+        return this.actions
+            .filter((event: ServerStateEvent) => event.message.startsWith('// action:prompt_'))
+            .map((event: ServerStateEvent) => {
+                const type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
+                const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
+
+                const promptContent: ServerStateEventPromptContent = {
+                    date: event.date,
+                    type,
+                    message,
+                }
+
+                return promptContent
+            })
+    }
+
     get lastPromptBeginPos() {
         if (this.lastPromptShowPos === -1) return -1
 
-        return this.actions.findLastIndex(
-            (event: ServerStateEvent) => event.message.startsWith('// action:prompt_begin'),
+        return this.macroPromptEvents.findLastIndex(
+            (event: ServerStateEventPrompt) => event.type === 'begin',
             this.lastPromptShowPos
         )
     }
 
     get lastPromptShowPos() {
-        return this.actions.findLastIndex((event: ServerStateEvent) =>
-            event.message.startsWith('// action:prompt_show')
-        )
+        return this.macroPromptEvents.findLastIndex((event: ServerStateEventPrompt) => event.type === 'show')
     }
 
     get lastPromptClosePos() {
-        return this.actions.findLastIndex((event: ServerStateEvent) =>
-            event.message.startsWith('// action:prompt_close')
-        )
+        return this.macroPromptEvents.findLastIndex((event: ServerStateEventPrompt) => event.type === 'close')
     }
 
     get showDialog() {
@@ -87,33 +106,20 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     get activePrompt() {
         if (this.lastPromptShowPos === -1) return []
 
-        return this.actions.slice(this.lastPromptBeginPos, this.lastPromptShowPos)
+        return this.macroPromptEvents.slice(this.lastPromptBeginPos, this.lastPromptShowPos)
     }
 
-    get activePromptContent() {
+    get activePromptContent(): ServerStateEventPrompt[] {
         const allowedTypes = ['button', 'text', 'button_group_start', 'button_group_end']
-        const activePromptContent: ServerStateEventPromptContent[] = this.activePrompt.map(
-            (event: ServerStateEvent) => {
-                const type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
-                const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
-
-                const promptContent: ServerStateEventPromptContent = {
-                    date: event.date,
-                    type,
-                    message,
-                }
 
-                return promptContent
-            }
-        )
-
-        const output = activePromptContent.filter((event: ServerStateEventPromptContent) =>
-            allowedTypes.includes(event.type)
-        )
+        const output = this.activePrompt.filter((event: ServerStateEventPrompt) => allowedTypes.includes(event.type))
 
-        while (output.findIndex((event) => event.type === 'button_group_start') !== -1) {
-            const start = output.findIndex((event) => event.type === 'button_group_start')
-            const end = output.findIndex((event) => event.type === 'button_group_end')
+        while (
+            output.findIndex((event: ServerStateEventPrompt) => event.type === 'button_group_start') !== -1 &&
+            output.findIndex((event: ServerStateEventPrompt) => event.type === 'button_group_end') !== -1
+        ) {
+            const start = output.findIndex((event: ServerStateEventPrompt) => event.type === 'button_group_start')
+            const end = output.findIndex((event: ServerStateEventPrompt) => event.type === 'button_group_end')
 
             const buttons = output.slice(start + 1, end)
 
@@ -133,10 +139,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     get headline() {
         if (!this.showDialog || this.lastPromptBeginPos === -1) return ''
 
-        return (this.actions[this.lastPromptBeginPos].message ?? '')
-            .replace('// action:prompt_begin', '')
-            .replace(/"/g, '')
-            .trim()
+        return this.activePrompt[this.lastPromptBeginPos].message ?? ''
     }
 
     get buttonPrimary() {
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index 620047219..03c5f0c11 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -71,11 +71,11 @@ export interface ServerStateEvent {
     formatMessage: string | string[]
 }
 
-export interface ServerStateEventPromptContent {
+export interface ServerStateEventPrompt {
     date: Date
     type: string
     message: string
-    children?: ServerStateEventPromptContent[]
+    children?: ServerStateEventPrompt[]
 }
 
 export interface ServerStateCpuInfo {

From 563711a318e90155e284acaac6faa16d2f13cef4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 12:45:40 +0100
Subject: [PATCH 12/18] refactor: convert primary/secondary buttons to
 footer_button

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 ...Button.vue => MacroPromptFooterButton.vue} | 21 +++++-------
 src/components/dialogs/TheMacroPrompt.vue     | 33 ++++++-------------
 2 files changed, 18 insertions(+), 36 deletions(-)
 rename src/components/dialogs/{MacroPromptActionButton.vue => MacroPromptFooterButton.vue} (57%)

diff --git a/src/components/dialogs/MacroPromptActionButton.vue b/src/components/dialogs/MacroPromptFooterButton.vue
similarity index 57%
rename from src/components/dialogs/MacroPromptActionButton.vue
rename to src/components/dialogs/MacroPromptFooterButton.vue
index 904578899..83a0d9b06 100644
--- a/src/components/dialogs/MacroPromptActionButton.vue
+++ b/src/components/dialogs/MacroPromptFooterButton.vue
@@ -7,31 +7,26 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerStateEvent } from '@/store/server/types'
+import { ServerStateEventPrompt } from '@/store/server/types'
 
 @Component({})
 export default class MacroPromptActionButton extends Mixins(BaseMixin) {
-    @Prop({ type: Object, required: true }) readonly event!: ServerStateEvent
-    @Prop({ type: String, required: true }) readonly type!: 'primary' | 'secondary'
-
-    get filtertedMessageSplits() {
-        return (this.event.message ?? '')
-            .replace(`// action:prompt_button_${this.type}`, '')
-            .replace(/"/g, '')
-            .trim()
-            .split('|')
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPrompt
+
+    get splits() {
+        return this.event.message.split('|')
     }
 
     get text() {
-        return this.filtertedMessageSplits[0]
+        return this.splits[0]
     }
 
     get command() {
-        return this.filtertedMessageSplits[1] ?? this.text
+        return this.splits[1] ?? this.text
     }
 
     get color() {
-        return this.type === 'primary' ? 'primary' : ''
+        return this.splits[2] ?? ''
     }
 
     clickButton() {
diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index aa279877a..d06a54380 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -27,10 +27,12 @@
                         :children="[event]" />
                 </template>
             </v-card-text>
-            <v-card-actions v-if="buttonPrimary || buttonSecondary">
+            <v-card-actions v-if="footerButtons.length">
                 <v-spacer />
-                <macro-prompt-action-button v-if="buttonSecondary" :event="buttonSecondary" type="secondary" />
-                <macro-prompt-action-button v-if="buttonPrimary" :event="buttonPrimary" type="primary" />
+                <macro-prompt-footer-button
+                    v-for="(button, index) in footerButtons"
+                    :key="'prompt_footer_' + index"
+                    :event="button" />
             </v-card-actions>
         </panel>
     </v-dialog>
@@ -42,14 +44,13 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 
 import { mdiCloseThick, mdiInformation } from '@mdi/js'
-import { ServerStateEvent, ServerStateEventPromptContent } from '@/store/server/types'
-import MacroPromptActionButton from '@/components/dialogs/MacroPromptActionButton.vue'
 import { ServerStateEvent, ServerStateEventPrompt } from '@/store/server/types'
+import MacroPromptFooterButton from '@/components/dialogs/MacroPromptFooterButton.vue'
 import MacroPromptText from '@/components/dialogs/MacroPromptText.vue'
 import MacroPromptButton from '@/components/dialogs/MacroPromptButton.vue'
 
 @Component({
-    components: { MacroPromptButton, MacroPromptText, MacroPromptActionButton, Panel },
+    components: { MacroPromptButton, MacroPromptText, MacroPromptFooterButton, Panel },
 })
 export default class TheMacroPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
@@ -142,24 +143,10 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
         return this.activePrompt[this.lastPromptBeginPos].message ?? ''
     }
 
-    get buttonPrimary() {
-        const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
-            event.message.startsWith('// action:prompt_button_primary')
-        )
-
-        if (index === -1) return null
-
-        return this.activePrompt[index]
-    }
-
-    get buttonSecondary() {
-        const index = this.activePrompt.findLastIndex((event: ServerStateEvent) =>
-            event.message.startsWith('// action:prompt_button_secondary')
-        )
-
-        if (index === -1) return null
+    get footerButtons() {
+        if (!this.showDialog || this.lastPromptBeginPos === -1) return []
 
-        return this.activePrompt[index]
+        return this.activePrompt.filter((event: ServerStateEventPrompt) => event.type === 'footer_button')
     }
 
     closePrompt() {

From b560dff75781b2c70521d3c1796384b80a4370f6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 12:54:36 +0100
Subject: [PATCH 13/18] fix: fix some issues after refactoring

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 34 +++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index d06a54380..bc082a5c6 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -61,24 +61,24 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     }
 
     get actions() {
-        return this.events.filter((event: ServerStateEvent) => event.type === 'action')
+        return this.events.filter(
+            (event: ServerStateEvent) => event.type === 'action' && event.message.startsWith('// action:prompt_')
+        )
     }
 
     get macroPromptEvents() {
-        return this.actions
-            .filter((event: ServerStateEvent) => event.message.startsWith('// action:prompt_'))
-            .map((event: ServerStateEvent) => {
-                const type = event.message.replace('// action:prompt_', '').split(' ')[0].trim()
-                const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
-
-                const promptContent: ServerStateEventPromptContent = {
-                    date: event.date,
-                    type,
-                    message,
-                }
-
-                return promptContent
-            })
+        return this.actions.map((event: ServerStateEvent) => {
+            const type = (event.message ?? '').replace('// action:prompt_', '').split(' ')[0].trim()
+            const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
+
+            const promptContent: ServerStateEventPrompt = {
+                date: event.date,
+                type,
+                message,
+            }
+
+            return promptContent
+        })
     }
 
     get lastPromptBeginPos() {
@@ -128,7 +128,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
                 date: buttons[0].date,
                 type: 'button_group',
                 message: '',
-                children: buttons,
+                children: buttons.filter((event: ServerStateEventPrompt) => event.type === 'button'),
             }
 
             output.splice(start + 1, buttons.length + 1)
@@ -140,7 +140,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     get headline() {
         if (!this.showDialog || this.lastPromptBeginPos === -1) return ''
 
-        return this.activePrompt[this.lastPromptBeginPos].message ?? ''
+        return this.macroPromptEvents[this.lastPromptBeginPos]?.message ?? ''
     }
 
     get footerButtons() {

From 9b9c800151655afa457b4453c1710852f88a6632 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 14:32:38 +0100
Subject: [PATCH 14/18] perf: fix some performance issues in macro prompt
 dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 35 +++++++++++------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index bc082a5c6..0602282d4 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -60,25 +60,22 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
         return this.$store.state.server.events
     }
 
-    get actions() {
-        return this.events.filter(
-            (event: ServerStateEvent) => event.type === 'action' && event.message.startsWith('// action:prompt_')
-        )
-    }
-
     get macroPromptEvents() {
-        return this.actions.map((event: ServerStateEvent) => {
-            const type = (event.message ?? '').replace('// action:prompt_', '').split(' ')[0].trim()
-            const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
-
-            const promptContent: ServerStateEventPrompt = {
-                date: event.date,
-                type,
-                message,
-            }
-
-            return promptContent
-        })
+        return this.events
+            .filter((event: ServerStateEvent) => event.type === 'action')
+            .filter((event: ServerStateEvent) => event.message.startsWith('// action:prompt_'))
+            .map((event: ServerStateEvent) => {
+                const type = (event.message ?? '').replace('// action:prompt_', '').split(' ')[0].trim()
+                const message = (event.message ?? '').replace(`// action:prompt_${type}`, '').replace(/"/g, '').trim()
+
+                const promptContent: ServerStateEventPrompt = {
+                    date: event.date,
+                    type,
+                    message,
+                }
+
+                return promptContent
+            })
     }
 
     get lastPromptBeginPos() {
@@ -101,7 +98,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     get showDialog() {
         if (this.lastPromptBeginPos === -1) return false
 
-        return this.lastPromptBeginPos > this.lastPromptClosePos
+        return this.lastPromptBeginPos > this.lastPromptClosePos && this.activePromptContent.length > 0
     }
 
     get activePrompt() {

From 3d340eff1397112703fc3ec1fc55c050e74b169b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 Oct 2023 14:39:47 +0100
Subject: [PATCH 15/18] perf: only check the last 100 events for the macro
 prompt

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index 0602282d4..7325351f4 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -57,7 +57,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     mdiCloseThick = mdiCloseThick
 
     get events() {
-        return this.$store.state.server.events
+        return this.$store.state.server.events.slice(-100)
     }
 
     get macroPromptEvents() {

From 3d4becfea5b5ef37949029e6e1a4a4c5cb788314 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 1 Nov 2023 23:09:17 +0100
Subject: [PATCH 16/18] refactor: rename prompt_close to prompt_end

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index 7325351f4..e4f30cea3 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -92,7 +92,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     }
 
     get lastPromptClosePos() {
-        return this.macroPromptEvents.findLastIndex((event: ServerStateEventPrompt) => event.type === 'close')
+        return this.macroPromptEvents.findLastIndex((event: ServerStateEventPrompt) => event.type === 'end')
     }
 
     get showDialog() {
@@ -147,7 +147,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     }
 
     closePrompt() {
-        const gcode = `RESPOND type="command" msg="action:prompt_close"`
+        const gcode = `RESPOND type="command" msg="action:prompt_end"`
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })
     }

From aef10e01576a861c999058fdbfcd34abc3911303 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 3 Dec 2023 22:47:59 +0100
Subject: [PATCH 17/18] refactor: import MacroPromptButtonGroup

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index e4f30cea3..605491408 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -48,9 +48,10 @@ import { ServerStateEvent, ServerStateEventPrompt } from '@/store/server/types'
 import MacroPromptFooterButton from '@/components/dialogs/MacroPromptFooterButton.vue'
 import MacroPromptText from '@/components/dialogs/MacroPromptText.vue'
 import MacroPromptButton from '@/components/dialogs/MacroPromptButton.vue'
+import MacroPromptButtonGroup from '@/components/dialogs/MacroPromptButtonGroup.vue'
 
 @Component({
-    components: { MacroPromptButton, MacroPromptText, MacroPromptFooterButton, Panel },
+    components: { MacroPromptButtonGroup, MacroPromptButton, MacroPromptText, MacroPromptFooterButton, Panel },
 })
 export default class TheMacroPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation

From dce8a9e58a7c18e089729fe91e38da2e501f3680 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 3 Dec 2023 23:07:54 +0100
Subject: [PATCH 18/18] feat: add a function to close the prompt immediately

is could be possible, that klipper is busy and dont execute the close command fast enough

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/TheMacroPrompt.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/dialogs/TheMacroPrompt.vue b/src/components/dialogs/TheMacroPrompt.vue
index 605491408..68356dbc3 100644
--- a/src/components/dialogs/TheMacroPrompt.vue
+++ b/src/components/dialogs/TheMacroPrompt.vue
@@ -57,6 +57,8 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     mdiInformation = mdiInformation
     mdiCloseThick = mdiCloseThick
 
+    private internalCloseCommand: number | null = null
+
     get events() {
         return this.$store.state.server.events.slice(-100)
     }
@@ -98,6 +100,7 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
 
     get showDialog() {
         if (this.lastPromptBeginPos === -1) return false
+        if (this.internalCloseCommand !== null && this.internalCloseCommand == this.lastPromptBeginPos) return false
 
         return this.lastPromptBeginPos > this.lastPromptClosePos && this.activePromptContent.length > 0
     }
@@ -148,6 +151,9 @@ export default class TheMacroPrompt extends Mixins(BaseMixin) {
     }
 
     closePrompt() {
+        // close prompt immediately, because klipper could be busy
+        this.internalCloseCommand = this.lastPromptBeginPos
+
         const gcode = `RESPOND type="command" msg="action:prompt_end"`
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })