dreamteamprod · Tim020 · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026
diff --git a/client-v3/package-lock.json b/client-v3/package-lock.json
diff --git a/client-v3/package.json b/client-v3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client-v3",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "DigiScript front end (Vue 3)",
   "author": "DreamTeamProd",
   "private": true,
@@ -50,7 +50,7 @@
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "splitpanes": "^4.1.2",
-    "vue": "^3.5.38",
+    "vue": "^3.5.39",
     "vue-multiselect": "^3.5.0",
     "vue-router": "^5.1.0",
     "vue-toast-notification": "^3.1.3"
@@ -67,14 +67,14 @@
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/ui": "^4.1.9",
     "@vue/test-utils": "^2.4.11",
-    "eslint": "^10.5.0",
+    "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.7.0",
     "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
-    "prettier": "^3.8.4",
+    "prettier": "^3.9.0",
     "sass": "1.101.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.62.0",

diff --git a/client-v3/src/components/show/config/cast/CastLineStats.vue b/client-v3/src/components/show/config/cast/CastLineStats.vue
@@ -84,8 +84,7 @@ async function getStats(): Promise<void> {
 
 function getLineCountForCast(castId: number, actId: number | null, sceneId: number): number {
   const lineCounts = (castStats.value as Record<string, unknown>).line_counts as
-    | Record<string, Record<string, Record<string, number>>>
-    | undefined;
+    Record<string, Record<string, Record<string, number>>> | undefined;
   if (!lineCounts) return 0;
   return lineCounts[castId]?.[actId ?? '']?.[sceneId] ?? 0;
 }

diff --git a/client-v3/src/components/show/config/characters/CharacterLineStats.vue b/client-v3/src/components/show/config/characters/CharacterLineStats.vue
@@ -89,8 +89,7 @@ function getLineCountForCharacter(
   sceneId: number
 ): number {
   const lineCounts = (characterStats.value as Record<string, unknown>).line_counts as
-    | Record<string, Record<string, Record<string, number>>>
-    | undefined;
+    Record<string, Record<string, Record<string, number>>> | undefined;
   if (!lineCounts) return 0;
   return lineCounts[characterId]?.[actId ?? '']?.[sceneId] ?? 0;
 }

diff --git a/client-v3/src/components/show/config/cues/CueCountStats.vue b/client-v3/src/components/show/config/cues/CueCountStats.vue
@@ -83,8 +83,7 @@ async function getStats(): Promise<void> {
 
 function getCountForCueType(cueTypeId: number, actId: number | null, sceneId: number): number {
   const cueCounts = (cueStats.value as Record<string, unknown>).cue_counts as
-    | Record<string, Record<string, Record<string, number>>>
-    | undefined;
+    Record<string, Record<string, Record<string, number>>> | undefined;
   if (!cueCounts) return 0;
   return cueCounts[cueTypeId]?.[actId ?? '']?.[sceneId] ?? 0;
 }

diff --git a/client-v3/src/components/show/config/cues/ScriptLineCueEditor.vue b/client-v3/src/components/show/config/cues/ScriptLineCueEditor.vue
@@ -22,32 +22,35 @@
         <BCol cols="3" class="cue-column">
           <template v-if="line.line_type !== LINE_TYPES.SPACING">
             <BButtonGroup>
-              <BButton
-                v-for="cue in individualCues"
-                :key="cue.id"
-                class="cue-button"
-                :disabled="!systemStore.isCueEditor"
-                :style="{
-                  backgroundColor: cueBackgroundColour(cue),
-                  color: contrastColor(cueBackgroundColour(cue)),
-                }"
-                @click.stop="openEditForm(cue)"
-              >
-                {{ cueLabel(cue) }}
-              </BButton>
-              <BButton
-                v-for="grp in lineGroups"
-                :key="`group_${grp.group.id}`"
-                class="cue-button cue-group-btn"
-                :disabled="!systemStore.isCueEditor"
-                :style="{
-                  backgroundColor: cueGroupBackgroundColour(grp.group),
-                  color: contrastColor(cueGroupBackgroundColour(grp.group)),
-                }"
-                @click.stop="openEditGroup(grp.group, grp.cues)"
+              <template
+                v-for="slot in mergedCueSlots"
+                :key="slot.type === 'individual' ? slot.cue.id : `group_${slot.group.id}`"
               >
