speechflow 1.4.4 → 1.5.0

package/speechflow-ui-db/etc/eslint.mjs

@@ -62,7 +62,6 @@ export default [
             "@stylistic/brace-style":                             [ "error", "stroustrup", { allowSingleLine: true } ],
             "@stylistic/quotes":                                  [ "error", "double" ],
 
-            "@stylistic/no-multi-spaces":                         "off",
             "@stylistic/no-multi-spaces":                         "off",
             "@stylistic/no-multiple-empty-lines":                 "off",
             "@stylistic/key-spacing":                             "off",

package/speechflow-ui-db/etc/tsc-client.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-		"outDir":                  "../dst",
+        "outDir":                  "../dst",
         "target":                  "ESNext",
         "module":                  "ESNext",
         "moduleResolution":        "Bundler",
@@ -21,8 +21,8 @@
     },
     "include": [
         "../src/**/*.d.ts",
-		"../src/**/*.ts",
-		"../src/**/*.vue"
+        "../src/**/*.ts",
+        "../src/**/*.vue"
     ],
     "references": [
         { "path": "./tsc.node.json" }

package/speechflow-ui-db/package.json

@@ -1,5 +1,5 @@
 {
-    "private":                              "true",
+    "private":                              true,
     "name":                                 "speechflow-ui-db",
     "description":                          "SpeechFlow User Interface (Dashboard)",
     "keywords":                             [ "speechflow" ],
@@ -14,19 +14,20 @@
         "url":                              "http://engelschall.com"
     },
     "dependencies": {
-        "vue":                              "3.5.18",
+        "vue":                              "3.5.20",
         "moment":                           "2.30.1",
         "@opensumi/reconnecting-websocket": "4.4.0",
         "axios":                            "1.11.0",
         "typopro-web":                      "4.2.7",
         "@fortawesome/fontawesome-free":    "7.0.0",
         "patch-package":                    "8.0.0",
-        "@rse/stx":                         "1.0.7"
+        "@rse/stx":                         "1.0.9"
     },
     "devDependencies": {
-        "vite":                             "7.0.6",
-        "@typescript-eslint/eslint-plugin": "8.39.0",
-        "@typescript-eslint/parser":        "8.39.0",
+        "vite":                             "7.1.3",
+        "typescript-eslint":                "8.41.0",
+        "@typescript-eslint/eslint-plugin": "8.41.0",
+        "@typescript-eslint/parser":        "8.41.0",
         "@vitejs/plugin-vue":               "6.0.1",
         "@rollup/plugin-yaml":              "4.1.2",
         "vite-plugin-node-polyfills":       "0.24.0",
@@ -36,8 +37,8 @@
 
         "@vue/eslint-config-typescript":    "14.6.0",
         "vue-eslint-parser":                "10.2.0",
-        "eslint":                           "9.32.0",
-        "@eslint/js":                       "9.32.0",
+        "eslint":                           "9.34.0",
+        "@eslint/js":                       "9.34.0",
         "neostandard":                      "0.12.2",
         "eslint-plugin-import":             "2.32.0",
         "eslint-plugin-vue":                "10.4.0",
@@ -47,7 +48,7 @@
 
         "nodemon":                          "3.1.10",
         "shx":                              "0.4.0",
-        "stylelint":                        "16.23.0",
+        "stylelint":                        "16.23.1",
         "stylelint-config-html":            "1.1.0",
         "stylelint-config-recommended-vue": "1.6.1",
         "stylelint-config-standard":        "39.0.0",
@@ -56,7 +57,7 @@
         "postcss-html":                     "1.8.0",
         "stylus":                           "0.64.0",
         "typescript":                       "5.9.2",
-        "vue-tsc":                          "3.0.5",
+        "vue-tsc":                          "3.0.6",
         "delay-cli":                        "2.0.0",
         "cross-env":                        "10.0.0",
         "serve":                            "14.2.4"

package/speechflow-ui-db/src/app.vue

@@ -10,31 +10,30 @@
     <div class="app">
         <div class="dashboard">
             <div v-bind:key="block.id" v-for="block of info" class="block">
-                <div v-if="block.type === 'audio'" class="audio-col">
-                    <div class="audio-meter" v-bind:style="{
-                        height: (100 * (1 - ((block.value as number) / - 60.0))) + '%'
-                    }">
-                        <div class="audio-value">
-                            {{ (block.value as number).toFixed(1) }}
-                            <div class="audio-unit">LUFS-S</div>
+                <div class="block-content">
+                    <div v-if="block.type === 'audio'" class="audio-col">
+                        <div class="audio-meter" v-bind:style="{
+                            height: (100 * (1 - ((block.value as number) / - 60.0))) + '%'
+                        }">
+                            <div class="audio-value">
+                                {{ (block.value as number).toFixed(1) }}
+                                <div class="audio-unit">LUFS-S</div>
+                            </div>
                         </div>
                     </div>
