improvement(preview): added error paths, loop logic

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx

@@ -6,6 +6,7 @@ import type { EdgeDiffStatus } from '@/lib/workflows/diff/types'
 import { useExecutionStore } from '@/stores/execution'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 
+/** Extended edge props with optional handle identifiers */
 interface WorkflowEdgeProps extends EdgeProps {
   sourceHandle?: string | null
   targetHandle?: string | null
@@ -90,15 +91,17 @@ const WorkflowEdgeComponent = ({
     if (edgeDiffStatus === 'deleted') {
       color = 'var(--text-error)'
       opacity = 0.7
-    } else if (isErrorEdge) {
-      color = 'var(--text-error)'
     } else if (edgeDiffStatus === 'new') {
       color = 'var(--brand-tertiary-2)'
     } else if (edgeRunStatus === 'success') {
       // Use green for preview mode, default for canvas execution
+      // This also applies to error edges that were taken (error path executed)
       color = previewExecutionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'
     } else if (edgeRunStatus === 'error') {
       color = 'var(--text-error)'
+    } else if (isErrorEdge) {
+      // Error edges that weren't taken stay red
+      color = 'var(--text-error)'
     }
 
     if (isSelected) {
@@ -151,4 +154,14 @@ const WorkflowEdgeComponent = ({
   )
 }
 
+/**
+ * Workflow edge component with execution status and diff visualization.
+ *
+ * @remarks
+ * Edge coloring priority:
+ * 1. Diff status (deleted/new) - for version comparison
+ * 2. Execution status (success/error) - for run visualization
+ * 3. Error edge default (red) - for untaken error paths
+ * 4. Default edge color - normal workflow connections
+ */
 export const WorkflowEdge = memo(WorkflowEdgeComponent)

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useMemo } from 'react'
+import { type CSSProperties, memo, useMemo } from 'react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import {
@@ -23,6 +23,27 @@ interface SubBlockValueEntry {
   value: unknown
 }
 
+/**
+ * Handle style constants for preview blocks.
+ * Extracted to avoid recreating style objects on each render.
+ */
+const HANDLE_STYLES = {
+  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]',
+  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]',
+  right:
+    '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+  error:
+    '!z-[10] !border-none !bg-[var(--text-error)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+} as const
+
+/** Reusable style object for error handles positioned at bottom-right */
+const ERROR_HANDLE_STYLE: CSSProperties = {
+  right: '-7px',
+  top: 'auto',
+  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
+  transform: 'translateY(50%)',
+}
+
 interface WorkflowPreviewBlockData {
   type: string
   name: string
@@ -379,9 +400,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         ? routerRows.length > 0 || shouldShowDefaultHandles
         : hasSubBlocks || shouldShowDefaultHandles
 
-  const horizontalHandleClass = '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]'
-  const verticalHandleClass = '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]'
-
   const hasError = executionStatus === 'error'
   const hasSuccess = executionStatus === 'success'
 
@@ -406,7 +424,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
           type='target'
           position={horizontalHandles ? Position.Left : Position.Top}
           id='target'
-          className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
+          className={horizontalHandles ? HANDLE_STYLES.horizontal : HANDLE_STYLES.vertical}
           style={
             horizontalHandles
               ? { left: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
@@ -479,27 +497,103 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         </div>
       )}
 
-      {/* Source handle */}
-      <Handle
-        type='source'
-        position={horizontalHandles ? Position.Right : Position.Bottom}
-        id='source'
-        className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
-        style={
-          horizontalHandles
-            ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-            : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
-        }
-      />
+      {/* Condition block handles */}
+      {type === 'condition' && (
+        <>
+          {conditionRows.map((cond, condIndex) => {
+            const topOffset =
+              HANDLE_POSITIONS.CONDITION_START_Y + condIndex * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+            return (
+              <Handle
+                key={`handle-${cond.id}`}
+                type='source'
+                position={Position.Right}
+                id={`condition-${cond.id}`}
+                className={HANDLE_STYLES.right}
+                style={{ top: `${topOffset}px`, right: '-7px', transform: 'translateY(-50%)' }}
+              />
+            )
+          })}
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='error'
+            className={HANDLE_STYLES.error}
+            style={ERROR_HANDLE_STYLE}
+          />
+        </>
+      )}
+
+      {/* Router block handles */}
+      {type === 'router_v2' && (
+        <>
+          {routerRows.map((route, routeIndex) => {
+            // +1 row offset for context row at the top
+            const topOffset =
+              HANDLE_POSITIONS.CONDITION_START_Y +
+              (routeIndex + 1) * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+            return (
+              <Handle
+                key={`handle-${route.id}`}
+                type='source'
+                position={Position.Right}
+                id={`router-${route.id}`}
+                className={HANDLE_STYLES.right}
+                style={{ top: `${topOffset}px`, right: '-7px', transform: 'translateY(-50%)' }}
+              />
+            )
+          })}
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='error'
+            className={HANDLE_STYLES.error}
+            style={ERROR_HANDLE_STYLE}
+          />
+        </>
+      )}
+
+      {/* Source and error handles for non-condition/router blocks */}
+      {type !== 'condition' && type !== 'router_v2' && type !== 'response' && (
+        <>
+          <Handle
+            type='source'
+            position={horizontalHandles ? Position.Right : Position.Bottom}
+            id='source'
+            className={horizontalHandles ? HANDLE_STYLES.right : HANDLE_STYLES.vertical}
+            style={
+              horizontalHandles
+                ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
+                : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
+            }
+          />
+          {shouldShowDefaultHandles && (
+            <Handle
+              type='source'
+              position={Position.Right}
+              id='error'
+              className={HANDLE_STYLES.error}
+              style={ERROR_HANDLE_STYLE}
+            />
+          )}
+        </>
+      )}
     </div>
   )
 }
 
+/**
+ * Custom comparison function for React.memo optimization.
+ * Uses fast-path primitive comparison before shallow comparing subBlockValues.
+ * @param prevProps - Previous render props
+ * @param nextProps - Next render props
+ * @returns True if render should be skipped (props are equal)
+ */
 function shouldSkipPreviewBlockRender(
   prevProps: NodeProps<WorkflowPreviewBlockData>,
   nextProps: NodeProps<WorkflowPreviewBlockData>
 ): boolean {
-  // Check primitive props first (fast path)
+  // Fast path: check primitive props first
   if (
     prevProps.id !== nextProps.id ||
     prevProps.data.type !== nextProps.data.type ||
@@ -513,33 +607,34 @@ function shouldSkipPreviewBlockRender(
     return false
   }
 
-  // Compare subBlockValues by reference first
   const prevValues = prevProps.data.subBlockValues
   const nextValues = nextProps.data.subBlockValues
 
-  if (prevValues === nextValues) {
-    return true
-  }
+  // Reference equality check
+  if (prevValues === nextValues) return true
+  if (!prevValues || !nextValues) return false
 
-  if (!prevValues || !nextValues) {
-    return false
-  }
-
-  // Shallow compare keys and values
+  // Shallow comparison of subBlockValues
   const prevKeys = Object.keys(prevValues)
   const nextKeys = Object.keys(nextValues)
 
-  if (prevKeys.length !== nextKeys.length) {
-    return false
-  }
+  if (prevKeys.length !== nextKeys.length) return false
 
   for (const key of prevKeys) {
-    if (prevValues[key] !== nextValues[key]) {
-      return false
-    }
+    if (prevValues[key] !== nextValues[key]) return false
   }
 
   return true
 }
 
+/**
+ * Preview block component for workflow visualization in readonly contexts.
+ * Optimized for rendering without hooks or store subscriptions.
+ *
+ * @remarks
+ * - Renders block header, subblock values, and connection handles
+ * - Supports condition, router, and standard block types
+ * - Shows error handles for non-trigger blocks
+ * - Displays execution status via colored ring overlays
+ */
 export const WorkflowPreviewBlock = memo(WorkflowPreviewBlockInner, shouldSkipPreviewBlockRender)