-                {{ cueGroupLabel(grp.group, grp.cues) }}
-              </BButton>
+                <BButton
+                  v-if="slot.type === 'individual'"
+                  class="cue-button"
+                  :disabled="!systemStore.isCueEditor"
+                  :style="{
+                    backgroundColor: cueBackgroundColour(slot.cue),
+                    color: contrastColor(cueBackgroundColour(slot.cue)),
+                  }"
+                  @click.stop="openEditForm(slot.cue)"
+                >
+                  {{ cueLabel(slot.cue) }}
+                </BButton>
+                <BButton
+                  v-else
+                  class="cue-button cue-group-btn"
+                  :disabled="!systemStore.isCueEditor"
+                  :style="{
+                    backgroundColor: cueGroupBackgroundColour(slot.group),
+                    color: contrastColor(cueGroupBackgroundColour(slot.group)),
+                  }"
+                  @click.stop="openEditGroup(slot.group, slot.cues)"
+                >
+                  {{ cueGroupLabel(slot.group, slot.cues) }}
+                </BButton>
+              </template>
               <BButton
                 v-if="systemStore.isCueEditor"
                 class="cue-button add-cue-btn"
@@ -384,8 +387,7 @@ const sceneLabel = computed(
 
 const isLineCut = computed(() => isWholeLineCut(props.line, props.cuts));
 
-const individualCues = computed(() => props.cues.filter((c) => c.group_id == null));
-const lineGroups = computed(() => scriptStore.groupedCuesForLine(props.line.id).groups);
+const mergedCueSlots = computed(() => scriptStore.groupedCuesForLine(props.line.id).merged);
 
 // RBAC-filtered cue type options: admins see all, others only see types they can write
 const cueTypeOptions = computed(() => {

diff --git a/client-v3/src/components/show/config/stage/CrewTimeline.vue b/client-v3/src/components/show/config/stage/CrewTimeline.vue
@@ -151,13 +151,11 @@ const scenes = computed(() => showStore.orderedScenes);
 const rows = computed((): TimelineRow[] =>
   stageStore.crewList
     .filter((c) => (stageStore.crewAssignmentsByCrew[c.id] ?? []).length > 0)
-    .map(
-      (c): TimelineRow => ({
-        id: c.id,
-        name: [c.first_name, c.last_name].filter(Boolean).join(' '),
-        type: 'crew',
-      })
-    )
+    .map((c): TimelineRow => ({
+      id: c.id,
+      name: [c.first_name, c.last_name].filter(Boolean).join(' '),
+      type: 'crew',
+    }))
 );
 
 const {

diff --git a/client-v3/src/components/show/live/ScriptLineViewer.vue b/client-v3/src/components/show/live/ScriptLineViewer.vue
@@ -130,28 +130,31 @@
           </template>
           <BCol cols="3" :class="['cue-column-right', { 'first-row': isFirstRowContent }]">
             <BButtonGroup>
-              <BButton
-                v-for="cue in individualCues"
-                :key="cue.id"
-                class="cue-button"
-                :style="{
-                  backgroundColor: cueBackgroundColour(cue),
-                  color: contrastColor(cueBackgroundColour(cue)),
-                }"
+              <template
+                v-for="slot in mergedCueSlots"
+                :key="slot.type === 'individual' ? slot.cue.id : `group_${slot.group.id}`"
               >
-                {{ cueLabel(cue) }}
-              </BButton>
-              <BButton
-                v-for="grp in lineGroups"
-                :key="`group_${grp.group.id}`"
-                class="cue-button cue-group-btn"
-                :style="{
-                  backgroundColor: cueGroupBackgroundColour(grp.group),
-                  color: contrastColor(cueGroupBackgroundColour(grp.group)),
-                }"
-              >
-                {{ cueGroupLabel(grp.group, grp.cues) }}
-              </BButton>
+                <BButton
+                  v-if="slot.type === 'individual'"
+                  class="cue-button"
+                  :style="{
+                    backgroundColor: cueBackgroundColour(slot.cue),
+                    color: contrastColor(cueBackgroundColour(slot.cue)),
+                  }"
+                >
+                  {{ cueLabel(slot.cue) }}
+                </BButton>
+                <BButton
+                  v-else
+                  class="cue-button cue-group-btn"
+                  :style="{
+                    backgroundColor: cueGroupBackgroundColour(slot.group),
+                    color: contrastColor(cueGroupBackgroundColour(slot.group)),
+                  }"
+                >
+                  {{ cueGroupLabel(slot.group, slot.cues) }}
+                </BButton>
+              </template>
             </BButtonGroup>
             <BButton
               v-if="cueAddMode"
