From 84ffe92263e05ddb2a095a33a49de520396cd127 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 20 Mar 2026 10:46:15 +0100
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20Add=20hex=20view=20for=20messag?=
 =?UTF-8?q?e=20body?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a hex dump viewer to the message body view alongside the existing
JSON/XML formatted view. Features:
- Virtualized rendering for large payloads (only visible rows in DOM)
- Responsive layout: bytes per row adapts to container width (8-48)
- 8-byte lane grouping with dotted vertical separators
- Selection sync between hex bytes and ASCII text panels
- Null bytes (0x00) and non-printable chars styled in gray
- Encoding label (US-ASCII) shown in toolbar
- Copy to clipboard (selection or first 64KB hex dump)
- Raw bytes stored alongside formatted text in MessageStore
---
 .../src/components/messages/BodyView.vue      |  53 ++-
 .../src/components/messages/HexView.vue       | 415 ++++++++++++++++++
 src/Frontend/src/stores/MessageStore.ts       |   8 +-
 .../recoverability-available.ts               |  17 +-
 4 files changed, 487 insertions(+), 6 deletions(-)
 create mode 100644 src/Frontend/src/components/messages/HexView.vue

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index ceb1e8d8bb..61055e476a 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
+import HexView from "@/components/messages/HexView.vue";
 import parseContentType from "@/composables/contentTypeParser";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
+type ViewMode = "formatted" | "hex";
+
 const store = useMessageStore();
 const { body: bodyState, state } = storeToRefs(store);
