improvement(logs): fix Gantt time bounds to walk full span tree; cleanup effects, memos, callbacks, React Query mutations

Author: waleedlatif1

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -98,11 +98,7 @@ function SignupFormContent({ githubAvailable, googleAvailable, isProduction }: S
   const [showEmailValidationError, setShowEmailValidationError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
   const turnstileRef = useRef<TurnstileInstance>(null)
-  const [turnstileSiteKey, setTurnstileSiteKey] = useState<string | undefined>()
-
-  useEffect(() => {
-    setTurnstileSiteKey(getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
-  }, [])
+  const [turnstileSiteKey] = useState(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
   const rawRedirectUrl = searchParams.get('redirect') || searchParams.get('callbackUrl') || ''
   const isValidRedirectUrl = rawRedirectUrl ? validateCallbackUrl(rawRedirectUrl) : false
   const invalidCallbackRef = useRef(false)

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Loader2, X } from 'lucide-react'
 import Image from 'next/image'
@@ -88,24 +88,21 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
     }
   }, [open, providerStatus, hasModalContent, defaultView, router, view])
 
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen && providerStatus && !hasModalContent) {
-        router.push(defaultView === 'login' ? '/login' : '/signup')
-        return
-      }
-      setOpen(nextOpen)
-      if (nextOpen) {
-        const initialView =
-          defaultView === 'signup' && providerStatus?.registrationDisabled ? 'login' : defaultView
-        setView(initialView)
-        captureClientEvent('auth_modal_opened', { view: initialView, source })
-      }
-    },
-    [defaultView, hasModalContent, providerStatus, router, source]
-  )
+  function handleOpenChange(nextOpen: boolean) {
+    if (nextOpen && providerStatus && !hasModalContent) {
+      router.push(defaultView === 'login' ? '/login' : '/signup')
+      return
+    }
+    setOpen(nextOpen)
+    if (nextOpen) {
+      const initialView =
+        defaultView === 'signup' && providerStatus?.registrationDisabled ? 'login' : defaultView
+      setView(initialView)
+      captureClientEvent('auth_modal_opened', { view: initialView, source })
+    }
+  }
 
-  const handleSocialLogin = useCallback(async (provider: 'github' | 'google') => {
+  async function handleSocialLogin(provider: 'github' | 'google') {
     setSocialLoading(provider)
     try {
       await client.signIn.social({ provider, callbackURL: '/workspace' })
@@ -114,17 +111,17 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
     } finally {
       setSocialLoading(null)
     }
-  }, [])
+  }
 
-  const handleSSOLogin = useCallback(() => {
+  function handleSSOLogin() {
     setOpen(false)
     router.push('/sso')
-  }, [router])
+  }
 
