fixed flicker on importing multiple workflows

* fix(resize): fix subflow resize on drag, children deselected in subflow on drag

* ack PR comments

* fix copy-paste subflows deselecting children

* ack comments

apps/sim/app/_shell/providers/tooltip-provider.tsx

@@ -1,11 +0,0 @@
-'use client'
-
-import { Tooltip } from '@/components/emcn'
-
-interface TooltipProviderProps {
-  children: React.ReactNode
-}
-
-export function TooltipProvider({ children }: TooltipProviderProps) {
-  return <Tooltip.Provider>{children}</Tooltip.Provider>
-}

apps/sim/app/_styles/globals.css

@@ -58,25 +58,6 @@
   pointer-events: none !important;
 }
 
-/**
- * Workflow canvas cursor styles
- * Override React Flow's default selection cursor based on canvas mode
- */
-.workflow-container.canvas-mode-cursor .react-flow__pane,
-.workflow-container.canvas-mode-cursor .react-flow__selectionpane {
-  cursor: default !important;
-}
-
-.workflow-container.canvas-mode-hand .react-flow__pane,
-.workflow-container.canvas-mode-hand .react-flow__selectionpane {
-  cursor: grab !important;
-}
-
-.workflow-container.canvas-mode-hand .react-flow__pane:active,
-.workflow-container.canvas-mode-hand .react-flow__selectionpane:active {
-  cursor: grabbing !important;
-}
-
 /**
  * Selected node ring indicator
  * Uses a pseudo-element overlay to match the original behavior (absolute inset-0 z-40)

apps/sim/app/api/copilot/chat/route.ts

@@ -802,49 +802,29 @@ export async function POST(req: NextRequest) {
               toolNames: toolCalls.map((tc) => tc?.name).filter(Boolean),
             })
 
-            // Save messages to database after streaming completes (including aborted messages)
+            // NOTE: Messages are saved by the client via update-messages endpoint with full contentBlocks.
+            // Server only updates conversationId here to avoid overwriting client's richer save.
             if (currentChat) {
-              const updatedMessages = [...conversationHistory, userMessage]
-
-              // Save assistant message if there's any content or tool calls (even partial from abort)
-              if (assistantContent.trim() || toolCalls.length > 0) {
-                const assistantMessage = {
-                  id: crypto.randomUUID(),
-                  role: 'assistant',
-                  content: assistantContent,
-                  timestamp: new Date().toISOString(),
-                  ...(toolCalls.length > 0 && { toolCalls }),
-                }
-                updatedMessages.push(assistantMessage)
-                logger.info(
-                  `[${tracker.requestId}] Saving assistant message with content (${assistantContent.length} chars) and ${toolCalls.length} tool calls`
-                )
-              } else {
-                logger.info(
-                  `[${tracker.requestId}] No assistant content or tool calls to save (aborted before response)`
-                )
-              }
-
               // Persist only a safe conversationId to avoid continuing from a state that expects tool outputs
               const previousConversationId = currentChat?.conversationId as string | undefined
               const responseId = lastSafeDoneResponseId || previousConversationId || undefined
 
-              // Update chat in database immediately (without title)
-              await db
-                .update(copilotChats)
-                .set({
-                  messages: updatedMessages,
-                  updatedAt: new Date(),
-                  ...(responseId ? { conversationId: responseId } : {}),
-                })
-                .where(eq(copilotChats.id, actualChatId!))
+              if (responseId) {
+                await db
+                  .update(copilotChats)
+                  .set({
+                    updatedAt: new Date(),
+                    conversationId: responseId,
+                  })
+                  .where(eq(copilotChats.id, actualChatId!))
 
-              logger.info(`[${tracker.requestId}] Updated chat ${actualChatId} with new messages`, {
-                messageCount: updatedMessages.length,
-                savedUserMessage: true,
-                savedAssistantMessage: assistantContent.trim().length > 0,
-                updatedConversationId: responseId || null,
-              })
+                logger.info(
+                  `[${tracker.requestId}] Updated conversationId for chat ${actualChatId}`,
+                  {
+                    updatedConversationId: responseId,
+                  }
+                )
+              }
             }
           } catch (error) {
             logger.error(`[${tracker.requestId}] Error processing stream:`, error)

apps/sim/app/api/copilot/chat/update-messages/route.ts

@@ -77,6 +77,18 @@ export async function POST(req: NextRequest) {
 
     const { chatId, messages, planArtifact, config } = UpdateMessagesSchema.parse(body)
 
+    // Debug: Log what we're about to save
+    const lastMsgParsed = messages[messages.length - 1]
+    if (lastMsgParsed?.role === 'assistant') {
+      logger.info(`[${tracker.requestId}] Parsed messages to save`, {
+        messageCount: messages.length,
+        lastMsgId: lastMsgParsed.id,
+        lastMsgContentLength: lastMsgParsed.content?.length || 0,
+        lastMsgContentBlockCount: lastMsgParsed.contentBlocks?.length || 0,
+        lastMsgContentBlockTypes: lastMsgParsed.contentBlocks?.map((b: any) => b?.type) || [],
+      })
+    }
+
     // Verify that the chat belongs to the user
     const [chat] = await db
       .select()

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

@@ -27,7 +27,6 @@ const SettingsSchema = z.object({
   superUserModeEnabled: z.boolean().optional(),
   errorNotificationsEnabled: z.boolean().optional(),
   snapToGridSize: z.number().min(0).max(50).optional(),
-  showActionBar: z.boolean().optional(),
 })
 
 const defaultSettings = {
@@ -40,7 +39,6 @@ const defaultSettings = {
   superUserModeEnabled: false,
   errorNotificationsEnabled: true,
   snapToGridSize: 0,
-  showActionBar: true,
 }
 
 export async function GET() {
@@ -75,7 +73,6 @@ export async function GET() {
           superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
           snapToGridSize: userSettings.snapToGridSize ?? 0,
-          showActionBar: userSettings.showActionBar ?? true,
         },
       },
       { status: 200 }

apps/sim/app/layout.tsx

@@ -11,7 +11,6 @@ import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
-import { TooltipProvider } from '@/app/_shell/providers/tooltip-provider'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export const viewport: Viewport = {
@@ -195,9 +194,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider>
             <QueryProvider>
               <SessionProvider>
-                <TooltipProvider>
-                  <BrandedLayout>{children}</BrandedLayout>
-                </TooltipProvider>
+                <BrandedLayout>{children}</BrandedLayout>
               </SessionProvider>
             </QueryProvider>
           </ThemeProvider>

apps/sim/app/playground/page.tsx

@@ -21,15 +21,12 @@ import {
   Combobox,
   Connections,
   Copy,
-  Cursor,
   DatePicker,
   DocumentAttachment,
   Duplicate,
-  Expand,
   Eye,
   FolderCode,
   FolderPlus,
-  Hand,
   HexSimple,
   Input,
   Key as KeyIcon,
@@ -465,9 +462,6 @@ export default function PlaygroundPage() {
               <Avatar size='lg'>
                 <AvatarFallback>LG</AvatarFallback>
               </Avatar>
-              <Avatar size='xl'>
-                <AvatarFallback>XL</AvatarFallback>
-              </Avatar>
             </VariantRow>
             <VariantRow label='with image'>
               <Avatar size='md'>
@@ -508,9 +502,6 @@ export default function PlaygroundPage() {
               <Avatar size='lg' status='online'>
                 <AvatarFallback>LG</AvatarFallback>
               </Avatar>
-              <Avatar size='xl' status='online'>
-                <AvatarFallback>XL</AvatarFallback>
-              </Avatar>
             </VariantRow>
           </Section>
 
@@ -982,14 +973,11 @@ export default function PlaygroundPage() {
                 { Icon: ChevronDown, name: 'ChevronDown' },
                 { Icon: Connections, name: 'Connections' },
                 { Icon: Copy, name: 'Copy' },
-                { Icon: Cursor, name: 'Cursor' },
                 { Icon: DocumentAttachment, name: 'DocumentAttachment' },
                 { Icon: Duplicate, name: 'Duplicate' },
-                { Icon: Expand, name: 'Expand' },
                 { Icon: Eye, name: 'Eye' },
                 { Icon: FolderCode, name: 'FolderCode' },
                 { Icon: FolderPlus, name: 'FolderPlus' },
-                { Icon: Hand, name: 'Hand' },
                 { Icon: HexSimple, name: 'HexSimple' },
                 { Icon: KeyIcon, name: 'Key' },
                 { Icon: Layout, name: 'Layout' },

apps/sim/app/templates/layout-client.tsx

@@ -1,12 +1,15 @@
 'use client'
 
+import { Tooltip } from '@/components/emcn'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
   return (
-    <div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
-      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
-      {children}
-    </div>
+    <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
+      <div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
+        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+        {children}
+      </div>
+    </Tooltip.Provider>
   )
 }

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

@@ -1,5 +1,6 @@
 'use client'
 
+import { Tooltip } from '@/components/emcn'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
@@ -12,14 +13,16 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <SettingsLoader />
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
-        <div className='flex h-screen w-full bg-[var(--bg)]'>
-          <WorkspacePermissionsProvider>
-            <div className='shrink-0' suppressHydrationWarning>
-              <Sidebar />
-            </div>
-            {children}
-          </WorkspacePermissionsProvider>
-        </div>
+        <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
+          <div className='flex h-screen w-full bg-[var(--bg)]'>
+            <WorkspacePermissionsProvider>
+              <div className='shrink-0' suppressHydrationWarning>
+                <Sidebar />
+              </div>
+              {children}
+            </WorkspacePermissionsProvider>
+          </div>
+        </Tooltip.Provider>
       </GlobalCommandsProvider>
     </>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -1,222 +0,0 @@
-'use client'
-
-import { useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-import { useReactFlow } from 'reactflow'
-import {
-  Button,
-  ChevronDown,
-  Cursor,
-  Expand,
-  Hand,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-  Redo,
-  Tooltip,
-  Undo,
-  ZoomIn,
-  ZoomOut,
-} from '@/components/emcn'
-import { useSession } from '@/lib/auth/auth-client'
-import { useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
-import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
-import { useCanvasModeStore } from '@/stores/canvas-mode'
-import { useGeneralStore } from '@/stores/settings/general'
-import { useUndoRedoStore } from '@/stores/undo-redo'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-
-const logger = createLogger('ActionBar')
-
-export function ActionBar() {
-  const reactFlowInstance = useReactFlow()
-  const { zoomIn, zoomOut } = reactFlowInstance
-  const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
-  const { mode, setMode } = useCanvasModeStore()
-  const { undo, redo } = useCollaborativeWorkflow()
-  const showActionBar = useGeneralStore((s) => s.showActionBar)
-  const updateSetting = useUpdateGeneralSetting()
-
-  const { activeWorkflowId } = useWorkflowRegistry()
-  const { data: session } = useSession()
-  const userId = session?.user?.id || 'unknown'
-  const stacks = useUndoRedoStore((s) => s.stacks)
-  const key = activeWorkflowId && userId ? `${activeWorkflowId}:${userId}` : ''
-  const stack = (key && stacks[key]) || { undo: [], redo: [] }
-  const canUndo = stack.undo.length > 0
-  const canRedo = stack.redo.length > 0
-
-  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null)
-  const [isCanvasModeOpen, setIsCanvasModeOpen] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault()
-    setContextMenu({ x: e.clientX, y: e.clientY })
-  }
-
-  const handleHide = async () => {
-    try {
-      await updateSetting.mutateAsync({ key: 'showActionBar', value: false })
-    } catch (error) {
-      logger.error('Failed to hide action bar', error)
-    } finally {
-      setContextMenu(null)
-    }
-  }
-
-  if (!showActionBar) {
-    return null
-  }
-
-  return (
-    <>
-      <div
-        className='-translate-x-1/2 fixed bottom-[calc(var(--terminal-height)+16px)] left-[calc((100vw+var(--sidebar-width)-var(--panel-width))/2)] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px] shadow-sm transition-[left,bottom] duration-100 ease-out'
-        onContextMenu={handleContextMenu}
-      >
-        {/* Canvas Mode Selector */}
-        <Popover
-          open={isCanvasModeOpen}
-          onOpenChange={setIsCanvasModeOpen}
-          variant='secondary'
-          size='sm'
-        >
-          <PopoverTrigger asChild>
-            <div className='flex cursor-pointer items-center gap-[4px]'>
-              <Button className='h-[28px] w-[28px] rounded-[6px] p-0' variant='active'>
-                {mode === 'hand' ? (
-                  <Hand className='h-[14px] w-[14px]' />
-                ) : (
-                  <Cursor className='h-[14px] w-[14px]' />
-                )}
-              </Button>
-              <Button className='!p-[2px] group' variant='ghost'>
-                <ChevronDown className='h-[8px] w-[10px] text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]' />
-              </Button>
-            </div>
-          </PopoverTrigger>
-          <PopoverContent align='center' side='top' sideOffset={8} maxWidth={100} minWidth={100}>
-            <PopoverItem
-              onClick={() => {
-                setMode('cursor')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Cursor className='h-3 w-3' />
-              <span>Pointer</span>
-            </PopoverItem>
-            <PopoverItem
-              onClick={() => {
-                setMode('hand')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Hand className='h-3 w-3' />
-              <span>Mover</span>
-            </PopoverItem>
-          </PopoverContent>
-        </Popover>
-
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
-              onClick={undo}
-              disabled={!canUndo}
-            >
-              <Undo className='h-[16px] w-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            <Tooltip.Shortcut keys='⌘Z'>Undo</Tooltip.Shortcut>
-          </Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
-              onClick={redo}
-              disabled={!canRedo}
-            >
-              <Redo className='h-[16px] w-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            <Tooltip.Shortcut keys='⌘⇧Z'>Redo</Tooltip.Shortcut>
-          </Tooltip.Content>
-        </Tooltip.Root>
-
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
-              onClick={() => zoomOut()}
-            >
-              <ZoomOut className='h-[16px] w-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>Zoom out</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
-              onClick={() => zoomIn()}
-            >
-              <ZoomIn className='h-[16px] w-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>Zoom in</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
-              onClick={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
-            >
-              <Expand className='h-[16px] w-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>Zoom to fit</Tooltip.Content>
-        </Tooltip.Root>
-      </div>
-
-      <Popover
-        open={contextMenu !== null}
-        onOpenChange={(open) => !open && setContextMenu(null)}
-        variant='secondary'
-        size='sm'
-        colorScheme='inverted'
-      >
-        <PopoverAnchor
-          style={{
-            position: 'fixed',
-            left: `${contextMenu?.x ?? 0}px`,
-            top: `${contextMenu?.y ?? 0}px`,
-            width: '1px',
-            height: '1px',
-          }}
-        />
-        <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-          <PopoverItem onClick={handleHide}>Hide canvas controls</PopoverItem>
-        </PopoverContent>
-      </Popover>
-    </>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/index.ts

@@ -1 +0,0 @@
-export { ActionBar } from './action-bar'

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

@@ -20,7 +20,6 @@ import {
   PopoverItem,
   PopoverScrollArea,
   PopoverTrigger,
-  Tooltip,
   Trash,
 } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
@@ -897,7 +896,7 @@ export function Chat() {
 
         <div className='flex flex-shrink-0 items-center gap-[8px]'>
           {/* More menu with actions */}
-          <Popover variant='default' size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
+          <Popover variant='default' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
             <PopoverTrigger asChild>
               <Button
                 variant='ghost'
@@ -1070,21 +1069,17 @@ export function Chat() {
 
               {/* Buttons positioned absolutely on the right */}
               <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-[10px]'>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Badge
-                      onClick={() => document.getElementById('floating-chat-file-input')?.click()}
-                      className={cn(
-                        '!bg-transparent !border-0 cursor-pointer rounded-[6px] p-[0px]',
-                        (!activeWorkflowId || isExecuting || chatFiles.length >= 15) &&
-                          'cursor-not-allowed opacity-50'
-                      )}
-                    >
-                      <Paperclip className='!h-3.5 !w-3.5' />
-                    </Badge>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>Attach file</Tooltip.Content>
-                </Tooltip.Root>
+                <Badge
+                  onClick={() => document.getElementById('floating-chat-file-input')?.click()}
+                  title='Attach file'
+                  className={cn(
+                    '!bg-transparent !border-0 cursor-pointer rounded-[6px] p-[0px]',
+                    (!activeWorkflowId || isExecuting || chatFiles.length >= 15) &&
+                      'cursor-not-allowed opacity-50'
+                  )}
+                >
+                  <Paperclip className='!h-3.5 !w-3.5' />
+                </Badge>
 
                 {isStreaming ? (
                   <Button

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx

@@ -23,14 +23,10 @@ export function PaneContextMenu({
   onPaste,
   onAddBlock,
   onAutoLayout,
-  onFitToView,
   onOpenLogs,
   onToggleVariables,
   onToggleChat,
   onInvite,
-  onZoomIn,
-  onZoomOut,
-  onFitView,
   isVariablesOpen = false,
   isChatOpen = false,
   hasClipboard = false,
@@ -116,41 +112,6 @@ export function PaneContextMenu({
           <span>Auto-layout</span>
           <span className='ml-auto opacity-70 group-hover:opacity-100'>⇧L</span>
         </PopoverItem>
-        <PopoverItem
-          onClick={() => {
-            onFitToView()
-            onClose()
-          }}
-        >
-          Fit to View
-        </PopoverItem>
-
-        {/* View actions */}
-        <PopoverDivider />
-        <PopoverItem
-          onClick={() => {
-            onZoomIn()
-            onClose()
-          }}
-        >
-          Zoom In
-        </PopoverItem>
-        <PopoverItem
-          onClick={() => {
-            onZoomOut()
-            onClose()
-          }}
-        >
-          Zoom Out
-        </PopoverItem>
-        <PopoverItem
-          onClick={() => {
-            onFitView()
-            onClose()
-          }}
-        >
-          Fit to View
-        </PopoverItem>
 
         {/* Navigation actions */}
         <PopoverDivider />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/types.ts

@@ -76,14 +76,10 @@ export interface PaneContextMenuProps {
   onPaste: () => void
   onAddBlock: () => void
   onAutoLayout: () => void
-  onFitToView: () => void
   onOpenLogs: () => void
   onToggleVariables: () => void
   onToggleChat: () => void
   onInvite: () => void
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onFitView: () => void
   /** Whether the variables panel is currently open */
   isVariablesOpen?: boolean
   /** Whether the chat panel is currently open */

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx

@@ -303,8 +303,8 @@ export const DiffControls = memo(function DiffControls() {
         !isResizing && 'transition-[bottom,right] duration-100 ease-out'
       )}
       style={{
-        bottom: 'calc(var(--terminal-height) + 8px)',
-        right: 'calc(var(--panel-width) + 8px)',
+        bottom: 'calc(var(--terminal-height) + 16px)',
+        right: 'calc(var(--panel-width) + 16px)',
       }}
     >
       <div

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

@@ -1,4 +1,3 @@
-export { ActionBar } from './action-bar'
 export { CommandList } from './command-list/command-list'
 export { Cursors } from './cursors/cursors'
 export { DiffControls } from './diff-controls/diff-controls'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx

@@ -470,17 +470,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
 
-            {/* Show streaming indicator if streaming but no text content yet after tool calls */}
-            {isStreaming &&
-              !message.content &&
-              message.contentBlocks?.every((block) => block.type === 'tool_call') && (
-                <StreamingIndicator />
-              )}
-
-            {/* Streaming indicator when no content yet */}
-            {!cleanTextContent && !message.contentBlocks?.length && isStreaming && (
-              <StreamingIndicator />
-            )}
+            {/* Always show streaming indicator at the end while streaming */}
+            {isStreaming && <StreamingIndicator />}
 
             {message.errorType === 'usage_limit' && (
               <div className='flex gap-1.5'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -3,7 +3,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { ChevronUp, LayoutList } from 'lucide-react'
-import { Button, Code } from '@/components/emcn'
+import Editor from 'react-simple-code-editor'
+import { Button, Code, getCodeEditorProps, highlight, languages } from '@/components/emcn'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/base-tool'
 import { getClientTool } from '@/lib/copilot/tools/client/manager'
 import { getRegisteredTools } from '@/lib/copilot/tools/client/registry'
@@ -413,6 +414,8 @@ const ACTION_VERBS = [
   'Listed',
   'Editing',
   'Edited',
+  'Executing',
+  'Executed',
   'Running',
   'Ran',
   'Designing',
@@ -751,36 +754,70 @@ function SubAgentToolCall({ toolCall: toolCallProp }: { toolCall: CopilotToolCal
       const safeInputs = inputs && typeof inputs === 'object' ? inputs : {}
       const inputEntries = Object.entries(safeInputs)
       if (inputEntries.length === 0) return null
+
+      /**
+       * Format a value for display - handles objects, arrays, and primitives
+       */
+      const formatValue = (value: unknown): string => {
+        if (value === null || value === undefined) return '-'
+        if (typeof value === 'string') return value || '-'
+        if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+        try {
+          return JSON.stringify(value, null, 2)
+        } catch {
+          return String(value)
+        }
+      }
+
+      /**
+       * Check if a value is a complex type (object or array)
+       */
+      const isComplex = (value: unknown): boolean => {
+        return typeof value === 'object' && value !== null
+      }
+
       return (
-        <div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-          <table className='w-full table-fixed bg-transparent'>
-            <thead className='bg-transparent'>
-              <tr className='border-[var(--border-1)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  Input
-                </th>
-                <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  Value
-                </th>
-              </tr>
-            </thead>
-            <tbody className='bg-transparent'>
-              {inputEntries.map(([key, value]) => (
-                <tr key={key} className='border-[var(--border-1)] border-t bg-transparent'>
-                  <td className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[6px]'>
-                    <span className='truncate font-medium text-[var(--text-primary)] text-xs'>
-                      {key}
+        <div className='mt-1.5 w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'>
+          {/* Header */}
+          <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
+            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Input</span>
+            <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+              {inputEntries.length}
+            </span>
+          </div>
+          {/* Input entries */}
+          <div className='flex flex-col'>
+            {inputEntries.map(([key, value], index) => {
+              const formattedValue = formatValue(value)
+              const needsCodeViewer = isComplex(value)
+
+              return (
+                <div
+                  key={key}
+                  className={clsx(
+                    'flex flex-col gap-1 px-[10px] py-[6px]',
+                    index > 0 && 'border-[var(--border-1)] border-t'
+                  )}
+                >
+                  {/* Input key */}
+                  <span className='font-medium text-[11px] text-[var(--text-primary)]'>{key}</span>
+                  {/* Value display */}
+                  {needsCodeViewer ? (
+                    <Code.Viewer
+                      code={formattedValue}
+                      language='json'
+                      showGutter={false}
+                      className='max-h-[80px] min-h-0'
+                    />
+                  ) : (
+                    <span className='font-mono text-[11px] text-[var(--text-muted)] leading-[1.3]'>
+                      {formattedValue}
                     </span>
-                  </td>
-                  <td className='w-[64%] bg-transparent px-[10px] py-[6px]'>
-                    <span className='font-mono text-[var(--text-muted)] text-xs'>
-                      {String(value)}
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                  )}
+                </div>
+              )
+            })}
+          </div>
         </div>
       )
     }
@@ -2290,74 +2327,136 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       const safeInputs = inputs && typeof inputs === 'object' ? inputs : {}
       const inputEntries = Object.entries(safeInputs)
 
-      // Don't show the table if there are no inputs
+      // Don't show the section if there are no inputs
       if (inputEntries.length === 0) {
         return null
       }
 
-      return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-          <table className='w-full table-fixed bg-transparent'>
-            <thead className='bg-transparent'>
-              <tr className='border-[var(--border-1)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-                  Input
-                </th>
-                <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-                  Value
-                </th>
-              </tr>
-            </thead>
-            <tbody className='bg-transparent'>
-              {inputEntries.map(([key, value]) => (
-                <tr
-                  key={key}
-                  className='group relative border-[var(--border-1)] border-t bg-transparent'
-                >
-                  <td className='relative w-[36%] border-[var(--border-1)] border-r bg-transparent p-0'>
-                    <div className='px-[10px] py-[8px]'>
-                      <span className='truncate font-medium text-[var(--text-primary)] text-xs'>
-                        {key}
-                      </span>
-                    </div>
-                  </td>
-                  <td className='relative w-[64%] bg-transparent p-0'>
-                    <div className='min-w-0 px-[10px] py-[8px]'>
-                      <input
-                        type='text'
-                        value={String(value)}
-                        onChange={(e) => {
-                          const newInputs = { ...safeInputs, [key]: e.target.value }
+      /**
+       * Format a value for display - handles objects, arrays, and primitives
+       */
+      const formatValueForDisplay = (value: unknown): string => {
+        if (value === null || value === undefined) return ''
+        if (typeof value === 'string') return value
+        if (typeof value === 'number' || typeof value === 'boolean') return String(value)
+        // For objects and arrays, use JSON.stringify with formatting
+        try {
+          return JSON.stringify(value, null, 2)
+        } catch {
+          return String(value)
+        }
+      }
 
-                          // Determine how to update based on original structure
-                          if (isNestedInWorkflowInput) {
-                            // Update workflow_input
-                            setEditedParams({ ...editedParams, workflow_input: newInputs })
-                          } else if (typeof editedParams.input === 'string') {
-                            // Input was a JSON string, serialize back
-                            setEditedParams({ ...editedParams, input: JSON.stringify(newInputs) })
-                          } else if (editedParams.input && typeof editedParams.input === 'object') {
-                            // Input is an object
-                            setEditedParams({ ...editedParams, input: newInputs })
-                          } else if (
-                            editedParams.inputs &&
-                            typeof editedParams.inputs === 'object'
-                          ) {
-                            // Inputs is an object
-                            setEditedParams({ ...editedParams, inputs: newInputs })
-                          } else {
-                            // Flat structure - update at base level
-                            setEditedParams({ ...editedParams, [key]: e.target.value })
-                          }
-                        }}
-                        className='w-full bg-transparent font-mono text-[var(--text-muted)] text-xs outline-none focus:text-[var(--text-primary)]'
-                      />
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+      /**
+       * Parse a string value back to its original type if possible
+       */
+      const parseInputValue = (value: string, originalValue: unknown): unknown => {
+        // If original was a primitive, keep as string
+        if (typeof originalValue !== 'object' || originalValue === null) {
+          return value
+        }
+        // Try to parse as JSON for objects/arrays
+        try {
+          return JSON.parse(value)
+        } catch {
+          return value
+        }
+      }
+
+      /**
+       * Check if a value is a complex type (object or array)
+       */
+      const isComplexValue = (value: unknown): boolean => {
+        return typeof value === 'object' && value !== null
+      }
+
+      return (
+        <div className='w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'>
+          {/* Header */}
+          <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
+            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Edit Input</span>
+            <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+              {inputEntries.length}
+            </span>
+          </div>
+          {/* Input entries */}
+          <div className='flex flex-col'>
+            {inputEntries.map(([key, value], index) => {
+              const isComplex = isComplexValue(value)
+              const displayValue = formatValueForDisplay(value)
+
+              return (
+                <div
+                  key={key}
+                  className={clsx(
+                    'flex flex-col gap-1.5 px-[10px] py-[8px]',
+                    index > 0 && 'border-[var(--border-1)] border-t'
+                  )}
+                >
+                  {/* Input key */}
+                  <span className='font-medium text-[11px] text-[var(--text-primary)]'>{key}</span>
+                  {/* Value editor */}
+                  {isComplex ? (
+                    <Code.Container className='max-h-[168px] min-h-[60px]'>
+                      <Code.Content>
+                        <Editor
+                          value={displayValue}
+                          onValueChange={(newCode) => {
+                            const parsedValue = parseInputValue(newCode, value)
+                            const newInputs = { ...safeInputs, [key]: parsedValue }
+
+                            if (isNestedInWorkflowInput) {
+                              setEditedParams({ ...editedParams, workflow_input: newInputs })
+                            } else if (typeof editedParams.input === 'string') {
+                              setEditedParams({ ...editedParams, input: JSON.stringify(newInputs) })
+                            } else if (
+                              editedParams.input &&
+                              typeof editedParams.input === 'object'
+                            ) {
+                              setEditedParams({ ...editedParams, input: newInputs })
+                            } else if (
+                              editedParams.inputs &&
+                              typeof editedParams.inputs === 'object'
+                            ) {
+                              setEditedParams({ ...editedParams, inputs: newInputs })
+                            } else {
+                              setEditedParams({ ...editedParams, [key]: parsedValue })
+                            }
+                          }}
+                          highlight={(code) => highlight(code, languages.json, 'json')}
+                          {...getCodeEditorProps()}
+                          className={clsx(getCodeEditorProps().className, 'min-h-[40px]')}
+                          style={{ minHeight: '40px' }}
+                        />
+                      </Code.Content>
+                    </Code.Container>
+                  ) : (
+                    <input
+                      type='text'
+                      value={displayValue}
+                      onChange={(e) => {
+                        const parsedValue = parseInputValue(e.target.value, value)
+                        const newInputs = { ...safeInputs, [key]: parsedValue }
+
+                        if (isNestedInWorkflowInput) {
+                          setEditedParams({ ...editedParams, workflow_input: newInputs })
+                        } else if (typeof editedParams.input === 'string') {
+                          setEditedParams({ ...editedParams, input: JSON.stringify(newInputs) })
+                        } else if (editedParams.input && typeof editedParams.input === 'object') {
+                          setEditedParams({ ...editedParams, input: newInputs })
+                        } else if (editedParams.inputs && typeof editedParams.inputs === 'object') {
+                          setEditedParams({ ...editedParams, inputs: newInputs })
+                        } else {
+                          setEditedParams({ ...editedParams, [key]: parsedValue })
+                        }
+                      }}
+                      className='w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium font-mono text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none'
+                    />
+                  )}
+                </div>
+              )
+            })}
+          </div>
         </div>
       )
     }
@@ -2443,8 +2542,8 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           <ShimmerOverlayText
             text={displayName}
             active={isLoadingState}
-            isSpecial={false}
-            className='font-[470] font-season text-[var(--text-muted)] text-sm'
+            isSpecial={isSpecial}
+            className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
           />
         </div>
         {code && (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx

@@ -124,8 +124,10 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
     isSendingMessage,
   })
 
-  // Handle scroll management
-  const { scrollAreaRef, scrollToBottom } = useScrollManagement(messages, isSendingMessage)
+  // Handle scroll management (80px stickiness for copilot)
+  const { scrollAreaRef, scrollToBottom } = useScrollManagement(messages, isSendingMessage, {
+    stickinessThreshold: 80,
+  })
 
   // Handle chat history grouping
   const { groupedChats, handleHistoryDropdownOpen: handleHistoryDropdownOpenHook } = useChatHistory(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -2,11 +2,11 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { Maximize2 } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
   ButtonGroupItem,
-  Expand,
   Label,
   Modal,
   ModalBody,
@@ -222,7 +222,7 @@ export function GeneralDeploy({
                       onClick={() => setShowExpandedPreview(true)}
                       className='absolute right-[8px] bottom-[8px] z-10 h-[28px] w-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
                     >
-                      <Expand className='h-[14px] w-[14px]' />
+                      <Maximize2 className='h-[14px] w-[14px]' />
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>See preview</Tooltip.Content>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts

@@ -2,3 +2,4 @@ export { Copilot } from './copilot/copilot'
 export { Deploy } from './deploy/deploy'
 export { Editor } from './editor/editor'
 export { Toolbar } from './toolbar/toolbar'
+export { WorkflowControls } from './workflow-controls/workflow-controls'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -327,14 +327,12 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
   /**
    * Handle search input blur.
    *
-   * If the search query is empty, deactivate search mode to show the search icon again.
-   * If there's a query, keep search mode active so ArrowUp/Down navigation continues
-   * to work after focus moves into the triggers/blocks list (e.g. when initiated via Mod+F).
+   * We intentionally keep search mode active after blur so that ArrowUp/Down
+   * navigation continues to work after the first move from the search input
+   * into the triggers/blocks list (e.g. when initiated via Mod+F).
    */
   const handleSearchBlur = () => {
-    if (!searchQuery.trim()) {
-      setIsSearchActive(false)
-    }
+    // No-op by design
   }
 
   /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/workflow-controls/workflow-controls.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Button, Redo, Undo } from '@/components/emcn'
+import { useSession } from '@/lib/auth/auth-client'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useUndoRedoStore } from '@/stores/undo-redo'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+/**
+ * Workflow controls component that provides undo/redo functionality.
+ * Styled to align with the panel tab buttons.
+ */
+export function WorkflowControls() {
+  const { undo, redo } = useCollaborativeWorkflow()
+  const { activeWorkflowId } = useWorkflowRegistry()
+  const { data: session } = useSession()
+  const userId = session?.user?.id || 'unknown'
+  const stacks = useUndoRedoStore((s) => s.stacks)
+
+  const undoRedoSizes = (() => {
+    const key = activeWorkflowId && userId ? `${activeWorkflowId}:${userId}` : ''
+    const stack = (key && stacks[key]) || { undo: [], redo: [] }
+    return { undoSize: stack.undo.length, redoSize: stack.redo.length }
+  })()
+
+  const canUndo = undoRedoSizes.undoSize > 0
+  const canRedo = undoRedoSizes.redoSize > 0
+
+  return (
+    <div className='flex gap-[2px]'>
+      <Button
+        className='h-[28px] rounded-[6px] rounded-r-none border border-transparent px-[6px] py-[5px] hover:border-[var(--border-1)] hover:bg-[var(--surface-5)]'
+        onClick={undo}
+        variant={canUndo ? 'active' : 'ghost'}
+        disabled={!canUndo}
+        title='Undo (Cmd+Z)'
+      >
+        <Undo className='h-[12px] w-[12px]' />
+      </Button>
+      <Button
+        className='h-[28px] rounded-[6px] rounded-l-none border border-transparent px-[6px] py-[5px] hover:border-[var(--border-1)] hover:bg-[var(--surface-5)]'
+        onClick={redo}
+        variant={canRedo ? 'active' : 'ghost'}
+        disabled={!canRedo}
+        title='Redo (Cmd+Shift+Z)'
+      >
+        <Redo className='h-[12px] w-[12px]' />
+      </Button>
+    </div>
+  )
+}

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

@@ -8,10 +8,7 @@ import {
   BubbleChatClose,
   BubbleChatPreview,
   Button,
-  ChevronDown,
   Copy,
-  Cursor,
-  Hand,
   Layout,
   Modal,
   ModalBody,
@@ -46,7 +43,6 @@ import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hook
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
-import { useCanvasModeStore } from '@/stores/canvas-mode'
 import { useChatStore } from '@/stores/chat/store'
 import type { PanelTab } from '@/stores/panel'
 import { usePanelStore, useVariablesStore as usePanelVariablesStore } from '@/stores/panel'
@@ -96,7 +92,6 @@ export function Panel() {
   const [isExporting, setIsExporting] = useState(false)
   const [isDuplicating, setIsDuplicating] = useState(false)
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
-  const [isCanvasModeOpen, setIsCanvasModeOpen] = useState(false)
 
   // Hooks
   const userPermissions = useUserPermissionsContext()
@@ -165,9 +160,6 @@ export function Panel() {
   const { isChatOpen, setIsChatOpen } = useChatStore()
   const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore()
 
-  // Canvas mode
-  const { mode: canvasMode, setMode: setCanvasMode } = useCanvasModeStore()
-
   const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
 
   /**
@@ -504,58 +496,8 @@ export function Panel() {
               </Button>
             </div>
 
-            {/* Canvas Mode Selector */}
-            <Popover
-              open={isCanvasModeOpen}
-              onOpenChange={setIsCanvasModeOpen}
-              variant='secondary'
-              size='sm'
-            >
-              <PopoverTrigger asChild>
-                <div className='flex cursor-pointer items-center gap-[4px]'>
-                  <Button className='h-[28px] w-[28px] rounded-[6px] p-0' variant='active'>
-                    {canvasMode === 'hand' ? (
-                      <Hand className='h-[14px] w-[14px]' />
-                    ) : (
-                      <Cursor className='h-[14px] w-[14px]' />
-                    )}
-                  </Button>
-                  <Button className='!p-[2px] group' variant='ghost'>
-                    <ChevronDown
-                      className={`h-[8px] w-[10px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${
-                        isCanvasModeOpen ? 'rotate-180' : ''
-                      }`}
-                    />
-                  </Button>
-                </div>
-              </PopoverTrigger>
-              <PopoverContent
-                align='end'
-                side='bottom'
-                sideOffset={8}
-                maxWidth={100}
-                minWidth={100}
-              >
-                <PopoverItem
-                  onClick={() => {
-                    setCanvasMode('cursor')
-                    setIsCanvasModeOpen(false)
-                  }}
-                >
-                  <Cursor className='h-3 w-3' />
-                  <span>Pointer</span>
-                </PopoverItem>
-                <PopoverItem
-                  onClick={() => {
-                    setCanvasMode('hand')
-                    setIsCanvasModeOpen(false)
-                  }}
-                >
-                  <Hand className='h-3 w-3' />
-                  <span>Mover</span>
-                </PopoverItem>
-              </PopoverContent>
-            </Popover>
+            {/* Workflow Controls (Undo/Redo) */}
+            {/* <WorkflowControls /> */}
           </div>
 
           {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -148,7 +148,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           ref={blockRef}
           onClick={() => setCurrentBlockId(id)}
           className={cn(
-            'workflow-drag-handle relative cursor-grab select-none rounded-[8px] border border-[var(--border)] [&:active]:cursor-grabbing',
+            'relative cursor-pointer select-none rounded-[8px] border border-[var(--border-1)]',
             'transition-block-bg transition-ring',
             'z-[20]'
           )}
@@ -166,8 +166,11 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           {/* Header Section */}
           <div
             className={cn(
-              'flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'
+              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
             )}
+            onMouseDown={(e) => {
+              e.stopPropagation()
+            }}
           >
             <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
               <div

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx

@@ -11,16 +11,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
-const ACTION_BUTTON_STYLES = [
-  'h-[23px] w-[23px] rounded-[8px] p-0',
-  'border border-[var(--border)] bg-[var(--surface-5)]',
-  'text-[var(--text-secondary)]',
-  'hover:border-transparent hover:bg-[var(--brand-secondary)] hover:!text-[var(--text-inverse)]',
-  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover:bg-[var(--brand-secondary)]',
-].join(' ')
-
-const ICON_SIZE = 'h-[11px] w-[11px]'
-
 /**
  * Props for the ActionBar component
  */
@@ -120,9 +110,7 @@ export const ActionBar = memo(
           '-top-[46px] absolute right-0',
           'flex flex-row items-center',
           'opacity-0 transition-opacity duration-200 group-hover:opacity-100',
-          'gap-[5px] rounded-[10px] p-[5px]',
-          'border border-[var(--border)] bg-[var(--surface-2)]',
-          'dark:border-transparent dark:bg-[var(--surface-4)]'
+          'gap-[5px] rounded-[10px] bg-[var(--surface-4)] p-[5px]'
         )}
       >
         {!isNoteBlock && (
@@ -136,10 +124,14 @@ export const ActionBar = memo(
                     collaborativeBatchToggleBlockEnabled([blockId])
                   }
                 }}
-                className={ACTION_BUTTON_STYLES}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
-                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
+                {isEnabled ? (
+                  <Circle className='h-[11px] w-[11px]' />
+                ) : (
+                  <CircleOff className='h-[11px] w-[11px]' />
+                )}
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
@@ -159,10 +151,10 @@ export const ActionBar = memo(
                     handleDuplicateBlock()
                   }
                 }}
-                className={ACTION_BUTTON_STYLES}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
-                <Copy className={ICON_SIZE} />
+                <Copy className='h-[11px] w-[11px]' />
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>{getTooltipMessage('Duplicate Block')}</Tooltip.Content>
@@ -180,13 +172,13 @@ export const ActionBar = memo(
                     collaborativeBatchToggleBlockHandles([blockId])
                   }
                 }}
-                className={ACTION_BUTTON_STYLES}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
                 {horizontalHandles ? (
-                  <ArrowLeftRight className={ICON_SIZE} />
+                  <ArrowLeftRight className='h-[11px] w-[11px]' />
                 ) : (
-                  <ArrowUpDown className={ICON_SIZE} />
+                  <ArrowUpDown className='h-[11px] w-[11px]' />
                 )}
               </Button>
             </Tooltip.Trigger>
@@ -209,10 +201,10 @@ export const ActionBar = memo(
                     )
                   }
                 }}
-                className={ACTION_BUTTON_STYLES}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled || !userPermissions.canEdit}
               >
-                <LogOut className={ICON_SIZE} />
+                <LogOut className='h-[11px] w-[11px]' />
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>{getTooltipMessage('Remove from Subflow')}</Tooltip.Content>
@@ -229,10 +221,10 @@ export const ActionBar = memo(
                   collaborativeBatchRemoveBlocks([blockId])
                 }
               }}
-              className={ACTION_BUTTON_STYLES}
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
-              <Trash2 className={ICON_SIZE} />
+              <Trash2 className='h-[11px] w-[11px]' />
             </Button>
           </Tooltip.Trigger>
           <Tooltip.Content side='top'>{getTooltipMessage('Delete Block')}</Tooltip.Content>

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

@@ -950,7 +950,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         ref={contentRef}
         onClick={handleClick}
         className={cn(
-          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)]'
         )}
       >
         {isPending && (
@@ -986,9 +986,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
         <div
           className={cn(
-            'flex items-center justify-between p-[8px]',
+            'workflow-drag-handle flex cursor-grab items-center justify-between p-[8px] [&:active]:cursor-grabbing',
             hasContentBelowHeader && 'border-[var(--border-1)] border-b'
           )}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+          }}
         >
           <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
             <div

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts

@@ -4,7 +4,7 @@ export {
   computeParentUpdateEntries,
   getClampedPositionForNode,
   isInEditableElement,
-  selectNodesDeferred,
+  resolveParentChildSelectionConflicts,
   validateTriggerPaste,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
 export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './float'
@@ -12,7 +12,7 @@ export { useAutoLayout } from './use-auto-layout'
 export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
 export { useBlockVisual } from './use-block-visual'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
-export { useNodeUtilities } from './use-node-utilities'
+export { calculateContainerDimensions, useNodeUtilities } from './use-node-utilities'
 export { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'
 export { useWorkflowExecution } from './use-workflow-execution'

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

@@ -3,7 +3,6 @@ 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 { useCanvasViewport } from '@/hooks/use-canvas-viewport'
 
 export type { AutoLayoutOptions }
 
@@ -17,8 +16,7 @@ const logger = createLogger('useAutoLayout')
  * Note: This hook requires a ReactFlowProvider ancestor.
  */
 export function useAutoLayout(workflowId: string | null) {
-  const reactFlowInstance = useReactFlow()
-  const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
+  const { fitView } = useReactFlow()
 
   const applyAutoLayoutAndUpdateStore = useCallback(
     async (options: AutoLayoutOptions = {}) => {
@@ -40,7 +38,7 @@ export function useAutoLayout(workflowId: string | null) {
       if (result.success) {
         logger.info('Auto layout completed successfully')
         requestAnimationFrame(() => {
-          fitViewToBounds({ padding: 0.15, duration: 600 })
+          fitView({ padding: 0.8, duration: 600 })
         })
       } else {
         logger.error('Auto layout failed:', result.error)
@@ -54,7 +52,7 @@ export function useAutoLayout(workflowId: string | null) {
         error: error instanceof Error ? error.message : 'Unknown error',
       }
     }
-  }, [applyAutoLayoutAndUpdateStore, fitViewToBounds])
+  }, [applyAutoLayoutAndUpdateStore, fitView])
 
   return {
     applyAutoLayoutAndUpdateStore,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts

@@ -62,6 +62,47 @@ export function clampPositionToContainer(
   }
 }
 
+/**
+ * Calculates container dimensions based on child block positions.
+ * Single source of truth for container sizing - ensures consistency between
+ * live drag updates and final dimension calculations.
+ *
+ * @param childPositions - Array of child positions with their dimensions
+ * @returns Calculated width and height for the container
+ */
+export function calculateContainerDimensions(
+  childPositions: Array<{ x: number; y: number; width: number; height: number }>
+): { width: number; height: number } {
+  if (childPositions.length === 0) {
+    return {
+      width: CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+      height: CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+    }
+  }
+
+  let maxRight = 0
+  let maxBottom = 0
+
+  for (const child of childPositions) {
+    maxRight = Math.max(maxRight, child.x + child.width)
+    maxBottom = Math.max(maxBottom, child.y + child.height)
+  }
+
+  const width = Math.max(
+    CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+    CONTAINER_DIMENSIONS.LEFT_PADDING + maxRight + CONTAINER_DIMENSIONS.RIGHT_PADDING
+  )
+  const height = Math.max(
+    CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+    CONTAINER_DIMENSIONS.HEADER_HEIGHT +
+      CONTAINER_DIMENSIONS.TOP_PADDING +
+      maxBottom +
+      CONTAINER_DIMENSIONS.BOTTOM_PADDING
+  )
+
+  return { width, height }
+}
+
 /**
  * Hook providing utilities for node position, hierarchy, and dimension calculations
  */
@@ -306,36 +347,16 @@ export function useNodeUtilities(blocks: Record<string, any>) {
         (id) => currentBlocks[id]?.data?.parentId === nodeId
       )
 
-      if (childBlockIds.length === 0) {
-        return {
-          width: CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-          height: CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-        }
-      }
+      const childPositions = childBlockIds
+        .map((childId) => {
+          const child = currentBlocks[childId]
+          if (!child?.position) return null
+          const { width, height } = getBlockDimensions(childId)
+          return { x: child.position.x, y: child.position.y, width, height }
+        })
+        .filter((p): p is NonNullable<typeof p> => p !== null)
 
-      let maxRight = 0
-      let maxBottom = 0
-
-      for (const childId of childBlockIds) {
-        const child = currentBlocks[childId]
-        if (!child?.position) continue
-
-        const { width: childWidth, height: childHeight } = getBlockDimensions(childId)
-
-        maxRight = Math.max(maxRight, child.position.x + childWidth)
-        maxBottom = Math.max(maxBottom, child.position.y + childHeight)
-      }
-
-      const width = Math.max(
-        CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-        maxRight + CONTAINER_DIMENSIONS.RIGHT_PADDING
-      )
-      const height = Math.max(
-        CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-        maxBottom + CONTAINER_DIMENSIONS.BOTTOM_PADDING
-      )
-
-      return { width, height }
+      return calculateContainerDimensions(childPositions)
     },
     [getBlockDimensions]
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-scroll-management.ts

@@ -12,6 +12,12 @@ interface UseScrollManagementOptions {
    * - `auto`: immediate scroll to bottom (used by floating chat to avoid jitter).
    */
   behavior?: 'auto' | 'smooth'
+  /**
+   * Distance from bottom (in pixels) within which auto-scroll stays active.
+   * Lower values = less sticky (user can scroll away easier).
+   * Default is 100px.
+   */
+  stickinessThreshold?: number
 }
 
 /**
@@ -34,6 +40,7 @@ export function useScrollManagement(
   const programmaticScrollInProgressRef = useRef(false)
   const lastScrollTopRef = useRef(0)
   const scrollBehavior: 'auto' | 'smooth' = options?.behavior ?? 'smooth'
+  const stickinessThreshold = options?.stickinessThreshold ?? 100
 
   /**
    * Scrolls the container to the bottom with smooth animation
@@ -74,7 +81,7 @@ export function useScrollManagement(
     const { scrollTop, scrollHeight, clientHeight } = scrollContainer
     const distanceFromBottom = scrollHeight - scrollTop - clientHeight
 
-    const nearBottom = distanceFromBottom <= 100
+    const nearBottom = distanceFromBottom <= stickinessThreshold
     setIsNearBottom(nearBottom)
 
     if (isSendingMessage) {
@@ -95,7 +102,7 @@ export function useScrollManagement(
 
     // Track last scrollTop for direction detection
     lastScrollTopRef.current = scrollTop
-  }, [getScrollContainer, isSendingMessage, userHasScrolledDuringStream])
+  }, [getScrollContainer, isSendingMessage, userHasScrolledDuringStream, stickinessThreshold])
 
   // Attach scroll listener
   useEffect(() => {
@@ -174,14 +181,20 @@ export function useScrollManagement(
 
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer
       const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-      const nearBottom = distanceFromBottom <= 120
+      const nearBottom = distanceFromBottom <= stickinessThreshold
       if (nearBottom) {
         scrollToBottom()
       }
     }, 100)
 
     return () => window.clearInterval(intervalId)
-  }, [isSendingMessage, userHasScrolledDuringStream, getScrollContainer, scrollToBottom])
+  }, [
+    isSendingMessage,
+    userHasScrolledDuringStream,
+    getScrollContainer,
+    scrollToBottom,
+    stickinessThreshold,
+  ])
 
   return {
     scrollAreaRef,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts

@@ -65,27 +65,6 @@ export function clearDragHighlights(): void {
   document.body.style.cursor = ''
 }
 
-/**
- * Selects nodes by their IDs after paste/duplicate operations.
- * Defers selection to next animation frame to allow displayNodes to sync from store first.
- * This is necessary because the component uses controlled state (nodes={displayNodes})
- * and newly added blocks need time to propagate through the store → derivedNodes → displayNodes cycle.
- */
-export function selectNodesDeferred(
-  nodeIds: string[],
-  setDisplayNodes: (updater: (nodes: Node[]) => Node[]) => void
-): void {
-  const idsSet = new Set(nodeIds)
-  requestAnimationFrame(() => {
-    setDisplayNodes((nodes) =>
-      nodes.map((node) => ({
-        ...node,
-        selected: idsSet.has(node.id),
-      }))
-    )
-  })
-}
-
 interface BlockData {
   height?: number
   data?: {
@@ -186,3 +165,26 @@ export function computeParentUpdateEntries(
     }
   })
 }
+
+/**
+ * Resolves parent-child selection conflicts by deselecting children whose parent is also selected.
+ */
+export function resolveParentChildSelectionConflicts(
+  nodes: Node[],
+  blocks: Record<string, { data?: { parentId?: string } }>
+): Node[] {
+  const selectedIds = new Set(nodes.filter((n) => n.selected).map((n) => n.id))
+
+  let hasConflict = false
+  const resolved = nodes.map((n) => {
+    if (!n.selected) return n
+    const parentId = n.parentId || blocks[n.id]?.data?.parentId
+    if (parentId && selectedIds.has(parentId)) {
+      hasConflict = true
+      return { ...n, selected: false }
+    }
+    return n
+  })
+
+  return hasConflict ? resolved : nodes
+}

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

@@ -24,7 +24,6 @@ import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@/lib/workflows/blocks/b
 import { TriggerUtils } from '@/lib/workflows/triggers/triggers'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
-  ActionBar,
   CommandList,
   DiffControls,
   Notifications,
@@ -48,7 +47,7 @@ import {
   computeClampedPositionUpdates,
   getClampedPositionForNode,
   isInEditableElement,
-  selectNodesDeferred,
+  resolveParentChildSelectionConflicts,
   useAutoLayout,
   useCurrentWorkflow,
   useNodeUtilities,
@@ -56,6 +55,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCanvasContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu'
 import {
+  calculateContainerDimensions,
   clampPositionToContainer,
   estimateBlockDimensions,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities'
@@ -63,10 +63,8 @@ import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { getBlock } from '@/blocks'
 import { isAnnotationOnlyBlock } from '@/executor/constants'
 import { useWorkspaceEnvironment } from '@/hooks/queries/environment'
-import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useStreamCleanup } from '@/hooks/use-stream-cleanup'
-import { useCanvasModeStore } from '@/stores/canvas-mode'
 import { useChatStore } from '@/stores/chat/store'
 import { useCopilotTrainingStore } from '@/stores/copilot-training/store'
 import { useExecutionStore } from '@/stores/execution'
@@ -211,9 +209,9 @@ const WorkflowContent = React.memo(() => {
   const [isCanvasReady, setIsCanvasReady] = useState(false)
   const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
   const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
+  const [isShiftPressed, setIsShiftPressed] = useState(false)
+  const [isSelectionDragActive, setIsSelectionDragActive] = useState(false)
   const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
-  const canvasMode = useCanvasModeStore((state) => state.mode)
-  const isHandMode = canvasMode === 'hand'
   const [oauthModal, setOauthModal] = useState<{
     provider: OAuthProvider
     serviceId: string
@@ -224,9 +222,7 @@ const WorkflowContent = React.memo(() => {
 
   const params = useParams()
   const router = useRouter()
-  const reactFlowInstance = useReactFlow()
-  const { screenToFlowPosition, getNodes, setNodes, getIntersectingNodes } = reactFlowInstance
-  const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
+  const { screenToFlowPosition, getNodes, setNodes, fitView, getIntersectingNodes } = useReactFlow()
   const { emitCursorUpdate } = useSocket()
 
   const workspaceId = params.workspaceId as string
@@ -361,6 +357,9 @@ const WorkflowContent = React.memo(() => {
     new Map()
   )
 
+  /** Stores node IDs to select on next derivedNodes sync (for paste/duplicate operations). */
+  const pendingSelectionRef = useRef<Set<string> | null>(null)
+
   /** Re-applies diff markers when blocks change after socket rehydration. */
   const blocksRef = useRef(blocks)
   useEffect(() => {
@@ -692,6 +691,12 @@ const WorkflowContent = React.memo(() => {
       return
     }
 
+    // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
+    pendingSelectionRef.current = new Set([
+      ...(pendingSelectionRef.current ?? []),
+      ...pastedBlocksArray.map((b) => b.id),
+    ])
+
     collaborativeBatchAddBlocks(
       pastedBlocksArray,
       pastedEdges,
@@ -699,11 +704,6 @@ const WorkflowContent = React.memo(() => {
       pastedParallels,
       pastedSubBlockValues
     )
-
-    selectNodesDeferred(
-      pastedBlocksArray.map((b) => b.id),
-      setDisplayNodes
-    )
   }, [
     hasClipboard,
     clipboard,
@@ -740,6 +740,12 @@ const WorkflowContent = React.memo(() => {
       return
     }
 
+    // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
+    pendingSelectionRef.current = new Set([
+      ...(pendingSelectionRef.current ?? []),
+      ...pastedBlocksArray.map((b) => b.id),
+    ])
+
     collaborativeBatchAddBlocks(
       pastedBlocksArray,
       pastedEdges,
@@ -747,11 +753,6 @@ const WorkflowContent = React.memo(() => {
       pastedParallels,
       pastedSubBlockValues
     )
-
-    selectNodesDeferred(
-      pastedBlocksArray.map((b) => b.id),
-      setDisplayNodes
-    )
   }, [
     contextMenuBlocks,
     copyBlocks,
@@ -885,6 +886,12 @@ const WorkflowContent = React.memo(() => {
               return
             }
 
+            // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
+            pendingSelectionRef.current = new Set([
+              ...(pendingSelectionRef.current ?? []),
+              ...pastedBlocks.map((b) => b.id),
+            ])
+
             collaborativeBatchAddBlocks(
               pastedBlocks,
               pasteData.edges,
@@ -892,11 +899,6 @@ const WorkflowContent = React.memo(() => {
               pasteData.parallels,
               pasteData.subBlockValues
             )
-
-            selectNodesDeferred(
-              pastedBlocks.map((b) => b.id),
-              setDisplayNodes
-            )
           }
         }
       }
@@ -1503,10 +1505,10 @@ const WorkflowContent = React.memo(() => {
             foundNodes: changedNodes.length,
           })
           requestAnimationFrame(() => {
-            fitViewToBounds({
+            fitView({
               nodes: changedNodes,
               duration: 600,
-              padding: 0.1,
+              padding: 0.3,
               minZoom: 0.5,
               maxZoom: 1.0,
             })
@@ -1514,18 +1516,18 @@ const WorkflowContent = React.memo(() => {
         } else {
           logger.info('Diff ready - no changed nodes found, fitting all')
           requestAnimationFrame(() => {
-            fitViewToBounds({ padding: 0.1, duration: 600 })
+            fitView({ padding: 0.3, duration: 600 })
           })
         }
       } else {
         logger.info('Diff ready - no changed blocks, fitting all')
         requestAnimationFrame(() => {
-          fitViewToBounds({ padding: 0.1, duration: 600 })
+          fitView({ padding: 0.3, duration: 600 })
         })
       }
     }
     prevDiffReadyRef.current = isDiffReady
-  }, [isDiffReady, diffAnalysis, fitViewToBounds, getNodes])
+  }, [isDiffReady, diffAnalysis, fitView, getNodes])
 
   /** Displays trigger warning notifications. */
   useEffect(() => {
@@ -1918,15 +1920,68 @@ const WorkflowContent = React.memo(() => {
   const [displayNodes, setDisplayNodes] = useState<Node[]>([])
 
   useEffect(() => {
-    // Preserve selection state when syncing from derivedNodes
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') setIsShiftPressed(true)
+    }
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') setIsShiftPressed(false)
+    }
+    const handleFocusLoss = () => {
+      setIsShiftPressed(false)
+      setIsSelectionDragActive(false)
+    }
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        handleFocusLoss()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    window.addEventListener('blur', handleFocusLoss)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+      window.removeEventListener('blur', handleFocusLoss)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isShiftPressed) {
+      document.body.style.userSelect = 'none'
+    } else {
+      document.body.style.userSelect = ''
+    }
+    return () => {
+      document.body.style.userSelect = ''
+    }
+  }, [isShiftPressed])
+
+  useEffect(() => {
+    // Check for pending selection (from paste/duplicate), otherwise preserve existing selection
+    const pendingSelection = pendingSelectionRef.current
+    pendingSelectionRef.current = null
+
     setDisplayNodes((currentNodes) => {
+      if (pendingSelection) {
+        // Apply pending selection and resolve parent-child conflicts
+        const withSelection = derivedNodes.map((node) => ({
+          ...node,
+          selected: pendingSelection.has(node.id),
+        }))
+        return resolveParentChildSelectionConflicts(withSelection, blocks)
+      }
+      // Preserve existing selection state
       const selectedIds = new Set(currentNodes.filter((n) => n.selected).map((n) => n.id))
       return derivedNodes.map((node) => ({
         ...node,
         selected: selectedIds.has(node.id),
       }))
     })
-  }, [derivedNodes])
+  }, [derivedNodes, blocks])
 
   /** Handles ActionBar remove-from-subflow events. */
   useEffect(() => {
@@ -2001,10 +2056,17 @@ const WorkflowContent = React.memo(() => {
       window.removeEventListener('remove-from-subflow', handleRemoveFromSubflow as EventListener)
   }, [blocks, edgesForDisplay, getNodeAbsolutePosition, collaborativeBatchUpdateParent])
 
-  /** Handles node position changes - updates local state for smooth drag, syncs to store only on drag end. */
-  const onNodesChange = useCallback((changes: NodeChange[]) => {
-    setDisplayNodes((nds) => applyNodeChanges(changes, nds))
-  }, [])
+  /** Handles node changes - applies changes and resolves parent-child selection conflicts. */
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setDisplayNodes((nds) => {
+        const updated = applyNodeChanges(changes, nds)
+        const hasSelectionChange = changes.some((c) => c.type === 'select')
+        return hasSelectionChange ? resolveParentChildSelectionConflicts(updated, blocks) : updated
+      })
+    },
+    [blocks]
+  )
 
   /**
    * Updates container dimensions in displayNodes during drag.
@@ -2019,28 +2081,13 @@ const WorkflowContent = React.memo(() => {
         const childNodes = currentNodes.filter((n) => n.parentId === parentId)
         if (childNodes.length === 0) return currentNodes
 
-        let maxRight = 0
-        let maxBottom = 0
-
-        childNodes.forEach((node) => {
+        const childPositions = childNodes.map((node) => {
           const nodePosition = node.id === draggedNodeId ? draggedNodePosition : node.position
-          const { width: nodeWidth, height: nodeHeight } = getBlockDimensions(node.id)
-
-          maxRight = Math.max(maxRight, nodePosition.x + nodeWidth)
-          maxBottom = Math.max(maxBottom, nodePosition.y + nodeHeight)
+          const { width, height } = getBlockDimensions(node.id)
+          return { x: nodePosition.x, y: nodePosition.y, width, height }
         })
 
-        const newWidth = Math.max(
-          CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-          CONTAINER_DIMENSIONS.LEFT_PADDING + maxRight + CONTAINER_DIMENSIONS.RIGHT_PADDING
-        )
-        const newHeight = Math.max(
-          CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-          CONTAINER_DIMENSIONS.HEADER_HEIGHT +
-            CONTAINER_DIMENSIONS.TOP_PADDING +
-            maxBottom +
-            CONTAINER_DIMENSIONS.BOTTOM_PADDING
-        )
+        const { width: newWidth, height: newHeight } = calculateContainerDimensions(childPositions)
 
         return currentNodes.map((node) => {
           if (node.id === parentId) {
@@ -2800,27 +2847,50 @@ const WorkflowContent = React.memo(() => {
     ]
   )
 
+  // Lock selection mode when selection drag starts (captures Shift state at drag start)
+  const onSelectionStart = useCallback(() => {
+    if (isShiftPressed) {
+      setIsSelectionDragActive(true)
+    }
+  }, [isShiftPressed])
+
+  const onSelectionEnd = useCallback(() => {
+    requestAnimationFrame(() => {
+      setIsSelectionDragActive(false)
+      setDisplayNodes((nodes) => resolveParentChildSelectionConflicts(nodes, blocks))
+    })
+  }, [blocks])
+
   /** Captures initial positions when selection drag starts (for marquee-selected nodes). */
   const onSelectionDragStart = useCallback(
     (_event: React.MouseEvent, nodes: Node[]) => {
-      // Capture the parent ID of the first node as reference (they should all be in the same context)
       if (nodes.length > 0) {
         const firstNodeParentId = blocks[nodes[0].id]?.data?.parentId || null
         setDragStartParentId(firstNodeParentId)
       }
 
-      // Capture all selected nodes' positions for undo/redo
+      // Filter to nodes that won't be deselected (exclude children whose parent is selected)
+      const nodeIds = new Set(nodes.map((n) => n.id))
+      const effectiveNodes = nodes.filter((n) => {
+        const parentId = blocks[n.id]?.data?.parentId
+        return !parentId || !nodeIds.has(parentId)
+      })
+
+      // Capture positions for undo/redo before applying display changes
       multiNodeDragStartRef.current.clear()
-      nodes.forEach((n) => {
-        const block = blocks[n.id]
-        if (block) {
+      effectiveNodes.forEach((n) => {
+        const blk = blocks[n.id]
+        if (blk) {
           multiNodeDragStartRef.current.set(n.id, {
             x: n.position.x,
             y: n.position.y,
-            parentId: block.data?.parentId,
+            parentId: blk.data?.parentId,
           })
         }
       })
+
+      // Apply visual deselection of children
+      setDisplayNodes((allNodes) => resolveParentChildSelectionConflicts(allNodes, blocks))
     },
     [blocks]
   )
@@ -2856,7 +2926,6 @@ const WorkflowContent = React.memo(() => {
 
       eligibleNodes.forEach((node) => {
         const absolutePos = getNodeAbsolutePosition(node.id)
-        const block = blocks[node.id]
         const width = BLOCK_DIMENSIONS.FIXED_WIDTH
         const height = Math.max(
           node.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
@@ -2949,6 +3018,7 @@ const WorkflowContent = React.memo(() => {
 
   const onSelectionDragStop = useCallback(
     (_event: React.MouseEvent, nodes: any[]) => {
+      requestAnimationFrame(() => setIsSelectionDragActive(false))
       clearDragHighlights()
       if (nodes.length === 0) return
 
@@ -3081,13 +3151,11 @@ const WorkflowContent = React.memo(() => {
 
   /**
    * Handles node click to select the node in ReactFlow.
-   * This ensures clicking anywhere on a block (not just the drag handle)
-   * selects it for delete/backspace and multi-select operations.
+   * Parent-child conflict resolution happens automatically in onNodesChange.
    */
   const handleNodeClick = useCallback(
     (event: React.MouseEvent, node: Node) => {
       const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
-
       setNodes((nodes) =>
         nodes.map((n) => ({
           ...n,
@@ -3279,9 +3347,11 @@ const WorkflowContent = React.memo(() => {
               onPointerMove={handleCanvasPointerMove}
               onPointerLeave={handleCanvasPointerLeave}
               elementsSelectable={true}
-              selectionOnDrag={!isHandMode}
+              selectionOnDrag={isShiftPressed || isSelectionDragActive}
               selectionMode={SelectionMode.Partial}
-              panOnDrag={isHandMode ? [0, 1] : false}
+              panOnDrag={isShiftPressed || isSelectionDragActive ? false : [0, 1]}
+              onSelectionStart={onSelectionStart}
+              onSelectionEnd={onSelectionEnd}
               multiSelectionKeyCode={['Meta', 'Control', 'Shift']}
               nodesConnectable={effectivePermissions.canEdit}
               nodesDraggable={effectivePermissions.canEdit}
@@ -3289,7 +3359,7 @@ const WorkflowContent = React.memo(() => {
               noWheelClassName='allow-scroll'
               edgesFocusable={true}
               edgesUpdatable={effectivePermissions.canEdit}
-              className={`workflow-container h-full transition-opacity duration-150 ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
+              className={`workflow-container h-full transition-opacity duration-150 ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'}`}
               onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
               onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
               onSelectionDragStart={effectivePermissions.canEdit ? onSelectionDragStart : undefined}
@@ -3308,8 +3378,6 @@ const WorkflowContent = React.memo(() => {
 
             <Cursors />
 
-            <ActionBar />
-
             <Suspense fallback={null}>
               <LazyChat />
             </Suspense>
@@ -3347,14 +3415,10 @@ const WorkflowContent = React.memo(() => {
               onPaste={handleContextPaste}
               onAddBlock={handleContextAddBlock}
               onAutoLayout={handleAutoLayout}
-              onFitToView={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
               onOpenLogs={handleContextOpenLogs}
               onToggleVariables={handleContextToggleVariables}
               onToggleChat={handleContextToggleChat}
               onInvite={handleContextInvite}
-              onZoomIn={() => reactFlowInstance.zoomIn()}
-              onZoomOut={() => reactFlowInstance.zoomOut()}
-              onFitView={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
               isVariablesOpen={isVariablesOpen}
               isChatOpen={isChatOpen}
               hasClipboard={hasClipboard()}

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx

@@ -38,7 +38,7 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
   return (
     <div
-      className='relative select-none rounded-[8px] border border-[var(--border)]'
+      className='relative select-none rounded-[8px] border border-[var(--border-1)]'
       style={{
         width,
         height,

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

@@ -163,7 +163,7 @@ function AddMembersModal({
                           className='flex items-center gap-[10px] rounded-[4px] px-[8px] py-[6px] hover:bg-[var(--surface-2)]'
                         >
                           <Checkbox checked={isSelected} />
-                          <Avatar size='xs'>
+                          <Avatar size='sm'>
                             {member.user?.image && (
                               <AvatarImage src={member.user.image} alt={name} />
                             )}
@@ -663,7 +663,7 @@ export function AccessControl() {
                     return (
                       <div key={member.id} className='flex items-center justify-between'>
                         <div className='flex flex-1 items-center gap-[12px]'>
-                          <Avatar size='sm'>
+                          <Avatar size='md'>
                             {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
                             <AvatarFallback
                               style={{

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

@@ -434,12 +434,10 @@ export function CredentialSets() {
     filteredOwnedSets.length === 0 &&
     !hasNoContent
 
-  // Early returns AFTER all hooks
   if (membershipsLoading || invitationsLoading) {
     return <CredentialSetsSkeleton />
   }
 
-  // Detail view for a polling group
   if (viewingSet) {
     const activeMembers = members.filter((m) => m.status === 'active')
     const totalCount = activeMembers.length + pendingInvitations.length
@@ -529,7 +527,7 @@ export function CredentialSets() {
                       return (
                         <div key={member.id} className='flex items-center justify-between'>
                           <div className='flex flex-1 items-center gap-[12px]'>
-                            <Avatar size='sm'>
+                            <Avatar size='md'>
                               {member.userImage && (
                                 <AvatarImage src={member.userImage} alt={name} />
                               )}
@@ -583,7 +581,7 @@ export function CredentialSets() {
                       return (
                         <div key={invitation.id} className='flex items-center justify-between'>
                           <div className='flex flex-1 items-center gap-[12px]'>
-                            <Avatar size='sm'>
+                            <Avatar size='md'>
                               <AvatarFallback
                                 style={{ background: getUserColor(email) }}
                                 className='border-0 text-white'

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

@@ -87,12 +87,6 @@ function GeneralSkeleton() {
         <Skeleton className='h-8 w-[100px] rounded-[4px]' />
       </div>
 
-      {/* Show canvas controls row */}
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-32' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
       {/* Telemetry row */}
       <div className='flex items-center justify-between border-t pt-[16px]'>
         <Skeleton className='h-4 w-44' />
@@ -316,12 +310,6 @@ export function General({ onOpenChange }: GeneralProps) {
     }
   }
 
-  const handleShowActionBarChange = async (checked: boolean) => {
-    if (checked !== settings?.showActionBar && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'showActionBar', value: checked })
-    }
-  }
-
   const handleTrainingControlsChange = async (checked: boolean) => {
     if (checked !== settings?.showTrainingControls && !updateSetting.isPending) {
       await updateSetting.mutateAsync({ key: 'showTrainingControls', value: checked })
@@ -531,15 +519,6 @@ export function General({ onOpenChange }: GeneralProps) {
         </div>
       </div>
 
-      <div className='flex items-center justify-between'>
-        <Label htmlFor='show-action-bar'>Show canvas controls</Label>
-        <Switch
-          id='show-action-bar'
-          checked={settings?.showActionBar ?? true}
-          onCheckedChange={handleShowActionBarChange}
-        />
-      </div>
-
       <div className='flex items-center justify-between border-t pt-[16px]'>
         <Label htmlFor='telemetry'>Allow anonymous telemetry</Label>
         <Switch

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx

@@ -1,12 +1,41 @@
 'use client'
 
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Check } from 'lucide-react'
 import {
   Popover,
   PopoverAnchor,
+  PopoverBackButton,
   PopoverContent,
   PopoverDivider,
+  PopoverFolder,
   PopoverItem,
 } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { WORKFLOW_COLORS } from '@/lib/workflows/colors'
+
+/**
+ * Validates a hex color string.
+ * Accepts 3 or 6 character hex codes with or without #.
+ */
+function isValidHex(hex: string): boolean {
+  const cleaned = hex.replace('#', '')
+  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleaned)
+}
+
+/**
+ * Normalizes a hex color to lowercase 6-character format with #.
+ */
+function normalizeHex(hex: string): string {
+  let cleaned = hex.replace('#', '').toLowerCase()
+  if (cleaned.length === 3) {
+    cleaned = cleaned
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+  return `#${cleaned}`
+}
 
 interface ContextMenuProps {
   /**
@@ -53,6 +82,14 @@ interface ContextMenuProps {
    * Callback when delete is clicked
    */
   onDelete: () => void
+  /**
+   * Callback when color is changed
+   */
+  onColorChange?: (color: string) => void
+  /**
+   * Current workflow color (for showing selected state)
+   */
+  currentColor?: string
   /**
    * Whether to show the open in new tab option (default: false)
    * Set to true for items that can be opened in a new tab
@@ -83,11 +120,21 @@ interface ContextMenuProps {
    * Set to true for items that can be exported (like workspaces)
    */
   showExport?: boolean
+  /**
+   * Whether to show the change color option (default: false)
+   * Set to true for workflows to allow color customization
+   */
+  showColorChange?: boolean
   /**
    * Whether the export option is disabled (default: false)
    * Set to true when user lacks permissions
    */
   disableExport?: boolean
+  /**
+   * Whether the change color option is disabled (default: false)
+   * Set to true when user lacks permissions
+   */
+  disableColorChange?: boolean
   /**
    * Whether the rename option is disabled (default: false)
    * Set to true when user lacks permissions
@@ -134,19 +181,76 @@ export function ContextMenu({
   onDuplicate,
   onExport,
   onDelete,
+  onColorChange,
+  currentColor,
   showOpenInNewTab = false,
   showRename = true,
   showCreate = false,
   showCreateFolder = false,
   showDuplicate = true,
   showExport = false,
+  showColorChange = false,
   disableExport = false,
+  disableColorChange = false,
   disableRename = false,
   disableDuplicate = false,
   disableDelete = false,
   disableCreate = false,
   disableCreateFolder = false,
 }: ContextMenuProps) {
+  const [hexInput, setHexInput] = useState(currentColor || '#ffffff')
+
+  // Sync hexInput when currentColor changes (e.g., opening menu on different workflow)
+  useEffect(() => {
+    setHexInput(currentColor || '#ffffff')
+  }, [currentColor])
+
+  const canSubmitHex = useMemo(() => {
+    if (!isValidHex(hexInput)) return false
+    const normalized = normalizeHex(hexInput)
+    if (currentColor && normalized.toLowerCase() === currentColor.toLowerCase()) return false
+    return true
+  }, [hexInput, currentColor])
+
+  const handleHexSubmit = useCallback(() => {
+    if (!canSubmitHex || !onColorChange) return
+
+    const normalized = normalizeHex(hexInput)
+    onColorChange(normalized)
+    setHexInput(normalized)
+  }, [hexInput, canSubmitHex, onColorChange])
+
+  const handleHexKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        handleHexSubmit()
+      }
+    },
+    [handleHexSubmit]
+  )
+
+  const handleHexChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.trim()
+    if (value && !value.startsWith('#')) {
+      value = `#${value}`
+    }
+    value = value.slice(0, 1) + value.slice(1).replace(/[^0-9a-fA-F]/g, '')
+    setHexInput(value.slice(0, 7))
+  }, [])
+
+  const handleHexFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }, [])
+
+  const hasNavigationSection = showOpenInNewTab && onOpenInNewTab
+  const hasEditSection =
+    (showRename && onRename) ||
+    (showCreate && onCreate) ||
+    (showCreateFolder && onCreateFolder) ||
+    (showColorChange && onColorChange)
+  const hasCopySection = (showDuplicate && onDuplicate) || (showExport && onExport)
+
   return (
     <Popover
       open={isOpen}
@@ -164,10 +268,21 @@ export function ContextMenu({
           height: '1px',
         }}
       />
-      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+      <PopoverContent
+        ref={menuRef}
+        align='start'
+        side='bottom'
+        sideOffset={4}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        {/* Back button - shown only when in a folder */}
+        <PopoverBackButton />
+
         {/* Navigation actions */}
         {showOpenInNewTab && onOpenInNewTab && (
           <PopoverItem
+            rootOnly
             onClick={() => {
               onOpenInNewTab()
               onClose()
@@ -176,11 +291,12 @@ export function ContextMenu({
             Open in new tab
           </PopoverItem>
         )}
-        {showOpenInNewTab && onOpenInNewTab && <PopoverDivider />}
+        {hasNavigationSection && (hasEditSection || hasCopySection) && <PopoverDivider rootOnly />}
 
         {/* Edit and create actions */}
         {showRename && onRename && (
           <PopoverItem
+            rootOnly
             disabled={disableRename}
             onClick={() => {
               onRename()
@@ -192,6 +308,7 @@ export function ContextMenu({
         )}
         {showCreate && onCreate && (
           <PopoverItem
+            rootOnly
             disabled={disableCreate}
             onClick={() => {
               onCreate()
@@ -203,6 +320,7 @@ export function ContextMenu({
         )}
         {showCreateFolder && onCreateFolder && (
           <PopoverItem
+            rootOnly
             disabled={disableCreateFolder}
             onClick={() => {
               onCreateFolder()
@@ -212,11 +330,72 @@ export function ContextMenu({
             Create folder
           </PopoverItem>
         )}
+        {showColorChange && onColorChange && (
+          <PopoverFolder
+            id='color-picker'
+            title='Change color'
+            expandOnHover
+            className={disableColorChange ? 'pointer-events-none opacity-50' : ''}
+          >
+            <div className='flex w-[140px] flex-col gap-[8px] p-[2px]'>
+              {/* Preset colors */}
+              <div className='grid grid-cols-6 gap-[4px]'>
+                {WORKFLOW_COLORS.map(({ color, name }) => (
+                  <button
+                    key={color}
+                    type='button'
+                    title={name}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setHexInput(color)
+                    }}
+                    className={cn(
+                      'h-[20px] w-[20px] rounded-[4px]',
+                      hexInput.toLowerCase() === color.toLowerCase() && 'ring-1 ring-white'
+                    )}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </div>
+
+              {/* Hex input */}
+              <div className='flex items-center gap-[4px]'>
+                <div
+                  className='h-[20px] w-[20px] flex-shrink-0 rounded-[4px]'
+                  style={{
+                    backgroundColor: isValidHex(hexInput) ? normalizeHex(hexInput) : '#ffffff',
+                  }}
+                />
+                <input
+                  type='text'
+                  value={hexInput}
+                  onChange={handleHexChange}
+                  onKeyDown={handleHexKeyDown}
+                  onFocus={handleHexFocus}
+                  onClick={(e) => e.stopPropagation()}
+                  className='h-[20px] min-w-0 flex-1 rounded-[4px] bg-[#363636] px-[6px] text-[11px] text-white uppercase caret-white focus:outline-none'
+                />
+                <button
+                  type='button'
+                  disabled={!canSubmitHex}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleHexSubmit()
+                  }}
+                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--brand-tertiary-2)] text-white disabled:opacity-40'
+                >
+                  <Check className='h-[12px] w-[12px]' />
+                </button>
+              </div>
+            </div>
+          </PopoverFolder>
+        )}
 
         {/* Copy and export actions */}
-        {(showDuplicate || showExport) && <PopoverDivider />}
+        {hasEditSection && hasCopySection && <PopoverDivider rootOnly />}
         {showDuplicate && onDuplicate && (
           <PopoverItem
+            rootOnly
             disabled={disableDuplicate}
             onClick={() => {
               onDuplicate()
@@ -228,6 +407,7 @@ export function ContextMenu({
         )}
         {showExport && onExport && (
           <PopoverItem
+            rootOnly
             disabled={disableExport}
             onClick={() => {
               onExport()
@@ -239,8 +419,9 @@ export function ContextMenu({
         )}
 
         {/* Destructive action */}
-        <PopoverDivider />
+        {(hasNavigationSection || hasEditSection || hasCopySection) && <PopoverDivider rootOnly />}
         <PopoverItem
+          rootOnly
           disabled={disableDelete}
           onClick={() => {
             onDelete()

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -3,8 +3,9 @@
 import { useCallback, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { ChevronRight, Folder, FolderOpen } from 'lucide-react'
+import { ChevronRight, Folder, FolderOpen, MoreHorizontal } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
@@ -19,14 +20,12 @@ import {
   useCanDelete,
   useDeleteFolder,
   useDuplicateFolder,
+  useExportFolder,
 } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow } from '@/hooks/queries/workflows'
 import type { FolderTreeNode } from '@/stores/folders/types'
-import {
-  generateCreativeWorkflowName,
-  getNextWorkflowColor,
-} from '@/stores/workflows/registry/utils'
+import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'
 
 const logger = createLogger('FolderItem')
 
@@ -75,6 +74,12 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     getFolderIds: () => folder.id,
   })
 
+  // Export folder hook
+  const { isExporting, hasWorkflows, handleExportFolder } = useExportFolder({
+    workspaceId,
+    getFolderId: () => folder.id,
+  })
+
   // Folder expand hook - must be declared before callbacks that use expandFolder
   const {
     isExpanded,
@@ -173,6 +178,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     menuRef,
     handleContextMenu,
     closeMenu,
+    preventDismiss,
   } = useContextMenu()
 
   // Rename hook
@@ -242,6 +248,40 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     [isEditing, handleRenameKeyDown, handleExpandKeyDown]
   )
 
+  /**
+   * Handle more button pointerdown - prevents click-outside dismissal when toggling
+   */
+  const handleMorePointerDown = useCallback(() => {
+    if (isContextMenuOpen) {
+      preventDismiss()
+    }
+  }, [isContextMenuOpen, preventDismiss])
+
+  /**
+   * Handle more button click - toggles context menu at button position
+   */
+  const handleMoreClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Toggle: close if open, open if closed
+      if (isContextMenuOpen) {
+        closeMenu()
+        return
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect()
+      handleContextMenu({
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        clientX: rect.right,
+        clientY: rect.top,
+      } as React.MouseEvent)
+    },
+    [isContextMenuOpen, closeMenu, handleContextMenu]
+  )
+
   return (
     <>
       <div
@@ -303,12 +343,22 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
             spellCheck='false'
           />
         ) : (
-          <span
-            className='truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-            onDoubleClick={handleDoubleClick}
-          >
-            {folder.name}
-          </span>
+          <>
+            <span
+              className='min-w-0 flex-1 truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+              onDoubleClick={handleDoubleClick}
+            >
+              {folder.name}
+            </span>
+            <button
+              type='button'
+              onPointerDown={handleMorePointerDown}
+              onClick={handleMoreClick}
+              className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)] group-hover:opacity-100'
+            >
+              <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+            </button>
+          </>
         )}
       </div>
 
@@ -322,13 +372,16 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
         onCreate={handleCreateWorkflowInFolder}
         onCreateFolder={handleCreateFolderInFolder}
         onDuplicate={handleDuplicateFolder}
+        onExport={handleExportFolder}
         onDelete={() => setIsDeleteModalOpen(true)}
         showCreate={true}
         showCreateFolder={true}
+        showExport={true}
         disableRename={!userPermissions.canEdit}
         disableCreate={!userPermissions.canEdit || createWorkflowMutation.isPending}
         disableCreateFolder={!userPermissions.canEdit || createFolderMutation.isPending}
-        disableDuplicate={!userPermissions.canEdit}
+        disableDuplicate={!userPermissions.canEdit || !hasWorkflows}
+        disableExport={!userPermissions.canEdit || isExporting || !hasWorkflows}
         disableDelete={!userPermissions.canEdit || !canDelete}
       />
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -1,15 +1,24 @@
 'use client'
 
-import { type CSSProperties, useEffect, useMemo, useState } from 'react'
-import Image from 'next/image'
-import { Tooltip } from '@/components/emcn'
+import { type CSSProperties, useEffect, useMemo } from 'react'
+import { Avatar, AvatarFallback, AvatarImage, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
+import { SIDEBAR_WIDTH } from '@/stores/constants'
+import { useSidebarStore } from '@/stores/sidebar/store'
+
+/**
+ * Avatar display configuration for responsive layout.
+ */
+const AVATAR_CONFIG = {
+  MIN_COUNT: 3,
+  MAX_COUNT: 12,
+  WIDTH_PER_AVATAR: 20,
+} as const
 
 interface AvatarsProps {
   workflowId: string
-  maxVisible?: number
   /**
    * Callback fired when the presence visibility changes.
    * Used by parent components to adjust layout (e.g., text truncation spacing).
@@ -30,45 +39,29 @@ interface UserAvatarProps {
 }
 
 /**
- * Individual user avatar with error handling for image loading.
+ * Individual user avatar using emcn Avatar component.
  * Falls back to colored circle with initials if image fails to load.
  */
 function UserAvatar({ user, index }: UserAvatarProps) {
-  const [imageError, setImageError] = useState(false)
   const color = getUserColor(user.userId)
   const initials = user.userName ? user.userName.charAt(0).toUpperCase() : '?'
-  const hasAvatar = Boolean(user.avatarUrl) && !imageError
-
-  // Reset error state when avatar URL changes
-  useEffect(() => {
-    setImageError(false)
-  }, [user.avatarUrl])
 
   const avatarElement = (
-    <div
-      className='relative flex h-[14px] w-[14px] flex-shrink-0 cursor-default items-center justify-center overflow-hidden rounded-full font-semibold text-[7px] text-white'
-      style={
-        {
-          background: hasAvatar ? undefined : color,
-          zIndex: 10 - index,
-        } as CSSProperties
-      }
-    >
-      {hasAvatar && user.avatarUrl ? (
-        <Image
+    <Avatar size='xs' style={{ zIndex: index + 1 } as CSSProperties}>
+      {user.avatarUrl && (
+        <AvatarImage
           src={user.avatarUrl}
           alt={user.userName ? `${user.userName}'s avatar` : 'User avatar'}
-          fill
-          sizes='14px'
-          className='object-cover'
           referrerPolicy='no-referrer'
-          unoptimized
-          onError={() => setImageError(true)}
         />
-      ) : (
-        initials
       )}
-    </div>
+      <AvatarFallback
+        style={{ background: color }}
+        className='border-0 font-semibold text-[7px] text-white'
+      >
+        {initials}
+      </AvatarFallback>
+    </Avatar>
   )
 
   if (user.userName) {
@@ -92,14 +85,26 @@ function UserAvatar({ user, index }: UserAvatarProps) {
  * @param props - Component props
  * @returns Avatar stack for workflow presence
  */
-export function Avatars({ workflowId, maxVisible = 3, onPresenceChange }: AvatarsProps) {
+export function Avatars({ workflowId, onPresenceChange }: AvatarsProps) {
   const { presenceUsers, currentWorkflowId } = useSocket()
   const { data: session } = useSession()
   const currentUserId = session?.user?.id
+  const sidebarWidth = useSidebarStore((state) => state.sidebarWidth)
 
   /**
-   * Only show presence for the currently active workflow
-   * Filter out the current user from the list
+   * Calculate max visible avatars based on sidebar width.
+   * Scales between MIN_COUNT and MAX_COUNT as sidebar expands.
+   */
+  const maxVisible = useMemo(() => {
+    const widthDelta = sidebarWidth - SIDEBAR_WIDTH.MIN
+    const additionalAvatars = Math.floor(widthDelta / AVATAR_CONFIG.WIDTH_PER_AVATAR)
+    const calculated = AVATAR_CONFIG.MIN_COUNT + additionalAvatars
+    return Math.max(AVATAR_CONFIG.MIN_COUNT, Math.min(AVATAR_CONFIG.MAX_COUNT, calculated))
+  }, [sidebarWidth])
+
+  /**
+   * Only show presence for the currently active workflow.
+   * Filter out the current user from the list.
    */
   const workflowUsers = useMemo(() => {
     if (currentWorkflowId !== workflowId) {
@@ -122,7 +127,6 @@ export function Avatars({ workflowId, maxVisible = 3, onPresenceChange }: Avatar
     return { visibleUsers: visible, overflowCount: overflow }
   }, [workflowUsers, maxVisible])
 
-  // Notify parent when avatars are present or not
   useEffect(() => {
     const hasAnyAvatars = visibleUsers.length > 0
     if (typeof onPresenceChange === 'function') {
@@ -135,26 +139,25 @@ export function Avatars({ workflowId, maxVisible = 3, onPresenceChange }: Avatar
   }
 
   return (
-    <div className='-space-x-1 ml-[-8px] flex items-center'>
-      {visibleUsers.map((user, index) => (
-        <UserAvatar key={user.socketId} user={user} index={index} />
-      ))}
-
+    <div className='-space-x-1 flex items-center'>
       {overflowCount > 0 && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
-            <div
-              className='relative flex h-[14px] w-[14px] flex-shrink-0 cursor-default items-center justify-center overflow-hidden rounded-full bg-[#404040] font-semibold text-[7px] text-white'
-              style={{ zIndex: 10 - visibleUsers.length } as CSSProperties}
-            >
-              +{overflowCount}
-            </div>
+            <Avatar size='xs' style={{ zIndex: 0 } as CSSProperties}>
+              <AvatarFallback className='border-0 bg-[#404040] font-semibold text-[7px] text-white'>
+                +{overflowCount}
+              </AvatarFallback>
+            </Avatar>
           </Tooltip.Trigger>
           <Tooltip.Content side='bottom'>
             {overflowCount} more user{overflowCount > 1 ? 's' : ''}
           </Tooltip.Content>
         </Tooltip.Root>
       )}
+
+      {visibleUsers.map((user, index) => (
+        <UserAvatar key={user.socketId} user={user} index={overflowCount > 0 ? index + 1 : index} />
+      ))}
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useRef, useState } from 'react'
 import clsx from 'clsx'
+import { MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -108,6 +109,16 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
     window.open(`/workspace/${workspaceId}/w/${workflow.id}`, '_blank')
   }, [workspaceId, workflow.id])
 
+  /**
+   * Changes the workflow color
+   */
+  const handleColorChange = useCallback(
+    (color: string) => {
+      updateWorkflow(workflow.id, { color })
+    },
+    [workflow.id, updateWorkflow]
+  )
+
   /**
    * Drag start handler - handles workflow dragging with multi-selection support
    *
@@ -142,8 +153,38 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
     menuRef,
     handleContextMenu: handleContextMenuBase,
     closeMenu,
+    preventDismiss,
   } = useContextMenu()
 
+  /**
+   * Captures selection state for context menu operations
+   */
+  const captureSelectionState = useCallback(() => {
+    const { selectedWorkflows: currentSelection, selectOnly } = useFolderStore.getState()
+    const isCurrentlySelected = currentSelection.has(workflow.id)
+
+    if (!isCurrentlySelected) {
+      selectOnly(workflow.id)
+    }
+
+    const finalSelection = useFolderStore.getState().selectedWorkflows
+    const finalIsSelected = finalSelection.has(workflow.id)
+
+    const workflowIds =
+      finalIsSelected && finalSelection.size > 1 ? Array.from(finalSelection) : [workflow.id]
+
+    const workflowNames = workflowIds
+      .map((id) => workflows[id]?.name)
+      .filter((name): name is string => !!name)
+
+    capturedSelectionRef.current = {
+      workflowIds,
+      workflowNames: workflowNames.length > 1 ? workflowNames : workflowNames[0],
+    }
+
+    setCanDeleteCaptured(canDeleteWorkflows(workflowIds))
+  }, [workflow.id, workflows, canDeleteWorkflows])
+
   /**
    * Handle right-click - ensure proper selection behavior and capture selection state
    * If right-clicking on an unselected workflow, select only that workflow
@@ -151,39 +192,46 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
    */
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
-      // Check current selection state at time of right-click
-      const { selectedWorkflows: currentSelection, selectOnly } = useFolderStore.getState()
-      const isCurrentlySelected = currentSelection.has(workflow.id)
-
-      // If this workflow is not in the current selection, select only this workflow
-      if (!isCurrentlySelected) {
-        selectOnly(workflow.id)
-      }
-
-      // Capture the selection state at right-click time
-      const finalSelection = useFolderStore.getState().selectedWorkflows
-      const finalIsSelected = finalSelection.has(workflow.id)
-
-      const workflowIds =
-        finalIsSelected && finalSelection.size > 1 ? Array.from(finalSelection) : [workflow.id]
-
-      const workflowNames = workflowIds
-        .map((id) => workflows[id]?.name)
-        .filter((name): name is string => !!name)
-
-      // Store in ref so it persists even if selection changes
-      capturedSelectionRef.current = {
-        workflowIds,
-        workflowNames: workflowNames.length > 1 ? workflowNames : workflowNames[0],
-      }
-
-      // Check if the captured selection can be deleted
-      setCanDeleteCaptured(canDeleteWorkflows(workflowIds))
-
-      // If already selected with multiple selections, keep all selections
+      captureSelectionState()
       handleContextMenuBase(e)
     },
-    [workflow.id, workflows, handleContextMenuBase, canDeleteWorkflows]
+    [captureSelectionState, handleContextMenuBase]
+  )
+
+  /**
+   * Handle more button pointerdown - prevents click-outside dismissal when toggling
+   */
+  const handleMorePointerDown = useCallback(() => {
+    if (isContextMenuOpen) {
+      preventDismiss()
+    }
+  }, [isContextMenuOpen, preventDismiss])
+
+  /**
+   * Handle more button click - toggles context menu at button position
+   */
+  const handleMoreClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Toggle: close if open, open if closed
+      if (isContextMenuOpen) {
+        closeMenu()
+        return
+      }
+
+      captureSelectionState()
+      // Open context menu aligned with the button
+      const rect = e.currentTarget.getBoundingClientRect()
+      handleContextMenuBase({
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        clientX: rect.right,
+        clientY: rect.top,
+      } as React.MouseEvent)
+    },
+    [isContextMenuOpen, closeMenu, captureSelectionState, handleContextMenuBase]
   )
 
   // Rename hook
@@ -309,7 +357,17 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
           )}
         </div>
         {!isEditing && (
-          <Avatars workflowId={workflow.id} maxVisible={3} onPresenceChange={setHasAvatars} />
+          <>
+            <Avatars workflowId={workflow.id} onPresenceChange={setHasAvatars} />
+            <button
+              type='button'
+              onPointerDown={handleMorePointerDown}
+              onClick={handleMoreClick}
+              className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)] group-hover:opacity-100'
+            >
+              <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+            </button>
+          </>
         )}
       </Link>
 
@@ -324,13 +382,17 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
         onDuplicate={handleDuplicateWorkflow}
         onExport={handleExportWorkflow}
         onDelete={handleOpenDeleteModal}
+        onColorChange={handleColorChange}
+        currentColor={workflow.color}
         showOpenInNewTab={selectedWorkflows.size <= 1}
         showRename={selectedWorkflows.size <= 1}
         showDuplicate={true}
         showExport={true}
+        showColorChange={selectedWorkflows.size <= 1}
         disableRename={!userPermissions.canEdit}
         disableDuplicate={!userPermissions.canEdit}
         disableExport={!userPermissions.canEdit}
+        disableColorChange={!userPermissions.canEdit}
         disableDelete={!userPermissions.canEdit || !canDeleteCaptured}
       />
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx

@@ -9,7 +9,6 @@ import {
   useDragDrop,
   useWorkflowSelection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks/use-import-workflow'
 import { useFolders } from '@/hooks/queries/folders'
 import { useFolderStore } from '@/stores/folders/store'
 import type { FolderTreeNode } from '@/stores/folders/types'
@@ -25,15 +24,13 @@ const TREE_SPACING = {
 interface WorkflowListProps {
   regularWorkflows: WorkflowMetadata[]
   isLoading?: boolean
-  isImporting: boolean
-  setIsImporting: (value: boolean) => void
+  handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   fileInputRef: React.RefObject<HTMLInputElement | null>
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }
 
 /**
  * WorkflowList component displays workflows organized by folders with drag-and-drop support.
- * Uses the workflow import hook for handling JSON imports.
  *
  * @param props - Component props
  * @returns Workflow list with folders and drag-drop support
@@ -41,8 +38,7 @@ interface WorkflowListProps {
 export function WorkflowList({
   regularWorkflows,
   isLoading = false,
-  isImporting,
-  setIsImporting,
+  handleFileChange,
   fileInputRef,
   scrollContainerRef,
 }: WorkflowListProps) {
@@ -65,9 +61,6 @@ export function WorkflowList({
     createFolderHeaderHoverHandlers,
   } = useDragDrop()
 
-  // Workflow import hook
-  const { handleFileChange } = useImportWorkflow({ workspaceId })
-
   // Set scroll container when ref changes
   useEffect(() => {
     if (scrollContainerRef.current) {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx

@@ -11,9 +11,9 @@ export const PermissionsTableSkeleton = React.memo(() => (
       </div>
       <div className='flex flex-shrink-0 items-center'>
         <div className='inline-flex gap-[2px]'>
-          <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
-          <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
-          <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
         </div>
       </div>
     </div>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx

@@ -194,7 +194,6 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         const matches = text.match(emailRegex) || []
         return [...new Set(matches.map((e) => e.toLowerCase()))]
       },
-      tooltip: 'Upload emails',
     }),
     [userPerms.canAdmin]
   )
@@ -658,6 +657,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                   items={emailItems}
                   onAdd={(value) => addEmail(value)}
                   onRemove={removeEmailItem}
+                  onInputChange={() => setErrorMessage(null)}
                   placeholder={
                     !userPerms.canAdmin
                       ? 'Only administrators can invite new members'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx

@@ -290,7 +290,7 @@ export function WorkspaceHeader({
               <button
                 type='button'
                 aria-label='Switch workspace'
-                className={`group flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)] ${
+                className={`flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)] ${
                   isCollapsed ? '' : '-mx-[6px] min-w-0 max-w-full'
                 }`}
                 title={activeWorkspace?.name || 'Loading...'}
@@ -303,7 +303,7 @@ export function WorkspaceHeader({
                   {activeWorkspace?.name || 'Loading...'}
                 </span>
                 <ChevronDown
-                  className={`h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${
+                  className={`h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100 ${
                     isWorkspaceMenuOpen ? 'rotate-180' : ''
                   }`}
                 />
@@ -452,7 +452,7 @@ export function WorkspaceHeader({
             >
               {activeWorkspace?.name || 'Loading...'}
             </span>
-            <ChevronDown className='h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)]' />
           </button>
         )}
       </div>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-context-menu.ts

@@ -27,6 +27,8 @@ export function useContextMenu({ onContextMenu }: UseContextMenuProps = {}) {
   const [isOpen, setIsOpen] = useState(false)
   const [position, setPosition] = useState<ContextMenuPosition>({ x: 0, y: 0 })
   const menuRef = useRef<HTMLDivElement>(null)
+  // Used to prevent click-outside dismissal when trigger is clicked
+  const dismissPreventedRef = useRef(false)
 
   /**
    * Handle right-click event
@@ -55,6 +57,14 @@ export function useContextMenu({ onContextMenu }: UseContextMenuProps = {}) {
     setIsOpen(false)
   }, [])
 
+  /**
+   * Prevent the next click-outside from dismissing the menu.
+   * Call this on pointerdown of a toggle trigger to allow proper toggle behavior.
+   */
+  const preventDismiss = useCallback(() => {
+    dismissPreventedRef.current = true
+  }, [])
+
   /**
    * Handle clicks outside the menu to close it
    */
@@ -62,6 +72,11 @@ export function useContextMenu({ onContextMenu }: UseContextMenuProps = {}) {
     if (!isOpen) return
 
     const handleClickOutside = (e: MouseEvent) => {
+      // Check if dismissal was prevented (e.g., by toggle trigger's pointerdown)
+      if (dismissPreventedRef.current) {
+        dismissPreventedRef.current = false
+        return
+      }
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
         closeMenu()
       }
@@ -84,5 +99,6 @@ export function useContextMenu({ onContextMenu }: UseContextMenuProps = {}) {
     menuRef,
     handleContextMenu,
     closeMenu,
+    preventDismiss,
   }
 }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workflow-operations.ts

@@ -1,13 +1,11 @@
 import { useCallback } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useCreateWorkflow, useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import {
-  generateCreativeWorkflowName,
-  getNextWorkflowColor,
-} from '@/stores/workflows/registry/utils'
+import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'
 
 const logger = createLogger('useWorkflowOperations')
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -2,10 +2,10 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowDown, Database, HelpCircle, Layout, Plus, Search, Settings } from 'lucide-react'
+import { Database, HelpCircle, Layout, Plus, Search, Settings } from 'lucide-react'
 import Link from 'next/link'
 import { useParams, usePathname, useRouter } from 'next/navigation'
-import { Button, FolderPlus, Library, Tooltip } from '@/components/emcn'
+import { Button, Download, FolderPlus, Library, Loader, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
@@ -30,6 +30,7 @@ import {
 import {
   useDuplicateWorkspace,
   useExportWorkspace,
+  useImportWorkflow,
   useImportWorkspace,
 } from '@/app/workspace/[workspaceId]/w/hooks'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -85,9 +86,11 @@ export function Sidebar() {
   const isCollapsed = hasHydrated ? isCollapsedStore : false
   const isOnWorkflowPage = !!workflowId
 
-  const [isImporting, setIsImporting] = useState(false)
   const workspaceFileInputRef = useRef<HTMLInputElement>(null)
 
+  const { isImporting, handleFileChange: handleImportFileChange } = useImportWorkflow({
+    workspaceId,
+  })
   const { isImporting: isImportingWorkspace, handleImportWorkspace: importWorkspace } =
     useImportWorkspace()
   const { handleExportWorkspace: exportWorkspace } = useExportWorkspace()
@@ -565,21 +568,31 @@ export function Sidebar() {
                       Workflows
                     </div>
                     <div className='flex items-center justify-center gap-[10px]'>
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            variant='ghost'
-                            className='translate-y-[-0.25px] p-[1px]'
-                            onClick={handleImportWorkflow}
-                            disabled={isImporting || !canEdit}
-                          >
-                            <ArrowDown className='h-[14px] w-[14px]' />
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>
-                          <p>{isImporting ? 'Importing workflow...' : 'Import workflow'}</p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
+                      {isImporting ? (
+                        <Button
+                          variant='ghost'
+                          className='translate-y-[-0.25px] p-[1px]'
+                          disabled={!canEdit || isImporting}
+                        >
+                          <Loader className='h-[14px] w-[14px]' animate />
+                        </Button>
+                      ) : (
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <Button
+                              variant='ghost'
+                              className='translate-y-[-0.25px] p-[1px]'
+                              onClick={handleImportWorkflow}
+                              disabled={!canEdit}
+                            >
+                              <Download className='h-[14px] w-[14px]' />
+                            </Button>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>
+                            <p>Import workflows</p>
+                          </Tooltip.Content>
+                        </Tooltip.Root>
+                      )}
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -622,8 +635,7 @@ export function Sidebar() {
                   <WorkflowList
                     regularWorkflows={regularWorkflows}
                     isLoading={isLoading}
-                    isImporting={isImporting}
-                    setIsImporting={setIsImporting}
+                    handleFileChange={handleImportFileChange}
                     fileInputRef={fileInputRef}
                     scrollContainerRef={scrollContainerRef}
                   />

apps/sim/app/workspace/[workspaceId]/w/hooks/index.ts

@@ -4,6 +4,7 @@ export { useDeleteWorkflow } from './use-delete-workflow'
 export { useDuplicateFolder } from './use-duplicate-folder'
 export { useDuplicateWorkflow } from './use-duplicate-workflow'
 export { useDuplicateWorkspace } from './use-duplicate-workspace'
+export { useExportFolder } from './use-export-folder'
 export { useExportWorkflow } from './use-export-workflow'
 export { useExportWorkspace } from './use-export-workspace'
 export { useImportWorkflow } from './use-import-workflow'

apps/sim/app/workspace/[workspaceId]/w/hooks/use-duplicate-workflow.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 import { createLogger } from '@sim/logger'
 import { useRouter } from 'next/navigation'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useDuplicateWorkflowMutation } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { getNextWorkflowColor } from '@/stores/workflows/registry/utils'
 
 const logger = createLogger('useDuplicateWorkflow')
 

apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-folder.ts

@@ -0,0 +1,251 @@
+import { useCallback, useMemo, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import JSZip from 'jszip'
+import { sanitizeForExport } from '@/lib/workflows/sanitization/json-sanitizer'
+import { useFolderStore } from '@/stores/folders/store'
+import type { WorkflowFolder } from '@/stores/folders/types'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
+import type { Variable } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('useExportFolder')
+
+interface UseExportFolderProps {
+  /**
+   * Current workspace ID
+   */
+  workspaceId: string
+  /**
+   * Function that returns the folder ID to export
+   * This function is called when export occurs to get fresh state
+   */
+  getFolderId: () => string
+  /**
+   * Optional callback after successful export
+   */
+  onSuccess?: () => void
+}
+
+/**
+ * Recursively collects all workflow IDs within a folder and its subfolders.
+ *
+ * @param folderId - The folder ID to collect workflows from
+ * @param workflows - All workflows in the workspace
+ * @param folders - All folders in the workspace
+ * @returns Array of workflow IDs
+ */
+function collectWorkflowsInFolder(
+  folderId: string,
+  workflows: Record<string, WorkflowMetadata>,
+  folders: Record<string, WorkflowFolder>
+): string[] {
+  const workflowIds: string[] = []
+
+  // Get workflows directly in this folder
+  for (const workflow of Object.values(workflows)) {
+    if (workflow.folderId === folderId) {
+      workflowIds.push(workflow.id)
+    }
+  }
+
+  // Recursively get workflows from child folders
+  for (const folder of Object.values(folders)) {
+    if (folder.parentId === folderId) {
+      const childWorkflowIds = collectWorkflowsInFolder(folder.id, workflows, folders)
+      workflowIds.push(...childWorkflowIds)
+    }
+  }
+
+  return workflowIds
+}
+
+/**
+ * Hook for managing folder export to ZIP.
+ *
+ * Handles:
+ * - Collecting all workflows within a folder (including nested subfolders)
+ * - Fetching workflow data and variables from API
+ * - Sanitizing workflow state for export
+ * - Downloading as ZIP file
+ * - Loading state management
+ * - Error handling and logging
+ * - Clearing selection after export
+ *
+ * @param props - Hook configuration
+ * @returns Export folder handlers and state
+ */
+export function useExportFolder({ workspaceId, getFolderId, onSuccess }: UseExportFolderProps) {
+  const { workflows } = useWorkflowRegistry()
+  const { folders } = useFolderStore()
+  const [isExporting, setIsExporting] = useState(false)
+
+  /**
+   * Check if the folder has any workflows (recursively)
+   */
+  const hasWorkflows = useMemo(() => {
+    const folderId = getFolderId()
+    if (!folderId) return false
+    return collectWorkflowsInFolder(folderId, workflows, folders).length > 0
+  }, [getFolderId, workflows, folders])
+
+  /**
+   * Download file helper
+   */
+  const downloadFile = (content: Blob, filename: string, mimeType = 'application/zip') => {
+    try {
+      const blob = content instanceof Blob ? content : new Blob([content], { type: mimeType })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      logger.error('Failed to download file:', error)
+    }
+  }
+
+  /**
+   * Export all workflows in the folder (including nested subfolders) to ZIP
+   */
+  const handleExportFolder = useCallback(async () => {
+    if (isExporting) {
+      return
+    }
+
+    setIsExporting(true)
+    try {
+      // Get fresh folder ID at export time
+      const folderId = getFolderId()
+      if (!folderId) {
+        logger.warn('No folder ID provided for export')
+        return
+      }
+
+      const folderStore = useFolderStore.getState()
+      const folder = folderStore.getFolderById(folderId)
+
+      if (!folder) {
+        logger.warn('Folder not found for export', { folderId })
+        return
+      }
+
+      // Collect all workflow IDs recursively
+      const workflowIdsToExport = collectWorkflowsInFolder(folderId, workflows, folderStore.folders)
+
+      if (workflowIdsToExport.length === 0) {
+        logger.warn('No workflows found in folder to export', { folderId, folderName: folder.name })
+        return
+      }
+
+      logger.info('Starting folder export', {
+        folderId,
+        folderName: folder.name,
+        workflowCount: workflowIdsToExport.length,
+      })
+
+      const exportedWorkflows: Array<{ name: string; content: string }> = []
+
+      // Export each workflow
+      for (const workflowId of workflowIdsToExport) {
+        try {
+          const workflow = workflows[workflowId]
+          if (!workflow) {
+            logger.warn(`Workflow ${workflowId} not found in registry`)
+            continue
+          }
+
+          // Fetch workflow state from API
+          const workflowResponse = await fetch(`/api/workflows/${workflowId}`)
+          if (!workflowResponse.ok) {
+            logger.error(`Failed to fetch workflow ${workflowId}`)
+            continue
+          }
+
+          const { data: workflowData } = await workflowResponse.json()
+          if (!workflowData?.state) {
+            logger.warn(`Workflow ${workflowId} has no state`)
+            continue
+          }
+
+          // Fetch workflow variables (API returns Record format directly)
+          const variablesResponse = await fetch(`/api/workflows/${workflowId}/variables`)
+          let workflowVariables: Record<string, Variable> | undefined
+          if (variablesResponse.ok) {
+            const variablesData = await variablesResponse.json()
+            workflowVariables = variablesData?.data
+          }
+
+          // Prepare export state
+          const workflowState = {
+            ...workflowData.state,
+            metadata: {
+              name: workflow.name,
+              description: workflow.description,
+              color: workflow.color,
+              exportedAt: new Date().toISOString(),
+            },
+            variables: workflowVariables,
+          }
+
+          const exportState = sanitizeForExport(workflowState)
+          const jsonString = JSON.stringify(exportState, null, 2)
+
+          exportedWorkflows.push({
+            name: workflow.name,
+            content: jsonString,
+          })
+
+          logger.info(`Workflow ${workflowId} exported successfully`)
+        } catch (error) {
+          logger.error(`Failed to export workflow ${workflowId}:`, error)
+        }
+      }
+
+      if (exportedWorkflows.length === 0) {
+        logger.warn('No workflows were successfully exported from folder', {
+          folderId,
+          folderName: folder.name,
+        })
+        return
+      }
+
+      // Always export as ZIP for folders (even with single workflow)
+      const zip = new JSZip()
+
+      for (const exportedWorkflow of exportedWorkflows) {
+        const filename = `${exportedWorkflow.name.replace(/[^a-z0-9]/gi, '-')}.json`
+        zip.file(filename, exportedWorkflow.content)
+      }
+
+      const zipBlob = await zip.generateAsync({ type: 'blob' })
+      const zipFilename = `${folder.name.replace(/[^a-z0-9]/gi, '-')}-export.zip`
+      downloadFile(zipBlob, zipFilename, 'application/zip')
+
+      // Clear selection after successful export
+      const { clearSelection } = useFolderStore.getState()
+      clearSelection()
+
+      logger.info('Folder exported successfully', {
+        folderId,
+        folderName: folder.name,
+        workflowCount: exportedWorkflows.length,
+      })
+
+      onSuccess?.()
+    } catch (error) {
+      logger.error('Error exporting folder:', { error })
+      throw error
+    } finally {
+      setIsExporting(false)
+    }
+  }, [getFolderId, isExporting, workflows, onSuccess])
+
+  return {
+    isExporting,
+    hasWorkflows,
+    handleExportFolder,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts

@@ -206,9 +206,11 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
 
         logger.info(`Import complete. Imported ${importedWorkflowIds.length} workflow(s)`)
 
-        // Navigate to first imported workflow if any
+        // Navigate to last imported workflow if any
         if (importedWorkflowIds.length > 0) {
-          router.push(`/workspace/${workspaceId}/w/${importedWorkflowIds[0]}`)
+          router.push(
+            `/workspace/${workspaceId}/w/${importedWorkflowIds[importedWorkflowIds.length - 1]}`
+          )
         }
       } catch (error) {
         logger.error('Failed to import workflows:', error)

apps/sim/components/emcn/components/avatar/avatar.tsx

@@ -12,11 +12,10 @@ import { cn } from '@/lib/core/utils/cn'
 const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
   variants: {
     size: {
-      xs: 'h-6 w-6',
-      sm: 'h-8 w-8',
-      md: 'h-10 w-10',
-      lg: 'h-12 w-12',
-      xl: 'h-16 w-16',
+      xs: 'h-3.5 w-3.5',
+      sm: 'h-6 w-6',
+      md: 'h-8 w-8',
+      lg: 'h-10 w-10',
     },
   },
   defaultVariants: {
@@ -38,11 +37,10 @@ const avatarStatusVariants = cva(
         away: 'bg-[#f59e0b]',
       },
       size: {
-        xs: 'h-2 w-2',
-        sm: 'h-2.5 w-2.5',
-        md: 'h-3 w-3',
-        lg: 'h-3.5 w-3.5',
-        xl: 'h-4 w-4',
+        xs: 'h-1.5 w-1.5 border',
+        sm: 'h-2 w-2',
+        md: 'h-2.5 w-2.5',
+        lg: 'h-3 w-3',
       },
     },
     defaultVariants: {

apps/sim/components/emcn/components/popover/popover.tsx

@@ -52,6 +52,7 @@
 import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { Check, ChevronLeft, ChevronRight, Search } from 'lucide-react'
+import { createPortal } from 'react-dom'
 import { cn } from '@/lib/core/utils/cn'
 
 type PopoverSize = 'sm' | 'md'
@@ -166,6 +167,9 @@ interface PopoverContextValue {
   colorScheme: PopoverColorScheme
   searchQuery: string
   setSearchQuery: (query: string) => void
+  /** ID of the last hovered item (for hover submenus) */
+  lastHoveredItem: string | null
+  setLastHoveredItem: (id: string | null) => void
 }
 
 const PopoverContext = React.createContext<PopoverContextValue | null>(null)
@@ -208,12 +212,24 @@ const Popover: React.FC<PopoverProps> = ({
   variant = 'default',
   size = 'md',
   colorScheme = 'default',
+  open,
   ...props
 }) => {
   const [currentFolder, setCurrentFolder] = React.useState<string | null>(null)
   const [folderTitle, setFolderTitle] = React.useState<string | null>(null)
   const [onFolderSelect, setOnFolderSelect] = React.useState<(() => void) | null>(null)
   const [searchQuery, setSearchQuery] = React.useState<string>('')
+  const [lastHoveredItem, setLastHoveredItem] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (open === false) {
+      setCurrentFolder(null)
+      setFolderTitle(null)
+      setOnFolderSelect(null)
+      setSearchQuery('')
+      setLastHoveredItem(null)
+    }
+  }, [open])
 
   const openFolder = React.useCallback(
     (id: string, title: string, onLoad?: () => void | Promise<void>, onSelect?: () => void) => {
@@ -246,6 +262,8 @@ const Popover: React.FC<PopoverProps> = ({
       colorScheme,
       searchQuery,
       setSearchQuery,
+      lastHoveredItem,
+      setLastHoveredItem,
     }),
     [
       openFolder,
@@ -257,12 +275,15 @@ const Popover: React.FC<PopoverProps> = ({
       size,
       colorScheme,
       searchQuery,
+      lastHoveredItem,
     ]
   )
 
   return (
     <PopoverContext.Provider value={contextValue}>
-      <PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>
+      <PopoverPrimitive.Root open={open} {...props}>
+        {children}
+      </PopoverPrimitive.Root>
     </PopoverContext.Provider>
   )
 }
@@ -496,7 +517,17 @@ export interface PopoverItemProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
   (
-    { className, active, rootOnly, disabled, showCheck = false, children, onClick, ...props },
+    {
+      className,
+      active,
+      rootOnly,
+      disabled,
+      showCheck = false,
+      children,
+      onClick,
+      onMouseEnter,
+      ...props
+    },
     ref
   ) => {
     const context = React.useContext(PopoverContext)
@@ -514,6 +545,12 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
       onClick?.(e)
     }
 
+    const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+      // Clear last hovered item to close any open hover submenus
+      context?.setLastHoveredItem(null)
+      onMouseEnter?.(e)
+    }
+
     return (
       <div
         className={cn(
@@ -529,6 +566,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
         aria-selected={active}
         aria-disabled={disabled}
         onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
         {...props}
       >
         {children}
@@ -589,44 +627,150 @@ export interface PopoverFolderProps extends Omit<React.HTMLAttributes<HTMLDivEle
   children?: React.ReactNode
   /** Whether currently active/selected */
   active?: boolean
+  /**
+   * Expand folder on hover to show submenu alongside parent
+   * When true, hovering shows a floating submenu; clicking still uses inline navigation
+   * @default false
+   */
+  expandOnHover?: boolean
 }
 
 /**
  * Expandable folder that shows nested content.
+ * Supports two modes:
+ * - Click mode (default): Replaces parent content, shows back button
+ * - Hover mode (expandOnHover): Shows floating submenu alongside parent
  */
 const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
-  ({ className, id, title, icon, onOpen, onSelect, children, active, ...props }, ref) => {
-    const { openFolder, currentFolder, isInFolder, variant, size, colorScheme } =
-      usePopoverContext()
+  (
+    {
+      className,
+      id,
+      title,
+      icon,
+      onOpen,
+      onSelect,
+      children,
+      active,
+      expandOnHover = false,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      openFolder,
+      currentFolder,
+      isInFolder,
+      variant,
+      size,
+      colorScheme,
+      lastHoveredItem,
+      setLastHoveredItem,
+    } = usePopoverContext()
+    const [submenuPosition, setSubmenuPosition] = React.useState<{ top: number; left: number }>({
+      top: 0,
+      left: 0,
+    })
+    const triggerRef = React.useRef<HTMLDivElement>(null)
 
+    // Submenu is open when this folder is the last hovered item (for expandOnHover mode)
+    const isHoverOpen = expandOnHover && lastHoveredItem === id
+
+    // Merge refs
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        triggerRef.current = node
+        if (typeof ref === 'function') {
+          ref(node)
+        } else if (ref) {
+          ref.current = node
+        }
+      },
+      [ref]
+    )
+
+    // If we're in a folder and this isn't the current one, hide
     if (isInFolder && currentFolder !== id) return null
+    // If this folder is open via click (inline mode), render children directly
     if (currentFolder === id) return <>{children}</>
 
-    const handleClick = (e: React.MouseEvent) => {
-      e.stopPropagation()
+    const handleClickOpen = () => {
       openFolder(id, title, onOpen, onSelect)
     }
 
+    const handleClick = (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (expandOnHover) {
+        // In hover mode, clicking opens inline and clears hover state
+        setLastHoveredItem(null)
+      }
+      handleClickOpen()
+    }
+
+    const handleMouseEnter = () => {
+      if (!expandOnHover) return
+
+      // Calculate position for submenu
+      if (triggerRef.current) {
+        const rect = triggerRef.current.getBoundingClientRect()
+        const parentPopover = triggerRef.current.closest('[data-radix-popper-content-wrapper]')
+        const parentRect = parentPopover?.getBoundingClientRect()
+
+        // Position to the right of the parent popover with a small gap
+        setSubmenuPosition({
+          top: rect.top,
+          left: parentRect ? parentRect.right + 4 : rect.right + 4,
+        })
+      }
+
+      setLastHoveredItem(id)
+      onOpen?.()
+    }
+
     return (
-      <div
-        ref={ref}
-        className={cn(
-          STYLES.itemBase,
-          STYLES.colorScheme[colorScheme].text,
-          STYLES.size[size].item,
-          getItemStateClasses(variant, colorScheme, !!active),
-          className
-        )}
-        role='menuitem'
-        aria-haspopup='true'
-        aria-expanded={false}
-        onClick={handleClick}
-        {...props}
-      >
-        {icon}
-        <span className='flex-1'>{title}</span>
-        <ChevronRight className={STYLES.size[size].icon} />
-      </div>
+      <>
+        <div
+          ref={mergedRef}
+          className={cn(
+            STYLES.itemBase,
+            STYLES.colorScheme[colorScheme].text,
+            STYLES.size[size].item,
+            getItemStateClasses(variant, colorScheme, !!active || isHoverOpen),
+            className
+          )}
+          role='menuitem'
+          aria-haspopup='true'
+          aria-expanded={isHoverOpen}
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+          {...props}
+        >
+          {icon}
+          <span className='flex-1'>{title}</span>
+          <ChevronRight className={STYLES.size[size].icon} />
+        </div>
+
+        {/* Hover submenu - rendered as a portal to escape overflow clipping */}
+        {isHoverOpen &&
+          typeof document !== 'undefined' &&
+          createPortal(
+            <div
+              className={cn(
+                'fixed z-[10000201] min-w-[120px]',
+                STYLES.content,
+                STYLES.colorScheme[colorScheme].content,
+                'shadow-lg'
+              )}
+              style={{
+                top: submenuPosition.top,
+                left: submenuPosition.left,
+              }}
+            >
+              {children}
+            </div>,
+            document.body
+          )}
+      </>
     )
   }
 )
@@ -665,7 +809,10 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
             className
           )}
           role='button'
-          onClick={closeFolder}
+          onClick={(e) => {
+            e.stopPropagation()
+            closeFolder()
+          }}
           {...props}
         >
           <ChevronLeft className={STYLES.size[size].icon} />

apps/sim/components/emcn/components/tag-input/tag-input.tsx

@@ -40,7 +40,6 @@
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Paperclip, Plus, X } from 'lucide-react'
-import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
@@ -152,8 +151,6 @@ export interface FileInputOptions {
   icon?: React.ComponentType<{ className?: string; strokeWidth?: number }>
   /** Extract values from file content. Each extracted value will be passed to onAdd. */
   extractValues?: (text: string) => string[]
-  /** Tooltip text for the file input button */
-  tooltip?: string
 }
 
 /**
@@ -169,6 +166,8 @@ export interface TagInputProps extends VariantProps<typeof tagInputVariants> {
   onAdd: (value: string) => boolean
   /** Callback when a tag is removed (receives value, index, and isValid) */
   onRemove: (value: string, index: number, isValid: boolean) => void
+  /** Callback when the input value changes (useful for clearing errors) */
+  onInputChange?: (value: string) => void
   /** Placeholder text for the input */
   placeholder?: string
   /** Placeholder text when there are existing tags */
@@ -210,6 +209,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
       items,
       onAdd,
       onRemove,
+      onInputChange,
       placeholder = 'Enter values',
       placeholderWithTags = 'Add another',
       disabled = false,
@@ -347,10 +347,12 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
         })
 
         if (addedCount === 0 && pastedValues.length === 1) {
-          setInputValue(inputValue + pastedValues[0])
+          const newValue = inputValue + pastedValues[0]
+          setInputValue(newValue)
+          onInputChange?.(newValue)
         }
       },
-      [onAdd, inputValue]
+      [onAdd, inputValue, onInputChange]
     )
 
     const handleBlur = React.useCallback(() => {
@@ -425,7 +427,10 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
               name={name}
               type='text'
               value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
+              onChange={(e) => {
+                setInputValue(e.target.value)
+                onInputChange?.(e.target.value)
+              }}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}
               onBlur={handleBlur}
@@ -468,24 +473,17 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           )}
         </div>
         {fileInputEnabled && !disabled && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  fileInputRef.current?.click()
-                }}
-                className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
-                aria-label={fileInputOptions?.tooltip ?? 'Upload file'}
-              >
-                <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {fileInputOptions?.tooltip ?? 'Upload file'}
-            </Tooltip.Content>
-          </Tooltip.Root>
+          <button
+            type='button'
+            onClick={(e) => {
+              e.stopPropagation()
+              fileInputRef.current?.click()
+            }}
+            className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
+            aria-label='Upload file'
+          >
+            <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
+          </button>
         )}
       </div>
     )

apps/sim/components/emcn/components/tooltip/tooltip.tsx

@@ -7,12 +7,7 @@ import { cn } from '@/lib/core/utils/cn'
 /**
  * Tooltip provider component that must wrap your app or tooltip usage area.
  */
-const Provider = ({
-  delayDuration = 400,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (
-  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
-)
+const Provider = TooltipPrimitive.Provider
 
 /**
  * Root tooltip component that wraps trigger and content.

apps/sim/components/emcn/icons/animate/download.module.css

@@ -0,0 +1,22 @@
+/**
+ * Download icon animation
+ * Subtle continuous animation for import/download states
+ * Arrow gently pulses down to suggest downloading motion
+ */
+
+@keyframes arrow-pulse {
+  0%,
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(1.5px);
+    opacity: 0.7;
+  }
+}
+
+.animated-download-svg {
+  animation: arrow-pulse 1.5s ease-in-out infinite;
+  transform-origin: center center;
+}

apps/sim/components/emcn/icons/cursor.tsx

@@ -1,22 +0,0 @@
-import type { SVGProps } from 'react'
-
-export function Cursor(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path
-        d='M20.5056 10.7754C21.1225 10.5355 21.431 10.4155 21.5176 10.2459C21.5926 10.099 21.5903 9.92446 21.5115 9.77954C21.4205 9.61226 21.109 9.50044 20.486 9.2768L4.59629 3.5728C4.0866 3.38983 3.83175 3.29835 3.66514 3.35605C3.52029 3.40621 3.40645 3.52004 3.35629 3.6649C3.29859 3.8315 3.39008 4.08635 3.57304 4.59605L9.277 20.4858C9.50064 21.1088 9.61246 21.4203 9.77973 21.5113C9.92465 21.5901 10.0991 21.5924 10.2461 21.5174C10.4157 21.4308 10.5356 21.1223 10.7756 20.5054L13.3724 13.8278C13.4194 13.707 13.4429 13.6466 13.4792 13.5957C13.5114 13.5506 13.5508 13.5112 13.5959 13.479C13.6468 13.4427 13.7072 13.4192 13.828 13.3722L20.5056 10.7754Z'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}

apps/sim/components/emcn/icons/download.tsx

@@ -0,0 +1,42 @@
+import type { SVGProps } from 'react'
+import styles from '@/components/emcn/icons/animate/download.module.css'
+
+export interface DownloadProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Enable animation on the download icon
+   * @default false
+   */
+  animate?: boolean
+}
+
+/**
+ * Download icon component with optional CSS-based animation
+ * Based on lucide arrow-down icon structure.
+ * When animate is false, this is a lightweight static icon with no animation overhead.
+ * When animate is true, CSS module animations are applied for a subtle pulsing effect.
+ * @param props - SVG properties including className, animate, etc.
+ */
+export function Download({ animate = false, className, ...props }: DownloadProps) {
+  const svgClassName = animate
+    ? `${styles['animated-download-svg']} ${className || ''}`.trim()
+    : className
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className={svgClassName}
+      {...props}
+    >
+      <path d='M12 5v14' />
+      <path d='m19 12-7 7-7-7' />
+    </svg>
+  )
+}

apps/sim/components/emcn/icons/expand.tsx

@@ -1,43 +0,0 @@
-import type { SVGProps } from 'react'
-
-export function Expand(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path
-        d='M15 3H21V9'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M9 21H3V15'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M21 3L14 10'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M3 21L10 14'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}

apps/sim/components/emcn/icons/hand.tsx

@@ -1,43 +0,0 @@
-import type { SVGProps } from 'react'
-
-export function Hand(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      {...props}
-    >
-      <path
-        d='M6.5 11V6.5C6.5 5.67157 7.17157 5 8 5C8.82843 5 9.5 5.67157 9.5 6.5V11'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M9.5 10.5V5.5C9.5 4.67157 10.1716 4 11 4C11.8284 4 12.5 4.67157 12.5 5.5V10.5'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M12.5 10.5V6.5C12.5 5.67157 13.1716 5 14 5C14.8284 5 15.5 5.67157 15.5 6.5V10.5'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M15.5 10.5V8.5C15.5 7.67157 16.1716 7 17 7C17.8284 7 18.5 7.67157 18.5 8.5V15.5C18.5 18.8137 15.8137 21.5 12.5 21.5H11.5C8.18629 21.5 5.5 18.8137 5.5 15.5V13C5.5 12.1716 6.17157 11.5 7 11.5C7.82843 11.5 8.5 12.1716 8.5 13'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}

apps/sim/components/emcn/icons/index.ts

@@ -4,14 +4,12 @@ export { Card } from './card'
 export { ChevronDown } from './chevron-down'
 export { Connections } from './connections'
 export { Copy } from './copy'
-export { Cursor } from './cursor'
 export { DocumentAttachment } from './document-attachment'
+export { Download } from './download'
 export { Duplicate } from './duplicate'
-export { Expand } from './expand'
 export { Eye } from './eye'
 export { FolderCode } from './folder-code'
 export { FolderPlus } from './folder-plus'
-export { Hand } from './hand'
 export { HexSimple } from './hex-simple'
 export { Key } from './key'
 export { Layout } from './layout'

apps/sim/components/emcn/icons/redo.tsx

@@ -17,14 +17,14 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M9.5 4.5H4C2.61929 4.5 1.5 5.61929 1.5 7C1.5 8.38071 2.61929 9.5 4 9.5H7'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M8 2.5L10 4.5L8 6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

apps/sim/components/emcn/icons/undo.tsx

@@ -17,14 +17,14 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
       <path
         d='M2.5 4.5H8C9.38071 4.5 10.5 5.61929 10.5 7C10.5 8.38071 9.38071 9.5 8 9.5H5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M4 2.5L2 4.5L4 6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

apps/sim/components/emcn/icons/zoom-in.tsx

@@ -19,28 +19,28 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M5 3.5V6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

apps/sim/components/emcn/icons/zoom-out.tsx

@@ -19,21 +19,21 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
         cy='5'
         r='3.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M3.5 5H6.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />
       <path
         d='M7.5 7.5L10.5 10.5'
         stroke='currentColor'
-        strokeWidth='1'
+        strokeWidth='1.5'
         strokeLinecap='round'
         strokeLinejoin='round'
       />

apps/sim/hooks/queries/general-settings.ts

@@ -25,7 +25,6 @@ export interface GeneralSettings {
   billingUsageNotificationsEnabled: boolean
   errorNotificationsEnabled: boolean
   snapToGridSize: number
-  showActionBar: boolean
 }
 
 /**
@@ -49,7 +48,6 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
     billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
     errorNotificationsEnabled: data.errorNotificationsEnabled ?? true,
     snapToGridSize: data.snapToGridSize ?? 0,
-    showActionBar: data.showActionBar ?? true,
   }
 }
 
@@ -71,7 +69,6 @@ function syncSettingsToZustand(settings: GeneralSettings) {
     isBillingUsageNotificationsEnabled: settings.billingUsageNotificationsEnabled,
     isErrorNotificationsEnabled: settings.errorNotificationsEnabled,
     snapToGridSize: settings.snapToGridSize,
-    showActionBar: settings.showActionBar,
   }
 
   const hasChanges = Object.entries(newSettings).some(

apps/sim/hooks/queries/workflows.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
 import {
   createOptimisticMutationHandlers,
@@ -8,10 +9,7 @@ import {
 } from '@/hooks/queries/utils/optimistic-mutation'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
-import {
-  generateCreativeWorkflowName,
-  getNextWorkflowColor,
-} from '@/stores/workflows/registry/utils'
+import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 

apps/sim/hooks/use-canvas-viewport.ts

@@ -1,185 +0,0 @@
-import { useCallback } from 'react'
-import type { Node, ReactFlowInstance } from 'reactflow'
-
-interface VisibleBounds {
-  width: number
-  height: number
-  offsetLeft: number
-  offsetRight: number
-  offsetBottom: number
-}
-
-/**
- * Gets the visible canvas bounds accounting for sidebar, terminal, and panel overlays.
- * Works correctly regardless of whether the ReactFlow container extends under the sidebar or not.
- */
-function getVisibleCanvasBounds(): VisibleBounds {
-  const style = getComputedStyle(document.documentElement)
-
-  const sidebarWidth = Number.parseInt(style.getPropertyValue('--sidebar-width') || '0', 10)
-  const terminalHeight = Number.parseInt(style.getPropertyValue('--terminal-height') || '0', 10)
-  const panelWidth = Number.parseInt(style.getPropertyValue('--panel-width') || '0', 10)
-
-  const flowContainer = document.querySelector('.react-flow')
-  if (!flowContainer) {
-    return {
-      width: window.innerWidth - sidebarWidth - panelWidth,
-      height: window.innerHeight - terminalHeight,
-      offsetLeft: sidebarWidth,
-      offsetRight: panelWidth,
-      offsetBottom: terminalHeight,
-    }
-  }
-
-  const rect = flowContainer.getBoundingClientRect()
-
-  // Calculate actual visible area in screen coordinates
-  // This works regardless of whether the container extends under overlays
-  const visibleLeft = Math.max(rect.left, sidebarWidth)
-  const visibleRight = Math.min(rect.right, window.innerWidth - panelWidth)
-  const visibleBottom = Math.min(rect.bottom, window.innerHeight - terminalHeight)
-
-  // Calculate visible dimensions and offsets relative to the container
-  const visibleWidth = Math.max(0, visibleRight - visibleLeft)
-  const visibleHeight = Math.max(0, visibleBottom - rect.top)
-
-  return {
-    width: visibleWidth,
-    height: visibleHeight,
-    offsetLeft: visibleLeft - rect.left,
-    offsetRight: rect.right - visibleRight,
-    offsetBottom: rect.bottom - visibleBottom,
-  }
-}
-
-/**
- * Gets the center of the visible canvas in screen coordinates.
- */
-function getVisibleCanvasCenter(): { x: number; y: number } {
-  const style = getComputedStyle(document.documentElement)
-  const sidebarWidth = Number.parseInt(style.getPropertyValue('--sidebar-width') || '0', 10)
-  const panelWidth = Number.parseInt(style.getPropertyValue('--panel-width') || '0', 10)
-  const terminalHeight = Number.parseInt(style.getPropertyValue('--terminal-height') || '0', 10)
-
-  const flowContainer = document.querySelector('.react-flow')
-  if (!flowContainer) {
-    const visibleWidth = window.innerWidth - sidebarWidth - panelWidth
-    const visibleHeight = window.innerHeight - terminalHeight
-    return {
-      x: sidebarWidth + visibleWidth / 2,
-      y: visibleHeight / 2,
-    }
-  }
-
-  const rect = flowContainer.getBoundingClientRect()
-
-  // Calculate actual visible area in screen coordinates
-  const visibleLeft = Math.max(rect.left, sidebarWidth)
-  const visibleRight = Math.min(rect.right, window.innerWidth - panelWidth)
-  const visibleBottom = Math.min(rect.bottom, window.innerHeight - terminalHeight)
-
-  return {
-    x: (visibleLeft + visibleRight) / 2,
-    y: (rect.top + visibleBottom) / 2,
-  }
-}
-
-interface FitViewToBoundsOptions {
-  padding?: number
-  maxZoom?: number
-  minZoom?: number
-  duration?: number
-  nodes?: Node[]
-}
-
-/**
- * Hook providing canvas viewport utilities that account for sidebar, panel, and terminal overlays.
- */
-export function useCanvasViewport(reactFlowInstance: ReactFlowInstance | null) {
-  /**
-   * Gets the center of the visible canvas in flow coordinates.
-   */
-  const getViewportCenter = useCallback(() => {
-    if (!reactFlowInstance) {
-      return { x: 0, y: 0 }
-    }
-
-    const center = getVisibleCanvasCenter()
-    return reactFlowInstance.screenToFlowPosition(center)
-  }, [reactFlowInstance])
-
-  /**
-   * Fits the view to show all nodes within the visible canvas bounds,
-   * accounting for sidebar, panel, and terminal overlays.
-   * @param padding - Fraction of viewport to leave as margin (0.1 = 10% on each side)
-   */
-  const fitViewToBounds = useCallback(
-    (options: FitViewToBoundsOptions = {}) => {
-      if (!reactFlowInstance) return
-
-      const {
-        padding = 0.1,
-        maxZoom = 1,
-        minZoom = 0.1,
-        duration = 300,
-        nodes: targetNodes,
-      } = options
-
-      const nodes = targetNodes ?? reactFlowInstance.getNodes()
-      if (nodes.length === 0) {
-        return
-      }
-
-      const bounds = getVisibleCanvasBounds()
-
-      // Calculate node bounds
-      let minX = Number.POSITIVE_INFINITY
-      let minY = Number.POSITIVE_INFINITY
-      let maxX = Number.NEGATIVE_INFINITY
-      let maxY = Number.NEGATIVE_INFINITY
-
-      nodes.forEach((node) => {
-        const nodeWidth = node.width ?? 200
-        const nodeHeight = node.height ?? 100
-
-        minX = Math.min(minX, node.position.x)
-        minY = Math.min(minY, node.position.y)
-        maxX = Math.max(maxX, node.position.x + nodeWidth)
-        maxY = Math.max(maxY, node.position.y + nodeHeight)
-      })
-
-      const contentWidth = maxX - minX
-      const contentHeight = maxY - minY
-
-      // Apply padding as fraction of viewport (matches ReactFlow's fitView behavior)
-      const availableWidth = bounds.width * (1 - padding * 2)
-      const availableHeight = bounds.height * (1 - padding * 2)
-
-      // Calculate zoom to fit content in available area
-      const zoomX = availableWidth / contentWidth
-      const zoomY = availableHeight / contentHeight
-      const zoom = Math.max(minZoom, Math.min(maxZoom, Math.min(zoomX, zoomY)))
-
-      // Calculate center of content in flow coordinates
-      const contentCenterX = minX + contentWidth / 2
-      const contentCenterY = minY + contentHeight / 2
-
-      // Calculate viewport position to center content in visible area
-      // Account for sidebar offset on the left
-      const visibleCenterX = bounds.offsetLeft + bounds.width / 2
-      const visibleCenterY = bounds.height / 2
-
-      const x = visibleCenterX - contentCenterX * zoom
-      const y = visibleCenterY - contentCenterY * zoom
-
-      reactFlowInstance.setViewport({ x, y, zoom }, { duration })
-    },
-    [reactFlowInstance]
-  )
-
-  return {
-    getViewportCenter,
-    fitViewToBounds,
-    getVisibleCanvasBounds,
-  }
-}

apps/sim/lib/workflows/colors.ts

@@ -0,0 +1,75 @@
+/**
+ * Workflow color constants and utilities.
+ * Centralized location for all workflow color-related functionality.
+ *
+ * Colors are aligned with the brand color scheme:
+ * - Purple: brand-400 (#8e4cfb)
+ * - Blue: brand-secondary (#33b4ff)
+ * - Green: brand-tertiary (#22c55e)
+ * - Red: text-error (#ef4444)
+ * - Orange: warning (#f97316)
+ * - Pink: (#ec4899)
+ */
+
+/**
+ * Full list of available workflow colors with names.
+ * Used for color picker and random color assignment.
+ * Each base color has 6 vibrant shades optimized for both light and dark themes.
+ */
+export const WORKFLOW_COLORS = [
+  // Shade 1 - all base colors (brightest)
+  { color: '#c084fc', name: 'Purple 1' },
+  { color: '#5ed8ff', name: 'Blue 1' },
+  { color: '#4aea7f', name: 'Green 1' },
+  { color: '#ff6b6b', name: 'Red 1' },
+  { color: '#ff9642', name: 'Orange 1' },
+  { color: '#f472b6', name: 'Pink 1' },
+
+  // Shade 2 - all base colors
+  { color: '#a855f7', name: 'Purple 2' },
+  { color: '#38c8ff', name: 'Blue 2' },
+  { color: '#2ed96a', name: 'Green 2' },
+  { color: '#ff5555', name: 'Red 2' },
+  { color: '#ff8328', name: 'Orange 2' },
+  { color: '#ec4899', name: 'Pink 2' },
+
+  // Shade 3 - all base colors
+  { color: '#9333ea', name: 'Purple 3' },
+  { color: '#33b4ff', name: 'Blue 3' },
+  { color: '#22c55e', name: 'Green 3' },
+  { color: '#ef4444', name: 'Red 3' },
+  { color: '#f97316', name: 'Orange 3' },
+  { color: '#e11d89', name: 'Pink 3' },
+
+  // Shade 4 - all base colors
+  { color: '#8e4cfb', name: 'Purple 4' },
+  { color: '#1e9de8', name: 'Blue 4' },
+  { color: '#18b04c', name: 'Green 4' },
+  { color: '#dc3535', name: 'Red 4' },
+  { color: '#e56004', name: 'Orange 4' },
+  { color: '#d61c7a', name: 'Pink 4' },
+
+  // Shade 5 - all base colors
+  { color: '#7c3aed', name: 'Purple 5' },
+  { color: '#1486d1', name: 'Blue 5' },
+  { color: '#0e9b3a', name: 'Green 5' },
+  { color: '#c92626', name: 'Red 5' },
+  { color: '#d14d00', name: 'Orange 5' },
+  { color: '#be185d', name: 'Pink 5' },
+
+  // Shade 6 - all base colors (darkest)
+  { color: '#6322c9', name: 'Purple 6' },
+  { color: '#0a6fb8', name: 'Blue 6' },
+  { color: '#048628', name: 'Green 6' },
+  { color: '#b61717', name: 'Red 6' },
+  { color: '#bd3a00', name: 'Orange 6' },
+  { color: '#9d174d', name: 'Pink 6' },
+] as const
+
+/**
+ * Generates a random color for a new workflow
+ * @returns A hex color string from the available workflow colors
+ */
+export function getNextWorkflowColor(): string {
+  return WORKFLOW_COLORS[Math.floor(Math.random() * WORKFLOW_COLORS.length)].color
+}

apps/sim/stores/canvas-mode/index.ts

@@ -1,2 +0,0 @@
-export type { CanvasMode } from './store'
-export { useCanvasModeStore } from './store'

apps/sim/stores/canvas-mode/store.ts

@@ -1,22 +0,0 @@
-import { create } from 'zustand'
-import { devtools, persist } from 'zustand/middleware'
-
-export type CanvasMode = 'cursor' | 'hand'
-
-interface CanvasModeState {
-  mode: CanvasMode
-  setMode: (mode: CanvasMode) => void
-}
-
-export const useCanvasModeStore = create<CanvasModeState>()(
-  devtools(
-    persist(
-      (set) => ({
-        mode: 'hand',
-        setMode: (mode) => set({ mode }),
-      }),
-      { name: 'canvas-mode' }
-    ),
-    { name: 'canvas-mode-store' }
-  )
-)

apps/sim/stores/panel/copilot/store.ts

@@ -271,11 +271,31 @@ function resolveToolDisplay(
       if (cand?.text || cand?.icon) return { text: cand.text, icon: cand.icon }
     }
   } catch {}
-  // Humanized fallback as last resort
+  // Humanized fallback as last resort - include state verb for proper verb-noun styling
   try {
     if (toolName) {
-      const text = toolName.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
-      return { text, icon: undefined as any }
+      const formattedName = toolName.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+      // Add state verb prefix for verb-noun rendering in tool-call component
+      let stateVerb: string
+      switch (state) {
+        case ClientToolCallState.pending:
+        case ClientToolCallState.executing:
+          stateVerb = 'Executing'
+          break
+        case ClientToolCallState.success:
+          stateVerb = 'Executed'
+          break
+        case ClientToolCallState.error:
+          stateVerb = 'Failed'
+          break
+        case ClientToolCallState.rejected:
+        case ClientToolCallState.aborted:
+          stateVerb = 'Skipped'
+          break
+        default:
+          stateVerb = 'Executing'
+      }
+      return { text: `${stateVerb} ${formattedName}`, icon: undefined as any }
     }
   } catch {}
   return undefined
@@ -572,8 +592,30 @@ function stripTodoTags(text: string): string {
  */
 function deepClone<T>(obj: T): T {
   try {
-    return JSON.parse(JSON.stringify(obj))
-  } catch {
+    const json = JSON.stringify(obj)
+    if (!json || json === 'undefined') {
+      logger.warn('[deepClone] JSON.stringify returned empty for object', {
+        type: typeof obj,
+        isArray: Array.isArray(obj),
+        length: Array.isArray(obj) ? obj.length : undefined,
+      })
+      return obj
+    }
+    const parsed = JSON.parse(json)
+    // Verify the clone worked
+    if (Array.isArray(obj) && (!Array.isArray(parsed) || parsed.length !== obj.length)) {
+      logger.warn('[deepClone] Array clone mismatch', {
+        originalLength: obj.length,
+        clonedLength: Array.isArray(parsed) ? parsed.length : 'not array',
+      })
+    }
+    return parsed
+  } catch (err) {
+    logger.error('[deepClone] Failed to clone object', {
+      error: String(err),
+      type: typeof obj,
+      isArray: Array.isArray(obj),
+    })
     return obj
   }
 }
@@ -587,11 +629,18 @@ function serializeMessagesForDB(messages: CopilotMessage[]): any[] {
   const result = messages
     .map((msg) => {
       // Deep clone the entire message to ensure all nested data is serializable
+      // Ensure timestamp is always a string (Zod schema requires it)
+      let timestamp: string = msg.timestamp
+      if (typeof timestamp !== 'string') {
+        const ts = timestamp as any
+        timestamp = ts instanceof Date ? ts.toISOString() : new Date().toISOString()
+      }
+
       const serialized: any = {
         id: msg.id,
         role: msg.role,
         content: msg.content || '',
-        timestamp: msg.timestamp,
+        timestamp,
       }
 
       // Deep clone contentBlocks (the main rendering data)
@@ -3151,7 +3200,7 @@ export const useCopilotStore = create<CopilotStore>()(
               model: selectedModel,
             }
 
-            await fetch('/api/copilot/chat/update-messages', {
+            const saveResponse = await fetch('/api/copilot/chat/update-messages', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify({
@@ -3162,6 +3211,18 @@ export const useCopilotStore = create<CopilotStore>()(
               }),
             })
 
+            if (!saveResponse.ok) {
+              const errorText = await saveResponse.text().catch(() => '')
+              logger.error('[Stream Done] Failed to save messages to DB', {
+                status: saveResponse.status,
+                error: errorText,
+              })
+            } else {
+              logger.info('[Stream Done] Successfully saved messages to DB', {
+                messageCount: dbMessages.length,
+              })
+            }
+
             // Update local chat object with plan artifact and config
             set({
               currentChat: {
@@ -3170,7 +3231,9 @@ export const useCopilotStore = create<CopilotStore>()(
                 config,
               },
             })
-          } catch {}
+          } catch (err) {
+            logger.error('[Stream Done] Exception saving messages', { error: String(err) })
+          }
         }
 
         // Post copilot_stats record (input/output tokens can be null for now)

apps/sim/stores/settings/general/store.ts

@@ -14,7 +14,6 @@ const initialState: General = {
   isBillingUsageNotificationsEnabled: true,
   isErrorNotificationsEnabled: true,
   snapToGridSize: 0,
-  showActionBar: true,
 }
 
 export const useGeneralStore = create<GeneralStore>()(

apps/sim/stores/settings/general/types.ts

@@ -7,7 +7,6 @@ export interface General {
   isBillingUsageNotificationsEnabled: boolean
   isErrorNotificationsEnabled: boolean
   snapToGridSize: number
-  showActionBar: boolean
 }
 
 export interface GeneralStore extends General {
@@ -24,5 +23,4 @@ export type UserSettings = {
   isBillingUsageNotificationsEnabled: boolean
   errorNotificationsEnabled: boolean
   snapToGridSize: number
-  showActionBar: boolean
 }

apps/sim/stores/workflows/registry/store.ts

@@ -3,6 +3,7 @@ import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 import { withOptimisticUpdate } from '@/lib/core/utils/optimistic-update'
 import { DEFAULT_DUPLICATE_OFFSET } from '@/lib/workflows/autolayout/constants'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
 import { useVariablesStore } from '@/stores/panel/variables/store'
 import type {
@@ -11,7 +12,6 @@ import type {
   WorkflowMetadata,
   WorkflowRegistry,
 } from '@/stores/workflows/registry/types'
-import { getNextWorkflowColor } from '@/stores/workflows/registry/utils'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { getUniqueBlockName, regenerateBlockIds } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -97,11 +97,18 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
           return acc
         }, {})
 
-        set((state) => ({
-          workflows: mapped,
-          error: null,
-          hydration:
-            state.hydration.phase === 'state-loading'
+        set((state) => {
+          // Preserve hydration if workflow is loading or already ready and still exists
+          const shouldPreserveHydration =
+            state.hydration.phase === 'state-loading' ||
+            (state.hydration.phase === 'ready' &&
+              state.hydration.workflowId &&
+              mapped[state.hydration.workflowId])
+
+          return {
+            workflows: mapped,
+            error: null,
+            hydration: shouldPreserveHydration
               ? state.hydration
               : {
                   phase: 'metadata-ready',
@@ -110,7 +117,8 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
                   requestId: null,
                   error: null,
                 },
-        }))
+          }
+        })
       },
 
       failMetadataLoad: (workspaceId: string | null, errorMessage: string) => {

apps/sim/stores/workflows/registry/utils.ts

@@ -1,321 +1,410 @@
-// Available workflow colors
-export const WORKFLOW_COLORS = [
-  // Blues - vibrant blue tones
-  '#3972F6', // Blue (original)
-  '#2E5BF5', // Deeper Blue
-  '#1E4BF4', // Royal Blue
-  '#0D3BF3', // Deep Royal Blue
-
-  // Pinks/Magentas - vibrant pink and magenta tones
-  '#F639DD', // Pink/Magenta (original)
-  '#F529CF', // Deep Magenta
-  '#F749E7', // Light Magenta
-  '#F419C1', // Hot Pink
-
-  // Oranges/Yellows - vibrant orange and yellow tones
-  '#F6B539', // Orange/Yellow (original)
-  '#F5A529', // Deep Orange
-  '#F49519', // Burnt Orange
-  '#F38509', // Deep Burnt Orange
-
-  // Purples - vibrant purple tones
-  '#8139F6', // Purple (original)
-  '#7129F5', // Deep Purple
-  '#6119F4', // Royal Purple
-  '#5109F3', // Deep Royal Purple
-
-  // Greens - vibrant green tones
-  '#39B54A', // Green (original)
-  '#29A53A', // Deep Green
-  '#19952A', // Forest Green
-  '#09851A', // Deep Forest Green
-
-  // Teals/Cyans - vibrant teal and cyan tones
-  '#39B5AB', // Teal (original)
-  '#29A59B', // Deep Teal
-  '#19958B', // Dark Teal
-  '#09857B', // Deep Dark Teal
-
-  // Reds/Red-Oranges - vibrant red and red-orange tones
-  '#F66839', // Red/Orange (original)
-  '#F55829', // Deep Red-Orange
-  '#F44819', // Burnt Red
-  '#F33809', // Deep Burnt Red
-
-  // Additional vibrant colors for variety
-  // Corals - warm coral tones
-  '#F6397A', // Coral
-  '#F5296A', // Deep Coral
-  '#F7498A', // Light Coral
-
-  // Crimsons - deep red tones
-  '#DC143C', // Crimson
-  '#CC042C', // Deep Crimson
-  '#EC243C', // Light Crimson
-  '#BC003C', // Dark Crimson
-  '#FC343C', // Bright Crimson
-
-  // Mint - fresh green tones
-  '#00FF7F', // Mint Green
-  '#00EF6F', // Deep Mint
-  '#00DF5F', // Dark Mint
-
-  // Slate - blue-gray tones
-  '#6A5ACD', // Slate Blue
-  '#5A4ABD', // Deep Slate
-  '#4A3AAD', // Dark Slate
-
-  // Amber - warm orange-yellow tones
-  '#FFBF00', // Amber
-  '#EFAF00', // Deep Amber
-  '#DF9F00', // Dark Amber
-]
-
-// Generates a random color for a new workflow
-export function getNextWorkflowColor(): string {
-  // Simply return a random color from the available colors
-  return WORKFLOW_COLORS[Math.floor(Math.random() * WORKFLOW_COLORS.length)]
-}
-
-// Adjectives and nouns for creative workflow names
+// Cosmos-themed adjectives and nouns for creative workflow names (max 9 chars each)
 const ADJECTIVES = [
-  'Blazing',
-  'Crystal',
-  'Golden',
-  'Silver',
-  'Mystic',
-  'Cosmic',
-  'Electric',
-  'Frozen',
-  'Burning',
-  'Shining',
-  'Dancing',
-  'Flying',
-  'Roaring',
-  'Whispering',
-  'Glowing',
-  'Sparkling',
-  'Thunder',
-  'Lightning',
-  'Storm',
-  'Ocean',
-  'Mountain',
-  'Forest',
-  'Desert',
-  'Arctic',
-  'Tropical',
-  'Midnight',
-  'Dawn',
-  'Sunset',
-  'Rainbow',
-  'Diamond',
-  'Ruby',
-  'Emerald',
-  'Sapphire',
-  'Pearl',
-  'Jade',
-  'Amber',
-  'Coral',
-  'Ivory',
-  'Obsidian',
-  'Marble',
-  'Velvet',
-  'Silk',
-  'Satin',
-  'Linen',
-  'Cotton',
-  'Wool',
-  'Cashmere',
-  'Denim',
-  'Neon',
-  'Pastel',
-  'Vibrant',
-  'Muted',
-  'Bold',
-  'Subtle',
-  'Bright',
-  'Dark',
-  'Ancient',
-  'Modern',
-  'Eternal',
-  'Swift',
+  // Light & Luminosity
   'Radiant',
-  'Quantum',
+  'Luminous',
+  'Blazing',
+  'Glowing',
+  'Bright',
+  'Gleaming',
+  'Shining',
+  'Lustrous',
+  'Flaring',
+  'Vivid',
+  'Dazzling',
+  'Beaming',
+  'Brilliant',
+  'Lit',
+  'Ablaze',
+  // Celestial Descriptors
   'Stellar',
+  'Cosmic',
+  'Astral',
+  'Galactic',
+  'Nebular',
+  'Orbital',
   'Lunar',
   'Solar',
+  'Starlit',
+  'Heavenly',
   'Celestial',
-  'Ethereal',
-  'Phantom',
-  'Shadow',
+  'Sidereal',
+  'Planetary',
+  'Starry',
+  'Spacial',
+  // Scale & Magnitude
+  'Infinite',
+  'Vast',
+  'Boundless',
+  'Immense',
+  'Colossal',
+  'Titanic',
+  'Massive',
+  'Grand',
+  'Supreme',
+  'Ultimate',
+  'Epic',
+  'Enormous',
+  'Gigantic',
+  'Limitless',
+  'Total',
+  // Temporal
+  'Eternal',
+  'Ancient',
+  'Timeless',
+  'Enduring',
+  'Ageless',
+  'Immortal',
+  'Primal',
+  'Nascent',
+  'First',
+  'Elder',
+  'Lasting',
+  'Undying',
+  'Perpetual',
+  'Final',
+  'Prime',
+  // Movement & Energy
+  'Sidbuck',
+  'Swift',
+  'Drifting',
+  'Spinning',
+  'Surging',
+  'Pulsing',
+  'Soaring',
+  'Racing',
+  'Falling',
+  'Rising',
+  'Circling',
+  'Streaking',
+  'Hurtling',
+  'Floating',
+  'Orbiting',
+  'Spiraling',
+  // Colors of Space
   'Crimson',
   'Azure',
   'Violet',
-  'Scarlet',
-  'Magenta',
-  'Turquoise',
   'Indigo',
-  'Jade',
-  'Noble',
-  'Regal',
-  'Imperial',
-  'Royal',
-  'Supreme',
-  'Prime',
-  'Elite',
-  'Ultra',
-  'Mega',
-  'Hyper',
-  'Super',
-  'Neo',
-  'Cyber',
-  'Digital',
-  'Virtual',
-  'Sonic',
+  'Amber',
+  'Sapphire',
+  'Obsidian',
+  'Silver',
+  'Golden',
+  'Scarlet',
+  'Cobalt',
+  'Emerald',
+  'Ruby',
+  'Onyx',
+  'Ivory',
+  // Physical Properties
+  'Magnetic',
+  'Quantum',
+  'Thermal',
+  'Photonic',
+  'Ionic',
+  'Plasma',
+  'Spectral',
+  'Charged',
+  'Polar',
+  'Dense',
   'Atomic',
   'Nuclear',
-  'Laser',
-  'Plasma',
-  'Magnetic',
+  'Electric',
+  'Kinetic',
+  'Static',
+  // Atmosphere & Mystery
+  'Ethereal',
+  'Mystic',
+  'Phantom',
+  'Shadow',
+  'Silent',
+  'Distant',
+  'Hidden',
+  'Veiled',
+  'Fading',
+  'Arcane',
+  'Cryptic',
+  'Obscure',
+  'Dim',
+  'Dusky',
+  'Shrouded',
+  // Temperature & State
+  'Frozen',
+  'Burning',
+  'Molten',
+  'Volatile',
+  'Icy',
+  'Fiery',
+  'Cool',
+  'Warm',
+  'Cold',
+  'Hot',
+  'Searing',
+  'Frigid',
+  'Scalding',
+  'Chilled',
+  'Heated',
+  // Power & Force
+  'Mighty',
+  'Fierce',
+  'Raging',
+  'Wild',
+  'Serene',
+  'Tranquil',
+  'Harmonic',
+  'Resonant',
+  'Steady',
+  'Bold',
+  'Potent',
+  'Violent',
+  'Calm',
+  'Furious',
+  'Forceful',
+  // Texture & Form
+  'Smooth',
+  'Jagged',
+  'Fractured',
+  'Solid',
+  'Hollow',
+  'Curved',
+  'Sharp',
+  'Fluid',
+  'Rigid',
+  'Warped',
+  // Rare & Precious
+  'Noble',
+  'Pure',
+  'Rare',
+  'Pristine',
+  'Flawless',
+  'Unique',
+  'Exotic',
+  'Sacred',
+  'Divine',
+  'Hallowed',
 ]
 
 const NOUNS = [
-  'Phoenix',
-  'Dragon',
-  'Eagle',
-  'Wolf',
-  'Lion',
-  'Tiger',
-  'Panther',
-  'Falcon',
-  'Hawk',
-  'Raven',
-  'Swan',
-  'Dove',
-  'Butterfly',
-  'Firefly',
-  'Dragonfly',
-  'Hummingbird',
+  // Stars & Stellar Objects
+  'Star',
+  'Sun',
+  'Pulsar',
+  'Quasar',
+  'Magnetar',
+  'Nova',
+  'Supernova',
+  'Hypernova',
+  'Neutron',
+  'Dwarf',
+  'Giant',
+  'Protostar',
+  'Blazar',
+  'Cepheid',
+  'Binary',
+  // Galaxies & Clusters
   'Galaxy',
   'Nebula',
+  'Cluster',
+  'Void',
+  'Filament',
+  'Halo',
+  'Bulge',
+  'Spiral',
+  'Ellipse',
+  'Arm',
+  'Disk',
+  'Shell',
+  'Remnant',
+  'Cloud',
+  'Dust',
+  // Planets & Moons
+  'Planet',
+  'Moon',
+  'World',
+  'Exoplanet',
+  'Jovian',
+  'Titan',
+  'Europa',
+  'Io',
+  'Callisto',
+  'Ganymede',
+  'Triton',
+  'Phobos',
+  'Deimos',
+  'Enceladus',
+  'Charon',
+  // Small Bodies
   'Comet',
   'Meteor',
-  'Star',
-  'Moon',
-  'Sun',
-  'Planet',
   'Asteroid',
-  'Constellation',
-  'Aurora',
+  'Meteorite',
+  'Bolide',
+  'Fireball',
+  'Iceball',
+  'Plutino',
+  'Centaur',
+  'Trojan',
+  'Shard',
+  'Fragment',
+  'Debris',
+  'Rock',
+  'Ice',
+  // Constellations & Myths
+  'Orion',
+  'Andromeda',
+  'Perseus',
+  'Pegasus',
+  'Phoenix',
+  'Draco',
+  'Cygnus',
+  'Aquila',
+  'Lyra',
+  'Vega',
+  'Centaurus',
+  'Hydra',
+  'Sirius',
+  'Polaris',
+  'Altair',
+  // Celestial Phenomena
   'Eclipse',
-  'Solstice',
-  'Equinox',
-  'Horizon',
-  'Zenith',
-  'Castle',
-  'Tower',
-  'Bridge',
-  'Garden',
-  'Fountain',
-  'Palace',
-  'Temple',
-  'Cathedral',
-  'Lighthouse',
-  'Windmill',
-  'Waterfall',
-  'Canyon',
-  'Valley',
-  'Peak',
-  'Ridge',
-  'Cliff',
-  'Ocean',
-  'River',
-  'Lake',
-  'Stream',
-  'Pond',
-  'Bay',
-  'Cove',
-  'Harbor',
-  'Island',
-  'Peninsula',
-  'Archipelago',
-  'Atoll',
-  'Reef',
-  'Lagoon',
-  'Fjord',
-  'Delta',
-  'Cake',
-  'Cookie',
-  'Muffin',
-  'Cupcake',
-  'Pie',
-  'Tart',
-  'Brownie',
-  'Donut',
-  'Pancake',
-  'Waffle',
-  'Croissant',
-  'Bagel',
-  'Pretzel',
-  'Biscuit',
-  'Scone',
-  'Crumpet',
-  'Thunder',
-  'Blizzard',
-  'Tornado',
-  'Hurricane',
-  'Tsunami',
-  'Volcano',
-  'Glacier',
-  'Avalanche',
+  'Aurora',
+  'Corona',
+  'Flare',
+  'Storm',
   'Vortex',
-  'Tempest',
-  'Maelstrom',
-  'Whirlwind',
-  'Cyclone',
-  'Typhoon',
-  'Monsoon',
-  'Anvil',
-  'Hammer',
-  'Forge',
-  'Blade',
-  'Sword',
-  'Shield',
-  'Arrow',
-  'Spear',
-  'Crown',
-  'Throne',
-  'Scepter',
-  'Orb',
-  'Gem',
-  'Crystal',
-  'Prism',
-  'Spectrum',
-  'Beacon',
-  'Signal',
+  'Jet',
+  'Burst',
   'Pulse',
   'Wave',
-  'Surge',
-  'Tide',
+  'Ripple',
+  'Shimmer',
+  'Glow',
+  'Flash',
+  'Spark',
+  // Cosmic Structures
+  'Horizon',
+  'Zenith',
+  'Nadir',
+  'Apex',
+  'Meridian',
+  'Equinox',
+  'Solstice',
+  'Transit',
+  'Aphelion',
+  'Orbit',
+  'Axis',
+  'Pole',
+  'Equator',
+  'Limb',
+  'Arc',
+  // Space & Dimensions
+  'Cosmos',
+  'Universe',
+  'Dimension',
+  'Realm',
+  'Expanse',
+  'Infinity',
+  'Continuum',
+  'Manifold',
+  'Abyss',
+  'Ether',
+  'Vacuum',
+  'Space',
+  'Fabric',
+  'Plane',
+  'Domain',
+  // Energy & Particles
+  'Photon',
+  'Neutrino',
+  'Proton',
+  'Electron',
+  'Positron',
+  'Quark',
+  'Boson',
+  'Fermion',
+  'Tachyon',
+  'Graviton',
+  'Meson',
+  'Gluon',
+  'Lepton',
+  'Muon',
+  'Pion',
+  // Regions & Zones
+  'Sector',
+  'Quadrant',
+  'Zone',
+  'Belt',
+  'Ring',
+  'Field',
+  'Stream',
   'Current',
-  'Flow',
-  'Circuit',
-  'Node',
-  'Core',
-  'Matrix',
-  'Network',
-  'System',
-  'Engine',
-  'Reactor',
-  'Generator',
-  'Dynamo',
-  'Catalyst',
-  'Nexus',
-  'Portal',
+  'Wake',
+  'Region',
+  'Frontier',
+  'Border',
+  'Edge',
+  'Margin',
+  'Rim',
+  // Navigation & Discovery
+  'Beacon',
+  'Signal',
+  'Probe',
+  'Voyager',
+  'Pioneer',
+  'Seeker',
+  'Wanderer',
+  'Nomad',
+  'Drifter',
+  'Scout',
+  'Explorer',
+  'Ranger',
+  'Surveyor',
+  'Sentinel',
+  'Watcher',
+  // Portals & Passages
   'Gateway',
-  'Passage',
+  'Portal',
+  'Nexus',
+  'Bridge',
   'Conduit',
   'Channel',
+  'Passage',
+  'Rift',
+  'Warp',
+  'Fold',
+  'Tunnel',
+  'Crossing',
+  'Link',
+  'Path',
+  'Route',
+  // Core & Systems
+  'Core',
+  'Matrix',
+  'Lattice',
+  'Network',
+  'Circuit',
+  'Array',
+  'Reactor',
+  'Engine',
+  'Forge',
+  'Crucible',
+  'Hub',
+  'Node',
+  'Kernel',
+  'Center',
+  'Heart',
+  // Cosmic Objects
+  'Crater',
+  'Rift',
+  'Chasm',
+  'Canyon',
+  'Peak',
+  'Ridge',
+  'Basin',
+  'Plateau',
+  'Valley',
+  'Trench',
 ]
 
 /**

packages/db/migrations/0139_mushy_bishop.sql

@@ -1 +0,0 @@
-ALTER TABLE "settings" ADD COLUMN "show_action_bar" boolean DEFAULT true NOT NULL;

packages/db/migrations/meta/_journal.json

@@ -967,13 +967,6 @@
       "when": 1768027253808,
       "tag": "0138_faulty_gamma_corps",
       "breakpoints": true
-    },
-    {
-      "idx": 139,
-      "version": "7",
-      "when": 1768083992922,
-      "tag": "0139_mushy_bishop",
-      "breakpoints": true
     }
   ]
 }

packages/db/schema.ts

@@ -473,7 +473,6 @@ export const settings = pgTable('settings', {
 
   // Canvas preferences
   snapToGridSize: integer('snap_to_grid_size').notNull().default(0), // 0 = off, 10-50 = grid size
-  showActionBar: boolean('show_action_bar').notNull().default(true),
 
   // Copilot preferences - maps model_id to enabled/disabled boolean
   copilotEnabledModels: jsonb('copilot_enabled_models').notNull().default('{}'),