+const viewMode = ref<ViewMode>("formatted");
 
 watch(
   () => state.value.data.body_url,
@@ -18,6 +22,7 @@ watch(
 );
 const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
 const body = computed(() => bodyState.value.data.value);
+const rawBytes = computed(() => bodyState.value.data.rawBytes);
 </script>
 
 <template>
@@ -29,8 +34,15 @@ const body = computed(() => bodyState.value.data.value);
       Body was too large and not stored. Edit <a href="https://docs.particular.net/servicecontrol/audit-instances/configuration#performance-tuning-servicecontrol-auditmaxbodysizetostore">ServiceControl/MaxBodySizeToStore</a> to be larger in the
       ServiceControl configuration.
     </div>
-    <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-    <div v-else-if="body && !contentType.isSupported" class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+    <template v-else-if="rawBytes">
+      <div class="view-mode-toggle">
+        <button :class="['toggle-btn', { active: viewMode === 'formatted' }]" @click="viewMode = 'formatted'">Formatted</button>
+        <button :class="['toggle-btn', { active: viewMode === 'hex' }]" @click="viewMode = 'hex'">Hex</button>
+      </div>
+      <CodeEditor v-if="viewMode === 'formatted' && body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true" />
+      <div v-else-if="viewMode === 'formatted' && !contentType.isSupported" class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+      <HexView v-else-if="viewMode === 'hex'" :data="rawBytes" />
+    </template>
   </div>
 </template>
 
@@ -38,4 +50,39 @@ const body = computed(() => bodyState.value.data.value);
 .gap {
   margin-top: 5px;
 }
+
+.view-mode-toggle {
+  display: flex;
+  gap: 0;
+  margin-bottom: 5px;
+}
+
+.toggle-btn {
+  padding: 4px 14px;
+  border: 1px solid #ccc;
+  background: #f3f3f3;
+  color: #333;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.toggle-btn:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.toggle-btn:last-child {
+  border-radius: 0 4px 4px 0;
+  border-left: none;
+}
+
+.toggle-btn:hover {
+  background: #e6e6e6;
+}
+
+.toggle-btn.active {
+  background: var(--sp-blue, #00a3c4);
+  color: white;
+  border-color: var(--sp-blue, #00a3c4);
+}
 </style>
diff --git a/src/Frontend/src/components/messages/HexView.vue b/src/Frontend/src/components/messages/HexView.vue
new file mode 100644
index 0000000000..17e1203282
--- /dev/null
+++ b/src/Frontend/src/components/messages/HexView.vue
@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
+
+const props = defineProps<{
+  data: Uint8Array;
+}>();
+
+const LANE_SIZE = 8;
+const ROW_HEIGHT = 20;
+const OVERSCAN = 10;
+
+const scrollContainer = ref<HTMLElement | null>(null);
+const containerWidth = ref(0);
+const containerHeight = ref(0);
+const scrollTop = ref(0);
+const charWidthPx = ref(7.8);
+
+const selectionStart = ref<number | null>(null);
+const selectionEnd = ref<number | null>(null);
+const isSelecting = ref(false);
+
+// Responsive: compute bytes per row as a multiple of LANE_SIZE based on available width
+// Row layout in ch units: offset(8+2) + hex(bpr*3 + lanes-1)*laneSep) + separator(3) + ascii(bpr + (lanes-1)*0.5) + margin(2)
+const bytesPerRow = computed(() => {
+  const availablePx = containerWidth.value;
+  if (availablePx === 0) return 16; // default before measurement
+  const ch = charWidthPx.value;
+  // Try multiples of LANE_SIZE from large to small
+  for (const bpr of [48, 40, 32, 24, 16]) {
+    const lanes = bpr / LANE_SIZE;
+    // offset: 10ch, hex: bpr*3ch + (lanes-1)*1.5ch, sep: 3ch, ascii: bpr*1ch + (lanes-1)*0.5ch, margin: 2ch
+    const needed = (10 + bpr * 3 + (lanes - 1) * 1.5 + 3 + bpr + (lanes - 1) * 0.5 + 2) * ch;
+    if (availablePx >= needed) return bpr;
+  }
+  return 8;
+});
+
+// Fixed width for hex bytes area (in ch) so all rows align including short last row
+const hexAreaWidthCh = computed(() => {
+  const bpr = bytesPerRow.value;
+  const lanes = bpr / LANE_SIZE;
+  // Each byte: 3ch (2 hex + 1 space). Each lane separator: 1.5ch. Minus trailing space on last byte.
+  return bpr * 3 + (lanes - 1) * 1.5;
+});
+
+const totalRows = computed(() => Math.ceil(props.data.length / bytesPerRow.value));
+const totalHeight = computed(() => totalRows.value * ROW_HEIGHT);
+
+const visibleRange = computed(() => {
+  const firstVisible = Math.floor(scrollTop.value / ROW_HEIGHT);
+  const visibleCount = Math.ceil(containerHeight.value / ROW_HEIGHT);
+  const start = Math.max(0, firstVisible - OVERSCAN);
+  const end = Math.min(totalRows.value, firstVisible + visibleCount + OVERSCAN);
+  return { start, end };
+});
+
+const offsetY = computed(() => visibleRange.value.start * ROW_HEIGHT);
+
+const selectionMin = computed(() => {
+  if (selectionStart.value === null || selectionEnd.value === null) return null;
+  return Math.min(selectionStart.value, selectionEnd.value);
+});
+
+const selectionMax = computed(() => {
+  if (selectionStart.value === null || selectionEnd.value === null) return null;
+  return Math.max(selectionStart.value, selectionEnd.value);
+});
+
+function isSelected(byteIndex: number): boolean {
+  if (selectionMin.value === null || selectionMax.value === null) return false;
+  return byteIndex >= selectionMin.value && byteIndex <= selectionMax.value;
+}
+
+function isPrintableAscii(byte: number): boolean {
+  return byte >= 0x20 && byte <= 0x7e;
+}
+
+function toHex2(byte: number): string {
+  return byte.toString(16).toUpperCase().padStart(2, "0");
+}
+
+function toHex8(offset: number): string {
+  return offset.toString(16).toUpperCase().padStart(8, "0");
+}
+
+function toAsciiChar(byte: number): string {
+  return isPrintableAscii(byte) ? String.fromCharCode(byte) : ".";
+}
+
+// Returns true if this is the last byte in a lane (needs separator after it)
+function isLaneEnd(posInRow: number): boolean {
+  return posInRow % LANE_SIZE === LANE_SIZE - 1;
+}
+
+interface VisibleRow {
+  offset: number;
+  offsetHex: string;
+  byteCount: number;
+  bytes: { index: number; value: number; hex: string }[];
+  chars: { index: number; value: number; printable: boolean; display: string }[];
+}
+
+const visibleRows = computed<VisibleRow[]>(() => {
+  const rows: VisibleRow[] = [];
+  const { start, end } = visibleRange.value;
+  const bpr = bytesPerRow.value;
+
+  for (let rowIdx = start; rowIdx < end; rowIdx++) {
+    const offset = rowIdx * bpr;
+    const rowEnd = Math.min(offset + bpr, props.data.length);
+    const bytes: VisibleRow["bytes"] = [];
+    const chars: VisibleRow["chars"] = [];
+
+    for (let i = offset; i < rowEnd; i++) {
+      const b = props.data[i];
+      bytes.push({ index: i, value: b, hex: toHex2(b) });
+      chars.push({ index: i, value: b, printable: isPrintableAscii(b), display: toAsciiChar(b) });
+    }
+
+    rows.push({ offset, offsetHex: toHex8(offset), byteCount: rowEnd - offset, bytes, chars });
+  }
+
+  return rows;
+});
+
+function onScroll() {
+  if (!scrollContainer.value) return;
+  scrollTop.value = scrollContainer.value.scrollTop;
+}
+
+function measureContainer() {
+  if (!scrollContainer.value) return;
+  containerHeight.value = scrollContainer.value.clientHeight;
+  containerWidth.value = scrollContainer.value.clientWidth;
+}
+
+function startSelection(byteIndex: number) {
+  selectionStart.value = byteIndex;
+  selectionEnd.value = byteIndex;
+  isSelecting.value = true;
+}
+
+function extendSelection(byteIndex: number) {
+  if (!isSelecting.value) return;
+  selectionEnd.value = byteIndex;
+}
+
+function endSelection() {
+  isSelecting.value = false;
+}
+
+function onDocumentMouseUp() {
+  endSelection();
+}
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  document.addEventListener("mouseup", onDocumentMouseUp);
+
+  // Measure monospace char width
+  const measurer = document.createElement("span");
+  measurer.style.fontFamily = '"Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", "Courier New", monospace';
+  measurer.style.fontSize = "13px";
+  measurer.style.position = "absolute";
+  measurer.style.visibility = "hidden";
+  measurer.textContent = "0".repeat(100);
+  document.body.appendChild(measurer);
+  charWidthPx.value = measurer.offsetWidth / 100;
+  document.body.removeChild(measurer);
+
+  measureContainer();
+  if (scrollContainer.value) {
+    resizeObserver = new ResizeObserver(measureContainer);
+    resizeObserver.observe(scrollContainer.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("mouseup", onDocumentMouseUp);
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => props.data,
+  () => {
+    selectionStart.value = null;
+    selectionEnd.value = null;
+  }
+);
+
+const selectedText = computed(() => {
+  if (selectionMin.value === null || selectionMax.value === null) return "";
+  const slice = props.data.slice(selectionMin.value, selectionMax.value + 1);
+  const hexParts: string[] = [];
+  const asciiParts: string[] = [];
+  for (let i = 0; i < slice.length; i++) {
+    hexParts.push(toHex2(slice[i]));
+    asciiParts.push(toAsciiChar(slice[i]));
+  }
+  return hexParts.join(" ") + "  |" + asciiParts.join("") + "|";
+});
+
+const copyText = computed(() => {
+  if (selectedText.value) return selectedText.value;
+  const limit = Math.min(props.data.length, 65536);
+  const lines: string[] = [];
+  const bpr = bytesPerRow.value;
+  for (let offset = 0; offset < limit; offset += bpr) {
+    const end = Math.min(offset + bpr, limit);
+    const hexParts: string[] = [];
+    const asciiParts: string[] = [];
+    for (let i = offset; i < end; i++) {
+      hexParts.push(toHex2(props.data[i]));
+      asciiParts.push(toAsciiChar(props.data[i]));
+    }
+    while (hexParts.length < bpr) hexParts.push("  ");
+    // Group into lanes
+    const hexLanes: string[] = [];
+    for (let l = 0; l < bpr; l += LANE_SIZE) {
+      hexLanes.push(hexParts.slice(l, l + LANE_SIZE).join(" "));
+    }
+    lines.push(`${toHex8(offset)}  ${hexLanes.join("  ")}  |${asciiParts.join("")}|`);
+  }
+  if (props.data.length > limit) {
+    lines.push(`... (${props.data.length - limit} more bytes)`);
+  }
+  return lines.join("\n");
+});
+</script>
+
+<template>
+  <div class="hex-view-wrapper">
+    <div class="hex-toolbar">
+      <span class="encoding-label">Encoding: US-ASCII</span>
+      <CopyToClipboard :value="copyText" />
+    </div>
+    <div v-if="data.length === 0" class="hex-empty">No data</div>
+    <div v-else ref="scrollContainer" class="hex-scroll-container" @scroll="onScroll">
+      <div class="hex-spacer" :style="{ height: totalHeight + 'px' }">
+        <div class="hex-rows" :style="{ transform: `translateY(${offsetY}px)` }">
+          <div v-for="row in visibleRows" :key="row.offset" class="hex-row">
+            <span class="hex-offset">{{ row.offsetHex }}</span>
+            <span class="hex-bytes" :style="{ minWidth: hexAreaWidthCh + 'ch' }">
+              <!-- Render all bytesPerRow slots to ensure consistent width -->
+              <template v-for="pos in bytesPerRow" :key="pos">
+                <span
+                  v-if="pos <= row.byteCount"
+                  class="hex-byte"
+                  :class="{ 'null-byte': row.bytes[pos - 1].value === 0, selected: isSelected(row.bytes[pos - 1].index) }"
+                  @mousedown.prevent="startSelection(row.bytes[pos - 1].index)"
+                  @mouseover="extendSelection(row.bytes[pos - 1].index)"
+                  >{{ row.bytes[pos - 1].hex }}</span
+                >
+                <span v-else class="hex-byte pad">&nbsp;&nbsp;</span>
+                <span v-if="isLaneEnd(pos - 1) && pos < bytesPerRow" class="hex-lane-sep"></span>
+              </template>
+            </span>
+            <span class="hex-ascii">
+              <template v-for="(char, i) in row.chars" :key="char.index">
+                <span
+                  class="ascii-char"
+                  :class="{ 'non-printable': !char.printable, selected: isSelected(char.index) }"
+                  @mousedown.prevent="startSelection(char.index)"
+                  @mouseover="extendSelection(char.index)"
+                  >{{ char.display }}</span
+                >
+                <span v-if="isLaneEnd(i) && i < row.chars.length - 1" class="ascii-lane-sep"></span>
+              </template>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hex-view-wrapper {
+  margin-top: 5px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.hex-toolbar {
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.encoding-label {
+  font-family: monospace;
+  font-size: 0.85em;
+  color: var(--reduced-emphasis, #929e9e);
+}
+
+.hex-empty {
+  padding: 1rem;
+  color: var(--reduced-emphasis, #929e9e);
+  font-style: italic;
+}
+
+.hex-scroll-container {
+  overflow-y: auto;
+  overflow-x: auto;
+  flex: 1 1 0;
+  min-height: 200px;
+  max-height: 70vh;
+}
+
+.hex-spacer {
+  position: relative;
+}
+
+.hex-rows {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.hex-row {
+  height: 20px;
+  line-height: 20px;
+  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", "Courier New", monospace;
+  font-size: 13px;
+  white-space: nowrap;
+  display: flex;
+  user-select: none;
+}
+
+.hex-offset {
+  color: #6a737d;
+  margin-right: 2ch;
+  flex-shrink: 0;
+}
+
+.hex-bytes {
+  flex-shrink: 0;
+  margin-right: 1.5ch;
+}
+
+.hex-byte {
+  display: inline-block;
+  width: 3ch;
+  text-align: center;
+  cursor: pointer;
+}
+
+.hex-byte:not(.pad):hover {
+  background-color: #e8f0fe;
+  border-radius: 2px;
+}
+
+.hex-byte.pad {
+  cursor: default;
+}
+
+/* Lane separator between 8-byte groups in hex area */
+.hex-lane-sep {
+  display: inline-block;
+  width: 1.5ch;
+  border-left: 1px dotted #d0d0d0;
+  margin-left: 0.25ch;
+  height: 14px;
+  vertical-align: middle;
+}
+
+.hex-ascii {
+  flex-shrink: 0;
+  border-left: 1px solid #ccc;
+  padding-left: 1.5ch;
+}
+
+.ascii-char {
+  cursor: pointer;
+}
+
+.ascii-char:hover {
+  background-color: #e8f0fe;
+}
+
+/* Lane separator in ASCII area */
+.ascii-lane-sep {
+  display: inline-block;
+  width: 0.5ch;
+}
+
+/* Null bytes (0x00): dim gray */
+.null-byte {
+  color: #c0c0c0;
+}
+
+/* Non-printable characters: dim gray */
+.non-printable {
+  color: #c0c0c0;
+}
+
+/* Selection highlight */
+.selected {
+  background-color: #b3d4fc;
+  border-radius: 2px;
+}
+</style>
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index 447b9d3e43..134c0fa759 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -64,7 +64,7 @@ interface Model {
 
 export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
-  const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean }>>({ data: {} });
+  const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean; rawBytes?: Uint8Array }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} } });
   const edit_and_retry_config = ref<EditAndRetryConfig>({ enabled: false, locked_headers: [], sensitive_headers: [] });
   const conversationData = ref<DataContainer<Message[]>>({ data: [] });
@@ -227,7 +227,11 @@ export const useMessageStore = defineStore("MessageStore", () => {
 
       const contentType = response.headers.get("content-type");
       body.value.data.content_type = contentType ?? "text/plain";
-      body.value.data.value = await response.text();
+
+      const arrayBuffer = await response.arrayBuffer();
+      body.value.data.rawBytes = new Uint8Array(arrayBuffer);
+      const charset = contentType?.match(/charset=([^\s;]+)/i)?.[1] ?? "utf-8";
+      body.value.data.value = new TextDecoder(charset).decode(arrayBuffer);
 
       if (contentType === "application/json") {
         body.value.data.value = stringify(parse(body.value.data.value), null, 2) ?? body.value.data.value;
diff --git a/src/Frontend/test/mocks/scenarios/recoverability/recoverability-available.ts b/src/Frontend/test/mocks/scenarios/recoverability/recoverability-available.ts
index a442c83331..9079e4c122 100644
--- a/src/Frontend/test/mocks/scenarios/recoverability/recoverability-available.ts
+++ b/src/Frontend/test/mocks/scenarios/recoverability/recoverability-available.ts
@@ -12,6 +12,7 @@
  *   2. Navigate to Failed Messages view
  *   3. Recoverability capability card should show "Available" status
  *   4. Failed message recovery features should work
+ *   5. Click a failed message → Body tab → toggle "Hex" to see hex view
  */
 import { createScenario } from "../scenario-helper";
 import * as precondition from "../../../preconditions";
@@ -19,4 +20,18 @@ import * as precondition from "../../../preconditions";
 const { worker, runScenario } = createScenario();
 
 export { worker };
-export const setupComplete = runScenario(precondition.scenarioRecoverabilityAvailable);
+export const setupComplete = runScenario(async ({ driver }) => {
+  await driver.setUp(precondition.scenarioRecoverabilityAvailable);
+
+  // Add a failed message with body so the Body tab (and Hex view) can be tested
+  // Note: withGroupId and withMessageId must match because the mock's body_url
+  // uses the groupId but the body endpoint handler uses the messageId
+  await driver.setUp(
+    precondition.hasFailedMessage({
+      withGroupId: "hex-test-1",
+      withMessageId: "hex-test-1",
+      withContentType: "application/json",
+      withBody: { orderId: 12345, customerName: "Alice", amount: 99.95, shipped: false, notes: "express delivery" },
+    })
+  );
+});

From a011879790d520f7e2f5e59dd04b5f150070957a Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 20 Mar 2026 10:48:26 +0100
Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=90=9B=20Fix=20ASCII=20lane=20separat?=
 =?UTF-8?q?or=20adding=20visible=20space=20in=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the 0.5ch-wide inline-block separator between 8-char groups
in the ASCII column with a thin dotted left-border on the first char
of each lane. This prevents misleading spaces in the text (e.g.
"orderI d" instead of "orderId") while keeping the visual grouping.
---
 .../src/components/messages/HexView.vue       | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/Frontend/src/components/messages/HexView.vue b/src/Frontend/src/components/messages/HexView.vue
index 17e1203282..55e616d2dd 100644
--- a/src/Frontend/src/components/messages/HexView.vue
+++ b/src/Frontend/src/components/messages/HexView.vue
@@ -29,8 +29,8 @@ const bytesPerRow = computed(() => {
   // Try multiples of LANE_SIZE from large to small
   for (const bpr of [48, 40, 32, 24, 16]) {
     const lanes = bpr / LANE_SIZE;
-    // offset: 10ch, hex: bpr*3ch + (lanes-1)*1.5ch, sep: 3ch, ascii: bpr*1ch + (lanes-1)*0.5ch, margin: 2ch
-    const needed = (10 + bpr * 3 + (lanes - 1) * 1.5 + 3 + bpr + (lanes - 1) * 0.5 + 2) * ch;
+    // offset: 10ch, hex: bpr*3ch + (lanes-1)*1.5ch, sep: 3ch, ascii: bpr*1ch, margin: 2ch
+    const needed = (10 + bpr * 3 + (lanes - 1) * 1.5 + 3 + bpr + 2) * ch;
     if (availablePx >= needed) return bpr;
   }
   return 8;
@@ -258,16 +258,15 @@ const copyText = computed(() => {
               </template>
             </span>
             <span class="hex-ascii">
-              <template v-for="(char, i) in row.chars" :key="char.index">
-                <span
-                  class="ascii-char"
-                  :class="{ 'non-printable': !char.printable, selected: isSelected(char.index) }"
-                  @mousedown.prevent="startSelection(char.index)"
-                  @mouseover="extendSelection(char.index)"
-                  >{{ char.display }}</span
-                >
-                <span v-if="isLaneEnd(i) && i < row.chars.length - 1" class="ascii-lane-sep"></span>
-              </template>
+              <span
+                v-for="(char, i) in row.chars"
+                :key="char.index"
+                class="ascii-char"
+                :class="{ 'non-printable': !char.printable, selected: isSelected(char.index), 'lane-start': i > 0 && i % LANE_SIZE === 0 }"
+                @mousedown.prevent="startSelection(char.index)"
+                @mouseover="extendSelection(char.index)"
+                >{{ char.display }}</span
+              >
             </span>
           </div>
         </div>
@@ -391,10 +390,9 @@ const copyText = computed(() => {
   background-color: #e8f0fe;
 }
 
-/* Lane separator in ASCII area */
-.ascii-lane-sep {
-  display: inline-block;
-  width: 0.5ch;
+/* Lane boundary marker in ASCII area — thin border, no added width */
+.ascii-char.lane-start {
+  border-left: 1px dotted #d0d0d0;
 }
 
 /* Null bytes (0x00): dim gray */

From a821e29cff1523de0a27261b05e6ad82f63237a2 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 20 Mar 2026 12:36:22 +0100
Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=90=9B=20Auto-switch=20to=20hex=20vie?=
 =?UTF-8?q?w=20when=20message=20body=20parsing=20fails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap JSON/XML formatting in try/catch so parse failures are surfaced
via a `parse_failed` flag instead of crashing. When detected, the UI
automatically switches to hex view and shows a warning banner.
---
 .../src/components/messages/BodyView.vue         |  6 ++++++
 src/Frontend/src/stores/MessageStore.ts          | 16 ++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index 61055e476a..28d49e1660 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -23,6 +23,11 @@ watch(
 const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
 const body = computed(() => bodyState.value.data.value);
 const rawBytes = computed(() => bodyState.value.data.rawBytes);
+const parseFailed = computed(() => bodyState.value.data.parse_failed);
+
+watch(parseFailed, (failed) => {
+  if (failed) viewMode.value = "hex";
+}, { immediate: true });
 </script>
 
 <template>
@@ -35,6 +40,7 @@ const rawBytes = computed(() => bodyState.value.data.rawBytes);
       ServiceControl configuration.
     </div>
     <template v-else-if="rawBytes">
+      <div v-if="parseFailed" class="alert alert-warning">Message body could not be parsed as {{ bodyState.data.content_type }}. Showing hex view.</div>
       <div class="view-mode-toggle">
         <button :class="['toggle-btn', { active: viewMode === 'formatted' }]" @click="viewMode = 'formatted'">Formatted</button>
         <button :class="['toggle-btn', { active: viewMode === 'hex' }]" @click="viewMode = 'hex'">Hex</button>
diff --git a/src/Frontend/src/stores/MessageStore.ts b/src/Frontend/src/stores/MessageStore.ts
index 134c0fa759..446086f3ca 100644
--- a/src/Frontend/src/stores/MessageStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -64,7 +64,7 @@ interface Model {
 
 export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
-  const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean; rawBytes?: Uint8Array }>>({ data: {} });
+  const body = ref<DataContainer<{ value?: string; content_type?: string; no_content?: boolean; rawBytes?: Uint8Array; parse_failed?: boolean }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} } });
   const edit_and_retry_config = ref<EditAndRetryConfig>({ enabled: false, locked_headers: [], sensitive_headers: [] });
   const conversationData = ref<DataContainer<Message[]>>({ data: [] });
@@ -233,11 +233,15 @@ export const useMessageStore = defineStore("MessageStore", () => {
       const charset = contentType?.match(/charset=([^\s;]+)/i)?.[1] ?? "utf-8";
       body.value.data.value = new TextDecoder(charset).decode(arrayBuffer);
 
-      if (contentType === "application/json") {
-        body.value.data.value = stringify(parse(body.value.data.value), null, 2) ?? body.value.data.value;
-      }
-      if (contentType === "text/xml") {
-        body.value.data.value = xmlFormat(body.value.data.value, { indentation: "  ", collapseContent: true });
+      try {
+        if (contentType === "application/json") {
+          body.value.data.value = stringify(parse(body.value.data.value), null, 2) ?? body.value.data.value;
+        }
+        if (contentType === "text/xml") {
+          body.value.data.value = xmlFormat(body.value.data.value, { indentation: "  ", collapseContent: true });
+        }
+      } catch {
+        body.value.data.parse_failed = true;
       }
     } catch {
       body.value.failed_to_load = true;

From 3de42b7dca4b278156b0a48bb49f63d6b161ed26 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 20 Mar 2026 15:50:26 +0100
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=90=9B=20Fix=20hex=20view=20container?=
 =?UTF-8?q?=20collapsing=20to=20zero=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove min-height and flex sizing that caused either excessive
whitespace below small data or zero-height collapse.
---
 src/Frontend/src/components/messages/HexView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Frontend/src/components/messages/HexView.vue b/src/Frontend/src/components/messages/HexView.vue
index 55e616d2dd..0adb115275 100644
--- a/src/Frontend/src/components/messages/HexView.vue
+++ b/src/Frontend/src/components/messages/HexView.vue
@@ -313,8 +313,6 @@ const copyText = computed(() => {
 .hex-scroll-container {
   overflow-y: auto;
   overflow-x: auto;
-  flex: 1 1 0;
-  min-height: 200px;
   max-height: 70vh;
 }
 

From 05091f20d8d11f4f5e587fa376eb12f7ec4d2e82 Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Fri, 20 Mar 2026 16:08:46 +0100
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9A=9C=EF=B8=8F=20Fix=20prettier=20forma?=
 =?UTF-8?q?tting=20in=20BodyView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Frontend/src/components/messages/BodyView.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index 28d49e1660..549d2177ad 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -25,9 +25,13 @@ const body = computed(() => bodyState.value.data.value);
 const rawBytes = computed(() => bodyState.value.data.rawBytes);
 const parseFailed = computed(() => bodyState.value.data.parse_failed);
 
-watch(parseFailed, (failed) => {
-  if (failed) viewMode.value = "hex";
-}, { immediate: true });
+watch(
+  parseFailed,
+  (failed) => {
+    if (failed) viewMode.value = "hex";
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
@@ -70,7 +74,9 @@ watch(parseFailed, (failed) => {
   color: #333;
   font-size: 13px;
   cursor: pointer;
-  transition: background-color 0.15s, border-color 0.15s;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
 }
 
 .toggle-btn:first-child {

From e648383a985ca8f0d9f8c8cd96ebc1dbaf29af0e Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Mon, 23 Mar 2026 15:08:46 +0100
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9A=9C=EF=B8=8F=20Use=20Bootstrap=20butt?=
 =?UTF-8?q?on=20group=20for=20view=20mode=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/messages/BodyView.vue      | 41 ++-----------------
 1 file changed, 4 insertions(+), 37 deletions(-)

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index 549d2177ad..135ae6cf53 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -45,9 +45,9 @@ watch(
     </div>
     <template v-else-if="rawBytes">
       <div v-if="parseFailed" class="alert alert-warning">Message body could not be parsed as {{ bodyState.data.content_type }}. Showing hex view.</div>
-      <div class="view-mode-toggle">
-        <button :class="['toggle-btn', { active: viewMode === 'formatted' }]" @click="viewMode = 'formatted'">Formatted</button>
-        <button :class="['toggle-btn', { active: viewMode === 'hex' }]" @click="viewMode = 'hex'">Hex</button>
+      <div class="btn-group btn-group-sm" role="group" aria-label="View mode">
+        <button type="button" :class="['btn', viewMode === 'formatted' ? 'btn-primary' : 'btn-outline-secondary']" @click="viewMode = 'formatted'">Formatted</button>
+        <button type="button" :class="['btn', viewMode === 'hex' ? 'btn-primary' : 'btn-outline-secondary']" @click="viewMode = 'hex'">Hex</button>
       </div>
       <CodeEditor v-if="viewMode === 'formatted' && body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true" />
       <div v-else-if="viewMode === 'formatted' && !contentType.isSupported" class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
@@ -61,40 +61,7 @@ watch(
   margin-top: 5px;
 }
 
-.view-mode-toggle {
-  display: flex;
-  gap: 0;
+.btn-group {
   margin-bottom: 5px;
 }
-
-.toggle-btn {
-  padding: 4px 14px;
-  border: 1px solid #ccc;
-  background: #f3f3f3;
-  color: #333;
-  font-size: 13px;
-  cursor: pointer;
-  transition:
-    background-color 0.15s,
-    border-color 0.15s;
-}
-
-.toggle-btn:first-child {
-  border-radius: 4px 0 0 4px;
-}
-
-.toggle-btn:last-child {
-  border-radius: 0 4px 4px 0;
-  border-left: none;
-}
-
-.toggle-btn:hover {
-  background: #e6e6e6;
-}
-
-.toggle-btn.active {
-  background: var(--sp-blue, #00a3c4);
-  color: white;
-  border-color: var(--sp-blue, #00a3c4);
-}
 </style>

From 6cef2c276a7ada2c5685a526be877d9f7888a60c Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Mon, 23 Mar 2026 15:09:03 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=E2=9A=9C=EF=B8=8F=20Use=20useResizeObserve?=
 =?UTF-8?q?r=20from=20VueUse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Frontend/src/components/messages/HexView.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Frontend/src/components/messages/HexView.vue b/src/Frontend/src/components/messages/HexView.vue
index 0adb115275..e9470354cd 100644
--- a/src/Frontend/src/components/messages/HexView.vue
+++ b/src/Frontend/src/components/messages/HexView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 
 const props = defineProps<{
@@ -154,7 +155,7 @@ function onDocumentMouseUp() {
   endSelection();
 }
 
-let resizeObserver: ResizeObserver | null = null;
+useResizeObserver(scrollContainer, measureContainer);
 
 onMounted(() => {
   document.addEventListener("mouseup", onDocumentMouseUp);
@@ -171,15 +172,10 @@ onMounted(() => {
   document.body.removeChild(measurer);
 
   measureContainer();
-  if (scrollContainer.value) {
-    resizeObserver = new ResizeObserver(measureContainer);
-    resizeObserver.observe(scrollContainer.value);
-  }
 });
 
 onBeforeUnmount(() => {
   document.removeEventListener("mouseup", onDocumentMouseUp);
-  resizeObserver?.disconnect();
 });
 
 watch(

From 49f1d5d6205e13256891bd0467628a472ac80a9c Mon Sep 17 00:00:00 2001
From: Ramon Smits <ramon.smits@gmail.com>
Date: Mon, 23 Mar 2026 15:10:09 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=E2=9A=9C=EF=B8=8F=20Use=20useMousePressed?=
 =?UTF-8?q?=20from=20VueUse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/messages/HexView.vue       | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/Frontend/src/components/messages/HexView.vue b/src/Frontend/src/components/messages/HexView.vue
index e9470354cd..c5779d74ed 100644
--- a/src/Frontend/src/components/messages/HexView.vue
+++ b/src/Frontend/src/components/messages/HexView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-import { useResizeObserver } from "@vueuse/core";
+import { ref, computed, onMounted, watch } from "vue";
+import { useMousePressed, useResizeObserver } from "@vueuse/core";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 
 const props = defineProps<{
@@ -147,19 +147,15 @@ function extendSelection(byteIndex: number) {
   selectionEnd.value = byteIndex;
 }
 
-function endSelection() {
-  isSelecting.value = false;
-}
+const { pressed: mousePressed } = useMousePressed();
 
-function onDocumentMouseUp() {
-  endSelection();
-}
+watch(mousePressed, (pressed) => {
+  if (!pressed) isSelecting.value = false;
+});
 
 useResizeObserver(scrollContainer, measureContainer);
 
 onMounted(() => {
-  document.addEventListener("mouseup", onDocumentMouseUp);
-
   // Measure monospace char width
   const measurer = document.createElement("span");
   measurer.style.fontFamily = '"Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", "Courier New", monospace';
@@ -174,10 +170,6 @@ onMounted(() => {
   measureContainer();
 });
 
-onBeforeUnmount(() => {
-  document.removeEventListener("mouseup", onDocumentMouseUp);
-});
-
 watch(
   () => props.data,
   () => {