anear-js-api 0.5.2 → 0.5.3

package/EACH_PARTICIPANT_LIFECYCLE.md

@@ -43,6 +43,10 @@ confirmMove: {
       return [{
         participantId: movingParticipantId,
         view: 'participant/MoveConfirmation', // A view confirming their move was received
+        props: {
+          message: 'Your move has been recorded. Waiting for opponent...',
+          move: event.moveData
+        },
         timeout: 2000 // A short timeout for the confirmation display
       }];
     }
@@ -137,94 +141,4 @@ services: {
 The `DisplayEventProcessor` loops through each `displayEvent` and, based on the target, decides what to do.
 
 *   **File:** `/Users/machvee/dev/anear-js-api/lib/utils/DisplayEventProcessor.js`
-*   **Description:** For an `eachParticipant` target, it doesn't publish to a public channel. Instead, it performs a critical handoff: it finds the specific participant's own state machine (`AnearParticipantMachine`) and sends a *private* `RENDER_DISPLAY` event directly to that machine. This is the key to sending a message to only one person.
-*   **Code Reference (lines 142-156 and 229-256):**
-
-```javascript
-// ... inside DisplayEventProcessor.js _processSingle
-case 'eachParticipant':
-  // ...
-  // It determines we need to send to a specific participant
-  publishPromise = this._processSelectiveParticipantDisplay(
-    template,
-    templateRenderContext,
-    null,
-    participantId, // e.g., 'participant-123'
-    displayTimeout // e.g., 10000
-  );
-  // ...
-
-// ... inside _sendPrivateDisplay
-_sendPrivateDisplay(participantMachine, participantId, template, templateRenderContext, timeoutFn) {
-  // ... it compiles the pug template into HTML ...
-  const privateHtml = template(privateRenderContext);
-
-  const renderMessage = { content: privateHtml };
-  if (timeout !== null) {
-    renderMessage.timeout = timeout; // Attaches the 10000ms timeout
-  }
-
-  // CRITICAL: It sends an event to the specific participant's machine, NOT to Ably.
-  participantMachine.send('RENDER_DISPLAY', renderMessage);
-}
-```
----
-
-### Part 4: The Target & Delivery (`AnearParticipantMachine.js`)
-
-**Context:** Each participant in an event has their own instance of the `AnearParticipantMachine` (APM). This machine manages their connection, timeouts, and, most importantly, their private Ably channel.
-
-#### Lifecycle Step 5: Receiving the Private Display Command
-
-The target participant's APM receives the `RENDER_DISPLAY` event from the `DisplayEventProcessor`.
-
-*   **File:** `/Users/machvee/dev/anear-js-api/lib/state_machines/AnearParticipantMachine.js`
-*   **Description:** The APM transitions to its own `renderDisplay` state, where it invokes its `publishPrivateDisplay` service. The payload it received (`renderMessage`) contains the final HTML and the 10-second timeout.
-*   **Code Reference (lines 96-98 and 147-160):**
-
-```javascript
-// ... inside AnearParticipantMachine.js
-idle: {
-  on: {
-    RENDER_DISPLAY: {
-      target: '#renderDisplay'
-    },
-// ...
-renderDisplay: {
-  id: 'renderDisplay',
-  invoke: {
-    src: 'publishPrivateDisplay', // This is the final step
-    onDone: [
-      // After publishing, it starts waiting for the user's ACTION
-      { cond: 'hasActionTimeout', actions: 'updateActionTimeout', target: 'waitParticipantResponse' },
-      { target: 'idle', internal: true }
-    ],
-// ...
-```
-
-#### Lifecycle Step 6: Sending the Ably Message
-
-This is the final hop. The `publishPrivateDisplay` service does one thing: it publishes the HTML to the participant's private channel.
-
-*   **File:** `/Users/machvee/dev/anear-js-api/lib/state_machines/AnearParticipantMachine.js`
-*   **Description:** It uses the `RealtimeMessaging` utility to send the message over Ably. The participant's browser, which is subscribed to this unique channel, receives the message and updates the DOM.
-*   **Code Reference (lines 348-358):**
-
-```javascript
-// ... inside AnearParticipantMachine.js
-services: {
-  publishPrivateDisplay: async (context, event) => {
-    // event.content is the final HTML from the DisplayEventProcessor
-    const displayMessage = { content: event.content };
-
-    await RealtimeMessaging.publish(
-      context.privateChannel, // The participant's unique channel
-      'PRIVATE_DISPLAY',
-      displayMessage
-    );
-
-    // It returns the timeout so the onDone transition knows to start the timer
-    return { timeout: event.timeout };
-  },
-// ...
-```
+*   **Description:** For an `eachParticipant`

package/RENDER_USAGE_EXAMPLES.md

@@ -26,7 +26,11 @@ const Config = {
           meta: {
             eachParticipant: {
               view: 'PlayableGameBoard',
-              timeout: calcParticipantTimeout
+              timeout: calcParticipantTimeout,
+              props: {
+                title: "Your Move!",
+                highlightLastMove: true
+              }
             },
             spectators: 'ViewableGameBoard'
           }
@@ -135,7 +139,7 @@ const actions = {
   - `null`: No timeout
   - `number`: Fixed timeout in milliseconds
   - `Function`: Dynamic timeout function `(appContext, participantId) => msecs`
-- **`props`** (Object): Additional properties merged into meta (optional)
+- **`props`** (Object): Additional properties made available at the root of the pug template's render context (optional)
 
 ## When to Use Each Approach
 

package/lib/api/AnearApi.js

@@ -79,6 +79,28 @@ class AnearApi extends ApiService {
     logger.debug('getAppFontAssetsUploadUrls response:', attrs)
     return attrs
   }
+
+  async saveAppEventContext(eventId, appmContext) {
+    logger.debug(`API: POST developer events/${eventId}/app_event_context`)
+    const path = `events/${eventId}/app_event_context`
+    return this.postRaw(path, { appm_context: appmContext })
+  }
+
+  async getLatestAppEventContext(eventId) {
+    logger.debug(`API: GET developer events/${eventId}/app_event_context`)
+    const path = `events/${eventId}/app_event_context`
+    const json = await this.get(path)
+    const attrs = json.data && json.data.attributes ? json.data.attributes : {}
+    const eventIdAttr = attrs['event-id']
+    const raw = attrs['appm-context']
+    let appmContext = null
+    try {
+      appmContext = typeof raw === 'string' ? JSON.parse(raw) : raw
+    } catch (e) {
+      // leave appmContext as null if parsing fails
+    }
+    return { eventId: eventIdAttr, appmContext }
+  }
 }
 
 // Instantiate and export the API immediately

package/lib/api/ApiService.js

@@ -56,6 +56,18 @@ class ApiService {
     return this.issueRequest(request)
   }
 
+  postRaw(path, body={}) {
+    const urlString = `${this.api_base_url}/${path}`
+    const request = new fetch.Request(
+      urlString, {
+        method: 'POST',
+        headers: this.default_headers,
+        body: JSON.stringify(body)
+      }
+    )
+    return this.issueRequest(request)
+  }
+
   put(resource, id, attributes, relationships={}) {
     const payload = this.formatPayload(resource, attributes, relationships)
     const urlString = `${this.api_base_url}/${resource}/${id}`

package/lib/models/AnearEvent.js

@@ -1,5 +1,6 @@
 "use strict"
 const logger = require('../utils/Logger')
+const anearApi = require('../api/AnearApi')
 
 const JsonApiResource = require('./JsonApiResource')
 
@@ -46,6 +47,20 @@ class AnearEvent extends JsonApiResource {
     this.send("CLOSE")
   }
 
+  pauseEvent(context, resumeEvent = { type: 'RESUME' }) {
+    // Persist via AEM and acknowledge with PAUSED
+    this.send('PAUSE', { appmContext: { context, resumeEvent } })
+  }
+
+  saveEvent(context, resumeEvent = { type: 'RESUME' }) {
+    // Delegate save to the AEM; AEM will persist via ANAPI and acknowledge with SAVED
+    this.send('SAVE', { appmContext: { context, resumeEvent } })
+  }
+
+  bootParticipant(participantId, reason) {
+    this.send("BOOT_PARTICIPANT", { participantId, reason })
+  }
+
   render(viewPath, displayType, appContext, event, timeout = null, props = {}) {
     // Explicit render method for guaranteed rendering control
     // This complements the meta: {} approach for when you need explicit control
@@ -80,14 +95,6 @@ class AnearEvent extends JsonApiResource {
     })
   }
 
-  pauseEvent() {
-    this.send("PAUSE")
-  }
-
-  resumeEvent() {
-    this.send("RESUME")
-  }
-
   getClonedFromEvent() {
     // if the current event was a clone of previous event, fetch if from
     // Peristence and return

package/lib/state_machines/AnearCoreServiceMachine.js

@@ -134,7 +134,7 @@ const AnearCoreServiceMachineConfig = appId => ({
       }
     },
     waitAnearEventLifecycleCommand: {
-      // The Anear API backend will send CREATE_EVENT messages with the event JSON data
+      // The Anear API backend will send CREATE_EVENT or LOAD_EVENT messages with the event JSON data
       // to this createEventMessages Channel when it needs to create a new instance of an
       // Event
       entry: (context) => logger.debug(`Waiting on ${context.appData.data.attributes['short-name']} lifecycle command`),
@@ -142,6 +142,9 @@ const AnearCoreServiceMachineConfig = appId => ({
         CREATE_EVENT: {
           actions: ['startNewEventMachine']
         },
+        LOAD_EVENT: {
+          actions: ['startNewEventMachine']
+        },
         EVENT_MACHINE_EXIT: {
           actions: [
             'cleanupEventMachine'
@@ -234,6 +237,11 @@ const AnearCoreServiceMachineFunctions = {
         context.coreServiceMachine,
         'CREATE_EVENT'
       )
+      RealtimeMessaging.subscribe(
+        context.newEventCreationChannel,
+        context.coreServiceMachine,
+        'LOAD_EVENT'
+      )
     },
     startNewEventMachine: assign(
       {
@@ -242,11 +250,12 @@ const AnearCoreServiceMachineFunctions = {
           const anearEvent = new AnearEvent(eventJSON)
 
           if (context.anearEventMachines[anearEvent.id]) {
-            logger.info(`[ACSM] Event machine for ${anearEvent.id} already exists. Ignoring CREATE_EVENT.`)
+            logger.info(`[ACSM] Event machine for ${anearEvent.id} already exists. Ignoring ${event.type}.`)
             return context.anearEventMachines
           }
 
-          const service = AnearEventMachine(anearEvent, context)
+          const isLoadEvent = event.type === 'LOAD_EVENT'
+          const service = AnearEventMachine(anearEvent, { ...context, rehydrate: isLoadEvent })
 
           return {
             ...context.anearEventMachines,

package/lib/state_machines/AnearEventMachine.js

@@ -34,6 +34,11 @@ const getAllParticipantIds = (context) => {
   return Object.keys(context.participants);
 };
 
+const getPresenceEventName = (participant, presenceAction) => {
+  const role = participant && participant.isHost ? 'HOST' : 'PARTICIPANT';
+  return `${role}_${presenceAction}`;
+};
+
 const RealtimeMessaging = require('../utils/RealtimeMessaging')
 const AppMachineTransition = require('../utils/AppMachineTransition')
 const DisplayEventProcessor = require('../utils/DisplayEventProcessor')
@@ -51,7 +56,8 @@ const AnearEventMachineContext = (
   pugTemplates,
   pugHelpers,
   appEventMachineFactory,
-  appParticipantMachineFactory
+  appParticipantMachineFactory,
+  rehydrate = false
 ) => ({
   anearEvent,
   coreServiceMachine,
@@ -59,6 +65,7 @@ const AnearEventMachineContext = (
   pugHelpers,
   appEventMachineFactory,
   appParticipantMachineFactory,
+  rehydrate,
   appEventMachine: null,
   eventChannel: null,               // event control messages
   actionsChannel: null,             // participant presence/live actions
@@ -72,11 +79,14 @@ const AnearEventMachineContext = (
 const DeferredStates = [
   'PARTICIPANT_ENTER',
   'PARTICIPANT_LEAVE',
+  'PARTICIPANT_UPDATE',
   'SPECTATOR_ENTER',
   'PARTICIPANT_TIMEOUT',
   'ACTION',
   'CANCEL',
-  'CLOSE'
+  'CLOSE',
+  'SAVE',
+  'PAUSE'
 ]
 
 const DeferredStatesPlus = (...additionalStates) => DeferredStates.concat(additionalStates)
@@ -94,6 +104,10 @@ const ActiveEventGlobalEvents = {
   CANCEL: {
     // appM does an abrupt shutdown of the event
     target: '#canceled'
+  },
+  APPM_FINAL: {
+    // AppM reached a root-level final → cleanup only (no ANAPI transition)
+    target: '#activeEvent.shutdownOnly'
   }
 }
 
@@ -186,10 +200,6 @@ const ActiveEventStatesConfig = {
           target: '#createdRendering'
         },
         PARTICIPANT_LEAVE: [
-          {
-            cond: 'isHostLeaving',
-            actions: ['sendHostExitToAppMachine', 'sendExitToParticipantMachine']
-          },
           {
             cond: 'isPermanentLeave',
             actions: ['sendExitToAppMachine', 'sendExitToParticipantMachine']
@@ -198,6 +208,25 @@ const ActiveEventStatesConfig = {
             actions: ['processDisconnectEvents']
           }
         ],
+        PARTICIPANT_UPDATE: [
+          // In the future, the AnearBrowser may periodically send presence updates to the AEM
+          // which will include latitude/longitude direction, etc. for Apps that require this
+          // level of approved user location tracking.  These types of explicit presence.updates
+          // will include a type field in the event payload to indicate the type of update.
+          // Otherwise, the Realtime messaging system in the mobile client browser may be
+          // sending this presence updated implicityly without a type because it has detected
+          // that the user left the event and came back.  If we receive this and the participant exists,
+          // this is a PARTICIPANT_RECONNECT scenario.   The User likely navigated away from the
+          // event and came back.  We need to update the AppM with a PARTICIPANT_RECONNECT event
+          // so they can refresh the view for the returning participant.
+          {
+            cond: 'isReconnectUpdate',
+            actions: 'processReconnectEvents'
+          },
+          {
+            actions: ['updateParticipantGeoLocation', 'processUpdateEvents']
+          }
+        ],
         PARTICIPANT_ENTER: [
           {
             cond: 'participantExists',
@@ -224,6 +253,42 @@ const ActiveEventStatesConfig = {
             },
             START: {
               target: '#activeEvent.live'
+            },
+            PAUSE: {
+              target: '#pausingEvent'
+            },
+            SAVE: {
+              target: 'savingAppEventContext'
+            }
+          }
+        },
+        pausingEvent: {
+          id: 'pausingEvent',
+          deferred: DeferredStates,
+          invoke: {
+            src: 'saveAppEventContext',
+            onDone: {
+              actions: ['sendPausedAckToAppMachine'],
+              target: '#waitingAnnounce',
+              internal: true
+            },
+            onError: {
+              target: '#activeEvent.failure'
+            }
+          }
+        },
+        savingAppEventContext: {
+          id: 'savingAppEventContext',
+          invoke: {
+            src: 'saveAppEventContext',
+            onDone: {
+              actions: ['sendSavedAckToAppMachine'],
+              target: '#waitingAnnounce',
+              internal: true
+            },
+            onError: {
+              // If save fails, log and remain in waitingAnnounce; AppM may retry/handle error UI
+              target: '#waitingAnnounce'
             }
           }
         },
@@ -265,10 +330,6 @@ const ActiveEventStatesConfig = {
           target: '#announceRendering'
         },
         PARTICIPANT_LEAVE: [
-          {
-            cond: 'isHostLeaving',
-            actions: ['sendHostExitToAppMachine', 'sendExitToParticipantMachine']
-          },
           {
             cond: 'isPermanentLeave',
             actions: ['sendExitToAppMachine', 'sendExitToParticipantMachine']
@@ -289,6 +350,9 @@ const ActiveEventStatesConfig = {
             target: '#newParticipantJoining'
           }
         ],
+        BOOT_PARTICIPANT: {
+          actions: 'sendBootEventToParticipantMachine'
+        },
         SPECTATOR_ENTER: {
           actions: 'sendSpectatorEnterToAppEventMachine'
         }
@@ -385,10 +449,6 @@ const ActiveEventStatesConfig = {
           target: '#liveRendering'
         },
         PARTICIPANT_LEAVE: [
-          {
-            cond: 'isHostLeaving',
-            actions: ['sendHostExitToAppMachine', 'sendExitToParticipantMachine']
-          },
           {
             cond: 'isPermanentLeave',
             actions: ['sendExitToAppMachine', 'sendExitToParticipantMachine']
@@ -407,8 +467,8 @@ const ActiveEventStatesConfig = {
             target: '.participantEntering'
           }
         ],
-        PAUSE: {
-          target: 'paused'
+        BOOT_PARTICIPANT: {
+          actions: 'sendBootEventToParticipantMachine'
         }
       },
       states: {
@@ -491,8 +551,8 @@ const ActiveEventStatesConfig = {
             },
             PARTICIPANT_LEAVE: [
               {
-                cond: 'isHostLeaving',
-                actions: ['removeLeavingParticipantFromTimeout', 'sendHostExitToAppMachine', 'sendExitToParticipantMachine']
+                cond: 'isBooting',
+                actions: ['removeLeavingParticipantFromTimeout', 'sendExitToParticipantMachine']
               },
               {
                 cond: 'isPermanentLeave',
@@ -539,29 +599,6 @@ const ActiveEventStatesConfig = {
         }
       }
     },
-    paused: {
-      initial: 'transitioning',
-      states: {
-        transitioning: {
-          deferred: DeferredStatesPlus('RESUME', 'CLOSE'),
-          invoke: {
-            src: 'transitionToPaused',
-            onDone: {
-              target: 'waitingForResume'
-            },
-            onError: {
-              target: '#activeEvent.failure'
-            }
-          }
-        },
-        waitingForResume: {
-          on: {
-            RESUME: '#activeEvent.live',
-            CLOSE: '#activeEvent.closeEvent'
-          }
-        }
-      }
-    },
     closeEvent: {
       id: 'closeEvent',
       initial: 'notifyingParticipants',
@@ -631,7 +668,7 @@ const ActiveEventStatesConfig = {
           }
         },
         finalizing: {
-          deferred: DeferredStates,
+          // canceled path does ANAPI transition to canceled, then detaches
           invoke: {
             src: 'eventTransitionCanceled',
             onDone: 'detaching',
@@ -652,6 +689,42 @@ const ActiveEventStatesConfig = {
         }
       }
     },
+    shutdownOnly: {
+      id: 'shutdownOnly',
+      initial: 'notifyingParticipants',
+      states: {
+        notifyingParticipants: {
+          entry: 'sendParticipantExitEvents',
+          always: 'waitForParticipantsToExit'
+        },
+        waitForParticipantsToExit: {
+          entry: context => logger.debug(`[AEM] Entering waitForParticipantsToExit with ${getAllParticipantIds(context).length} participants`),
+          always: [
+            {
+              cond: context => getAllParticipantIds(context).length === 0,
+              target: 'detaching'
+            }
+          ],
+          on: {
+            PARTICIPANT_LEAVE: {
+              actions: () => logger.debug('[AEM] Ignoring PARTICIPANT_LEAVE during orchestrated shutdown.')
+            }
+          }
+        },
+        detaching: {
+          deferred: DeferredStates,
+          invoke: {
+            src: 'detachChannels',
+            onDone: {
+              target: '#activeEvent.doneExit'
+            },
+            onError: {
+              target: '#activeEvent.failure'
+            }
+          }
+        }
+      }
+    },
     review: {
       on: {
         NEXT: 'reward'
@@ -708,7 +781,10 @@ const CreateEventChannelsAndAppMachineConfig = {
   states: {
     setupEventChannel: {
       // get(eventChannelName) and setup state-change callbacks
-      entry: [(c,e) => logger.debug(`[AEM] === NEW EVENT ${c.anearEvent.id} ===`), 'createEventChannel'],
+      entry: [(c,e) => {
+        const eventType = c.rehydrate ? 'LOAD_EVENT' : 'CREATE_EVENT'
+        logger.debug(`[AEM] === ${eventType} ${c.anearEvent.id} ===`)
+      }, 'createEventChannel'],
       invoke: {
         src: 'attachToEventChannel',
         onDone: {
@@ -720,7 +796,18 @@ const CreateEventChannelsAndAppMachineConfig = {
         }
       },
       on: {
-        ATTACHED: {
+        ATTACHED: 'enterEventPresence'
+      }
+    },
+    enterEventPresence: {
+      invoke: {
+        src: 'enterEventPresence',
+        onDone: {
+          actions: ['subscribeToEventMessages'],
+          target: 'setupParticipantsDisplayChannel',
+          internal: true
+        },
+        onError: {
           actions: ['subscribeToEventMessages'],
           target: 'setupParticipantsDisplayChannel'
         }
@@ -782,9 +869,16 @@ const CreateEventChannelsAndAppMachineConfig = {
       }
     },
     createAppEventMachine: {
-      entry: ['createAppEventMachine'],
-      always: {
-        target: '#activeEvent'
+      invoke: {
+        src: 'createAppEventMachine',
+        onDone: {
+          actions: ['setAppEventMachine'],
+          target: '#activeEvent',
+          internal: true
+        },
+        onError: {
+          target: '#activeEvent.failure'
+        }
       }
     }
   }
@@ -806,12 +900,20 @@ const AnearEventMachineStatesConfig = eventId => ({
 
 const AnearEventMachineFunctions = ({
   actions: {
-    createAppEventMachine: assign({
-      appEventMachine: context => {
-        const machine = context.appEventMachineFactory(context.anearEvent)
-        const service = interpret(machine)
-        service.subscribe(AppMachineTransition(context.anearEvent))
-        return service.start()
+    sendPausedAckToAppMachine: (context, _event) => {
+      if (context.appEventMachine) {
+        context.appEventMachine.send('PAUSED')
+      }
+    },
+    sendSavedAckToAppMachine: (context, _event) => {
+      if (context.appEventMachine) {
+        context.appEventMachine.send('SAVED')
+      }
+    },
+    setAppEventMachine: assign({
+      appEventMachine: (context, event) => {
+        const service = event.data.service
+        return service
       }
     }),
     notifyAppMachineRendered: (context, event) => {
@@ -924,8 +1026,7 @@ const AnearEventMachineFunctions = ({
         return;
       }
 
-      const isHost = anearParticipant.isHost;
-      const eventName = isHost ? 'HOST_ENTER' : 'PARTICIPANT_ENTER';
+      const eventName = getPresenceEventName(anearParticipant, 'ENTER');
       const eventPayload = { participant: participantInfo };
 
       logger.debug(`[AEM] Sending ${eventName} for ${anearParticipant.id}`);
@@ -934,11 +1035,10 @@ const AnearEventMachineFunctions = ({
     processDisconnectEvents: (context, event) => {
       const participantId = event.data.id;
       const participant = context.participants[participantId];
-      const isHost = participant && participant.isHost;
-      const eventName = isHost ? 'HOST_DISCONNECT' : 'PARTICIPANT_DISCONNECT';
+      const eventName = getPresenceEventName(participant, 'DISCONNECT');
       const participantMachine = context.participantMachines[participantId];
 
-      logger.debug(`[AEM] processing disconnect for ${participantId}. Is host? ${isHost}`);
+      logger.debug(`[AEM] processing ${eventName} for ${participantId}`);
       if (participantMachine) {
         participantMachine.send('PARTICIPANT_DISCONNECT');
       }
@@ -947,31 +1047,79 @@ const AnearEventMachineFunctions = ({
     processReconnectEvents: (context, event) => {
       const participantId = event.data.id;
       const participant = context.participants[participantId];
-      const isHost = participant && participant.isHost;
-      const eventName = isHost ? 'HOST_RECONNECT' : 'PARTICIPANT_RECONNECT';
+      const eventName = getPresenceEventName(participant, 'RECONNECT');
       const participantMachine = context.participantMachines[participantId];
 
-      logger.debug(`[AEM] processing reconnect for ${participantId}. Is host? ${isHost}`);
+      logger.debug(`[AEM] processing ${eventName} for ${participantId}`);
       if (participantMachine) {
         participantMachine.send('PARTICIPANT_RECONNECT');
       }
       context.appEventMachine.send(eventName, { participantId });
     },
+    updateParticipantGeoLocation: assign({
+      participants: (context, event) => {
+        const { id, geoLocation } = event.data;
+        const participantInfoToUpdate = context.participants[id];
+
+        if (!participantInfoToUpdate) return context.participants;
+
+        // Create a new, updated info object
+        const updatedParticipantInfo = {
+          ...participantInfoToUpdate,
+          geoLocation
+        };
+
+        // Return a new participants object with the updated participant info
+        return {
+          ...context.participants,
+          [id]: updatedParticipantInfo
+        };
+      }
+    }),
+    processUpdateEvents: (context, event) => {
+      const { id } = event.data;
+      // NOTE: get the full AnearParticipant object from the AEM instance,
+      // NOT the plain info object from the context.
+      const participant = context.participants[id];
+
+      if (!participant) return;
+
+      const eventName = getPresenceEventName(participant, 'UPDATE');
+      const participantMachine = context.participantMachines[id];
+
+      // AppM gets the role-specific event
+      const appMPayload = { type: eventName, participant };
+
+      logger.debug(`[AEM] processing ${eventName} for ${id}`);
+      if (participantMachine) {
+        // APM always gets the generic event
+        const apmPayload = { type: 'PARTICIPANT_UPDATE', participant };
+        participantMachine.send(apmPayload);
+      }
+      context.appEventMachine.send(appMPayload);
+    },
     sendExitToAppMachine: (context, event) => {
-      // coming from an action channel message, event.data.id
       const participantId = event.data.id;
-      const participantInfo = context.participants[participantId];
-      if (participantInfo) {
-        logger.debug(`[AEM] sending PARTICIPANT_EXIT to AppM for participant ${participantId}`);
-        context.appEventMachine.send('PARTICIPANT_EXIT', { participantId });
+      const participant = context.participants[participantId];
+      if (participant) {
+        const eventName = getPresenceEventName(participant, 'EXIT');
+        logger.debug(`[AEM] sending ${eventName} to AppM for participant ${participantId}`);
+        context.appEventMachine.send(eventName, { participantId });
       } else {
         logger.warn(`[AEM] Participant info not found for id ${participantId} during sendExitToAppMachine`);
       }
     },
-    sendHostExitToAppMachine: (context, event) => {
-      const participantId = event.data.id;
-      logger.debug(`[AEM] sending HOST_EXIT to AppM for host ${participantId}`);
-      context.appEventMachine.send('HOST_EXIT', { participantId });
+    sendBootEventToParticipantMachine: (context, event) => {
+      const { participantId, reason } = event.data;
+      const participantMachine = context.participantMachines[participantId];
+      if (participantMachine) {
+        participantMachine.send({
+          type: 'BOOT_PARTICIPANT',
+          data: { reason }
+        })
+      } else {
+        logger.warn(`[AEM] Participant machine not found for id ${participantId} during sendBootEventToParticipantMachine`);
+      }
     },
     sendExitToParticipantMachine: (context, event) => {
       // coming from an action channel message, event.data.id
@@ -986,18 +1134,27 @@ const AnearEventMachineFunctions = ({
     sendParticipantExitEvents: context => {
       Object.values(context.participantMachines).forEach(pm => pm.send('PARTICIPANT_EXIT'))
     },
+    updateParticipantPresence: (context, event) => {
+      const participantId = event.data.id;
+      const participant = context.participants[participantId];
+      const participantMachine = context.participantMachines[participantId];
 
+      if (!participant) {
+        logger.warn(`[AEM] Participant info not found for id ${participantId} during updateParticipantPresence`);
+        return;
+      }
 
-    updateParticipantPresence: (context, event) => {
-      // lookup the participantMachine and update its context
-      const participantMachine = context.participantMachines[event.data.id]
+      // APM always gets the generic event
       if (participantMachine) {
         // opportunity to send presence data update like geoLocation, and
         // to inform app that a participant still has interest in the possibly long
         // running, light-participation event
-        participantMachine.send('PARTICIPANT_UPDATE', event.data)
+        participantMachine.send('PARTICIPANT_UPDATE', event.data);
       }
-      context.appEventMachine.send('PARTICIPANT_UPDATE', event.data)
+
+      // AppM gets the role-specific event
+      const eventName = getPresenceEventName(participant, 'UPDATE');
+      context.appEventMachine.send(eventName, event.data);
     },
     processParticipantAction: (context, event) => {
       // event.data.participantId,
@@ -1053,16 +1210,22 @@ const AnearEventMachineFunctions = ({
       { participantId: event.participantId }
     ),
     setupParticipantsTimeout: assign((context, event) => {
-      const timeoutMsecs = event.data.participantsTimeout.msecs
-      const allParticipantIds = getPlayingParticipantIds(context)
-      logger.debug(`[AEM] Starting participants action timeout for ${timeoutMsecs}ms. Responders: ${allParticipantIds.join(', ')}`)
+      // Only set up a new timeout if one is provided in the event data.
+      // This prevents overwriting an existing timeout during a simple re-render.
+      if (event.data && event.data.participantsTimeout) {
+        const timeoutMsecs = event.data.participantsTimeout.msecs
+        const allParticipantIds = getPlayingParticipantIds(context)
+        logger.debug(`[AEM] Starting participants action timeout for ${timeoutMsecs}ms. Responders: ${allParticipantIds.join(', ')}`)
 
-      return {
-        participantsActionTimeout: {
-          msecs: timeoutMsecs,
-          nonResponders: new Set(allParticipantIds)
+        return {
+          participantsActionTimeout: {
+            msecs: timeoutMsecs,
+            nonResponders: new Set(allParticipantIds)
+          }
         }
       }
+      // If no timeout data, return empty object to not change context
+      return {};
     }),
     processParticipantResponse: assign((context, event) => {
       const participantId = event.data.participantId
@@ -1078,17 +1241,24 @@ const AnearEventMachineFunctions = ({
       }
     }),
     removeLeavingParticipantFromTimeout: assign((context, event) => {
-      const participantId = event.data.id
-      const { nonResponders, ...rest } = context.participantsActionTimeout
-      const newNonResponders = new Set(nonResponders)
-      newNonResponders.delete(participantId)
+      const participantId = event.data.id;
+      const participant = context.participants[participantId];
+
+      // If there's no active timeout, or if the leaving participant is the host, do nothing.
+      if (!context.participantsActionTimeout || (participant && participant.isHost)) {
+        return {};
+      }
+
+      const { nonResponders, ...rest } = context.participantsActionTimeout;
+      const newNonResponders = new Set(nonResponders);
+      newNonResponders.delete(participantId);
 
       return {
         participantsActionTimeout: {
           ...rest,
           nonResponders: newNonResponders
         }
-      }
+      };
     }),
     sendActionsTimeoutToAppM: (context, _event) => {
       const { nonResponders, msecs } = context.participantsActionTimeout
@@ -1139,6 +1309,63 @@ const AnearEventMachineFunctions = ({
     logInvalidParticipantEnter: (c, e) => logger.info("[AEM] Error: Unexepected PARTICIPANT_ENTER with id: ", e.data.id),
   },
   services: {
+    saveAppEventContext: async (context, event) => {
+      // Events like PAUSE/SAVE are sent as send('PAUSE', { appmContext: {...} })
+      // event.appmContext -> { context, resumeEvent }
+      const appmContext = event?.appmContext || {}
+      const payload = {
+        eventId: context.anearEvent.id,
+        savedAt: new Date().toISOString(),
+        ...appmContext
+      }
+      await AnearApi.saveAppEventContext(context.anearEvent.id, payload)
+      return 'done'
+    },
+    enterEventPresence: async (context, _event) => {
+      const data = { actor: 'AEM', eventId: context.anearEvent.id, start: Date.now() }
+      await RealtimeMessaging.setPresence(context.eventChannel, data)
+      return { service: started }
+    },
+    createAppEventMachine: async (context, _event) => {
+      // Build the AppM, optionally rehydrating from saved app_event_context
+      const baseMachine = context.appEventMachineFactory(context.anearEvent)
+
+      let machineToStart = baseMachine
+      let resumeEvent = null
+
+      if (context.rehydrate) {
+        try {
+          const { appmContext } = await AnearApi.getLatestAppEventContext(context.anearEvent.id)
+          if (appmContext && typeof appmContext === 'object') {
+            const savedContext = appmContext.context
+            resumeEvent = appmContext.resumeEvent
+            if (savedContext && typeof savedContext === 'object') {
+              machineToStart = baseMachine.withContext(savedContext)
+            }
+          }
+        } catch (e) {
+          // Log and proceed without rehydration
+          logger.warn('[AEM] Failed to fetch or parse app_event_context. Starting clean.', e)
+        }
+      }
+
+      const service = interpret(machineToStart)
+      service.subscribe(AppMachineTransition(context.anearEvent))
+      // Auto-cleanup when AppM final: notify AEM
+      try {
+        service.onDone(() => {
+          logger.debug('[AEM] AppM reached final state, sending APPM_FINAL for cleanup-only shutdown')
+          context.anearEvent.send('APPM_FINAL')
+        })
+      } catch (_e) {}
+      const started = service.start()
+
+      if (resumeEvent && resumeEvent.type) {
+        started.send(resumeEvent)
+      }
+
+      return { service: started }
+    },
     renderDisplay: async (context, event) => {
       const displayEventProcessor = new DisplayEventProcessor(context)
 
@@ -1201,9 +1428,6 @@ const AnearEventMachineFunctions = ({
     transitionToCanceled: (context, event) => {
       return AnearApi.transitionEvent(context.anearEvent.id, 'canceled')
     },
-    transitionToPaused: (context, event) => {
-      return AnearApi.transitionEvent(context.anearEvent.id, 'paused')
-    },
     eventTransitionClosed: async (context, event) => {
       // This service handles the transition of the event to 'closed' via AnearApi
       // and the publishing of the 'EVENT_TRANSITION' message to ABRs.
@@ -1224,6 +1448,10 @@ const AnearEventMachineFunctions = ({
     }
   },
   guards: {
+    isReconnectUpdate: (context, event) => {
+      // participant exists and event.data.type is undefined
+      return context.participants[event.data.id] && !event.data.type
+    },
     isPermanentLeave: (context, event) => {
       // The remote client has left the event.  This is a permanent exit
       // from the event
@@ -1237,18 +1465,18 @@ const AnearEventMachineFunctions = ({
           return false
       }
     },
-    isHostLeaving: (context, event) => {
-      const participantId = event.data.id;
-      const participant = context.participants[participantId];
-      return participant && participant.isHost;
+    isBooting: (_c, event) => {
+      return event.data.type === 'BOOTED'
     },
     participantExists: (context, event) => !!context.participants[event.data.id],
-    eventCreatorIsHost: (context, event) => context.anearEvent.hosted,
-    isOpenHouseEvent: (context, event) => context.anearEvent.openHouse || false,
+    eventCreatorIsHost: (context, _e) => context.anearEvent.hosted,
+    isOpenHouseEvent: (context, _e) => context.anearEvent.openHouse || false,
     isParticipantsTimeoutActive: (context, event) => {
-      return event.data && event.data.participantsTimeout && event.data.participantsTimeout.msecs > 0
+      const isStartingNewTimeout = event.data && event.data.participantsTimeout && event.data.participantsTimeout.msecs > 0;
+      const isTimeoutAlreadyRunning = context.participantsActionTimeout !== null;
+      return isStartingNewTimeout || isTimeoutAlreadyRunning;
     },
-    allParticipantsResponded: (context, event) => {
+    allParticipantsResponded: (context, _e) => {
       return context.participantsActionTimeout && context.participantsActionTimeout.nonResponders.size === 0
     }
   },
@@ -1258,7 +1486,7 @@ const AnearEventMachineFunctions = ({
     timeoutEventAnnounce: context => C.TIMEOUT_MSECS.ANNOUNCE,
     timeoutEventStart: context => C.TIMEOUT_MSECS.START,
     timeoutRendered: context => C.TIMEOUT_MSECS.RENDERED_EVENT_DELAY,
-    participantsActionTimeout: (context, event) => {
+    participantsActionTimeout: (context, _e) => {
       return context.participantsActionTimeout.msecs
     }
   }
@@ -1269,7 +1497,8 @@ const AnearEventMachine = (anearEvent, {
   pugTemplates,
   appEventMachineFactory,
   appParticipantMachineFactory,
-  imageAssetsUrl
+  imageAssetsUrl,
+  rehydrate = false
 }) => {
   const expandedConfig = {predictableActionArguments: true, ...AnearEventMachineStatesConfig(anearEvent.id)}
 
@@ -1282,7 +1511,8 @@ const AnearEventMachine = (anearEvent, {
     pugTemplates,
     pugHelpers,
     appEventMachineFactory,
-    appParticipantMachineFactory
+    appParticipantMachineFactory,
+    rehydrate
   )
 
   const service = interpret(eventMachine.withContext(anearEventMachineContext))

package/lib/state_machines/AnearParticipantMachine.js

@@ -109,6 +109,10 @@ const AnearParticipantMachineConfig = participantId => ({
                 PARTICIPANT_RECONNECT: {
                   actions: 'logReconnected',
                   internal: true
+                },
+                BOOT_PARTICIPANT: {
+                  actions: 'logBooted',
+                  target: '#cleanupAndExit'
                 }
               }
             },
@@ -151,11 +155,17 @@ const AnearParticipantMachineConfig = participantId => ({
                 src: 'publishPrivateDisplay',
                 onDone: [
                   { cond: 'hasActionTimeout', actions: 'updateActionTimeout', target: 'waitParticipantResponse' },
-                  { target: 'idle', internal: true }
+                  { target: 'idle' }
                 ],
                 onError: {
                   target: '#error'
                 }
+              },
+              on: {
+                PARTICIPANT_EXIT: {
+                  actions: 'logExit',
+                  target: '#cleanupAndExit'
+                }
               }
             },
             waitParticipantResponse: {
@@ -223,6 +233,35 @@ const AnearParticipantMachineConfig = participantId => ({
                 }
               }
             },
+            booting: {
+              initial: 'publishingShutdown',
+              states: {
+                publishingShutdown: {
+                  invoke: {
+                    id: 'publishBootMessage',
+                    src: 'publishBootMessageService',
+                    onDone: 'waitingForClientExit',
+                    onError: '#cleanupAndExit'
+                  }
+                },
+                waitingForClientExit: {
+                  after: {
+                    bootCleanupTimeout: {
+                      target: '#cleanupAndExit'
+                    }
+                  },
+                  on: {
+                    PARTICIPANT_EXIT: '#cleanupAndExit',
+                    ACTION: {
+                      internal: true
+                    },
+                    PARTICIPANT_DISCONNECT: {
+                      internal: true
+                    }
+                  }
+                }
+              }
+            },
             done: {
               id: 'done',
               entry: ['notifyEventMachineExit'],
@@ -356,6 +395,20 @@ const AnearParticipantMachineFunctions = {
 
       return { timeout: event.timeout }
     },
+    publishBootMessageService: async (context, event) => {
+      const { reason } = event.data;
+      const payload = {
+        content: {
+          reason: reason || 'You have been removed from the event.'
+        }
+      }
+
+      await RealtimeMessaging.publish(
+        context.privateChannel,
+        'FORCE_SHUTDOWN',
+        payload
+      )
+    },
     attachToPrivateChannel: (context, event) => RealtimeMessaging.attachTo(context.privateChannel),
     detachPrivateChannel: async (context, event) => {
       return context.privateChannel ? RealtimeMessaging.detachAll([context.privateChannel]) : Promise.resolve()
@@ -368,6 +421,7 @@ const AnearParticipantMachineFunctions = {
     wasMidTurnOnDisconnect: context => context.actionTimeoutMsecs !== null && context.actionTimeoutMsecs > 0
   },
   delays: {
+    bootCleanupTimeout: () => C.TIMEOUT_MSECS.BOOT_EXIT,
     actionTimeout: context => context.actionTimeoutMsecs,
     dynamicReconnectTimeout: context => {
       // If an action timeout is active, use its remaining time.

package/lib/utils/AppMachineTransition.js

@@ -37,7 +37,6 @@ const AppMachineTransition = (anearEvent) => {
       // Process all meta objects to handle unpredictable AppM structures
       metaObjects.forEach(meta => {
         let viewer
-        let viewPath
         let timeoutFn
         let displayEvent
 
@@ -49,18 +48,23 @@ const AppMachineTransition = (anearEvent) => {
 
         if (meta.allParticipants) {
           viewer = 'allParticipants'
-          viewPath = _getViewPath(meta.allParticipants)
+          const { viewPath, props } = _extractViewAndProps(meta.allParticipants)
           timeoutFn = RenderContextBuilder.buildTimeoutFn(viewer, meta.allParticipants.timeout)
 
           displayEvent = RenderContextBuilder.buildDisplayEvent(
             viewPath,
-            RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, viewer, timeoutFn)
+            RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, viewer, timeoutFn),
+            viewer,
+            null,
+            null,
+            props
           )
           displayEvents.push(displayEvent)
         }
 
         if (meta.eachParticipant) {
           // Check if participant is a function (new selective rendering format)
+          viewer = 'eachParticipant'
           if (typeof meta.eachParticipant === 'function') {
             // New selective participant rendering
             const participantRenderFunc = meta.eachParticipant
@@ -73,7 +77,7 @@ const AppMachineTransition = (anearEvent) => {
                 appContext,
                 appStateName,
                 event.type,
-                'eachParticipant',
+                viewer,
                 null
               )
 
@@ -81,13 +85,15 @@ const AppMachineTransition = (anearEvent) => {
                 if (participantDisplay && participantDisplay.participantId && participantDisplay.view) {
                   // For selective rendering, timeout is handled directly in the participant display object
                   const timeout = participantDisplay.timeout || null
+                  const props = participantDisplay.props || {}
 
                   displayEvent = RenderContextBuilder.buildDisplayEvent(
                     participantDisplay.view,
                     baseAppRenderContext, // Reuse the same base context
-                    'eachParticipant',
+                    viewer,
                     participantDisplay.participantId,
-                    timeout
+                    timeout,
+                    props
                   )
                   displayEvents.push(displayEvent)
                 }
@@ -95,15 +101,17 @@ const AppMachineTransition = (anearEvent) => {
             }
           } else {
             // Legacy participant rendering - normalize to selective format
-            const viewPath = _getViewPath(meta.eachParticipant)
+            const { viewPath, props } = _extractViewAndProps(meta.eachParticipant)
             const timeoutFn = RenderContextBuilder.buildTimeoutFn('participant', meta.eachParticipant.timeout)
 
             const renderContext = RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, 'eachParticipant', timeoutFn),
             displayEvent = RenderContextBuilder.buildDisplayEvent(
               viewPath,
               renderContext,
-              'eachParticipant',
-              'ALL_PARTICIPANTS' // Special marker for "all participants"
+              viewer,
+              'ALL_PARTICIPANTS', // Special marker for "all participants"
+              null,
+              props
             )
             displayEvents.push(displayEvent)
           }
@@ -111,24 +119,31 @@ const AppMachineTransition = (anearEvent) => {
 
         if (meta.host) {
           viewer = 'host'
-          viewPath = _getViewPath(meta.host)
+          const { viewPath, props } = _extractViewAndProps(meta.host)
           timeoutFn = RenderContextBuilder.buildTimeoutFn(viewer, meta.host.timeout)
 
           displayEvent = RenderContextBuilder.buildDisplayEvent(
             viewPath,
             RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, viewer, timeoutFn),
-            'host'
+            viewer,
+            null,
+            null,
+            props
           )
           displayEvents.push(displayEvent)
         }
 
         if (meta.spectators) {
           viewer = 'spectators'
-          viewPath = _getViewPath(meta.spectators)
+          const { viewPath, props } = _extractViewAndProps(meta.spectators)
 
           displayEvent = RenderContextBuilder.buildDisplayEvent(
             viewPath,
-            RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, viewer)
+            RenderContextBuilder.buildAppRenderContext(appContext, appStateName, event.type, viewer),
+            viewer,
+            null,
+            null,
+            props
           )
           displayEvents.push(displayEvent)
         }
@@ -140,28 +155,28 @@ const AppMachineTransition = (anearEvent) => {
       }
     }
 
-    // Send CLOSE AFTER processing meta (including exit displays)
-    if (isDone) {
-      logger.debug('[AppMachineTransition] AppM reached final state, sending CLOSE')
-      anearEvent.send('CLOSE')
-    }
+    // Note: When AppM reaches a final state, the service.onDone() callback
+    // in AnearEventMachine.js will fire and send APPM_FINAL to trigger cleanup.
+    // Apps should explicitly call anearEvent.closeEvent() or anearEvent.cancelEvent()
+    // as entry actions in final states if they need API state transitions.
   }
 }
 
-const _getViewPath = (config) => {
-  if (!config) return null
-  if (typeof config === 'string') return config
+const _extractViewAndProps = (config) => {
+  if (!config) return { viewPath: null, props: {} }
+
+  if (typeof config === 'string') {
+    return { viewPath: config, props: {} }
+  }
+
   if (typeof config === 'object') {
-    // Handle various possible view path formats
-    if (config.view) return config.view
-    if (config.template) return config.template
-    if (config.path) return config.path
-    // If no view path found, log warning but don't throw
-    logger.warn(`[AppMachineTransition] No view path found in config: ${JSON.stringify(config)}`)
-    return null
+    const viewPath = config.view
+    const props = config.props || {}
+    return { viewPath, props }
   }
+
   logger.warn(`[AppMachineTransition] Unknown meta format: ${JSON.stringify(config)}`)
-  return null
+  return { viewPath: null, props: {} }
 }
 
 const _stringifiedState = (stateValue) => {

package/lib/utils/Constants.js

@@ -13,7 +13,8 @@ module.exports = {
     ANNOUNCE: 5 * 60 * 1000, // 5 minutes
     START: 5 * 60 * 1000,    // 5 minutes
     RENDERED_EVENT_DELAY: 100, // 100 milliseconds
-    RECONNECT: 30 * 1000 // 30 seconds
+    RECONNECT: 30 * 1000, // 30 seconds
+    BOOT_EXIT: 2 * 1000 // 5 seconds
   },
   EventStates: {
     CREATED: 'created',

package/lib/utils/DisplayEventProcessor.js

@@ -8,9 +8,13 @@
  *   meta: {
  *     viewer:  // 'eachParticipant', 'allParticipants', 'spectators'
  *     state:   // Stringified state name (e.g., 'live.registration.waitForOpponentToJoin')
- *     event:   // The triggering event for this transition ('PARTICIPANT_ENTER')
+ *     event:   // The triggering event for this transition ('PARTIPANT_ENTER')
  *     timeout: // null|| func}
  *   }
+ *   props: {
+ *     // All properties from the `props` object in the AppM's meta block.
+ *     // e.g., meta: { view: 'foo', props: { title: 'Hello' } } -> `props.title`
+ *   }
  *
  *   // When 'eachParticipant' displayType
  *   allParticipants: // all: Map of all participants [info, context] for this event,  get(id) => info, context
@@ -77,7 +81,7 @@ class DisplayEventProcessor {
   }
 
   _processSingle(displayEvent) {
-    const { viewPath, appRenderContext, target, participantId, timeout: displayTimeout } = displayEvent
+    const { viewPath, appRenderContext, viewer, participantId, timeout: displayTimeout, props } = displayEvent
     const timeoutFn = appRenderContext.meta.timeoutFn
 
     const normalizedPath = viewPath.endsWith(C.PugSuffix) ? viewPath : `${viewPath}${C.PugSuffix}`
@@ -93,7 +97,8 @@ class DisplayEventProcessor {
       ...appRenderContext,
       anearEvent: this.anearEvent,
       participants: this.participantsIndex,
-      ...this.pugHelpers
+      ...this.pugHelpers,
+      props
     }
 
     const formattedDisplayMessage = () => {
@@ -104,11 +109,11 @@ class DisplayEventProcessor {
       return displayMessage
     }
 
-    // The target determines who sees the view. It defaults to the 'viewer'
-    // from the meta block, but can be overridden (e.g., for 'host').
-    const displayTarget = target || appRenderContext.meta.viewer
+    // The viewer determines who sees the view. It can be set directly on the
+    // display event, but if not, it falls back to the viewer from the meta block.
+    const displayViewer = viewer || appRenderContext.meta.viewer
 
-    switch (displayTarget) {
+    switch (displayViewer) {
       case 'allParticipants':
         logger.debug(`[DisplayEventProcessor] Publishing ${viewPath} to PARTICIPANTS_DISPLAY`)
 
@@ -162,7 +167,7 @@ class DisplayEventProcessor {
         break
 
       default:
-        throw new Error(`Unknown display target: ${displayTarget}`)
+        throw new Error(`Unknown display viewer: ${displayViewer}`)
     }
     return { publishPromise, timeout }
   }

package/lib/utils/RealtimeMessaging.js

@@ -85,6 +85,15 @@ class RealtimeMessaging {
     return channel.publish(msgType, message)
   }
 
+  async setPresence(channel, data) {
+    try {
+      await channel.presence.enter(data)
+      logger.debug(`[RTM] presence.enter on ${channel.name} with`, data)
+    } catch (e) {
+      logger.warn(`[RTM] presence.enter failed on ${channel.name}`, e)
+    }
+  }
+
   /**
    * Detach a list of Ably channels.
    * If any detach fails, Promise.all will reject.

package/lib/utils/RenderContextBuilder.js

@@ -59,19 +59,21 @@ class RenderContextBuilder {
    * Build display event object
    * @param {string} viewPath - Template/view path
    * @param {Object} appRenderContext - Context object
-   * @param {string} target - Optional target (host, participant, etc.)
+   * @param {string} viewer - Optional viewer type (host, participant, etc.)
    * @param {string} participantId - Optional participant ID for selective rendering
    * @param {number} timeout - Optional timeout in milliseconds
+   * @param {Object} props - Optional arguments for the view
    * @returns {Object} Display event object
    */
-  static buildDisplayEvent(viewPath, appRenderContext, target = null, participantId = null, timeout = null) {
+  static buildDisplayEvent(viewPath, appRenderContext, viewer = null, participantId = null, timeout = null, props = {}) {
     const displayEvent = {
       viewPath,
-      appRenderContext
+      appRenderContext,
+      props
     }
 
-    if (target) {
-      displayEvent.target = target
+    if (viewer) {
+      displayEvent.viewer = viewer
     }
 
     if (participantId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anear-js-api",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Javascript Developer API for Anear Apps",
   "main": "lib/index.js",
   "scripts": {