-                    <div class="audio-name">
-                        {{ block.name }}
+                    <div ref="textCol"
+                        v-if="block.type === 'text'"
+                        class="text-col"
+                        v-bind:class="{ intermediate: block.lastKind === 'intermediate' }">
+                        <div v-bind:key="value"
+                            v-for="value of block.value"
+                            class="text-value">
+                            {{ value as string }}
+                        </div>
                     </div>
                 </div>
-                <div ref="textCol"
-                    v-if="block.type === 'text'"
-                    class="text-col"
-                    v-bind:class="{ intermediate: block.lastKind === 'intermediate' }">
-                    <div v-bind:key="value"
-                        v-for="value of block.value"
-                        class="text-value">
-                        {{ value as unknown as string }}
-                    </div>
-                    <div class="text-name">
-                        {{ block.name }}
-                    </div>
+                <div class="block-name">
+                    {{ block.name }}
                 </div>
             </div>
         </div>
@@ -62,6 +61,9 @@
         .block
             height: calc(100% - 0.5vw)
             margin-right: 0.5vw
+            flex-direction: column
+            align-items: flex-end
+            justify-content: flex-end
             &:last-child
                 margin-right: 0
             &:has(.audio-col)
@@ -70,64 +72,66 @@
                 flex-grow: 1
                 flex-shrink: 1
                 flex-basis: 0
-            .audio-col
-                width: 10vw
-                height: 100%
-                display: flex
-                flex-direction: column
-                align-items: flex-end
-                justify-content: flex-end
-                background-color: var(--color-acc-bg-3)
-                .audio-meter
-                    width: 100%
+            .block-name
+                width: 100%
+                height: 2.5vw
+                text-align: center
+                background-color: var(--color-std-bg-3)
+                color: var(--color-std-fg-3)
+                font-size: 1.5vw
+                margin-top: 0.5vw
+                border-radius: 0.5vw
+            .block-content
+                background-color: var(--color-std-bg-3)
+                height: calc(100% - 3.0vw)
+                border-radius: 0.5vw
+                overflow: hidden
+                .audio-col
+                    width: 10vw
+                    height: 100%
                     display: flex
                     flex-direction: column
                     align-items: flex-end
                     justify-content: flex-end
-                    background-color: var(--color-acc-fg-3)
-                    .audio-value
+                    background-color: var(--color-std-bg-3)
+                    .audio-meter
                         width: 100%
