diff --git a/rm-mqtt-ws-bridge/demo.sh b/rm-mqtt-ws-bridge/demo.sh
index 65b9f68..fb9ec65 100755
--- a/rm-mqtt-ws-bridge/demo.sh
+++ b/rm-mqtt-ws-bridge/demo.sh
@@ -3,7 +3,31 @@ set -euo pipefail
 
 cd "$(dirname "$0")"
 
-REQUIRED_PORTS=(8080 3000 9000 4000 1883)
+REFERENCE_CEM_HEALTH_URL="${REFERENCE_CEM_HEALTH_URL:-http://localhost:8003/health}"
+REFERENCE_CEM_WS_URL="${REFERENCE_CEM_WS_URL:-ws://host.docker.internal:8003/ws}"
+
+reference_cem_reachable() {
+  curl -fs -o /dev/null --max-time 2 "$REFERENCE_CEM_HEALTH_URL" 2>/dev/null
+}
+
+COMPOSE_PROFILES_ARGS=()
+if [ -n "${CEM_BASE_URL:-}" ]; then
+  echo "Using external CEM (via CEM_BASE_URL): $CEM_BASE_URL"
+  echo "The bundled CEM stand-in will not start."
+elif reference_cem_reachable; then
+  export CEM_BASE_URL="$REFERENCE_CEM_WS_URL"
+  echo "Reference CEM detected at $REFERENCE_CEM_HEALTH_URL."
+  echo "Wiring the RM to $CEM_BASE_URL. The bundled CEM stand-in will not start."
+else
+  echo "No CEM_BASE_URL supplied and no reference CEM answering at $REFERENCE_CEM_HEALTH_URL."
+  echo "Falling back to the bundled CEM stand-in (simulation mode)."
+  COMPOSE_PROFILES_ARGS=(--profile bundled-cem)
+fi
+
+REQUIRED_PORTS=(8080 3000 4000 1883)
+if [ "${#COMPOSE_PROFILES_ARGS[@]}" -gt 0 ]; then
+  REQUIRED_PORTS+=(9000)
+fi
 if command -v lsof >/dev/null 2>&1; then
   for port in "${REQUIRED_PORTS[@]}"; do
     if lsof -iTCP:"$port" -sTCP:LISTEN >/dev/null 2>&1; then
@@ -12,8 +36,8 @@ if command -v lsof >/dev/null 2>&1; then
   done
 fi
 
