Treat all Now Serving cards equally and announce every ticket change.

Remove newest-card highlighting so every active service point looks the same, sort the board stably by destination, and have the display announce whenever a counter’s ticket changes (falling back when a server voice row is missing).

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/js/kiosk-flow.js

@@ -202,6 +202,9 @@ export function registerKioskFlow(Alpine) {
     Alpine.data('displayBoard', (config = {}) => ({
         payload: config.initial ?? null,
         announcedIds: {},
+        servingSignatures: {},
+        servingPrimed: false,
+        pendingLocalAnnouncements: [],
         isAnnouncing: false,
         speechReady: false,
         voices: [],
@@ -229,6 +232,10 @@ export function registerKioskFlow(Alpine) {
                 }
                 this.payload = await res.json();
                 this.pollError = null;
+                this.trackServingChanges(
+                    this.payload?.now_serving ?? [],
+                    this.payload?.announcements ?? [],
+                );
                 this.maybeAnnounce(this.payload?.announcements ?? []);
             } catch (e) {
                 this.pollError = e.message || 'Could not refresh display data';
@@ -236,6 +243,64 @@ export function registerKioskFlow(Alpine) {
             }
         },
 
+        servingPointKey(item) {
+            return item?.point_key
+                || item?.destination
+                || item?.counter
+                || item?.queue_name
+                || item?.ticket_number
+                || 'unknown';
+        },
+
+        trackServingChanges(nowServing, serverAnnouncements = []) {
+            const nextSignatures = {};
+            const changed = [];
+
+            for (const item of nowServing) {
+                if (! item?.ticket_number) {
+                    continue;
+                }
+                const key = this.servingPointKey(item);
+                const signature = `${item.ticket_number}|${item.called_at || ''}`;
+                nextSignatures[key] = signature;
+
+                if (this.servingPrimed && this.servingSignatures[key] !== signature) {
+                    changed.push(item);
+                }
+            }
+
+            this.servingSignatures = nextSignatures;
+            if (! this.servingPrimed) {
+                this.servingPrimed = true;
+                return;
+            }
+
+            for (const item of changed) {
+                const ticket = String(item.ticket_number);
+                const coveredByServer = (serverAnnouncements || []).some(
+                    (announcement) => announcement?.message && String(announcement.message).includes(ticket),
+                );
+                if (coveredByServer) {
+                    continue;
+                }
+
+                const message = item.announcement_text
+                    || `Ticket ${item.ticket_number}, please proceed to ${item.destination || item.counter || 'the service point'}.`;
+                const localId = `local:${this.servingPointKey(item)}:${item.ticket_number}:${item.called_at || Date.now()}`;
+                if (this.announcedIds[localId]) {
+                    continue;
+                }
+                this.pendingLocalAnnouncements.push({
+                    id: localId,
+                    message,
+                    locale: 'en',
+                    voice: 'female',
+                    volume: 80,
+                    repeat_count: 1,
+                    local: true,
+                });
+            }
+        },
         primeSpeech() {
             if (! window.speechSynthesis) {
                 return;
@@ -277,17 +342,22 @@ export function registerKioskFlow(Alpine) {
         },
 
         maybeAnnounce(announcements) {
-            if (! window.speechSynthesis || ! this.speechReady || this.isAnnouncing || ! announcements.length) {
+            if (! window.speechSynthesis || ! this.speechReady || this.isAnnouncing) {
                 return;
             }
 
-            const next = announcements.find((item) => item?.id && item?.message && ! this.announcedIds[item.id]);
+            const queue = [
+                ...(Array.isArray(announcements) ? announcements : []),
+                ...this.pendingLocalAnnouncements,
+            ];
+            const next = queue.find((item) => item?.id && item?.message && ! this.announcedIds[item.id]);
             if (! next) {
                 return;
             }
 
             this.isAnnouncing = true;
             this.announcedIds[next.id] = true;
+            this.pendingLocalAnnouncements = this.pendingLocalAnnouncements.filter((item) => item.id !== next.id);
             this.speakAnnouncement(next);
         },
 
@@ -307,8 +377,13 @@ export function registerKioskFlow(Alpine) {
 
             const finish = () => {
                 release();
-                this.ackPlayed(item.id);
-                this.maybeAnnounce(this.payload?.announcements ?? []);
+                if (! item.local) {
+                    this.ackPlayed(item.id);
+                }
+                this.maybeAnnounce([
+                    ...(this.payload?.announcements ?? []),
+                    ...this.pendingLocalAnnouncements,
+                ]);
             };
 
             const fail = (reason) => {
@@ -400,6 +475,8 @@ export function registerKioskFlow(Alpine) {
                 // ignore storage failures
             }
 
+            // Seed signatures from SSR payload without announcing historical tickets.
+            this.trackServingChanges(this.payload?.now_serving ?? []);
             this.poll();
             setInterval(() => this.poll(), this.pollMs);
         },