-  const handleEmailContinue = useCallback(() => {
+  function handleEmailContinue() {
     setOpen(false)
     router.push(view === 'login' ? '/login' : '/signup')
-  }, [router, view])
+  }
 
   return (
     <Modal open={open} onOpenChange={handleOpenChange}>

apps/sim/app/(landing)/components/contact/contact-form.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { toError } from '@sim/utils/errors'
 import { useMutation } from '@tanstack/react-query'
@@ -99,11 +99,7 @@ export function ContactForm() {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [website, setWebsite] = useState('')
   const [widgetReady, setWidgetReady] = useState(false)
-  const [turnstileSiteKey, setTurnstileSiteKey] = useState<string | undefined>()
-
-  useEffect(() => {
-    setTurnstileSiteKey(getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
-  }, [])
+  const [turnstileSiteKey] = useState(() => getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
 
   function updateField<TField extends keyof ContactFormState>(
     field: TField,

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createElement, useEffect, useMemo, useState } from 'react'
+import { createElement, useMemo, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { ArrowRight, ChevronDown, Expandable, ExpandableContent } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
@@ -403,23 +403,19 @@ interface OptionsDisplayProps {
 
 function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
   const disabled = !onSelect
-  const [expanded, setExpanded] = useState(!disabled)
+  const [collapsedByUser, setCollapsedByUser] = useState(false)
+  // When interactive (not disabled), always expanded. When disabled, the user can toggle.
+  const expanded = !disabled || !collapsedByUser
   const entries = Object.entries(data)
 
-  useEffect(() => {
-    if (!disabled) {
-      setExpanded(true)
-    }
-  }, [disabled])
-
   if (entries.length === 0) return null
 
   return (
     <div>
       {disabled ? (
         <button
           type='button'
-          onClick={() => setExpanded((prev) => !prev)}
+          onClick={() => setCollapsedByUser((prev) => !prev)}
           aria-expanded={expanded}
           className='flex items-center gap-2'
         >
@@ -527,12 +523,12 @@ export function WorkspaceResourceDisplay({
     }
   }, [data.id, data.type, files, knowledgeBases, tables, workflows])
 
-  const context = useMemo(() => toChatMessageContext(data, resource.title), [data, resource.title])
+  const context = toChatMessageContext(data, resource.title)
 
-  const workflowColor = useMemo(() => {
-    if (data.type !== 'workflow') return null
-    return workflows.find((workflow) => workflow.id === data.id)?.color ?? null
-  }, [data.id, data.type, workflows])
+  const workflowColor =
+    data.type === 'workflow'
+      ? (workflows.find((workflow) => workflow.id === data.id)?.color ?? null)
+      : null
 
   const mentionContent = (
     <>

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { lazy, memo, Suspense, useEffect, useMemo, useState } from 'react'
+import { lazy, memo, Suspense, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatDuration } from '@sim/utils/formatting'
 import { Square } from 'lucide-react'
@@ -248,9 +248,14 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
   )
   const { usageExceeded } = useUsageLimits()
 
-  useEffect(() => {
+  // Keep the active workflow in the registry up-to-date whenever the embedded
+  // workflow changes. This is safe during render because the store setter does
+  // not trigger a synchronous re-render of this component.
+  const prevWorkflowIdRef = useRef<string | undefined>(undefined)
+  if (prevWorkflowIdRef.current !== workflowId) {
+    prevWorkflowIdRef.current = workflowId
     setActiveWorkflow(workflowId)
-  }, [setActiveWorkflow, workflowId])
+  }
 
   const isRunButtonDisabled =
     !isExecuting && !effectivePermissions.canRead && !effectivePermissions.isLoading

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -239,16 +239,16 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
   valueRef.current = value
   const sttPrefixRef = useRef('')
 
-  const handleTranscript = useCallback((text: string) => {
+  function handleTranscript(text: string) {
     const prefix = sttPrefixRef.current
     const newVal = prefix ? `${prefix} ${text}` : text
     setValue(newVal)
     valueRef.current = newVal
-  }, [])
+  }
 
-  const handleUsageLimitExceeded = useCallback(() => {
+  function handleUsageLimitExceeded() {
     navigateToSettings({ section: 'subscription' })
-  }, [navigateToSettings])
+  }
 
   const {
     isListening,
@@ -588,7 +588,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     [handleSubmit, mentionTokensWithContext, value, textareaRef]
   )
 
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  function handleInputChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
     const newValue = e.target.value
     const caret = e.target.selectionStart ?? newValue.length
 
@@ -608,7 +608,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     }
 
     setValue(newValue)
-  }, [])
+  }
 
   const handleSelectAdjust = useCallback(() => {
     const textarea = textareaRef.current

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

@@ -125,11 +125,11 @@ export function Home({ chatId }: HomeProps = {}) {
     setIsResourceCollapsed(true)
   }, [clearWidth])
 
-  const handleResourceEvent = useCallback(() => {
+  function handleResourceEvent() {
     if (isResourceCollapsedRef.current) {
       setIsResourceCollapsed(false)
     }
-  }, [])
+  }
 
   const {
     messages,
@@ -201,34 +201,35 @@ export function Home({ chatId }: HomeProps = {}) {
     }
   }, [resources, collapseResource])
 
-  const handleStopGeneration = useCallback(() => {
+  function handleStopGeneration() {
     captureEvent(posthogRef.current, 'task_generation_aborted', {
       workspace_id: workspaceId,
       view: 'mothership',
     })
     void stopGeneration().catch(() => {})
-  }, [stopGeneration, workspaceId])
-
-  const handleSubmit = useCallback(
-    (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
-      const trimmed = text.trim()
-      if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
-
-      captureEvent(posthogRef.current, 'task_message_sent', {
-        workspace_id: workspaceId,
-        has_attachments: !!(fileAttachments && fileAttachments.length > 0),
-        has_contexts: !!(contexts && contexts.length > 0),
-        is_new_task: !chatId,
-      })
-
-      if (initialViewInputRef.current) {
-        setIsInputEntering(true)
-      }
+  }
 
-      sendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
-    },
-    [sendMessage, workspaceId, chatId]
-  )
+  function handleSubmit(
+    text: string,
+    fileAttachments?: FileAttachmentForApi[],
+    contexts?: ChatContext[]
+  ) {
+    const trimmed = text.trim()
+    if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
+
+    captureEvent(posthogRef.current, 'task_message_sent', {
+      workspace_id: workspaceId,
+      has_attachments: !!(fileAttachments && fileAttachments.length > 0),
+      has_contexts: !!(contexts && contexts.length > 0),
+      is_new_task: !chatId,
+    })
+
+    if (initialViewInputRef.current) {
+      setIsInputEntering(true)
+    }
+
+    sendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
+  }
 
   useEffect(() => {
     const handler = (e: Event) => {
@@ -239,55 +240,45 @@ export function Home({ chatId }: HomeProps = {}) {
     return () => window.removeEventListener('mothership-send-message', handler)
   }, [sendMessage])
 
-  const resolveResourceFromContext = useCallback(
-    (context: ChatContext): { type: MothershipResourceType; id: string } | null => {
-      switch (context.kind) {
-        case 'workflow':
-        case 'current_workflow':
-          return context.workflowId ? { type: 'workflow', id: context.workflowId } : null
-        case 'knowledge':
-          return context.knowledgeId ? { type: 'knowledgebase', id: context.knowledgeId } : null
-        case 'table':
-          return context.tableId ? { type: 'table', id: context.tableId } : null
-        case 'file':
-          return context.fileId ? { type: 'file', id: context.fileId } : null
-        default:
-          return null
-      }
-    },
-    []
-  )
+  function resolveResourceFromContext(
+    context: ChatContext
+  ): { type: MothershipResourceType; id: string } | null {
+    switch (context.kind) {
+      case 'workflow':
+      case 'current_workflow':
+        return context.workflowId ? { type: 'workflow', id: context.workflowId } : null
+      case 'knowledge':
+        return context.knowledgeId ? { type: 'knowledgebase', id: context.knowledgeId } : null
+      case 'table':
+        return context.tableId ? { type: 'table', id: context.tableId } : null
+      case 'file':
+        return context.fileId ? { type: 'file', id: context.fileId } : null
+      default:
+        return null
+    }
+  }
 
-  const handleContextAdd = useCallback(
-    (context: ChatContext) => {
-      const resolved = resolveResourceFromContext(context)
-      if (resolved) {
-        addResource({ ...resolved, title: context.label })
-        handleResourceEvent()
-      }
-    },
-    [resolveResourceFromContext, addResource, handleResourceEvent]
-  )
+  function handleContextAdd(context: ChatContext) {
+    const resolved = resolveResourceFromContext(context)
+    if (resolved) {
+      addResource({ ...resolved, title: context.label })
+      handleResourceEvent()
+    }
+  }
 
-  const handleInitialContextRemove = useCallback(
-    (context: ChatContext) => {
-      const resolved = resolveResourceFromContext(context)
-      if (!resolved) return
-      removeResource(resolved.type, resolved.id)
-    },
-    [resolveResourceFromContext, removeResource]
-  )
+  function handleInitialContextRemove(context: ChatContext) {
+    const resolved = resolveResourceFromContext(context)
+    if (!resolved) return
+    removeResource(resolved.type, resolved.id)
+  }
 
-  const handleWorkspaceResourceSelect = useCallback(
-    (resource: MothershipResource) => {
-      const wasAdded = addResource(resource)
-      if (!wasAdded) {
-        setActiveResourceId(resource.id)
-      }
-      handleResourceEvent()
-    },
-    [addResource, handleResourceEvent, setActiveResourceId]
-  )
+  function handleWorkspaceResourceSelect(resource: MothershipResource) {
+    const wasAdded = addResource(resource)
+    if (!wasAdded) {
+      setActiveResourceId(resource.id)
+    }
+    handleResourceEvent()
+  }
 
   const hasMessages = messages.length > 0
   const showChatSkeleton = Boolean(chatId) && !hasMessages && isChatHistoryPending