feat(logs): optimistic cancelling status on cancel execution

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/utils.ts

@@ -29,7 +29,7 @@ export const LOG_COLUMN_ORDER: readonly LogColumnKey[] = [
 export const DELETED_WORKFLOW_LABEL = 'Deleted Workflow'
 export const DELETED_WORKFLOW_COLOR = 'var(--text-tertiary)'
 
-export type LogStatus = 'error' | 'pending' | 'running' | 'info' | 'cancelled'
+export type LogStatus = 'error' | 'pending' | 'running' | 'info' | 'cancelled' | 'cancelling'
 
 /**
  * Maps raw status string to LogStatus for display.
@@ -42,6 +42,8 @@ export function getDisplayStatus(status: string | null | undefined): LogStatus {
       return 'running'
     case 'pending':
       return 'pending'
+    case 'cancelling':
+      return 'cancelling'
     case 'cancelled':
       return 'cancelled'
     case 'failed':
@@ -58,6 +60,7 @@ export const STATUS_CONFIG: Record<
   error: { variant: 'red', label: 'Error', color: 'var(--text-error)' },
   pending: { variant: 'amber', label: 'Pending', color: '#f59e0b' },
   running: { variant: 'amber', label: 'Running', color: '#f59e0b' },
+  cancelling: { variant: 'amber', label: 'Cancelling...', color: '#f59e0b' },
   cancelled: { variant: 'orange', label: 'Cancelled', color: '#f97316' },
   info: { variant: 'gray', label: 'Info', color: 'var(--terminal-status-info-color)' },
 }

apps/sim/hooks/queries/logs.ts

@@ -1,4 +1,5 @@
 import {
+  type InfiniteData,
   keepPreviousData,
   type QueryClient,
   useInfiniteQuery,
@@ -276,6 +277,8 @@ export function useExecutionSnapshot(executionId: string | undefined) {
   })
 }
 
+type LogsPage = { logs: WorkflowLog[]; hasMore: boolean; nextPage: number | undefined }
+
 export function useCancelExecution() {
   const queryClient = useQueryClient()
   return useMutation({
@@ -294,6 +297,33 @@ export function useCancelExecution() {
       if (!data.success) throw new Error('Failed to cancel execution')
       return data
     },
+    onMutate: async ({ executionId }) => {
+      await queryClient.cancelQueries({ queryKey: logKeys.lists() })
+
+      const previousQueries = queryClient.getQueriesData<InfiniteData<LogsPage>>({
+        queryKey: logKeys.lists(),
+      })
+
+      queryClient.setQueriesData<InfiniteData<LogsPage>>({ queryKey: logKeys.lists() }, (old) => {
+        if (!old) return old
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            logs: page.logs.map((log) =>
+              log.executionId === executionId ? { ...log, status: 'cancelling' } : log
+            ),
+          })),
+        }
+      })
+
+      return { previousQueries }
+    },
+    onError: (_err, _variables, context) => {
+      for (const [queryKey, data] of context?.previousQueries ?? []) {
+        queryClient.setQueryData(queryKey, data)
+      }
+    },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: logKeys.lists() })
       queryClient.invalidateQueries({ queryKey: logKeys.details() })