refactor(ui): eliminate prop drilling in editor, home, sidebar, and logs dashboard (#4950)

* refactor(ui): eliminate prop drilling in editor, home, sidebar, and logs dashboard

- panel editor: activeSearchTarget was relayed untouched through SubBlock and
  30+ input components (depth up to 6); now provided once via
  ActiveSearchTargetProvider and re-provided at tool-input's synthetic
  sub-block transformation points; removed the vestigial workspaceId
  option from SubBlockInputController/useSubBlockInput
- home: ChatSurfaceProvider carries chatId/userId and stable interaction
  callbacks to UserInput/MessageContent/MessageActions;
  MothershipResourcesProvider carries the five resource operations to
  ResourceTabs, removing MothershipView's pure-relay props
- sidebar: extended SidebarDragContext into SidebarListContext so
  WorkflowItem/FolderItem read selection/drag callbacks directly; moved the
  hidden import input up to sidebar.tsx (also fixes import no-op while the
  list shows a skeleton)
- logs dashboard: DashboardSegmentsContext feeds StatusBar directly;
  WorkflowsList no longer relays segment selection state

* refactor(home): sync ChatSurfaceProvider callback refs in a layout effect

Mutating refs during render is unsound under concurrent rendering (render
may run multiple times before commit); useLayoutEffect commits the latest
callbacks before any user event can fire.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

@@ -17,6 +17,7 @@ import {
   toast,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import { useSubmitCopilotFeedback } from '@/hooks/queries/copilot-feedback'
 import { useForkMothershipChat } from '@/hooks/queries/mothership-chats'
 import { useFolderStore } from '@/stores/folders/store'
@@ -49,21 +50,20 @@ const BUTTON_CLASS =
 
 interface MessageActionsProps {
   content: string
-  chatId?: string
   userQuery?: string
   requestId?: string
   messageId?: string
 }
 
 export const MessageActions = memo(function MessageActions({
   content,
-  chatId,
   userQuery,
   requestId,
   messageId,
 }: MessageActionsProps) {
   const router = useRouter()
   const params = useParams<{ workspaceId: string }>()
+  const { chatId } = useChatSurface()
   const [copied, setCopied] = useState(false)
   const [copiedRequestId, setCopiedRequestId] = useState(false)
   const [pendingFeedback, setPendingFeedback] = useState<'up' | 'down' | null>(null)

apps/sim/app/workspace/[workspaceId]/home/components/chat-surface-context/chat-surface-context.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+import type { ChatContext } from '@/stores/panel'
+
+/**
+ * Identity and interaction callbacks shared across a Mothership chat surface
+ * (home conversation view, home initial view, copilot panel). Carried via
+ * context so leaf components (UserInput, MessageContent, MessageActions) can
+ * consume them without relaying through every intermediate component.
+ */
+interface ChatSurfaceContextValue {
+  /** Resolved id of the chat backing this surface, if one exists yet. */
+  chatId?: string
+  /** Id of the user interacting with this surface. */
+  userId?: string
+  /** Notifies the surface owner that a context chip was added to the input. */
+  onContextAdd: (context: ChatContext) => void
+  /** Notifies the surface owner that a context chip was removed from the input. */
+  onContextRemove: (context: ChatContext) => void
+  /** Opens a workspace resource referenced from rendered message content. */
+  onWorkspaceResourceSelect: (resource: MothershipResource) => void
+}
+
+const noop = () => {}
+
+const ChatSurfaceContext = createContext<ChatSurfaceContextValue>({
+  onContextAdd: noop,
+  onContextRemove: noop,
+  onWorkspaceResourceSelect: noop,
+})
+
+interface ChatSurfaceProviderProps {
+  chatId?: string
+  userId?: string
+  onContextAdd?: (context: ChatContext) => void
+  onContextRemove?: (context: ChatContext) => void
+  onWorkspaceResourceSelect?: (resource: MothershipResource) => void
+  children: ReactNode
+}
+
+/**
+ * Provides the chat-surface identity and interaction callbacks to descendants.
+ * Callbacks are latched in refs and exposed as stable wrappers so the memoized
+ * context value only changes when `chatId` or `userId` change — consumers do
+ * not re-render when a parent re-creates a handler.
+ */
+export function ChatSurfaceProvider({
+  chatId,
+  userId,
+  onContextAdd,
+  onContextRemove,
+  onWorkspaceResourceSelect,
+  children,
+}: ChatSurfaceProviderProps) {
+  const onContextAddRef = useRef(onContextAdd)
+  const onContextRemoveRef = useRef(onContextRemove)
+  const onWorkspaceResourceSelectRef = useRef(onWorkspaceResourceSelect)
+
+  useLayoutEffect(() => {
+    onContextAddRef.current = onContextAdd
+    onContextRemoveRef.current = onContextRemove
+    onWorkspaceResourceSelectRef.current = onWorkspaceResourceSelect
+  })
+
+  const stableOnContextAdd = useCallback((context: ChatContext) => {
+    onContextAddRef.current?.(context)
+  }, [])
+  const stableOnContextRemove = useCallback((context: ChatContext) => {
+    onContextRemoveRef.current?.(context)
+  }, [])
+  const stableOnWorkspaceResourceSelect = useCallback((resource: MothershipResource) => {
+    onWorkspaceResourceSelectRef.current?.(resource)
+  }, [])
+
+  const value = useMemo<ChatSurfaceContextValue>(
+    () => ({
+      chatId,
+      userId,
+      onContextAdd: stableOnContextAdd,
+      onContextRemove: stableOnContextRemove,
+      onWorkspaceResourceSelect: stableOnWorkspaceResourceSelect,
+    }),
+    [chatId, userId, stableOnContextAdd, stableOnContextRemove, stableOnWorkspaceResourceSelect]
+  )
+
+  return <ChatSurfaceContext.Provider value={value}>{children}</ChatSurfaceContext.Provider>
+}
+
+/**
+ * Reads the surrounding chat surface. Outside a provider this returns no-op
+ * callbacks and undefined identity, matching the previous optional-prop
+ * behavior.
+ */
+export function useChatSurface(): ChatSurfaceContextValue {
+  return useContext(ChatSurfaceContext)
+}

apps/sim/app/workspace/[workspaceId]/home/components/chat-surface-context/index.ts

@@ -0,0 +1 @@
+export { ChatSurfaceProvider, useChatSurface } from './chat-surface-context'

apps/sim/app/workspace/[workspaceId]/home/components/index.ts

@@ -1,11 +1,16 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
+export { ChatSurfaceProvider, useChatSurface } from './chat-surface-context'
 export { ContextMentionIcon } from './context-mention-icon'
 export { CreditsChip } from './credits-chip'
 export {
   assistantMessageHasRenderableContent,
   MessageContent,
 } from './message-content'
 export { MothershipChat } from './mothership-chat'
+export {
+  MothershipResourcesProvider,
+  useMothershipResources,
+} from './mothership-resources-context'
 export { MothershipView } from './mothership-view'
 export { QueuedMessages } from './queued-messages'
 export { SuggestedActions } from './suggested-actions'

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

@@ -6,7 +6,8 @@ import { Read as ReadTool, WorkspaceFile } from '@/lib/copilot/generated/tool-ca
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
 import { resolveToolDisplay } from '@/lib/copilot/tools/client/store-utils'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/tool-call-state'
-import type { ContentBlock, MothershipResource, OptionItem, ToolCallData } from '../../types'
+import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
+import type { ContentBlock, OptionItem, ToolCallData } from '../../types'
 import { SUBAGENT_LABELS, TOOL_UI_METADATA } from '../../types'
 import type { AgentGroupItem } from './components'
 import {
@@ -676,16 +677,15 @@ interface MessageContentProps {
   fallbackContent: string
   isStreaming: boolean
   onOptionSelect?: (id: string) => void
-  onWorkspaceResourceSelect?: (resource: MothershipResource) => void
 }
 
 function MessageContentInner({
   blocks,
   fallbackContent,
   isStreaming = false,
   onOptionSelect,
-  onWorkspaceResourceSelect,
 }: MessageContentProps) {
+  const { onWorkspaceResourceSelect } = useChatSurface()
   const parsed = useMemo(() => (blocks.length > 0 ? parseBlocks(blocks) : []), [blocks])
 
   const segments: MessageSegment[] =

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -4,6 +4,7 @@ import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from '
 import { cn } from '@/lib/core/utils/cn'
 import { MessageActions } from '@/app/workspace/[workspaceId]/components'
 import { ChatMessageAttachments } from '@/app/workspace/[workspaceId]/home/components/chat-message-attachments'
+import { ChatSurfaceProvider } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import {
   assistantMessageHasRenderableContent,
   MessageContent,
@@ -124,20 +125,16 @@ interface AssistantMessageRowProps {
   message: ChatMessage
   isStreaming: boolean
   precedingUserContent?: string
-  chatId?: string
   rowClassName: string
   onOptionSelect?: (id: string) => void
-  onWorkspaceResourceSelect?: (resource: MothershipResource) => void
 }
 
 const AssistantMessageRow = memo(function AssistantMessageRow({
   message,
   isStreaming,
   precedingUserContent,
-  chatId,
   rowClassName,
   onOptionSelect,
-  onWorkspaceResourceSelect,
 }: AssistantMessageRowProps) {
   const blocks = message.contentBlocks ?? EMPTY_BLOCKS
   const hasAnyBlocks = blocks.length > 0
@@ -161,13 +158,11 @@ const AssistantMessageRow = memo(function AssistantMessageRow({
         fallbackContent={message.content}
         isStreaming={isStreaming}
         onOptionSelect={onOptionSelect}
-        onWorkspaceResourceSelect={onWorkspaceResourceSelect}
       />
       {showActions && (
         <div className='mt-2.5'>
           <MessageActions
             content={message.content}
-            chatId={chatId}
             userQuery={precedingUserContent}
             requestId={message.requestId}
             messageId={message.id}
@@ -241,17 +236,12 @@ export function MothershipChat({
   const userInputRef = useRef<UserInputHandle>(null)
 
   const onSubmitRef = useRef(onSubmit)
-  const onWorkspaceResourceSelectRef = useRef(onWorkspaceResourceSelect)
   useEffect(() => {
     onSubmitRef.current = onSubmit
-    onWorkspaceResourceSelectRef.current = onWorkspaceResourceSelect
-  }, [onSubmit, onWorkspaceResourceSelect])
+  }, [onSubmit])
   const stableOnOptionSelect = useCallback((id: string) => {
     onSubmitRef.current(id)
   }, [])
-  const stableOnWorkspaceResourceSelect = useCallback((resource: MothershipResource) => {
-    onWorkspaceResourceSelectRef.current?.(resource)
-  }, [])
 
   function handleSendQueuedHead() {
     const topMessage = messageQueue[0]
@@ -286,75 +276,78 @@ export function MothershipChat({
   }, [isStaging, stagedMessageCount, initialScrollBlocked, scrollToBottom])
 
   return (
-    <div className={cn('flex h-full min-h-0 flex-col', className)}>
-      <div ref={scrollContainerRef} className={styles.scrollContainer}>
-        {isLoading && !hasMessages ? (
-          <MothershipChatSkeleton layout={layout} />
-        ) : (
-          <div className={styles.content}>
-            {stagedMessages.map((msg, localIndex) => {
-              const index = stagedOffset + localIndex
-              if (msg.role === 'user') {
+    <ChatSurfaceProvider
+      chatId={chatId}
+      userId={userId}
+      onContextAdd={onContextAdd}
+      onContextRemove={onContextRemove}
+      onWorkspaceResourceSelect={onWorkspaceResourceSelect}
+    >
+      <div className={cn('flex h-full min-h-0 flex-col', className)}>
+        <div ref={scrollContainerRef} className={styles.scrollContainer}>
+          {isLoading && !hasMessages ? (
+            <MothershipChatSkeleton layout={layout} />
+          ) : (
+            <div className={styles.content}>
+              {stagedMessages.map((msg, localIndex) => {
+                const index = stagedOffset + localIndex
+                if (msg.role === 'user') {
+                  return (
+                    <UserMessageRow
+                      key={msg.id}
+                      content={msg.content}
+                      contexts={msg.contexts}
+                      attachments={msg.attachments}
+                      rowClassName={styles.userRow}
+                      bubbleClassName={styles.userBubble}
+                      attachmentWidthClassName={styles.attachmentWidth}
+                    />
+                  )
+                }
+
+                const isLast = index === messages.length - 1
                 return (
-                  <UserMessageRow
-                    key={msg.id}
-                    content={msg.content}
-                    contexts={msg.contexts}
-                    attachments={msg.attachments}
-                    rowClassName={styles.userRow}
-                    bubbleClassName={styles.userBubble}
-                    attachmentWidthClassName={styles.attachmentWidth}
+                  <AssistantMessageRow
+                    key={assistantTurnKeyByIndex[index] ?? msg.id}
+                    message={msg}
+                    isStreaming={isStreamActive && isLast}
+                    precedingUserContent={precedingUserContentByIndex[index]}
+                    rowClassName={styles.assistantRow}
+                    onOptionSelect={isLast ? stableOnOptionSelect : undefined}
                   />
                 )
-              }
+              })}
+            </div>
+          )}
+        </div>
 
-              const isLast = index === messages.length - 1
-              return (
-                <AssistantMessageRow
-                  key={assistantTurnKeyByIndex[index] ?? msg.id}
-                  message={msg}
-                  isStreaming={isStreamActive && isLast}
-                  precedingUserContent={precedingUserContentByIndex[index]}
-                  chatId={chatId}
-                  rowClassName={styles.assistantRow}
-                  onOptionSelect={isLast ? stableOnOptionSelect : undefined}
-                  onWorkspaceResourceSelect={stableOnWorkspaceResourceSelect}
-                />
-              )
-            })}
+        <div
+          className={cn(styles.footer, animateInput && 'animate-slide-in-bottom')}
+          onAnimationEnd={animateInput ? onInputAnimationEnd : undefined}
+        >
+          <div className={styles.footerInner}>
+            <QueuedMessages
+              messageQueue={messageQueue}
+              editingQueuedId={editingQueuedId}
+              dispatchingHeadId={dispatchingHeadId}
+              onRemove={onRemoveQueuedMessage}
+              onSendNow={onSendQueuedMessage}
+              onEdit={handleEditQueued}
+              onCancelEdit={onCancelQueueEdit}
+            />
+            <UserInput
+              ref={userInputRef}
+              onSubmit={onSubmit}
+              isSending={isStreamActive}
+              onStopGeneration={onStopGeneration}
+              isInitialView={false}
+              onSendQueuedHead={handleSendQueuedHead}
+              onEditQueuedTail={handleEditQueuedTail}
+              draftScopeKey={draftScopeKey}
+            />
           </div>
-        )}
-      </div>
-
-      <div
-        className={cn(styles.footer, animateInput && 'animate-slide-in-bottom')}
-        onAnimationEnd={animateInput ? onInputAnimationEnd : undefined}
-      >
-        <div className={styles.footerInner}>
-          <QueuedMessages
-            messageQueue={messageQueue}
-            editingQueuedId={editingQueuedId}
-            dispatchingHeadId={dispatchingHeadId}
-            onRemove={onRemoveQueuedMessage}
-            onSendNow={onSendQueuedMessage}
-            onEdit={handleEditQueued}
-            onCancelEdit={onCancelQueueEdit}
-          />
-          <UserInput
-            ref={userInputRef}
-            onSubmit={onSubmit}
-            isSending={isStreamActive}
-            onStopGeneration={onStopGeneration}
-            isInitialView={false}
-            userId={userId}
-            onContextAdd={onContextAdd}
-            onContextRemove={onContextRemove}
-            onSendQueuedHead={handleSendQueuedHead}
-            onEditQueuedTail={handleEditQueuedTail}
-            draftScopeKey={draftScopeKey}
-          />
         </div>
       </div>
-    </div>
+    </ChatSurfaceProvider>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-resources-context/index.ts

@@ -0,0 +1,4 @@
+export {
+  MothershipResourcesProvider,
+  useMothershipResources,
+} from './mothership-resources-context'