Merge branch 'staging' into feat/run-from-block-2

Author: icecrasher321

.claude/commands/add-tools.md

@@ -55,21 +55,21 @@ export const {serviceName}{Action}Tool: ToolConfig<
   },
 
   params: {
-    // Hidden params (system-injected)
+    // Hidden params (system-injected, only use hidden for oauth accessToken)
     accessToken: {
       type: 'string',
       required: true,
       visibility: 'hidden',
       description: 'OAuth access token',
     },
-    // User-only params (credentials, IDs user must provide)
+    // User-only params (credentials, api key, IDs user must provide)
     someId: {
       type: 'string',
       required: true,
       visibility: 'user-only',
       description: 'The ID of the resource',
     },
-    // User-or-LLM params (can be provided by user OR computed by LLM)
+    // User-or-LLM params (everything else, can be provided by user OR computed by LLM)
     query: {
       type: 'string',
       required: false,                // Use false for optional
@@ -114,8 +114,8 @@ export const {serviceName}{Action}Tool: ToolConfig<
 
 ### Visibility Options
 - `'hidden'` - System-injected (OAuth tokens, internal params). User never sees.
-- `'user-only'` - User must provide (credentials, account-specific IDs)
-- `'user-or-llm'` - User provides OR LLM can compute (search queries, content, filters)
+- `'user-only'` - User must provide (credentials, api keys, account-specific IDs)
+- `'user-or-llm'` - User provides OR LLM can compute (search queries, content, filters, most fall into this category)
 
 ### Parameter Types
 - `'string'` - Text values

apps/docs/components/icons.tsx

@@ -35,8 +35,7 @@ const AutoLayoutRequestSchema = z.object({
     })
     .optional()
     .default({}),
-  // Optional: if provided, use these blocks instead of loading from DB
-  // This allows using blocks with live measurements from the UI
+  gridSize: z.number().min(0).max(50).optional(),
   blocks: z.record(z.any()).optional(),
   edges: z.array(z.any()).optional(),
   loops: z.record(z.any()).optional(),
@@ -53,7 +52,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
   const { id: workflowId } = await params
 
   try {
-    // Get the session
     const session = await getSession()
     if (!session?.user?.id) {
       logger.warn(`[${requestId}] Unauthorized autolayout attempt for workflow ${workflowId}`)
@@ -62,15 +60,13 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
 
     const userId = session.user.id
 
-    // Parse request body
     const body = await request.json()
     const layoutOptions = AutoLayoutRequestSchema.parse(body)
 
     logger.info(`[${requestId}] Processing autolayout request for workflow ${workflowId}`, {
       userId,
     })
 
-    // Fetch the workflow to check ownership/access
     const accessContext = await getWorkflowAccessContext(workflowId, userId)
     const workflowData = accessContext?.workflow
 
@@ -79,7 +75,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Workflow not found' }, { status: 404 })
     }
 
-    // Check if user has permission to update this workflow
     const canUpdate =
       accessContext?.isOwner ||
       (workflowData.workspaceId
@@ -94,8 +89,6 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
-    // Use provided blocks/edges if available (with live measurements from UI),
-    // otherwise load from database
     let currentWorkflowData: NormalizedWorkflowData | null
 
     if (layoutOptions.blocks && layoutOptions.edges) {
@@ -125,6 +118,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
         y: layoutOptions.padding?.y ?? DEFAULT_LAYOUT_PADDING.y,
       },
       alignment: layoutOptions.alignment,
+      gridSize: layoutOptions.gridSize,
     }
 
     const layoutResult = applyAutoLayout(

apps/sim/app/api/workflows/[id]/autolayout/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { useReactFlow } from 'reactflow'
 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'
+import { useSnapToGridSize } from '@/hooks/queries/general-settings'
 import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
 
 export type { AutoLayoutOptions }
@@ -13,21 +14,28 @@ const logger = createLogger('useAutoLayout')
  * Hook providing auto-layout functionality for workflows.
  * Binds workflowId context and provides memoized callback for React components.
  * Includes automatic fitView animation after successful layout.
+ * Automatically uses the user's snap-to-grid setting for grid-aligned layout.
  *
  * Note: This hook requires a ReactFlowProvider ancestor.
  */
 export function useAutoLayout(workflowId: string | null) {
   const reactFlowInstance = useReactFlow()
   const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
+  const snapToGridSize = useSnapToGridSize()
 
   const applyAutoLayoutAndUpdateStore = useCallback(
     async (options: AutoLayoutOptions = {}) => {
       if (!workflowId) {
         return { success: false, error: 'No workflow ID provided' }
       }
-      return applyAutoLayoutStandalone(workflowId, options)
+      // Include gridSize from user's snap-to-grid setting
+      const optionsWithGrid: AutoLayoutOptions = {
+        ...options,
+        gridSize: options.gridSize ?? (snapToGridSize > 0 ? snapToGridSize : undefined),
+      }
+      return applyAutoLayoutStandalone(workflowId, optionsWithGrid)
     },
-    [workflowId]
+    [workflowId, snapToGridSize]
   )
 
   /**

apps/sim/app/api/yaml/autolayout/route.ts

@@ -21,6 +21,7 @@ export interface AutoLayoutOptions {
     x?: number
     y?: number
   }
+  gridSize?: number
 }
 
 /**
@@ -62,6 +63,7 @@ export async function applyAutoLayoutAndUpdateStore(
         x: options.padding?.x ?? DEFAULT_LAYOUT_PADDING.x,
         y: options.padding?.y ?? DEFAULT_LAYOUT_PADDING.y,
       },
+      gridSize: options.gridSize,
     }
 
     // Call the autolayout API route

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

@@ -2352,41 +2352,20 @@ const WorkflowContent = React.memo(() => {
       window.removeEventListener('remove-from-subflow', handleRemoveFromSubflow as EventListener)
   }, [blocks, edgesForDisplay, getNodeAbsolutePosition, collaborativeBatchUpdateParent])
 
-  /** Handles node changes - applies changes and resolves parent-child selection conflicts. */
-  const onNodesChange = useCallback(
-    (changes: NodeChange[]) => {
-      selectedIdsRef.current = null
-      setDisplayNodes((nds) => {
-        const updated = applyNodeChanges(changes, nds)
-        const hasSelectionChange = changes.some((c) => c.type === 'select')
-        if (!hasSelectionChange) return updated
-        const resolved = resolveParentChildSelectionConflicts(updated, blocks)
-        selectedIdsRef.current = resolved.filter((node) => node.selected).map((node) => node.id)
-        return resolved
-      })
-      const selectedIds = selectedIdsRef.current as string[] | null
-      if (selectedIds !== null) {
-        syncPanelWithSelection(selectedIds)
-      }
-    },
-    [blocks]
-  )
-
   /**
-   * Updates container dimensions in displayNodes during drag.
-   * This allows live resizing of containers as their children are dragged.
+   * Updates container dimensions in displayNodes during drag or keyboard movement.
    */
-  const updateContainerDimensionsDuringDrag = useCallback(
-    (draggedNodeId: string, draggedNodePosition: { x: number; y: number }) => {
-      const parentId = blocks[draggedNodeId]?.data?.parentId
+  const updateContainerDimensionsDuringMove = useCallback(
+    (movedNodeId: string, movedNodePosition: { x: number; y: number }) => {
+      const parentId = blocks[movedNodeId]?.data?.parentId
       if (!parentId) return
 
       setDisplayNodes((currentNodes) => {
         const childNodes = currentNodes.filter((n) => n.parentId === parentId)
         if (childNodes.length === 0) return currentNodes
 
         const childPositions = childNodes.map((node) => {
-          const nodePosition = node.id === draggedNodeId ? draggedNodePosition : node.position
+          const nodePosition = node.id === movedNodeId ? movedNodePosition : node.position
           const { width, height } = getBlockDimensions(node.id)
           return { x: nodePosition.x, y: nodePosition.y, width, height }
         })
@@ -2417,6 +2396,55 @@ const WorkflowContent = React.memo(() => {
     [blocks, getBlockDimensions]
   )
 
+  /** Handles node changes - applies changes and resolves parent-child selection conflicts. */
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      selectedIdsRef.current = null
+      setDisplayNodes((nds) => {
+        const updated = applyNodeChanges(changes, nds)
+        const hasSelectionChange = changes.some((c) => c.type === 'select')
+        if (!hasSelectionChange) return updated
+        const resolved = resolveParentChildSelectionConflicts(updated, blocks)
+        selectedIdsRef.current = resolved.filter((node) => node.selected).map((node) => node.id)
+        return resolved
+      })
+      const selectedIds = selectedIdsRef.current as string[] | null
+      if (selectedIds !== null) {
+        syncPanelWithSelection(selectedIds)
+      }
+
+      // Handle position changes (e.g., from keyboard arrow key movement)
+      // Update container dimensions when child nodes are moved and persist to backend
+      // Only persist if not in a drag operation (drag-end is handled by onNodeDragStop)
+      const isInDragOperation =
+        getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
+      const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> = []
+      for (const change of changes) {
+        if (
+          change.type === 'position' &&
+          !change.dragging &&
+          'position' in change &&
+          change.position
+        ) {
+          updateContainerDimensionsDuringMove(change.id, change.position)
+          if (!isInDragOperation) {
+            keyboardPositionUpdates.push({ id: change.id, position: change.position })
+          }
+        }
+      }
+      // Persist keyboard movements to backend for collaboration sync
+      if (keyboardPositionUpdates.length > 0) {
+        collaborativeBatchUpdatePositions(keyboardPositionUpdates)
+      }
+    },
+    [
+      blocks,
+      updateContainerDimensionsDuringMove,
+      collaborativeBatchUpdatePositions,
+      getDragStartPosition,
+    ]
+  )
+
   /**
    * Effect to resize loops when nodes change (add/remove/position change).
    * Runs on structural changes only - not during drag (position-only changes).
@@ -2661,7 +2689,7 @@ const WorkflowContent = React.memo(() => {
 
       // If the node is inside a container, update container dimensions during drag
       if (currentParentId) {
-        updateContainerDimensionsDuringDrag(node.id, node.position)
+        updateContainerDimensionsDuringMove(node.id, node.position)
       }
 
       // Check if this is a starter block - starter blocks should never be in containers
@@ -2778,7 +2806,7 @@ const WorkflowContent = React.memo(() => {
       blocks,
       getNodeAbsolutePosition,
       getNodeDepth,
-      updateContainerDimensionsDuringDrag,
+      updateContainerDimensionsDuringMove,
       highlightContainerNode,
     ]
   )