fix(llma): Use HighlightedJSONViewer for span input/output display (#42573)

Co-authored-by: Claude <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

frontend/__snapshots__/scenes-app-llm-analytics-trace--full-specific-event--dark.png

@@ -1,3 +1,6 @@
+import { HighlightedJSONViewer } from 'lib/components/HighlightedJSONViewer'
+import { isObject } from 'lib/utils'
+
 import { ConversationMessagesDisplay } from '../ConversationDisplay/ConversationMessagesDisplay'
 import { useAIData } from '../hooks/useAIData'
 import { normalizeMessages } from '../utils'
@@ -77,19 +80,27 @@ export function EventContentDisplayAsync({
         <div className="space-y-4">
             <div>
                 <h3 className="font-semibold mb-2">Input</h3>
-                <pre className="p-2 bg-surface-secondary rounded text-xs overflow-auto">
-                    {JSON.stringify(input, null, 2)}
-                </pre>
+                <div className="p-2 bg-surface-secondary rounded text-xs overflow-auto">
+                    {isObject(input) ? (
+                        <HighlightedJSONViewer src={input} name={null} collapsed={5} />
+                    ) : (
+                        <span className="font-mono">{JSON.stringify(input ?? null)}</span>
+                    )}
+                </div>
             </div>
             <div>
                 <h3 className="font-semibold mb-2">Output</h3>
-                <pre
+                <div
                     className={`p-2 rounded text-xs overflow-auto ${
                         raisedError ? 'bg-danger-highlight' : 'bg-surface-secondary'
                     }`}
                 >
-                    {JSON.stringify(output, null, 2)}
-                </pre>
+                    {isObject(output) ? (
+                        <HighlightedJSONViewer src={output} name={null} collapsed={5} />
+                    ) : (
+                        <span className="font-mono">{JSON.stringify(output ?? null)}</span>
+                    )}
+                </div>
             </div>
         </div>
     )