fix autolayout

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Component, type ReactNode, useEffect } from 'react'
+import { ReactFlowProvider } from 'reactflow'
 import { createLogger } from '@/lib/logs/console/logger'
 import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
@@ -47,8 +48,9 @@ export function ErrorUI({
           </div>
         </div>
 
-        {/* Panel */}
-        <Panel />
+        <ReactFlowProvider>
+          <Panel />
+        </ReactFlowProvider>
       </div>
     </div>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-auto-layout.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useReactFlow } from 'reactflow'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { AutoLayoutOptions } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/auto-layout-utils'
 import { applyAutoLayoutAndUpdateStore as applyAutoLayoutStandalone } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/auto-layout-utils'
@@ -7,45 +8,38 @@ export type { AutoLayoutOptions }
 
 const logger = createLogger('useAutoLayout')
 
-interface UseAutoLayoutOptions {
-  fitView?: (options?: { padding?: number; duration?: number }) => void
-}
-
 /**
  * Hook providing auto-layout functionality for workflows.
  * Binds workflowId context and provides memoized callback for React components.
- * Optionally accepts a fitView function to animate after successful layout.
+ * Includes automatic fitView animation after successful layout.
  *
- * @param workflowId - The workflow ID to apply layout to
- * @param options - Optional configuration including fitView function from useReactFlow
+ * Note: This hook requires a ReactFlowProvider ancestor.
  */
-export function useAutoLayout(workflowId: string | null, options: UseAutoLayoutOptions = {}) {
-  const { fitView } = options
+export function useAutoLayout(workflowId: string | null) {
+  const { fitView } = useReactFlow()
 
   const applyAutoLayoutAndUpdateStore = useCallback(
-    async (layoutOptions: AutoLayoutOptions = {}) => {
+    async (options: AutoLayoutOptions = {}) => {
       if (!workflowId) {
         return { success: false, error: 'No workflow ID provided' }
       }
-      return applyAutoLayoutStandalone(workflowId, layoutOptions)
+      return applyAutoLayoutStandalone(workflowId, options)
     },
     [workflowId]
   )
 
   /**
-   * Applies auto-layout and optionally animates to fit all blocks in view
+   * Applies auto-layout and animates to fit all blocks in view
    */
   const handleAutoLayout = useCallback(async () => {
     try {
       const result = await applyAutoLayoutAndUpdateStore()
 
       if (result.success) {
         logger.info('Auto layout completed successfully')
-        if (fitView) {
-          requestAnimationFrame(() => {
-            fitView({ padding: 0.8, duration: 600 })
-          })
-        }
+        requestAnimationFrame(() => {
+          fitView({ padding: 0.8, duration: 600 })
+        })
       } else {
         logger.error('Auto layout failed:', result.error)
       }

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

@@ -198,9 +198,7 @@ const WorkflowContent = React.memo(() => {
     return resizeLoopNodes(updateNodeDimensions)
   }, [resizeLoopNodes, updateNodeDimensions])
 
-  const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null, {
-    fitView,
-  })
+  const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null)
 
   const isWorkflowEmpty = useMemo(() => Object.keys(blocks).length === 0, [blocks])
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx

@@ -67,13 +67,13 @@ function BYOKKeySkeleton() {
   return (
     <div className='flex items-center justify-between gap-[12px] rounded-[8px] p-[12px]'>
       <div className='flex items-center gap-[12px]'>
-        <Skeleton className='h-[24px] w-[24px] rounded-[6px]' />
-        <div className='flex flex-col gap-[4px]'>
-          <Skeleton className='h-[16px] w-[80px]' />
-          <Skeleton className='h-[14px] w-[160px]' />
+        <Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
+        <div className='flex flex-col justify-center gap-[1px]'>
+          <Skeleton className='h-[14px] w-[100px]' />
+          <Skeleton className='h-[13px] w-[200px]' />
         </div>
       </div>
-      <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+      <Skeleton className='h-[32px] w-[72px] rounded-[6px]' />
     </div>
   )
 }
@@ -164,8 +164,8 @@ export function BYOK() {
                     className='flex items-center justify-between gap-[12px] rounded-[8px] p-[12px]'
                   >
                     <div className='flex items-center gap-[12px]'>
-                      <div className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] bg-[var(--surface-3)]'>
-                        <Icon className='h-[14px] w-[14px]' />
+                      <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
+                        <Icon className='h-4 w-4' />
                       </div>
                       <div className='flex flex-col gap-[2px]'>
                         <span className='font-medium text-[14px]'>{provider.name}</span>

apps/sim/app/workspace/[workspaceId]/w/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
+import { ReactFlowProvider } from 'reactflow'
 import { createLogger } from '@/lib/logs/console/logger'
 import { Panel, Terminal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { useWorkflows } from '@/hooks/queries/workflows'
@@ -69,7 +70,9 @@ export default function WorkflowsPage() {
             }}
           />
         </div>
-        <Panel />
+        <ReactFlowProvider>
+          <Panel />
+        </ReactFlowProvider>
       </div>
       <Terminal />
     </div>