better raw data

novuhq · Dec 8, 2024 · 0717d3c · 0717d3c
1 parent c5b03f2
commit 0717d3c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/apps/dashboard/src/components/activity/activity-panel.tsx b/apps/dashboard/src/components/activity/activity-panel.tsx
@@ -123,6 +123,7 @@ export function ActivityPanel({ activityId, onActivitySelect }: ActivityPanelPro
       initial={{ opacity: 0.7 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5, ease: 'easeOut' }}
+      className="h-full overflow-auto"
     >
       <div>
         <div className="flex items-center gap-2 border-b border-t border-neutral-200 border-b-neutral-100 p-2">

diff --git a/apps/dashboard/src/components/activity/execution-detail-item.tsx b/apps/dashboard/src/components/activity/execution-detail-item.tsx
@@ -40,6 +40,29 @@ export function ExecutionDetailItem({ detail }: ExecutionDetailItemProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const { icon: StatusIcon, colorClass } = getStatusConfig(detail.status);
 
+  const formatContent = (raw: unknown): string => {
+    if (typeof raw === 'string') {
+      try {
+        const parsed = JSON.parse(raw);
+        return JSON.stringify(parsed, null, 2)
+          .split('\n')
+          .map((line) => line.trimEnd())
+          .join('\n');
+      } catch {
+        return raw;
+      }
+    }
+
+    if (typeof raw === 'object') {
+      return JSON.stringify(raw, null, 2)
+        .split('\n')
+        .map((line) => line.trimEnd())
+        .join('\n');
+    }
+
+    return String(raw);
+  };
+
   return (
     <div className="flex items-start gap-3">
       <div className="flex h-full items-center pt-2">
@@ -66,7 +89,11 @@ export function ExecutionDetailItem({ detail }: ExecutionDetailItemProps) {
         {isExpanded && detail.raw && (
           <div className="border-t border-neutral-200 bg-neutral-50 p-3">
             <div className="text-foreground-600 text-xs">
-              {typeof detail.raw === 'string' ? detail.raw : JSON.stringify(detail.raw, null, 2)}
+              <div className="overflow-x-auto">
+                <pre className="max-w-fullfont-mono min-w-0" style={{ width: '1px' }}>
+                  {formatContent(detail.raw)}
+                </pre>
+              </div>
             </div>
           </div>
         )}