-                        font-size: 2.5vw
-                        text-align: center
-                        color: var(--color-std-bg-0)
-                        .audio-unit
-                            font-size: 1.5vw
-                            margin-top: -0.5vw
-                            margin-bottom: 0.5vw
-                .audio-name
-                    width: 100%
-                    text-align: center
-                    background-color: var(--color-acc-bg-1)
-                    color: var(--color-acc-fg-3)
-                    font-size: 2vw
-            .text-col
-                width: 100%
-                height: 100%
-                overflow-x: hidden
-                overflow-y: scroll
-                display: flex
-                flex-direction: column
-                align-items: flex-end
-                justify-content: flex-end
-                .text-value
-                    width: calc(100% - 2 * 1.0vw)
-                    background-color: var(--color-acc-bg-3)
-                    color: var(--color-acc-fg-3)
-                    border-radius: 0.5vw
-                    font-size: 1.5vw
-                    padding: 0.5vw 1.0vw
-                    margin-bottom: 0.5vw
-                    overflow-wrap: break-word
-                .text-name
+                        display: flex
+                        flex-direction: column
+                        align-items: flex-end
+                        justify-content: flex-end
+                        background-color: var(--color-acc-bg-5)
+                        .audio-value
+                            width: 100%
+                            font-size: 2.5vw
+                            text-align: center
+                            color: var(--color-std-fg-5)
+                            .audio-unit
+                                font-size: 1.5vw
+                                margin-top: -0.5vw
+                                margin-bottom: 0.5vw
+                .text-col
                     width: 100%
-                    text-align: center
-                    background-color: var(--color-acc-bg-1)
-                    color: var(--color-acc-fg-3)
-                    font-size: 2vw
-            .text-col.intermediate
-                .text-value:nth-last-child(2)
-                    background-color: var(--color-sig-bg-3)
-                    color: var(--color-sig-fg-3)
+                    height: 100%
+                    overflow-x: hidden
+                    overflow-y: scroll
+                    display: flex
+                    flex-direction: column
+                    align-items: flex-end
+                    justify-content: flex-end
+                    .text-value
+                        width: calc(100% - 2 * 1.0vw)
+                        background-color: var(--color-acc-bg-3)
+                        color: var(--color-acc-fg-5)
+                        border-radius: 0.5vw
+                        font-size: 1.5vw
+                        padding: 0.5vw 1.0vw
+                        margin-top: 0.5vw
+                        overflow-wrap: break-word
+                .text-col.intermediate
+                    .text-value:last-child
+                        background-color: var(--color-sig-bg-3)
+                        color: var(--color-sig-fg-5)
 </style>
 
 <script setup lang="ts">
@@ -150,7 +154,8 @@ export default defineComponent({
     components: {
     },
     data: () => ({
-        info: [] as Info[]
+        info: [] as Info[],
+        ws: null as ReconnectingWebSocket | null
     }),
     created () {
     },
@@ -171,17 +176,24 @@ export default defineComponent({
         }
 
         /*  connect to WebSocket API for receiving dashboard information  */
-        const ws = new ReconnectingWebSocket(url, [], {
+        this.ws = new ReconnectingWebSocket(url, [], {
             reconnectionDelayGrowFactor: 1.3,
             maxReconnectionDelay:        4000,
             minReconnectionDelay:        1000,
             connectionTimeout:           4000,
             minUptime:                   5000
         })
-        ws.addEventListener("open", (ev) => {
+        this.ws.addEventListener("open", (ev) => {
         })
-        ws.addEventListener("message", (ev) => {
-            const event = JSON.parse(ev.data)
+        this.ws.addEventListener("message", (ev) => {
+            let event
+            try {
+                event = JSON.parse(ev.data)
+            }
+            catch (error) {
+                this.log("ERROR", "Failed to parse WebSocket message", { error, data: ev.data })
+                return
+            }
             if (event.response !== "DASHBOARD")
                 return
             const [ type, id, kind, value ] = event.args
@@ -211,6 +223,12 @@ export default defineComponent({
             }
         })
     },
+    beforeUnmount () {
+        if (this.ws) {
+            this.ws.close()
+            this.ws = null
+        }
+    },
     methods: {
         log (level: string, msg: string, data: { [ key: string ]: any } | null = null) {
             const timestamp = moment().format("YYYY-MM-DD hh:mm:ss.SSS")