From 29f06cc24bdae2d87df5189277d9395388855820 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sat, 4 Apr 2026 08:02:37 +0700
Subject: [PATCH] fix(desktop): replace MarkdownRenderer with plain pre in
 trace span preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TraceContentPreview was rendering JSON through CodeBlock with oneDark theme,
causing black background spans in light mode. Use plain <pre> with JSON
pretty-print instead — matches the original trace detail rendering.
---
 .../src/components/traces/trace-span-tree.tsx | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/ui/desktop/frontend/src/components/traces/trace-span-tree.tsx b/ui/desktop/frontend/src/components/traces/trace-span-tree.tsx
index 921f6c11..13a4a4df 100644
--- a/ui/desktop/frontend/src/components/traces/trace-span-tree.tsx
+++ b/ui/desktop/frontend/src/components/traces/trace-span-tree.tsx
@@ -1,7 +1,7 @@
 // Span tree rendering — builds and displays hierarchical trace spans.
 
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MarkdownRenderer } from '../chat/MarkdownRenderer'
 import type { SpanData } from '../../types/trace'
 import { formatDuration, formatTokens, statusClass, spanTypeIcon } from './trace-detail-formatters'
 
@@ -35,22 +35,31 @@ export function buildSpanTree(spans: SpanData[]): SpanNode[] {
 }
 
 function TraceContentPreview({ text }: { text?: string }) {
+  const [copied, setCopied] = useState(false)
   if (!text) return null
   const trimmed = text.trim()
-  // Auto-format JSON into a markdown code block
+  // Pretty-print JSON if valid
+  let display = trimmed
+  let lang = ''
   if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
-    try {
-      const formatted = JSON.stringify(JSON.parse(trimmed), null, 2)
-      return (
-        <div className="max-h-[40vh] overflow-y-auto overflow-x-hidden">
-          <MarkdownRenderer content={'```json\n' + formatted + '\n```'} />
-        </div>
-      )
-    } catch { /* not valid JSON, fall through */ }
+    try { display = JSON.stringify(JSON.parse(trimmed), null, 2); lang = 'json' } catch { /* not valid JSON */ }
+  }
+  const handleCopy = () => {
+    navigator.clipboard.writeText(display)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
   }
   return (
-    <div className="max-h-[40vh] overflow-y-auto overflow-x-hidden">
-      <MarkdownRenderer content={text} />
+    <div className="rounded-lg border border-border overflow-hidden">
+      {lang && (
+        <div className="flex items-center justify-between px-3 py-1 bg-surface-tertiary text-[11px]">
+          <span className="text-text-muted font-mono">{lang}</span>
+          <button onClick={handleCopy} className="text-text-muted hover:text-text-primary transition-colors cursor-pointer">
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+        </div>
+      )}
+      <pre className="text-xs text-text-primary whitespace-pre-wrap p-3 max-h-[40vh] overflow-y-auto overscroll-contain">{display}</pre>
     </div>
   )
 }