Fix feed transition keys

ui/src/stores/useRealtime.js

@@ -36,7 +36,12 @@ export const useRealtimeStore = defineStore('realtime', {
 
           // store event for feed with View Transition if available
           const addEvent = () => {
-            this.events.unshift({ ...payload, receivedAt: new Date().toISOString() });
+            const event = {
+              id: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2),
+              ...payload,
+              receivedAt: new Date().toISOString(),
+            };
+            this.events.unshift(event);
           };
           if (document.startViewTransition) {
             document.startViewTransition(addEvent);

ui/src/views/RealtimeFeedView.vue

@@ -23,8 +23,8 @@ onMounted(() => {
       style="max-height: calc(100vh - 160px); min-width: 60vw;"
     >
       <RealtimeEventCard
-        v-for="(ev, idx) in realtime.events"
-        :key="ev.receivedAt + idx"
+        v-for="ev in realtime.events"
+        :key="ev.id"
         :event="ev"
         style="max-width: 100%; border-bottom: white 1px solid; padding: 20px 0 40px 20px ;"
       />