- enhanced calculation dump view

src/frontend/src/components/UI/JsonTreeViewer.vue

@@ -1,17 +1,6 @@
 <template>
-  <div class="json-tree-viewer">
-    <div class="header">
-      <h3 class="title">JSON Tree Viewer</h3>
-      <button
-          @click="toggleAll"
-          class="toggle-all-btn"
-          :class="{ 'expanded': allExpanded }"
-      >
-        {{ allExpanded ? 'Collapse All' : 'Expand All' }}
-      </button>
-    </div>
-
   <div class="tree-container">
+    <h2 class="sub-header">Json Dump</h2>
     <tree-node
         v-if="parsedData"
         :data="parsedData"
@@ -20,11 +9,6 @@
         :expanded="allExpanded"
         @toggle="onNodeToggle"
     />
-      <div v-else class="empty-state">
-        <div class="empty-icon">📄</div>
-        <p>No JSON data to display</p>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -74,63 +58,16 @@ export default {
 </script>
 
 <style scoped>
-.json-tree-viewer {
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  max-width: 800px;
-  margin: 0 auto;
-}
 
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.title {
-  color: white;
-  font-size: 20px;
-  font-weight: 600;
-  margin: 0;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-all-btn {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: white;
-  padding: 8px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  backdrop-filter: blur(10px);
-}
-
-.toggle-all-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateY(-1px);
-}
-
-.toggle-all-btn.expanded {
-  background: rgba(255, 255, 255, 0.9);
-  color: #667eea;
-}
 
 .tree-container {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 12px;
   padding: 20px;
   backdrop-filter: blur(10px);
-  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
-  max-height: 600px;
+
+  box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1);
+
   overflow-y: auto;
 }
 

src/frontend/src/components/UI/TreeNode.vue

@@ -147,7 +147,7 @@ export default {
 }
 
 .node-header:hover {
-  background: rgba(103, 126, 234, 0.1);
+  background-color: rgba(107, 134, 156, 0.05);
 }
 
 .node-header.expandable {
@@ -167,8 +167,8 @@ export default {
   margin-right: 6px;
   font-size: 10px;
   transition: transform 0.2s ease;
-  color: #667eea;
-  font-weight: bold;
+  color: #002F54;
+  font-weight: 500;
 }
 
 .node-header.expanded .expand-icon {
@@ -176,23 +176,23 @@ export default {
 }
 
 .key-name {
-  font-weight: 600;
+  font-weight: 500;
   margin-right: 6px;
   min-width: fit-content;
 }
 
 .key-name.root-key {
-  color: #667eea;
+  color: #002F54;
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .key-name.object-key {
-  color: #2563eb;
+  color: #002F54;
 }
 
 .key-name.array-index {
-  color: #dc2626;
+  color: #BC2B72;
 }
 
 .colon {
@@ -219,28 +219,29 @@ export default {
 }
 
 .type-badge.string {
-  background: #dcfce7;
-  color: #166534;
+  background-color: #5AF0B4;
+  color: #002F54;
 }
 
 .type-badge.number {
-  background: #dbeafe;
-  color: #1d4ed8;
+  background-color: #c3cfdf;
+  color: #002F54;
 }
 
 .type-badge.boolean {
-  background: #fef3c7;
-  color: #92400e;
+  border: 0.1rem solid #002F54;
+  background-color: transparent;
+  color: #002F54;
 }
 
 .type-badge.object {
-  background: #f3e8ff;
-  color: #7c3aed;
+  background-color: #DCDCDC;
+  color: #002F54;
 }
 
 .type-badge.array {
-  background: #fed7d7;
-  color: #c53030;
+  background-color: #BC2B72;
+  color: #ffffff;
 }
 
 .type-badge.null {
@@ -254,7 +255,7 @@ export default {
 }
 
 .node-children {
-  border-left: 2px solid rgba(103, 126, 234, 0.2);
+  border-left: 2px solid #E3EDFF;
   margin-left: 8px;
   margin-top: 4px;
   padding-left: 4px;