From 02f37c68e27ebb31b361e1675febef164c6eb1fe Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Tue, 1 Apr 2025 10:39:37 +1000
Subject: [PATCH 01/16] Introducing the messageview store

---
 .../src/components/messages/MessageView.vue   |   8 +-
 .../src/composables/useEditAndRetry.ts        |  16 ++
 src/Frontend/src/resources/Message.ts         |   6 -
 src/Frontend/src/stores/MessageViewStore.ts   | 183 ++++++++++++++++++
 4 files changed, 203 insertions(+), 10 deletions(-)
 create mode 100644 src/Frontend/src/composables/useEditAndRetry.ts
 create mode 100644 src/Frontend/src/stores/MessageViewStore.ts

diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index b54f6679d..6a3d8df08 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -310,10 +310,10 @@ onUnmounted(() => {
                 <span v-if="failedMessage.number_of_processing_attempts > 1" :title="'This message has already failed ' + failedMessage.number_of_processing_attempts + ' times'" class="label sidebar-label label-important metadata-label">
                   {{ failedMessage.number_of_processing_attempts - 1 }} Retry Failures
                 </span>
-                <span v-if="failedMessage.edited" v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
-                <span v-if="failedMessage.edited" class="metadata metadata-link">
-                  <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.message.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink>
-                </span>
+                <template v-if="failedMessage.edited">
+                  <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
+                  <span class="metadata metadata-link"> <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.message.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink> </span>
+                </template>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
                 <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ failedMessage.receiving_endpoint.host }}</span>
diff --git a/src/Frontend/src/composables/useEditAndRetry.ts b/src/Frontend/src/composables/useEditAndRetry.ts
new file mode 100644
index 000000000..7192bd5c0
--- /dev/null
+++ b/src/Frontend/src/composables/useEditAndRetry.ts
@@ -0,0 +1,16 @@
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls.ts";
+import { EditAndRetryConfig } from "@/resources/Configuration.ts";
+import { ref } from "vue";
+
+const editAndRetry = ref<EditAndRetryConfig>();
+
+async function populate() {
+  const [, data] = await useTypedFetchFromServiceControl<EditAndRetryConfig>("edit/config");
+
+  editAndRetry.value = data;
+}
+populate();
+
+export default function useEditAndRetry(): EditAndRetryConfig {
+  return editAndRetry.value ?? { enabled: false, locked_headers: [], sensitive_headers: [] };
+}
diff --git a/src/Frontend/src/resources/Message.ts b/src/Frontend/src/resources/Message.ts
index 977497bbb..00fdb3cad 100644
--- a/src/Frontend/src/resources/Message.ts
+++ b/src/Frontend/src/resources/Message.ts
@@ -21,12 +21,6 @@ export default interface Message {
   body_size: number;
   instance_id: string;
 }
-export interface ExtendedMessage extends Message {
-  notFound: boolean;
-  error: boolean;
-  headersNotFound: boolean;
-  messageBodyNotFound: boolean;
-}
 
 export enum MessageStatus {
   Failed = "failed",
diff --git a/src/Frontend/src/stores/MessageViewStore.ts b/src/Frontend/src/stores/MessageViewStore.ts
new file mode 100644
index 000000000..2786ae9fc
--- /dev/null
+++ b/src/Frontend/src/stores/MessageViewStore.ts
@@ -0,0 +1,183 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { reactive, ref } from "vue";
+import Header from "@/resources/Header.ts";
+import type EndpointDetails from "@/resources/EndpointDetails.ts";
+import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage.ts";
+import useEditAndRetry from "@/composables/useEditAndRetry.ts";
+import { useFetchFromServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls.ts";
+import Message from "@/resources/Message.ts";
+import moment from "moment/moment";
+import { useConfiguration } from "@/composables/configuration.ts";
+import { parse, stringify } from "lossless-json";
+import xmlFormat from "xml-formatter";
+
+interface DataContainer<T> {
+  loading?: boolean;
+  failed_to_load?: boolean;
+  not_found?: boolean;
+  data: T;
+}
+
+interface Model {
+  id?: string;
+  message_id?: string;
+  conversation_id?: string;
+  message_type?: string;
+  sending_endpoint?: EndpointDetails;
+  receiving_endpoint?: EndpointDetails;
+  body_url?: string;
+  failure_status: Partial<{
+    retried: boolean;
+    archiving: boolean;
+    restoring: boolean;
+    archived: boolean;
+    resolved: boolean;
+    delete_soon: boolean;
+    retry_in_progress: boolean;
+    delete_in_progress: boolean;
+    restore_in_progress: boolean;
+    submitted_for_retrial: boolean;
+  }>;
+  failure_metadata: Partial<{
+    exception: ExceptionDetails;
+    number_of_processing_attempts: number;
+    status: FailedMessageStatus;
+    time_of_failure: string;
+    last_modified: string;
+    edited: boolean;
+    edit_of: string;
+    deleted_in: string;
+    redirect: boolean;
+  }>;
+  dialog_status: Partial<{
+    show_delete_confirm: boolean;
+    show_restore_confirm: boolean;
+    show_retry_confirm: boolean;
+    show_edit_retry_modal: boolean;
+  }>;
+}
+
+export const useMessageViewStore = defineStore("MessageViewStore", () => {
+  const headers = ref<DataContainer<Header[]>>({ data: [] });
+  const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ data: {} });
+  const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {} } });
+
+  async function loadFailedMessage(id: string) {
+    state.loading = true;
+    state.failed_to_load = false;
+    state.not_found = false;
+
+    try {
+      const response = await useFetchFromServiceControl(`errors/last/${id}`);
+      if (response.status === 404) {
+        state.not_found = true;
+        return;
+      } else if (!response.ok) {
+        state.failed_to_load = true;
+        return;
+      }
+
+      const message = (await response.json()) as FailedMessage;
+      state.data.failure_status.archived = message.status === FailedMessageStatus.Archived;
+      state.data.failure_status.resolved = message.status === FailedMessageStatus.Resolved;
+      state.data.failure_status.retried = message.status === FailedMessageStatus.RetryIssued;
+      state.data.failure_metadata.last_modified = message.last_modified;
+    } catch {
+      state.failed_to_load = headers.value.failed_to_load = true;
+      return;
+    } finally {
+      state.loading = headers.value.loading = false;
+    }
+
+    const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
+    state.data.failure_status.delete_soon = countdown < moment();
+    state.data.failure_metadata.deleted_in = countdown.format();
+
+    // TODO: Maintain the mutations of the message in memory until the api returns a newer modified message
+  }
+
+  async function loadMessage(messageId: string, receivingEndpointName: string) {
+    state.loading = headers.value.loading = true;
+    state.failed_to_load = headers.value.failed_to_load = false;
+    state.not_found = headers.value.not_found = false;
+
+    try {
+      const [, data] = await useTypedFetchFromServiceControl<Message[]>(`messages/search/${messageId}`);
+
+      const message = data.find((value) => value.receiving_endpoint.name === receivingEndpointName);
+
+      if (!message) {
+        state.not_found = headers.value.not_found = true;
+        return;
+      }
+
+      state.data.message_id = message.message_id;
+      state.data.conversation_id = message.conversation_id;
+      state.data.body_url = message.body_url;
+      state.data.message_type = message.message_type;
+      state.data.sending_endpoint = message.sending_endpoint;
+      state.data.receiving_endpoint = message.receiving_endpoint;
+
+      headers.value.data = message.headers;
+    } catch {
+      state.failed_to_load = headers.value.failed_to_load = true;
+    } finally {
+      state.loading = headers.value.loading = false;
+    }
+  }
+
+  async function downloadBody() {
+    if (body.value.not_found) {
+      return;
+    }
+
+    body.value.loading = true;
+    body.value.failed_to_load = false;
+
+    try {
+      if (!state.data.body_url) {
+        return;
+      }
+      const response = await useFetchFromServiceControl(state.data.body_url.substring(1));
+      if (response.status === 404) {
+        body.value.not_found = true;
+
+        return;
+      }
+
+      const contentType = response.headers.get("content-type");
+      body.value.data.content_type = contentType ?? "text/plain";
+      body.value.data.value = await response.text();
+
+      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.failed_to_load = true;
+    } finally {
+      body.value.loading = false;
+    }
+  }
+
+  const configuration = useConfiguration();
+  const error_retention_period = moment.duration(configuration.value?.data_retention.error_retention_period).asHours();
+
+  return {
+    headers,
+    body,
+    state,
+    edit_and_retry_config: useEditAndRetry(),
+    loadMessage,
+    loadFailedMessage,
+    downloadBody,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useMessageViewStore, import.meta.hot));
+}
+
+export type MessageViewStore = ReturnType<typeof useMessageViewStore>;

From 14111b2d6ac273568d40eb5d82d3cbd725a577ad Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Tue, 1 Apr 2025 15:15:37 +1000
Subject: [PATCH 02/16] Modifying view to use store More changes

---
 src/Frontend/public/js/app.constants.js       |   1 +
 .../src/components/CopyToClipboard.vue        |  10 +-
 src/Frontend/src/components/EventLogItem.vue  |   5 +-
 .../src/components/LoadingSpinner.vue         |   9 +
 .../src/components/audit/AuditList.vue        |  10 +-
 .../failedmessages/EditRetryDialog.vue        |   8 +-
 .../failedmessages/EditRetryDialog2.vue       | 345 ++++++++++++++++++
 .../components/failedmessages/MessageList.vue |   5 +-
 .../src/components/messages/BodyView.vue      |  28 +-
 .../messages/DeleteMessageButton.vue          |  37 ++
 .../messages/EditAndRetryButton.vue           |  31 ++
 .../messages/ExportMessageButton.vue          |  34 ++
 .../src/components/messages/FlowDiagram.vue   |  56 +--
 .../src/components/messages/HeadersView.vue   |  18 +-
 .../src/components/messages/MessageView.vue   |   2 +-
 .../src/components/messages/MessageView2.vue  | 186 ++++++++++
 .../messages/RestoreMessageButton.vue         |  35 ++
 .../messages/RetryMessageButton.vue           |  32 ++
 .../components/messages/StacktraceView.vue    |  11 +-
 src/Frontend/src/composables/toast.ts         |   5 +
 .../src/composables/useEditAndRetry.ts        |   8 +-
 src/Frontend/src/router/config.ts             |  11 +-
 src/Frontend/src/router/routeLinks.ts         |   3 +-
 src/Frontend/src/stores/MessageViewStore.ts   | 127 ++++++-
 24 files changed, 928 insertions(+), 89 deletions(-)
 create mode 100644 src/Frontend/src/components/LoadingSpinner.vue
 create mode 100644 src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
 create mode 100644 src/Frontend/src/components/messages/DeleteMessageButton.vue
 create mode 100644 src/Frontend/src/components/messages/EditAndRetryButton.vue
 create mode 100644 src/Frontend/src/components/messages/ExportMessageButton.vue
 create mode 100644 src/Frontend/src/components/messages/MessageView2.vue
 create mode 100644 src/Frontend/src/components/messages/RestoreMessageButton.vue
 create mode 100644 src/Frontend/src/components/messages/RetryMessageButton.vue

diff --git a/src/Frontend/public/js/app.constants.js b/src/Frontend/public/js/app.constants.js
index d138f9910..ca0fe5457 100644
--- a/src/Frontend/public/js/app.constants.js
+++ b/src/Frontend/public/js/app.constants.js
@@ -4,4 +4,5 @@ window.defaultConfig = {
   service_control_url: 'http://localhost:33333/api/',
   monitoring_urls: ['http://localhost:33633/'],
   showPendingRetry: false,
+  showAllMessages: true,
 };
diff --git a/src/Frontend/src/components/CopyToClipboard.vue b/src/Frontend/src/components/CopyToClipboard.vue
index 4ec0c1323..3f43a1a63 100644
--- a/src/Frontend/src/components/CopyToClipboard.vue
+++ b/src/Frontend/src/components/CopyToClipboard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tippy, TippyComponent } from "vue-tippy";
-import { useTemplateRef } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,14 +11,16 @@ const props = withDefaults(
 );
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
-let timeoutId: number;
+const timeoutId = ref(0);
 
 async function copyToClipboard() {
   await navigator.clipboard.writeText(props.value);
-  window.clearTimeout(timeoutId);
+
   tippyRef.value?.show();
-  timeoutId = window.setTimeout(() => tippyRef.value?.hide(), 3000);
+  timeoutId.value = window.setTimeout(() => tippyRef.value?.hide(), 3000);
 }
+
+watch(timeoutId, (_, previousTimeoutId) => window.clearTimeout(previousTimeoutId));
 </script>
 
 <template>
diff --git a/src/Frontend/src/components/EventLogItem.vue b/src/Frontend/src/components/EventLogItem.vue
index 9c84449f2..574b879bd 100644
--- a/src/Frontend/src/components/EventLogItem.vue
+++ b/src/Frontend/src/components/EventLogItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../components/TimeSince.vue";
 import type EventLogItem from "@/resources/EventLogItem";
 // eslint-disable-next-line no-duplicate-imports
@@ -8,7 +8,6 @@ import routeLinks from "@/router/routeLinks";
 
 defineProps<{ eventLogItem: EventLogItem }>();
 const router = useRouter();
-const route = useRoute();
 
 function navigateToEvent(eventLogItem: EventLogItem) {
   switch (eventLogItem.category) {
@@ -27,7 +26,7 @@ function navigateToEvent(eventLogItem: EventLogItem) {
     case "MessageFailures":
       if (eventLogItem.related_to?.length && eventLogItem.related_to[0].search("message") > 0) {
         const messageId = eventLogItem.related_to[0].substring(9);
-        router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+        router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
       } else {
         router.push(routeLinks.failedMessage.root);
       }
diff --git a/src/Frontend/src/components/LoadingSpinner.vue b/src/Frontend/src/components/LoadingSpinner.vue
new file mode 100644
index 000000000..38d1b9ebb
--- /dev/null
+++ b/src/Frontend/src/components/LoadingSpinner.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+</template>
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index f0aaf3d1f..295dcfd24 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -101,7 +101,15 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.message.link(message.id), query: { back: route.path } }">
+              <RouterLink
+                v-if="message.status === MessageStatus.Successful"
+                class="hackToPreventSafariFromShowingTooltip"
+                aria-label="details-link"
+                :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id), query: { back: route.path } }"
+              >
+                {{ message.message_id }}
+              </RouterLink>
+              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">
                 {{ message.message_id }}
               </RouterLink>
             </tippy>
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
index 90d14ce83..e8c2beaed 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "../../composables/serviceFailedMessage";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage.ts";
 import MessageHeader from "./EditMessageHeader.vue";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
