diff --git a/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue b/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
index 5b860d9..7da1eb6 100644
--- a/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
+++ b/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
@@ -5,29 +5,31 @@
             <span class="item-status" :class="props.dataView.status">{{ props.dataView.status }}</span>
         </div>
         <div class="item-desc">{{ props.dataView.tool.description }}</div>
-        
+
         <div v-if="props.dataView.function !== undefined" class="item-result">
-            <span class="item-label">Function</span>
-            <pre class="item-json">{{ props.dataView.function.name }}</pre>
-            <span class="item-label">Arguments</span>
-            <pre class="item-json">{{ formatJson(props.dataView.function.arguments) }}</pre>
+            <div class="item-label">Function</div>
+            <div class="item-json">{{ props.dataView.function.name }}</div>
         </div>
 
-    <div v-if="props.dataView.result !== undefined" class="item-result">
-        <span class="item-label">Result</span>
-        <template v-if="Array.isArray(props.dataView.result)">
-            <div
-                v-for="(item, idx) in props.dataView.result"
-                :key="idx"
-                class="result-block"
-            >
-                <pre class="item-json" v-if="typeof item === 'object' && item.text !== undefined">{{ item.text }}</pre>
-                <pre class="item-json" v-else>{{ formatJson(item) }}</pre>
-            </div>
-        </template>
-        <pre class="item-json" v-else-if="typeof props.dataView.result === 'string'">{{ props.dataView.result }}</pre>
-        <pre class="item-json" v-else>{{ formatJson(props.dataView.result) }}</pre>
-    </div>
+        <div v-if="props.dataView.function !== undefined" class="item-result">
+            <span class="item-label">Arguments</span>
+            <json-render :json="props.dataView.function.arguments" />
+        </div>
+
+        <div v-if="props.dataView.result !== undefined" class="item-result">
+            <span class="item-label">Result</span>
+            <template v-if="Array.isArray(props.dataView.result)">
+                <div v-for="(item, idx) in props.dataView.result" :key="idx" class="result-block"
+                    :class="[props.dataView.status]">
+                    <pre class="item-json"
+                        v-if="typeof item === 'object' && item.text !== undefined">{{ item.text }}</pre>
+                    <pre class="item-json" v-else>{{ formatJson(item) }}</pre>
+                </div>
+            </template>
+            <pre class="item-json"
+                v-else-if="typeof props.dataView.result === 'string'">{{ props.dataView.result }}</pre>
+            <pre class="item-json" v-else>{{ formatJson(props.dataView.result) }}</pre>
+        </div>
     </div>
     <div v-else class="diagram-item-record">
         <div class="item-header">
@@ -41,6 +43,8 @@
 import type { PropType } from 'vue';
 import type { NodeDataView } from './diagram';
 
+import JsonRender from '@/components/json-render/index.vue';
+
 const props = defineProps({
     dataView: {
         type: Object as PropType<NodeDataView | undefined | null>,
@@ -61,7 +65,7 @@ function formatJson(obj: any) {
 .diagram-item-record {
     padding: 14px 18px;
     border-radius: 8px;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
     font-size: 15px;
     max-width: 300px;
     word-break: break-all;
@@ -87,11 +91,26 @@ function formatJson(obj: any) {
     margin-left: 8px;
     text-transform: capitalize;
 }
-.item-status.running { color: #2196f3; }
-.item-status.success { color: #43a047; }
-.item-status.error { color: #e53935; }
-.item-status.waiting { color: #aaa; }
-.item-status.default { color: #888; }
+
+.item-status.running {
+    color: #2196f3;
+}
+
+.item-status.success {
+    color: #43a047;
+}
+
+.item-status.error {
+    color: #e53935;
+}
+
+.item-status.waiting {
+    color: #aaa;
+}
+
+.item-status.default {
+    color: #888;
+}
 
 .item-desc {
     margin-bottom: 8px;
@@ -108,11 +127,6 @@ function formatJson(obj: any) {
 .item-json {
     border-radius: 4px;
     padding: 6px 10px;
-    font-size: 13px;
-    font-family: var(--code-font-family, monospace);
-    margin: 2px 0 8px 0;
-    white-space: pre-wrap;
-    word-break: break-all;
 }
 
 .item-result {
@@ -122,6 +136,14 @@ function formatJson(obj: any) {
 .result-block {
     margin-bottom: 6px;
     border-radius: .5em;
-    background-color: rgba(245, 108, 108, 0.3);
+    margin: 5px 0;
+}
+
+.result-block.error {
+    background-color: rgba(245, 108, 108, 0.5);
+}
+
+.result-block.success {
+    background-color: rgba(67, 160, 71, 0.5);
 }
 </style>
\ No newline at end of file