Merge branch 'staging' into feat/workflow-as-mcp

Author: icecrasher321

apps/sim/app/api/users/me/settings/route.ts

@@ -26,9 +26,9 @@ const SettingsSchema = z.object({
   showTrainingControls: z.boolean().optional(),
   superUserModeEnabled: z.boolean().optional(),
   errorNotificationsEnabled: z.boolean().optional(),
+  snapToGridSize: z.number().min(0).max(50).optional(),
 })
 
-// Default settings values
 const defaultSettings = {
   theme: 'system',
   autoConnect: true,
@@ -38,6 +38,7 @@ const defaultSettings = {
   showTrainingControls: false,
   superUserModeEnabled: false,
   errorNotificationsEnabled: true,
+  snapToGridSize: 0,
 }
 
 export async function GET() {
@@ -46,7 +47,6 @@ export async function GET() {
   try {
     const session = await getSession()
 
-    // Return default settings for unauthenticated users instead of 401 error
     if (!session?.user?.id) {
       logger.info(`[${requestId}] Returning default settings for unauthenticated user`)
       return NextResponse.json({ data: defaultSettings }, { status: 200 })
@@ -72,13 +72,13 @@ export async function GET() {
           showTrainingControls: userSettings.showTrainingControls ?? false,
           superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
+          snapToGridSize: userSettings.snapToGridSize ?? 0,
         },
       },
       { status: 200 }
     )
   } catch (error: any) {
     logger.error(`[${requestId}] Settings fetch error`, error)
-    // Return default settings on error instead of error response
     return NextResponse.json({ data: defaultSettings }, { status: 200 })
   }
 }
@@ -89,7 +89,6 @@ export async function PATCH(request: Request) {
   try {
     const session = await getSession()
 
-    // Return success for unauthenticated users instead of error
     if (!session?.user?.id) {
       logger.info(
         `[${requestId}] Settings update attempted by unauthenticated user - acknowledged without saving`
@@ -103,7 +102,6 @@ export async function PATCH(request: Request) {
     try {
       const validatedData = SettingsSchema.parse(body)
 
-      // Store the settings
       await db
         .insert(settings)
         .values({
@@ -135,7 +133,6 @@ export async function PATCH(request: Request) {
     }
   } catch (error: any) {
     logger.error(`[${requestId}] Settings update error`, error)
-    // Return success on error instead of error response
     return NextResponse.json({ success: true }, { status: 200 })
   }
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx

@@ -37,7 +37,7 @@ import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-
 import type { GenerationType } from '@/blocks/types'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useTagSelection } from '@/hooks/use-tag-selection'
-import { normalizeBlockName } from '@/stores/workflows/utils'
+import { normalizeName } from '@/stores/workflows/utils'
 
 const logger = createLogger('Code')
 
@@ -602,7 +602,7 @@ export function Code({
 
     const inner = reference.slice(1, -1)
     const [prefix] = inner.split('.')
-    const normalizedPrefix = normalizeBlockName(prefix)
+    const normalizedPrefix = normalizeName(prefix)
 
     if (SYSTEM_REFERENCE_PREFIXES.has(normalizedPrefix)) {
       return true

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx

@@ -33,7 +33,7 @@ import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/c
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useTagSelection } from '@/hooks/use-tag-selection'
-import { normalizeBlockName } from '@/stores/workflows/utils'
+import { normalizeName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('ConditionInput')
@@ -139,7 +139,7 @@ export function ConditionInput({
 
     const inner = reference.slice(1, -1)
     const [prefix] = inner.split('.')
-    const normalizedPrefix = normalizeBlockName(prefix)
+    const normalizedPrefix = normalizeName(prefix)
 
     if (SYSTEM_REFERENCE_PREFIXES.has(normalizedPrefix)) {
       return true

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react'
 import { splitReferenceSegment } from '@/lib/workflows/sanitization/references'
 import { REFERENCE } from '@/executor/constants'
 import { createCombinedPattern } from '@/executor/utils/reference-validation'
-import { normalizeBlockName } from '@/stores/workflows/utils'
+import { normalizeName } from '@/stores/workflows/utils'
 
 export interface HighlightContext {
   accessiblePrefixes?: Set<string>
@@ -31,7 +31,7 @@ export function formatDisplayText(text: string, context?: HighlightContext): Rea
 
     const inner = reference.slice(1, -1)
     const [prefix] = inner.split('.')
-    const normalizedPrefix = normalizeBlockName(prefix)
+    const normalizedPrefix = normalizeName(prefix)
 
     if (SYSTEM_PREFIXES.has(normalizedPrefix)) {
       return true

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -34,6 +34,7 @@ import { useVariablesStore } from '@/stores/panel/variables/store'
 import type { Variable } from '@/stores/panel/variables/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { normalizeName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 import { getTool } from '@/tools/utils'
@@ -117,20 +118,6 @@ const TAG_PREFIXES = {
   VARIABLE: 'variable.',
 } as const
 
-/**
- * Normalizes a block name by removing spaces and converting to lowercase
- */
-const normalizeBlockName = (blockName: string): string => {
-  return blockName.replace(/\s+/g, '').toLowerCase()
-}
-
-/**
- * Normalizes a variable name by removing spaces
- */
-const normalizeVariableName = (variableName: string): string => {
-  return variableName.replace(/\s+/g, '')
-}
-
 /**
  * Ensures the root tag is present in the tags array
  */
@@ -521,7 +508,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
         if (sourceBlock.type === 'loop' || sourceBlock.type === 'parallel') {
           const mockConfig = { outputs: { results: 'array' } }
           const blockName = sourceBlock.name || sourceBlock.type
-          const normalizedBlockName = normalizeBlockName(blockName)
+          const normalizedBlockName = normalizeName(blockName)
 
           const outputPaths = generateOutputPaths(mockConfig.outputs)
           const blockTags = outputPaths.map((path) => `${normalizedBlockName}.${path}`)
@@ -542,7 +529,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       }
 
       const blockName = sourceBlock.name || sourceBlock.type
-      const normalizedBlockName = normalizeBlockName(blockName)
+      const normalizedBlockName = normalizeName(blockName)
 
       const mergedSubBlocks = getMergedSubBlocks(activeSourceBlockId)
       const responseFormatValue = mergedSubBlocks?.responseFormat?.value
@@ -735,12 +722,12 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     )
 
     const variableTags = validVariables.map(
-      (variable: Variable) => `${TAG_PREFIXES.VARIABLE}${normalizeVariableName(variable.name)}`
+      (variable: Variable) => `${TAG_PREFIXES.VARIABLE}${normalizeName(variable.name)}`
     )
 
     const variableInfoMap = validVariables.reduce(
       (acc, variable) => {
-        const tagName = `${TAG_PREFIXES.VARIABLE}${normalizeVariableName(variable.name)}`
+        const tagName = `${TAG_PREFIXES.VARIABLE}${normalizeName(variable.name)}`
         acc[tagName] = {
           type: variable.type,
           id: variable.id,
@@ -865,7 +852,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
 
           const mockConfig = { outputs: { results: 'array' } }
           const blockName = accessibleBlock.name || accessibleBlock.type
-          const normalizedBlockName = normalizeBlockName(blockName)
+          const normalizedBlockName = normalizeName(blockName)
 
           const outputPaths = generateOutputPaths(mockConfig.outputs)
           let blockTags = outputPaths.map((path) => `${normalizedBlockName}.${path}`)
@@ -885,7 +872,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       }
 
       const blockName = accessibleBlock.name || accessibleBlock.type
-      const normalizedBlockName = normalizeBlockName(blockName)
+      const normalizedBlockName = normalizeName(blockName)
 
       const mergedSubBlocks = getMergedSubBlocks(accessibleBlockId)
       const responseFormatValue = mergedSubBlocks?.responseFormat?.value

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts

@@ -9,7 +9,7 @@ import { checkTagTrigger } from '@/app/workspace/[workspaceId]/w/[workflowId]/co
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
-import { normalizeBlockName } from '@/stores/workflows/utils'
+import { normalizeName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 
@@ -110,7 +110,7 @@ export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId
 
       const inner = reference.slice(1, -1)
       const [prefix] = inner.split('.')
-      const normalizedPrefix = normalizeBlockName(prefix)
+      const normalizedPrefix = normalizeName(prefix)
 
       if (SYSTEM_REFERENCE_PREFIXES.has(normalizedPrefix)) {
         return true

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { BlockPathCalculator } from '@/lib/workflows/blocks/block-path-calculator'
 import { SYSTEM_REFERENCE_PREFIXES } from '@/lib/workflows/sanitization/references'
-import { normalizeBlockName } from '@/stores/workflows/utils'
+import { normalizeName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { Loop, Parallel } from '@/stores/workflows/workflow/types'
 
@@ -53,10 +53,10 @@ export function useAccessibleReferencePrefixes(blockId?: string | null): Set<str
 
     const prefixes = new Set<string>()
     accessibleIds.forEach((id) => {
-      prefixes.add(normalizeBlockName(id))
+      prefixes.add(normalizeName(id))
       const block = blocks[id]
       if (block?.name) {
-        prefixes.add(normalizeBlockName(block.name))
+        prefixes.add(normalizeName(block.name))
       }
     })
 

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

@@ -92,7 +92,6 @@ const edgeTypes: EdgeTypes = {
 
 /** ReactFlow configuration constants. */
 const defaultEdgeOptions = { type: 'custom' }
-const snapGrid: [number, number] = [20, 20]
 const reactFlowFitViewOptions = { padding: 0.6 } as const
 const reactFlowProOptions = { hideAttribution: true } as const
 
@@ -160,6 +159,14 @@ const WorkflowContent = React.memo(() => {
   // Training modal state
   const showTrainingModal = useCopilotTrainingStore((state) => state.showModal)
 
+  // Snap to grid settings
+  const snapToGridSize = useGeneralStore((state) => state.snapToGridSize)
+  const snapToGrid = snapToGridSize > 0
+  const snapGrid: [number, number] = useMemo(
+    () => [snapToGridSize, snapToGridSize],
+    [snapToGridSize]
+  )
+
   // Handle copilot stream cleanup on page unload and component unmount
   useStreamCleanup(copilotCleanup)
 
@@ -2311,7 +2318,7 @@ const WorkflowContent = React.memo(() => {
               onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
               onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
               onNodeDragStart={effectivePermissions.canEdit ? onNodeDragStart : undefined}
-              snapToGrid={false}
+              snapToGrid={snapToGrid}
               snapGrid={snapGrid}
               elevateEdgesOnSelect={true}
               onlyRenderVisibleElements={false}

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

@@ -52,6 +52,17 @@ interface UIEnvironmentVariable {
   id?: number
 }
 
+/**
+ * Validates an environment variable key.
+ * Returns an error message if invalid, undefined if valid.
+ */
+function validateEnvVarKey(key: string): string | undefined {
+  if (!key) return undefined
+  if (key.includes(' ')) return 'Spaces are not allowed'
+  if (!ENV_VAR_PATTERN.test(key)) return 'Only letters, numbers, and underscores allowed'
+  return undefined
+}
+
 interface EnvironmentVariablesProps {
   registerBeforeLeaveHandler?: (handler: (onProceed: () => void) => void) => void
 }
@@ -222,6 +233,10 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
     return envVars.some((envVar) => !!envVar.key && Object.hasOwn(workspaceVars, envVar.key))
   }, [envVars, workspaceVars])
 
+  const hasInvalidKeys = useMemo(() => {
+    return envVars.some((envVar) => !!envVar.key && validateEnvVarKey(envVar.key))
+  }, [envVars])
+
   useEffect(() => {
     hasChangesRef.current = hasChanges
   }, [hasChanges])
@@ -551,6 +566,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
   const renderEnvVarRow = useCallback(
     (envVar: UIEnvironmentVariable, originalIndex: number) => {
       const isConflict = !!envVar.key && Object.hasOwn(workspaceVars, envVar.key)
+      const keyError = validateEnvVarKey(envVar.key)
       const maskedValueStyle =
         focusedValueIndex !== originalIndex && !isConflict
           ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
@@ -571,7 +587,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
               spellCheck='false'
               readOnly
               onFocus={(e) => e.target.removeAttribute('readOnly')}
-              className={`h-9 ${isConflict ? conflictClassName : ''}`}
+              className={`h-9 ${isConflict ? conflictClassName : ''} ${keyError ? 'border-[var(--text-error)]' : ''}`}
             />
             <div />
             <EmcnInput
@@ -627,7 +643,12 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
               </Tooltip.Root>
             </div>
           </div>
-          {isConflict && (
+          {keyError && (
+            <div className='col-span-3 mt-[4px] text-[12px] text-[var(--text-error)] leading-tight'>
+              {keyError}
+            </div>
+          )}
+          {isConflict && !keyError && (
             <div className='col-span-3 mt-[4px] text-[12px] text-[var(--text-error)] leading-tight'>
               Workspace variable with the same name overrides this. Rename your personal key to use
               it.
@@ -707,14 +728,17 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
             <Tooltip.Trigger asChild>
               <Button
                 onClick={handleSave}
-                disabled={isLoading || !hasChanges || hasConflicts}
+                disabled={isLoading || !hasChanges || hasConflicts || hasInvalidKeys}
                 variant='primary'
-                className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
+                className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts || hasInvalidKeys ? 'cursor-not-allowed opacity-50' : ''}`}
               >
                 Save
               </Button>
             </Tooltip.Trigger>
             {hasConflicts && <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>}
+            {hasInvalidKeys && !hasConflicts && (
+              <Tooltip.Content>Fix invalid variable names before saving</Tooltip.Content>
+            )}
           </Tooltip.Root>
         </div>
 
@@ -808,27 +832,31 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
           <ModalHeader>Unsaved Changes</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)]'>
-              {hasConflicts
-                ? 'You have unsaved changes, but conflicts must be resolved before saving. You can discard your changes to close the modal.'
+              {hasConflicts || hasInvalidKeys
+                ? `You have unsaved changes, but ${hasConflicts ? 'conflicts must be resolved' : 'invalid variable names must be fixed'} before saving. You can discard your changes to close the modal.`
                 : 'You have unsaved changes. Do you want to save them before closing?'}
             </p>
           </ModalBody>
           <ModalFooter>
             <Button variant='default' onClick={handleCancel}>
               Discard Changes
             </Button>
-            {hasConflicts ? (
+            {hasConflicts || hasInvalidKeys ? (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
                     disabled={true}
                     variant='primary'
-                    className='cursor-not-allowed opacity-50'
+                    className={`${PRIMARY_BUTTON_STYLES} cursor-not-allowed opacity-50`}
                   >
                     Save Changes
                   </Button>
                 </Tooltip.Trigger>
-                <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
+                <Tooltip.Content>
+                  {hasConflicts
+                    ? 'Resolve all conflicts before saving'
+                    : 'Fix invalid variable names before saving'}
+                </Tooltip.Content>
               </Tooltip.Root>
             ) : (
               <Button onClick={handleSave} variant='primary' className={PRIMARY_BUTTON_STYLES}>