More legible history entries

Author: colin-grant-work

packages/ai-history/src/browser/ai-history-communication-card.tsx

@@ -23,9 +23,9 @@ export interface CommunicationCardProps {
 
 export const CommunicationCard: React.FC<CommunicationCardProps> = ({ entry }) => {
     // Format JSON with error handling
-    const formatJson = (data: unknown): string => {
+    const formatJson = (data: unknown): React.ReactNode => {
         try {
-            return JSON.stringify(data, undefined, 2);
+            return JSON.stringify(data, undefined, 2).split(/(?:\\r)?\\n/).flatMap(stringChunk => [stringChunk, <br/>]);
         } catch (error) {
             console.error('Error formatting JSON:', error);
             return 'Error formatting data';

packages/ai-history/src/browser/style/ai-history.css

@@ -110,6 +110,7 @@
 .theia-card-request pre,
 .theia-card-response pre {
   background-color: var(--theia-editor-background);
+  text-wrap: wrap;
 }
 
 .theia-card-request,