-echo "Building and starting the three applications + the demo screen (this can take a few minutes the first time)..."
-docker compose up --build -d
+echo "Building and starting the applications + the demo screen (this can take a few minutes the first time)..."
+docker compose "${COMPOSE_PROFILES_ARGS[@]}" up --build -d
 
 wait_for() {
   for _ in $(seq 1 60); do
diff --git a/rm-mqtt-ws-bridge/demo/index.html b/rm-mqtt-ws-bridge/demo/index.html
index fdcd709..2416979 100644
--- a/rm-mqtt-ws-bridge/demo/index.html
+++ b/rm-mqtt-ws-bridge/demo/index.html
@@ -61,9 +61,60 @@
       .pane.rm { flex: 1; }
       .pane.mqtt { flex: 1; }
       .pane iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
-      .pane.cem iframe, .addr-cell.cem .addr-bar { background: #eaedf3; }
+      .pane.cem iframe, .pane.cem .external-cem, .addr-cell.cem .addr-bar { background: #eaedf3; }
       .pane.rm iframe, .addr-cell.rm .addr-bar { background: #e9f1ec; }
       .pane.mqtt iframe, .addr-cell.mqtt .addr-bar { background: #f2efe9; }
+
+      .external-cem {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 22px 24px;
+        font-family: var(--sans);
+        color: var(--text);
+        overflow: auto;
+      }
+      .external-cem .panel-title {
+        font-size: 15px;
+        font-weight: 700;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .external-cem .panel-tag {
+        font-size: 10.5px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: #2f6b3c;
+        background: #d5ecd8;
+        border-radius: 999px;
+        padding: 2px 8px;
+      }
+      .external-cem .panel-role { color: var(--muted); font-size: 13px; line-height: 1.4; }
+      .external-cem .kv {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        column-gap: 12px;
+        row-gap: 6px;
+        font-size: 12.5px;
+        background: var(--panel);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        padding: 12px 14px;
+      }
+      .external-cem .kv .k { color: var(--muted); font-weight: 600; }
+      .external-cem .kv .v { font-family: var(--mono); word-break: break-all; }
+      .external-cem .live-dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #52a462;
+        box-shadow: 0 0 0 3px rgba(82, 164, 98, 0.18);
+      }
+      .external-cem .live-dot.offline { background: #b9b9b9; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
     </style>
   </head>
   <body>
@@ -71,7 +122,7 @@
       <div class="addr-row">
         <div class="addr-cell cem">
           <div class="addr-bar">
-            <input class="addr-input" value="ws://localhost:9000/s2" readonly aria-label="CEM S2 endpoint the RM connects to" />
+            <input class="addr-input" id="cem-url" value="…" readonly aria-label="CEM S2 endpoint the RM connects to" />
           </div>
         </div>
         <div class="addr-cell rm">
@@ -87,12 +138,81 @@
         </div>
       </div>
       <div class="panes">
-        <div class="pane cem"><iframe src="http://localhost:9000" title="CEM demo"></iframe></div>
+        <div class="pane cem" id="cem-pane"></div>
         <div class="pane rm"><iframe src="http://localhost:3000" title="RM"></iframe></div>
         <div class="pane mqtt"><iframe src="http://localhost:4000" title="MQTT platform demo"></iframe></div>
       </div>
     </div>
     <script>
+      const cemUrlInput = document.getElementById("cem-url");
+      const cemPane = document.getElementById("cem-pane");
+
+      const BUNDLED_CEM_HOSTS = new Set(["cem", "localhost", "127.0.0.1", "host.docker.internal"]);
+
+      function isBundledCem(url) {
+        try {
+          const u = new URL(url);
+          return BUNDLED_CEM_HOSTS.has(u.hostname) && (u.port === "9000" || u.port === "");
+        } catch {
+          return false;
+        }
+      }
+
+      function renderBundledCem() {
+        if (cemPane.querySelector("iframe")) return;
+        cemPane.innerHTML = '<iframe src="http://localhost:9000" title="CEM demo"></iframe>';
+      }
+
+      function renderExternalCem(url, connected) {
+        cemPane.innerHTML = `
+          <div class="external-cem">
+            <div>
+              <div class="panel-title">S2 CEM<span class="panel-tag">external</span></div>
+              <div class="panel-role">
+                The RM is connected to an external CEM over S2. This peer has no
+                embedded dashboard, so this panel only reports the link status. Live
+                traffic still shows up in the RM feed in the middle.
+              </div>
+            </div>
+            <div class="kv">
+              <div class="k">Endpoint</div>
+              <div class="v">${escapeHtml(url)}</div>
+              <div class="k">Link</div>
+              <div class="v">
+                <span class="live-dot ${connected ? "" : "offline"}"></span>
+                ${connected ? "connected" : "not connected"}
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
+      function escapeHtml(s) {
+        return String(s).replace(/[&<>"']/g, (c) => (
+          { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]
+        ));
+      }
+
+      async function refreshCemPane() {
+        try {
+          const res = await fetch("http://localhost:3000/traffic", { headers: { Accept: "application/json" } });
+          const d = await res.json();
+          const url = d.cem_endpoint || "";
+          cemUrlInput.value = url;
+          const connected = d.resource && d.resource.state === "connected";
+          if (isBundledCem(url)) {
+            renderBundledCem();
+          } else {
+            renderExternalCem(url, connected);
+          }
+        } catch (e) {
+          cemUrlInput.value = "(RM not reachable)";
+        }
+      }
+
+      refreshCemPane();
+      setInterval(refreshCemPane, 2000);
+
       document.getElementById("reset").onclick = () => {
         const post = (url) => fetch(url, { method: "POST", mode: "no-cors" }).catch(() => {});
         post("http://localhost:4000/api/publish/disconnect");
@@ -105,6 +225,7 @@
           document.querySelectorAll(".pane iframe").forEach((frame) => {
             frame.src = frame.src;
           });
+          refreshCemPane();
         }, 1200);
       };
     </script>
diff --git a/rm-mqtt-ws-bridge/docker-compose.yml b/rm-mqtt-ws-bridge/docker-compose.yml
index 1f6772e..dd8690d 100644
--- a/rm-mqtt-ws-bridge/docker-compose.yml
+++ b/rm-mqtt-ws-bridge/docker-compose.yml
@@ -18,7 +18,7 @@ services:
   mosquitto:
     image: eclipse-mosquitto:2
     ports:
-      - "1883:1883"
+      - "${MOSQUITTO_HOST_PORT:-1883}:1883"
     volumes:
       - ./mqtt/mosquitto.conf:/mosquitto/config/mosquitto.conf:ro
 
@@ -31,13 +31,16 @@ services:
         condition: service_started
       cem:
         condition: service_healthy
+        required: false
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
     environment:
       RAILS_ENV: production
       RAILS_LOG_LEVEL: info
       SECRET_KEY_BASE: "demo-secret-key-base-for-standalone-reference-only"
       DATABASE_URL: "postgres://postgres:postgres@postgres:5432/resource_manager_mqtt_ruby"
       MQTT_URL: "mqtt://mosquitto:1883"
-      CEM_BASE_URL: "ws://cem:9000/s2"
+      CEM_BASE_URL: ${CEM_BASE_URL:-ws://cem:9000/s2}
       S2_PROVIDES_FORECAST: "true"
       SOLID_QUEUE_IN_PUMA: "true"
       DEMO_ALLOW_FRAMING: "1"
@@ -47,6 +50,7 @@ services:
 
   cem:
     build: ./cem
+    profiles: ["bundled-cem"]
     environment:
       PORT: "9000"
     healthcheck:
@@ -64,16 +68,20 @@ services:
     environment:
       PORT: "4000"
       MQTT_URL: "mqtt://mosquitto:1883"
-      RESOURCE_ID: "demo-resource-001"
+      RESOURCE_ID: ${RESOURCE_ID:-demo-resource-001}
     ports:
       - "4000:4000"
 
   demo:
     build: ./demo
     depends_on:
-      - rm
-      - cem
-      - mqtt-panel
+      rm:
+        condition: service_started
+      mqtt-panel:
+        condition: service_started
+      cem:
+        condition: service_started
+        required: false
     ports:
       - "8080:80"
 
diff --git a/rm-mqtt-ws-bridge/rm/app/controllers/traffic_controller.rb b/rm-mqtt-ws-bridge/rm/app/controllers/traffic_controller.rb
index 6f0af32..6c97121 100644
--- a/rm-mqtt-ws-bridge/rm/app/controllers/traffic_controller.rb
+++ b/rm-mqtt-ws-bridge/rm/app/controllers/traffic_controller.rb
@@ -1,5 +1,6 @@
 class TrafficController < ApplicationController
   skip_forgery_protection
+  before_action :allow_cross_origin
 
   def reset
     TrafficLog.clear
@@ -23,6 +24,10 @@ def index
 
   private
 
+  def allow_cross_origin
+    response.headers["Access-Control-Allow-Origin"] = "*"
+  end
+
   def connection_state(resource)
     connection = Supervisor.instance.find_connection(resource.s2_identifier)
     return connection.status.to_s if connection
diff --git a/rm-mqtt-ws-bridge/rm/app/lib/frbc_system_description_factory.rb b/rm-mqtt-ws-bridge/rm/app/lib/frbc_system_description_factory.rb
index 199bfaf..3220299 100644
--- a/rm-mqtt-ws-bridge/rm/app/lib/frbc_system_description_factory.rb
+++ b/rm-mqtt-ws-bridge/rm/app/lib/frbc_system_description_factory.rb
@@ -2,6 +2,11 @@ class FRBCSystemDescriptionFactory < BaseFactory
   OPERATION_MODE_OFF_LABEL = "Off".freeze
   OPERATION_MODE_CHARGING_LABEL = "Charging".freeze
 
+  # Namespace so structural UUIDs (actuator, operation modes, transitions) stay stable across
+  # reconnects and restarts. Otherwise every new system description would carry fresh IDs and any
+  # earlier CEM-side instruction would reference actuators/operation_modes that no longer exist.
+  STRUCTURAL_UUID_NAMESPACE = "f5b1a51b-8f7f-4c78-a1c3-3f2d2b3e2f7c".freeze
+
   # Workarounds to simplify EV control for CEM interoperability:
   # - Extremely low fill_rate effectively disables the buffer, so the CEM bases control only on power
   # - Extended fill_level_range (-10 to 110) provides headroom at SoC 0% and 100%
@@ -11,8 +16,9 @@ class FRBCSystemDescriptionFactory < BaseFactory
 
   class << self
     def create(resource) # rubocop:disable Metrics/MethodLength
-      off_id = SecureRandom.uuid
-      charging_id = SecureRandom.uuid
+      actuator_id = structural_id(resource, "actuator")
+      off_id = structural_id(resource, "operation_mode:off")
+      charging_id = structural_id(resource, "operation_mode:charging")
       commodity_quantity = commodity_quantity_for(resource)
       minimum_power = calc_minimum_power(resource)
       maximum_power = calc_maximum_power(resource)
@@ -23,7 +29,7 @@ def create(resource) # rubocop:disable Metrics/MethodLength
         "valid_from" => Time.current.iso8601,
         "actuators" => [
           {
-            "id" => SecureRandom.uuid,
+            "id" => actuator_id,
             "diagnostic_label" => "Electric Vehicle Charger",
             "supported_commodities" => [
               S2::Messages::Commodity::Electricity,
@@ -57,8 +63,8 @@ def create(resource) # rubocop:disable Metrics/MethodLength
               ),
             ],
             "transitions" => [
-              create_transition(from: off_id, to: charging_id),
-              create_transition(from: charging_id, to: off_id),
+              create_transition(from: off_id, to: charging_id, seed: structural_id(resource, "transition:off_to_charging")),
+              create_transition(from: charging_id, to: off_id, seed: structural_id(resource, "transition:charging_to_off")),
             ],
             "timers" => [],
           },
@@ -79,6 +85,10 @@ def create(resource) # rubocop:disable Metrics/MethodLength
 
     private
 
+    def structural_id(resource, role)
+      Digest::UUID.uuid_v5(STRUCTURAL_UUID_NAMESPACE, "#{resource.s2_identifier}/#{role}")
+    end
+
     def create_operation_mode(id:, label:, fill_level_range:, fill_rate:, power_ranges:)
       {
         "id" => id,
@@ -94,9 +104,9 @@ def create_operation_mode(id:, label:, fill_level_range:, fill_rate:, power_rang
       }
     end
 
-    def create_transition(from:, to:)
+    def create_transition(from:, to:, seed:)
       {
-        "id" => SecureRandom.uuid,
+        "id" => seed,
         "from" => from,
         "to" => to,
         "start_timers" => [],
diff --git a/rm-mqtt-ws-bridge/rm/app/lib/mqtt_message_logger.rb b/rm-mqtt-ws-bridge/rm/app/lib/mqtt_message_logger.rb
index 09e726e..d39813d 100644
--- a/rm-mqtt-ws-bridge/rm/app/lib/mqtt_message_logger.rb
+++ b/rm-mqtt-ws-bridge/rm/app/lib/mqtt_message_logger.rb
@@ -6,12 +6,12 @@ def initialize(logger)
   end
 
   def log_inbound(topic:, message:)
-    TrafficLog.record(peer: "mqtt", direction: "in", message_type: message_type_from(message), detail: detail_from(message))
+    TrafficLog.record(peer: "mqtt", direction: "in", message_type: message_type_from(message), detail: detail_from(message), body: body_from(message))
     log("Inbound MQTT message", topic:, message:)
   end
 
   def log_outbound(topic:, message:)
-    TrafficLog.record(peer: "mqtt", direction: "out", message_type: message_type_from(message), detail: detail_from(message))
+    TrafficLog.record(peer: "mqtt", direction: "out", message_type: message_type_from(message), detail: detail_from(message), body: body_from(message))
     log("Outbound MQTT message", topic:, message:)
   end
 
@@ -24,6 +24,12 @@ def message_type_from(message)
     nil
   end
 
+  def body_from(message)
+    message.is_a?(String) ? JSON.parse(message) : message
+  rescue StandardError
+    nil
+  end
+
   def detail_from(message)
     parsed = message.is_a?(String) ? JSON.parse(message) : message
     data = parsed["data"]
diff --git a/rm-mqtt-ws-bridge/rm/app/lib/s2_message_logger.rb b/rm-mqtt-ws-bridge/rm/app/lib/s2_message_logger.rb
index bd1402a..f8cebdf 100644
--- a/rm-mqtt-ws-bridge/rm/app/lib/s2_message_logger.rb
+++ b/rm-mqtt-ws-bridge/rm/app/lib/s2_message_logger.rb
@@ -4,15 +4,15 @@ def initialize(logger)
   end
 
   def log_inbound(resource_id:, message:)
-    message_type = extract_message_type(message)
-    TrafficLog.record(peer: "cem", direction: "in", message_type:)
-    log("Inbound S2 message", resource_id:, message:, message_type:)
+    parsed = parse(message)
+    TrafficLog.record(peer: "cem", direction: "in", body: parsed, **traffic_attrs(parsed))
+    log("Inbound S2 message", resource_id:, message:, message_type: parsed["message_type"])
   end
 
   def log_outbound(resource_id:, message:)
-    message_type = extract_message_type(message)
-    TrafficLog.record(peer: "cem", direction: "out", message_type:)
-    log("Outbound S2 message", resource_id:, message:, message_type:)
+    parsed = parse(message)
+    TrafficLog.record(peer: "cem", direction: "out", body: parsed, **traffic_attrs(parsed))
+    log("Outbound S2 message", resource_id:, message:, message_type: parsed["message_type"])
   end
 
   private
@@ -32,10 +32,18 @@ def log(log_message, resource_id:, message:, message_type:)
     raise if Rails.env.test?
   end
 
-  def extract_message_type(message)
-    parsed = JSON.parse(message)
-    parsed["message_type"]
+  def parse(message)
+    JSON.parse(message)
   rescue JSON::ParserError
-    nil
+    {}
+  end
+
+  def traffic_attrs(parsed)
+    {
+      message_type: parsed["message_type"],
+      message_id: parsed["message_id"],
+      subject_message_id: parsed["subject_message_id"],
+      status: parsed["status"],
+    }
   end
 end
diff --git a/rm-mqtt-ws-bridge/rm/app/lib/traffic_log.rb b/rm-mqtt-ws-bridge/rm/app/lib/traffic_log.rb
index 02baefd..3e81e9d 100644
--- a/rm-mqtt-ws-bridge/rm/app/lib/traffic_log.rb
+++ b/rm-mqtt-ws-bridge/rm/app/lib/traffic_log.rb
@@ -3,10 +3,20 @@ class TrafficLog
   PATH = Rails.root.join("tmp", "traffic.jsonl")
 
   class << self
-    def record(peer:, direction:, message_type:, detail: nil)
+    def record(peer:, direction:, message_type:, detail: nil, message_id: nil, subject_message_id: nil, status: nil, body: nil)
       return if message_type.blank?
 
-      entry = JSON.generate({ peer: peer, direction: direction, message_type: message_type, detail: detail, at: Time.current.utc.iso8601 }.compact)
+      entry = JSON.generate({
+        peer: peer,
+        direction: direction,
+        message_type: message_type,
+        detail: detail,
+        message_id: message_id,
+        subject_message_id: subject_message_id,
+        status: status,
+        body: body,
+        at: Time.current.utc.iso8601,
+      }.compact)
       File.open(PATH, File::RDWR | File::CREAT, 0o644) do |file|
         file.flock(File::LOCK_EX)
         kept = file.read.split("\n").last(MAX - 1)
diff --git a/rm-mqtt-ws-bridge/rm/app/views/resources/index.html.erb b/rm-mqtt-ws-bridge/rm/app/views/resources/index.html.erb
index 943418e..19ef42c 100644
--- a/rm-mqtt-ws-bridge/rm/app/views/resources/index.html.erb
+++ b/rm-mqtt-ws-bridge/rm/app/views/resources/index.html.erb
@@ -34,6 +34,46 @@
   .trow .pipe .arr.flip svg { transform: scaleX(-1); }
   .trow.is-setup .what { font-weight: 500; color: var(--muted); }
 
+  .ack {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 6px;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .ack.ok { background: #d5ecd8; color: #2f6b3c; }
+  .ack.err { background: #f4d3d3; color: #a12727; }
+  .ack.pending { background: #ececec; color: #888; cursor: default; }
+
+  .trow.expandable { cursor: pointer; }
+  .trow.expandable:hover { background: rgba(0,0,0,0.02); }
+  .raw {
+    grid-column: 1 / -1;
+    display: none;
+    margin: 4px 0 8px 62px;
+    padding: 8px 10px;
+    background: #fafafa;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--text);
+    white-space: pre;
+    overflow-x: auto;
+  }
+  .raw.open { display: block; }
+  .raw.rs { border-left: 3px solid #2f6b3c; background: #f2faf3; }
+
 </style>
 
 <script>
@@ -45,6 +85,7 @@
     charge_target: "FRBC.FillLevelTargetProfile",
     charge_status: "FRBC.StorageStatus",
     power_forecast: "PowerForecast",
+    instruction_update: "InstructionStatusUpdate",
   };
 
   function humanize(t) {
@@ -69,7 +110,28 @@
     return iso && !isNaN(d) ? d.toTimeString().slice(0, 8) : "";
   }
 
-  function row(kind, dir, at, cemWhat, chargerWhat, chargerVal) {
+  function stableId(prefix, t) {
+    return prefix + "-" + [t.peer, t.direction, t.at, t.message_id || "", t.subject_message_id || "", t.message_type || ""].join("|").replace(/[^a-zA-Z0-9|-]/g, "_");
+  }
+
+  function ackBadge(ack, rowId) {
+    if (!ack) return "";
+    if (ack.status && ack.status !== "OK") {
+      return '<button class="ack err" type="button" data-ack-toggle="' + rowId + '" title="Reception status: ' + escapeHtml(ack.status) + ' (click for body)">!</button>';
+    }
+    if (ack.status === "OK") {
+      return '<button class="ack ok" type="button" data-ack-toggle="' + rowId + '" title="Reception status: OK (click for body)">&#10003;</button>';
+    }
+    return '<span class="ack pending" title="Awaiting Reception status">&#8230;</span>';
+  }
+
+  function rawBlock(body, extraClass, id, dataAttr) {
+    if (!body) return "";
+    const json = escapeHtml(JSON.stringify(body, null, 2));
+    return '<pre class="raw ' + (extraClass || "") + '" id="' + id + '" ' + (dataAttr || "") + '>' + json + "</pre>";
+  }
+
+  function row(entry, kind, dir, at, cemWhat, chargerWhat, chargerVal, cemAck, chargerAck, body) {
     const val = chargerVal ? '<span class="val">' + escapeHtml(chargerVal) + "</span>" : "";
     const arrowSvg =
       '<svg viewBox="0 0 56 24" width="50" height="22" aria-hidden="true">' +
@@ -79,37 +141,110 @@
     const pipe = dir
       ? '<div class="pipe"><span class="' + (dir === "left" ? "arr flip" : "arr") + '">' + arrowSvg + "</span></div>"
       : '<div class="pipe"></div>';
-    return (
-      '<div class="trow is-' + kind + '">' +
-      '<span class="tstamp">' + tstamp(at) + "</span>" +
-      '<div class="end"><span class="what">' + escapeHtml(cemWhat) + "</span></div>" +
-      pipe +
-      '<div class="end charger"><span class="what">' + escapeHtml(chargerWhat) + val + "</span></div>" +
-      "</div>"
-    );
+    const ack = cemAck || chargerAck;
+    const rawId = stableId("raw", entry);
+    const rsRawId = ack ? stableId("rs", ack) : "";
+    const parts = [];
+    parts.push('<div class="trow is-' + kind + (body ? ' expandable' : '') + '" data-body-toggle="' + rawId + '">');
+    parts.push('<span class="tstamp">' + tstamp(at) + "</span>");
+    parts.push('<div class="end"><span class="what">' + escapeHtml(cemWhat) + ackBadge(cemAck, rsRawId) + "</span></div>");
+    parts.push(pipe);
+    parts.push('<div class="end charger"><span class="what">' + escapeHtml(chargerWhat) + val + ackBadge(chargerAck, rsRawId) + "</span></div>");
+    parts.push("</div>");
+    if (body) {
+      parts.push(rawBlock(body, "", rawId));
+    }
+    if (ack && ack.body) {
+      parts.push(rawBlock(ack.body, "rs", rsRawId));
+    }
+    return parts.join("");
+  }
+
+  function buildAckIndex(traffic) {
+    // Map every CEM message_id (in both directions) to the ReceptionStatus entry that subject-references it.
+    const index = new Map();
+    for (const t of traffic || []) {
+      if (t.peer === "cem" && t.message_type === "ReceptionStatus" && t.subject_message_id) {
+        index.set(t.subject_message_id, t);
+      }
+    }
+    return index;
+  }
+
+  function ackForCemMessage(index, t, sentDirection) {
+    if (!t.message_id) return null;
+    const rs = index.get(t.message_id);
+    if (rs) return rs;
+    if (t.direction === sentDirection) return { status: null };
+    return null;
+  }
+
+  const openBodyIds = new Set();
+
+  function findRelayedS2(traffic, mqttEntry) {
+    // Traffic is stored newest-first. The S2 outbound relay for an inbound MQTT report sits a few
+    // entries earlier (closer to now); walk forward from the mqtt entry to find the matching type.
+    const wantedType = FWD[mqttEntry.message_type];
+    if (!wantedType) return null;
+    const idx = traffic.indexOf(mqttEntry);
+    for (let i = idx - 1; i >= Math.max(0, idx - 6); i--) {
+      const t = traffic[i];
+      if (t.peer === "cem" && t.direction === "out" && t.message_type === wantedType) return t;
+    }
+    return null;
   }
 
   function renderLedger(traffic) {
     const rows = [];
+    const ackIndex = buildAckIndex(traffic);
     for (const t of traffic || []) {
       if (t.peer === "mqtt" && t.direction === "in") {
         if (FWD[t.message_type]) {
           const detail = t.message_type === "charge_status" && t.detail && !/%/.test(t.detail) ? t.detail + " %" : t.detail;
-          rows.push(row("report", "left", t.at, humanize(FWD[t.message_type]), humanize(t.message_type), detail));
+          const s2 = findRelayedS2(traffic, t);
+          const ack = s2 ? ackForCemMessage(ackIndex, s2, "out") : null;
+          const body = s2 ? s2.body : t.body;
+          rows.push(row(s2 || t, "report", "left", t.at, humanize(FWD[t.message_type]), humanize(t.message_type), detail, ack, null, body));
         } else if (t.message_type === "connect") {
-          rows.push(row("setup", null, t.at, "", "Connect", null));
+          rows.push(row(t, "setup", null, t.at, "", "Connect", null, null, null, t.body));
         } else if (t.message_type === "disconnect") {
-          rows.push(row("setup", null, t.at, "", "Disconnect", null));
+          rows.push(row(t, "setup", null, t.at, "", "Disconnect", null, null, null, t.body));
         }
       } else if (t.peer === "cem" && t.direction === "in" && /FRBC\.Instruction/.test(t.message_type)) {
-        rows.push(row("command", "right", t.at, humanize(t.message_type), humanize("power_setpoint"), null));
+        rows.push(row(t, "command", "right", t.at, humanize(t.message_type), humanize("power_setpoint"), null, ackForCemMessage(ackIndex, t, "in"), null, t.body));
       } else if (t.peer === "cem" && /^(Handshake|HandshakeResponse|ResourceManagerDetails|SelectControlType|FRBC\.SystemDescription)$/.test(t.message_type)) {
-        rows.push(row("setup", null, t.at, humanize(t.message_type), "", null));
+        const setupDir = t.direction === "in" ? "right" : "left";
+        const sentDirection = t.direction === "in" ? "in" : "out";
+        rows.push(row(t, "setup", setupDir, t.at, humanize(t.message_type), "", null, ackForCemMessage(ackIndex, t, sentDirection), null, t.body));
       }
     }
     ledgerEl.innerHTML = rows.length
       ? rows.join("")
       : '<span class="empty">No messages yet.</span>';
+    for (const id of openBodyIds) {
+      const el = ledgerEl.querySelector('#' + CSS.escape(id));
+      if (el) el.classList.add("open");
+    }
+  }
+
+  ledgerEl.addEventListener("click", (event) => {
+    const ackButton = event.target.closest("[data-ack-toggle]");
+    if (ackButton) {
+      event.stopPropagation();
+      toggleRaw(ackButton.dataset.ackToggle);
+      return;
+    }
+    const row = event.target.closest("[data-body-toggle]");
+    if (row) toggleRaw(row.dataset.bodyToggle);
+  });
+
+  function toggleRaw(id) {
+    if (!id) return;
+    const el = ledgerEl.querySelector('#' + CSS.escape(id));
+    if (!el) return;
+    el.classList.toggle("open");
+    if (el.classList.contains("open")) openBodyIds.add(id);
+    else openBodyIds.delete(id);
   }
 
   function renderState(d) {