Merge pull request #885 from dreamteamprod/dev

Release 0.25.0

Author: Tim020

.github/workflows/nodelint.yml

@@ -11,8 +11,8 @@ jobs:
       run:
         working-directory: ./client
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 24
     - run: npm ci
@@ -23,8 +23,8 @@ jobs:
       run:
         working-directory: ./electron
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 24
       - run: npm ci

.gitignore

@@ -3,7 +3,7 @@
 CLAUDE.md
 .idea/
 .playwright-mcp/
-PLAN.md
+plans/
 
 # Gradle and Maven with auto-import
 # When using Gradle or Maven with auto-import, you should exclude module files,

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.24.2",
+  "version": "0.25.0",
   "description": "DigiScript front end",
   "author": "DreamTeamProd",
   "private": true,
@@ -30,17 +30,18 @@
     "bootstrap-vue": "2.23.1",
     "bootswatch": "4.6.2",
     "contrast-color": "1.0.1",
-    "core-js": "3.48.0",
+    "core-js": "3.49.0",
     "d3-hierarchy": "^3.1.2",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "deep-object-diff": "1.1.9",
-    "dompurify": "3.3.1",
-    "fuse.js": "7.1.0",
+    "dompurify": "3.4.1",
+    "fuse.js": "7.3.0",
     "jquery": "3.7.1",
-    "lodash": "4.17.23",
+    "lodash": "4.18.1",
     "loglevel": "1.9.2",
     "marked": "11.2.0",
+    "splitpanes": "^2.4.1",
     "vue": "2.7.14",
     "vue-multiselect": "2.1.9",
     "vue-native-websocket": "2.0.15",
@@ -51,24 +52,24 @@
     "vuex-persistedstate": "3.2.1"
   },
   "devDependencies": {
-    "@babel/core": "7.28.6",
+    "@babel/core": "7.29.0",
     "@babel/eslint-parser": "7.28.6",
-    "@babel/preset-env": "7.28.6",
+    "@babel/preset-env": "7.29.2",
     "@eslint/js": "^9.39.2",
     "@types/vuelidate": "^0.7.22",
     "@vitejs/plugin-vue2": "2.3.4",
-    "@vitest/ui": "^4.0.18",
-    "@vue/test-utils": "^2.4.6",
+    "@vitest/ui": "^4.1.5",
+    "@vue/test-utils": "^2.4.8",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-vue": "^9.33.0",
     "globals": "^15.14.0",
     "jsdom": "^27.4.0",
-    "prettier": "^3.8.1",
-    "sass": "1.97.3",
+    "prettier": "^3.8.3",
+    "sass": "1.99.0",
     "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.5"
   },
   "browserslist": [
     "> 1%",

client/package.json

@@ -60,6 +60,17 @@
               >
                 Jump To Page
               </b-dropdown-item>
+              <b-dropdown-item-btn
+                :disabled="
+                  CURRENT_SHOW_SESSION == null ||
+                  !WEBSOCKET_HEALTHY ||
+                  stoppingSession ||
+                  startingSession
+                "
+                @click.stop.prevent="SET_STAGE_MANAGER_MODE(!STAGE_MANAGER_MODE)"
+              >
+                {{ STAGE_MANAGER_MODE ? 'Disable' : 'Enable' }} Stage Manager
+              </b-dropdown-item-btn>
             </b-nav-item-dropdown>
           </template>
           <b-nav-item
@@ -162,7 +173,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapGetters, mapActions, mapMutations } from 'vuex';
 import log from 'loglevel';
 import CreateUser from '@/vue_components/user/CreateUser.vue';
 import { makeURL } from '@/js/utils';
@@ -227,6 +238,7 @@ export default {
       'IS_SCRIPT_EDITOR',
       'IS_CUE_READER',
       'IS_CUE_EDITOR',
+      'STAGE_MANAGER_MODE',
     ]),
   },
   async created() {
@@ -285,6 +297,7 @@ export default {
       'CHECK_WEBSOCKET_STATE',
       'GET_USER_SETTINGS',
     ]),
+    ...mapMutations(['SET_STAGE_MANAGER_MODE']),
     isElectron,
     async switchServer() {
       // Clear the active connection and disconnect WebSocket
@@ -311,19 +324,15 @@ export default {
     async awaitWSConnect() {
       if (this.WEBSOCKET_HEALTHY) {
         clearTimeout(this.loadTimer);
-        await this.GET_RBAC_ROLES();
 
-        // Check WebSocket state for any pending operations
-        if (this.WEBSOCKET_HAS_PENDING_OPERATIONS) {
-          await this.CHECK_WEBSOCKET_STATE();
-        }
+        await Promise.all([
+          this.GET_RBAC_ROLES(),
+          this.WEBSOCKET_HAS_PENDING_OPERATIONS ? this.CHECK_WEBSOCKET_STATE() : Promise.resolve(),
+        ]);
 
-        // Check for authentication via token first
         if (this.AUTH_TOKEN) {
-          // Then get user data
           await this.GET_CURRENT_USER();
-          await this.GET_CURRENT_RBAC();
-          await this.GET_USER_SETTINGS();
+          await Promise.all([this.GET_CURRENT_RBAC(), this.GET_USER_SETTINGS()]);
         }
 
         if (this.SETTINGS.current_show != null) {

client/src/App.vue

@@ -10,3 +10,11 @@
 :root {
   --body-background: #{$body-bg};
 }
+
+.splitpanes {
+  background: inherit !important;
+}
+
+.splitpanes__pane {
+  background: inherit !important;
+}

client/src/assets/styles/dark.scss

@@ -0,0 +1,121 @@
+/**
+ * Shared styles for timeline visualization components (MicTimeline, StageTimeline).
+ *
+ * Usage: Import in Vue component <style> block:
+ *   @use '@/assets/styles/timeline';
+ *
+ * Then apply the container class to your root element:
+ *   <div class="timeline-container">
+ */
+
+.timeline-container {
+  position: relative;
+  background-color: var(--body-background);
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  min-height: 400px;
+  height: calc(100vh - 200px);
+}
+
+.timeline-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.timeline-controls-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: rgba(52, 58, 64, 0.95);
+  border-bottom: 1px solid #6c757d;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.svg-container {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  min-height: 0;
+}
+
+.timeline-svg {
+  display: block;
+  background-color: var(--body-background);
+}
+
+// Scene dividers (vertical lines)
+.scene-divider {
+  stroke: #6c757d;
+  stroke-width: 1;
+  opacity: 0.6;
+  shape-rendering: crispEdges;
+}
+
+// Act labels
+.act-header {
+  fill: #343a40;
+  stroke: #6c757d;
+  stroke-width: 1px;
+}
+
+.act-label {
+  fill: #dee2e6;
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Scene labels
+.scene-label {
+  fill: #adb5bd;
+  font-size: 11px;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Row labels
+.row-label {
+  fill: #dee2e6;
+  font-size: 12px;
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+// Row separators (horizontal lines)
+.row-separator {
+  stroke: #6c757d;
+  stroke-width: 1px;
+  opacity: 0.5;
+}
+
+// Allocation bars
+.allocation-bar {
+  stroke: #212529;
+  stroke-width: 1px;
+  cursor: pointer;
+  transition:
+    opacity 0.2s ease,
+    stroke-width 0.2s ease;
+
+  &:hover {
+    opacity: 0.8;
+    stroke-width: 2px;
+    stroke: #fff;
+  }
+}
+
+.bar-label {
+  fill: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  user-select: none;
+}