@@ -167,28 +170,31 @@
         <template v-else>
           <BCol cols="3" :class="['cue-column', { 'first-row': isFirstRowContent }]">
             <BButtonGroup>
-              <BButton
-                v-for="cue in individualCues"
-                :key="cue.id"
-                class="cue-button"
-                :style="{
-                  backgroundColor: cueBackgroundColour(cue),
-                  color: contrastColor(cueBackgroundColour(cue)),
-                }"
+              <template
+                v-for="slot in mergedCueSlots"
+                :key="slot.type === 'individual' ? slot.cue.id : `group_${slot.group.id}`"
               >
-                {{ cueLabel(cue) }}
-              </BButton>
-              <BButton
-                v-for="grp in lineGroups"
-                :key="`group_${grp.group.id}`"
-                class="cue-button cue-group-btn"
-                :style="{
-                  backgroundColor: cueGroupBackgroundColour(grp.group),
-                  color: contrastColor(cueGroupBackgroundColour(grp.group)),
-                }"
-              >
-                {{ cueGroupLabel(grp.group, grp.cues) }}
-              </BButton>
+                <BButton
+                  v-if="slot.type === 'individual'"
+                  class="cue-button"
+                  :style="{
+                    backgroundColor: cueBackgroundColour(slot.cue),
+                    color: contrastColor(cueBackgroundColour(slot.cue)),
+                  }"
+                >
+                  {{ cueLabel(slot.cue) }}
+                </BButton>
+                <BButton
+                  v-else
+                  class="cue-button cue-group-btn"
+                  :style="{
+                    backgroundColor: cueGroupBackgroundColour(slot.group),
+                    color: contrastColor(cueGroupBackgroundColour(slot.group)),
+                  }"
+                >
+                  {{ cueGroupLabel(slot.group, slot.cues) }}
+                </BButton>
+              </template>
             </BButtonGroup>
             <BButton
               v-if="cueAddMode"