@@ -65,11 +65,7 @@ watch(messageBody, (newValue) => {
   if (newValue !== origMessageBody) {
     localMessage.value.isBodyChanged = true;
   }
-  if (newValue === "") {
-    localMessage.value.isBodyEmpty = true;
-  } else {
-    localMessage.value.isBodyEmpty = false;
-  }
+  localMessage.value.isBodyEmpty = newValue === "";
 });
 
 function close() {
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
new file mode 100644
index 000000000..31881f7aa
--- /dev/null
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage.ts";
+import MessageHeader from "./EditMessageHeader.vue";
+import type Header from "@/resources/Header";
+import parseContentType from "@/composables/contentTypeParser";
+import { CodeLanguage } from "@/components/codeEditorTypes";
+import CodeEditor from "@/components/CodeEditor.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+
+interface HeaderWithEditing extends Header {
+  isLocked: boolean;
+  isSensitive: boolean;
+  isMarkedAsRemoved: boolean;
+  isChanged: boolean;
+}
+
+const emit = defineEmits<{
+  cancel: [];
+  confirm: [];
+}>();
+
+interface LocalMessageState {
+  isBodyChanged: boolean;
+  isBodyEmpty: boolean;
+  isContentTypeSupported: boolean;
+  language?: CodeLanguage;
+  bodyContentType: string | undefined;
+  bodyUnavailable: boolean;
+  isEvent: boolean;
+  retried: boolean;
+  headers: HeaderWithEditing[];
+  messageBody: string;
+}
+
+const panel = ref(0);
+const localMessage = ref<LocalMessageState>({
+  isBodyChanged: false,
+  isBodyEmpty: false,
+  isContentTypeSupported: false,
+  bodyContentType: undefined,
+  bodyUnavailable: true,
+  isEvent: false,
+  retried: false,
+  headers: [],
+  messageBody: "",
+});
+let origMessageBody: string;
+
+const showEditAndRetryConfirmation = ref(false);
+const showCancelConfirmation = ref(false);
+const showEditRetryGenericError = ref(false);
+const store = useMessageViewStore();
+const id = computed(() => store.state.data.id ?? "");
+const messageBody = computed(() => store.body.data.value);
+
+watch(messageBody, (newValue) => {
+  if (newValue !== origMessageBody) {
+    localMessage.value.isBodyChanged = true;
+  }
+  localMessage.value.isBodyEmpty = newValue === "";
+});
+
+function close() {
+  emit("cancel");
+}
+
+function confirmEditAndRetry() {
+  showEditAndRetryConfirmation.value = true;
+}
+
+function confirmCancel() {
+  if (localMessage.value.isBodyChanged) {
+    showCancelConfirmation.value = true;
+    return;
+  }
+
+  if (localMessage.value.headers.some((header: HeaderWithEditing) => header.isChanged)) {
+    showCancelConfirmation.value = true;
+    return;
+  }
+
+  close();
+}
+
+function resetBodyChanges() {
+  localMessage.value.messageBody = origMessageBody;
+  localMessage.value.isBodyChanged = false;
+}
+
+function findHeadersByKey(key: string) {
+  return localMessage.value.headers.find((header: HeaderWithEditing) => header.key === key);
+}
+
+function getContentType() {
+  const header = findHeadersByKey("NServiceBus.ContentType");
+  return header?.value;
+}
+
+function getMessageIntent() {
+  const intent = findHeadersByKey("NServiceBus.MessageIntent");
+  return intent?.value;
+}
+
+function removeHeadersMarkedAsRemoved() {
+  localMessage.value.headers = localMessage.value.headers.filter((header: HeaderWithEditing) => !header.isMarkedAsRemoved);
+}
+
+async function retryEditedMessage() {
+  removeHeadersMarkedAsRemoved();
+  try {
+    await useRetryEditedMessage(id.value, localMessage);
+    localMessage.value.retried = true;
+    return emit("confirm");
+  } catch {
+    showEditAndRetryConfirmation.value = false;
+    showEditRetryGenericError.value = true;
+  }
+}
+
+function initializeMessageBodyAndHeaders() {
+  origMessageBody = store.body.data.value ?? "";
+  localMessage.value = {
+    isBodyChanged: false,
+    isBodyEmpty: false,
+    isContentTypeSupported: false,
+    bodyContentType: undefined,
+    bodyUnavailable: store.body.not_found ?? false,
+    isEvent: false,
+    retried: store.state.data.failure_status.retried ?? false,
+    headers: store.headers.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
+    messageBody: store.body.data.value ?? "",
+  };
+  localMessage.value.isBodyEmpty = false;
+  localMessage.value.isBodyChanged = false;
+
+  const contentType = getContentType();
+  localMessage.value.bodyContentType = contentType;
+  const parsedContentType = parseContentType(contentType);
+  localMessage.value.isContentTypeSupported = parsedContentType.isSupported;
+  localMessage.value.language = parsedContentType.language;
+
+  const messageIntent = getMessageIntent();
+  localMessage.value.isEvent = messageIntent === "Publish";
+
+  for (let index = 0; index < store.headers.data.length; index++) {
+    const header: HeaderWithEditing = store.headers.data[index] as HeaderWithEditing;
+
+    header.isLocked = false;
+    header.isSensitive = false;
+    header.isMarkedAsRemoved = false;
+    header.isChanged = false;
+
+    if (store.edit_and_retry_config.locked_headers.includes(header.key)) {
+      header.isLocked = true;
+    } else if (store.edit_and_retry_config.sensitive_headers.includes(header.key)) {
+      header.isSensitive = true;
+    }
+
+    localMessage.value.headers[index] = header;
+  }
+}
+
+function togglePanel(panelNum: number) {
+  panel.value = panelNum;
+  return false;
+}
+
+onMounted(() => {
+  togglePanel(1);
+  initializeMessageBodyAndHeaders();
+});
+</script>
+
+<template>
+  <section name="failed_message_editor">
+    <div class="model modal-msg-editor" style="z-index: 1050; display: block" role="dialog" aria-label="edit and retry message">
+      <div class="modal-mask">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <div class="modal-title">
+                <h3>Edit and retry message</h3>
+              </div>
+            </div>
+            <div class="modal-body">
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="row msg-editor-tabs">
+                    <div class="col-sm-12 no-side-padding">
+                      <div role="tablist" class="tabs msg-tabs">
+                        <h5 role="tab" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Headers</a></h5>
+                        <h5 role="tab" :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row msg-editor-content">
+                    <div class="col-sm-12 no-side-padding">
+                      <div class="alert alert-warning" v-if="localMessage.isEvent">
+                        <div class="col-sm-12">
+                          <i class="fa fa-exclamation-circle"></i> This message is an event. If it was already successfully handled by other subscribers, editing it now has the risk of changing the semantic meaning of the event and may result in
+                          altering the system behavior.
+                        </div>
+                      </div>
+                      <div class="alert alert-warning" v-if="!localMessage.isContentTypeSupported || localMessage.bodyUnavailable">
+                        <div role="status" aria-label="cannot edit message body" class="col-sm-12">
+                          <i class="fa fa-exclamation-circle"></i> Message body cannot be edited because content type "{{ localMessage.bodyContentType }}" is not supported. Only messages with content types "application/json" and "text/xml" can be
+                          edited.
+                        </div>
+                      </div>
+                      <div class="row alert alert-danger" v-if="showEditRetryGenericError">
+                        <div class="col-sm-12"><i class="fa fa-exclamation-triangle"></i> An error occurred while retrying the message, please check the ServiceControl logs for more details on the failure.</div>
+                      </div>
+                      <table role="tabpanel" class="table" v-if="panel === 1">
+                        <tbody>
+                          <tr class="interactiveList" v-for="header in localMessage.headers" :key="header.key">
+                            <MessageHeader :header="header"></MessageHeader>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
+                        <div style="margin-top: 1.25rem">
+                          <CodeEditor aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                        </div>
+                        <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
+                        <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>
+                        <div class="alert alert-info" v-if="panel === 2 && localMessage.bodyUnavailable">{{ localMessage.bodyUnavailable }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer" v-if="!showEditAndRetryConfirmation && !showCancelConfirmation">
+              <button class="btn btn-default" @click="confirmCancel()">Cancel</button>
+              <button class="btn btn-primary" :disabled="localMessage.isBodyEmpty || localMessage.bodyUnavailable" @click="confirmEditAndRetry()">Retry</button>
+            </div>
+            <div class="modal-footer cancel-confirmation" v-if="showCancelConfirmation">
+              <div>Are you sure you want to cancel? Any changes you made will be lost.</div>
+              <button class="btn btn-default" @click="close()">Yes</button>
+              <button class="btn btn-primary" @click="showCancelConfirmation = false">No</button>
+            </div>
+            <div class="modal-footer edit-retry-confirmation" v-if="showEditAndRetryConfirmation">
+              <div>Are you sure you want to continue? If you edited the message, it may cause unexpected consequences in the system.</div>
+              <button class="btn btn-default" @click="retryEditedMessage()">Yes</button>
+              <button class="btn btn-primary" @click="showEditAndRetryConfirmation = false">No</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+@import "@/components/modal.css";
+
+.cancel-confirmation,
+.edit-retry-confirmation {
+  background: #181919;
+  color: #fff;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+.cancel-confirmation div,
+.edit-retry-confirmation div {
+  display: inline-block;
+  font-weight: bold;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  margin-right: 20px;
+}
+
+.modal-msg-editor .reset-body {
+  color: #00a3c4;
+  font-weight: bold;
+  text-align: left;
+  margin-top: 15px;
+  display: inline-block;
+}
+
+.modal-msg-editor .reset-body a:hover {
+  cursor: pointer;
+}
+
+.modal-msg-editor .reset-body i.fa.fa-undo {
+  color: #00a3c4;
+}
+
+.modal-msg-editor .empty-error {
+  float: right;
+  margin-top: 15px;
+  color: #ce4844;
+  font-weight: bold;
+}
+
+.modal-msg-editor .empty-error i.fa.fa-exclamation-triangle {
+  color: #ce4844;
+}
+
+.modal-msg-editor .row.alert.alert-danger i.fa.fa-exclamation-triangle {
+  color: #ce4844;
+}
+
+.modal-msg-editor .row.alert.alert-warning i.fa.fa-exclamation-circle {
+  color: #8a6d3b;
+}
+
+.modal-msg-editor .modal-dialog {
+  width: 70%;
+}
+
+.modal-msg-editor .modal-body {
+  overflow-y: auto;
+  height: 80vh;
+}
+
+.modal-msg-editor .msg-tabs {
+  margin-top: 20px;
+}
+
+.modal-msg-editor .row.msg-editor-tabs {
+  height: 52px;
+  position: relative;
+  box-shadow: -10px 20px 20px #fff;
+  z-index: 10;
+}
+
+.modal-msg-editor .row.msg-editor-content table {
+  margin-top: 20px;
+}
+
+.modal-msg-editor .row,
+.modal-msg-editor .col-sm-12 {
+  height: 100%;
+}
+
+.modal-msg-editor .row.msg-editor-content {
+  height: calc(100% - 37px);
+  overflow-y: auto;
+  padding-right: 15px;
+}
+</style>
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.vue
index 932e99274..d01bc4a50 100644
--- a/src/Frontend/src/components/failedmessages/MessageList.vue
+++ b/src/Frontend/src/components/failedmessages/MessageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
@@ -17,7 +17,6 @@ export interface IMessageList {
 
 let lastLabelClickedIndex: number | undefined;
 const router = useRouter();
-const route = useRoute();
 const emit = defineEmits(["retryRequested"]);
 const props = withDefaults(
   defineProps<{
@@ -78,7 +77,7 @@ function labelClicked($event: MouseEvent, index: number) {
 }
 
 function navigateToMessage(messageId: string) {
-  router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+  router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
 }
 
 defineExpose<IMessageList>({
diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index d4b90a8ca..3956df268 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -1,20 +1,28 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-const props = defineProps<{
-  message: ExtendedFailedMessage;
-}>();
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
-const contentType = computed(() => parseContentType(props.message.contentType));
+const store = useMessageViewStore();
+watch(
+  () => store.state.data.body_url,
+  async () => {
+    await store.downloadBody();
+  },
+  { immediate: true }
+);
+const contentType = computed(() => parseContentType(store.body.data.content_type));
+const body = computed(() => store.body.data.value);
 </script>
 
 <template>
-  <div v-if="props.message.messageBodyNotFound" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-  <div v-else-if="props.message.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
-  <CodeEditor v-else-if="contentType.isSupported" :model-value="props.message.messageBody" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ props.message.contentType }}" is not supported.</div>
+  <div v-if="store.body.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="store.body.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+  <LoadingSpinner v-else-if="store.body.loading" />
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ store.body.data.content_type }}" is not supported.</div>
 </template>
 
 <style scoped></style>
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
new file mode 100644
index 000000000..59e11607f
--- /dev/null
+++ b/src/Frontend/src/components/messages/DeleteMessageButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { computed, ref } from "vue";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+import { MessageStatus } from "@/resources/Message.ts";
+
+const store = useMessageViewStore();
+const isConfirmDialogVisible = ref(false);
+
+const failureStatus = computed(() => store.state.data.failure_status);
+const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.resolved);
+const isVisible = computed(() => !failureStatus.value.archived && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+
+const handleConfirm = async () => {
+  isConfirmDialogVisible.value = false;
+
+  const message = `Deleting the message ${store.state.data.id} ...`;
+  await showToastAfterOperation(store.archiveMessage, TYPE.INFO, "Info", message);
+  store.state.data.failure_status.archiving = true;
+};
+</script>
+
+<template>
+  <template v-if="isVisible">
+    <button type="button" class="btn btn-default" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-trash"></i> Delete message</button>
+    <Teleport to="#modalDisplay">
+      <ConfirmDialog
+        v-if="isConfirmDialogVisible"
+        @cancel="isConfirmDialogVisible = false"
+        @confirm="handleConfirm"
+        heading="Are you sure you want to delete this message?"
+        body="If you delete, this message won't be available for retrying unless it is later restored."
+      /> </Teleport
+  ></template>
+</template>
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
new file mode 100644
index 000000000..a58043ea0
--- /dev/null
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { computed, ref } from "vue";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
+import { MessageStatus } from "@/resources/Message.ts";
+
+const store = useMessageViewStore();
+const isConfirmDialogVisible = ref(false);
+
+const failureStatus = computed(() => store.state.data.failure_status);
+const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
+const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+const handleConfirm = async () => {
+  isConfirmDialogVisible.value = false;
+
+  const message = `Retrying the edited message ${store.state.data.id} ...`;
+  await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
+  store.state.data.failure_status.retried = true;
+};
+</script>
+
+<template>
+  <template v-if="isVisible">
+    <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-pencil"></i> Edit & retry</button>
+    <Teleport to="#modalDisplay">
+      <EditRetryDialog2 v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
+    </Teleport>
+  </template>
+</template>
diff --git a/src/Frontend/src/components/messages/ExportMessageButton.vue b/src/Frontend/src/components/messages/ExportMessageButton.vue
new file mode 100644
index 000000000..ea50b016d
--- /dev/null
+++ b/src/Frontend/src/components/messages/ExportMessageButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useDownloadFileFromString } from "@/composables/fileDownloadCreator.ts";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+import { ref } from "vue";
+
+const store = useMessageViewStore();
+const executing = ref(false);
+
+async function exportMessage() {
+  executing.value = true;
+  await showToastAfterOperation(
+    async () => {
+      const exportedString = await store.exportMessage();
+      useDownloadFileFromString(exportedString, "text/txt", "failedMessage.txt");
+    },
+    TYPE.INFO,
+    "Info",
+    "Message export completed."
+  );
+  executing.value = false;
+}
+</script>
+
+<template>
+  <button v-if="!executing" type="button" class="btn btn-default" @click="exportMessage"><i class="fa fa-download"></i> Export message</button>
+  <button v-else type="button" class="btn btn-default" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span role="status"> Exporting message</span>
+  </button>
+</template>
+
+<style scoped></style>
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index ad0faffee..1a7ceb6bf 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import { type DefaultEdge, MarkerType, VueFlow, type Styles, type Node } from "@vue-flow/core";
 import TimeSince from "../TimeSince.vue";
 import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
-import { useRoute } from "vue-router";
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import { Controls } from "@vue-flow/controls";
-
-const props = defineProps<{
-  message: ExtendedFailedMessage;
-}>();
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 enum MessageType {
   Event = "Event message",
@@ -44,11 +39,12 @@ interface MappedMessage {
 const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
-const route = useRoute();
+const store = useMessageViewStore();
 
 async function getConversation(conversationId: string) {
-  const [, data] = await useTypedFetchFromServiceControl<Message[]>(`conversations/${conversationId}`);
-  return data;
+  await store.loadConversation(conversationId);
+
+  return store.conversationData.data;
 }
 
 function mapMessage(message: Message): MappedMessage {
@@ -161,9 +157,9 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
 const elements = ref<(Node | DefaultEdge)[]>([]);
 
 onMounted(async () => {
-  if (!props.message.conversationId) return;
+  if (!store.state.data.conversation_id) return;
 
-  const messages = await getConversation(props.message.conversationId);
+  const messages = await getConversation(store.state.data.conversation_id);
   const mappedMessages = messages.map(mapMessage);
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
@@ -193,26 +189,28 @@ function typeIcon(type: MessageType) {
 </script>
 
 <template>
-  <div id="tree-container">
+  <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
+  <LoadingSpinner v-else-if="store.conversationData.loading" />
+  <div v-else id="tree-container">
     <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
       <Controls />
-      <template #node-message="nodeProps">
-        <div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
+      <template #node-message="{ data }: { data: MappedMessage }">
+        <div class="node" :class="{ error: data.isError, 'current-message': data.id === store.state.data.id }">
           <div class="node-text wordwrap">
-            <i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
-            <i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />
-            <div class="lead righ-side-ellipsis" :title="nodeProps.data.nodeName">
+            <i v-if="data.isError" class="fa pa-flow-failed" />
+            <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
+            <div class="lead right-side-ellipsis" :title="data.nodeName">
               <strong>
-                <RouterLink v-if="nodeProps.data.isError" :to="{ path: routeLinks.messages.message.link(nodeProps.data.id), query: { back: route.path } }">{{ nodeProps.data.nodeName }}</RouterLink>
-                <span v-else>{{ nodeProps.data.nodeName }}</span>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
               </strong>
             </div>
             <span class="time-sent">
-              <time-since class="time-since" :date-utc="nodeProps.data.timeSent" />
+              <time-since class="time-since" :date-utc="data.timeSent" />
             </span>
-            <template v-if="nodeProps.data.sagaName">
+            <template v-if="data.sagaName">
               <i class="fa pa-flow-saga" />
-              <div class="saga lead righ-side-ellipsis" :title="nodeProps.data.sagaName">{{ nodeProps.data.sagaName }}</div>
+              <div class="saga lead right-side-ellipsis" :title="data.sagaName">{{ data.sagaName }}</div>
             </template>
           </div>
         </div>
@@ -243,14 +241,13 @@ function typeIcon(type: MessageType) {
   padding: 10px;
   border-radius: 3px;
   font-size: 12px;
-  text-align: center;
   border-width: 1px;
   border-style: solid;
   color: var(--vf-node-text);
   text-align: left;
 }
 
-.righ-side-ellipsis {
+.right-side-ellipsis {
   direction: rtl;
   text-align: left;
 }
@@ -306,6 +303,11 @@ function typeIcon(type: MessageType) {
   width: 182px;
 }
 
+.current-message {
+  border-color: #cccbcc;
+  background-color: #cccbcc !important;
+}
+
 .current-message.error {
   border-color: #be514a;
   background-color: #be514a !important;
@@ -346,6 +348,10 @@ function typeIcon(type: MessageType) {
   text-decoration: none;
 }
 
+.node-text a {
+  color: #000;
+}
+
 .error .node-text a {
   color: #be514a;
 }
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index aed43e024..4fc33a580 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/src/Frontend/src/components/messages/HeadersView.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-const props = defineProps<{
-  message: ExtendedFailedMessage;
-}>();
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+
+const store = useMessageViewStore();
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
@@ -14,9 +13,9 @@ const toggleHover = (index: number, state: boolean) => {
 // Computed property to filter headers based on search term
 const filteredHeaders = computed(() => {
   if (!searchTerm.value) {
-    return props.message.headers;
+    return store.headers.data;
   }
-  return props.message.headers.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
+  return store.headers.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
 });
 </script>
 
@@ -32,7 +31,7 @@ const filteredHeaders = computed(() => {
       </div>
     </div>
   </div>
-  <table class="table" v-if="filteredHeaders.length > 0 && !props.message.headersNotFound">
+  <table class="table" v-if="filteredHeaders.length > 0 && !store.headers.not_found">
     <tbody>
       <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
@@ -47,14 +46,13 @@ const filteredHeaders = computed(() => {
   </table>
 
   <!-- Message if filtered list is empty -->
-  <div v-if="filteredHeaders.length <= 0 && !props.message.headersNotFound" class="alert alert-warning">No headers found matching the search term.</div>
-  <div v-if="props.message.headersNotFound" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-if="filteredHeaders.length <= 0 && !store.headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
+  <div v-if="store.headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
 <style scoped>
 .headercopy {
   display: flex;
-  align-items: top;
   gap: 0.4rem;
 }
 
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index 6a3d8df08..70039df68 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -312,7 +312,7 @@ onUnmounted(() => {
                 </span>
                 <template v-if="failedMessage.edited">
                   <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
-                  <span class="metadata metadata-link"> <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.message.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink> </span>
+                  <span class="metadata metadata-link"> <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of) }">View previous version</RouterLink> </span>
                 </template>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
                 <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
new file mode 100644
index 000000000..10abaff3d
--- /dev/null
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+import NoData from "../NoData.vue";
+import TimeSince from "../TimeSince.vue";
+import FlowDiagram from "./FlowDiagram.vue";
+import routeLinks from "@/router/routeLinks";
+import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
+import BodyView from "@/components/messages/BodyView.vue";
+import HeadersView from "@/components/messages/HeadersView.vue";
+import StackTraceView from "@/components/messages/StacktraceView.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import DeleteMessageButton from "@/components/messages/DeleteMessageButton.vue";
+import RestoreMessageButton from "@/components/messages/RestoreMessageButton.vue";
+import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
+import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
+import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
+
+const panel = ref<number>(1);
+const route = useRoute();
+const id = computed(() => route.params.id as string);
+const messageId = computed(() => route.params.messageId as string);
+const isError = computed(() => messageId.value === undefined);
+
+const isMassTransitConnected = useIsMassTransitConnected();
+const store = useMessageViewStore();
+const { state } = storeToRefs(store);
+
+function togglePanel(panelNum: number) {
+  panel.value = panelNum;
+}
+
+watch(
+  [id, messageId],
+  async ([newId, newMessageId], [oldId, oldMessageId]) => {
+    if (newId !== oldId || newMessageId !== oldMessageId) {
+      store.reset();
+    }
+
+    if (newMessageId !== undefined) {
+      await store.loadMessage(newMessageId, newId);
+    } else {
+      await store.loadFailedMessage(newId);
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  togglePanel(isError.value ? 1 : 2);
+});
+</script>
+
+<template>
+  <div class="container">
+    <section>
+      <no-data v-if="state.not_found" title="message failures" message="Could not find message. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl."></no-data>
+      <no-data v-else-if="state.failed_to_load" title="message failures" message="An error occurred while trying to load the message. Please check the ServiceControl logs to learn what the issue is."></no-data>
+      <template v-else>
+        <LoadingSpinner v-if="state.loading ?? false" />
+        <template v-else>
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="active break group-title">
+                <h1 class="message-type-title">{{ state.data.message_type }}</h1>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="metadata group-message-count message-metadata">
+                <span v-if="state.data.failure_status.retried" v-tippy="`Message is being retried`" class="label sidebar-label label-info metadata-label">Retried</span>
+                <span v-if="state.data.failure_status.restoring" v-tippy="`Message is being retried`" class="label sidebar-label label-info metadata-label">Restoring...</span>
+                <span v-if="state.data.failure_status.archiving" v-tippy="`Message is being deleted`" class="label sidebar-label label-info metadata-label">Deleting...</span>
+                <span v-if="state.data.failure_status.archived" v-tippy="`Message is deleted`" class="label sidebar-label label-warning metadata-label">Deleted</span>
+                <span v-if="state.data.failure_status.resolved" v-tippy="`Message was processed successfully`" class="label sidebar-label label-warning metadata-label">Processed</span>
+                <span
+                  v-if="state.data.failure_metadata.number_of_processing_attempts && state.data.failure_metadata.number_of_processing_attempts > 1"
+                  :v-tippy="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
+                  class="label sidebar-label label-important metadata-label"
+                >
+                  {{ state.data.failure_metadata.number_of_processing_attempts - 1 }} Retry Failures
+                </span>
+                <template v-if="state.data.failure_metadata.edited">
+                  <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
+                  <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
+                    <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of) }">View previous version</RouterLink>
+                  </span>
+                </template>
+                <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
+                <span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
+                <template v-if="state.data.receiving_endpoint">
+                  <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
+                  <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
+                </template>
+                <span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
+                <template v-if="state.data.failure_status.archived">
+                  <span class="metadata"><i class="fa fa-clock-o"></i> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
+                  <span class="metadata danger" v-if="state.data.failure_status.delete_soon"><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: immediately</span>
+                  <span class="metadata danger" v-else><i class="fa fa-trash-o danger"></i> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="btn-toolbar message-toolbar">
+                <DeleteMessageButton />
+                <RestoreMessageButton />
+                <RetryMessageButton />
+                <EditAndRetryButton />
+                <ExportMessageButton />
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 no-side-padding">
+              <div class="nav tabs msg-tabs">
+                <h5 v-if="isError" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
+                <h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
+                <h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
+                <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
+              </div>
+              <StackTraceView v-if="isError && panel === 1" />
+              <BodyView v-if="panel === 2" />
+              <HeadersView v-if="panel === 3" />
+              <FlowDiagram v-if="panel === 4" />
+            </div>
+          </div>
+        </template>
+      </template>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+@import "../list.css";
+
+h1.message-type-title {
+  margin: 0 0 8px;
+  font-size: 24px;
+}
+
+.message-metadata {
+  display: inline;
+}
+
+div.btn-toolbar.message-toolbar {
+  margin-bottom: 20px;
+}
+
+button img {
+  position: relative;
+  top: -1px;
+  width: 17px;
+}
+
+.msg-tabs {
+  margin-bottom: 20px;
+}
+
+.pa-redirect-source {
+  background-image: url("@/assets/redirect-source.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.pa-redirect-small {
+  position: relative;
+  top: 1px;
+  height: 14px;
+  width: 14px;
+}
+
+.pa-endpoint {
+  position: relative;
+  top: 3px;
+  background-image: url("@/assets/endpoint.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+</style>
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
new file mode 100644
index 000000000..d81b33afd
--- /dev/null
+++ b/src/Frontend/src/components/messages/RestoreMessageButton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { computed, ref } from "vue";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+
+const store = useMessageViewStore();
+const isConfirmDialogVisible = ref(false);
+
+const failureStatus = computed(() => store.state.data.failure_status);
+
+const handleConfirm = async () => {
+  isConfirmDialogVisible.value = false;
+
+  const message = `Restoring the message ${store.state.data.id} ...`;
+  await showToastAfterOperation(store.restoreMessage, TYPE.INFO, "Info", message);
+  store.state.data.failure_status.restoring = true;
+};
+</script>
+
+<template>
+  <template v-if="failureStatus.archived">
+    <button type="button" class="btn btn-default" @click="isConfirmDialogVisible = true"><i class="fa fa-undo"></i> Restore</button>
+    <Teleport to="#modalDisplay">
+      <ConfirmDialog
+        v-if="isConfirmDialogVisible"
+        @cancel="isConfirmDialogVisible = false"
+        @confirm="handleConfirm"
+        heading="Are you sure you want to restore this message?"
+        body="The restored message will be moved back to the list of failed messages."
+      />
+    </Teleport>
+  </template>
+</template>
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
new file mode 100644
index 000000000..06ed2fc27
--- /dev/null
+++ b/src/Frontend/src/components/messages/RetryMessageButton.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { computed, ref } from "vue";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+import { MessageStatus } from "@/resources/Message.ts";
+
+const store = useMessageViewStore();
+const isConfirmDialogVisible = ref(false);
+
+const failureStatus = computed(() => store.state.data.failure_status);
+const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
+const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+
+const handleConfirm = async () => {
+  isConfirmDialogVisible.value = false;
+
+  const message = `Retrying the message ${store.state.data.id} ...`;
+  await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
+  store.state.data.failure_status.retried = true;
+};
+</script>
+
+<template>
+  <template v-if="isVisible">
+    <button type="button" class="btn btn-default" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-refresh"></i> Retry message</button>
+    <Teleport to="#modalDisplay">
+      <ConfirmDialog v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm" heading="Retry Message" body="Are you sure you want to retry this message?" />
+    </Teleport>
+  </template>
+</template>
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
index 6638ea9ea..dcc63d762 100644
--- a/src/Frontend/src/components/messages/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CodeEditor from "@/components/CodeEditor.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
-const props = defineProps<{
-  message: ExtendedFailedMessage;
-}>();
+const store = useMessageViewStore();
 </script>
 
 <template>
-  <CodeEditor :model-value="props.message.exception.stack_trace" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <div v-if="store.state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
+  <LoadingSpinner v-else-if="store.state.loading" />
+  <CodeEditor v-else :model-value="store.state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
 </template>
diff --git a/src/Frontend/src/composables/toast.ts b/src/Frontend/src/composables/toast.ts
index bd54653ac..847afdcd0 100644
--- a/src/Frontend/src/composables/toast.ts
+++ b/src/Frontend/src/composables/toast.ts
@@ -21,3 +21,8 @@ export function useShowToast(type: TYPE, title: string, message: string, doNotUs
     ...options,
   });
 }
+
+export const showToastAfterOperation = async (operation: () => Promise<void>, toastType: TYPE, title: string, message: string) => {
+  await operation();
+  useShowToast(toastType, title, message);
+};
diff --git a/src/Frontend/src/composables/useEditAndRetry.ts b/src/Frontend/src/composables/useEditAndRetry.ts
index 7192bd5c0..891958e67 100644
--- a/src/Frontend/src/composables/useEditAndRetry.ts
+++ b/src/Frontend/src/composables/useEditAndRetry.ts
@@ -2,15 +2,11 @@ import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceCon
 import { EditAndRetryConfig } from "@/resources/Configuration.ts";
 import { ref } from "vue";
 
-const editAndRetry = ref<EditAndRetryConfig>();
+export const editRetryConfig = ref<EditAndRetryConfig>({ enabled: false, locked_headers: [], sensitive_headers: [] });
 
 async function populate() {
   const [, data] = await useTypedFetchFromServiceControl<EditAndRetryConfig>("edit/config");
 
-  editAndRetry.value = data;
+  editRetryConfig.value = data;
 }
 populate();
-
-export default function useEditAndRetry(): EditAndRetryConfig {
-  return editAndRetry.value ?? { enabled: false, locked_headers: [], sensitive_headers: [] };
-}
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 744f9c3df..dc3243918 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -102,14 +102,19 @@ const config: RouteItem[] = [
       {
         path: routeLinks.failedMessage.message.template,
         title: "Message",
-        redirect: routeLinks.messages.message.template,
+        redirect: routeLinks.messages.failedMessage.template,
       },
     ],
   },
   {
-    path: routeLinks.messages.message.template,
+    path: routeLinks.messages.failedMessage.template,
     title: "Message",
-    component: () => import("@/components/messages/MessageView.vue"),
+    component: () => import("@/components/messages/MessageView2.vue"),
+  },
+  {
+    path: routeLinks.messages.successMessage.template,
+    title: "Message",
+    component: () => import("@/components/messages/MessageView2.vue"),
   },
   {
     path: routeLinks.monitoring.root,
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index a98c14088..9cb63ed9a 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -33,7 +33,8 @@ const failedMessagesLinks = (root: string) => {
 const messagesLinks = (root: string) => {
   return {
     root,
-    message: { link: (id: string) => `${root}/${id}`, template: "/messages/:id" },
+    failedMessage: { link: (id: string) => `${root}/${id}`, template: "/messages/:id" },
+    successMessage: { link: (messageId: string, id: string) => `${root}/${messageId}/${id}`, template: "/messages/:messageId/:id" },
   };
 };
 
diff --git a/src/Frontend/src/stores/MessageViewStore.ts b/src/Frontend/src/stores/MessageViewStore.ts
index 2786ae9fc..866a63cfc 100644
--- a/src/Frontend/src/stores/MessageViewStore.ts
+++ b/src/Frontend/src/stores/MessageViewStore.ts
@@ -3,13 +3,14 @@ import { reactive, ref } from "vue";
 import Header from "@/resources/Header.ts";
 import type EndpointDetails from "@/resources/EndpointDetails.ts";
 import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage.ts";
-import useEditAndRetry from "@/composables/useEditAndRetry.ts";
+import { editRetryConfig } from "@/composables/useEditAndRetry.ts";
 import { useFetchFromServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls.ts";
-import Message from "@/resources/Message.ts";
+import Message, { MessageStatus } from "@/resources/Message.ts";
 import moment from "moment/moment";
 import { useConfiguration } from "@/composables/configuration.ts";
 import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
+import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage.ts";
 
 interface DataContainer<T> {
   loading?: boolean;
@@ -26,6 +27,8 @@ interface Model {
   sending_endpoint?: EndpointDetails;
   receiving_endpoint?: EndpointDetails;
   body_url?: string;
+  status?: MessageStatus;
+  processed_at?: string;
   failure_status: Partial<{
     retried: boolean;
     archiving: boolean;
@@ -61,8 +64,21 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {} } });
+  let bodyLoadedId = "";
+  let conversationLoadedId = "";
+  const conversationData = ref<DataContainer<Message[]>>({ data: [] });
+
+  function reset() {
+    state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {} };
+    headers.value.data = [];
+    body.value.data = { value: "", content_type: "" };
+    bodyLoadedId = "";
+    conversationLoadedId = "";
+    conversationData.value.data = [];
+  }
 
   async function loadFailedMessage(id: string) {
+    state.data.id = id;
     state.loading = true;
     state.failed_to_load = false;
     state.not_found = false;
@@ -78,15 +94,27 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
       }
 
       const message = (await response.json()) as FailedMessage;
+      state.data.message_id = message.message_id;
+      state.data.message_type = message.message_type;
+      state.data.sending_endpoint = message.sending_endpoint;
+      state.data.receiving_endpoint = message.receiving_endpoint;
       state.data.failure_status.archived = message.status === FailedMessageStatus.Archived;
       state.data.failure_status.resolved = message.status === FailedMessageStatus.Resolved;
       state.data.failure_status.retried = message.status === FailedMessageStatus.RetryIssued;
       state.data.failure_metadata.last_modified = message.last_modified;
+      state.data.failure_metadata.exception = message.exception;
+      state.data.failure_metadata.time_of_failure = message.time_of_failure;
+      state.data.failure_metadata.edited = message.edited;
+      state.data.failure_metadata.edit_of = message.edit_of;
+      state.data.failure_metadata.number_of_processing_attempts = message.number_of_processing_attempts;
+      state.data.failure_metadata.status = message.status;
+
+      await loadMessage(state.data.message_id, id);
     } catch {
-      state.failed_to_load = headers.value.failed_to_load = true;
+      state.failed_to_load = true;
       return;
     } finally {
-      state.loading = headers.value.loading = false;
+      state.loading = false;
     }
 
     const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
@@ -96,7 +124,8 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     // TODO: Maintain the mutations of the message in memory until the api returns a newer modified message
   }
 
-  async function loadMessage(messageId: string, receivingEndpointName: string) {
+  async function loadMessage(messageId: string, id: string) {
+    state.data.id = id;
     state.loading = headers.value.loading = true;
     state.failed_to_load = headers.value.failed_to_load = false;
     state.not_found = headers.value.not_found = false;
@@ -104,7 +133,7 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     try {
       const [, data] = await useTypedFetchFromServiceControl<Message[]>(`messages/search/${messageId}`);
 
-      const message = data.find((value) => value.receiving_endpoint.name === receivingEndpointName);
+      const message = data.find((value) => value.id === id);
 
       if (!message) {
         state.not_found = headers.value.not_found = true;
@@ -117,6 +146,8 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
       state.data.message_type = message.message_type;
       state.data.sending_endpoint = message.sending_endpoint;
       state.data.receiving_endpoint = message.receiving_endpoint;
+      state.data.status = message.status;
+      state.data.processed_at = message.processed_at;
 
       headers.value.data = message.headers;
     } catch {
@@ -126,18 +157,37 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     }
   }
 
+  async function loadConversation(conversationId: string) {
+    if (conversationId === conversationLoadedId) {
+      return;
+    }
+
+    conversationLoadedId = conversationId;
+    conversationData.value.loading = true;
+    try {
+      const [, data] = await useTypedFetchFromServiceControl<Message[]>(`conversations/${conversationId}`);
+
+      conversationData.value.data = data;
+    } catch {
+      conversationData.value.failed_to_load = true;
+    } finally {
+      conversationData.value.loading = false;
+    }
+  }
+
   async function downloadBody() {
-    if (body.value.not_found) {
+    if (!state.data.body_url) {
+      return;
+    }
+    if (state.data.id === bodyLoadedId) {
       return;
     }
 
+    bodyLoadedId = state.data.id ?? "";
     body.value.loading = true;
     body.value.failed_to_load = false;
 
     try {
-      if (!state.data.body_url) {
-        return;
-      }
       const response = await useFetchFromServiceControl(state.data.body_url.substring(1));
       if (response.status === 404) {
         body.value.not_found = true;
@@ -162,6 +212,54 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     }
   }
 
+  async function archiveMessage() {
+    if (state.data.id) {
+      await useArchiveMessage([state.data.id]);
+      state.data.failure_status.archiving = true;
+    }
+  }
+
+  async function restoreMessage() {
+    if (state.data.id) {
+      await useUnarchiveMessage([state.data.id]);
+      state.data.failure_status.restoring = true;
+    }
+  }
+
+  async function retryMessage() {
+    if (state.data.id) {
+      await useRetryMessages([state.data.id]);
+      state.data.failure_status.retried = true;
+    }
+  }
+
+  async function exportMessage() {
+    if (state.failed_to_load || state.not_found) {
+      return "";
+    }
+
+    let exportString = "";
+    if (state.data.failure_metadata.exception?.stack_trace !== undefined) {
+      exportString += "STACKTRACE\n";
+      exportString += state.data.failure_metadata.exception.stack_trace;
+      exportString += "\n\n";
+    }
+
+    exportString += "HEADERS";
+    for (let i = 0; i < headers.value.data.length; i++) {
+      exportString += `\n${headers.value.data[i].key}: ${headers.value.data[i].value}`;
+    }
+
+    await downloadBody();
+
+    if (!(body.value.not_found || body.value.failed_to_load)) {
+      exportString += "\n\nMESSAGE BODY\n";
+      exportString += body.value.data.value;
+    }
+
+    return exportString;
+  }
+
   const configuration = useConfiguration();
   const error_retention_period = moment.duration(configuration.value?.data_retention.error_retention_period).asHours();
 
@@ -169,10 +267,17 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     headers,
     body,
     state,
-    edit_and_retry_config: useEditAndRetry(),
+    edit_and_retry_config: editRetryConfig,
+    reset,
     loadMessage,
     loadFailedMessage,
+    loadConversation,
     downloadBody,
+    exportMessage,
+    archiveMessage,
+    restoreMessage,
+    retryMessage,
+    conversationData,
   };
 });
 

From 00de7e5e7532c00f740605ae6bce02d4163e61e2 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 09:28:10 +1000
Subject: [PATCH 03/16] Changing to use storeToRefs

---
 .../src/components/messages/BodyView.vue        | 17 ++++++++++-------
 .../components/messages/DeleteMessageButton.vue | 10 ++++++----
 .../components/messages/EditAndRetryButton.vue  | 10 ++++++----
 .../src/components/messages/FlowDiagram.vue     |  6 ++++--
 .../src/components/messages/HeadersView.vue     | 13 +++++++------
 .../messages/RestoreMessageButton.vue           |  8 +++++---
 .../components/messages/RetryMessageButton.vue  | 10 ++++++----
 .../src/components/messages/StacktraceView.vue  |  9 +++++----
 8 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index 3956df268..5cf006ce0 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -4,25 +4,28 @@ import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
 
 const store = useMessageViewStore();
+const { body: bodyState, state } = storeToRefs(store);
+
 watch(
-  () => store.state.data.body_url,
+  () => state.value.data.body_url,
   async () => {
     await store.downloadBody();
   },
   { immediate: true }
 );
-const contentType = computed(() => parseContentType(store.body.data.content_type));
-const body = computed(() => store.body.data.value);
+const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
+const body = computed(() => bodyState.value.data.value);
 </script>
 
 <template>
-  <div v-if="store.body.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-  <div v-else-if="store.body.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-  <LoadingSpinner v-else-if="store.body.loading" />
+  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+  <LoadingSpinner v-else-if="bodyState.loading" />
   <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ store.body.data.content_type }}" is not supported.</div>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
 </template>
 
 <style scoped></style>
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
index 59e11607f..bd94d14a9 100644
--- a/src/Frontend/src/components/messages/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages/DeleteMessageButton.vue
@@ -5,20 +5,22 @@ import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
+import { storeToRefs } from "pinia";
 
 const store = useMessageViewStore();
+const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => store.state.data.failure_status);
+const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.resolved);
-const isVisible = computed(() => !failureStatus.value.archived && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => !failureStatus.value.archived && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Deleting the message ${store.state.data.id} ...`;
+  const message = `Deleting the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.archiveMessage, TYPE.INFO, "Info", message);
-  store.state.data.failure_status.archiving = true;
+  state.value.data.failure_status.archiving = true;
 };
 </script>
 
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
index a58043ea0..3eed9b14d 100644
--- a/src/Frontend/src/components/messages/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -5,19 +5,21 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
 import { MessageStatus } from "@/resources/Message.ts";
+import { storeToRefs } from "pinia";
 
 const store = useMessageViewStore();
+const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => store.state.data.failure_status);
+const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Retrying the edited message ${store.state.data.id} ...`;
+  const message = `Retrying the edited message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  store.state.data.failure_status.retried = true;
+  state.value.data.failure_status.retried = true;
 };
 </script>
 
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index 1a7ceb6bf..ac3f33c39 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -8,6 +8,7 @@ import { NServiceBusHeaders } from "@/resources/Header";
 import { Controls } from "@vue-flow/controls";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
 
 enum MessageType {
   Event = "Event message",
@@ -40,6 +41,7 @@ const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
 const store = useMessageViewStore();
+const { state } = storeToRefs(useMessageViewStore());
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
@@ -157,9 +159,9 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
 const elements = ref<(Node | DefaultEdge)[]>([]);
 
 onMounted(async () => {
-  if (!store.state.data.conversation_id) return;
+  if (!state.value.data.conversation_id) return;
 
-  const messages = await getConversation(store.state.data.conversation_id);
+  const messages = await getConversation(state.value.data.conversation_id);
   const mappedMessages = messages.map(mapMessage);
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index 4fc33a580..daf0af38c 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/src/Frontend/src/components/messages/HeadersView.vue
@@ -2,8 +2,9 @@
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { storeToRefs } from "pinia";
 
-const store = useMessageViewStore();
+const { headers } = storeToRefs(useMessageViewStore());
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
@@ -13,9 +14,9 @@ const toggleHover = (index: number, state: boolean) => {
 // Computed property to filter headers based on search term
 const filteredHeaders = computed(() => {
   if (!searchTerm.value) {
-    return store.headers.data;
+    return headers.value.data;
   }
-  return store.headers.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
+  return headers.value.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
 });
 </script>
 
@@ -31,7 +32,7 @@ const filteredHeaders = computed(() => {
       </div>
     </div>
   </div>
-  <table class="table" v-if="filteredHeaders.length > 0 && !store.headers.not_found">
+  <table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
     <tbody>
       <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
@@ -46,8 +47,8 @@ const filteredHeaders = computed(() => {
   </table>
 
   <!-- Message if filtered list is empty -->
-  <div v-if="filteredHeaders.length <= 0 && !store.headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
-  <div v-if="store.headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
+  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
 <style scoped>
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
index d81b33afd..cf7419e46 100644
--- a/src/Frontend/src/components/messages/RestoreMessageButton.vue
+++ b/src/Frontend/src/components/messages/RestoreMessageButton.vue
@@ -4,18 +4,20 @@ import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
+import { storeToRefs } from "pinia";
 
 const store = useMessageViewStore();
+const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => store.state.data.failure_status);
+const failureStatus = computed(() => state.value.data.failure_status);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Restoring the message ${store.state.data.id} ...`;
+  const message = `Restoring the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.restoreMessage, TYPE.INFO, "Info", message);
-  store.state.data.failure_status.restoring = true;
+  state.value.data.failure_status.restoring = true;
 };
 </script>
 
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
index 06ed2fc27..e25c1fa26 100644
--- a/src/Frontend/src/components/messages/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages/RetryMessageButton.vue
@@ -5,20 +5,22 @@ import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
+import { storeToRefs } from "pinia";
 
 const store = useMessageViewStore();
+const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => store.state.data.failure_status);
+const failureStatus = computed(() => state.value.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
+const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
-  const message = `Retrying the message ${store.state.data.id} ...`;
+  const message = `Retrying the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  store.state.data.failure_status.retried = true;
+  state.value.data.failure_status.retried = true;
 };
 </script>
 
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
index dcc63d762..8a869c200 100644
--- a/src/Frontend/src/components/messages/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -2,12 +2,13 @@
 import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
 
-const store = useMessageViewStore();
+const { state } = storeToRefs(useMessageViewStore());
 </script>
 
 <template>
-  <div v-if="store.state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
-  <LoadingSpinner v-else-if="store.state.loading" />
-  <CodeEditor v-else :model-value="store.state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
+  <LoadingSpinner v-else-if="state.loading" />
+  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
 </template>

From a5619753fc345a4daa041ffbfd76ed889bdc8266 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 10:00:27 +1000
Subject: [PATCH 04/16] Refactors message metadata display

Introduces a reusable `MetadataLabel` component to streamline the display of message metadata in the message view.

This improves code readability and maintainability by encapsulating the common styling and tooltip logic for metadata labels. It also makes it easier to consistently apply styling across different metadata labels.
---
 .../src/components/messages/MessageView2.vue  | 26 +++++++++----------
 .../src/components/messages/MetadataLabel.vue |  6 +++++
 2 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 src/Frontend/src/components/messages/MetadataLabel.vue

diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
index 10abaff3d..7581d539b 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -17,6 +17,7 @@ import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
 import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import MetadataLabel from "@/components/messages/MetadataLabel.vue";
 
 const panel = ref<number>(1);
 const route = useRoute();
@@ -71,20 +72,19 @@ onMounted(() => {
           <div class="row">
             <div class="col-sm-12 no-side-padding">
               <div class="metadata group-message-count message-metadata">
-                <span v-if="state.data.failure_status.retried" v-tippy="`Message is being retried`" class="label sidebar-label label-info metadata-label">Retried</span>
-                <span v-if="state.data.failure_status.restoring" v-tippy="`Message is being retried`" class="label sidebar-label label-info metadata-label">Restoring...</span>
-                <span v-if="state.data.failure_status.archiving" v-tippy="`Message is being deleted`" class="label sidebar-label label-info metadata-label">Deleting...</span>
-                <span v-if="state.data.failure_status.archived" v-tippy="`Message is deleted`" class="label sidebar-label label-warning metadata-label">Deleted</span>
-                <span v-if="state.data.failure_status.resolved" v-tippy="`Message was processed successfully`" class="label sidebar-label label-warning metadata-label">Processed</span>
-                <span
-                  v-if="state.data.failure_metadata.number_of_processing_attempts && state.data.failure_metadata.number_of_processing_attempts > 1"
-                  :v-tippy="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
-                  class="label sidebar-label label-important metadata-label"
-                >
-                  {{ state.data.failure_metadata.number_of_processing_attempts - 1 }} Retry Failures
-                </span>
+                <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is being retried" type="info" text="Retried" />
+                <MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
+                <MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
+                <MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
+                <MetadataLabel v-if="state.data.failure_status.resolved" tooltip="Message was processed successfully" type="warning" text="Processed" />
+                <MetadataLabel
+                  v-if="state.data.failure_metadata.number_of_processing_attempts !== undefined && state.data.failure_metadata.number_of_processing_attempts > 1"
+                  :tooltip="`This message has already failed ${state.data.failure_metadata.number_of_processing_attempts} times`"
+                  type="important"
+                  :text="`${(state.data.failure_metadata.number_of_processing_attempts ?? 0) - 1} Retry Failures`"
+                />
                 <template v-if="state.data.failure_metadata.edited">
-                  <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
+                  <MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
                   <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
                     <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of) }">View previous version</RouterLink>
                   </span>
diff --git a/src/Frontend/src/components/messages/MetadataLabel.vue b/src/Frontend/src/components/messages/MetadataLabel.vue
new file mode 100644
index 000000000..353106815
--- /dev/null
+++ b/src/Frontend/src/components/messages/MetadataLabel.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+const props = defineProps<{ tooltip: string; type: "info" | "warning" | "important"; text: string }>();
+</script>
+<template>
+  <span v-tippy="props.tooltip" class="label sidebar-label metadata-label" :class="`label-${props.type}`">{{ props.text }}</span>
+</template>

From d504d4260e822ccdbc7e8f7dc44f1e2a1e387a92 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 10:59:51 +1000
Subject: [PATCH 05/16] Replaces tab navigation with TabsLayout component

Replaces the custom tab navigation in the message view with a reusable TabsLayout component.

This change improves code maintainability and reduces duplication by centralizing the tab layout logic.
The tabs are now dynamically generated based on the message context, such as whether it's an error or if MassTransit is connected.
---
 src/Frontend/src/components/TabsLayout.vue    | 30 ++++++++++++
 .../src/components/messages/MessageView2.vue  | 48 ++++++++++++-------
 2 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/Frontend/src/components/TabsLayout.vue

diff --git a/src/Frontend/src/components/TabsLayout.vue b/src/Frontend/src/components/TabsLayout.vue
new file mode 100644
index 000000000..637a25de8
--- /dev/null
+++ b/src/Frontend/src/components/TabsLayout.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, type Component, type DefineComponent } from "vue";
+
+interface Tab {
+  text: string;
+  component: Component | DefineComponent;
+}
+
+const props = defineProps<{ tabs: Tab[] }>();
+const activePanel = ref(0);
+const activeComponent = ref(props.tabs[0].component);
+
+function togglePanel(panelIndex: number) {
+  activePanel.value = panelIndex;
+  activeComponent.value = props.tabs[panelIndex].component;
+}
+</script>
+
+<template>
+  <div class="nav tabs msg-tabs">
+    <h5 :class="{ active: activePanel === index }" class="nav-item" @click.prevent="togglePanel(index)" v-for="(tab, index) in props.tabs" :key="tab.text">
+      <a href="#">{{ tab.text }}</a>
+    </h5>
+  </div>
+  <keep-alive>
+    <component v-bind:is="activeComponent"></component>
+  </keep-alive>
+</template>
+
+<style scoped></style>
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
index 7581d539b..d5d2fe587 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
@@ -16,10 +16,10 @@ import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
 import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
 import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
 import MetadataLabel from "@/components/messages/MetadataLabel.vue";
 
-const panel = ref<number>(1);
 const route = useRoute();
 const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
@@ -29,10 +29,6 @@ const isMassTransitConnected = useIsMassTransitConnected();
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
 
-function togglePanel(panelNum: number) {
-  panel.value = panelNum;
-}
-
 watch(
   [id, messageId],
   async ([newId, newMessageId], [oldId, oldMessageId]) => {
@@ -49,8 +45,33 @@ watch(
   { immediate: true }
 );
 
-onMounted(() => {
-  togglePanel(isError.value ? 1 : 2);
+const tabs = computed(() => {
+  const currentTabs = [
+    {
+      text: "Message body",
+      component: BodyView,
+    },
+    {
+      text: "Headers",
+      component: HeadersView,
+    },
+  ];
+
+  if (isError.value) {
+    currentTabs.unshift({
+      text: "Stacktrace",
+      component: StackTraceView,
+    });
+  }
+
+  if (!isMassTransitConnected.value) {
+    currentTabs.push({
+      text: "Flow Diagram",
+      component: FlowDiagram,
+    });
+  }
+
+  return currentTabs;
 });
 </script>
 
@@ -117,16 +138,7 @@ onMounted(() => {
           </div>
           <div class="row">
             <div class="col-sm-12 no-side-padding">
-              <div class="nav tabs msg-tabs">
-                <h5 v-if="isError" :class="{ active: panel === 1 }" class="nav-item" @click.prevent="togglePanel(1)"><a href="#">Stacktrace</a></h5>
-                <h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
-                <h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
-                <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
-              </div>
-              <StackTraceView v-if="isError && panel === 1" />
-              <BodyView v-if="panel === 2" />
-              <HeadersView v-if="panel === 3" />
-              <FlowDiagram v-if="panel === 4" />
+              <TabsLayout :tabs="tabs" />
             </div>
           </div>
         </template>

From f0d8d2e369a82087476cec56662b6cb3e47f23ab Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 12:16:16 +1000
Subject: [PATCH 06/16] A few small fixes

---
 src/Frontend/src/components/TabsLayout.vue    |  4 +--
 .../src/components/messages/MessageView2.vue  | 34 +++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/Frontend/src/components/TabsLayout.vue b/src/Frontend/src/components/TabsLayout.vue
index 637a25de8..ee2059997 100644
--- a/src/Frontend/src/components/TabsLayout.vue
+++ b/src/Frontend/src/components/TabsLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, type Component, type DefineComponent } from "vue";
+import { ref, type Component, type DefineComponent, shallowRef } from "vue";
 
 interface Tab {
   text: string;
@@ -8,7 +8,7 @@ interface Tab {
 
 const props = defineProps<{ tabs: Tab[] }>();
 const activePanel = ref(0);
-const activeComponent = ref(props.tabs[0].component);
+const activeComponent = shallowRef(props.tabs[0].component);
 
 function togglePanel(panelIndex: number) {
   activePanel.value = panelIndex;
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
index d5d2fe587..a0b69570b 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -24,27 +24,9 @@ const route = useRoute();
 const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
 const isError = computed(() => messageId.value === undefined);
-
 const isMassTransitConnected = useIsMassTransitConnected();
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
-
-watch(
-  [id, messageId],
-  async ([newId, newMessageId], [oldId, oldMessageId]) => {
-    if (newId !== oldId || newMessageId !== oldMessageId) {
-      store.reset();
-    }
-
-    if (newMessageId !== undefined) {
-      await store.loadMessage(newMessageId, newId);
-    } else {
-      await store.loadFailedMessage(newId);
-    }
-  },
-  { immediate: true }
-);
-
 const tabs = computed(() => {
   const currentTabs = [
     {
@@ -73,6 +55,22 @@ const tabs = computed(() => {
 
   return currentTabs;
 });
+
+watch(
+  [id, messageId],
+  async ([newId, newMessageId], [oldId, oldMessageId]) => {
+    if (newId !== oldId || newMessageId !== oldMessageId) {
+      store.reset();
+    }
+
+    if (newMessageId !== undefined) {
+      await store.loadMessage(newMessageId, newId);
+    } else {
+      await store.loadFailedMessage(newId);
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>

From 18a471f3d1d8b887c5973978a0f91d27b415f7aa Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 13:14:17 +1000
Subject: [PATCH 07/16] Adding auto refresh

More
---
 .../failedmessages/EditRetryDialog2.vue       | 28 +++++++++-------
 .../messages/DeleteMessageButton.vue          |  4 ++-
 .../messages/EditAndRetryButton.vue           | 11 +++++--
 .../src/components/messages/MessageView2.vue  |  3 +-
 .../messages/RestoreMessageButton.vue         |  8 +++--
 .../messages/RetryMessageButton.vue           |  4 ++-
 src/Frontend/src/stores/MessageViewStore.ts   | 32 +++++++++++++++++--
 7 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
index 31881f7aa..8757935e2 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -7,6 +7,8 @@ import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { storeToRefs } from "pinia";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 interface HeaderWithEditing extends Header {
   isLocked: boolean;
@@ -51,8 +53,9 @@ const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
 const store = useMessageViewStore();
-const id = computed(() => store.state.data.id ?? "");
-const messageBody = computed(() => store.body.data.value);
+const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
+const id = computed(() => state.value.data.id ?? "");
+const messageBody = computed(() => body.value.data.value);
 
 watch(messageBody, (newValue) => {
   if (newValue !== origMessageBody) {
@@ -119,17 +122,17 @@ async function retryEditedMessage() {
 }
 
 function initializeMessageBodyAndHeaders() {
-  origMessageBody = store.body.data.value ?? "";
+  origMessageBody = body.value.data.value ?? "";
   localMessage.value = {
     isBodyChanged: false,
     isBodyEmpty: false,
     isContentTypeSupported: false,
     bodyContentType: undefined,
-    bodyUnavailable: store.body.not_found ?? false,
+    bodyUnavailable: body.value.not_found ?? false,
     isEvent: false,
-    retried: store.state.data.failure_status.retried ?? false,
-    headers: store.headers.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
-    messageBody: store.body.data.value ?? "",
+    retried: state.value.data.failure_status.retried ?? false,
+    headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
+    messageBody: body.value.data.value ?? "",
   };
   localMessage.value.isBodyEmpty = false;
   localMessage.value.isBodyChanged = false;
@@ -143,17 +146,17 @@ function initializeMessageBodyAndHeaders() {
   const messageIntent = getMessageIntent();
   localMessage.value.isEvent = messageIntent === "Publish";
 
-  for (let index = 0; index < store.headers.data.length; index++) {
-    const header: HeaderWithEditing = store.headers.data[index] as HeaderWithEditing;
+  for (let index = 0; index < headers.value.data.length; index++) {
+    const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
 
     header.isLocked = false;
     header.isSensitive = false;
     header.isMarkedAsRemoved = false;
     header.isChanged = false;
 
-    if (store.edit_and_retry_config.locked_headers.includes(header.key)) {
+    if (edit_and_retry_config.value.locked_headers.includes(header.key)) {
       header.isLocked = true;
-    } else if (store.edit_and_retry_config.sensitive_headers.includes(header.key)) {
+    } else if (edit_and_retry_config.value.sensitive_headers.includes(header.key)) {
       header.isSensitive = true;
     }
 
@@ -220,7 +223,8 @@ onMounted(() => {
                       </table>
                       <div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
                         <div style="margin-top: 1.25rem">
-                          <CodeEditor aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
+                          <LoadingSpinner v-if="body.loading" />
+                          <CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
                         </div>
                         <span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
                         <span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
index bd94d14a9..e5aefb882 100644
--- a/src/Frontend/src/components/messages/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages/DeleteMessageButton.vue
@@ -6,6 +6,7 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -20,7 +21,8 @@ const handleConfirm = async () => {
 
   const message = `Deleting the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.archiveMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.archiving = true;
+
+  await store.pollForNextUpdate(FailedMessageStatus.Archived);
 };
 </script>
 
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
index 3eed9b14d..adbd1420d 100644
--- a/src/Frontend/src/components/messages/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -6,6 +6,7 @@ import { TYPE } from "vue-toastification";
 import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -19,13 +20,19 @@ const handleConfirm = async () => {
 
   const message = `Retrying the edited message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.retried = true;
+
+  await store.pollForNextUpdate(FailedMessageStatus.Resolved);
 };
+
+async function openDialog() {
+  await store.downloadBody();
+  isConfirmDialogVisible.value = true;
+}
 </script>
 
 <template>
   <template v-if="isVisible">
-    <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-pencil"></i> Edit & retry</button>
+    <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="openDialog"><i class="fa fa-pencil"></i> Edit & retry</button>
     <Teleport to="#modalDisplay">
       <EditRetryDialog2 v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
     </Teleport>
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
index a0b69570b..04616755a 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -91,7 +91,8 @@ watch(
           <div class="row">
             <div class="col-sm-12 no-side-padding">
               <div class="metadata group-message-count message-metadata">
-                <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is being retried" type="info" text="Retried" />
+                <MetadataLabel v-if="state.data.failure_status.retry_in_progress" tooltip="Message is being added to the retries queue" type="info" text="Requesting retry..." />
+                <MetadataLabel v-if="state.data.failure_status.retried" tooltip="Message is enqueued to be retried" type="info" text="Waiting for retry" />
                 <MetadataLabel v-if="state.data.failure_status.restoring" tooltip="Message is being restored" type="info" text="Restoring..." />
                 <MetadataLabel v-if="state.data.failure_status.archiving" tooltip="Message is being deleted" type="info" text="Deleting..." />
                 <MetadataLabel v-if="state.data.failure_status.archived" tooltip="Message is deleted" type="warning" text="Deleted" />
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
index cf7419e46..2d17495ea 100644
--- a/src/Frontend/src/components/messages/RestoreMessageButton.vue
+++ b/src/Frontend/src/components/messages/RestoreMessageButton.vue
@@ -5,24 +5,26 @@ import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
-const failureStatus = computed(() => state.value.data.failure_status);
+const isVisible = computed(() => state.value.data.failure_status.archived);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
   const message = `Restoring the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.restoreMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.restoring = true;
+
+  await store.pollForNextUpdate(FailedMessageStatus.Unresolved);
 };
 </script>
 
 <template>
-  <template v-if="failureStatus.archived">
+  <template v-if="isVisible">
     <button type="button" class="btn btn-default" @click="isConfirmDialogVisible = true"><i class="fa fa-undo"></i> Restore</button>
     <Teleport to="#modalDisplay">
       <ConfirmDialog
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
index e25c1fa26..5d30f56e0 100644
--- a/src/Frontend/src/components/messages/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages/RetryMessageButton.vue
@@ -6,6 +6,7 @@ import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import { MessageStatus } from "@/resources/Message.ts";
 import { storeToRefs } from "pinia";
+import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
@@ -20,7 +21,8 @@ const handleConfirm = async () => {
 
   const message = `Retrying the message ${state.value.data.id} ...`;
   await showToastAfterOperation(store.retryMessage, TYPE.INFO, "Info", message);
-  state.value.data.failure_status.retried = true;
+
+  await store.pollForNextUpdate(FailedMessageStatus.Resolved);
 };
 </script>
 
diff --git a/src/Frontend/src/stores/MessageViewStore.ts b/src/Frontend/src/stores/MessageViewStore.ts
index 866a63cfc..7fe694104 100644
--- a/src/Frontend/src/stores/MessageViewStore.ts
+++ b/src/Frontend/src/stores/MessageViewStore.ts
@@ -120,8 +120,6 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
     state.data.failure_status.delete_soon = countdown < moment();
     state.data.failure_metadata.deleted_in = countdown.format();
-
-    // TODO: Maintain the mutations of the message in memory until the api returns a newer modified message
   }
 
   async function loadMessage(messageId: string, id: string) {
@@ -229,8 +227,35 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
   async function retryMessage() {
     if (state.data.id) {
       await useRetryMessages([state.data.id]);
-      state.data.failure_status.retried = true;
+      state.data.failure_status.retry_in_progress = true;
+    }
+  }
+
+  async function pollForNextUpdate(status: FailedMessageStatus) {
+    if (!state.data.id) {
+      return;
+    }
+
+    let maxRetries = 60; // We try for 60 seconds
+
+    do {
+      // eslint-disable-next-line no-await-in-loop
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // eslint-disable-next-line no-await-in-loop
+      const [, data] = await useTypedFetchFromServiceControl<FailedMessage>(`errors/last/${state.data.id}`);
+      if (status === data.status) {
+        break;
+      }
+    } while (maxRetries-- > 0);
+
+    if (maxRetries === 0) {
+      // It never changed so no need to refresh UI
+      return;
     }
+
+    const id = state.data.id;
+    reset();
+    await loadFailedMessage(id);
   }
 
   async function exportMessage() {
@@ -278,6 +303,7 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
     restoreMessage,
     retryMessage,
     conversationData,
+    pollForNextUpdate,
   };
 });
 

From 2b48a4da1d101d91e6d46ebe241472d41c39e427 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 16:52:31 +1000
Subject: [PATCH 08/16] No longer needed

---
 src/Frontend/src/components/audit/AuditList.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 295dcfd24..6493136a8 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -101,12 +101,7 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink
-                v-if="message.status === MessageStatus.Successful"
-                class="hackToPreventSafariFromShowingTooltip"
-                aria-label="details-link"
-                :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id), query: { back: route.path } }"
-              >
+              <RouterLink v-if="message.status === MessageStatus.Successful" class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id) }">
                 {{ message.message_id }}
               </RouterLink>
               <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">

From 865c1c7537da86fdc084bcae7ca8be9b7cc09009 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 16:56:56 +1000
Subject: [PATCH 09/16] Clean up

---
 src/Frontend/src/components/audit/AuditList.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 6493136a8..7480676df 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -2,7 +2,6 @@
 import routeLinks from "@/router/routeLinks";
 import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
 import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
 import SortableColumn from "../SortableColumn.vue";
 import { MessageStatus } from "@/resources/Message";
 import moment from "moment";
@@ -11,7 +10,6 @@ import RefreshConfig from "../RefreshConfig.vue";
 import ItemsPerPage from "../ItemsPerPage.vue";
 import PaginationStrip from "../PaginationStrip.vue";
 
-const route = useRoute();
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage, selectedPage, totalCount } = storeToRefs(store);
 

From aa1a7dd517a604ef061a605923ba3e3f991be149 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 17:00:26 +1000
Subject: [PATCH 10/16] Remove extension

---
 .../failedmessages/EditRetryDialog.vue           |  2 +-
 .../failedmessages/EditRetryDialog2.vue          |  4 ++--
 .../src/components/messages/BodyView.vue         |  2 +-
 .../components/messages/DeleteMessageButton.vue  |  8 ++++----
 .../components/messages/EditAndRetryButton.vue   |  8 ++++----
 .../components/messages/ExportMessageButton.vue  |  6 +++---
 .../src/components/messages/FlowDiagram.vue      |  2 +-
 .../src/components/messages/HeadersView.vue      |  2 +-
 .../src/components/messages/MessageView2.vue     |  2 +-
 .../components/messages/RestoreMessageButton.vue |  6 +++---
 .../components/messages/RetryMessageButton.vue   |  8 ++++----
 .../src/components/messages/StacktraceView.vue   |  2 +-
 src/Frontend/src/composables/useEditAndRetry.ts  |  4 ++--
 src/Frontend/src/stores/MessageViewStore.ts      | 16 ++++++++--------
 14 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
index e8c2beaed..c9d202d38 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "@/composables/serviceFailedMessage.ts";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
 import { EditAndRetryConfig } from "@/resources/Configuration";
 import type Header from "@/resources/Header";
diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
index 8757935e2..fb2d70e4d 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRetryEditedMessage } from "@/composables/serviceFailedMessage.ts";
+import { useRetryEditedMessage } from "@/composables/serviceFailedMessage";
 import MessageHeader from "./EditMessageHeader.vue";
 import type Header from "@/resources/Header";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index 5cf006ce0..a6f7b3735 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -2,7 +2,7 @@
 import { computed, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages/DeleteMessageButton.vue
index e5aefb882..9783172e8 100644
--- a/src/Frontend/src/components/messages/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages/DeleteMessageButton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { computed, ref } from "vue";
-import { showToastAfterOperation } from "@/composables/toast.ts";
+import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
-import { MessageStatus } from "@/resources/Message.ts";
+import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
-import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages/EditAndRetryButton.vue
index adbd1420d..185827dbe 100644
--- a/src/Frontend/src/components/messages/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages/EditAndRetryButton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { computed, ref } from "vue";
-import { showToastAfterOperation } from "@/composables/toast.ts";
+import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
-import { MessageStatus } from "@/resources/Message.ts";
+import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
-import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
diff --git a/src/Frontend/src/components/messages/ExportMessageButton.vue b/src/Frontend/src/components/messages/ExportMessageButton.vue
index ea50b016d..7276f97a5 100644
--- a/src/Frontend/src/components/messages/ExportMessageButton.vue
+++ b/src/Frontend/src/components/messages/ExportMessageButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
-import { useDownloadFileFromString } from "@/composables/fileDownloadCreator.ts";
-import { showToastAfterOperation } from "@/composables/toast.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useDownloadFileFromString } from "@/composables/fileDownloadCreator";
+import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { ref } from "vue";
 
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index ac3f33c39..097205627 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -6,7 +6,7 @@ import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { Controls } from "@vue-flow/controls";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index daf0af38c..bf5c959b3 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/src/Frontend/src/components/messages/HeadersView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { storeToRefs } from "pinia";
 
 const { headers } = storeToRefs(useMessageViewStore());
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages/MessageView2.vue
index 04616755a..7c79dca90 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages/MessageView2.vue
@@ -9,7 +9,7 @@ import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnect
 import BodyView from "@/components/messages/BodyView.vue";
 import HeadersView from "@/components/messages/HeadersView.vue";
 import StackTraceView from "@/components/messages/StacktraceView.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import DeleteMessageButton from "@/components/messages/DeleteMessageButton.vue";
 import RestoreMessageButton from "@/components/messages/RestoreMessageButton.vue";
 import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages/RestoreMessageButton.vue
index 2d17495ea..f707eaf86 100644
--- a/src/Frontend/src/components/messages/RestoreMessageButton.vue
+++ b/src/Frontend/src/components/messages/RestoreMessageButton.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { computed, ref } from "vue";
-import { showToastAfterOperation } from "@/composables/toast.ts";
+import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { storeToRefs } from "pinia";
-import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages/RetryMessageButton.vue
index 5d30f56e0..e65387c65 100644
--- a/src/Frontend/src/components/messages/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages/RetryMessageButton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import { computed, ref } from "vue";
-import { showToastAfterOperation } from "@/composables/toast.ts";
+import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
-import { MessageStatus } from "@/resources/Message.ts";
+import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
-import { FailedMessageStatus } from "@/resources/FailedMessage.ts";
+import { FailedMessageStatus } from "@/resources/FailedMessage";
 
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
index 8a869c200..028001b30 100644
--- a/src/Frontend/src/components/messages/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
diff --git a/src/Frontend/src/composables/useEditAndRetry.ts b/src/Frontend/src/composables/useEditAndRetry.ts
index 891958e67..28cf9b138 100644
--- a/src/Frontend/src/composables/useEditAndRetry.ts
+++ b/src/Frontend/src/composables/useEditAndRetry.ts
@@ -1,5 +1,5 @@
-import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls.ts";
-import { EditAndRetryConfig } from "@/resources/Configuration.ts";
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
+import { EditAndRetryConfig } from "@/resources/Configuration";
 import { ref } from "vue";
 
 export const editRetryConfig = ref<EditAndRetryConfig>({ enabled: false, locked_headers: [], sensitive_headers: [] });
diff --git a/src/Frontend/src/stores/MessageViewStore.ts b/src/Frontend/src/stores/MessageViewStore.ts
index 7fe694104..c94ace77f 100644
--- a/src/Frontend/src/stores/MessageViewStore.ts
+++ b/src/Frontend/src/stores/MessageViewStore.ts
@@ -1,16 +1,16 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { reactive, ref } from "vue";
-import Header from "@/resources/Header.ts";
-import type EndpointDetails from "@/resources/EndpointDetails.ts";
-import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage.ts";
-import { editRetryConfig } from "@/composables/useEditAndRetry.ts";
-import { useFetchFromServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls.ts";
-import Message, { MessageStatus } from "@/resources/Message.ts";
+import Header from "@/resources/Header";
+import type EndpointDetails from "@/resources/EndpointDetails";
+import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
+import { editRetryConfig } from "@/composables/useEditAndRetry";
+import { useFetchFromServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
+import Message, { MessageStatus } from "@/resources/Message";
 import moment from "moment/moment";
-import { useConfiguration } from "@/composables/configuration.ts";
+import { useConfiguration } from "@/composables/configuration";
 import { parse, stringify } from "lossless-json";
 import xmlFormat from "xml-formatter";
-import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage.ts";
+import { useArchiveMessage, useRetryMessages, useUnarchiveMessage } from "@/composables/serviceFailedMessage";
 
 interface DataContainer<T> {
   loading?: boolean;

From b737536e4523c5b3e1a0c4a93520562a8a9a1f1d Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 17:17:19 +1000
Subject: [PATCH 11/16] Bring back the previous version to be backwards compat

---
 .../src/components/messages/BodyView.vue      |  31 +-
 .../src/components/messages/FlowDiagram.vue   |  58 ++-
 .../src/components/messages/HeadersView.vue   |  19 +-
 .../src/components/messages/MessageView.vue   |   8 +-
 .../components/messages/StacktraceView.vue    |  12 +-
 .../src/components/messages2/BodyView.vue     |  31 ++
 .../DeleteMessageButton.vue                   |   0
 .../EditAndRetryButton.vue                    |   0
 .../ExportMessageButton.vue                   |   0
 .../src/components/messages2/FlowDiagram.vue  | 419 ++++++++++++++++++
 .../src/components/messages2/HeadersView.vue  |  90 ++++
 .../MessageView.vue}                          |  18 +-
 .../{messages => messages2}/MetadataLabel.vue |   0
 .../RestoreMessageButton.vue                  |   0
 .../RetryMessageButton.vue                    |   0
 .../components/messages2/StacktraceView.vue   |  14 +
 src/Frontend/src/router/config.ts             |   4 +-
 17 files changed, 619 insertions(+), 85 deletions(-)
 create mode 100644 src/Frontend/src/components/messages2/BodyView.vue
 rename src/Frontend/src/components/{messages => messages2}/DeleteMessageButton.vue (100%)
 rename src/Frontend/src/components/{messages => messages2}/EditAndRetryButton.vue (100%)
 rename src/Frontend/src/components/{messages => messages2}/ExportMessageButton.vue (100%)
 create mode 100644 src/Frontend/src/components/messages2/FlowDiagram.vue
 create mode 100644 src/Frontend/src/components/messages2/HeadersView.vue
 rename src/Frontend/src/components/{messages/MessageView2.vue => messages2/MessageView.vue} (91%)
 rename src/Frontend/src/components/{messages => messages2}/MetadataLabel.vue (100%)
 rename src/Frontend/src/components/{messages => messages2}/RestoreMessageButton.vue (100%)
 rename src/Frontend/src/components/{messages => messages2}/RetryMessageButton.vue (100%)
 create mode 100644 src/Frontend/src/components/messages2/StacktraceView.vue

diff --git a/src/Frontend/src/components/messages/BodyView.vue b/src/Frontend/src/components/messages/BodyView.vue
index a6f7b3735..d4b90a8ca 100644
--- a/src/Frontend/src/components/messages/BodyView.vue
+++ b/src/Frontend/src/components/messages/BodyView.vue
@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { computed } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
-const store = useMessageViewStore();
-const { body: bodyState, state } = storeToRefs(store);
-
-watch(
-  () => state.value.data.body_url,
-  async () => {
-    await store.downloadBody();
-  },
-  { immediate: true }
-);
-const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
-const body = computed(() => bodyState.value.data.value);
+const contentType = computed(() => parseContentType(props.message.contentType));
 </script>
 
 <template>
-  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
-  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-  <LoadingSpinner v-else-if="bodyState.loading" />
-  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
-  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+  <div v-if="props.message.messageBodyNotFound" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="props.message.bodyUnavailable" class="alert alert-info">Message body unavailable.</div>
+  <CodeEditor v-else-if="contentType.isSupported" :model-value="props.message.messageBody" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ props.message.contentType }}" is not supported.</div>
 </template>
 
 <style scoped></style>
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index 097205627..210accdb2 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import { type DefaultEdge, MarkerType, VueFlow, type Styles, type Node } from "@vue-flow/core";
 import TimeSince from "../TimeSince.vue";
 import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
+import { useRoute } from "vue-router";
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import { Controls } from "@vue-flow/controls";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
+
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
 enum MessageType {
   Event = "Event message",
@@ -40,13 +44,11 @@ interface MappedMessage {
 const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
-const store = useMessageViewStore();
-const { state } = storeToRefs(useMessageViewStore());
+const route = useRoute();
 
 async function getConversation(conversationId: string) {
-  await store.loadConversation(conversationId);
-
-  return store.conversationData.data;
+  const [, data] = await useTypedFetchFromServiceControl<Message[]>(`conversations/${conversationId}`);
+  return data;
 }
 
 function mapMessage(message: Message): MappedMessage {
@@ -159,9 +161,9 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
 const elements = ref<(Node | DefaultEdge)[]>([]);
 
 onMounted(async () => {
-  if (!state.value.data.conversation_id) return;
+  if (!props.message.conversationId) return;
 
-  const messages = await getConversation(state.value.data.conversation_id);
+  const messages = await getConversation(props.message.conversationId);
   const mappedMessages = messages.map(mapMessage);
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
@@ -191,28 +193,26 @@ function typeIcon(type: MessageType) {
 </script>
 
 <template>
-  <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
-  <LoadingSpinner v-else-if="store.conversationData.loading" />
-  <div v-else id="tree-container">
+  <div id="tree-container">
     <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
       <Controls />
-      <template #node-message="{ data }: { data: MappedMessage }">
-        <div class="node" :class="{ error: data.isError, 'current-message': data.id === store.state.data.id }">
+      <template #node-message="nodeProps">
+        <div class="node" :class="[nodeProps.data.isError && 'error', nodeProps.data.id === props.message.id && 'current-message']">
           <div class="node-text wordwrap">
-            <i v-if="data.isError" class="fa pa-flow-failed" />
-            <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
-            <div class="lead right-side-ellipsis" :title="data.nodeName">
+            <i v-if="nodeProps.data.isError" class="fa pa-flow-failed" />
+            <i class="fa" :class="typeIcon(nodeProps.data.type)" :title="nodeProps.data.type" />
+            <div class="lead righ-side-ellipsis" :title="nodeProps.data.nodeName">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-if="nodeProps.data.isError" :to="{ path: routeLinks.messages.failedMessage.link(nodeProps.data.id), query: { back: route.path } }">{{ nodeProps.data.nodeName }}</RouterLink>
+                <span v-else>{{ nodeProps.data.nodeName }}</span>
               </strong>
             </div>
             <span class="time-sent">
-              <time-since class="time-since" :date-utc="data.timeSent" />
+              <time-since class="time-since" :date-utc="nodeProps.data.timeSent" />
             </span>
-            <template v-if="data.sagaName">
+            <template v-if="nodeProps.data.sagaName">
               <i class="fa pa-flow-saga" />
-              <div class="saga lead right-side-ellipsis" :title="data.sagaName">{{ data.sagaName }}</div>
+              <div class="saga lead righ-side-ellipsis" :title="nodeProps.data.sagaName">{{ nodeProps.data.sagaName }}</div>
             </template>
           </div>
         </div>
@@ -243,13 +243,14 @@ function typeIcon(type: MessageType) {
   padding: 10px;
   border-radius: 3px;
   font-size: 12px;
+  text-align: center;
   border-width: 1px;
   border-style: solid;
   color: var(--vf-node-text);
   text-align: left;
 }
 
-.right-side-ellipsis {
+.righ-side-ellipsis {
   direction: rtl;
   text-align: left;
 }
@@ -305,11 +306,6 @@ function typeIcon(type: MessageType) {
   width: 182px;
 }
 
-.current-message {
-  border-color: #cccbcc;
-  background-color: #cccbcc !important;
-}
-
 .current-message.error {
   border-color: #be514a;
   background-color: #be514a !important;
@@ -350,10 +346,6 @@ function typeIcon(type: MessageType) {
   text-decoration: none;
 }
 
-.node-text a {
-  color: #000;
-}
-
 .error .node-text a {
   color: #be514a;
 }
diff --git a/src/Frontend/src/components/messages/HeadersView.vue b/src/Frontend/src/components/messages/HeadersView.vue
index bf5c959b3..aed43e024 100644
--- a/src/Frontend/src/components/messages/HeadersView.vue
+++ b/src/Frontend/src/components/messages/HeadersView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import { storeToRefs } from "pinia";
-
-const { headers } = storeToRefs(useMessageViewStore());
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
@@ -14,9 +14,9 @@ const toggleHover = (index: number, state: boolean) => {
 // Computed property to filter headers based on search term
 const filteredHeaders = computed(() => {
   if (!searchTerm.value) {
-    return headers.value.data;
+    return props.message.headers;
   }
-  return headers.value.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
+  return props.message.headers.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
 });
 </script>
 
@@ -32,7 +32,7 @@ const filteredHeaders = computed(() => {
       </div>
     </div>
   </div>
-  <table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
+  <table class="table" v-if="filteredHeaders.length > 0 && !props.message.headersNotFound">
     <tbody>
       <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
@@ -47,13 +47,14 @@ const filteredHeaders = computed(() => {
   </table>
 
   <!-- Message if filtered list is empty -->
-  <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
-  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-if="filteredHeaders.length <= 0 && !props.message.headersNotFound" class="alert alert-warning">No headers found matching the search term.</div>
+  <div v-if="props.message.headersNotFound" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
 </template>
 
 <style scoped>
 .headercopy {
   display: flex;
+  align-items: top;
   gap: 0.4rem;
 }
 
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index 70039df68..a0bddf9d2 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -310,10 +310,10 @@ onUnmounted(() => {
                 <span v-if="failedMessage.number_of_processing_attempts > 1" :title="'This message has already failed ' + failedMessage.number_of_processing_attempts + ' times'" class="label sidebar-label label-important metadata-label">
                   {{ failedMessage.number_of_processing_attempts - 1 }} Retry Failures
                 </span>
-                <template v-if="failedMessage.edited">
-                  <span v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
-                  <span class="metadata metadata-link"> <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of) }">View previous version</RouterLink> </span>
-                </template>
+                <span v-if="failedMessage.edited" v-tippy="`Message was edited`" class="label sidebar-label label-info metadata-label">Edited</span>
+                <span v-if="failedMessage.edited" class="metadata metadata-link">
+                  <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink>
+                </span>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
                 <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ failedMessage.receiving_endpoint.host }}</span>
diff --git a/src/Frontend/src/components/messages/StacktraceView.vue b/src/Frontend/src/components/messages/StacktraceView.vue
index 028001b30..6638ea9ea 100644
--- a/src/Frontend/src/components/messages/StacktraceView.vue
+++ b/src/Frontend/src/components/messages/StacktraceView.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
+import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
-import LoadingSpinner from "@/components/LoadingSpinner.vue";
-import { storeToRefs } from "pinia";
 
-const { state } = storeToRefs(useMessageViewStore());
+const props = defineProps<{
+  message: ExtendedFailedMessage;
+}>();
 </script>
 
 <template>
-  <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
-  <LoadingSpinner v-else-if="state.loading" />
-  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+  <CodeEditor :model-value="props.message.exception.stack_trace" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
 </template>
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
new file mode 100644
index 000000000..a6f7b3735
--- /dev/null
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import CodeEditor from "@/components/CodeEditor.vue";
+import parseContentType from "@/composables/contentTypeParser";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
+
+const store = useMessageViewStore();
+const { body: bodyState, state } = storeToRefs(store);
+
+watch(
+  () => state.value.data.body_url,
+  async () => {
+    await store.downloadBody();
+  },
+  { immediate: true }
+);
+const contentType = computed(() => parseContentType(bodyState.value.data.content_type));
+const body = computed(() => bodyState.value.data.value);
+</script>
+
+<template>
+  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
+  <LoadingSpinner v-else-if="bodyState.loading" />
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ bodyState.data.content_type }}" is not supported.</div>
+</template>
+
+<style scoped></style>
diff --git a/src/Frontend/src/components/messages/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages/DeleteMessageButton.vue
rename to src/Frontend/src/components/messages2/DeleteMessageButton.vue
diff --git a/src/Frontend/src/components/messages/EditAndRetryButton.vue b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages/EditAndRetryButton.vue
rename to src/Frontend/src/components/messages2/EditAndRetryButton.vue
diff --git a/src/Frontend/src/components/messages/ExportMessageButton.vue b/src/Frontend/src/components/messages2/ExportMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages/ExportMessageButton.vue
rename to src/Frontend/src/components/messages2/ExportMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram.vue
new file mode 100644
index 000000000..097205627
--- /dev/null
+++ b/src/Frontend/src/components/messages2/FlowDiagram.vue
@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { type DefaultEdge, MarkerType, VueFlow, type Styles, type Node } from "@vue-flow/core";
+import TimeSince from "../TimeSince.vue";
+import routeLinks from "@/router/routeLinks";
+import Message from "@/resources/Message";
+import { NServiceBusHeaders } from "@/resources/Header";
+import { Controls } from "@vue-flow/controls";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
+
+enum MessageType {
+  Event = "Event message",
+  Timeout = "Timeout message",
+  Command = "Command message",
+}
+
+interface MappedMessage {
+  nodeName: string;
+  id: string;
+  messageId: string;
+  sendingEndpoint: string;
+  receivingEndpoint: string;
+  parentId: string;
+  parentEndpoint: string;
+  type: MessageType;
+  isError: boolean;
+  sagaName: string;
+  link: {
+    name: string;
+    nodeName: string;
+  };
+  timeSent: string;
+  level?: number;
+  width?: number;
+  XPos?: number;
+}
+
+const nodeSpacingX = 300;
+const nodeSpacingY = 200;
+
+const store = useMessageViewStore();
+const { state } = storeToRefs(useMessageViewStore());
+
+async function getConversation(conversationId: string) {
+  await store.loadConversation(conversationId);
+
+  return store.conversationData.data;
+}
+
+function mapMessage(message: Message): MappedMessage {
+  let parentId = "",
+    parentEndpoint = "",
+    sagaName = "";
+  const header = message.headers.find((header) => header.key === NServiceBusHeaders.RelatedTo);
+  if (header) {
+    parentId = header.value ?? "";
+    parentEndpoint = message.headers.find((h) => h.key === "NServiceBus.OriginatingEndpoint")?.value ?? "";
+  }
+
+  const sagaHeader = message.headers.find((header) => header.key === NServiceBusHeaders.OriginatingSagaType);
+  if (sagaHeader) {
+    sagaName = sagaHeader.value?.split(", ")[0] ?? "";
+  }
+
+  const type = (() => {
+    if (message.headers.find((header) => header.key === NServiceBusHeaders.MessageIntent)?.value === "Publish") return MessageType.Event;
+    else if (message.headers.find((header) => header.key === NServiceBusHeaders.IsSagaTimeoutMessage)?.value?.toLowerCase() === "true") return MessageType.Timeout;
+    return MessageType.Command;
+  })();
+
+  return {
+    nodeName: message.message_type,
+    id: message.id,
+    messageId: message.message_id,
+    sendingEndpoint: message.sending_endpoint?.name,
+    receivingEndpoint: message.receiving_endpoint?.name,
+    parentId,
+    parentEndpoint,
+    type,
+    isError:
+      message.headers.findIndex(function (x) {
+        return x.key === NServiceBusHeaders.ExceptionInfoExceptionType;
+      }) > -1,
+    sagaName,
+    link: {
+      name: `Link ${message.id}`,
+      nodeName: message.id,
+    },
+    timeSent: message.time_sent,
+  };
+}
+
+function constructNodes(mappedMessages: MappedMessage[]): Node[] {
+  return (
+    mappedMessages
+      //group by level
+      .reduce((groups: MappedMessage[][], message: MappedMessage) => {
+        groups[message.level!] = [...(groups[message.level!] ?? []), message];
+        return groups;
+      }, [])
+      //ensure each level has their items in the same "grouped" order as the level above
+      .map((group, level, messagesByLevel) => {
+        const previousLevel = level > 0 ? messagesByLevel[level - 1] : null;
+        return group.sort(
+          (a, b) =>
+            (previousLevel?.findIndex((plMessage) => a.parentId === plMessage.messageId && a.parentEndpoint === plMessage.receivingEndpoint) ?? 1) -
+            (previousLevel?.findIndex((plMessage) => b.parentId === plMessage.messageId && b.parentEndpoint === plMessage.receivingEndpoint) ?? 1)
+        );
+      })
+      //flatten to actual flow diagram nodes, with positioning based on parent node/level
+      .flatMap((group, level, messagesByLevel) => {
+        const previousLevel = level > 0 ? messagesByLevel[level - 1] : null;
+        return group.reduce(
+          ({ result, currentWidth, previousParent }, message) => {
+            //position on current level needs to be based on parent Node, so see if one exists
+            const parentMessage = previousLevel?.find((plMessage) => message.parentId === plMessage.messageId && message.parentEndpoint === plMessage.receivingEndpoint) ?? null;
+            //if the current parent node is the same as the previous parent node, then the current position needs to be to the right of siblings
+            const currentParentWidth = previousParent === parentMessage ? currentWidth : 0;
+            const startX = parentMessage == null ? 0 : parentMessage.XPos! - parentMessage.width! / 2;
+            //store the position of the node against the message, so child nodes can use it to determine their start position
+            message.XPos = startX + (currentParentWidth + message.width! / 2);
+            return {
+              result: [
+                ...result,
+                {
+                  id: `${message.messageId}##${message.receivingEndpoint}`,
+                  type: "message",
+                  data: message,
+                  label: message.nodeName,
+                  position: { x: message.XPos * nodeSpacingX, y: message.level! * nodeSpacingY },
+                },
+              ],
+              currentWidth: currentParentWidth + message.width!,
+              previousParent: parentMessage,
+            };
+          },
+          { result: [] as Node[], currentWidth: 0, previousParent: null as MappedMessage | null }
+        ).result;
+      })
+  );
+}
+
+function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
+  return mappedMessages
+    .filter((message) => message.parentId)
+    .map((message) => ({
+      id: `${message.parentId}##${message.messageId}`,
+      source: `${message.parentId}##${message.parentEndpoint}`,
+      target: `${message.messageId}##${message.receivingEndpoint}`,
+      markerEnd: MarkerType.ArrowClosed,
+      style: {
+        "stroke-dasharray": message.type === MessageType.Event && "5, 3",
+      } as Styles,
+    }));
+}
+
+const elements = ref<(Node | DefaultEdge)[]>([]);
+
+onMounted(async () => {
+  if (!state.value.data.conversation_id) return;
+
+  const messages = await getConversation(state.value.data.conversation_id);
+  const mappedMessages = messages.map(mapMessage);
+
+  const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
+    message.level = level;
+    const children = mappedMessages.filter((mm) => mm.parentId === message.messageId && mm.parentEndpoint === message.receivingEndpoint);
+    message.width =
+      children.length === 0
+        ? 1 //leaf node
+        : children.map((child) => (child.width == null ? assignDescendantLevelsAndWidth(child, level + 1) : child)).reduce((sum, { width }) => sum + width!, 0);
+    return message;
+  };
+  for (const root of mappedMessages.filter((message) => !message.parentId)) assignDescendantLevelsAndWidth(root);
+
+  elements.value = [...constructNodes(mappedMessages), ...constructEdges(mappedMessages)];
+});
+
+function typeIcon(type: MessageType) {
+  switch (type) {
+    case MessageType.Timeout:
+      return "pa-flow-timeout";
+    case MessageType.Event:
+      return "pa-flow-event";
+    default:
+      return "pa-flow-command";
+  }
+}
+</script>
+
+<template>
+  <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
+  <LoadingSpinner v-else-if="store.conversationData.loading" />
+  <div v-else id="tree-container">
+    <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
+      <Controls />
+      <template #node-message="{ data }: { data: MappedMessage }">
+        <div class="node" :class="{ error: data.isError, 'current-message': data.id === store.state.data.id }">
+          <div class="node-text wordwrap">
+            <i v-if="data.isError" class="fa pa-flow-failed" />
+            <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
+            <div class="lead right-side-ellipsis" :title="data.nodeName">
+              <strong>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
+              </strong>
+            </div>
+            <span class="time-sent">
+              <time-since class="time-since" :date-utc="data.timeSent" />
+            </span>
+            <template v-if="data.sagaName">
+              <i class="fa pa-flow-saga" />
+              <div class="saga lead right-side-ellipsis" :title="data.sagaName">{{ data.sagaName }}</div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </VueFlow>
+  </div>
+</template>
+
+<style>
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+@import "@vue-flow/controls/dist/style.css";
+</style>
+
+<style scoped>
+@import "../list.css";
+
+#tree-container {
+  width: 90vw;
+  height: 60vh;
+}
+
+.node {
+  --vf-handle: var(--vf-node-color, #1a192b);
+  --vf-box-shadow: var(--vf-node-color, #1a192b);
+  background: var(--vf-node-bg);
+  border-color: var(--vf-node-color, #1a192b);
+  padding: 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  border-width: 1px;
+  border-style: solid;
+  color: var(--vf-node-text);
+  text-align: left;
+}
+
+.right-side-ellipsis {
+  direction: rtl;
+  text-align: left;
+}
+
+.node {
+  background-color: #fff;
+  border-color: #cccbcc;
+  border-width: 3px;
+}
+
+.node .error {
+  border-color: red;
+}
+
+.node text {
+  font: 12px sans-serif;
+}
+
+.node .time-sent .time-since {
+  display: block;
+  margin-left: 20px;
+  padding-top: 0;
+  color: #777f7f;
+  text-transform: capitalize;
+}
+
+.node-text {
+  padding: 3px 8px 1px;
+}
+
+.node-text i {
+  display: inline-block;
+  position: relative;
+  top: -1px;
+  margin-right: 5px;
+  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(346deg) brightness(104%) contrast(104%);
+}
+
+.node-text .lead {
+  display: inline-block;
+  width: 204px;
+  position: relative;
+  top: 4px;
+}
+
+.error .node-text .lead,
+.current-message.error .node-text .lead {
+  width: 184px;
+}
+
+.node-text .lead.saga {
+  font-weight: normal;
+  width: 182px;
+}
+
+.current-message {
+  border-color: #cccbcc;
+  background-color: #cccbcc !important;
+}
+
+.current-message.error {
+  border-color: #be514a;
+  background-color: #be514a !important;
+}
+
+.current-message.error .node-text,
+.current-message .node-text .lead {
+  color: #fff !important;
+}
+
+.error .node-text i:not(.pa-flow-saga) {
+  filter: brightness(0) saturate(100%) invert(46%) sepia(9%) saturate(4493%) hue-rotate(317deg) brightness(81%) contrast(82%);
+}
+
+.current-message.error .node-text i {
+  color: #fff;
+  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(21deg) brightness(100%) contrast(106%);
+}
+
+.current-message.error .node-text strong {
+  color: #fff;
+}
+
+.current-message.error .node-text .time-sent .time-since {
+  color: #ffcecb !important;
+}
+
+.error {
+  border-color: #be514a;
+}
+
+.current-message.error .node-text a {
+  color: #fff;
+}
+
+.current-message.error .node-text a:hover {
+  cursor: text;
+  text-decoration: none;
+}
+
+.node-text a {
+  color: #000;
+}
+
+.error .node-text a {
+  color: #be514a;
+}
+
+.error .node-text .time-sent .time-since {
+  color: #be514a;
+}
+
+.error .node-text .lead.saga {
+  color: #be514a;
+}
+
+.error .node-text a:hover {
+  text-decoration: underline;
+}
+
+.pa-flow-failed {
+  background-image: url("@/assets/failed-msg.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+
+.pa-flow-saga {
+  background-image: url("@/assets/saga.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+  margin-left: 20px;
+}
+
+.pa-flow-timeout {
+  background-image: url("@/assets/timeout.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+
+.pa-flow-event {
+  background-image: url("@/assets/event.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+
+.pa-flow-command {
+  background-image: url("@/assets/command.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+
+path.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 2px;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
new file mode 100644
index 000000000..bf5c959b3
--- /dev/null
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
+import { computed, ref } from "vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { storeToRefs } from "pinia";
+
+const { headers } = storeToRefs(useMessageViewStore());
+
+const hoverStates = ref<Record<number, boolean>>({});
+const searchTerm = ref<string>("");
+const toggleHover = (index: number, state: boolean) => {
+  hoverStates.value[index] = state;
+};
+// Computed property to filter headers based on search term
+const filteredHeaders = computed(() => {
+  if (!searchTerm.value) {
+    return headers.value.data;
+  }
+  return headers.value.data.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()) || header.value?.toLowerCase().includes(searchTerm.value.toLowerCase()));
+});
+</script>
+
+<template>
+  <div>
+    <div class="row filters">
+      <div class="col">
+        <div class="text-search-container">
+          <div class="text-search">
+            <input type="search" aria-label="Filter by name" v-model="searchTerm" class="form-control format-text" placeholder="Search for a header key or value..." />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <table class="table" v-if="filteredHeaders.length > 0 && !headers.not_found">
+    <tbody>
+      <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
+        <td nowrap="nowrap">{{ header.key }}</td>
+        <td>
+          <div class="headercopy" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
+            <pre>{{ header.value }}</pre>
+            <CopyToClipboard v-if="hoverStates[index] && header.value" :value="header.value" :isIconOnly="true" />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <!-- Message if filtered list is empty -->
+  <div v-if="filteredHeaders.length <= 0 && !headers.not_found" class="alert alert-warning">No headers found matching the search term.</div>
+  <div v-if="headers.not_found" class="alert alert-info">Could not find message headers. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+</template>
+
+<style scoped>
+.headercopy {
+  display: flex;
+  gap: 0.4rem;
+}
+
+/*  empty filtered list message */
+.alert-warning {
+  margin-top: 10px;
+  color: #856404;
+  background-color: #fff3cd;
+  border-color: #ffeeba;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.text-search-container {
+  display: flex;
+  flex-direction: row;
+}
+.text-search {
+  width: 100%;
+  max-width: 40rem;
+}
+.format-text {
+  font-weight: unset;
+  font-size: 14px;
+  min-width: 120px;
+}
+.filters {
+  background-color: #f3f3f3;
+  margin-top: 5px;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+}
+</style>
diff --git a/src/Frontend/src/components/messages/MessageView2.vue b/src/Frontend/src/components/messages2/MessageView.vue
similarity index 91%
rename from src/Frontend/src/components/messages/MessageView2.vue
rename to src/Frontend/src/components/messages2/MessageView.vue
index 7c79dca90..6ebb34de8 100644
--- a/src/Frontend/src/components/messages/MessageView2.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -6,19 +6,19 @@ import TimeSince from "../TimeSince.vue";
 import FlowDiagram from "./FlowDiagram.vue";
 import routeLinks from "@/router/routeLinks";
 import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
-import BodyView from "@/components/messages/BodyView.vue";
-import HeadersView from "@/components/messages/HeadersView.vue";
-import StackTraceView from "@/components/messages/StacktraceView.vue";
+import BodyView from "@/components/messages2/BodyView.vue";
+import HeadersView from "@/components/messages2/HeadersView.vue";
+import StackTraceView from "@/components/messages2/StacktraceView.vue";
 import { useMessageViewStore } from "@/stores/MessageViewStore";
-import DeleteMessageButton from "@/components/messages/DeleteMessageButton.vue";
-import RestoreMessageButton from "@/components/messages/RestoreMessageButton.vue";
-import RetryMessageButton from "@/components/messages/RetryMessageButton.vue";
-import EditAndRetryButton from "@/components/messages/EditAndRetryButton.vue";
-import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
+import DeleteMessageButton from "@/components/messages2/DeleteMessageButton.vue";
+import RestoreMessageButton from "@/components/messages2/RestoreMessageButton.vue";
+import RetryMessageButton from "@/components/messages2/RetryMessageButton.vue";
+import EditAndRetryButton from "@/components/messages2/EditAndRetryButton.vue";
+import ExportMessageButton from "@/components/messages2/ExportMessageButton.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
-import MetadataLabel from "@/components/messages/MetadataLabel.vue";
+import MetadataLabel from "@/components/messages2/MetadataLabel.vue";
 
 const route = useRoute();
 const id = computed(() => route.params.id as string);
diff --git a/src/Frontend/src/components/messages/MetadataLabel.vue b/src/Frontend/src/components/messages2/MetadataLabel.vue
similarity index 100%
rename from src/Frontend/src/components/messages/MetadataLabel.vue
rename to src/Frontend/src/components/messages2/MetadataLabel.vue
diff --git a/src/Frontend/src/components/messages/RestoreMessageButton.vue b/src/Frontend/src/components/messages2/RestoreMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages/RestoreMessageButton.vue
rename to src/Frontend/src/components/messages2/RestoreMessageButton.vue
diff --git a/src/Frontend/src/components/messages/RetryMessageButton.vue b/src/Frontend/src/components/messages2/RetryMessageButton.vue
similarity index 100%
rename from src/Frontend/src/components/messages/RetryMessageButton.vue
rename to src/Frontend/src/components/messages2/RetryMessageButton.vue
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages2/StacktraceView.vue
new file mode 100644
index 000000000..028001b30
--- /dev/null
+++ b/src/Frontend/src/components/messages2/StacktraceView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import CodeEditor from "@/components/CodeEditor.vue";
+import { useMessageViewStore } from "@/stores/MessageViewStore";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
+import { storeToRefs } from "pinia";
+
+const { state } = storeToRefs(useMessageViewStore());
+</script>
+
+<template>
+  <div v-if="state.failed_to_load" class="alert alert-info">Stacktrace not available.</div>
+  <LoadingSpinner v-else-if="state.loading" />
+  <CodeEditor v-else :model-value="state.data.failure_metadata.exception?.stack_trace!" language="powershell" :read-only="true" :show-gutter="false"></CodeEditor>
+</template>
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index dc3243918..6ba66e7e7 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -109,12 +109,12 @@ const config: RouteItem[] = [
   {
     path: routeLinks.messages.failedMessage.template,
     title: "Message",
-    component: () => import("@/components/messages/MessageView2.vue"),
+    component: () => import(window.defaultConfig.showAllMessages ? "@/components/messages2/MessageView.vue" : "@/components/messages/MessageView.vue"),
   },
   {
     path: routeLinks.messages.successMessage.template,
     title: "Message",
-    component: () => import("@/components/messages/MessageView2.vue"),
+    component: () => import(window.defaultConfig.showAllMessages ? "@/components/messages2/MessageView.vue" : "@/components/messages/MessageView.vue"),
   },
   {
     path: routeLinks.monitoring.root,

From 506a349495c6e69e1158b5c75b37d69487e723ec Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 4 Apr 2025 17:19:27 +1000
Subject: [PATCH 12/16] remove flag

---
 src/Frontend/public/js/app.constants.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Frontend/public/js/app.constants.js b/src/Frontend/public/js/app.constants.js
index ca0fe5457..d138f9910 100644
--- a/src/Frontend/public/js/app.constants.js
+++ b/src/Frontend/public/js/app.constants.js
@@ -4,5 +4,4 @@ window.defaultConfig = {
   service_control_url: 'http://localhost:33333/api/',
   monitoring_urls: ['http://localhost:33633/'],
   showPendingRetry: false,
-  showAllMessages: true,
 };

From bb152f32a56cc08c8e92bde0485aabae250f4906 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 7 Apr 2025 11:27:37 +1000
Subject: [PATCH 13/16] Fixed formatting

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../src/components/messages2/DeleteMessageButton.vue         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
index 9783172e8..dc413bfd3 100644
--- a/src/Frontend/src/components/messages2/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
@@ -36,6 +36,7 @@ const handleConfirm = async () => {
         @confirm="handleConfirm"
         heading="Are you sure you want to delete this message?"
         body="If you delete, this message won't be available for retrying unless it is later restored."
-      /> </Teleport
-  ></template>
+      /> 
+    </Teleport>
+  </template>
 </template>

From 26219fbc5e6405f081520ab59966d04fe1ace72a Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 7 Apr 2025 16:44:33 +1000
Subject: [PATCH 14/16] Fix formatting issue

---
 src/Frontend/src/components/messages2/DeleteMessageButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
index dc413bfd3..63e67cf60 100644
--- a/src/Frontend/src/components/messages2/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
@@ -36,7 +36,7 @@ const handleConfirm = async () => {
         @confirm="handleConfirm"
         heading="Are you sure you want to delete this message?"
         body="If you delete, this message won't be available for retrying unless it is later restored."
-      /> 
+      />
     </Teleport>
   </template>
 </template>

From 0839e115c923ee04338021a0b67e0ee3a39a1f06 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Tue, 8 Apr 2025 19:55:52 +1000
Subject: [PATCH 15/16] Apply suggestions from code review

Co-authored-by: Phil Bastian <155411597+PhilBastian@users.noreply.github.com>
---
 src/Frontend/src/components/messages2/BodyView.vue            | 2 +-
 src/Frontend/src/components/messages2/DeleteMessageButton.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
index a6f7b3735..bac1ff20b 100644
--- a/src/Frontend/src/components/messages2/BodyView.vue
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -21,7 +21,7 @@ const body = computed(() => bodyState.value.data.value);
 </script>
 
 <template>
-  <div v-if="bodyState.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
+  <div v-if="bodyState.not_found" class="alert alert-info">Could not find the message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
   <div v-else-if="bodyState.failed_to_load" class="alert alert-info">Message body unavailable.</div>
   <LoadingSpinner v-else-if="bodyState.loading" />
   <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
index 63e67cf60..019e8ad8c 100644
--- a/src/Frontend/src/components/messages2/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
@@ -35,7 +35,7 @@ const handleConfirm = async () => {
         @cancel="isConfirmDialogVisible = false"
         @confirm="handleConfirm"
         heading="Are you sure you want to delete this message?"
-        body="If you delete, this message won't be available for retrying unless it is later restored."
+        body="If it is deleted, this message won't be available for retrying unless it is later restored."
       />
     </Teleport>
   </template>

From 4f6a6a7ec85722101fe3ff388db05abdd0fff747 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 9 Apr 2025 16:05:19 +1000
Subject: [PATCH 16/16] A few changes based on feedback

---
 .../failedmessages/EditRetryDialog2.vue       | 21 +++++++++----------
 .../src/components/messages2/BodyView.vue     |  4 ++--
 .../messages2/DeleteMessageButton.vue         |  4 ++--
 .../messages2/EditAndRetryButton.vue          |  4 ++--
 .../messages2/ExportMessageButton.vue         |  4 ++--
 .../src/components/messages2/FlowDiagram.vue  |  6 +++---
 .../src/components/messages2/HeadersView.vue  |  4 ++--
 .../src/components/messages2/MessageView.vue  |  4 ++--
 .../messages2/RestoreMessageButton.vue        |  4 ++--
 .../messages2/RetryMessageButton.vue          |  4 ++--
 .../components/messages2/StacktraceView.vue   |  4 ++--
 .../{MessageViewStore.ts => MessageStore.ts}  |  7 +++----
 12 files changed, 34 insertions(+), 36 deletions(-)
 rename src/Frontend/src/stores/{MessageViewStore.ts => MessageStore.ts} (97%)

diff --git a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
index fb2d70e4d..844e2cc30 100644
--- a/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
+++ b/src/Frontend/src/components/failedmessages/EditRetryDialog2.vue
@@ -6,7 +6,7 @@ import type Header from "@/resources/Header";
 import parseContentType from "@/composables/contentTypeParser";
 import { CodeLanguage } from "@/components/codeEditorTypes";
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
@@ -52,7 +52,7 @@ let origMessageBody: string;
 const showEditAndRetryConfirmation = ref(false);
 const showCancelConfirmation = ref(false);
 const showEditRetryGenericError = ref(false);
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
 const id = computed(() => state.value.data.id ?? "");
 const messageBody = computed(() => body.value.data.value);
@@ -123,7 +123,7 @@ async function retryEditedMessage() {
 
 function initializeMessageBodyAndHeaders() {
   origMessageBody = body.value.data.value ?? "";
-  localMessage.value = {
+  const local = <LocalMessageState>{
     isBodyChanged: false,
     isBodyEmpty: false,
     isContentTypeSupported: false,
@@ -134,17 +134,15 @@ function initializeMessageBodyAndHeaders() {
     headers: headers.value.data.map((header: Header) => ({ ...header })) as HeaderWithEditing[],
     messageBody: body.value.data.value ?? "",
   };
-  localMessage.value.isBodyEmpty = false;
-  localMessage.value.isBodyChanged = false;
 
   const contentType = getContentType();
-  localMessage.value.bodyContentType = contentType;
+  local.bodyContentType = contentType;
   const parsedContentType = parseContentType(contentType);
-  localMessage.value.isContentTypeSupported = parsedContentType.isSupported;
-  localMessage.value.language = parsedContentType.language;
+  local.isContentTypeSupported = parsedContentType.isSupported;
+  local.language = parsedContentType.language;
 
   const messageIntent = getMessageIntent();
-  localMessage.value.isEvent = messageIntent === "Publish";
+  local.isEvent = messageIntent === "Publish";
 
   for (let index = 0; index < headers.value.data.length; index++) {
     const header: HeaderWithEditing = headers.value.data[index] as HeaderWithEditing;
@@ -160,13 +158,14 @@ function initializeMessageBodyAndHeaders() {
       header.isSensitive = true;
     }
 
-    localMessage.value.headers[index] = header;
+    local.headers[index] = header;
   }
+
+  localMessage.value = local;
 }
 
 function togglePanel(panelNum: number) {
   panel.value = panelNum;
-  return false;
 }
 
 onMounted(() => {
diff --git a/src/Frontend/src/components/messages2/BodyView.vue b/src/Frontend/src/components/messages2/BodyView.vue
index bac1ff20b..4616b8766 100644
--- a/src/Frontend/src/components/messages2/BodyView.vue
+++ b/src/Frontend/src/components/messages2/BodyView.vue
@@ -2,11 +2,11 @@
 import { computed, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { body: bodyState, state } = storeToRefs(store);
 
 watch(
diff --git a/src/Frontend/src/components/messages2/DeleteMessageButton.vue b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
index 019e8ad8c..42f527770 100644
--- a/src/Frontend/src/components/messages2/DeleteMessageButton.vue
+++ b/src/Frontend/src/components/messages2/DeleteMessageButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
@@ -8,7 +8,7 @@ import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/EditAndRetryButton.vue b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
index 185827dbe..7a658bc84 100644
--- a/src/Frontend/src/components/messages2/EditAndRetryButton.vue
+++ b/src/Frontend/src/components/messages2/EditAndRetryButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
@@ -8,7 +8,7 @@ import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/ExportMessageButton.vue b/src/Frontend/src/components/messages2/ExportMessageButton.vue
index 7276f97a5..4cad84a63 100644
--- a/src/Frontend/src/components/messages2/ExportMessageButton.vue
+++ b/src/Frontend/src/components/messages2/ExportMessageButton.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { useDownloadFileFromString } from "@/composables/fileDownloadCreator";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { ref } from "vue";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const executing = ref(false);
 
 async function exportMessage() {
diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram.vue
index 097205627..93b188bd7 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram.vue
@@ -6,7 +6,7 @@ import routeLinks from "@/router/routeLinks";
 import Message from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
 import { Controls } from "@vue-flow/controls";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
@@ -40,8 +40,8 @@ interface MappedMessage {
 const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
-const store = useMessageViewStore();
-const { state } = storeToRefs(useMessageViewStore());
+const store = useMessageStore();
+const { state } = storeToRefs(useMessageStore());
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);
diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue
index bf5c959b3..fe655a054 100644
--- a/src/Frontend/src/components/messages2/HeadersView.vue
+++ b/src/Frontend/src/components/messages2/HeadersView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import { computed, ref } from "vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { storeToRefs } from "pinia";
 
-const { headers } = storeToRefs(useMessageViewStore());
+const { headers } = storeToRefs(useMessageStore());
 
 const hoverStates = ref<Record<number, boolean>>({});
 const searchTerm = ref<string>("");
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index 6ebb34de8..b21613616 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -9,7 +9,7 @@ import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnect
 import BodyView from "@/components/messages2/BodyView.vue";
 import HeadersView from "@/components/messages2/HeadersView.vue";
 import StackTraceView from "@/components/messages2/StacktraceView.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import DeleteMessageButton from "@/components/messages2/DeleteMessageButton.vue";
 import RestoreMessageButton from "@/components/messages2/RestoreMessageButton.vue";
 import RetryMessageButton from "@/components/messages2/RetryMessageButton.vue";
@@ -25,7 +25,7 @@ const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
 const isError = computed(() => messageId.value === undefined);
 const isMassTransitConnected = useIsMassTransitConnected();
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const tabs = computed(() => {
   const currentTabs = [
diff --git a/src/Frontend/src/components/messages2/RestoreMessageButton.vue b/src/Frontend/src/components/messages2/RestoreMessageButton.vue
index f707eaf86..dbad6f243 100644
--- a/src/Frontend/src/components/messages2/RestoreMessageButton.vue
+++ b/src/Frontend/src/components/messages2/RestoreMessageButton.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/RetryMessageButton.vue b/src/Frontend/src/components/messages2/RetryMessageButton.vue
index e65387c65..b95d60f32 100644
--- a/src/Frontend/src/components/messages2/RetryMessageButton.vue
+++ b/src/Frontend/src/components/messages2/RetryMessageButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
@@ -8,7 +8,7 @@ import { MessageStatus } from "@/resources/Message";
 import { storeToRefs } from "pinia";
 import { FailedMessageStatus } from "@/resources/FailedMessage";
 
-const store = useMessageViewStore();
+const store = useMessageStore();
 const { state } = storeToRefs(store);
 const isConfirmDialogVisible = ref(false);
 
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages2/StacktraceView.vue
index 028001b30..8b04bcae2 100644
--- a/src/Frontend/src/components/messages2/StacktraceView.vue
+++ b/src/Frontend/src/components/messages2/StacktraceView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import CodeEditor from "@/components/CodeEditor.vue";
-import { useMessageViewStore } from "@/stores/MessageViewStore";
+import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
 
-const { state } = storeToRefs(useMessageViewStore());
+const { state } = storeToRefs(useMessageStore());
 </script>
 
 <template>
diff --git a/src/Frontend/src/stores/MessageViewStore.ts b/src/Frontend/src/stores/MessageStore.ts
similarity index 97%
rename from src/Frontend/src/stores/MessageViewStore.ts
rename to src/Frontend/src/stores/MessageStore.ts
index c94ace77f..a3cfa5326 100644
--- a/src/Frontend/src/stores/MessageViewStore.ts
+++ b/src/Frontend/src/stores/MessageStore.ts
@@ -60,7 +60,7 @@ interface Model {
   }>;
 }
 
-export const useMessageViewStore = defineStore("MessageViewStore", () => {
+export const useMessageStore = defineStore("MessageStore", () => {
   const headers = ref<DataContainer<Header[]>>({ data: [] });
   const body = ref<DataContainer<{ value?: string; content_type?: string }>>({ data: {} });
   const state = reactive<DataContainer<Model>>({ data: { failure_metadata: {}, failure_status: {}, dialog_status: {} } });
@@ -78,7 +78,6 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
   }
 
   async function loadFailedMessage(id: string) {
-    state.data.id = id;
     state.loading = true;
     state.failed_to_load = false;
     state.not_found = false;
@@ -308,7 +307,7 @@ export const useMessageViewStore = defineStore("MessageViewStore", () => {
 });
 
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useMessageViewStore, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useMessageStore, import.meta.hot));
 }
 
-export type MessageViewStore = ReturnType<typeof useMessageViewStore>;
+export type MessageStore = ReturnType<typeof useMessageStore>;