Using codeEditor to display initial state

Author: cquirosj

src/Frontend/src/components/CodeEditor.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
+    css?: string;
   }>(),
   { readOnly: true, showGutter: true, showCopyToClipboard: true }
 );
@@ -49,7 +50,7 @@ const extensions = computed(() => {
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel">
+  <div class="wrapper" :aria-label="ariaLabel" :class="css">
     <div v-if="props.showCopyToClipboard" class="toolbar">
       <CopyToClipboard :value="code" />
     </div>

src/Frontend/src/components/messages2/DiffViewerV2.vue renamed to src/Frontend/src/components/messages2/DiffViewer.vue

@@ -62,7 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
   extraLinesSurroundingDiff: 3,
   leftTitle: "Previous",
   rightTitle: "Current",
-  compareMethod: "diffWords",
+  compareMethod: "diffLines",
 });
 
 // Component state

src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue

@@ -3,7 +3,8 @@ import { SagaUpdateViewModel } from "./SagaDiagramParser";
 import MessageDataBox from "./MessageDataBox.vue";
 import SagaOutgoingTimeoutMessage from "./SagaOutgoingTimeoutMessage.vue";
 import SagaOutgoingMessage from "./SagaOutgoingMessage.vue";
-import DiffViewer from "@/components/messages2/DiffViewerV2.vue";
+import DiffViewer from "@/components/messages2/DiffViewer.vue";
+import CodeEditor from "@/components/CodeEditor.vue";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { ref, watch, computed } from "vue";
 
@@ -176,7 +177,7 @@ const hasStateChanges = computed(() => {
 
             <!-- Initial state display -->
             <div v-if="update.IsFirstNode" class="json-container">
-              <pre class="json-view">{{ stateDiff.formattedState }}</pre>
+              <CodeEditor css="monospace-code" :model-value="stateDiff.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" />
             </div>
 
             <!-- No changes message -->
@@ -392,17 +393,7 @@ const hasStateChanges = computed(() => {
 }
 
 .json-container {
-  max-height: 300px;
-  overflow-y: auto;
-  background-color: #f8f8f8;
-}
-.json-view {
-  margin: 0;
-  padding: 8px;
-  white-space: pre-wrap;
-  font-family: monospace;
-  font-size: 0.75rem;
-  line-height: 1.4;
+  background-color: transparent;
 }
 
 .no-changes-message {
@@ -412,6 +403,12 @@ const hasStateChanges = computed(() => {
   color: #666;
 }
 
+/* Monospace font styling that matches DiffViewer */
+:deep(.monospace-code) .cm-editor {
+  font-family: monospace;
+  font-size: 0.75rem;
+}
+
 @-webkit-keyframes blink-border {
   0%,
   100% {