fix: Add real-time duration updates for Executions and fix negative timer display

src/lib/actions/timer.ts

@@ -21,13 +21,16 @@ export const timer: Action<HTMLElement, Props> = (node, props) => {
     }
 
     function step() {
-        const diffInSeconds = Math.floor((new Date().getTime() - startDate.getTime()) / 1000);
-        const minutes = Math.floor(diffInSeconds / 60);
+        const elapsedSeconds = Math.max(
+            0,
+            Math.floor((new Date().getTime() - startDate.getTime()) / 1000)
+        );
+        const minutes = Math.floor(elapsedSeconds / 60);
         if (minutes > 0) {
-            const seconds = diffInSeconds % 60;
+            const seconds = elapsedSeconds % 60;
             node.textContent = `${minutes}m ${seconds}s`;
         } else {
-            node.textContent = calculateTime(diffInSeconds);
+            node.textContent = calculateTime(elapsedSeconds);
         }
         frame = window.requestAnimationFrame(step);
     }

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/sheet.svelte

@@ -21,6 +21,7 @@
     import { Copy } from '$lib/components';
     import { logStatusConverter } from './store';
     import { LogsRequest, LogsResponse } from '$lib/components/logs';
+    import { timer } from '$lib/actions/timer';
 
     export let selectedLogId: string;
     export let logs: Models.Execution[];
@@ -139,7 +140,11 @@
                                     Duration
                                 </Typography.Text>
                                 <Typography.Text variant="m-400">
-                                    {calculateTime(selectedLog.duration)}
+                                    {#if ['processing', 'waiting'].includes(selectedLog.status)}
+                                        <span use:timer={{ start: selectedLog.$createdAt }}></span>
+                                    {:else}
+                                        {calculateTime(selectedLog.duration)}
+                                    {/if}
                                 </Typography.Text>
                             </Layout.Stack>
 

src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/table.svelte

@@ -25,6 +25,7 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
+    import { timer } from '$lib/actions/timer';
 
     export let columns: Column[];
     export let executions: Models.ExecutionList;
@@ -121,7 +122,11 @@
                             </span>
                         </Tooltip>
                     {:else if column.id === 'duration'}
-                        {calculateTime(log.duration)}
+                        {#if ['processing', 'waiting'].includes(log.status)}
+                            <span use:timer={{ start: log.$createdAt }}></span>
+                        {:else}
+                            {calculateTime(log.duration)}
+                        {/if}
                     {/if}
                 </Table.Cell>
             {/each}

src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/sheet.svelte

@@ -19,6 +19,7 @@
     import { Copy } from '$lib/components';
     import { LogsRequest, LogsResponse } from '$lib/components/logs';
     import { site } from '../store';
+    import { timer } from '$lib/actions/timer';
 
     export let open = false;
     export let selectedLogId: string;
@@ -112,7 +113,12 @@
                                         Duration
                                     </Typography.Text>
                                     <Typography.Text variant="m-400">
-                                        {calculateTime(selectedLog.duration)}
+                                        {#if ['processing', 'waiting'].includes(selectedLog.status)}
+                                            <span use:timer={{ start: selectedLog.$createdAt }}
+                                            ></span>
+                                        {:else}
+                                            {calculateTime(selectedLog.duration)}
+                                        {/if}
                                     </Typography.Text>
                                 </Layout.Stack>
                                 <Layout.Stack gap="xs" inline>

src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/table.svelte

@@ -14,6 +14,7 @@
     import { calculateTime } from '$lib/helpers/timeConversion';
     import { getBadgeTypeFromStatusCode } from '$lib/helpers/httpStatus';
     import { Button } from '$lib/elements/forms';
+    import { timer } from '$lib/actions/timer';
 
     export let columns: Column[];
     export let logs: Models.ExecutionList;
@@ -83,7 +84,11 @@
                             {log.requestMethod}
                         </Typography.Code>
                     {:else if column.id === 'duration'}
-                        {calculateTime(log.duration)}
+                        {#if ['processing', 'waiting'].includes(log.status)}
+                            <span use:timer={{ start: log.$createdAt }}></span>
+                        {:else}
+                            {calculateTime(log.duration)}
+                        {/if}
                     {:else if column.id === 'responseStatusCode'}
                         <div>
                             <Badge