From b7f65d3eb1502db79039b3819730df3a5af190ce Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 8 May 2025 16:33:56 +1000
Subject: [PATCH 1/3] Adding new stacktrace visualiser

Based on https://github.com/elmahio/netStack.js/tree/main
---
 .../messages2/StacktraceFormatter.vue         | 211 ++++++++++++++++++
 .../components/messages2/StacktraceView.vue   |  33 ++-
 2 files changed, 242 insertions(+), 2 deletions(-)
 create mode 100644 src/Frontend/src/components/messages2/StacktraceFormatter.vue

diff --git a/src/Frontend/src/components/messages2/StacktraceFormatter.vue b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
new file mode 100644
index 000000000..440e51ecf
--- /dev/null
+++ b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+// Define TypeScript interfaces for settings and supported languages
+interface NetStackOptions {
+  frame?: string;
+  type?: string;
+  method?: string;
+  paramsList?: string;
+  paramType?: string;
+  paramName?: string;
+  file?: string;
+  line?: string;
+}
+
+interface Language {
+  name: string;
+  at: string;
+  in: string;
+  line: string;
+}
+
+type Text = string;
+
+interface Node {
+  params: Array<{ name: string; type: string }>;
+  type: string;
+  lineNumber?: number;
+  file?: string;
+  method: string;
+  spaces: string;
+}
+
+type Element = Text | Node;
+
+// Props
+const props = withDefaults(defineProps<{ stackTrace: string; options?: NetStackOptions }>(), {
+  options: () => ({
+    frame: "st-frame",
+    type: "st-type",
+    method: "st-method",
+    paramsList: "st-frame-params",
+    paramType: "st-param-type",
+    paramName: "st-param-name",
+    file: "st-file",
+    line: "st-line",
+  }),
+});
+
+// Supported languages and their keywords
+const languages: Language[] = [
+  { name: "english", at: "at", in: "in", line: "line" },
+  { name: "danish", at: "ved", in: "i", line: "linje" },
+  { name: "german", at: "bei", in: "in", line: "Zeile" },
+  { name: "spanish", at: "en", in: "en", line: "línea" },
+  { name: "russian", at: "в", in: "в", line: "строка" },
+  { name: "chinese", at: "在", in: "位置", line: "行号" },
+];
+
+// Reactive variables and setup state
+const formattedStack = ref<Element[]>([]);
+const selectedLanguage = ref<Language>(languages[0]);
+
+// Helper function to detect languages in the stack trace
+const detectLanguagesInOrder = (text: string): Language[] => {
+  const languageRegexes = {
+    english: /\s+at .*?\)/g,
+    danish: /\s+ved .*?\)/g,
+    german: /\s+bei .*?\)/g,
+    spanish: /\s+en .*?\)/g,
+    russian: /\s+в .*?\)/g,
+    chinese: /\s+在 .*?\)/g,
+  };
+
+  const detectedLanguages: Language[] = [];
+  for (const lang in languageRegexes) {
+    if (languageRegexes[lang as keyof typeof languageRegexes].test(text)) {
+      const foundLang = languages.find((l) => l.name === lang);
+      if (foundLang) {
+        detectedLanguages.push(foundLang);
+      }
+    }
+  }
+
+  return detectedLanguages;
+};
+
+// Core formatting logic
+const formatStackTrace = (stackTrace: string, selectedLang: Language): Element[] => {
+  const lines = stackTrace.split("\n");
+  const fileAndLineNumberRegEx = new RegExp(`${selectedLang.in} (.+):${selectedLang.line} (\\d+)`);
+  const atRegex = new RegExp(`(\\s*)(${selectedLang.at}) (.+?)\\((.*?)\\)`);
+
+  return lines.map((line) => {
+    const match = line.match(atRegex);
+    if (match) {
+      const [, spaces, , methodWithType, paramsWithFile] = match;
+
+      const [type, method] = (() => {
+        const parts = methodWithType.split(".");
+        const method = parts.pop() ?? "";
+        const type = parts.join(".");
+        return [type, method];
+      })();
+
+      const params = paramsWithFile.split(", ").map((param) => {
+        const [paramType, paramName] = param.split(" ");
+        return { name: paramName, type: paramType };
+      });
+
+      const matchFile = line.match(fileAndLineNumberRegEx);
+      let file, lineNumber;
+      if (matchFile) {
+        [, file, lineNumber] = matchFile;
+      }
+
+      return <Node>{ method, type, params, file, lineNumber, spaces };
+    } else {
+      return line;
+    }
+  });
+};
+
+// Process the provided stack trace
+const processStackTrace = (): void => {
+  const rawContent = props.stackTrace;
+  const detectedLanguages = detectLanguagesInOrder(rawContent);
+
+  if (!detectedLanguages.length) {
+    formattedStack.value = [rawContent]; // If no language detected, output raw content
+    return;
+  }
+
+  selectedLanguage.value = detectedLanguages[0]; // Use the first detected language
+  formattedStack.value = formatStackTrace(rawContent, selectedLanguage.value);
+};
+
+watch(
+  () => props.stackTrace,
+  () => {
+    processStackTrace();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <!-- prettier-ignore -->
+  <div class="stack-trace-container">
+    <template v-for="line in formattedStack" :key="line">
+      <template v-if="typeof line === 'string'">
+        <span>{{ line }}</span>
+      </template>
+      <div v-else>
+        {{ line.spaces }}{{ selectedLanguage.at }}
+        <span :class="props.options.frame">
+          <span :class="props.options.type">{{ line.type }}</span>.<span :class="props.options.method">{{ line.method }}</span>(<span :class="props.options.paramsList">
+            <template v-for="(param, index) in line.params" :key="param.name">
+              <span :class="props.options.paramType"> {{ param.type }}</span> <span :class="props.options.paramName">{{ param.name }}</span>
+              <span v-if="index !== line.params.length - 1">, </span>
+            </template>
+        </span>)
+        </span>
+        <template v-if="line.file">
+          {{ selectedLanguage.in }} <span :class="props.options.file">{{ line.file }}</span>:{{ selectedLanguage.line }} <span :class="props.options.line">{{ line.lineNumber }}</span>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.stack-trace-container {
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.st-frame {
+  color: #007bff;
+}
+
+.st-type {
+  color: #d63384;
+}
+
+.st-method {
+  color: #28a745;
+}
+
+.st-file {
+  color: #fd7e14;
+}
+
+.st-line {
+  color: #6c757d;
+}
+
+.st-param-type {
+  font-style: italic;
+  color: #6f42c1;
+}
+
+.st-param-name {
+  font-weight: bold;
+  color: #343a40;
+}
+
+.st-frame-params {
+  color: #495057;
+}
+</style>
diff --git a/src/Frontend/src/components/messages2/StacktraceView.vue b/src/Frontend/src/components/messages2/StacktraceView.vue
index 8b04bcae2..fcbfa546f 100644
--- a/src/Frontend/src/components/messages2/StacktraceView.vue
+++ b/src/Frontend/src/components/messages2/StacktraceView.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import CodeEditor from "@/components/CodeEditor.vue";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import StacktraceFormatter from "@/components/messages2/StacktraceFormatter.vue";
+import CopyToClipboard from "@/components/CopyToClipboard.vue";
 
 const { state } = storeToRefs(useMessageStore());
 </script>
@@ -10,5 +11,33 @@ const { state } = storeToRefs(useMessageStore());
 <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>
+  <div v-else class="wrapper">
+    <div class="toolbar">
+      <CopyToClipboard class="clipboard" :value="state.data.failure_metadata.exception?.stack_trace!" />
+    </div>
+    <StacktraceFormatter :stack-trace="state.data.failure_metadata.exception?.stack_trace!" />
+  </div>
 </template>
+
+<style scoped>
+.toolbar {
+  background-color: #f3f3f3;
+  border: #8c8c8c 1px solid;
+  border-radius: 3px;
+  padding: 5px;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.wrapper {
+  margin-top: 5px;
+  margin-bottom: 15px;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+}
+</style>

From 2acf2fd4acc6ffe6705c21d9d1804847a626d8b4 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Fri, 9 May 2025 10:43:17 -0600
Subject: [PATCH 2/3] removed <!-- prettier-ignore -->

---
 .../src/components/messages2/StacktraceFormatter.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Frontend/src/components/messages2/StacktraceFormatter.vue b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
index 440e51ecf..8b8ded097 100644
--- a/src/Frontend/src/components/messages2/StacktraceFormatter.vue
+++ b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
@@ -145,7 +145,6 @@ watch(
 </script>
 
 <template>
-  <!-- prettier-ignore -->
   <div class="stack-trace-container">
     <template v-for="line in formattedStack" :key="line">
       <template v-if="typeof line === 'string'">
@@ -154,15 +153,18 @@ watch(
       <div v-else>
         {{ line.spaces }}{{ selectedLanguage.at }}
         <span :class="props.options.frame">
-          <span :class="props.options.type">{{ line.type }}</span>.<span :class="props.options.method">{{ line.method }}</span>(<span :class="props.options.paramsList">
+          <span :class="props.options.type">{{ line.type }}</span
+          >.<span :class="props.options.method">{{ line.method }}</span
+          >(<span :class="props.options.paramsList">
             <template v-for="(param, index) in line.params" :key="param.name">
               <span :class="props.options.paramType"> {{ param.type }}</span> <span :class="props.options.paramName">{{ param.name }}</span>
               <span v-if="index !== line.params.length - 1">, </span>
-            </template>
-        </span>)
+            </template> </span
+          >)
         </span>
         <template v-if="line.file">
-          {{ selectedLanguage.in }} <span :class="props.options.file">{{ line.file }}</span>:{{ selectedLanguage.line }} <span :class="props.options.line">{{ line.lineNumber }}</span>
+          {{ selectedLanguage.in }} <span :class="props.options.file">{{ line.file }}</span
+          >:{{ selectedLanguage.line }} <span :class="props.options.line">{{ line.lineNumber }}</span>
         </template>
       </div>
     </template>

From afcfb3451a20e9ad5e57925643ec69b178918b41 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 12 May 2025 14:18:39 +1000
Subject: [PATCH 3/3] Update
 src/Frontend/src/components/messages2/StacktraceFormatter.vue

Co-authored-by: Phil Bastian <155411597+PhilBastian@users.noreply.github.com>
---
 .../src/components/messages2/StacktraceFormatter.vue   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Frontend/src/components/messages2/StacktraceFormatter.vue b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
index 8b8ded097..e1a6180ba 100644
--- a/src/Frontend/src/components/messages2/StacktraceFormatter.vue
+++ b/src/Frontend/src/components/messages2/StacktraceFormatter.vue
@@ -178,19 +178,19 @@ watch(
 }
 
 .st-frame {
-  color: #007bff;
+  color: #00729c;
 }
 
 .st-type {
-  color: #d63384;
+  color: #a11;
 }
 
 .st-method {
-  color: #28a745;
+  color: #164;
 }
 
 .st-file {
-  color: #fd7e14;
+  color: #c67b3d;
 }
 
 .st-line {
@@ -199,7 +199,7 @@ watch(
 
 .st-param-type {
   font-style: italic;
-  color: #6f42c1;
+  color: #6b82ce;
 }
 
 .st-param-name {