From c51f266ad78d5e657916e71c99642d17fb1d2db5 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Tue, 3 Feb 2026 15:26:09 -0800
Subject: [PATCH] fix(logs): use formatDuration utility and align file cards
 styling (#3125)

---
 .../file-download/file-download.tsx           | 34 ++++++++-----------
 .../components/log-details/log-details.tsx    |  3 +-
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 74397b9bb..3dd05f8d8 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -104,14 +104,12 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
   }
 
   return (
-    <div className='flex flex-col gap-[8px] rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
-      <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[8px]'>
-          <span className='truncate font-medium text-[12px] text-[var(--text-secondary)]'>
-            {file.name}
-          </span>
-        </div>
-        <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='flex flex-col gap-[4px] rounded-[6px] bg-[var(--surface-1)] px-[8px] py-[6px]'>
+      <div className='flex min-w-0 items-center justify-between gap-[8px]'>
+        <span className='min-w-0 flex-1 truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+          {file.name}
+        </span>
+        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
           {formatFileSize(file.size)}
         </span>
       </div>
@@ -142,20 +140,18 @@ export function FileCards({ files, isExecutionFile = false, workspaceId }: FileC
   }
 
   return (
-    <div className='flex w-full flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
       <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
         Files ({files.length})
       </span>
-      <div className='flex flex-col gap-[8px]'>
-        {files.map((file, index) => (
-          <FileCard
-            key={file.id || `file-${index}`}
-            file={file}
-            isExecutionFile={isExecutionFile}
-            workspaceId={workspaceId}
-          />
-        ))}
-      </div>
+      {files.map((file, index) => (
+        <FileCard
+          key={file.id || `file-${index}`}
+          file={file}
+          isExecutionFile={isExecutionFile}
+          workspaceId={workspaceId}
+        />
+      ))}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index b0f79805a..43aa334e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -18,6 +18,7 @@ import {
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { cn } from '@/lib/core/utils/cn'
+import { formatDuration } from '@/lib/core/utils/formatting'
 import { filterHiddenOutputKeys } from '@/lib/logs/execution/trace-spans/trace-spans'
 import {
   ExecutionSnapshot,
@@ -453,7 +454,7 @@ export const LogDetails = memo(function LogDetails({
                       Duration
                     </span>
                     <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      {log.duration || '—'}
+                      {formatDuration(log.duration, { precision: 2 }) || '—'}
                     </span>
                   </div>