@@ -314,8 +320,7 @@ const {
 const { cueLabel, cueBackgroundColour, cueGroupLabel, cueGroupBackgroundColour, contrastColor } =
   useCueDisplay();
 
-const individualCues = computed(() => props.cues.filter((c) => c.group_id == null));
-const lineGroups = computed(() => scriptStore.groupedCuesForLine(props.line.id).groups);
+const mergedCueSlots = computed(() => scriptStore.groupedCuesForLine(props.line.id).merged);
 
 const lineContainer = ref<HTMLElement | null>(null);
 let observer: MutationObserver | null = null;

diff --git a/client-v3/src/components/show/live/ScriptLineViewerCompact.vue b/client-v3/src/components/show/live/ScriptLineViewerCompact.vue
@@ -32,52 +32,56 @@
         </BCol>
         <BCol v-if="cueAddMode" cols="1" class="cue-add-column" />
       </BRow>
-      <BRow v-for="(cue, cueIndex) in individualCues" :key="`cue_${cue.id}`">
-        <BCol
-          cols="2"
-          :class="[
-            'cue-column',
-            'line-part',
-            'text-end',
-            'fw-bold',
-            'cue',
-            { 'first-row': isFirstRowCues && cueIndex === 0 },
-          ]"
-          :style="{ color: cueBackgroundColour(cue) }"
-        >
-          <span>{{ cuePrefix(cue) }}</span>
-        </BCol>
-        <BCol
-          :cols="cueAddMode ? 9 : 10"
-          class="line-part text-start fw-bold cue"
-          :style="{ color: cueBackgroundColour(cue) }"
-        >
-          <span>{{ cue.ident }}</span>
-        </BCol>
-        <BCol v-if="cueAddMode" cols="1" class="cue-add-column" />
-      </BRow>
-      <BRow v-for="(grp, groupIndex) in lineGroups" :key="`group_${grp.group.id}`">
-        <BCol
-          cols="2"
-          :class="[
-            'cue-column',
-            'line-part',
-            'text-end',
-            'fw-bold',
-            'cue',
-            { 'first-row': isFirstRowCues && individualCues.length === 0 && groupIndex === 0 },
-          ]"
-          :style="{ color: cueGroupBackgroundColour(grp.group) }"
-        >
-          <span>{{ cueGroupPrefix(grp.group) }}</span>
-        </BCol>
-        <BCol
-          :cols="cueAddMode ? 9 : 10"
-          class="line-part text-start fw-bold cue"
-          :style="{ color: cueGroupBackgroundColour(grp.group) }"
-        >
-          <span>{{ cueGroupIdentLabel(grp.group, grp.cues) }}</span>
-        </BCol>
+      <BRow
+        v-for="(slot, slotIndex) in mergedCueSlots"
+        :key="slot.type === 'individual' ? `cue_${slot.cue.id}` : `group_${slot.group.id}`"
+      >
+        <template v-if="slot.type === 'individual'">
+          <BCol
+            cols="2"
+            :class="[
+              'cue-column',
+              'line-part',
+              'text-end',
+              'fw-bold',
+              'cue',
+              { 'first-row': isFirstRowCues && slotIndex === 0 },
+            ]"
+            :style="{ color: cueBackgroundColour(slot.cue) }"
+          >
+            <span>{{ cuePrefix(slot.cue) }}</span>
+          </BCol>
+          <BCol
+            :cols="cueAddMode ? 9 : 10"
+            class="line-part text-start fw-bold cue"
+            :style="{ color: cueBackgroundColour(slot.cue) }"
+          >
+            <span>{{ slot.cue.ident }}</span>
+          </BCol>
+        </template>
+        <template v-else>
+          <BCol
+            cols="2"
+            :class="[
+              'cue-column',
+              'line-part',
+              'text-end',
+              'fw-bold',
+              'cue',
+              { 'first-row': isFirstRowCues && slotIndex === 0 },
+            ]"
+            :style="{ color: cueGroupBackgroundColour(slot.group) }"
+          >
+            <span>{{ cueGroupPrefix(slot.group) }}</span>
+          </BCol>
+          <BCol
+            :cols="cueAddMode ? 9 : 10"
+            class="line-part text-start fw-bold cue"
+            :style="{ color: cueGroupBackgroundColour(slot.group) }"
+          >
+            <span>{{ cueGroupIdentLabel(slot.group, slot.cues) }}</span>
+          </BCol>
+        </template>
         <BCol v-if="cueAddMode" cols="1" class="cue-add-column" />
       </BRow>
       <BRow class="line-row">
@@ -212,8 +216,7 @@ const {
   cueGroupIdentLabel,
 } = useCueDisplay();
 
-const individualCues = computed(() => props.cues.filter((c) => c.group_id == null));
-const lineGroups = computed(() => scriptStore.groupedCuesForLine(props.line.id).groups);
+const mergedCueSlots = computed(() => scriptStore.groupedCuesForLine(props.line.id).merged);
 
 const lineContainer = ref<HTMLElement | null>(null);
 let observer: MutationObserver | null = null;
@@ -260,7 +263,7 @@ const isTaggedStageDirection = computed(() => {
 });
 
 const isLineCut = computed(() => isWholeLineCut(props.line, props.cuts));
-const hasAnyCues = computed(() => individualCues.value.length > 0 || lineGroups.value.length > 0);
+const hasAnyCues = computed(() => mergedCueSlots.value.length > 0);
 const isFirstRowActScene = computed(() => needsActSceneLabel.value);
 const isFirstRowCues = computed(() => !needsActSceneLabel.value && hasAnyCues.value);
 const isFirstRowContent = computed(() => !needsActSceneLabel.value && !hasAnyCues.value);