improvement: workflow, blocks, preview, avatars, output-select (#2840)

* improvement(workflow): ui/ux, refactors, optimizations

* improvement: blocks, preview, avatars

* improvement(output-select): ui

* update API endpoint picker to match output selector

* improvement: subflow ui/ux

---------

Co-authored-by: waleed <walif6@gmail.com>

Author: emir-karabeg

…ock/components/action-bar/action-bar.tsx …Id]/components/action-bar/action-bar.tsxapps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -100,6 +100,7 @@ export const ActionBar = memo(
     const isStartBlock = blockType === 'starter' || blockType === 'start_trigger'
     const isResponseBlock = blockType === 'response'
     const isNoteBlock = blockType === 'note'
+    const isSubflowBlock = blockType === 'loop' || blockType === 'parallel'
 
     /**
      * Get appropriate tooltip message based on disabled state
@@ -125,7 +126,7 @@ export const ActionBar = memo(
           'dark:border-transparent dark:bg-[var(--surface-4)]'
         )}
       >
-        {!isNoteBlock && (
+        {!isNoteBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -148,7 +149,7 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {!isStartBlock && !isResponseBlock && (
+        {!isStartBlock && !isResponseBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -169,7 +170,7 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {!isNoteBlock && (
+        {!isNoteBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button

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

@@ -331,13 +331,16 @@ export function OutputSelect({
   return (
     <Combobox
       size='sm'
-      className='!w-fit !py-[2px] [&>svg]:!ml-[4px] [&>svg]:!h-3 [&>svg]:!w-3 [&>span]:!text-[var(--text-secondary)] min-w-[100px] rounded-[6px] bg-transparent px-[9px] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-transparent [&>span]:text-center'
+      className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
       groups={comboboxGroups}
       options={[]}
       multiSelect
       multiSelectValues={normalizedSelectedValues}
       onMultiSelectChange={onOutputSelect}
       placeholder={selectedDisplayText}
+      overlayContent={
+        <span className='truncate text-[var(--text-primary)]'>{selectedDisplayText}</span>
+      }
       disabled={disabled || workflowOutputs.length === 0}
       align={align}
       maxHeight={maxHeight}

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

@@ -4,13 +4,13 @@ import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { ActionBar } from '../workflow-block/components'
 import type { WorkflowBlockProps } from '../workflow-block/types'
 
 interface NoteBlockNodeData extends WorkflowBlockProps {}

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

@@ -3,16 +3,12 @@
 import { useState } from 'react'
 import { Check, Clipboard } from 'lucide-react'
 import {
-  Badge,
   Button,
   ButtonGroup,
   ButtonGroupItem,
   Code,
+  Combobox,
   Label,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
@@ -602,48 +598,19 @@ console.log(limits);`
                   <span>{copied.async ? 'Copied' : 'Copy'}</span>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <div className='min-w-0 max-w-full'>
-                    <Badge
-                      variant='outline'
-                      className='flex-none cursor-pointer whitespace-nowrap rounded-[6px]'
-                    >
-                      <span className='whitespace-nowrap text-[12px]'>
-                        {getAsyncExampleTitle()}
-                      </span>
-                    </Badge>
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent
-                  side='bottom'
-                  align='end'
-                  sideOffset={4}
-                  maxHeight={300}
-                  maxWidth={300}
-                  minWidth={160}
-                  border
-                >
-                  <PopoverItem
-                    active={asyncExampleType === 'execute'}
-                    onClick={() => setAsyncExampleType('execute')}
-                  >
-                    Execute Job
-                  </PopoverItem>
-                  <PopoverItem
-                    active={asyncExampleType === 'status'}
-                    onClick={() => setAsyncExampleType('status')}
-                  >
-                    Check Status
-                  </PopoverItem>
-                  <PopoverItem
-                    active={asyncExampleType === 'rate-limits'}
-                    onClick={() => setAsyncExampleType('rate-limits')}
-                  >
-                    Rate Limits
-                  </PopoverItem>
-                </PopoverContent>
-              </Popover>
+              <Combobox
+                size='sm'
+                className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+                options={[
+                  { label: 'Execute Job', value: 'execute' },
+                  { label: 'Check Status', value: 'status' },
+                  { label: 'Rate Limits', value: 'rate-limits' },
+                ]}
+                value={asyncExampleType}
+                onChange={(value) => setAsyncExampleType(value as AsyncExampleType)}
+                align='end'
+                dropdownWidth={160}
+              />
             </div>
           </div>
           <Code.Viewer

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

@@ -334,7 +334,6 @@ export function GeneralDeploy({
                     }}
                     onPaneClick={() => setExpandedSelectedBlockId(null)}
                     selectedBlockId={expandedSelectedBlockId}
-                    lightweight
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (

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

@@ -1,12 +1,12 @@
 import { memo, useMemo, useRef } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
-import { Button, Trash } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { type DiffStatus, hasDiffStatus } from '@/lib/workflows/diff/types'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -18,11 +18,16 @@ import { usePanelEditorStore } from '@/stores/panel'
 const SubflowNodeStyles: React.FC = () => {
   return (
     <style jsx global>{`
-      /* Z-index management for subflow nodes */
+      /* Z-index management for subflow nodes - default behind blocks */
       .workflow-container .react-flow__node-subflowNode {
         z-index: -1 !important;
       }
 
+      /* Selected subflows appear above other subflows but below blocks (z-21) */
+      .workflow-container .react-flow__node-subflowNode:has([data-subflow-selected='true']) {
+        z-index: 10 !important;
+      }
+
       /* Drag-over states */
       .loop-node-drag-over,
       .parallel-node-drag-over {
@@ -63,8 +68,8 @@ export interface SubflowNodeData {
  */
 export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeData>) => {
   const { getNodes } = useReactFlow()
-  const { collaborativeBatchRemoveBlocks } = useCollaborativeWorkflow()
   const blockRef = useRef<HTMLDivElement>(null)
+  const userPermissions = useUserPermissionsContext()
 
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentWorkflow.getBlockById(id)
@@ -80,6 +85,8 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
   const isFocused = currentBlockId === id
 
+  const isPreviewSelected = data?.isPreviewSelected || false
+
   /**
    * Calculate the nesting level of this subflow node based on its parent hierarchy.
    * Used to apply appropriate styling for nested containers.
@@ -125,8 +132,6 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
     return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
   }
 
-  const isPreviewSelected = data?.isPreviewSelected || false
-
   /**
    * Determine the ring styling based on subflow state priority:
    * 1. Focused (selected in editor) or preview selected - blue ring
@@ -162,7 +167,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           data-node-id={id}
           data-type='subflowNode'
           data-nesting-level={nestingLevel}
+          data-subflow-selected={isFocused || isPreviewSelected}
         >
+          {!isPreview && (
+            <ActionBar blockId={id} blockType={data.kind} disabled={!userPermissions.canEdit} />
+          )}
+
           {/* Header Section */}
           <div
             className={cn(
@@ -180,18 +190,6 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
                 {blockName}
               </span>
             </div>
-            {!isPreview && (
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  collaborativeBatchRemoveBlocks([id])
-                }}
-                className='h-[14px] w-[14px] p-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100'
-              >
-                <Trash className='h-[14px] w-[14px]' />
-              </Button>
-            )}
           </div>
 
           {!isPreview && (

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

@@ -9,10 +9,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import {
-  ActionBar,
-  Connections,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import {
   useBlockProperties,
   useChildWorkflow,
@@ -934,8 +931,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
         )}
 
-        {shouldShowDefaultHandles && <Connections blockId={id} />}
-
         {shouldShowDefaultHandles && (
           <Handle
             type='target'

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

@@ -126,24 +126,24 @@ export function WorkflowControls() {
             </PopoverTrigger>
             <Tooltip.Content side='top'>{mode === 'hand' ? 'Mover' : 'Pointer'}</Tooltip.Content>
           </Tooltip.Root>
-          <PopoverContent align='center' side='top' sideOffset={8} maxWidth={100} minWidth={100}>
+          <PopoverContent side='top' sideOffset={8} maxWidth={100} minWidth={100}>
             <PopoverItem
               onClick={() => {
-                setMode('cursor')
+                setMode('hand')
                 setIsCanvasModeOpen(false)
               }}
             >
-              <Cursor className='h-3 w-3' />
-              <span>Pointer</span>
+              <Hand className='h-3 w-3' />
+              <span>Mover</span>
             </PopoverItem>
             <PopoverItem
               onClick={() => {
-                setMode('hand')
+                setMode('cursor')
                 setIsCanvasModeOpen(false)
               }}
             >
-              <Hand className='h-3 w-3' />
-              <span>Mover</span>
+              <Cursor className='h-3 w-3' />
+              <span>Pointer</span>
             </PopoverItem>
           </PopoverContent>
         </Popover>