improvement: workflow loading, sidebar scrolling (#2322)

* improvement: workflow loading, sidebar scrolling

* further optimizations

* remove redundant perms calls

* remove redundant api calls

* use displayNodes local state to make dragging smooth even in larger workflows

* improvement(logs): trace span output styling

* fix(s-modal): sidebar overflow scrolling

* fix(footer): guardrails link

* improvement(loading): spinner

* refactor(training-modal): changed file name

* improvement(spinner): optimize spinner in background

---------

Co-authored-by: Vikhyath Mondreti <[email protected]>

Author: emir-karabeg

apps/sim/app/(landing)/components/footer/consts.ts

@@ -4,6 +4,7 @@ export const FOOTER_BLOCKS = [
   'Condition',
   'Evaluator',
   'Function',
+  'Guardrails',
   'Human In The Loop',
   'Loop',
   'Parallel',
@@ -30,7 +31,6 @@ export const FOOTER_TOOLS = [
   'GitHub',
   'Gmail',
   'Google Drive',
-  'Guardrails',
   'HubSpot',
   'HuggingFace',
   'Hunter',

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -14,7 +14,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
         <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
-          <div className='flex h-screen w-full'>
+          <div className='flex h-screen w-full bg-[var(--bg)]'>
             <WorkspacePermissionsProvider>
               <div className='shrink-0' suppressHydrationWarning>
                 <Sidebar />

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx

@@ -398,7 +398,7 @@ function InputOutputSection({
   }, [data])
 
   return (
-    <div className='flex flex-col gap-[8px]'>
+    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -436,7 +436,7 @@ function InputOutputSection({
         <Code.Viewer
           code={jsonString}
           language='json'
-          className='!bg-[var(--surface-3)] min-h-0 overflow-hidden rounded-[6px] border-0'
+          className='!bg-[var(--surface-3)] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
           wrapText
         />
       )}
@@ -477,7 +477,7 @@ function NestedBlockItem({
   const isChildrenExpanded = expandedChildren.has(spanId)
 
   return (
-    <div className='flex flex-col gap-[8px]'>
+    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
       <ExpandableRowHeader
         name={span.name}
         duration={span.duration || 0}
@@ -502,7 +502,7 @@ function NestedBlockItem({
 
       {/* Nested children */}
       {hasChildren && isChildrenExpanded && (
-        <div className='mt-[2px] flex flex-col gap-[10px] border-[var(--border)] border-l-2 pl-[10px]'>
+        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
           {span.children!.map((child, childIndex) => (
             <NestedBlockItem
               key={child.id || `${spanId}-child-${childIndex}`}
@@ -617,7 +617,7 @@ function TraceSpanItem({
 
   return (
     <>
-      <div className='flex flex-col gap-[8px] rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
+      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
         <ExpandableRowHeader
           name={span.name}
           duration={duration}
@@ -642,7 +642,7 @@ function TraceSpanItem({
 
         {/* For workflow blocks, keep children nested within the card (not as separate cards) */}
         {!isFirstSpan && isWorkflowBlock && inlineChildren.length > 0 && isCardExpanded && (
-          <div className='mt-[2px] flex flex-col gap-[10px] border-[var(--border)] border-l-2 pl-[10px]'>
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
             {inlineChildren.map((childSpan, index) => (
               <NestedBlockItem
                 key={childSpan.id || `${spanId}-nested-${index}`}
@@ -662,7 +662,7 @@ function TraceSpanItem({
 
         {/* For non-workflow blocks, render inline children/tool calls */}
         {!isFirstSpan && !isWorkflowBlock && isCardExpanded && (
-          <div className='mt-[2px] flex flex-col gap-[10px] border-[var(--border)] border-l-2 pl-[10px]'>
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
             {[...toolCallSpans, ...inlineChildren].map((childSpan, index) => {
               const childId = childSpan.id || `${spanId}-inline-${index}`
               const childIsError = childSpan.status === 'error'
@@ -677,7 +677,10 @@ function TraceSpanItem({
               )
 
               return (
-                <div key={`inline-${childId}`} className='flex flex-col gap-[8px]'>
+                <div
+                  key={`inline-${childId}`}
+                  className='flex min-w-0 flex-col gap-[8px] overflow-hidden'
+                >
                   <ExpandableRowHeader
                     name={childSpan.name}
                     duration={childSpan.duration || 0}
@@ -727,7 +730,7 @@ function TraceSpanItem({
 
                   {/* Nested children */}
                   {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && (
-                    <div className='mt-[2px] flex flex-col gap-[10px] border-[var(--border)] border-l-2 pl-[10px]'>
+                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
                       {childSpan.children!.map((nestedChild, nestedIndex) => (
                         <NestedBlockItem
                           key={nestedChild.id || `${childId}-nested-${nestedIndex}`}
@@ -809,9 +812,9 @@ export function TraceSpans({ traceSpans, totalDuration = 0 }: TraceSpansProps) {
   }
 
   return (
-    <div className='flex w-full flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+    <div className='flex w-full min-w-0 flex-col gap-[6px] overflow-hidden rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
       <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>Trace Span</span>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
         {normalizedSpans.map((span, index) => (
           <TraceSpanItem
             key={span.id || index}

…nts/training-controls/training-modal.tsx …onents/training-modal/training-modal.tsxapps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-controls/training-modal.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-controls/training-modal.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx

@@ -1,5 +1,7 @@
+import { memo, useMemo } from 'react'
 import { X } from 'lucide-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from 'reactflow'
+import { useShallow } from 'zustand/react/shallow'
 import type { EdgeDiffStatus } from '@/lib/workflows/diff/types'
 import { useExecutionStore } from '@/stores/execution/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
@@ -9,7 +11,7 @@ interface WorkflowEdgeProps extends EdgeProps {
   targetHandle?: string | null
 }
 
-export const WorkflowEdge = ({
+const WorkflowEdgeComponent = ({
   id,
   sourceX,
   sourceY,
@@ -41,65 +43,64 @@ export const WorkflowEdge = ({
   const isInsideLoop = data?.isInsideLoop ?? false
   const parentLoopId = data?.parentLoopId
 
-  const diffAnalysis = useWorkflowDiffStore((state) => state.diffAnalysis)
-  const isShowingDiff = useWorkflowDiffStore((state) => state.isShowingDiff)
-  const isDiffReady = useWorkflowDiffStore((state) => state.isDiffReady)
+  // Combined store subscription to reduce subscription overhead
+  const { diffAnalysis, isShowingDiff, isDiffReady } = useWorkflowDiffStore(
+    useShallow((state) => ({
+      diffAnalysis: state.diffAnalysis,
+      isShowingDiff: state.isShowingDiff,
+      isDiffReady: state.isDiffReady,
+    }))
+  )
   const lastRunEdges = useExecutionStore((state) => state.lastRunEdges)
 
-  const generateEdgeIdentity = (
-    sourceId: string,
-    targetId: string,
-    sourceHandle?: string | null,
-    targetHandle?: string | null
-  ): string => {
-    const actualSourceHandle = sourceHandle || 'source'
-    const actualTargetHandle = targetHandle || 'target'
-    return `${sourceId}-${actualSourceHandle}-${targetId}-${actualTargetHandle}`
-  }
+  const dataSourceHandle = (data as { sourceHandle?: string } | undefined)?.sourceHandle
+  const isErrorEdge = (sourceHandle ?? dataSourceHandle) === 'error'
+  const edgeRunStatus = lastRunEdges.get(id)
 
-  const edgeIdentifier = generateEdgeIdentity(source, target, sourceHandle, targetHandle)
+  // Memoize diff status calculation to avoid recomputing on every render
+  const edgeDiffStatus = useMemo((): EdgeDiffStatus => {
+    if (data?.isDeleted) return 'deleted'
+    if (!diffAnalysis?.edge_diff || !isDiffReady) return null
 
-  let edgeDiffStatus: EdgeDiffStatus = null
+    const actualSourceHandle = sourceHandle || 'source'
+    const actualTargetHandle = targetHandle || 'target'
+    const edgeIdentifier = `${source}-${actualSourceHandle}-${target}-${actualTargetHandle}`
 
-  if (data?.isDeleted) {
-    edgeDiffStatus = 'deleted'
-  } else if (diffAnalysis?.edge_diff && edgeIdentifier && isDiffReady) {
     if (isShowingDiff) {
-      if (diffAnalysis.edge_diff.new_edges.includes(edgeIdentifier)) {
-        edgeDiffStatus = 'new'
-      } else if (diffAnalysis.edge_diff.unchanged_edges.includes(edgeIdentifier)) {
-        edgeDiffStatus = 'unchanged'
-      }
+      if (diffAnalysis.edge_diff.new_edges.includes(edgeIdentifier)) return 'new'
+      if (diffAnalysis.edge_diff.unchanged_edges.includes(edgeIdentifier)) return 'unchanged'
     } else {
-      if (diffAnalysis.edge_diff.deleted_edges.includes(edgeIdentifier)) {
-        edgeDiffStatus = 'deleted'
-      }
+      if (diffAnalysis.edge_diff.deleted_edges.includes(edgeIdentifier)) return 'deleted'
     }
-  }
-
-  const dataSourceHandle = (data as { sourceHandle?: string } | undefined)?.sourceHandle
-  const isErrorEdge = (sourceHandle ?? dataSourceHandle) === 'error'
-
-  // Check if this edge was traversed during last execution
-  const edgeRunStatus = lastRunEdges.get(id)
-
-  const getEdgeColor = () => {
-    if (edgeDiffStatus === 'deleted') return 'var(--text-error)'
-    if (isErrorEdge) return 'var(--text-error)'
-    if (edgeDiffStatus === 'new') return 'var(--brand-tertiary)'
-    // Show run path status if edge was traversed
-    if (edgeRunStatus === 'success') return 'var(--border-success)'
-    if (edgeRunStatus === 'error') return 'var(--text-error)'
-    return 'var(--surface-12)'
-  }
-
-  const edgeStyle = {
-    ...(style ?? {}),
-    strokeWidth: edgeDiffStatus ? 3 : isSelected ? 2.5 : 2,
-    stroke: getEdgeColor(),
-    strokeDasharray: edgeDiffStatus === 'deleted' ? '10,5' : undefined,
-    opacity: edgeDiffStatus === 'deleted' ? 0.7 : isSelected ? 0.5 : 1,
-  }
+    return null
+  }, [
+    data?.isDeleted,
+    diffAnalysis,
+    isDiffReady,
+    isShowingDiff,
+    source,
+    target,
+    sourceHandle,
+    targetHandle,
+  ])
+
+  // Memoize edge style to prevent object recreation
+  const edgeStyle = useMemo(() => {
+    let color = 'var(--surface-12)'
+    if (edgeDiffStatus === 'deleted') color = 'var(--text-error)'
+    else if (isErrorEdge) color = 'var(--text-error)'
+    else if (edgeDiffStatus === 'new') color = 'var(--brand-tertiary)'
+    else if (edgeRunStatus === 'success') color = 'var(--border-success)'
+    else if (edgeRunStatus === 'error') color = 'var(--text-error)'
+
+    return {
+      ...(style ?? {}),
+      strokeWidth: edgeDiffStatus ? 3 : isSelected ? 2.5 : 2,
+      stroke: color,
+      strokeDasharray: edgeDiffStatus === 'deleted' ? '10,5' : undefined,
+      opacity: edgeDiffStatus === 'deleted' ? 0.7 : isSelected ? 0.5 : 1,
+    }
+  }, [style, edgeDiffStatus, isSelected, isErrorEdge, edgeRunStatus])
 
   return (
     <>
@@ -148,3 +149,5 @@ export const WorkflowEdge = ({
     </>
   )
 }
+
+export const WorkflowEdge = memo(WorkflowEdgeComponent)

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

@@ -43,26 +43,29 @@ export interface CurrentWorkflow {
  */
 export function useCurrentWorkflow(): CurrentWorkflow {
   // Get normal workflow state - optimized with shallow comparison
-  // This prevents re-renders when only subblock values change (not block structure)
   const normalWorkflow = useWorkflowStore(
-    useShallow((state) => {
-      const workflow = state.getWorkflowState()
-      return {
-        blocks: workflow.blocks,
-        edges: workflow.edges,
-        loops: workflow.loops,
-        parallels: workflow.parallels,
-        lastSaved: workflow.lastSaved,
-        isDeployed: workflow.isDeployed,
-        deployedAt: workflow.deployedAt,
-        deploymentStatuses: workflow.deploymentStatuses,
-        needsRedeployment: workflow.needsRedeployment,
-      }
-    })
+    useShallow((state) => ({
+      blocks: state.blocks,
+      edges: state.edges,
+      loops: state.loops,
+      parallels: state.parallels,
+      lastSaved: state.lastSaved,
+      isDeployed: state.isDeployed,
+      deployedAt: state.deployedAt,
+      deploymentStatuses: state.deploymentStatuses,
+      needsRedeployment: state.needsRedeployment,
+    }))
   )
 
-  // Get diff state - now including isDiffReady
-  const { isShowingDiff, isDiffReady, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore()
+  // Get diff state - optimized with shallow comparison
+  const { isShowingDiff, isDiffReady, hasActiveDiff, baselineWorkflow } = useWorkflowDiffStore(
+    useShallow((state) => ({
+      isShowingDiff: state.isShowingDiff,
+      isDiffReady: state.isDiffReady,
+      hasActiveDiff: state.hasActiveDiff,
+      baselineWorkflow: state.baselineWorkflow,
+    }))
+  )
 
   // Create the abstracted interface - optimized to prevent unnecessary re-renders
   const currentWorkflow = useMemo((): CurrentWorkflow => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts

@@ -2,7 +2,7 @@ import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/comp
 
 export default function WorkflowLayout({ children }: { children: React.ReactNode }) {
   return (
-    <main className='flex h-full flex-1 flex-col overflow-hidden bg-muted/40'>
+    <main className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
       <ErrorBoundary>{children}</ErrorBoundary>
     </main>
   )