diff --git a/apps/realtime/src/database/operations.ts b/apps/realtime/src/database/operations.ts
index 4e7baa85d78..c34df4dd45d 100644
--- a/apps/realtime/src/database/operations.ts
+++ b/apps/realtime/src/database/operations.ts
@@ -633,6 +633,33 @@ async function handleBlockOperationTx(
       break
     }
 
+    case BLOCK_OPERATIONS.UPDATE_DESCRIPTION: {
+      if (!payload.id || payload.description === undefined) {
+        throw new Error('Missing required fields for update description operation')
+      }
+
+      const updateResult = await tx
+        .update(workflowBlocks)
+        .set({
+          data: sql`jsonb_set(
+            coalesce(${workflowBlocks.data}, '{}'::jsonb),
+            '{description}',
+            ${JSON.stringify(payload.description)}::jsonb,
+            true
+          )`,
+          updatedAt: new Date(),
+        })
+        .where(and(eq(workflowBlocks.id, payload.id), eq(workflowBlocks.workflowId, workflowId)))
+        .returning({ id: workflowBlocks.id })
+
+      if (updateResult.length === 0) {
+        throw new Error(`Block ${payload.id} not found in workflow ${workflowId}`)
+      }
+
+      logger.debug(`Updated block description: ${payload.id}`)
+      break
+    }
+
     case BLOCK_OPERATIONS.TOGGLE_ENABLED: {
       if (!payload.id) {
         throw new Error('Missing block ID for toggle enabled operation')
diff --git a/apps/realtime/src/middleware/permissions.test.ts b/apps/realtime/src/middleware/permissions.test.ts
index 4edc05d795a..51e640f8345 100644
--- a/apps/realtime/src/middleware/permissions.test.ts
+++ b/apps/realtime/src/middleware/permissions.test.ts
@@ -274,6 +274,12 @@ describe('checkRolePermission', () => {
       { operation: 'update', adminAllowed: true, writeAllowed: true, readAllowed: false },
       { operation: 'update-position', adminAllowed: true, writeAllowed: true, readAllowed: false },
       { operation: 'update-name', adminAllowed: true, writeAllowed: true, readAllowed: false },
+      {
+        operation: 'update-description',
+        adminAllowed: true,
+        writeAllowed: true,
+        readAllowed: false,
+      },
       { operation: 'toggle-enabled', adminAllowed: true, writeAllowed: true, readAllowed: false },
       { operation: 'update-parent', adminAllowed: true, writeAllowed: true, readAllowed: false },
       {
diff --git a/apps/realtime/src/middleware/permissions.ts b/apps/realtime/src/middleware/permissions.ts
index e17678461a6..b004135d016 100644
--- a/apps/realtime/src/middleware/permissions.ts
+++ b/apps/realtime/src/middleware/permissions.ts
@@ -26,6 +26,7 @@ const WRITE_OPERATIONS: string[] = [
   // Block operations
   BLOCK_OPERATIONS.UPDATE_POSITION,
   BLOCK_OPERATIONS.UPDATE_NAME,
+  BLOCK_OPERATIONS.UPDATE_DESCRIPTION,
   BLOCK_OPERATIONS.TOGGLE_ENABLED,
   BLOCK_OPERATIONS.UPDATE_PARENT,
   BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE,
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index 21688e8470e..ada8f23adf9 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -6,12 +6,7 @@ import { BrandedLayout } from '@/components/branded-layout'
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
 import { generateBrandedMetadata, generateThemeCSS } from '@/ee/whitelabeling'
 import '@/app/_styles/globals.css'
-import {
-  isChatEnabled,
-  isHosted,
-  isReactGrabEnabled,
-  isReactScanEnabled,
-} from '@/lib/core/config/env-flags'
+import { isHosted, isReactGrabEnabled, isReactScanEnabled } from '@/lib/core/config/env-flags'
 import { DesktopUpdateGate } from '@/app/_shell/desktop-update-gate'
 import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
@@ -155,10 +150,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     }
 
                     var activeTab = panelState && panelState.activeTab;
-                    // A session that used the Chat tab before it was turned off still
-                    // has 'copilot' persisted; without this the CSS hides every tab
-                    // body and the panel paints empty.
-                    if (activeTab === 'copilot' && !${isChatEnabled}) {
+                    // Chat moved out of the right inspector. Migrate the legacy
+                    // persisted tab before first paint so the inspector opens on Blocks.
+                    if (activeTab === 'copilot') {
                       activeTab = 'toolbar';
                     }
                     if (activeTab) {
@@ -260,7 +254,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 
         {isHosted ? <PublicEnvScript /> : <RuntimePublicEnvScript disableNextScript />}
       </head>
-      <body className={`${season.variable} font-season`} suppressHydrationWarning>
+      <body
+        className={`${season.variable} font-season [--scrollbar-size:4px]`}
+        suppressHydrationWarning
+      >
         {/* Google Tag Manager (noscript) — hosted only */}
         {isHosted && (
           <noscript>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index ddee87cff6f..b8b941b0441 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -13,7 +13,15 @@ import {
   ButtonGroupItem,
   Checkbox,
   ChevronDown,
+  ChipCombobox,
+  ChipCopyInput,
   ChipDatePicker,
+  ChipInput,
+  ChipSelect,
+  ChipSwitch,
+  ChipTag,
+  ChipTextarea,
+  ChipTimePicker,
   Code,
   Combobox,
   Connections,
@@ -83,7 +91,7 @@ import {
   ZoomIn,
   ZoomOut,
 } from '@sim/emcn'
-import { ArrowLeft, Folder, Moon, Sun } from '@sim/emcn/icons'
+import { ArrowLeft, Folder, Moon, Search, Sun } from '@sim/emcn/icons'
 import { notFound, useRouter } from 'next/navigation'
 import { env, isTruthy } from '@/lib/core/config/env'
 
@@ -107,6 +115,31 @@ function VariantRow({ label, children }: { label: string; children: React.ReactN
   )
 }
 
+interface WorkflowFieldPreviewProps {
+  title: string
+  hint?: string
+  required?: boolean
+  children: React.ReactNode
+}
+
+function WorkflowFieldPreview({
+  title,
+  hint,
+  required = false,
+  children,
+}: WorkflowFieldPreviewProps) {
+  return (
+    <div className='flex flex-col gap-[9px] rounded-xl border border-[var(--border)] bg-[var(--surface-2)] p-4'>
+      <Label className='text-[var(--text-muted)] text-small'>
+        {title}
+        {required ? <span className='text-[var(--text-error)]'> *</span> : null}
+      </Label>
+      {children}
+      {hint ? <p className='text-[var(--text-muted)] text-caption'>{hint}</p> : null}
+    </div>
+  )
+}
+
 const SAMPLE_CODE = `function greet(name) {
   console.log("Hello, " + name);
   return { success: true };
@@ -122,6 +155,11 @@ const COMBOBOX_OPTIONS = [
   { label: 'Option 3', value: 'opt3' },
 ]
 
+const WORKFLOW_BOOLEAN_OPTIONS = [
+  { value: 'off', label: 'Off' },
+  { value: 'on', label: 'On' },
+] as const
+
 const DARK_MODE_EVENT = 'playground:dark-mode-change'
 
 const subscribeToDarkMode = (onStoreChange: () => void) => {
@@ -135,6 +173,15 @@ const getServerDarkModeSnapshot = () => false
 export default function PlaygroundPage() {
   const router = useRouter()
   const [comboboxValue, setComboboxValue] = useState('')
+  const [workflowTextValue, setWorkflowTextValue] = useState('claude-sonnet-5')
+  const [workflowDescription, setWorkflowDescription] = useState(
+    'Classify each support request and return the urgency, owner, and next action.'
+  )
+  const [workflowChoice, setWorkflowChoice] = useState('opt1')
+  const [workflowSearchChoice, setWorkflowSearchChoice] = useState('opt2')
+  const [workflowMultiChoices, setWorkflowMultiChoices] = useState<string[]>(['opt1', 'opt3'])
+  const [workflowToggle, setWorkflowToggle] = useState<'off' | 'on'>('off')
+  const [workflowTime, setWorkflowTime] = useState('09:30')
   const [switchValue, setSwitchValue] = useState(false)
   const [checkboxValue, setCheckboxValue] = useState(false)
   const [sliderValue, setSliderValue] = useState([50])
@@ -194,6 +241,148 @@ export default function PlaygroundPage() {
               </p>
             </div>
 
+            <Section title='Workflow editor field lab'>
+              <p className='max-w-2xl text-[var(--text-secondary)] text-sm'>
+                The canonical workflow field language. These examples exercise shared EMCN chrome
+                before workflow-specific adapters add variables, references, and generated content.
+              </p>
+              <div className='grid gap-4 md:grid-cols-2'>
+                <WorkflowFieldPreview title='Single-line input' required>
+                  <ChipInput
+                    value={workflowTextValue}
+                    onChange={(event) => setWorkflowTextValue(event.target.value)}
+                    placeholder='Enter a value'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview
+                  title='Validation state'
+                  hint='Required values use the component error state instead of custom borders.'
+                  required
+                >
+                  <ChipInput error placeholder='Enter your API key' />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview
+                  title='Adorned input'
+                  hint='Leading and trailing content is supplied through component props.'
+                >
+                  <ChipInput
+                    icon={Search}
+                    placeholder='Search available data'
+                    endAdornment={<ChipTag variant='field'>⌘K</ChipTag>}
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Multi-line input'>
+                  <ChipTextarea
+                    rows={4}
+                    value={workflowDescription}
+                    onChange={(event) => setWorkflowDescription(event.target.value)}
+                    placeholder='Describe what this block should do'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Disabled input' hint='Preview and unavailable states.'>
+                  <ChipInput value='Inherited from deployment settings' disabled />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview
+                  title='View-only values'
+                  hint='Read-only records stay legible instead of looking unavailable.'
+                >
+                  <div className='flex flex-col gap-2'>
+                    <ChipCopyInput value='https://api.sim.ai/webhooks/example' />
+                    <ChipTextarea
+                      value='This content is generated by the selected deployment.'
+                      rows={2}
+                      viewOnly
+                    />
+                  </div>
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Select'>
+                  <ChipSelect
+                    options={COMBOBOX_OPTIONS}
+                    value={workflowChoice}
+                    onChange={setWorkflowChoice}
+                    placeholder='Select an option'
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview
+                  title='Multi-select'
+                  hint='Selected values collapse into a stable trigger summary.'
+                >
+                  <ChipSelect
+                    options={COMBOBOX_OPTIONS}
+                    multiSelect
+                    multiSelectValues={workflowMultiChoices}
+                    onMultiSelectChange={setWorkflowMultiChoices}
+                    placeholder='Select options'
+                    searchable
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Searchable select'>
+                  <ChipCombobox
+                    options={COMBOBOX_OPTIONS}
+                    value={workflowSearchChoice}
+                    onChange={setWorkflowSearchChoice}
+                    placeholder='Search options'
+                    searchable
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview
+                  title='Loading select'
+                  hint='Async state is rendered by the picker rather than its consumer.'
+                >
+                  <ChipSelect
+                    options={[]}
+                    isLoading
+                    placeholder='Load options'
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Empty select'>
+                  <ChipSelect
+                    options={[]}
+                    emptyMessage='No matching options'
+                    placeholder='Choose a resource'
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Truncated value'>
+                  <ChipSelect
+                    options={[
+                      {
+                        value: 'long',
+                        label:
+                          'A deliberately long resource name that demonstrates trigger truncation',
+                      },
+                    ]}
+                    value='long'
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Boolean setting'>
+                  <ChipSwitch
+                    options={WORKFLOW_BOOLEAN_OPTIONS}
+                    value={workflowToggle}
+                    onChange={setWorkflowToggle}
+                    aria-label='Boolean setting'
+                  />
+                </WorkflowFieldPreview>
+                <WorkflowFieldPreview title='Time input'>
+                  <ChipTimePicker value={workflowTime} onChange={setWorkflowTime} fullWidth />
+                </WorkflowFieldPreview>
+              </div>
+            </Section>
+
             {/* Toast */}
             <Section title='Toast'>
               <VariantRow label='default'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index c053ec1b50e..a0a44de664e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -1,11 +1,14 @@
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useState } from 'react'
 import {
   Button,
+  Chip,
   cn,
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Duplicate,
   PlayOutline,
@@ -13,7 +16,17 @@ import {
   Trash,
   toast,
 } from '@sim/emcn'
-import { Ban, Circle, Lock, LogOut, Palette, Square, Unlock } from '@sim/emcn/icons'
+import {
+  Ban,
+  BookOpen,
+  Circle,
+  Lock,
+  LogOut,
+  MoreHorizontal,
+  Palette,
+  Square,
+  Unlock,
+} from '@sim/emcn/icons'
 import {
   DEFAULT_NOTE_COLOR,
   isNoteColor,
@@ -170,7 +183,9 @@ interface ActionBarProps {
   /** Whether the action bar is disabled */
   disabled?: boolean
   /** Places the actions inside the workflow card's border swell. */
-  variant?: 'floating' | 'swell'
+  variant?: 'floating' | 'swell' | 'inline'
+  /** Limits an inline action bar to the run control or overflow menu. */
+  inlineActions?: 'run' | 'menu'
   /** Whether this block is currently executing. */
   isRunning?: boolean
   /** Whether any block in the current workflow is executing. */
@@ -179,6 +194,8 @@ interface ActionBarProps {
   onNoteColorChange?: (color: NoteColor) => void
   /** Keeps the note and its swell selected while the portalled color menu is open. */
   onNoteColorMenuOpen?: () => void
+  /** Opens documentation for the selected block from the inline editor menu. */
+  onOpenDocs?: () => void
 }
 
 /**
@@ -193,11 +210,13 @@ export const ActionBar = memo(
     blockType,
     disabled = false,
     variant = 'floating',
+    inlineActions = 'run',
     isRunning = false,
     isWorkflowRunning = false,
     noteColor = DEFAULT_NOTE_COLOR,
     onNoteColorChange,
     onNoteColorMenuOpen,
+    onOpenDocs,
   }: ActionBarProps) {
     const {
       collaborativeBatchAddBlocks,
@@ -258,6 +277,7 @@ export const ActionBar = memo(
     const isResponseBlock = blockType === 'response'
     const isNoteBlock = blockType === 'note'
     const isInsideSubflow = parentId && (parentType === 'loop' || parentType === 'parallel')
+    const cantEnable = !isEnabled && isParentDisabled
 
     const { dependenciesSatisfied } = getRunFromBlockDependencyState(blockId, edges, snapshot)
     const canRunFromBlock =
@@ -273,6 +293,7 @@ export const ActionBar = memo(
     const canStopWorkflow = isWorkflowRunning && !disabled
     const canRunBlock =
       !isWorkflowRunning && canRunFromBlock && !disabled && !isLocked && !isParentLocked
+    const [isInlineMenuOpen, setIsInlineMenuOpen] = useState(false)
     const isSwell = variant === 'swell'
     const firstActionId: ActionId = isNoteBlock
       ? 'color'
@@ -400,6 +421,111 @@ export const ActionBar = memo(
       return defaultMessage
     }
 
+    if (variant === 'inline') {
+      if (inlineActions === 'menu') {
+        return (
+          <DropdownMenu onOpenChange={setIsInlineMenuOpen}>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Chip
+                    leftIcon={MoreHorizontal}
+                    className='size-[30px] justify-center p-0'
+                    aria-label='Block actions'
+                  />
+                </DropdownMenuTrigger>
+              </Tooltip.Trigger>
+              {!isInlineMenuOpen && <Tooltip.Content side='top'>Block actions</Tooltip.Content>}
+            </Tooltip.Root>
+            <DropdownMenuContent align='end' side='bottom'>
+              {!isNoteBlock && (
+                <DropdownMenuItem
+                  onSelect={() => collaborativeBatchToggleBlockEnabled([blockId])}
+                  disabled={
+                    isWorkflowRunning || disabled || isLocked || isParentLocked || cantEnable
+                  }
+                >
+                  {isEnabled ? <Circle /> : <Ban />}
+                  {isEnabled ? 'Disable' : 'Enable'}
+                </DropdownMenuItem>
+              )}
+              {userPermissions.canAdmin && (
+                <DropdownMenuItem
+                  onSelect={() => collaborativeBatchToggleLocked([blockId])}
+                  disabled={isWorkflowRunning || disabled || (isLocked && isParentLocked)}
+                >
+                  {isLocked ? <Unlock /> : <Lock />}
+                  {isLocked ? 'Unlock' : 'Lock'}
+                </DropdownMenuItem>
+              )}
+              {!isStartBlock && !isResponseBlock && (
+                <DropdownMenuItem
+                  onSelect={handleDuplicateBlock}
+                  disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
+                >
+                  <Duplicate />
+                  Duplicate
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem
+                onSelect={() => collaborativeBatchRemoveBlocks([blockId])}
+                disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
+              >
+                <Trash />
+                Delete
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onSelect={onOpenDocs} disabled={!onOpenDocs}>
+                <BookOpen />
+                Docs
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      }
+
+      return (
+        <Tooltip.Root preferAbove>
+          <Tooltip.Trigger asChild>
+            <span className='inline-flex'>
+              <Chip
+                variant='border'
+                leftIcon={isWorkflowRunning ? undefined : PlayOutline}
+                leftAdornment={
+                  isWorkflowRunning ? (
+                    <Square className='size-[12px] shrink-0 fill-current' strokeWidth={0} />
+                  ) : undefined
+                }
+                onClick={(event) => {
+                  event.stopPropagation()
+                  if (canStopWorkflow) {
+                    handleCancelExecution()
+                    return
+                  }
+                  if (canRunBlock) handleRunFromBlockClick()
+                }}
+                disabled={!canStopWorkflow && !canRunBlock}
+                aria-label={isWorkflowRunning ? 'Stop workflow' : 'Run block'}
+              >
+                {isWorkflowRunning ? 'Stop' : 'Run block'}
+              </Chip>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>
+            {isWorkflowRunning
+              ? getTooltipMessage('Stop')
+              : isLocked || isParentLocked
+                ? 'Block is locked'
+                : !isEnabled || isParentDisabled
+                  ? 'Block is disabled'
+                  : !dependenciesSatisfied
+                    ? 'Run previous blocks first'
+                    : getTooltipMessage('Run block')}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )
+    }
+
     return (
       <div
         data-workflow-action-bar-swell={isSwell ? '' : undefined}
@@ -743,11 +869,13 @@ export const ActionBar = memo(
       prevProps.blockType === nextProps.blockType &&
       prevProps.disabled === nextProps.disabled &&
       prevProps.variant === nextProps.variant &&
+      prevProps.inlineActions === nextProps.inlineActions &&
       prevProps.isRunning === nextProps.isRunning &&
       prevProps.isWorkflowRunning === nextProps.isWorkflowRunning &&
       prevProps.noteColor === nextProps.noteColor &&
       prevProps.onNoteColorChange === nextProps.onNoteColorChange &&
-      prevProps.onNoteColorMenuOpen === nextProps.onNoteColorMenuOpen
+      prevProps.onNoteColorMenuOpen === nextProps.onNoteColorMenuOpen &&
+      prevProps.onOpenDocs === nextProps.onOpenDocs
     )
   }
 )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.test.tsx
index 9469d62fd28..c268b2bf46e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.test.tsx
@@ -79,6 +79,14 @@ vi.mock('@sim/emcn', () => ({
   }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string }) => (
     <button {...props}>{children}</button>
   ),
+  Chip: ({
+    children,
+    className: _className,
+    variant: _variant,
+    ...props
+  }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string }) => (
+    <button {...props}>{children}</button>
+  ),
   cn: (...values: unknown[]) => values.filter(Boolean).join(' '),
   Input: ({
     ref,
@@ -239,7 +247,7 @@ function setInputValue(input: HTMLInputElement, value: string) {
 
 async function addMessageAndAttachment(message: string, file: File) {
   const messageInput = container.querySelector<HTMLInputElement>(
-    'input[placeholder="Type a message..."]'
+    'input[placeholder="Send a test message..."]'
   )
   const fileInput = container.querySelector<HTMLInputElement>('#floating-chat-file-input')
   if (!messageInput || !fileInput) throw new Error('Expected chat inputs')
@@ -342,7 +350,8 @@ describe('floating chat attachment uploads', () => {
     ])
     expect(container.textContent).not.toContain('diagram.png')
     expect(
-      container.querySelector<HTMLInputElement>('input[placeholder="Type a message..."]')?.value
+      container.querySelector<HTMLInputElement>('input[placeholder="Send a test message..."]')
+        ?.value
     ).toBe('')
     expect(mockRevokeObjectURL).toHaveBeenCalledWith('blob:diagram-preview')
   })
@@ -360,7 +369,8 @@ describe('floating chat attachment uploads', () => {
 
     expect(mockFileReader).not.toHaveBeenCalled()
     expect(
-      container.querySelector<HTMLInputElement>('input[placeholder="Type a message..."]')?.value
+      container.querySelector<HTMLInputElement>('input[placeholder="Send a test message..."]')
+        ?.value
     ).toBe('Summarize this report')
     expect(container.querySelector('img[alt="report.png"]')).not.toBeNull()
     expect(container.textContent).toContain(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 51a52dae612..806500d948e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -4,6 +4,7 @@ import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState }
 import {
   Badge,
   Button,
+  Chip,
   cn,
   Input,
   Popover,
@@ -13,6 +14,7 @@ import {
   PopoverTrigger,
   Tooltip,
   Trash,
+  thinScrollbarClass,
 } from '@sim/emcn'
 import { ArrowUp, CircleAlert, Download, MoreVertical, Paperclip, Square, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -893,7 +895,7 @@ export function Chat() {
     <div
       ref={preventZoomRef}
       role='dialog'
-      aria-label='Chat'
+      aria-label='Test chat'
       className='fixed z-30 flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-2.5 pt-0.5 pb-2'
       style={{
         left: `${actualPosition.x}px`,
@@ -912,36 +914,25 @@ export function Chat() {
         className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
-        <span className='flex-shrink-0 pr-0.5 text-[var(--text-primary)] text-sm'>Chat</span>
+        <span className='flex-shrink-0 pr-0.5 font-medium text-[var(--text-primary)] text-sm'>
+          Test chat
+        </span>
 
-        {/* Start inputs button and output selector - with max-width to prevent overflow */}
+        {/* Output selector - with max-width to prevent overflow */}
         <div
           className='ml-auto flex min-w-0 flex-shrink items-center gap-1.5'
           onMouseDown={(e) => e.stopPropagation()}
         >
-          {shouldShowConfigureStartInputsButton && (
-            <button
-              type='button'
-              className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-0.5 font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-active)]'
-              title='Add chat inputs to Start block'
-              onMouseDown={(e) => e.stopPropagation()}
-              onClick={(e) => {
-                e.stopPropagation()
-                handleConfigureStartInputs()
-              }}
-            >
-              <span className='whitespace-nowrap'>Add inputs</span>
-            </button>
-          )}
-
           <OutputSelect
             workflowId={activeWorkflowId}
             selectedOutputs={selectedOutputs}
             onOutputSelect={handleOutputSelection}
             disabled={!activeWorkflowId}
-            placeholder='Outputs'
+            placeholder='Reply with'
             align='end'
             maxHeight={180}
+            size='md'
+            className='min-w-[112px]'
           />
         </div>
 
@@ -998,14 +989,38 @@ export function Chat() {
 
       {/* Chat content */}
       <div className='flex flex-1 flex-col overflow-hidden'>
+        {shouldShowConfigureStartInputsButton && (
+          <div className='mb-1 flex flex-none items-start gap-2 rounded-lg bg-[var(--surface-2)] p-2'>
+            <div className='min-w-0 flex-1'>
+              <div className='font-medium text-[var(--text-body)] text-small'>
+                Set up test inputs
+              </div>
+              <div className='mt-0.5 text-[var(--text-secondary)] text-xs leading-relaxed'>
+                Add message, conversation, and file fields to the Start block.
+              </div>
+            </div>
+            <Chip className='flex-none' variant='border' onClick={handleConfigureStartInputs}>
+              Configure
+            </Chip>
+          </div>
+        )}
+
         {/* Messages */}
         <div className='flex-1 overflow-hidden'>
           {workflowMessages.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
-              No messages yet
+            <div className='flex h-full flex-col items-center justify-center gap-1 px-4 text-center'>
+              <div className='font-medium text-[var(--text-body)] text-small'>
+                Test this workflow
+              </div>
+              <div className='max-w-[240px] text-[var(--text-secondary)] text-xs leading-relaxed'>
+                Messages run the current draft and may trigger connected actions.
+              </div>
             </div>
           ) : (
-            <div ref={scrollAreaRef} className='h-full overflow-y-auto overflow-x-hidden'>
+            <div
+              ref={scrollAreaRef}
+              className={cn('h-full overflow-y-auto overflow-x-hidden', thinScrollbarClass)}
+            >
               <div className='w-full max-w-full space-y-2 overflow-hidden py-2'>
                 {workflowMessages.map((message) => (
                   <ChatMessage key={message.id} message={message} />
@@ -1030,7 +1045,7 @@ export function Chat() {
                 <div className='flex items-start gap-2'>
                   <CircleAlert className='mt-0.5 size-3 shrink-0 text-[var(--text-error)]' />
                   <div className='flex-1'>
-                    <div className='mb-1 text-[var(--text-error)] text-caption'>
+                    <div className='mb-1 font-medium text-[var(--text-error)] text-caption'>
                       File upload error
                     </div>
                     <div className='space-y-1'>
@@ -1071,7 +1086,7 @@ export function Chat() {
                   setHistoryIndex(-1)
                 }}
                 onKeyDown={handleKeyPress}
-                placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
+                placeholder={isDragOver ? 'Drop files here...' : 'Send a test message...'}
                 className='w-full border-0 bg-transparent pr-[56px] pl-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 disabled={!activeWorkflowId}
               />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index d06f205010f..18b1095061f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -1,16 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import {
-  Button,
-  ButtonGroup,
-  ButtonGroupItem,
-  Code,
-  Combobox,
-  Label,
-  Skeleton,
-  Tooltip,
-} from '@sim/emcn'
+import { Chip, ChipDropdown, ChipSwitch, Code, Label, Skeleton, Tooltip } from '@sim/emcn'
 import { Check, Clipboard } from '@sim/emcn/icons'
 import {
   AGENT_STREAM_PROTOCOL_HEADER_LABEL,
@@ -55,6 +46,17 @@ const LANGUAGE_LABELS: Record<CodeLanguage, string> = {
   typescript: 'TypeScript',
 }
 
+const LANGUAGE_OPTIONS = (Object.keys(LANGUAGE_LABELS) as CodeLanguage[]).map((value) => ({
+  value,
+  label: LANGUAGE_LABELS[value],
+}))
+
+const ASYNC_EXAMPLE_OPTIONS = [
+  { label: 'Execute Job', value: 'execute' },
+  { label: 'Check Status', value: 'status' },
+  { label: 'Rate Limits', value: 'rate-limits' },
+] as const
+
 const LANGUAGE_SYNTAX: Record<CodeLanguage, 'python' | 'javascript' | 'json'> = {
   curl: 'javascript',
   python: 'python',
@@ -416,19 +418,6 @@ console.log(limits);`
     }
   }
 
-  const getAsyncExampleTitle = () => {
-    switch (asyncExampleType) {
-      case 'execute':
-        return 'Start Execution'
-      case 'status':
-        return 'Check Status'
-      case 'rate-limits':
-        return 'Usage Limits'
-      default:
-        return 'Start Execution'
-    }
-  }
-
   const handleCopy = (key: keyof CopiedState, value: string) => {
     navigator.clipboard.writeText(value)
     setCopied((prev) => ({ ...prev, [key]: true }))
@@ -460,13 +449,13 @@ console.log(limits);`
         <div className='mb-[6.5px] flex items-center justify-between'>
           <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>Language</Label>
         </div>
-        <ButtonGroup value={language} onValueChange={(val) => setLanguage(val as CodeLanguage)}>
-          {(Object.keys(LANGUAGE_LABELS) as CodeLanguage[]).map((lang) => (
-            <ButtonGroupItem key={lang} value={lang}>
-              {LANGUAGE_LABELS[lang]}
-            </ButtonGroupItem>
-          ))}
-        </ButtonGroup>
+        <ChipSwitch
+          value={language}
+          onChange={setLanguage}
+          options={LANGUAGE_OPTIONS}
+          aria-label='Code language'
+          size='compact'
+        />
       </div>
 
       <div>
@@ -474,14 +463,12 @@ console.log(limits);`
           <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>Run workflow</Label>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
+              <Chip
+                leftIcon={copied.sync ? Check : Clipboard}
                 onClick={() => handleCopy('sync', getSyncCommand())}
-                aria-label='Copy command'
-                className='!p-1.5 -my-1.5'
-              >
-                {copied.sync ? <Check className='size-3' /> : <Clipboard className='size-3' />}
-              </Button>
+                aria-label={copied.sync ? 'Command copied' : 'Copy command'}
+                className='-my-1.5'
+              />
             </Tooltip.Trigger>
             <Tooltip.Content>
               <span>{copied.sync ? 'Copied' : 'Copy'}</span>
@@ -504,14 +491,12 @@ console.log(limits);`
           <div className='flex items-center gap-1.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
+                <Chip
+                  leftIcon={copied.stream ? Check : Clipboard}
                   onClick={() => handleCopy('stream', getStreamCommand())}
-                  aria-label='Copy command'
-                  className='!p-1.5 -my-1.5'
-                >
-                  {copied.stream ? <Check className='size-3' /> : <Clipboard className='size-3' />}
-                </Button>
+                  aria-label={copied.stream ? 'Command copied' : 'Copy command'}
+                  className='-my-1.5'
+                />
               </Tooltip.Trigger>
               <Tooltip.Content>
                 <span>{copied.stream ? 'Copied' : 'Copy'}</span>
@@ -524,6 +509,8 @@ console.log(limits);`
               placeholder='Select outputs'
               valueMode='label'
               align='end'
+              size='md'
+              className='w-[140px]'
             />
           </div>
         </div>
@@ -544,31 +531,23 @@ console.log(limits);`
             <div className='flex items-center gap-1.5'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
+                  <Chip
+                    leftIcon={copied.async ? Check : Clipboard}
                     onClick={() => handleCopy('async', getAsyncCommand())}
-                    aria-label='Copy command'
-                    className='!p-1.5 -my-1.5'
-                  >
-                    {copied.async ? <Check className='size-3' /> : <Clipboard className='size-3' />}
-                  </Button>
+                    aria-label={copied.async ? 'Command copied' : 'Copy command'}
+                    className='-my-1.5'
+                  />
                 </Tooltip.Trigger>
                 <Tooltip.Content>
                   <span>{copied.async ? 'Copied' : 'Copy'}</span>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <Combobox
-                size='sm'
-                className='!w-fit !py-0.5 min-w-[100px] rounded-md px-[9px]'
-                options={[
-                  { label: 'Start Execution', value: 'execute' },
-                  { label: 'Check Status', value: 'status' },
-                  { label: 'Usage Limits', value: 'rate-limits' },
-                ]}
+              <ChipDropdown
+                className='w-[140px]'
+                options={ASYNC_EXAMPLE_OPTIONS}
                 value={asyncExampleType}
                 onChange={(value) => setAsyncExampleType(value as AsyncExampleType)}
                 align='end'
-                dropdownWidth={160}
               />
             </div>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 510e32667d5..ff10c35aa65 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -2,18 +2,14 @@
 
 import { useEffect, useRef, useState } from 'react'
 import {
-  ButtonGroup,
-  ButtonGroupItem,
   ChipConfirmModal,
   ChipEmailsInput,
   ChipInput,
-  cn,
-  Input,
+  ChipSwitch,
+  ChipTextarea,
   Label,
   Loader,
   Skeleton,
-  Switch,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { Check, TriangleAlert } from '@sim/emcn/icons'
@@ -47,6 +43,10 @@ import {
 const logger = createLogger('ChatDeploy')
 
 const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
+const BOOLEAN_OPTIONS = [
+  { value: 'off', label: 'Off' },
+  { value: 'on', label: 'On' },
+] as const
 
 interface ChatDeployProps {
   workflowId: string
@@ -402,11 +402,13 @@ export function ChatDeploy({
                 Include thinking
               </Label>
             </div>
-            <Switch
-              checked={formData.includeThinking}
+            <ChipSwitch
+              value={formData.includeThinking ? 'on' : 'off'}
+              options={BOOLEAN_OPTIONS}
               disabled={chatSubmitting}
-              onCheckedChange={(checked) => updateField('includeThinking', checked)}
+              onChange={(value) => updateField('includeThinking', value === 'on')}
               aria-label='Include thinking'
+              size='compact'
             />
           </div>
 
@@ -416,11 +418,13 @@ export function ChatDeploy({
                 Include tool calls
               </Label>
             </div>
-            <Switch
-              checked={formData.includeToolCalls}
+            <ChipSwitch
+              value={formData.includeToolCalls ? 'on' : 'off'}
+              options={BOOLEAN_OPTIONS}
               disabled={chatSubmitting}
-              onCheckedChange={(checked) => updateField('includeToolCalls', checked)}
+              onChange={(value) => updateField('includeToolCalls', value === 'on')}
               aria-label='Include tool calls'
+              size='compact'
             />
           </div>
 
@@ -446,7 +450,7 @@ export function ChatDeploy({
             >
               Welcome message
             </Label>
-            <Textarea
+            <ChipTextarea
               id='welcomeMessage'
               placeholder='Enter a welcome message for your chat'
               value={formData.welcomeMessage}
@@ -589,50 +593,35 @@ function IdentifierInput({
       >
         URL
       </Label>
-      <div
-        className={cn(
-          'relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)]',
-          error && 'border-[var(--text-error)]'
-        )}
-      >
-        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 text-[var(--text-secondary)] text-sm'>
-          {getDomainPrefix()}
-        </div>
-        <div className='relative flex-1'>
-          <Input
-            id='chat-url'
-            placeholder='my-chat'
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            required
-            disabled={disabled}
-            className={cn(
-              'rounded-none border-0 bg-transparent pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
-              (isChecking || (isValid && value)) && 'pr-8'
-            )}
-          />
-          {isChecking ? (
-            <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-              <Loader className='size-4 text-[var(--text-tertiary)]' animate />
-            </div>
-          ) : (
-            isValid &&
-            value &&
-            value !== originalIdentifier && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-                    <Check className='size-4 text-[var(--brand-accent)]' />
-                  </div>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Name is available</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )
-          )}
-        </div>
-      </div>
+      <ChipInput
+        id='chat-url'
+        placeholder='my-chat'
+        value={value}
+        onChange={(event) => handleChange(event.target.value)}
+        required
+        disabled={disabled}
+        error={Boolean(error)}
+        aria-invalid={Boolean(error)}
+        startAdornment={
+          <span className='whitespace-nowrap text-[var(--text-muted)] text-sm'>
+            {getDomainPrefix()}
+          </span>
+        }
+        endAdornment={
+          isChecking ? (
+            <Loader className='size-[14px] shrink-0 text-[var(--text-icon)]' animate />
+          ) : isValid && value && value !== originalIdentifier ? (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <span className='shrink-0' aria-label='Name is available'>
+                  <Check className='size-[14px] text-[var(--brand-accent)]' />
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content>Name is available</Tooltip.Content>
+            </Tooltip.Root>
+          ) : null
+        }
+      />
       {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
       <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
         {isEditingExisting && value ? (
@@ -729,17 +718,14 @@ function AuthSelector({
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           Access control
         </Label>
-        <ButtonGroup
+        <ChipSwitch
           value={authType}
-          onValueChange={(val) => onAuthTypeChange(val as AuthType)}
+          onChange={onAuthTypeChange}
+          options={authOptions.map((type) => ({ value: type, label: AUTH_LABELS[type] }))}
           disabled={disabled}
-        >
-          {authOptions.map((type) => (
-            <ButtonGroupItem key={type} value={type}>
-              {AUTH_LABELS[type]}
-            </ButtonGroupItem>
-          ))}
-        </ButtonGroup>
+          aria-label='Access control'
+          size='compact'
+        />
       </div>
 
       {authType === 'password' && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
index 70304e621ab..1083c0e6dbe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -2,17 +2,16 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
-  Badge,
-  ButtonGroup,
-  ButtonGroupItem,
   ChipConfirmModal,
+  ChipInput,
   ChipModal,
   ChipModalBody,
   ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  Input,
+  ChipSwitch,
+  ChipTag,
   Label,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -30,6 +29,11 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 type NormalizedField = InputFormatField & { name: string }
 
+const ACCESS_OPTIONS = [
+  { value: 'api_key', label: 'API Key' },
+  { value: 'public', label: 'Public' },
+] as const
+
 interface ApiInfoModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -218,13 +222,13 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
 
           {!isPublicApiDisabled && (
             <ChipModalField type='custom' title='Access'>
-              <ButtonGroup
+              <ChipSwitch
                 value={accessMode}
-                onValueChange={(val) => setAccessMode(val as 'api_key' | 'public')}
-              >
-                <ButtonGroupItem value='api_key'>API Key</ButtonGroupItem>
-                <ButtonGroupItem value='public'>Public</ButtonGroupItem>
-              </ButtonGroup>
+                onChange={setAccessMode}
+                options={ACCESS_OPTIONS}
+                aria-label='API access'
+                size='compact'
+              />
               <p className='mt-1 text-[var(--text-secondary)] text-caption'>
                 {accessMode === 'public'
                   ? 'Anyone can call this API without authentication. You will be billed for all usage.'
@@ -246,15 +250,13 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                         <span className='block truncate text-[var(--text-tertiary)] text-sm'>
                           {field.name}
                         </span>
-                        <Badge variant='type' size='sm'>
-                          {field.type || 'string'}
-                        </Badge>
+                        <ChipTag variant='field'>{field.type || 'string'}</ChipTag>
                       </div>
                     </div>
                     <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
                       <div className='flex flex-col gap-1.5'>
                         <Label className='text-small'>Description</Label>
-                        <Input
+                        <ChipInput
                           value={paramDescriptions[field.name] || ''}
                           onChange={(e) => handleParamDescriptionChange(field.name, e.target.value)}
                           placeholder={`Enter description for ${field.name}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index d3ca82aac63..3b22120c5eb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -2,62 +2,54 @@
 
 import { useEffect, useRef, useState } from 'react'
 import {
-  Button,
-  cn,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
+  Chip,
+  ChipInput,
+  ChipTag,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Skeleton,
-  Tooltip,
 } from '@sim/emcn'
-import { FileText, MoreVertical, Pencil, RefreshCw, SendToBack } from '@sim/emcn/icons'
-import { formatDateTime } from '@sim/utils/formatting'
+import {
+  Circle,
+  CircleAlert,
+  CirclePause,
+  CornerUpRight,
+  FileText,
+  MoreHorizontal,
+  Pencil,
+  RefreshCw,
+  SendToBack,
+} from '@sim/emcn/icons'
+import { formatDateTime, formatRelativeTime } from '@sim/utils/formatting'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { VersionDescriptionModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal'
 import { formatVersionLabel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/format-version-label'
 import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
-import { VersionDescriptionModal } from './version-description-modal'
-
-const HEADER_TEXT_CLASS = 'text-[var(--text-tertiary)] text-caption'
-const ROW_TEXT_CLASS = 'text-[var(--text-primary)] text-caption'
-const COLUMN_BASE_CLASS = 'flex-shrink-0'
-
-const COLUMN_WIDTHS = {
-  VERSION: 'w-[180px]',
-  DEPLOYED_BY: 'w-[140px]',
-  TIMESTAMP: 'flex-1',
-  ACTIONS: 'w-[56px]',
-} as const
 
 interface VersionsProps {
   workflowId: string | null
   versions: WorkflowDeploymentVersionResponse[]
   versionsLoading: boolean
   isPromotingVersion: boolean
-  selectedVersion: number | null
-  onSelectVersion: (version: number | null) => void
+  onSelectVersion: (version: number) => void
   onPromoteToLive: (version: number) => void
   onLoadDeployment: (version: number) => void
 }
 
-/**
- * Displays a list of workflow deployment versions with actions
- * for viewing, promoting to live, renaming, and loading deployments.
- */
+/** Displays compact deployment history with detail and management actions. */
 export function Versions({
   workflowId,
   versions,
   versionsLoading,
   isPromotingVersion,
-  selectedVersion,
   onSelectVersion,
   onPromoteToLive,
   onLoadDeployment,
 }: VersionsProps) {
   const [editingVersion, setEditingVersion] = useState<number | null>(null)
   const [editValue, setEditValue] = useState('')
-  const [openDropdown, setOpenDropdown] = useState<number | null>(null)
   const [descriptionModalVersion, setDescriptionModalVersion] = useState<number | null>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -71,21 +63,18 @@ export function Versions({
   }, [editingVersion])
 
   const handleStartRename = (version: number, currentName: string | null | undefined) => {
-    setOpenDropdown(null)
     setEditingVersion(version)
     setEditValue(currentName || `v${version}`)
   }
 
   const handleSaveRename = (version: number) => {
     if (renameMutation.isPending) return
-    // Clearing the name is a no-op — the version number is always the canonical reference.
     if (!workflowId || !editValue.trim()) {
       setEditingVersion(null)
       return
     }
 
-    const currentVersion = versions.find((v) => v.version === version)
-    // Compare against the `v{n}` fallback so re-submitting the displayed token saves no redundant name.
+    const currentVersion = versions.find((candidate) => candidate.version === version)
     const currentName = currentVersion?.name || `v${version}`
 
     if (editValue.trim() === currentName) {
@@ -100,9 +89,7 @@ export function Versions({
         name: editValue.trim(),
       },
       {
-        onSuccess: () => {
-          setEditingVersion(null)
-        },
+        onSuccess: () => setEditingVersion(null),
       }
     )
   }
@@ -112,289 +99,171 @@ export function Versions({
     setEditValue('')
   }
 
-  const handleRowClick = (version: number) => {
-    if (editingVersion === version) return
-    onSelectVersion(selectedVersion === version ? null : version)
-  }
-
-  const handlePromote = (version: number) => {
-    if (isPromotingVersion) return
-    setOpenDropdown(null)
-    onPromoteToLive(version)
-  }
-
-  const handleLoadDeployment = (version: number) => {
-    setOpenDropdown(null)
-    onLoadDeployment(version)
-  }
-
-  const handleOpenDescriptionModal = (version: number) => {
-    setOpenDropdown(null)
-    setDescriptionModalVersion(version)
-  }
-
   const descriptionModalVersionData =
-    descriptionModalVersion !== null
-      ? versions.find((v) => v.version === descriptionModalVersion)
-      : null
-
-  if (versionsLoading && versions.length === 0) {
-    return (
-      <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
-        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
-          <div className={cn(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
-            <Skeleton className='h-[12px] w-[50px]' />
-          </div>
-          <div className={cn(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
-            <Skeleton className='h-[12px] w-[76px]' />
-          </div>
-          <div className={cn(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
-            <Skeleton className='h-[12px] w-[68px]' />
-          </div>
-          <div className={cn(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
-        </div>
-        <div className='bg-[var(--surface-2)]'>
-          {[0, 1].map((i) => (
-            <div key={i} className='flex h-[36px] items-center px-4'>
-              <div className={cn(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
-                <div className='flex items-center gap-4'>
-                  <Skeleton className='size-[6px] rounded-xs' />
-                  <Skeleton className='h-[12px] w-[60px]' />
-                </div>
-              </div>
-              <div className={cn(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
-                <Skeleton className='h-[12px] w-[80px]' />
-              </div>
-              <div className={cn(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
-                <Skeleton className='h-[12px] w-[160px]' />
-              </div>
-              <div
-                className={cn(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end gap-0.5')}
-              >
-                <Skeleton className='size-[20px] rounded-sm' />
-                <Skeleton className='size-[20px] rounded-sm' />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (versions.length === 0) {
-    return (
-      <div className='flex h-[120px] items-center justify-center rounded-sm border border-[var(--border)] text-[var(--text-placeholder)] text-small'>
-        No deployments yet
-      </div>
-    )
-  }
+    descriptionModalVersion === null
+      ? null
+      : versions.find((version) => version.version === descriptionModalVersion)
+  const orderedVersions = [...versions].sort((first, second) => {
+    if (first.isActive !== second.isActive) return first.isActive ? -1 : 1
+    return second.version - first.version
+  })
 
   return (
-    <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
-      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
-        <div className={cn(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
-          <span className={HEADER_TEXT_CLASS}>Version</span>
-        </div>
-        <div className={cn(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
-          <span className={HEADER_TEXT_CLASS}>Deployed by</span>
-        </div>
-        <div className={cn(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
-          <span className={HEADER_TEXT_CLASS}>Timestamp</span>
-        </div>
-        <div className={cn(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
-      </div>
+    <div className='relative'>
+      {(versions.length > 0 || versionsLoading) && (
+        <div
+          aria-hidden='true'
+          className='absolute top-[18px] bottom-9 left-[13px] w-px bg-[var(--border)]'
+        />
+      )}
+
+      {versionsLoading &&
+        versions.length === 0 &&
+        [0, 1].map((index) => (
+          <div key={index} className='relative flex min-h-[54px] items-start gap-1'>
+            <span className='relative z-10 mt-1 flex size-7 shrink-0 items-center justify-center bg-[var(--popover-surface)]'>
+              <Skeleton className='size-[14px] rounded-full' />
+            </span>
+            <div className='min-w-0 flex-1 space-y-1.5 px-2 py-2'>
+              <Skeleton className='h-3 w-24' />
+              <Skeleton className='h-2.5 w-40' />
+            </div>
+            <Skeleton className='mt-1 size-7 rounded-sm' />
+          </div>
+        ))}
 
-      <div className='bg-[var(--surface-2)]'>
-        {versions.map((v) => {
-          const isSelected = selectedVersion === v.version
-          const operationStatus =
-            !v.isActive && v.latestOperationStatus !== 'active' ? v.latestOperationStatus : null
-          const isOperationPending =
-            operationStatus === 'preparing' || operationStatus === 'activating'
-          /** Exactly one parenthetical per row; selection already highlights the row. */
-          const rowLabel = v.isActive
-            ? 'live'
-            : isOperationPending
-              ? 'pending'
-              : operationStatus === 'failed'
-                ? 'failed'
-                : isSelected
-                  ? 'selected'
-                  : null
+      {orderedVersions.map((version) => {
+        const operationStatus =
+          !version.isActive && version.latestOperationStatus !== 'active'
+            ? version.latestOperationStatus
+            : null
+        const isOperationPending =
+          operationStatus === 'preparing' || operationStatus === 'activating'
+        const TimelineIcon = version.isActive
+          ? CornerUpRight
+          : isOperationPending
+            ? CirclePause
+            : operationStatus === 'failed'
+              ? CircleAlert
+              : Circle
+        const deploymentVerb = version.isActive ? 'Promoted' : 'Deployed'
+        const versionLabel = formatVersionLabel(version.version, version.name)
 
-          return (
-            <div
-              key={v.id}
-              role='button'
-              tabIndex={0}
-              className={cn(
-                'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
-                isSelected
-                  ? 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] hover-hover:bg-[color-mix(in_srgb,var(--accent)_15%,transparent)]'
-                  : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
-              )}
-              onClick={() => handleRowClick(v.version)}
-              onKeyDown={(e) => {
-                if (e.target !== e.currentTarget) return
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  handleRowClick(v.version)
+        return (
+          <div key={version.id} className='group relative flex min-h-[54px] items-start gap-1'>
+            <span className='relative z-10 mt-1 flex size-7 shrink-0 items-center justify-center bg-[var(--popover-surface)]'>
+              <TimelineIcon
+                className={
+                  version.isActive
+                    ? 'size-[14px] translate-x-1 text-[var(--text-primary)]'
+                    : operationStatus === 'failed'
+                      ? 'size-[14px] text-red-500'
+                      : 'size-[14px] text-[var(--text-icon)]'
                 }
-              }}
-            >
-              <div className={cn(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
-                <div className='flex items-center gap-4'>
-                  <div
-                    className={cn(
-                      'size-[6px] shrink-0 rounded-xs',
-                      v.isActive
-                        ? 'bg-[var(--indicator-active)]'
-                        : isOperationPending
-                          ? 'bg-amber-400'
-                          : operationStatus === 'failed'
-                            ? 'bg-red-400'
-                            : 'bg-[var(--indicator-inactive)]'
-                    )}
-                    title={
-                      v.isActive
-                        ? 'Live'
-                        : isOperationPending
-                          ? 'Pending'
-                          : operationStatus === 'failed'
-                            ? 'Failed'
-                            : 'Inactive'
-                    }
+                aria-hidden='true'
+              />
+            </span>
+
+            <div className='flex min-w-0 flex-1 items-start rounded-sm p-1 transition-colors duration-100 hover-hover:bg-[var(--surface-4)]'>
+              {editingVersion === version.version ? (
+                <div className='min-w-0 flex-1 p-1'>
+                  <ChipInput
+                    ref={inputRef}
+                    value={editValue}
+                    onChange={(event) => setEditValue(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault()
+                        handleSaveRename(version.version)
+                      } else if (event.key === 'Escape') {
+                        event.preventDefault()
+                        handleCancelRename()
+                      }
+                    }}
+                    onBlur={() => handleSaveRename(version.version)}
+                    className='w-full'
+                    inputClassName='font-medium'
+                    maxLength={100}
+                    disabled={renameMutation.isPending}
+                    autoComplete='off'
+                    autoCorrect='off'
+                    autoCapitalize='off'
+                    spellCheck='false'
+                    aria-label={`Rename ${versionLabel}`}
                   />
-                  {editingVersion === v.version ? (
-                    <Input
-                      ref={inputRef}
-                      value={editValue}
-                      onChange={(e) => setEditValue(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault()
-                          handleSaveRename(v.version)
-                        } else if (e.key === 'Escape') {
-                          e.preventDefault()
-                          handleCancelRename()
-                        }
-                      }}
-                      onClick={(e) => e.stopPropagation()}
-                      onBlur={() => handleSaveRename(v.version)}
-                      className={cn(
-                        'h-auto w-full border-0 bg-transparent p-0 text-[var(--text-primary)] text-caption leading-5 shadow-none outline-none focus:outline-none focus-visible:ring-0'
-                      )}
-                      maxLength={100}
-                      disabled={renameMutation.isPending}
-                      autoComplete='off'
-                      autoCorrect='off'
-                      autoCapitalize='off'
-                      spellCheck='false'
-                    />
-                  ) : (
-                    <span className={cn('flex min-w-0 items-center gap-1.5', ROW_TEXT_CLASS)}>
-                      <span className='shrink-0 text-[var(--text-tertiary)] tabular-nums'>
-                        v{v.version}
+                </div>
+              ) : (
+                <button
+                  type='button'
+                  className='min-w-0 flex-1 rounded-sm p-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]'
+                  onClick={() => onSelectVersion(version.version)}
+                >
+                  <span className='block min-w-0'>
+                    <span className='flex min-w-0 items-center gap-2'>
+                      <span className='truncate font-medium text-[var(--text-primary)] text-small'>
+                        {versionLabel}
                       </span>
-                      {v.name && <span className='truncate'>{v.name}</span>}
-                      {rowLabel && (
-                        <span className='shrink-0 text-[var(--text-tertiary)]'>({rowLabel})</span>
+                      {version.isActive && <ChipTag variant='gray'>Live</ChipTag>}
+                      {(isOperationPending || operationStatus === 'failed') && (
+                        <ChipTag variant={operationStatus === 'failed' ? 'red' : 'amber'}>
+                          {operationStatus === 'failed' ? 'Failed' : 'Pending'}
+                        </ChipTag>
                       )}
                     </span>
-                  )}
-                </div>
-              </div>
-
-              <div className={cn(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
-                <span className={cn('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}>
-                  {v.deployedBy || 'Unknown'}
-                </span>
-              </div>
-
-              <div className={cn(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
-                <span className={cn('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}>
-                  {formatDateTime(new Date(v.createdAt))}
-                </span>
-              </div>
-
-              <div
-                className={cn(
-                  COLUMN_WIDTHS.ACTIONS,
-                  COLUMN_BASE_CLASS,
-                  'flex items-center justify-end gap-0.5'
-                )}
-              >
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      variant='ghost'
-                      className={cn(
-                        '!p-1',
-                        !v.description &&
-                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
-                      )}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleOpenDescriptionModal(v.version)
-                      }}
+                    <span
+                      className='mt-0.5 block truncate text-[var(--text-muted)] text-xs'
+                      title={formatDateTime(new Date(version.createdAt))}
                     >
-                      <FileText className='size-3.5' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='top' className='max-w-[240px]'>
-                    {v.description ? (
-                      <p className='line-clamp-3 text-caption'>{v.description}</p>
-                    ) : (
-                      <p className='text-caption'>Add description</p>
-                    )}
-                  </Tooltip.Content>
-                </Tooltip.Root>
-                <Popover
-                  open={openDropdown === v.version}
-                  onOpenChange={(open) => setOpenDropdown(open ? v.version : null)}
-                >
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant='ghost'
-                      className='!p-1'
-                      disabled={isPromotingVersion}
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <MoreVertical className='size-3.5' />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent align='end' sideOffset={4} minWidth={160} maxWidth={200} border>
-                    <PopoverItem onClick={() => handleStartRename(v.version, v.name)}>
-                      <Pencil className='size-3' />
-                      <span>Rename</span>
-                    </PopoverItem>
-                    <PopoverItem onClick={() => handleOpenDescriptionModal(v.version)}>
-                      <FileText className='size-3' />
-                      <span>{v.description ? 'Edit description' : 'Add description'}</span>
-                    </PopoverItem>
-                    {!v.isActive && (
-                      <PopoverItem onClick={() => handlePromote(v.version)}>
-                        <RefreshCw className='size-3' />
-                        <span>Promote to live</span>
-                      </PopoverItem>
-                    )}
-                    <PopoverItem onClick={() => handleLoadDeployment(v.version)}>
-                      <SendToBack className='size-3' />
-                      <span>Load deployment</span>
-                    </PopoverItem>
-                  </PopoverContent>
-                </Popover>
-              </div>
+                      {deploymentVerb} {formatRelativeTime(version.createdAt)} by{' '}
+                      {version.deployedBy || 'Unknown'}
+                    </span>
+                  </span>
+                </button>
+              )}
+
+              <DropdownMenu modal={false}>
+                <DropdownMenuTrigger asChild>
+                  <Chip
+                    type='button'
+                    leftIcon={MoreHorizontal}
+                    className='mr-1 shrink-0'
+                    disabled={isPromotingVersion}
+                    aria-label={`Manage ${versionLabel}`}
+                  />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align='end' sideOffset={4}>
+                  <DropdownMenuItem
+                    onSelect={() => handleStartRename(version.version, version.name)}
+                  >
+                    <Pencil />
+                    Rename
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={() => setDescriptionModalVersion(version.version)}>
+                    <FileText />
+                    {version.description ? 'Edit description' : 'Add description'}
+                  </DropdownMenuItem>
+                  {!version.isActive && (
+                    <DropdownMenuItem onSelect={() => onPromoteToLive(version.version)}>
+                      <RefreshCw />
+                      Promote to live
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem onSelect={() => onLoadDeployment(version.version)}>
+                    <SendToBack />
+                    Restore as draft
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
-          )
-        })}
-      </div>
+          </div>
+        )
+      })}
 
       {workflowId && descriptionModalVersionData && (
         <VersionDescriptionModal
           key={descriptionModalVersionData.version}
           open={descriptionModalVersion !== null}
-          onOpenChange={(open) => !open && setDescriptionModalVersion(null)}
+          onOpenChange={(nextOpen) => !nextOpen && setDescriptionModalVersion(null)}
           workflowId={workflowId}
           version={descriptionModalVersionData.version}
           versionName={formatVersionLabel(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index 3238ad37b8e..58f0a5af861 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -1,348 +1,362 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import {
-  Button,
-  ButtonGroup,
-  ButtonGroupItem,
+  Chip,
   ChipConfirmModal,
-  cn,
-  Expand,
+  ChipTag,
   Label,
   Modal,
   ModalBody,
   ModalContent,
   ModalDescription,
   ModalHeader,
-  Skeleton,
-  Tooltip,
+  PopoverScrollArea,
 } from '@sim/emcn'
+import {
+  BubbleChatPreview,
+  ChevronRight,
+  Code,
+  Eye,
+  RefreshCw,
+  SendToBack,
+  Server,
+} from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
+import { formatDateTime } from '@sim/utils/formatting'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { Versions } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components'
+import { formatVersionLabel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/format-version-label'
 import type { DeployReadiness } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-deploy-readiness'
-import { Preview, PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { Preview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import { Versions } from './components'
-import { formatVersionLabel } from './format-version-label'
 
 const logger = createLogger('GeneralDeploy')
 
+export type DeploymentAccessView = 'api' | 'mcp' | 'chat'
+
+export interface DeploymentAccessMethod {
+  id: DeploymentAccessView
+  label: string
+  description: string
+  status: string
+}
+
 interface GeneralDeployProps {
   workflowId: string | null
-  deployedState?: WorkflowState | null
-  isLoadingDeployedState: boolean
   versions: WorkflowDeploymentVersionResponse[]
   versionsLoading: boolean
   isPromotingVersion: boolean
   deployReadiness: DeployReadiness
+  accessMethods: DeploymentAccessMethod[]
+  selectedVersion: number | null
+  onSelectVersion: (version: number | null) => void
+  onOpenAccessMethod: (view: DeploymentAccessView) => void
   onPromoteToLive: (version: number) => Promise<void>
   onLoadDeploymentComplete: () => void
   onLoadDeploymentBlocked: (message: string) => void
 }
 
-type PreviewMode = 'active' | 'selected'
+const ACCESS_METHOD_ICONS = {
+  api: Code,
+  mcp: Server,
+  chat: BubbleChatPreview,
+} as const
 
-/**
- * General deployment tab content displaying live workflow preview and version history.
- */
 export function GeneralDeploy({
   workflowId,
-  deployedState,
-  isLoadingDeployedState,
   versions,
   versionsLoading,
   isPromotingVersion,
   deployReadiness,
+  accessMethods,
+  selectedVersion,
+  onSelectVersion,
+  onOpenAccessMethod,
   onPromoteToLive,
   onLoadDeploymentComplete,
   onLoadDeploymentBlocked,
 }: GeneralDeployProps) {
-  const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
-  const [showActiveDespiteSelection, setShowActiveDespiteSelection] = useState(false)
-  const previewMode: PreviewMode =
-    selectedVersion !== null && !showActiveDespiteSelection ? 'selected' : 'active'
-  const [showLoadDialog, setShowLoadDialog] = useState(false)
-  const [showPromoteDialog, setShowPromoteDialog] = useState(false)
-  const [showExpandedPreview, setShowExpandedPreview] = useState(false)
-  const [versionToLoad, setVersionToLoad] = useState<{
-    workflowId: string
-    version: number
-  } | null>(null)
-  const [versionToPromote, setVersionToPromote] = useState<{
-    workflowId: string
-    version: number
-  } | null>(null)
-
-  const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
-  const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote?.version)
-  const versionToLoadInfo = versions.find((v) => v.version === versionToLoad?.version)
-
-  const { data: selectedVersionState } = useDeploymentVersionState(workflowId, selectedVersion)
+  const [showVersionPreview, setShowVersionPreview] = useState(false)
+  const [versionToRestore, setVersionToRestore] = useState<number | null>(null)
+  const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
 
+  const showRestoreDialog = versionToRestore !== null
+  const showPromoteDialog = versionToPromote !== null
+  const selectedVersionInfo = versions.find((version) => version.version === selectedVersion)
+  const versionToRestoreInfo = versions.find((version) => version.version === versionToRestore)
+  const versionToPromoteInfo = versions.find((version) => version.version === versionToPromote)
+  const { data: selectedVersionState, isLoading: isLoadingSelectedVersionState } =
+    useDeploymentVersionState(workflowId, selectedVersion)
   const revertMutation = useRevertToVersion()
 
-  const handleSelectVersion = (version: number | null) => {
-    setSelectedVersion(version)
-    setShowActiveDespiteSelection(false)
+  const handleRestoreVersion = (version: number) => {
+    setVersionToRestore(version)
   }
 
-  const handleLoadDeployment = (version: number) => {
-    if (!workflowId) return
-    setVersionToLoad({ workflowId, version })
-    setShowLoadDialog(true)
+  const handlePromoteVersion = (version: number) => {
+    setVersionToPromote(version)
   }
 
-  const handlePromoteToLive = (version: number) => {
-    if (!workflowId) return
-    setVersionToPromote({ workflowId, version })
-    setShowPromoteDialog(true)
-  }
+  const confirmRestoreVersion = async () => {
+    if (!workflowId || versionToRestore === null) return
+    const targetWorkflowId = workflowId
+    const targetVersion = versionToRestore
 
-  const confirmLoadDeployment = async () => {
-    if (!versionToLoad) return
-    const target = versionToLoad
     if (!(await deployReadiness.waitUntilReady())) {
-      if (
-        workflowId !== target.workflowId ||
-        useWorkflowRegistry.getState().activeWorkflowId !== target.workflowId
-      ) {
-        setShowLoadDialog(false)
-        setVersionToLoad(null)
+      if (useWorkflowRegistry.getState().activeWorkflowId !== targetWorkflowId) {
+        setVersionToRestore(null)
         return
       }
       onLoadDeploymentBlocked(deployReadiness.tooltip)
       return
     }
-    if (
-      workflowId !== target.workflowId ||
-      useWorkflowRegistry.getState().activeWorkflowId !== target.workflowId
-    ) {
-      setShowLoadDialog(false)
-      setVersionToLoad(null)
+
+    if (useWorkflowRegistry.getState().activeWorkflowId !== targetWorkflowId) {
+      setVersionToRestore(null)
       return
     }
 
-    setShowLoadDialog(false)
-    setVersionToLoad(null)
+    setVersionToRestore(null)
 
     try {
-      await revertMutation.mutateAsync({ workflowId: target.workflowId, version: target.version })
+      await revertMutation.mutateAsync({ workflowId: targetWorkflowId, version: targetVersion })
       onLoadDeploymentComplete()
     } catch (error) {
-      logger.error('Failed to load deployment:', error)
+      logger.error('Failed to restore deployment as draft', { error })
     }
   }
 
-  useEffect(() => {
-    setShowLoadDialog(false)
-    setVersionToLoad(null)
-    setShowPromoteDialog(false)
-    setVersionToPromote(null)
-  }, [workflowId])
-
-  const confirmPromoteToLive = async () => {
-    if (!versionToPromote || isPromotingVersion) return
-    const target = versionToPromote
+  const confirmPromoteVersion = async () => {
+    if (!workflowId || versionToPromote === null || isPromotingVersion) return
+    const targetVersion = versionToPromote
 
-    setShowPromoteDialog(false)
     setVersionToPromote(null)
 
-    if (
-      workflowId !== target.workflowId ||
-      useWorkflowRegistry.getState().activeWorkflowId !== target.workflowId
-    ) {
-      return
-    }
+    if (useWorkflowRegistry.getState().activeWorkflowId !== workflowId) return
 
     try {
-      await onPromoteToLive(target.version)
+      await onPromoteToLive(targetVersion)
     } catch (error) {
-      logger.error('Failed to promote version:', error)
+      logger.error('Failed to promote deployment version', { error })
     }
   }
 
-  const workflowToShow =
-    previewMode === 'selected' && selectedVersionState ? selectedVersionState : deployedState
-
-  const showToggle = selectedVersion !== null && deployedState
-
-  const hasDeployedData = deployedState && Object.keys(deployedState.blocks || {}).length > 0
-  const showLoadingSkeleton = isLoadingDeployedState && !hasDeployedData
-
-  if (showLoadingSkeleton) {
-    return (
-      <div className='space-y-3'>
-        <div>
-          <div className='relative mb-[6.5px]'>
-            <Skeleton className='h-[16px] w-[90px]' />
-          </div>
-          <div className='h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
-            <Skeleton className='h-full w-full rounded-none' />
-          </div>
-        </div>
-        <div>
-          <Skeleton className='mb-[6.5px] h-[16px] w-[60px]' />
-          <div className='h-[120px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
-            <Skeleton className='h-full w-full rounded-none' />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
+  const renderDialogs = () => (
     <>
-      <div className='space-y-3'>
-        <div>
-          <div className='relative mb-[6.5px]'>
-            <Label className='block truncate pl-0.5 text-[var(--text-primary)] text-small'>
-              {previewMode === 'selected' && selectedVersionInfo
-                ? formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)
-                : 'Live Workflow'}
-            </Label>
-            <div className={cn('absolute top-[-5px] right-0', !showToggle && 'invisible')}>
-              <ButtonGroup
-                value={previewMode}
-                onValueChange={(val) =>
-                  setShowActiveDespiteSelection((val as PreviewMode) === 'active')
-                }
-              >
-                <ButtonGroupItem value='active'>Live</ButtonGroupItem>
-                <ButtonGroupItem value='selected' className='truncate'>
-                  {selectedVersionInfo
-                    ? formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)
-                    : `v${selectedVersion}`}
-                </ButtonGroupItem>
-              </ButtonGroup>
-            </div>
-          </div>
-
-          <div
-            className='relative h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'
-            onWheelCapture={(e) => {
-              if (e.ctrlKey || e.metaKey) return
-              e.stopPropagation()
-            }}
-          >
-            {workflowToShow ? (
-              <>
-                <div className='[&_*]:!cursor-default h-full w-full cursor-default'>
-                  <PreviewWorkflow
-                    workflowState={workflowToShow}
-                    height='100%'
-                    width='100%'
-                    isPannable={true}
-                    defaultPosition={{ x: 0, y: 0 }}
-                    defaultZoom={0.6}
-                  />
-                </div>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      type='button'
-                      variant='default'
-                      onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-2 z-10 size-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
-                    >
-                      <Expand className='size-[14px]' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='top'>See preview</Tooltip.Content>
-                </Tooltip.Root>
-              </>
-            ) : (
-              <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
-                Deploy your workflow to see a preview
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div>
-          <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
-            Versions
-          </Label>
-          <Versions
-            workflowId={workflowId}
-            versions={versions}
-            versionsLoading={versionsLoading}
-            isPromotingVersion={isPromotingVersion}
-            selectedVersion={selectedVersion}
-            onSelectVersion={handleSelectVersion}
-            onPromoteToLive={handlePromoteToLive}
-            onLoadDeployment={handleLoadDeployment}
-          />
-        </div>
-      </div>
-
       <ChipConfirmModal
-        open={showLoadDialog}
-        onOpenChange={setShowLoadDialog}
-        srTitle='Load Deployment'
-        title='Load Deployment'
+        open={showRestoreDialog}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setVersionToRestore(null)
+        }}
+        srTitle='Restore as draft'
+        title='Restore as draft'
         text={[
-          'Are you sure you want to load ',
+          'Restore ',
           {
-            text: versionToLoadInfo
-              ? formatVersionLabel(versionToLoadInfo.version, versionToLoadInfo.name)
-              : `v${versionToLoad?.version}`,
+            text: versionToRestoreInfo
+              ? formatVersionLabel(versionToRestoreInfo.version, versionToRestoreInfo.name)
+              : `v${versionToRestore}`,
             bold: true,
           },
-          '? ',
+          ' as your editable workflow? ',
           {
-            text: 'This will replace your current workflow with the deployed version.',
+            text: 'This replaces the current draft. The live deployment will not change.',
             error: true,
           },
         ]}
         confirm={{
-          label: 'Load deployment',
-          onClick: confirmLoadDeployment,
+          label: 'Restore as draft',
+          onClick: confirmRestoreVersion,
           pending: revertMutation.isPending,
         }}
       />
 
       <ChipConfirmModal
         open={showPromoteDialog}
-        onOpenChange={setShowPromoteDialog}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setVersionToPromote(null)
+        }}
         srTitle='Promote to live'
         title='Promote to live'
         text={[
-          'Are you sure you want to promote ',
+          'Promote ',
           {
             text: versionToPromoteInfo
               ? formatVersionLabel(versionToPromoteInfo.version, versionToPromoteInfo.name)
-              : `v${versionToPromote?.version}`,
+              : `v${versionToPromote}`,
             bold: true,
           },
-          ' to live? This version will become the active deployment and serve all API requests.',
+          ' to live? This version will become the active deployment and serve all workflow requests.',
         ]}
         confirm={{
           label: 'Promote to live',
-          onClick: confirmPromoteToLive,
+          onClick: confirmPromoteVersion,
           variant: 'primary',
           pending: isPromotingVersion,
         }}
       />
 
-      {workflowToShow && (
-        <Modal open={showExpandedPreview} onOpenChange={setShowExpandedPreview}>
+      {selectedVersionState && selectedVersionInfo && (
+        <Modal open={showVersionPreview} onOpenChange={setShowVersionPreview}>
           <ModalContent size='full' className='flex h-[90vh] flex-col'>
             <ModalHeader>
-              {previewMode === 'selected' && selectedVersionInfo
-                ? formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)
-                : 'Live Workflow'}
+              {formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)}
             </ModalHeader>
             <ModalBody className='!p-0 min-h-0 flex-1 overflow-hidden'>
               <ModalDescription className='sr-only'>
-                Visual preview of the selected workflow version.
+                Read-only preview of the selected deployment version.
               </ModalDescription>
-              <Preview workflowState={workflowToShow} autoSelectLeftmost />
+              <Preview workflowState={selectedVersionState} autoSelectLeftmost />
             </ModalBody>
           </ModalContent>
         </Modal>
       )}
     </>
   )
+
+  if (selectedVersionInfo) {
+    return (
+      <>
+        <div className='space-y-4'>
+          <div className='rounded-sm border border-[var(--border)] bg-[var(--surface-1)] p-3'>
+            <div className='flex items-center justify-between gap-3'>
+              <div className='min-w-0'>
+                <div className='flex min-w-0 items-center gap-2'>
+                  <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
+                    {formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)}
+                  </p>
+                  <ChipTag variant='gray'>
+                    {selectedVersionInfo.isActive ? 'Live' : 'Inactive'}
+                  </ChipTag>
+                </div>
+                <p className='mt-1 text-[var(--text-muted)] text-xs'>
+                  Deployed {formatDateTime(new Date(selectedVersionInfo.createdAt))} by{' '}
+                  {selectedVersionInfo.deployedBy || 'Unknown'}
+                </p>
+              </div>
+            </div>
+            {!selectedVersionInfo.isActive && (
+              <Chip
+                type='button'
+                variant='primary'
+                fullWidth
+                leftIcon={RefreshCw}
+                className='mt-3 justify-center [&>span]:flex-none'
+                onClick={() => handlePromoteVersion(selectedVersionInfo.version)}
+                disabled={isPromotingVersion}
+              >
+                Promote to live
+              </Chip>
+            )}
+          </div>
+
+          <div>
+            <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
+              Version notes
+            </Label>
+            <div className='min-h-[72px] rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-3 py-2.5'>
+              <p className='text-[var(--text-secondary)] text-small'>
+                {selectedVersionInfo.description || 'No description was added for this version.'}
+              </p>
+            </div>
+          </div>
+
+          <div className='grid grid-cols-2 gap-2'>
+            <Chip
+              type='button'
+              variant='border'
+              fullWidth
+              leftIcon={Eye}
+              className='justify-center [&>span]:flex-none'
+              onClick={() => setShowVersionPreview(true)}
+              disabled={isLoadingSelectedVersionState || !selectedVersionState}
+            >
+              Preview version
+            </Chip>
+            <Chip
+              type='button'
+              variant='border'
+              fullWidth
+              leftIcon={SendToBack}
+              className='justify-center [&>span]:flex-none'
+              onClick={() => handleRestoreVersion(selectedVersionInfo.version)}
+            >
+              Restore as draft
+            </Chip>
+          </div>
+        </div>
+        {renderDialogs()}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div>
+        {accessMethods.length > 0 && (
+          <section>
+            <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
+              Access methods
+            </Label>
+            <div className='divide-y divide-[var(--border)] overflow-hidden rounded-sm border border-[var(--border)] bg-[var(--surface-2)]'>
+              {accessMethods.map((method) => {
+                const Icon = ACCESS_METHOD_ICONS[method.id]
+                return (
+                  <button
+                    key={method.id}
+                    type='button'
+                    className='group flex min-h-[58px] w-full items-center gap-3 px-3 text-left transition-colors duration-100 hover-hover:bg-[var(--surface-4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-inset'
+                    onClick={() => onOpenAccessMethod(method.id)}
+                  >
+                    <span className='flex size-8 shrink-0 items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--surface-1)]'>
+                      <Icon className='size-[14px] text-[var(--text-icon)]' />
+                    </span>
+                    <span className='min-w-0 flex-1'>
+                      <span className='block font-medium text-[var(--text-primary)] text-small'>
+                        {method.label}
+                      </span>
+                      <span className='block truncate text-[var(--text-muted)] text-xs'>
+                        {method.description}
+                      </span>
+                    </span>
+                    <span className='shrink-0 text-[var(--text-tertiary)] text-xs'>
+                      {method.status}
+                    </span>
+                    <ChevronRight className='size-[14px] shrink-0 text-[var(--text-icon)]' />
+                  </button>
+                )
+              })}
+            </div>
+          </section>
+        )}
+
+        {accessMethods.length > 0 && <div className='-mx-4 mt-5 h-px bg-[var(--border)]' />}
+
+        <section className={accessMethods.length > 0 ? 'mt-3' : undefined}>
+          <div className='mb-[6.5px] pl-0.5'>
+            <Label className='text-[var(--text-primary)] text-small'>Version history</Label>
+          </div>
+          <PopoverScrollArea
+            fadeVariant='panel'
+            bottomFade={false}
+            scrollbar='hidden'
+            className='max-h-[260px] pb-20'
+          >
+            <Versions
+              workflowId={workflowId}
+              versions={versions}
+              versionsLoading={versionsLoading}
+              isPromotingVersion={isPromotingVersion}
+              onSelectVersion={onSelectVersion}
+              onPromoteToLive={handlePromoteVersion}
+              onLoadDeployment={handleRestoreVersion}
+            />
+          </PopoverScrollArea>
+        </section>
+      </div>
+      {renderDialogs()}
+    </>
+  )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 59907a39a29..70a003a10e0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -2,15 +2,15 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
-  Badge,
   Chip,
   ChipCombobox,
   ChipInput,
+  ChipTag,
+  ChipTextarea,
   type ComboboxOption,
   cn,
   Label,
   Skeleton,
-  Textarea,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
@@ -565,7 +565,7 @@ export function McpDeploy({
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           Description
         </Label>
-        <Textarea
+        <ChipTextarea
           placeholder={
             workflowDescriptionFallback
               ? `Defaults to the workflow description: ${workflowDescriptionFallback}`
@@ -596,9 +596,7 @@ export function McpDeploy({
                     <span className='block truncate text-[var(--text-tertiary)] text-sm'>
                       {field.name}
                     </span>
-                    <Badge variant='type' size='sm'>
-                      {field.type}
-                    </Badge>
+                    <ChipTag variant='field'>{field.type}</ChipTag>
                   </div>
                 </div>
                 <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index 45c67249614..1ff4ed7fb8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -1,26 +1,25 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { type ReactElement, useCallback, useEffect, useRef, useState } from 'react'
 import {
-  Badge,
   Chip,
   ChipConfirmModal,
-  chipContentIconClass,
+  ChipTag,
   cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Loader,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTabs,
-  ModalTabsContent,
-  ModalTabsList,
-  ModalTabsTrigger,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  ScrollEdgeFade,
   Tooltip,
   toast,
 } from '@sim/emcn'
+import { ArrowLeft, MoreHorizontal, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
@@ -30,6 +29,19 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/settings/components/api-keys/components'
+import {
+  ApiDeploy,
+  ChatDeploy,
+  type ExistingChat,
+  GeneralDeploy,
+  McpDeploy,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components'
+import { ApiInfoModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal'
+import { formatVersionLabel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/format-version-label'
+import type {
+  DeploymentAccessMethod,
+  DeploymentAccessView,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general'
 import {
   releaseDeployAction,
   tryAcquireDeployAction,
@@ -57,12 +69,11 @@ import { syncLocalDraftFromServer } from '@/stores/workflows/sync-local-draft'
 import { mergeSubblockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import { ApiDeploy, ChatDeploy, type ExistingChat, GeneralDeploy, McpDeploy } from './components'
-import { ApiInfoModal } from './components/general/components/api-info-modal'
 
-const logger = createLogger('DeployModal')
+const logger = createLogger('DeployPopover')
 
-interface DeployModalProps {
+interface DeployPopoverProps {
+  trigger: ReactElement
   open: boolean
   onOpenChange: (open: boolean) => void
   workflowId: string | null
@@ -84,15 +95,16 @@ interface WorkflowDeploymentInfoUI {
   isPublicApi: boolean
 }
 
-type TabView = 'general' | 'api' | 'chat' | 'mcp'
+type DeployView = 'general' | DeploymentAccessView
 
-const DEPLOY_MODAL_TABS = new Set<TabView>(['general', 'api', 'chat', 'mcp'])
+const DEPLOY_POPOVER_TABS = new Set<DeployView>(['general', 'api', 'chat', 'mcp'])
 
-function isDeployModalTab(value: unknown): value is TabView {
-  return typeof value === 'string' && DEPLOY_MODAL_TABS.has(value as TabView)
+function isDeployPopoverTab(value: unknown): value is DeployView {
+  return typeof value === 'string' && DEPLOY_POPOVER_TABS.has(value as DeployView)
 }
 
-export function DeployModal({
+export function DeployPopover({
+  trigger,
   open,
   onOpenChange,
   workflowId,
@@ -102,7 +114,7 @@ export function DeployModal({
   isLoadingDeployedState,
   deployReadiness,
   isDeploymentSettling,
-}: DeployModalProps) {
+}: DeployPopoverProps) {
   const queryClient = useQueryClient()
   const params = useParams()
   const workspaceId = params?.workspaceId as string
@@ -111,7 +123,8 @@ export function DeployModal({
   const { data: workflowMap = {} } = useWorkflowMap(workspaceId)
   const workflowMetadata = workflowId ? workflowMap[workflowId] : undefined
   const workflowWorkspaceId = workflowMetadata?.workspaceId ?? null
-  const [activeTab, setActiveTab] = useState<TabView>('general')
+  const [activeTab, setActiveTab] = useState<DeployView>('general')
+  const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
   const [chatSubmitting, setChatSubmitting] = useState(false)
   const [deployError, setDeployError] = useState<string | null>(null)
   const [isFinalizingDeploy, setIsFinalizingDeploy] = useState(false)
@@ -129,6 +142,9 @@ export function DeployModal({
   const chatSuccessTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const deployActionIdRef = useRef(0)
   const activateVersionInFlightRef = useRef(false)
+  const deployScrollAreaRef = useRef<HTMLDivElement>(null)
+  const deployPopoverContentRef = useRef<HTMLDivElement>(null)
+  const [showBottomFade, setShowBottomFade] = useState(false)
 
   const [isCreateKeyModalOpen, setIsCreateKeyModalOpen] = useState(false)
   const [isApiInfoModalOpen, setIsApiInfoModalOpen] = useState(false)
@@ -173,11 +189,71 @@ export function DeployModal({
   const activateVersionMutation = useActivateDeploymentVersion()
 
   const versions = versionsData?.versions ?? []
+  const selectedVersionInfo = versions.find((version) => version.version === selectedVersion)
+  const accessMethods: DeploymentAccessMethod[] = [
+    ...(!permissionConfig.hideDeployApi
+      ? [
+          {
+            id: 'api' as const,
+            label: 'API',
+            description: 'Run this workflow from your application',
+            status: isDeployed ? 'Ready' : 'Deploy first',
+          },
+        ]
+      : []),
+    ...(!permissionConfig.hideDeployMcp
+      ? [
+          {
+            id: 'mcp' as const,
+            label: 'MCP',
+            description: 'Expose this workflow as a tool',
+            status: hasMcpServers ? 'Connected' : 'Set up',
+          },
+        ]
+      : []),
+    ...(!permissionConfig.hideDeployChatbot
+      ? [
+          {
+            id: 'chat' as const,
+            label: 'Chat',
+            description: 'Launch a hosted chat experience',
+            status: chatExists ? 'Live' : 'Set up',
+          },
+        ]
+      : []),
+  ]
   const deploymentAttemptStatus = deploymentInfoData?.latestDeploymentAttempt?.status
   const attemptErrorMessage =
     deploymentInfoData?.latestDeploymentAttempt?.error?.message ??
     (deploymentAttemptStatus === 'failed' ? 'Deployment preparation failed' : null)
 
+  const updateBottomFade = useCallback(() => {
+    const scrollArea = deployScrollAreaRef.current
+    if (!scrollArea) return
+
+    setShowBottomFade(scrollArea.scrollTop + scrollArea.clientHeight < scrollArea.scrollHeight - 1)
+  }, [])
+
+  useEffect(() => {
+    const scrollArea = deployScrollAreaRef.current
+    if (!scrollArea || !open) return
+
+    updateBottomFade()
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateBottomFade)
+    resizeObserver?.observe(scrollArea)
+
+    const mutationObserver =
+      typeof MutationObserver === 'undefined' ? null : new MutationObserver(updateBottomFade)
+    mutationObserver?.observe(scrollArea, { childList: true, subtree: true })
+
+    return () => {
+      resizeObserver?.disconnect()
+      mutationObserver?.disconnect()
+    }
+  }, [open, updateBottomFade])
+
   const isWorkflowStillActive = (targetWorkflowId: string) => {
     return useWorkflowRegistry.getState().activeWorkflowId === targetWorkflowId
   }
@@ -215,6 +291,7 @@ export function DeployModal({
     deployActionIdRef.current += 1
     setIsFinalizingDeploy(false)
     setUndeployTargetWorkflowId(null)
+    setSelectedVersion(null)
   }, [workflowId])
 
   const getApiKeyLabel = (value?: string | null) => {
@@ -271,6 +348,7 @@ export function DeployModal({
   useEffect(() => {
     if (open && workflowId) {
       setActiveTab('general')
+      setSelectedVersion(null)
       setDeployError(null)
       setChatSuccess(false)
 
@@ -304,18 +382,21 @@ export function DeployModal({
   }, [open, workflowId])
 
   useEffect(() => {
-    const handleOpenDeployModal = (event: Event) => {
+    const handleOpenDeployPopover = (event: Event) => {
       const customEvent = event as CustomEvent<{ tab?: unknown }>
       onOpenChange(true)
-      if (isDeployModalTab(customEvent.detail?.tab)) {
+      setSelectedVersion(null)
+      if (isDeployPopoverTab(customEvent.detail?.tab)) {
         setActiveTab(customEvent.detail.tab)
+      } else {
+        setActiveTab('general')
       }
     }
 
-    window.addEventListener('open-deploy-modal', handleOpenDeployModal)
+    window.addEventListener('open-deploy-modal', handleOpenDeployPopover)
 
     return () => {
-      window.removeEventListener('open-deploy-modal', handleOpenDeployModal)
+      window.removeEventListener('open-deploy-modal', handleOpenDeployPopover)
     }
   }, [onOpenChange])
 
@@ -472,14 +553,37 @@ export function DeployModal({
     }
   }
 
-  const handleCloseModal = () => {
+  const handleClosePopover = useCallback(() => {
     deployActionIdRef.current += 1
     setIsFinalizingDeploy(false)
     if (workflowId) releaseDeployAction(workflowId)
     setChatSubmitting(false)
     setDeployError(null)
+    setSelectedVersion(null)
     onOpenChange(false)
-  }
+  }, [onOpenChange, workflowId])
+
+  useEffect(() => {
+    if (!open) return
+
+    const handleDocumentPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Element)) return
+      if (deployPopoverContentRef.current?.contains(target)) return
+      if (
+        target.closest(
+          '[data-deploy-popover-trigger], [data-panel-resize-handle], [data-native-surface-overlay]'
+        )
+      ) {
+        return
+      }
+
+      handleClosePopover()
+    }
+
+    document.addEventListener('pointerdown', handleDocumentPointerDown, true)
+    return () => document.removeEventListener('pointerdown', handleDocumentPointerDown, true)
+  }, [handleClosePopover, open])
 
   const handleChatDeployed = async () => {
     if (!workflowId) return
@@ -519,59 +623,162 @@ export function DeployModal({
 
   const isSubmitting = deployMutation.isPending || isFinalizingDeploy
   const isUndeploying = undeployMutation.isPending
+  const hasVisibleAttemptStatus =
+    deploymentAttemptStatus === 'preparing' ||
+    deploymentAttemptStatus === 'activating' ||
+    deploymentAttemptStatus === 'failed'
+
+  const handlePanelOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      onOpenChange(true)
+      return
+    }
+    handleClosePopover()
+  }
+
+  const isOverview = activeTab === 'general' && selectedVersionInfo === undefined
+  const headerTitle = selectedVersionInfo
+    ? formatVersionLabel(selectedVersionInfo.version, selectedVersionInfo.name)
+    : activeTab === 'api'
+      ? 'API access'
+      : activeTab === 'mcp'
+        ? 'MCP access'
+        : activeTab === 'chat'
+          ? 'Chat deployment'
+          : isDeployed
+            ? 'Production deployment'
+            : 'Deploy workflow'
+  const handleBackToOverview = () => {
+    if (selectedVersionInfo) {
+      setSelectedVersion(null)
+      return
+    }
+    setActiveTab('general')
+  }
 
   return (
-    <>
-      <Modal open={open} onOpenChange={handleCloseModal}>
-        <ModalContent size='lg' className='h-[76vh]'>
-          <ModalHeader>Workflow Deployment</ModalHeader>
-
-          <ModalTabs
-            value={activeTab}
-            onValueChange={(value) => setActiveTab(value as TabView)}
-            className='flex min-h-0 flex-1 flex-col'
-          >
-            <ModalTabsList activeValue={activeTab}>
-              <ModalTabsTrigger value='general'>General</ModalTabsTrigger>
-              {!permissionConfig.hideDeployApi && (
-                <ModalTabsTrigger value='api'>API</ModalTabsTrigger>
-              )}
-              {!permissionConfig.hideDeployMcp && (
-                <ModalTabsTrigger value='mcp'>MCP</ModalTabsTrigger>
-              )}
-              {!permissionConfig.hideDeployChatbot && (
-                <ModalTabsTrigger value='chat'>Chat</ModalTabsTrigger>
+    <Popover open={open} onOpenChange={handlePanelOpenChange}>
+      <PopoverTrigger asChild data-deploy-popover-trigger=''>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverAnchor asChild>
+        <span
+          aria-hidden='true'
+          className='-bottom-2 pointer-events-none absolute right-2 size-0'
+        />
+      </PopoverAnchor>
+      <PopoverContent
+        ref={deployPopoverContentRef}
+        align='end'
+        side='bottom'
+        sideOffset={0}
+        updatePositionStrategy='always'
+        collisionPadding={12}
+        maxHeight={620}
+        minWidth={440}
+        appearance='dropdown'
+        className='z-[calc(var(--z-modal)-1)] w-[440px] overflow-hidden p-0'
+        aria-label='Deploy workflow'
+        onInteractOutside={(event) => {
+          const target = event.target
+          if (target instanceof Element && target.closest('[data-panel-resize-handle]')) {
+            event.preventDefault()
+          }
+        }}
+      >
+        <div className='relative flex max-h-[min(620px,calc(100vh-80px))] flex-col overflow-hidden'>
+          <div className='p-3'>
+            <div className='flex items-center justify-between gap-3'>
+              <div className='flex min-w-0 items-center gap-2'>
+                {!isOverview && (
+                  <Chip
+                    type='button'
+                    leftIcon={ArrowLeft}
+                    className='shrink-0'
+                    onClick={handleBackToOverview}
+                    aria-label='Back to deployment overview'
+                  />
+                )}
+                <h2 className='truncate font-medium text-[var(--text-primary)] text-sm'>
+                  {headerTitle}
+                </h2>
+              </div>
+              {isOverview && (
+                <div className='flex shrink-0 items-center gap-1'>
+                  {!isDeployed && !hasVisibleAttemptStatus ? (
+                    <ChipTag variant='gray'>Not deployed</ChipTag>
+                  ) : (
+                    <StatusBadge
+                      isDeployed={isDeployed}
+                      needsRedeployment={needsRedeployment}
+                      attemptStatus={deploymentAttemptStatus}
+                      attemptErrorMessage={attemptErrorMessage}
+                    />
+                  )}
+                  {isDeployed && (
+                    <DropdownMenu modal={false}>
+                      <DropdownMenuTrigger asChild>
+                        <Chip
+                          type='button'
+                          leftIcon={MoreHorizontal}
+                          aria-label='Deployment actions'
+                        />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align='end' sideOffset={4}>
+                        <DropdownMenuItem
+                          onSelect={() => workflowId && setUndeployTargetWorkflowId(workflowId)}
+                        >
+                          <Trash />
+                          Undeploy workflow…
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+                </div>
               )}
-            </ModalTabsList>
-
-            <ModalBody className='min-h-0 flex-1'>
-              <ModalDescription className='sr-only'>
+            </div>
+          </div>
+
+          <div className='relative min-h-0 flex-1 overflow-hidden'>
+            <div
+              ref={deployScrollAreaRef}
+              className={cn('h-full overflow-y-auto px-3 pb-3', isOverview ? 'pt-0' : 'pt-3')}
+              onScroll={updateBottomFade}
+            >
+              <p className='sr-only'>
                 Configure and manage workflow deployment settings including API, MCP, and chat
                 options.
-              </ModalDescription>
-              {deployError && (
+              </p>
+              {deployError && !isOverview && (
                 <div className='mb-3' role='alert'>
-                  <Badge variant='red' size='lg' dot className='max-w-full truncate'>
+                  <ChipTag variant='red' className='max-w-full truncate'>
                     {deployError}
-                  </Badge>
+                  </ChipTag>
                 </div>
               )}
-              <ModalTabsContent value='general'>
+
+              {activeTab === 'general' && (
                 <GeneralDeploy
+                  key={workflowId ?? 'no-workflow'}
                   workflowId={workflowId}
-                  deployedState={deployedState}
-                  isLoadingDeployedState={isLoadingDeployedState}
                   versions={versions}
                   versionsLoading={versionsLoading}
                   isPromotingVersion={isActivatingVersion || activateVersionMutation.isPending}
                   deployReadiness={deployReadiness}
+                  accessMethods={accessMethods}
+                  selectedVersion={selectedVersion}
+                  onSelectVersion={setSelectedVersion}
+                  onOpenAccessMethod={(view) => {
+                    setSelectedVersion(null)
+                    setActiveTab(view)
+                  }}
                   onPromoteToLive={handlePromoteToLive}
-                  onLoadDeploymentComplete={handleCloseModal}
+                  onLoadDeploymentComplete={handleClosePopover}
                   onLoadDeploymentBlocked={setDeployError}
                 />
-              </ModalTabsContent>
+              )}
 
-              <ModalTabsContent value='api' className='h-full'>
+              {activeTab === 'api' && (
                 <ApiDeploy
                   workflowId={workflowId}
                   deploymentInfo={deploymentInfo}
@@ -581,9 +788,9 @@ export function DeployModal({
                   selectedStreamingOutputs={selectedStreamingOutputs}
                   onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
                 />
-              </ModalTabsContent>
+              )}
 
-              <ModalTabsContent value='chat'>
+              {activeTab === 'chat' && (
                 <ChatDeploy
                   workflowId={workflowId || ''}
                   deploymentInfo={deploymentInfo}
@@ -594,53 +801,50 @@ export function DeployModal({
                   setChatSubmitting={setChatSubmitting}
                   canRevealPassword={userPermissions.canAdmin}
                   onValidationChange={setIsChatFormValid}
-                  onDeploymentComplete={handleCloseModal}
+                  onDeploymentComplete={handleClosePopover}
                   onDeployed={handleChatDeployed}
                   onVersionActivated={() => {}}
                 />
-              </ModalTabsContent>
-
-              <ModalTabsContent value='mcp' className='h-full'>
-                {workflowId && (
-                  <McpDeploy
-                    workflowId={workflowId}
-                    workflowName={workflowMetadata?.name || 'Workflow'}
-                    workflowDescription={workflowMetadata?.description}
-                    isDeployed={isDeployed}
-                    deployedState={deployedState}
-                    isLoadingDeployedState={isLoadingDeployedState}
-                    onSubmittingChange={setMcpToolSubmitting}
-                    onCanSaveChange={setMcpToolCanSave}
-                    onSaveDisabledReasonChange={setMcpToolSaveDisabledReason}
-                    onActiveServerChange={setMcpActiveServerId}
-                  />
-                )}
-              </ModalTabsContent>
-            </ModalBody>
-          </ModalTabs>
+              )}
 
-          {activeTab === 'general' && (
+              {activeTab === 'mcp' && workflowId && (
+                <McpDeploy
+                  workflowId={workflowId}
+                  workflowName={workflowMetadata?.name || 'Workflow'}
+                  workflowDescription={workflowMetadata?.description}
+                  isDeployed={isDeployed}
+                  deployedState={deployedState}
+                  isLoadingDeployedState={isLoadingDeployedState}
+                  onSubmittingChange={setMcpToolSubmitting}
+                  onCanSaveChange={setMcpToolCanSave}
+                  onSaveDisabledReasonChange={setMcpToolSaveDisabledReason}
+                  onActiveServerChange={setMcpActiveServerId}
+                />
+              )}
+            </div>
+
+            <ScrollEdgeFade position='bottom' variant='panel' visible={showBottomFade} />
+          </div>
+
+          {activeTab === 'general' && selectedVersionInfo === undefined && (
             <GeneralFooter
               isDeployed={isDeployed}
               needsRedeployment={needsRedeployment}
               isSubmitting={isSubmitting}
-              isUndeploying={isUndeploying}
               deployReadiness={deployReadiness}
               isDeploymentSettling={isDeploymentSettling}
-              attemptStatus={deploymentAttemptStatus}
-              attemptErrorMessage={attemptErrorMessage}
+              errorMessage={deployError}
               onDeploy={onDeploy}
               onRedeploy={handleRedeploy}
-              onUndeploy={() => {
-                if (workflowId) setUndeployTargetWorkflowId(workflowId)
-              }}
             />
           )}
           {activeTab === 'api' && (
-            <ModalFooter className='items-center justify-between'>
+            <div className='flex items-center justify-between gap-2 px-3 py-3'>
               <div />
               <div className='flex items-center gap-2'>
-                <Chip onClick={() => setIsApiInfoModalOpen(true)}>Edit API Info</Chip>
+                <Chip variant='border' onClick={() => setIsApiInfoModalOpen(true)}>
+                  Edit API Info
+                </Chip>
                 <Chip
                   variant='primary'
                   onClick={() => setIsCreateKeyModalOpen(true)}
@@ -649,14 +853,19 @@ export function DeployModal({
                   Generate API Key
                 </Chip>
               </div>
-            </ModalFooter>
+            </div>
           )}
           {activeTab === 'chat' && (
-            <ModalFooter className='items-center justify-between'>
+            <div className='flex items-center justify-between gap-2 px-3 py-3'>
               <div />
               <div className='flex items-center gap-2'>
                 {chatExists && (
-                  <Chip type='button' onClick={handleChatDelete} disabled={chatSubmitting}>
+                  <Chip
+                    type='button'
+                    variant='border'
+                    onClick={handleChatDelete}
+                    disabled={chatSubmitting}
+                  >
                     Delete
                   </Chip>
                 )}
@@ -679,14 +888,15 @@ export function DeployModal({
                         : 'Launch Chat'}
                 </Chip>
               </div>
-            </ModalFooter>
+            </div>
           )}
           {activeTab === 'mcp' && isDeployed && hasMcpServers && (
-            <ModalFooter className='items-center justify-between'>
+            <div className='flex items-center justify-between gap-2 px-3 py-3'>
               <div />
               <div className='flex items-center gap-2'>
                 <Chip
                   type='button'
+                  variant='border'
                   onClick={() =>
                     navigateToSettings({
                       section: 'workflow-mcp-servers',
@@ -714,22 +924,22 @@ export function DeployModal({
                   )}
                 </Tooltip.Root>
               </div>
-            </ModalFooter>
+            </div>
           )}
-        </ModalContent>
-      </Modal>
+        </div>
+      </PopoverContent>
 
       <ChipConfirmModal
         open={Boolean(undeployTargetWorkflowId)}
         onOpenChange={(nextOpen) => {
           if (!nextOpen) setUndeployTargetWorkflowId(null)
         }}
-        srTitle='Undeploy API'
-        title='Undeploy API'
+        srTitle='Undeploy workflow'
+        title='Undeploy workflow'
         text={[
           'Are you sure you want to undeploy this workflow? ',
           {
-            text: 'This will remove the API endpoint and make it unavailable to external users.',
+            text: 'This removes the live endpoint and disconnects deployed access methods.',
             error: true,
           },
         ]}
@@ -759,7 +969,7 @@ export function DeployModal({
           workflowId={workflowId}
         />
       )}
-    </>
+    </Popover>
   )
 }
 
@@ -789,9 +999,9 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='amber' size='lg' dot className='cursor-default'>
+          <ChipTag variant='amber' className='cursor-default'>
             {isRetrying ? 'Retrying' : 'Pending'}
-          </Badge>
+          </ChipTag>
         </Tooltip.Trigger>
         <Tooltip.Content side='top' className='max-w-[320px]'>
           {isRetrying && <p className='text-caption'>{attemptErrorMessage}</p>}
@@ -813,9 +1023,9 @@ function StatusBadge({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <Badge variant='red' size='lg' dot className='cursor-default'>
+          <ChipTag variant='red' className='cursor-default'>
             Failed
-          </Badge>
+          </ChipTag>
         </Tooltip.Trigger>
         <Tooltip.Content side='top' className='max-w-[320px]'>
           <p className='text-caption'>{attemptErrorMessage || 'Deployment preparation failed.'}</p>
@@ -831,105 +1041,82 @@ function StatusBadge({
 
   if (!isDeployed) return null
 
-  return (
-    <Badge variant={needsRedeployment ? 'amber' : 'green'} size='lg' dot>
-      {needsRedeployment ? 'Update deployment' : 'Live'}
-    </Badge>
-  )
+  if (!needsRedeployment) {
+    return <ChipTag variant='gray'>Live</ChipTag>
+  }
+
+  return <ChipTag variant='amber'>Update deployment</ChipTag>
 }
 
 interface GeneralFooterProps {
   isDeployed?: boolean
   needsRedeployment: boolean
   isSubmitting: boolean
-  isUndeploying: boolean
   deployReadiness: DeployReadiness
   isDeploymentSettling: boolean
-  attemptStatus?: DeploymentAttemptStatus
-  attemptErrorMessage?: string | null
+  errorMessage?: string | null
   onDeploy: () => Promise<void>
   onRedeploy: () => Promise<void>
-  onUndeploy: () => void
 }
 
 function GeneralFooter({
   isDeployed,
   needsRedeployment,
   isSubmitting,
-  isUndeploying,
   deployReadiness,
   isDeploymentSettling,
-  attemptStatus,
-  attemptErrorMessage,
+  errorMessage,
   onDeploy,
   onRedeploy,
-  onUndeploy,
 }: GeneralFooterProps) {
-  const isDeployBlocked =
-    deployReadiness.isBlocked || isDeploymentSettling || isSubmitting || isUndeploying
+  const isDeployBlocked = deployReadiness.isBlocked || isDeploymentSettling || isSubmitting
   const blockedMessage =
-    deployReadiness.isBlocked && !deployReadiness.isSyncing && !isSubmitting && !isUndeploying
+    deployReadiness.isBlocked && !deployReadiness.isSyncing && !isSubmitting
       ? deployReadiness.tooltip
       : null
-  const status = (
-    <div className='flex min-w-0 flex-col gap-1'>
-      <StatusBadge
-        isDeployed={Boolean(isDeployed)}
-        needsRedeployment={needsRedeployment}
-        attemptStatus={attemptStatus}
-        attemptErrorMessage={attemptErrorMessage}
+  const footerMessage = errorMessage || blockedMessage
+  const deployActionLoading = isSubmitting || isDeploymentSettling
+  const isUpToDate = Boolean(isDeployed && !needsRedeployment && !isDeploymentSettling)
+  const actionLabel = deployActionLoading
+    ? isDeployed
+      ? 'Updating deployment…'
+      : 'Deploying workflow…'
+    : !isDeployed
+      ? 'Deploy workflow'
+      : needsRedeployment
+        ? 'Update deployment'
+        : 'Up to date'
+
+  return (
+    <div className='absolute inset-x-0 bottom-0 isolate z-20 flex flex-col items-stretch gap-1 px-3 py-3 [--scroll-edge-fade-surface:var(--popover-surface)]'>
+      <ScrollEdgeFade
+        position='bottom'
+        variant='action'
+        className={cn('z-0 transform-gpu', footerMessage ? 'h-[calc(100%+1rem)]' : 'h-full')}
+        visible
       />
-      {blockedMessage && (
-        <div
-          className='max-w-[300px] truncate text-[var(--text-muted)] text-xs'
-          title={blockedMessage}
+      {footerMessage && (
+        <ChipTag
+          variant='red'
+          className='relative z-10 w-full min-w-0'
+          role='alert'
+          title={footerMessage}
         >
-          {blockedMessage}
-        </div>
+          <span className='min-w-0 truncate'>{footerMessage}</span>
+        </ChipTag>
       )}
+      <Chip
+        variant='primary'
+        fullWidth
+        className='relative z-10 justify-center [&>span]:flex-none'
+        leftAdornment={
+          deployActionLoading ? <Loader className='size-[14px] shrink-0' animate /> : undefined
+        }
+        onClick={isDeployed ? onRedeploy : onDeploy}
+        disabled={isDeployBlocked || isUpToDate}
+      >
+        {actionLabel}
+      </Chip>
     </div>
   )
-  const deployActionLoading = isSubmitting || isDeploymentSettling
-  const deployLoader = deployActionLoading ? (
-    <Loader className={cn(chipContentIconClass, 'text-current')} animate />
-  ) : null
-
-  if (!isDeployed) {
-    return (
-      <ModalFooter className='items-center justify-between'>
-        {status}
-        <div className='flex items-center gap-2'>
-          <Chip
-            variant='primary'
-            onClick={onDeploy}
-            disabled={isDeployBlocked}
-            leftAdornment={deployLoader}
-          >
-            Deploy
-          </Chip>
-        </div>
-      </ModalFooter>
-    )
-  }
-
-  return (
-    <ModalFooter className='items-center justify-between'>
-      {status}
-      <div className='flex items-center gap-2'>
-        <Chip onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
-          {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-        </Chip>
-        {(needsRedeployment || isDeploymentSettling) && (
-          <Chip
-            variant='primary'
-            onClick={onRedeploy}
-            disabled={isDeployBlocked}
-            leftAdornment={deployLoader}
-          >
-            Update
-          </Chip>
-        )}
-      </div>
-    </ModalFooter>
-  )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index fc2ae3461c2..2a610ad01ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { useState } from 'react'
-import { Chip, Tooltip, toast } from '@sim/emcn'
+import { type MouseEvent, useState } from 'react'
+import { Chip, toast } from '@sim/emcn'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
-import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
+import { DeployPopover } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
   useChangeDetection,
   useDeployment,
@@ -21,7 +21,7 @@ interface DeployProps {
 }
 
 export function Deploy({ activeWorkflowId, userPermissions, disabled = false }: DeployProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isDeployPopoverOpen, setIsDeployPopoverOpen] = useState(false)
   const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
   const isRegistryLoading = hydrationPhase === 'idle' || hydrationPhase === 'state-loading'
   const { hasBlocks } = useCurrentWorkflow()
@@ -62,17 +62,18 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
     isEmpty ||
     (!isDeployed && deployReadiness.isBlocked && !deployReadiness.isSyncing)
 
-  const onDeployClick = async () => {
+  const onDeployClick = async (event?: MouseEvent<HTMLButtonElement>) => {
     if (isRegistryLoading || isDisabled || !activeWorkflowId) return
 
-    if (isDeploymentSettling) {
-      setIsModalOpen(true)
+    if (isDeployed || isDeploymentSettling) {
+      if (!event) setIsDeployPopoverOpen(true)
       return
     }
 
+    event?.preventDefault()
     const result = await handleDeployClick()
     if (result.shouldOpenModal) {
-      setIsModalOpen(true)
+      setIsDeployPopoverOpen(true)
     }
   }
 
@@ -130,33 +131,21 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
   }
 
   return (
-    <>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <span className='inline-flex'>
-            <Chip
-              variant='border'
-              onClick={onDeployClick}
-              disabled={isRegistryLoading || isDisabled}
-            >
-              {getButtonLabel()}
-            </Chip>
-          </span>
-        </Tooltip.Trigger>
-        <Tooltip.Content>{getTooltipText()}</Tooltip.Content>
-      </Tooltip.Root>
-
-      <DeployModal
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        workflowId={activeWorkflowId}
-        isDeployed={isDeployed}
-        needsRedeployment={changeDetected}
-        deployedState={deployedState}
-        isLoadingDeployedState={isLoadingDeployedState || isFetchingDeployedState}
-        deployReadiness={deployReadiness}
-        isDeploymentSettling={isDeploymentSettling}
-      />
-    </>
+    <DeployPopover
+      open={isDeployPopoverOpen}
+      onOpenChange={setIsDeployPopoverOpen}
+      workflowId={activeWorkflowId}
+      isDeployed={isDeployed}
+      needsRedeployment={changeDetected}
+      deployedState={deployedState}
+      isLoadingDeployedState={isLoadingDeployedState || isFetchingDeployedState}
+      deployReadiness={deployReadiness}
+      isDeploymentSettling={isDeploymentSettling}
+      trigger={
+        <Chip variant='border' onClick={onDeployClick} disabled={isRegistryLoading || isDisabled}>
+          {getButtonLabel()}
+        </Chip>
+      }
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/available-data.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/available-data.tsx
new file mode 100644
index 00000000000..5e09c56b8ed
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/available-data.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { Button, cn } from '@sim/emcn'
+import { ChevronDown, Database } from '@sim/emcn/icons'
+import { ConnectionBlocks } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks'
+import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
+
+interface AvailableDataProps {
+  connections: ConnectedBlock[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/** Compact entry point for browsing and inserting upstream workflow output references. */
+export function AvailableData({ connections, open, onOpenChange }: AvailableDataProps) {
+  if (connections.length === 0) return null
+
+  return (
+    <div className='flex flex-shrink-0 flex-col border-[var(--border)] border-t bg-[var(--bg)]'>
+      <Button
+        type='button'
+        variant='ghost'
+        className='h-9 w-full justify-start rounded-none px-4 hover-hover:bg-[var(--surface-3)]'
+        aria-expanded={open}
+        aria-controls='available-data-sources'
+        onClick={() => onOpenChange(!open)}
+      >
+        <Database className='size-[14px] text-[var(--text-icon)]' />
+        <span className='font-medium text-[var(--text-primary)] text-small'>Available data</span>
+        <span className='ml-0.5 text-[var(--text-muted)] text-small'>
+          · {connections.length} {connections.length === 1 ? 'source' : 'sources'}
+        </span>
+        <ChevronDown
+          className={cn(
+            'ml-auto size-[14px] text-[var(--text-icon)] transition-transform duration-150',
+            open && 'rotate-180'
+          )}
+        />
+      </Button>
+      {open && (
+        <div id='available-data-sources' className='border-[var(--border)] border-t'>
+          <ConnectionBlocks connections={connections} />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/index.ts
new file mode 100644
index 00000000000..3a3fd585547
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data/index.ts
@@ -0,0 +1 @@
+export { AvailableData } from './available-data'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/block-editor-sections.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/block-editor-sections.tsx
new file mode 100644
index 00000000000..3dddc13ebea
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/block-editor-sections.tsx
@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+import { Button, cn, Tooltip } from '@sim/emcn'
+import { CircleInfo } from '@sim/emcn/icons'
+import { groupSubBlocksIntoEditorSections } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections'
+import type { SubBlockConfig } from '@/blocks/types'
+
+interface BlockEditorSectionsProps {
+  blockType: string
+  subBlocks: SubBlockConfig[]
+  children: (subBlock: SubBlockConfig) => ReactNode
+}
+
+const FIELD_LIST_CLASS_NAME = 'flex flex-col gap-4'
+
+/**
+ * Adds consistent information hierarchy to selected representative blocks
+ * without changing the controls that render each subblock.
+ */
+export function BlockEditorSections({ blockType, subBlocks, children }: BlockEditorSectionsProps) {
+  const sections = groupSubBlocksIntoEditorSections(blockType, subBlocks)
+
+  if (!sections) {
+    return <div className={FIELD_LIST_CLASS_NAME}>{subBlocks.map(children)}</div>
+  }
+
+  return (
+    <div className='flex flex-col'>
+      {sections.map((section, index) => (
+        <section
+          key={section.id}
+          aria-labelledby={`block-editor-section-${section.id}`}
+          className={cn('flex flex-col', index === 0 ? 'pt-1 pb-4' : 'pt-4 pb-4')}
+        >
+          <div className='mb-4 flex items-center gap-1 pl-0.5'>
+            <h3
+              id={`block-editor-section-${section.id}`}
+              className='font-medium text-[var(--text-primary)] text-small'
+            >
+              {section.title}
+            </h3>
+            {section.description ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    className='size-[18px] rounded-full p-0'
+                    aria-label={`About ${section.title}`}
+                  >
+                    <CircleInfo className='size-[14px] text-[var(--text-icon)]' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  <p>{section.description}</p>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            ) : null}
+          </div>
+          <div className={FIELD_LIST_CLASS_NAME}>{section.subBlocks.map(children)}</div>
+        </section>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/index.ts
new file mode 100644
index 00000000000..98661acaa4c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections/index.ts
@@ -0,0 +1 @@
+export { BlockEditorSections } from './block-editor-sections'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index 3e5c792bced..a4ad5d54ada 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import { useCallback } from 'react'
-import { Badge, handleKeyboardActivation } from '@sim/emcn'
+import { Badge, cn, handleKeyboardActivation } from '@sim/emcn'
 import { ChevronDown } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import clsx from 'clsx'
 import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
 import { normalizeName } from '@/executor/constants'
 
@@ -28,6 +27,7 @@ interface FieldItemProps {
   hasChildren?: boolean
   isExpanded?: boolean
   onToggleExpand?: (path: string) => void
+  onSelectReference: (reference: string) => void
 }
 
 /**
@@ -41,6 +41,7 @@ export function FieldItem({
   hasChildren,
   isExpanded,
   onToggleExpand,
+  onSelectReference,
 }: FieldItemProps) {
   const handleDragStart = useCallback(
     (e: React.DragEvent) => {
@@ -70,29 +71,30 @@ export function FieldItem({
   const handleClick = useCallback(() => {
     if (hasChildren) {
       onToggleExpand?.(path)
+      return
     }
-  }, [hasChildren, onToggleExpand, path])
+    onSelectReference(`<${normalizeName(connection.name)}.${path}>`)
+  }, [connection.name, hasChildren, onSelectReference, onToggleExpand, path])
 
   return (
     <div
       role='treeitem'
       aria-expanded={hasChildren ? isExpanded : undefined}
-      tabIndex={hasChildren ? 0 : undefined}
+      tabIndex={0}
       draggable
       onDragStart={handleDragStart}
       onClick={handleClick}
       onKeyDown={(event) => {
-        if (!hasChildren) return
         handleKeyboardActivation(event, handleClick)
       }}
-      className={clsx(
+      className={cn(
         'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
-        hasChildren && 'cursor-pointer'
+        hasChildren ? 'cursor-pointer' : 'cursor-copy'
       )}
     >
       <span
-        className={clsx(
-          'min-w-0 flex-1 truncate',
+        className={cn(
+          'min-w-0 flex-1 truncate font-medium',
           'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
         )}
       >
@@ -103,8 +105,8 @@ export function FieldItem({
       </Badge>
       {hasChildren && (
         <ChevronDown
-          className={clsx(
-            'size-[14px] flex-shrink-0 transition-transform duration-100',
+          className={cn(
+            'size-3.5 flex-shrink-0 transition-transform duration-100',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 5d39c1b100e..a266540db6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -1,9 +1,17 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
-import { ChevronDown, handleKeyboardActivation } from '@sim/emcn'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  ChipInput,
+  cn,
+  handleKeyboardActivation,
+  thinScrollbarClass,
+  toast,
+  useCopyToClipboard,
+} from '@sim/emcn'
+import { Box, ChevronDown, Repeat, Search, Split } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import clsx from 'clsx'
+import { WorkflowTypeTag } from '@sim/workflow-renderer'
 import { useShallow } from 'zustand/react/shallow'
 import {
   FieldItem,
@@ -11,7 +19,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item'
 import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
 import { useBlockOutputFields } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-output-fields'
-import { BlockTile } from '@/blocks/block-tile'
+import { getBlock } from '@/blocks/registry'
 import { normalizeName } from '@/executor/constants'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { EMPTY_SUBBLOCK_VALUES, useSubBlockStore } from '@/stores/workflows/subblock/store'
@@ -21,7 +29,6 @@ const logger = createLogger('ConnectionBlocks')
 
 interface ConnectionBlocksProps {
   connections: ConnectedBlock[]
-  currentBlockId: string
 }
 
 interface FieldTreeNodesProps {
@@ -31,6 +38,7 @@ interface FieldTreeNodesProps {
   connection: ConnectedBlock
   isFieldExpanded: (connectionId: string, fieldPath: string) => boolean
   onToggleFieldExpansion: (connectionId: string, fieldPath: string) => void
+  onSelectReference: (reference: string) => void
 }
 
 function FieldTreeNodes({
@@ -40,6 +48,7 @@ function FieldTreeNodes({
   connection,
   isFieldExpanded,
   onToggleFieldExpansion,
+  onSelectReference,
 }: FieldTreeNodesProps) {
   return fields.map((field) => {
     const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name
@@ -56,6 +65,7 @@ function FieldTreeNodes({
           hasChildren={hasChildren}
           isExpanded={expanded}
           onToggleExpand={(p) => onToggleFieldExpansion(connection.id, p)}
+          onSelectReference={onSelectReference}
         />
         {hasChildren && expanded && (
           <div className='relative mt-0.5 ml-1.5 space-y-0.5 pl-2.5'>
@@ -67,6 +77,7 @@ function FieldTreeNodes({
               connection={connection}
               isFieldExpanded={isFieldExpanded}
               onToggleFieldExpansion={onToggleFieldExpansion}
+              onSelectReference={onSelectReference}
             />
           </div>
         )}
@@ -85,6 +96,7 @@ interface ConnectionItemProps {
   connectionRef: (el: HTMLDivElement | null) => void
   mergedSubBlocks: Record<string, any>
   sourceBlock: { triggerMode?: boolean } | undefined
+  onSelectReference: (reference: string) => void
 }
 
 /**
@@ -100,7 +112,10 @@ function ConnectionItem({
   connectionRef,
   mergedSubBlocks,
   sourceBlock,
+  onSelectReference,
 }: ConnectionItemProps) {
+  const blockConfig = getBlock(connection.type)
+
   const fields = useBlockOutputFields({
     blockId: connection.id,
     blockType: connection.type,
@@ -109,28 +124,39 @@ function ConnectionItem({
   })
   const hasFields = fields.length > 0
 
+  const Icon =
+    blockConfig?.icon ??
+    (connection.type === 'loop' ? Repeat : connection.type === 'parallel' ? Split : Box)
+  const reference = `<${normalizeName(connection.name)}>`
   return (
     <div className='mb-0.5 last:mb-0' ref={connectionRef}>
       <div
         role='treeitem'
         aria-expanded={hasFields ? isExpanded : undefined}
-        tabIndex={hasFields ? 0 : undefined}
+        tabIndex={0}
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
-        className={clsx(
+        className={cn(
           'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
-          hasFields && 'cursor-pointer'
+          hasFields ? 'cursor-pointer' : 'cursor-copy'
         )}
-        onClick={() => hasFields && onToggleExpand(connection.id)}
+        onClick={() => (hasFields ? onToggleExpand(connection.id) : onSelectReference(reference))}
         onKeyDown={(event) => {
-          if (!hasFields) return
-          handleKeyboardActivation(event, () => onToggleExpand(connection.id))
+          handleKeyboardActivation(event, () =>
+            hasFields ? onToggleExpand(connection.id) : onSelectReference(reference)
+          )
         }}
       >
-        <BlockTile blockType={connection.type} size='sm' />
+        <WorkflowTypeTag
+          type={connection.type}
+          typeLabel={connection.name}
+          Icon={Icon}
+          iconBgColor={blockConfig?.bgColor ?? ''}
+          isIntegration={blockConfig?.category === 'tools'}
+        />
         <span
-          className={clsx(
-            'truncate',
+          className={cn(
+            'truncate font-medium',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
           )}
         >
@@ -138,7 +164,7 @@ function ConnectionItem({
         </span>
         {hasFields && (
           <ChevronDown
-            className={clsx(
+            className={cn(
               'size-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]',
               !isExpanded && '-rotate-90'
             )}
@@ -156,6 +182,7 @@ function ConnectionItem({
             connection={connection}
             isFieldExpanded={isFieldExpanded}
             onToggleFieldExpansion={onToggleFieldExpansion}
+            onSelectReference={onSelectReference}
           />
         </div>
       )}
@@ -166,11 +193,13 @@ function ConnectionItem({
 /**
  * Connection blocks component that displays incoming connections with their schemas
  */
-export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBlocksProps) {
+export function ConnectionBlocks({ connections }: ConnectionBlocksProps) {
   const [expandedConnections, setExpandedConnections] = useState<Set<string>>(() => new Set())
   const [expandedFieldPaths, setExpandedFieldPaths] = useState<Set<string>>(() => new Set())
+  const [searchQuery, setSearchQuery] = useState('')
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const connectionRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const { copy } = useCopyToClipboard({ resetMs: 1500 })
 
   const { blocks } = useWorkflowStore(
     useShallow((state) => ({
@@ -248,6 +277,12 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
     [expandedFieldPaths]
   )
 
+  const handleSelectReference = async (reference: string) => {
+    if (await copy(reference)) {
+      toast.success('Reference copied')
+    }
+  }
+
   const handleConnectionDragStart = useCallback(
     (e: React.DragEvent, connection: ConnectedBlock) => {
       const normalizedBlockName = normalizeName(connection.name)
@@ -275,37 +310,101 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
     []
   )
 
+  const normalizedQuery = searchQuery.trim().toLowerCase()
+  const filteredConnections = useMemo(
+    () =>
+      normalizedQuery
+        ? connections.filter((connection) =>
+            connection.name.toLowerCase().includes(normalizedQuery)
+          )
+        : connections,
+    [connections, normalizedQuery]
+  )
+
   if (!connections || connections.length === 0) {
     return null
   }
 
+  const directConnections = filteredConnections.filter((connection) => connection.distance === 1)
+  const earlierConnections = filteredConnections.filter((connection) => connection.distance > 1)
+
+  const renderConnections = (items: ConnectedBlock[]) =>
+    items.map((connection) => {
+      const mergedSubBlocks = getMergedSubBlocks(connection.id)
+      const sourceBlock = blocks[connection.id]
+
+      return (
+        <ConnectionItem
+          key={connection.id}
+          connection={connection}
+          isExpanded={expandedConnections.has(connection.id)}
+          onToggleExpand={toggleConnectionExpansion}
+          isFieldExpanded={isFieldExpanded}
+          onToggleFieldExpansion={toggleFieldExpansion}
+          onConnectionDragStart={handleConnectionDragStart}
+          onSelectReference={handleSelectReference}
+          connectionRef={(el) => {
+            if (el) {
+              connectionRefs.current.set(connection.id, el)
+            } else {
+              connectionRefs.current.delete(connection.id)
+            }
+          }}
+          mergedSubBlocks={mergedSubBlocks}
+          sourceBlock={sourceBlock}
+        />
+      )
+    })
+
   return (
-    <div ref={scrollContainerRef} className='space-y-0.5'>
-      {connections.map((connection) => {
-        const mergedSubBlocks = getMergedSubBlocks(connection.id)
-        const sourceBlock = blocks[connection.id]
-
-        return (
-          <ConnectionItem
-            key={connection.id}
-            connection={connection}
-            isExpanded={expandedConnections.has(connection.id)}
-            onToggleExpand={toggleConnectionExpansion}
-            isFieldExpanded={isFieldExpanded}
-            onToggleFieldExpansion={toggleFieldExpansion}
-            onConnectionDragStart={handleConnectionDragStart}
-            connectionRef={(el) => {
-              if (el) {
-                connectionRefs.current.set(connection.id, el)
-              } else {
-                connectionRefs.current.delete(connection.id)
-              }
-            }}
-            mergedSubBlocks={mergedSubBlocks}
-            sourceBlock={sourceBlock}
-          />
-        )
-      })}
+    <div className='flex min-h-0 flex-col'>
+      <div className='px-3 py-2'>
+        <ChipInput
+          icon={Search}
+          value={searchQuery}
+          onChange={(event) => setSearchQuery(event.target.value)}
+          placeholder='Search sources...'
+          aria-label='Search available data sources'
+        />
+        <p className='mt-1.5 px-1 text-[var(--text-muted)] text-micro'>
+          Drag into a field, or click an output to copy its reference.
+        </p>
+      </div>
+      <div
+        ref={scrollContainerRef}
+        className={cn('max-h-[280px] overflow-y-auto px-3 pb-3', thinScrollbarClass)}
+      >
+        {filteredConnections.length === 0 ? (
+          <div className='py-6 text-center text-[var(--text-muted)] text-small'>
+            No matching sources
+          </div>
+        ) : (
+          <div className='space-y-3'>
+            {directConnections.length > 0 && (
+              <section aria-labelledby='direct-data-sources'>
+                <h3
+                  id='direct-data-sources'
+                  className='mb-1 px-1.5 font-medium text-[var(--text-muted)] text-micro'
+                >
+                  {directConnections.length === 1 ? 'Previous step' : 'Previous steps'}
+                </h3>
+                <div className='space-y-0.5'>{renderConnections(directConnections)}</div>
+              </section>
+            )}
+            {earlierConnections.length > 0 && (
+              <section aria-labelledby='earlier-data-sources'>
+                <h3
+                  id='earlier-data-sources'
+                  className='mb-1 px-1.5 font-medium text-[var(--text-muted)] text-micro'
+                >
+                  Earlier steps
+                </h3>
+                <div className='space-y-0.5'>{renderConnections(earlierConnections)}</div>
+              </section>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/editor-empty-state/editor-empty-state.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/editor-empty-state/editor-empty-state.tsx
new file mode 100644
index 00000000000..8925022b78a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/editor-empty-state/editor-empty-state.tsx
@@ -0,0 +1,196 @@
+import { Duplicate, PlayOutline, Trash } from '@sim/emcn'
+import { Circle, Unlock } from '@sim/emcn/icons'
+import { WorkflowBlockBorder, type WorkflowBorderPort } from '@sim/workflow-renderer'
+import { getSmoothStepPath, Position } from 'reactflow'
+import { EmptyState } from '@/components/empty-state/empty-state'
+
+const MINIATURE_BLOCK_PORTS: WorkflowBorderPort[] = [
+  {
+    id: 'target',
+    side: 'left',
+    position: 'center',
+    plateau: 32,
+    restAmplitude: 1,
+    hoverAmplitude: 1,
+  },
+  {
+    id: 'source-upper',
+    side: 'right',
+    position: 59,
+    plateau: 24,
+    restAmplitude: 1,
+    hoverAmplitude: 1,
+  },
+  {
+    id: 'source-lower',
+    side: 'right',
+    position: 87,
+    plateau: 24,
+    restAmplitude: 1,
+    hoverAmplitude: 1,
+  },
+  {
+    id: 'action-menu',
+    side: 'top',
+    position: { fromEnd: 107 },
+    plateau: 166,
+    restAmplitude: 7,
+    hoverAmplitude: 7,
+    magnetizable: false,
+  },
+]
+
+const [LEFT_CONNECTION_PATH] = getSmoothStepPath({
+  sourceX: 0,
+  sourceY: 92,
+  sourcePosition: Position.Right,
+  targetX: 62,
+  targetY: 92,
+  targetPosition: Position.Left,
+  borderRadius: 6,
+  offset: 12,
+})
+
+const [UPPER_RIGHT_CONNECTION_PATH] = getSmoothStepPath({
+  sourceX: 258,
+  sourceY: 86,
+  sourcePosition: Position.Right,
+  targetX: 320,
+  targetY: 42,
+  targetPosition: Position.Left,
+  centerX: 289,
+  borderRadius: 6,
+  offset: 12,
+})
+
+const [LOWER_RIGHT_CONNECTION_PATH] = getSmoothStepPath({
+  sourceX: 258,
+  sourceY: 108,
+  sourcePosition: Position.Right,
+  targetX: 320,
+  targetY: 142,
+  targetPosition: Position.Left,
+  centerX: 289,
+  borderRadius: 6,
+  offset: 12,
+})
+
+/**
+ * Compact workflow vignette rendered with the canonical workflow block silhouette.
+ */
+function EditorEmptyStateGraphic() {
+  return (
+    <div aria-hidden='true' className='relative h-[148px] w-[320px] overflow-hidden'>
+      <svg className='absolute inset-0' fill='none' viewBox='0 0 320 148' width='320' height='148'>
+        <defs>
+          <linearGradient
+            id='editor-empty-left-connection'
+            x1='0'
+            y1='0'
+            x2='62'
+            y2='0'
+            gradientUnits='userSpaceOnUse'
+          >
+            <stop stopColor='var(--workflow-edge)' stopOpacity='0' />
+            <stop offset='0.42' stopColor='var(--workflow-edge)' />
+            <stop offset='1' stopColor='var(--workflow-edge)' />
+          </linearGradient>
+          <linearGradient
+            id='editor-empty-right-connection'
+            x1='258'
+            y1='0'
+            x2='320'
+            y2='0'
+            gradientUnits='userSpaceOnUse'
+          >
+            <stop stopColor='var(--workflow-edge)' />
+            <stop offset='0.58' stopColor='var(--workflow-edge)' />
+            <stop offset='1' stopColor='var(--workflow-edge)' stopOpacity='0' />
+          </linearGradient>
+        </defs>
+        <path
+          d={LEFT_CONNECTION_PATH}
+          stroke='url(#editor-empty-left-connection)'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d={UPPER_RIGHT_CONNECTION_PATH}
+          stroke='url(#editor-empty-right-connection)'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d={LOWER_RIGHT_CONNECTION_PATH}
+          stroke='url(#editor-empty-right-connection)'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </svg>
+
+      <div className='absolute top-[40px] left-[62px] h-[104px] w-[196px]'>
+        <div className='relative h-[132px] w-[250px] origin-top-left scale-[0.784]'>
+          <WorkflowBlockBorder
+            ports={MINIATURE_BLOCK_PORTS}
+            cursorSwellEnabled={false}
+            hasRing={false}
+            ringStyles=''
+            staticActionMenuSwell
+            width={250}
+            height={132}
+          />
+
+          <div className='-top-[28px] absolute right-[24px] z-10 flex h-[28px] w-[166px] items-center gap-[2px] overflow-hidden px-[3px] py-0.5 text-[var(--text-icon)]'>
+            <span className='flex h-[24px] w-[40px] shrink-0 items-center justify-center'>
+              <PlayOutline className='size-[14px] translate-x-[8px] translate-y-px' />
+            </span>
+            <span className='flex size-[24px] shrink-0 items-center justify-center'>
+              <Circle className='size-[14px]' />
+            </span>
+            <span className='flex size-[24px] shrink-0 items-center justify-center'>
+              <Unlock className='size-[14px]' />
+            </span>
+            <span className='flex size-[24px] shrink-0 items-center justify-center'>
+              <Duplicate className='size-[14px]' />
+            </span>
+            <span className='flex h-[24px] w-[40px] shrink-0 items-center justify-center'>
+              <Trash className='-translate-x-[6px] size-[14px] translate-y-px' />
+            </span>
+          </div>
+
+          <div className='relative z-10 flex h-[40px] items-center justify-between px-2'>
+            <span className='h-3 w-[92px] rounded-[3px] bg-[color-mix(in_srgb,var(--text-secondary)_22%,transparent)]' />
+            <span className='h-[20px] w-[52px] rounded-[6px] bg-[var(--surface-5)]' />
+          </div>
+
+          <div className='relative z-10 space-y-2 p-2'>
+            <span className='block h-3 w-[148px] rounded-[3px] bg-[var(--surface-4)]' />
+            <span className='block h-3 w-[102px] rounded-[3px] bg-[var(--surface-4)]' />
+          </div>
+
+          <div className='absolute right-2 bottom-2 left-2 z-10 flex h-[24px] items-center rounded-[6px] bg-[var(--surface-5)] px-2'>
+            <span className='ml-auto h-[16px] w-[30px] rounded-full bg-[var(--border-1)] p-0.5'>
+              <span className='block size-3 rounded-full bg-[var(--surface-2)] shadow-sm' />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Guidance shown when the editor has no selected workflow block.
+ */
+export function EditorEmptyState() {
+  return (
+    <EmptyState
+      graphic={<EditorEmptyStateGraphic />}
+      title='Select a block to edit'
+      description='Choose a block on the canvas to view and configure its settings.'
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts
index 3b92ae80c5b..1cc2c626cbe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts
@@ -1,3 +1,4 @@
+export { AvailableData } from './available-data'
 export { ConnectionBlocks } from './connection-blocks/connection-blocks'
 export { RetrySettings } from './retry-settings/retry-settings'
 export { SubBlock } from './sub-block/sub-block'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.test.tsx
new file mode 100644
index 00000000000..8ab608c5f4f
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.test.tsx
@@ -0,0 +1,49 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { BooleanControl } from './boolean-control'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(props: React.ComponentProps<typeof BooleanControl>) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(<BooleanControl {...props} />))
+}
+
+describe('BooleanControl', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+  })
+
+  it('maps the On segment to a boolean value', () => {
+    const onChange = vi.fn()
+    mount({ value: false, onChange, label: 'Cache prompts' })
+
+    const onButton = [
+      ...(container?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? []),
+    ].find((button) => button.textContent === 'On')
+    if (!onButton) throw new Error('On segment did not render')
+    act(() => onButton.click())
+
+    expect(onChange).toHaveBeenCalledWith(true)
+    expect(container?.textContent).toContain('Cache prompts')
+  })
+
+  it('disables every segment in preview state', () => {
+    mount({ value: true, onChange: vi.fn(), disabled: true, 'aria-label': 'Preview toggle' })
+
+    const buttons = container?.querySelectorAll<HTMLButtonElement>('[role="radio"]')
+    expect(buttons).toHaveLength(2)
+    expect([...buttons!].every((button) => button.disabled)).toBe(true)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.tsx
new file mode 100644
index 00000000000..146058bd8be
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/boolean-control.tsx
@@ -0,0 +1,55 @@
+import { ChipSwitch, cn, Label } from '@sim/emcn'
+
+const BOOLEAN_CONTROL_OPTIONS = [
+  { value: 'off', label: 'Off' },
+  { value: 'on', label: 'On' },
+] as const
+
+type BooleanControlValue = (typeof BOOLEAN_CONTROL_OPTIONS)[number]['value']
+
+interface BooleanControlProps {
+  value: boolean
+  onChange: (value: boolean) => void
+  label?: string
+  disabled?: boolean
+  className?: string
+  'aria-label'?: string
+}
+
+/**
+ * Presents boolean workflow values through the canonical segmented chip control.
+ * Value storage and workflow persistence remain the caller's responsibility.
+ */
+export function BooleanControl({
+  value,
+  onChange,
+  label,
+  disabled = false,
+  className,
+  'aria-label': ariaLabel,
+}: BooleanControlProps) {
+  const handleChange = (nextValue: BooleanControlValue) => {
+    onChange(nextValue === 'on')
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 items-center gap-3',
+        label ? 'justify-between' : 'justify-start',
+        className
+      )}
+    >
+      {label ? (
+        <Label className='min-w-0 font-normal text-[var(--text-body)] text-small'>{label}</Label>
+      ) : null}
+      <ChipSwitch<BooleanControlValue>
+        options={BOOLEAN_CONTROL_OPTIONS}
+        value={value ? 'on' : 'off'}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={ariaLabel ?? label ?? 'Boolean setting'}
+      />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/index.ts
new file mode 100644
index 00000000000..d18ecda2f37
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control/index.ts
@@ -0,0 +1 @@
+export { BooleanControl } from './boolean-control'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index e883cafecf4..6b6e2322196 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -1,20 +1,19 @@
 import type { ReactElement } from 'react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import {
+  Button,
   CODE_LINE_HEIGHT_PX,
   Code as CodeEditor,
   calculateGutterWidth,
   cn,
-  Duplicate,
   getCodeEditorProps,
   highlight,
   languages,
 } from '@sim/emcn'
-import { Check, Wand } from '@sim/emcn/icons'
+import { Check, Duplicate, Wand } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
 import Editor from 'react-simple-code-editor'
-import { Button } from '@/components/ui/button'
 import { CodeLanguage } from '@/lib/execution/languages'
 import {
   isLikelyReferenceSegment,
@@ -881,19 +880,17 @@ export const Code = memo(function Code({
       {showCopyButton && code && (
         <Button
           type='button'
-          variant='ghost'
-          size='sm'
+          variant='quiet'
+          size='icon'
           onClick={handleCopy}
           disabled={!code}
-          className={cn(
-            'size-8 p-0',
-            'text-muted-foreground/60 transition-all duration-200',
-            'hover-hover:scale-105 hover-hover:bg-muted/50 hover-hover:text-foreground',
-            'active:scale-95'
-          )}
           aria-label='Copy code'
         >
-          {copied ? <Check className='h-3.5 w-3.5' /> : <Duplicate className='h-3.5 w-3.5' />}
+          {copied ? (
+            <Check className='size-[14px] text-[var(--badge-green-text)]' />
+          ) : (
+            <Duplicate className='size-[14px]' />
+          )}
         </Button>
       )}
       {!hideInternalWand && (
@@ -909,7 +906,11 @@ export const Code = memo(function Code({
         />
       )}
 
-      <CodeEditor.Container onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
+      <CodeEditor.Container
+        appearance='field'
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={handleDrop}
+      >
         <div className='absolute top-2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
           {wandConfig?.enabled &&
             !isAiStreaming &&
@@ -917,14 +918,13 @@ export const Code = memo(function Code({
             !readOnly &&
             !hideInternalWand && (
               <Button
-                variant='ghost'
+                variant='quiet'
                 size='icon'
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
               >
-                <Wand className='size-4' />
+                <Wand className='size-[14px]' />
               </Button>
             )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index 58704bfd47f..13357d003ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Combobox, type ComboboxOption, cn } from '@sim/emcn'
+import { ChipCombobox, type ComboboxOption, cn } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
 import { useReactFlow } from 'reactflow'
 import { SandboxCreateModal } from '@/app/workspace/[workspaceId]/settings/components/sandboxes/components/sandbox-create-modal'
@@ -529,7 +529,7 @@ export const ComboBox = memo(function ComboBox({
           }
 
           return (
-            <Combobox
+            <ChipCombobox
               options={comboboxOptions}
               value={inputValue}
               selectedValue={value ?? ''}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index f29ef3eae1d..6264189c03e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -5,10 +5,10 @@ import {
   Code,
   calculateGutterWidth,
   cn,
+  FieldCard,
   getCodeEditorProps,
   highlight,
   languages,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { ChevronDown, ChevronsUpDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
@@ -31,6 +31,7 @@ import {
   getValidWorkflowSearchRange,
   type WorkflowSearchTextHighlight,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextarea } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import {
   checkTagTrigger,
   TagDropdown,
@@ -925,7 +926,7 @@ export function ConditionInput({
   // Show loading or empty state if not ready or no blocks
   if (!isReady || conditionalBlocks.length === 0) {
     return (
-      <div className='flex min-h-[150px] items-center justify-center text-muted-foreground'>
+      <div className='flex min-h-[150px] items-center justify-center text-[var(--text-muted)]'>
         Loading conditions…
       </div>
     )
@@ -941,38 +942,26 @@ export function ConditionInput({
           valuePath: [index, 'value'],
         })
         return (
-          <div
+          <FieldCard
             key={block.id}
-            className='group relative overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'
-          >
-            <div
-              className={cn(
-                'flex items-center justify-between overflow-hidden bg-transparent px-2.5 py-[5px]',
-                isRouterMode
-                  ? 'rounded-t-[4px] border-[var(--border-1)] border-b'
-                  : isElseConditionTitle(block.title)
-                    ? 'rounded-sm border-0'
-                    : 'rounded-t-[4px] border-[var(--border-1)] border-b'
-              )}
-            >
-              <span className='text-[var(--text-tertiary)] text-sm'>
-                {isRouterMode ? `Route ${index + 1}` : block.title}
-              </span>
-              <div className='flex items-center gap-2'>
+            title={isRouterMode ? `Route ${index + 1}` : block.title}
+            flush
+            actions={
+              <>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='quiet'
+                      size='icon'
                       onClick={() => addBlock(block.id)}
                       disabled={
                         isPreview ||
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      aria-label='Add block'
                     >
                       <Plus className='size-[14px]' />
-                      <span className='sr-only'>Add Block</span>
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>Add Block</Tooltip.Content>
@@ -981,7 +970,8 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='quiet'
+                      size='icon'
                       onClick={() => moveBlock(block.id, 'up')}
                       disabled={
                         isPreview ||
@@ -989,10 +979,9 @@ export function ConditionInput({
                         disabled ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      aria-label='Move up'
                     >
                       <ChevronUp className='size-[14px]' />
-                      <span className='sr-only'>Move Up</span>
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>Move Up</Tooltip.Content>
@@ -1001,7 +990,8 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='quiet'
+                      size='icon'
                       onClick={() => moveBlock(block.id, 'down')}
                       disabled={
                         isPreview ||
@@ -1011,10 +1001,9 @@ export function ConditionInput({
                           isElseConditionTitle(conditionalBlocks[index + 1]?.title)) ||
                         (!isRouterMode && isElseConditionTitle(block.title))
                       }
-                      className='h-auto p-0'
+                      aria-label='Move down'
                     >
                       <ChevronDown className='size-[14px]' />
-                      <span className='sr-only'>Move Down</span>
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>Move Down</Tooltip.Content>
@@ -1023,23 +1012,24 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='quiet'
+                      size='icon'
                       onClick={() => removeBlock(block.id)}
                       disabled={
                         isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                       }
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      aria-label={isRouterMode ? 'Delete route' : 'Delete condition'}
                     >
-                      <Trash className='size-[14px]' />
-                      <span className='sr-only'>Delete Block</span>
+                      <Trash className='size-[14px] text-[var(--text-error)]' />
                     </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content>
                     {isRouterMode ? 'Delete Route' : 'Delete Condition'}
                   </Tooltip.Content>
                 </Tooltip.Root>
-              </div>
-            </div>
+              </>
+            }
+          >
             {/* Router mode: show description textarea with tag/env var support */}
             {isRouterMode && (
               <div
@@ -1047,10 +1037,24 @@ export function ConditionInput({
                 onDragOver={(e) => e.preventDefault()}
                 onDrop={(e) => handleDrop(block.id, e)}
               >
-                <Textarea
+                <ReferenceTextarea
                   ref={(el) => {
                     if (el) inputRefs.current.set(block.id, el)
                   }}
+                  overlayRef={(el) => {
+                    if (el) {
+                      overlayRefs.current.set(block.id, el)
+                    } else {
+                      overlayRefs.current.delete(block.id)
+                    }
+                  }}
+                  overlayContent={formatDisplayText(block.value, {
+                    accessiblePrefixes,
+                    highlightAll: !accessiblePrefixes,
+                    workflowSearchHighlight,
+                  })}
+                  interactiveOverlay={isPreview || disabled}
+                  containerStyle={{ height: `${getRouterHeight(block.id)}px` }}
                   data-router-block-id={block.id}
                   value={block.value}
                   onChange={(e) => {
@@ -1096,50 +1100,19 @@ export function ConditionInput({
                       )
                     }, 150)
                   }}
-                  onScroll={(e) => {
-                    const overlay = overlayRefs.current.get(block.id)
-                    if (overlay) {
-                      overlay.scrollTop = e.currentTarget.scrollTop
-                      overlay.scrollLeft = e.currentTarget.scrollLeft
-                    }
-                  }}
                   placeholder='Describe when this route should be taken...'
                   disabled={disabled || isPreview}
-                  className='min-h-[100px] resize-none rounded-none border-0 px-3 py-2 text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
+                  className='min-h-[100px] rounded-none border-0 px-3 py-2'
+                  overlayClassName='px-3 py-2'
                   rows={4}
-                  style={{ height: `${getRouterHeight(block.id)}px` }}
                 />
-                <div
-                  ref={(el) => {
-                    if (el) {
-                      overlayRefs.current.set(block.id, el)
-                    } else {
-                      overlayRefs.current.delete(block.id)
-                    }
-                  }}
-                  className={cn(
-                    'pointer-events-none absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-3 py-2 font-sans text-sm',
-                    (isPreview || disabled) && 'opacity-50'
-                  )}
-                  style={{
-                    fontFamily: 'inherit',
-                    lineHeight: 'inherit',
-                    height: `${getRouterHeight(block.id)}px`,
-                  }}
-                >
-                  {formatDisplayText(block.value, {
-                    accessiblePrefixes,
-                    highlightAll: !accessiblePrefixes,
-                    workflowSearchHighlight,
-                  })}
-                </div>
 
                 {/* Custom resize handle */}
                 {!isPreview && !disabled && (
                   <div
                     role='separator'
                     aria-orientation='horizontal'
-                    className='absolute right-1 bottom-1 flex size-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                    className='absolute right-1 bottom-1 flex size-4 cursor-ns-resize items-center justify-center rounded-md border border-[var(--border-1)] bg-[var(--surface-4)]'
                     onMouseDown={(e) => startRouterResize(e, block.id)}
                     onDragStart={(e) => {
                       e.preventDefault()
@@ -1217,9 +1190,10 @@ export function ConditionInput({
 
                 return (
                   <Code.Container
+                    appearance='field'
                     onDragOver={(e) => e.preventDefault()}
                     onDrop={(e) => handleDrop(block.id, e)}
-                    className='rounded-t-none border-0'
+                    className='rounded-none border-0'
                   >
                     <Code.Gutter width={blockGutterWidth}>
                       {renderLineNumbers(block.id)}
@@ -1354,7 +1328,7 @@ export function ConditionInput({
                   </Code.Container>
                 )
               })()}
-          </div>
+          </FieldCard>
         )
       })}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index bd1cd4d6114..515ecfe7bbf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Button, Combobox, type ComboboxOptionGroup } from '@sim/emcn'
+import { Button, ChipCombobox, type ComboboxOptionGroup } from '@sim/emcn'
 import { Key, SquareArrowUpRight } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
@@ -431,7 +431,7 @@ export function CredentialSelector({
 
   return (
     <div>
-      <Combobox
+      <ChipCombobox
         options={comboboxOptions}
         groups={comboboxGroups}
         value={displayValue}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index bf2b4bdb42d..a90b818f556 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -4,11 +4,9 @@ import { useMemo, useRef } from 'react'
 import {
   Badge,
   Button,
-  Combobox,
+  ChipCombobox,
+  CollapsibleCard,
   type ComboboxOption,
-  cn,
-  handleKeyboardActivation,
-  Input,
   Label,
   Trash,
 } from '@sim/emcn'
@@ -16,6 +14,7 @@ import { Plus } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -211,7 +210,7 @@ export function DocumentTagEntry({
     const tagCount = tags.filter((t) => t.tagName?.trim()).length
     return (
       <div className='space-y-1'>
-        <Label className='text-muted-foreground text-xs'>Document Tags</Label>
+        <Label className='font-medium text-muted-foreground text-xs'>Document Tags</Label>
         <div className='text-muted-foreground text-sm'>
           {tagCount > 0 ? `${tagCount} tag(s) configured` : 'No tags'}
         </div>
@@ -223,7 +222,7 @@ export function DocumentTagEntry({
     return (
       <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
-          <p className='text-[var(--text-secondary)] text-sm'>
+          <p className='font-medium text-[var(--text-secondary)] text-sm'>
             No tags defined for this knowledge base
           </p>
           <p className='mt-1 text-[var(--text-muted)] text-xs'>
@@ -234,58 +233,6 @@ export function DocumentTagEntry({
     )
   }
 
-  /**
-   * Renders the tag header with name, badge, and action buttons
-   * Shows tag name only when collapsed (as summary), generic label when expanded
-   */
-  const renderTagHeader = (tag: DocumentTag, index: number) => (
-    <div
-      role='group'
-      aria-label={`Tag ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(tag.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(tag.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
-        </span>
-        {tag.collapsed && tag.tagName && (
-          <Badge variant='type' size='sm'>
-            {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button
-          variant='ghost'
-          onClick={addTag}
-          disabled={isReadOnly || !canAddMoreTags}
-          className='h-auto p-0'
-        >
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Tag</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => removeTag(tag.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Tag</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   /**
    * Renders the value input with tag dropdown support
    */
@@ -314,10 +261,25 @@ export function DocumentTagEntry({
 
     return (
       <div className='relative'>
-        <Input
+        <ReferenceTextInput
           ref={(el) => {
             if (el) valueInputRefs.current[cellKey] = el
           }}
+          overlayRef={(el) => {
+            if (el) overlayRefs.current[cellKey] = el
+          }}
+          overlayContent={
+            <div className='min-w-fit whitespace-pre'>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+          interactiveOverlay={isReadOnly}
+          inputClassName='allow-scroll'
           value={fieldValue}
           onChange={handlers.onChange}
           onKeyDown={handlers.onKeyDown}
@@ -334,26 +296,8 @@ export function DocumentTagEntry({
           disabled={isReadOnly}
           autoComplete='off'
           placeholder={placeholder}
-          className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
+          className='w-full'
         />
-        <div
-          ref={(el) => {
-            if (el) overlayRefs.current[cellKey] = el
-          }}
-          className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-            !isReadOnly && 'pointer-events-none'
-          )}
-        >
-          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
@@ -385,10 +329,10 @@ export function DocumentTagEntry({
     }))
 
     return (
-      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <Combobox
+          <ChipCombobox
             options={tagOptions}
             value={tag.tagName}
             onChange={(value) => updateTag(tag.id, 'tagName', value)}
@@ -401,24 +345,51 @@ export function DocumentTagEntry({
           <Label className='text-small'>Value</Label>
           {renderValueInput(tag)}
         </div>
-      </div>
+      </>
     )
   }
 
   return (
     <div className='space-y-2'>
       {tags.map((tag, index) => (
-        <div
+        <CollapsibleCard
           key={tag.id}
           data-tag-id={tag.id}
-          className={cn(
-            'rounded-sm border border-[var(--border-1)]',
-            tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          title={tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
+          badge={
+            tag.collapsed && tag.tagName ? (
+              <Badge variant='type' size='sm'>
+                {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
+              </Badge>
+            ) : undefined
+          }
+          actions={
+            <>
+              <Button
+                variant='quiet'
+                size='icon'
+                onClick={addTag}
+                disabled={isReadOnly || !canAddMoreTags}
+                aria-label='Add tag'
+              >
+                <Plus className='size-[14px]' />
+              </Button>
+              <Button
+                variant='quiet'
+                size='icon'
+                onClick={() => removeTag(tag.id)}
+                disabled={isReadOnly}
+                aria-label='Delete tag'
+              >
+                <Trash className='size-[14px] text-[var(--text-error)]' />
+              </Button>
+            </>
+          }
+          collapsed={tag.collapsed ?? false}
+          onToggleCollapse={() => toggleCollapse(tag.id)}
         >
-          {renderTagHeader(tag, index)}
-          {!tag.collapsed && renderTagContent(tag)}
-        </div>
+          {renderTagContent(tag)}
+        </CollapsibleCard>
       ))}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
index 1eb22d6b5a8..9eccaa8293c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipSelect, type ChipSelectOption, ChipTag } from '@sim/emcn'
 import { generateId } from '@sim/utils/id'
 import { isRecordLike } from '@sim/utils/object'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -210,7 +210,7 @@ export const Dropdown = memo(function Dropdown({
     return denied
   }, [subBlockId, blockConfig, allOptions, isToolAllowed])
 
-  const comboboxOptions = useMemo((): ComboboxOption[] => {
+  const selectOptions = useMemo((): ChipSelectOption[] => {
     const toLabel = (raw: string) => (preserveLabelCase ? raw : raw.toLowerCase())
     return allOptions.map((opt) => {
       if (typeof opt === 'string') {
@@ -226,13 +226,13 @@ export const Dropdown = memo(function Dropdown({
   }, [allOptions, deniedOperationIds, preserveLabelCase])
 
   const optionMap = useMemo(() => {
-    return new Map(comboboxOptions.map((opt) => [opt.value, opt.label]))
-  }, [comboboxOptions])
+    return new Map(selectOptions.map((opt) => [opt.value, opt.label]))
+  }, [selectOptions])
 
   const defaultOptionValue = useMemo(() => {
     if (multiSelect) return undefined
 
-    const firstSelectable = comboboxOptions.find((opt) => !opt.hidden)
+    const firstSelectable = selectOptions.find((opt) => !opt.hidden)
     if (defaultValue !== undefined) {
       // Don't seed a denied operation as the default; use the first allowed option.
       if (deniedOperationIds.has(defaultValue)) {
@@ -242,7 +242,7 @@ export const Dropdown = memo(function Dropdown({
     }
 
     return firstSelectable?.value
-  }, [defaultValue, comboboxOptions, deniedOperationIds, multiSelect])
+  }, [defaultValue, selectOptions, deniedOperationIds, multiSelect])
 
   useEffect(() => {
     if (multiSelect || defaultOptionValue === undefined) {
@@ -427,25 +427,27 @@ export const Dropdown = memo(function Dropdown({
     )
   }, [activeSearchTarget, blockId, multiSelect, optionMap, singleValue, subBlockId])
 
-  const isSearchable = searchable || (subBlockId === 'operation' && comboboxOptions.length > 5)
+  const isSearchable = searchable || (subBlockId === 'operation' && selectOptions.length > 5)
 
   return (
-    <Combobox
-      options={comboboxOptions}
+    <ChipSelect
+      options={selectOptions}
       value={multiSelect ? undefined : (singleValue ?? undefined)}
       multiSelectValues={multiSelect ? (multiValues ?? undefined) : undefined}
       onChange={handleChange}
       onMultiSelectChange={handleMultiSelectChange}
       placeholder={placeholder}
       disabled={disabled}
-      editable={false}
       onOpenChange={handleOpenChange}
-      overlayContent={multiSelectOverlay ?? singleSelectOverlay}
+      displayLabel={multiSelectOverlay ?? singleSelectOverlay}
       multiSelect={multiSelect}
       isLoading={isLoadingOptions}
       error={fetchError}
       searchable={isSearchable}
       searchPlaceholder='Search...'
+      align='start'
+      fullWidth
+      dropdownWidth='trigger'
     />
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
index b20ba4efc87..8297bf54f75 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
@@ -281,7 +281,7 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
   }
 
   return (
-    <Popover open={visible} onOpenChange={(open) => !open && onClose?.()} colorScheme='inverted'>
+    <Popover open={visible} onOpenChange={(open) => !open && onClose?.()}>
       <PopoverAnchor asChild>
         <div
           className={cn('pointer-events-none', className)}
@@ -296,12 +296,12 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
         />
       </PopoverAnchor>
       <PopoverContent
+        appearance='dropdown'
         maxHeight={maxHeight !== 'none' ? 192 : 400}
         className='min-w-[280px]'
         side={side}
         align='start'
         collisionPadding={6}
-        style={{ zIndex: 100000000 }}
         onOpenAutoFocus={(e) => e.preventDefault()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 6c659aff3dc..2055ac09a41 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -1,8 +1,12 @@
 import { useMemo, useRef } from 'react'
-import { Button, cn, Input, Label, Textarea, Tooltip } from '@sim/emcn'
+import { Button, Label, Tooltip } from '@sim/emcn'
 import { Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import {
+  ReferenceTextarea,
+  ReferenceTextInput,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
@@ -139,7 +143,7 @@ export function EvalInput({
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
     <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
-      <span className='text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
+      <span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
       <div className='flex items-center gap-2'>
         <Tooltip.Root key={`add-${metric.id}`}>
           <Tooltip.Trigger asChild>
@@ -187,21 +191,13 @@ export function EvalInput({
           <div className='flex flex-col gap-2 border-[var(--border-1)] px-2.5 pt-1.5 pb-2.5'>
             <div key={`name-${metric.id}`} className='flex flex-col gap-1.5'>
               {renderFieldLabel('Name')}
-              <div className='relative'>
-                <Input
-                  name='name'
-                  value={metric.name}
-                  onChange={(e) => updateMetric(metric.id, 'name', e.target.value)}
-                  placeholder='Accuracy'
-                  disabled={isPreview || disabled}
-                  className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
-                />
-                <div
-                  className={cn(
-                    'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm',
-                    (isPreview || disabled) && 'opacity-50'
-                  )}
-                >
+              <ReferenceTextInput
+                name='name'
+                value={metric.name}
+                onChange={(e) => updateMetric(metric.id, 'name', e.target.value)}
+                placeholder='Accuracy'
+                disabled={isPreview || disabled}
+                overlayContent={
                   <span className='truncate'>
                     {formatDisplayText(metric.name || '', {
                       accessiblePrefixes,
@@ -209,8 +205,8 @@ export function EvalInput({
                       workflowSearchHighlight: getMetricSearchHighlight(index, ['name']),
                     })}
                   </span>
-                </div>
-              </div>
+                }
+              />
             </div>
 
             <div key={`description-${metric.id}`} className='flex flex-col gap-1.5'>
@@ -231,10 +227,26 @@ export function EvalInput({
 
                   return (
                     <>
-                      <Textarea
+                      <ReferenceTextarea
                         ref={(el) => {
                           if (el) descriptionInputRefs.current[metric.id] = el
                         }}
+                        overlayRef={(el) => {
+                          if (el) descriptionOverlayRefs.current[metric.id] = el
+                          else delete descriptionOverlayRefs.current[metric.id]
+                        }}
+                        overlayContent={
+                          <div className='whitespace-pre-wrap'>
+                            {formatDisplayText(metric.description || '', {
+                              accessiblePrefixes,
+                              highlightAll: !accessiblePrefixes,
+                              workflowSearchHighlight: getMetricSearchHighlight(index, [
+                                'description',
+                              ]),
+                            })}
+                          </div>
+                        }
+                        interactiveOverlay={isPreview || disabled}
                         value={metric.description}
                         onChange={handlers.onChange}
                         onKeyDown={handlers.onKeyDown}
@@ -243,30 +255,10 @@ export function EvalInput({
                         onFocus={handlers.onFocus}
                         placeholder='How accurate is the response?'
                         disabled={isPreview || disabled}
-                        className={cn(
-                          'min-h-[80px] whitespace-pre-wrap text-transparent caret-foreground [letter-spacing:inherit]'
-                        )}
+                        className='min-h-[80px] whitespace-pre-wrap py-2'
+                        overlayClassName='py-2'
                         rows={3}
                       />
-                      <div
-                        ref={(el) => {
-                          if (el) descriptionOverlayRefs.current[metric.id] = el
-                        }}
-                        className={cn(
-                          'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-sans text-[var(--code-foreground)] text-sm',
-                          !(isPreview || disabled) && 'pointer-events-none'
-                        )}
-                      >
-                        <div className='whitespace-pre-wrap'>
-                          {formatDisplayText(metric.description || '', {
-                            accessiblePrefixes,
-                            highlightAll: !accessiblePrefixes,
-                            workflowSearchHighlight: getMetricSearchHighlight(index, [
-                              'description',
-                            ]),
-                          })}
-                        </div>
-                      </div>
                       {fieldState.showTags && (
                         <TagDropdown
                           visible={fieldState.showTags}
@@ -290,45 +282,43 @@ export function EvalInput({
             <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-2'>
               <div className='flex flex-col gap-1.5'>
                 {renderFieldLabel('Min Value')}
-                <div className='relative'>
-                  <Input
-                    type='text'
-                    value={metric.range.min ?? ''}
-                    onChange={(e) => updateRange(metric.id, 'min', e.target.value)}
-                    onBlur={(e) => handleRangeBlur(metric.id, 'min', e.target.value)}
-                    disabled={isPreview || disabled}
-                    autoComplete='off'
-                    data-form-type='other'
-                    name='eval-range-min'
-                    className='text-transparent caret-foreground [letter-spacing:inherit]'
-                  />
-                  <div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
-                    {formatDisplayText(String(metric.range.min ?? ''), {
-                      workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'min']),
-                    })}
-                  </div>
-                </div>
+                <ReferenceTextInput
+                  type='text'
+                  value={metric.range.min ?? ''}
+                  onChange={(e) => updateRange(metric.id, 'min', e.target.value)}
+                  onBlur={(e) => handleRangeBlur(metric.id, 'min', e.target.value)}
+                  disabled={isPreview || disabled}
+                  autoComplete='off'
+                  data-form-type='other'
+                  name='eval-range-min'
+                  overlayContent={
+                    <span className='truncate'>
+                      {formatDisplayText(String(metric.range.min ?? ''), {
+                        workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'min']),
+                      })}
+                    </span>
+                  }
+                />
               </div>
               <div className='flex flex-col gap-1.5'>
                 {renderFieldLabel('Max Value')}
-                <div className='relative'>
-                  <Input
-                    type='text'
-                    value={metric.range.max ?? ''}
-                    onChange={(e) => updateRange(metric.id, 'max', e.target.value)}
-                    onBlur={(e) => handleRangeBlur(metric.id, 'max', e.target.value)}
-                    disabled={isPreview || disabled}
-                    autoComplete='off'
-                    data-form-type='other'
-                    name='eval-range-max'
-                    className='text-transparent caret-foreground [letter-spacing:inherit]'
-                  />
-                  <div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
-                    {formatDisplayText(String(metric.range.max ?? ''), {
-                      workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'max']),
-                    })}
-                  </div>
-                </div>
+                <ReferenceTextInput
+                  type='text'
+                  value={metric.range.max ?? ''}
+                  onChange={(e) => updateRange(metric.id, 'max', e.target.value)}
+                  onBlur={(e) => handleRangeBlur(metric.id, 'max', e.target.value)}
+                  disabled={isPreview || disabled}
+                  autoComplete='off'
+                  data-form-type='other'
+                  name='eval-range-max'
+                  overlayContent={
+                    <span className='truncate'>
+                      {formatDisplayText(String(metric.range.max ?? ''), {
+                        workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'max']),
+                      })}
+                    </span>
+                  }
+                />
               </div>
             </div>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
new file mode 100644
index 00000000000..0c62d5155f4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.test.tsx
@@ -0,0 +1,82 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { Tooltip } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { SubBlockFieldHeader } from './field-header'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(header: React.ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(<Tooltip.Provider>{header}</Tooltip.Provider>))
+}
+
+describe('SubBlockFieldHeader', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+  })
+
+  it('renders required and validation state with canonical actions', () => {
+    const onCopy = vi.fn()
+    const onToggle = vi.fn()
+    mount(
+      <SubBlockFieldHeader
+        title='Response format'
+        required
+        invalidJson
+        copyAction={{ copied: false, onCopy }}
+        canonicalAction={{ mode: 'basic', onToggle }}
+      />
+    )
+
+    expect(container?.textContent).toContain('Response format')
+    expect(container?.querySelector('[aria-label="Required"]')).not.toBeNull()
+    expect(container?.querySelector('[aria-label="Switch to manual ID"]')).not.toBeNull()
+
+    const copyButton = container?.querySelector<HTMLButtonElement>('[aria-label="Copy value"]')
+    if (!copyButton) throw new Error('Copy action did not render')
+    act(() => copyButton.click())
+    expect(onCopy).toHaveBeenCalledOnce()
+  })
+
+  it('submits and cancels the inline generation prompt from the keyboard', () => {
+    const onSubmit = vi.fn()
+    const onCancel = vi.fn()
+    mount(
+      <SubBlockFieldHeader
+        title='Prompt'
+        wandAction={{
+          isSearchActive: true,
+          searchQuery: 'Summarize this',
+          isStreaming: false,
+          onSearchClick: vi.fn(),
+          onSearchBlur: vi.fn(),
+          onSearchChange: vi.fn(),
+          onSearchSubmit: onSubmit,
+          onSearchCancel: onCancel,
+          searchInputRef: createRef<HTMLInputElement>(),
+        }}
+      />
+    )
+
+    const input = container?.querySelector<HTMLInputElement>('[aria-label="Generate with AI"]')
+    if (!input) throw new Error('Generation input did not render')
+    act(() => {
+      input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }))
+      input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+    })
+
+    expect(onSubmit).toHaveBeenCalledOnce()
+    expect(onCancel).toHaveBeenCalledOnce()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
new file mode 100644
index 00000000000..1515a1a1282
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/field-header.tsx
@@ -0,0 +1,200 @@
+import type { FocusEvent, ReactNode, RefObject } from 'react'
+import { Button, ChipInput, Label, Tooltip } from '@sim/emcn'
+import {
+  ArrowLeftRight,
+  ArrowUp,
+  Check,
+  Clipboard,
+  SquareArrowUpRight,
+  TriangleAlert,
+} from '@sim/emcn/icons'
+
+interface FieldHeaderWandAction {
+  isSearchActive: boolean
+  searchQuery: string
+  isStreaming: boolean
+  onSearchClick: () => void
+  onSearchBlur: () => void
+  onSearchChange: (value: string) => void
+  onSearchSubmit: () => void
+  onSearchCancel: () => void
+  searchInputRef: RefObject<HTMLInputElement | null>
+}
+
+interface FieldHeaderCanonicalAction {
+  mode: 'basic' | 'advanced'
+  disabled?: boolean
+  onToggle?: () => void
+}
+
+interface FieldHeaderCopyAction {
+  copied: boolean
+  onCopy: () => void
+}
+
+interface FieldHeaderExternalLinkAction {
+  onClick: () => void
+  tooltip: string
+}
+
+interface SubBlockFieldHeaderProps {
+  title: string
+  required?: boolean
+  invalidJson?: boolean
+  labelSuffix?: ReactNode
+  wandAction?: FieldHeaderWandAction
+  canonicalAction?: FieldHeaderCanonicalAction
+  copyAction?: FieldHeaderCopyAction
+  externalLinkAction?: FieldHeaderExternalLinkAction
+}
+
+/**
+ * Presents a workflow field title and its contextual actions with one canonical
+ * rhythm while leaving field state and persistence in the parent sub-block.
+ */
+export function SubBlockFieldHeader({
+  title,
+  required = false,
+  invalidJson = false,
+  labelSuffix,
+  wandAction,
+  canonicalAction,
+  copyAction,
+  externalLinkAction,
+}: SubBlockFieldHeaderProps) {
+  const canonicalTooltip =
+    canonicalAction?.mode === 'advanced' ? 'Switch to selector' : 'Switch to manual ID'
+
+  const handleWandBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button')) return
+    wandAction?.onSearchBlur()
+  }
+
+  return (
+    <div className='flex min-h-5 items-center justify-between gap-1.5 pl-0.5'>
+      <Label className='flex min-w-0 items-baseline gap-1.5 whitespace-nowrap font-normal text-[var(--text-body)] text-small'>
+        <span className='truncate'>{title}</span>
+        {required ? <span aria-label='Required'>*</span> : null}
+        {labelSuffix}
+        {invalidJson ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <span className='inline-flex'>
+                <TriangleAlert className='size-[14px] flex-shrink-0 text-[var(--text-error)]' />
+              </span>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Invalid JSON</Tooltip.Content>
+          </Tooltip.Root>
+        ) : null}
+      </Label>
+      <div className='flex min-w-0 flex-1 items-center justify-end gap-1'>
+        {copyAction ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='quiet'
+                size='icon'
+                onClick={copyAction.onCopy}
+                aria-label='Copy value'
+              >
+                {copyAction.copied ? (
+                  <Check className='size-[14px] text-[var(--badge-green-text)]' />
+                ) : (
+                  <Clipboard className='size-[14px]' />
+                )}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>{copyAction.copied ? 'Copied!' : 'Copy'}</Tooltip.Content>
+          </Tooltip.Root>
+        ) : null}
+        {wandAction ? (
+          wandAction.isSearchActive ? (
+            <div className='flex min-w-[148px] max-w-[280px] flex-1 items-center gap-1'>
+              <ChipInput
+                ref={wandAction.searchInputRef}
+                value={wandAction.isStreaming ? 'Generating...' : wandAction.searchQuery}
+                onChange={(event) => wandAction.onSearchChange(event.target.value)}
+                onBlur={handleWandBlur}
+                onKeyDown={(event) => {
+                  if (
+                    event.key === 'Enter' &&
+                    wandAction.searchQuery.trim() &&
+                    !wandAction.isStreaming
+                  ) {
+                    wandAction.onSearchSubmit()
+                  } else if (event.key === 'Escape') {
+                    wandAction.onSearchCancel()
+                  }
+                }}
+                disabled={wandAction.isStreaming}
+                placeholder='Generate with AI...'
+                aria-label='Generate with AI'
+              />
+              <Button
+                type='button'
+                variant='primary'
+                size='icon'
+                disabled={!wandAction.searchQuery.trim() || wandAction.isStreaming}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  wandAction.onSearchSubmit()
+                }}
+                aria-label='Submit generation prompt'
+              >
+                <ArrowUp className='size-[14px]' />
+              </Button>
+            </div>
+          ) : (
+            <Button type='button' variant='active' size='sm' onClick={wandAction.onSearchClick}>
+              Generate
+            </Button>
+          )
+        ) : null}
+        {externalLinkAction ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='quiet'
+                size='icon'
+                onClick={externalLinkAction.onClick}
+                aria-label={externalLinkAction.tooltip}
+              >
+                <SquareArrowUpRight className='size-[14px]' />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>{externalLinkAction.tooltip}</Tooltip.Content>
+          </Tooltip.Root>
+        ) : null}
+        {canonicalAction ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='quiet'
+                size='icon'
+                onClick={canonicalAction.onToggle}
+                disabled={canonicalAction.disabled}
+                aria-label={canonicalTooltip}
+              >
+                <ArrowLeftRight
+                  className={
+                    canonicalAction.mode === 'advanced'
+                      ? 'size-[14px] text-[var(--text-primary)]'
+                      : 'size-[14px]'
+                  }
+                />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>{canonicalTooltip}</Tooltip.Content>
+          </Tooltip.Root>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/index.ts
new file mode 100644
index 00000000000..de8b043ab5d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header/index.ts
@@ -0,0 +1 @@
+export { SubBlockFieldHeader } from './field-header'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 2b7356c6697..b125db0c23a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useRef, useState } from 'react'
-import { Button, Combobox, cn } from '@sim/emcn'
+import { Button, ChipCombobox, cn, Loader } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -107,7 +107,7 @@ function SingleFileSelector({
 
   return (
     <div className='relative w-full'>
-      <Combobox
+      <ChipCombobox
         options={options}
         value={comboboxValue}
         selectedValue={selectedValue}
@@ -149,16 +149,14 @@ function SingleFileSelector({
       />
       <Button
         type='button'
-        variant='ghost'
-        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+        variant='quiet'
+        size='icon'
+        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
         disabled={isDeleting}
+        aria-label={`Remove ${file.name}`}
       >
-        {isDeleting ? (
-          <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-        ) : (
-          <X className='size-4 opacity-50 hover-hover:opacity-100' />
-        )}
+        {isDeleting ? <Loader className='size-[14px]' animate /> : <X className='size-[14px]' />}
       </Button>
     </div>
   )
@@ -570,7 +568,7 @@ export function FileUpload({
     return (
       <div
         key={fileKey}
-        className='relative rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 hover-hover:bg-[var(--surface-active)] dark:bg-[var(--surface-5)]'
+        className='relative rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
       >
         <div className='truncate pr-6 text-sm' title={file.name}>
           <span className='text-[var(--text-primary)]'>
@@ -580,16 +578,14 @@ export function FileUpload({
         </div>
         <Button
           type='button'
-          variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[4px] size-6 p-0'
+          variant='quiet'
+          size='icon'
+          className='-translate-y-1/2 absolute top-1/2 right-1'
           onClick={(e) => handleRemoveFile(file, e)}
           disabled={isDeleting}
+          aria-label={`Remove ${file.name}`}
         >
-          {isDeleting ? (
-            <div className='size-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-          ) : (
-            <X className='size-4 opacity-50' />
-          )}
+          {isDeleting ? <Loader className='size-[14px]' animate /> : <X className='size-[14px]' />}
         </Button>
       </div>
     )
@@ -599,14 +595,14 @@ export function FileUpload({
     return (
       <div
         key={file.id}
-        className='flex items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 dark:bg-[var(--surface-5)]'
+        className='flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'
       >
         <div className='flex-1 truncate pr-2 text-sm'>
           <span className='text-[var(--text-primary)]'>{file.name}</span>
           <span className='ml-2 text-[var(--text-muted)]'>({formatFileSize(file.size)})</span>
         </div>
         <div className='flex size-5 shrink-0 items-center justify-center'>
-          <div className='size-3.5 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+          <Loader className='size-[14px]' animate />
         </div>
       </div>
     )
@@ -702,21 +698,25 @@ export function FileUpload({
         type='file'
         ref={fileInputRef}
         onChange={handleFileChange}
-        style={{ display: 'none' }}
+        className='hidden'
         accept={acceptedTypes}
         multiple={multiple}
         data-testid='file-input-element'
       />
 
       {showCloudStorageWarning && (
-        <div className='mb-2 text-muted-foreground text-xs'>
+        <div className='mb-2 text-[var(--text-muted)] text-caption'>
           Cloud storage (S3 or Blob) is required for file uploads. Configure S3_BUCKET_NAME and
           AWS_REGION, or Azure Blob env vars.
         </div>
       )}
 
       {/* Error message */}
-      {uploadError && <div className='mb-2 text-red-600 text-sm'>{uploadError}</div>}
+      {uploadError && (
+        <div role='alert' className='mb-2 text-[var(--text-error)] text-caption'>
+          {uploadError}
+        </div>
+      )}
 
       {/* File list with consistent spacing - only show for multiple mode or when uploading */}
       {((hasFiles && multiple) || isUploading) && (
@@ -738,7 +738,7 @@ export function FileUpload({
                   className='h-2 w-full'
                   indicatorClassName='bg-foreground'
                 />
-                <div className='mt-1 text-center text-muted-foreground text-xs'>
+                <div className='mt-1 text-center text-[var(--text-muted)] text-caption'>
                   {uploadProgress < 100 ? 'Uploading...' : 'Upload complete!'}
                 </div>
               </div>
@@ -749,7 +749,7 @@ export function FileUpload({
 
       {/* Add More dropdown for multiple files */}
       {hasFiles && multiple && !isUploading && (
-        <Combobox
+        <ChipCombobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}
@@ -793,7 +793,7 @@ export function FileUpload({
 
       {/* Show dropdown selector if no files and not uploading */}
       {!hasFiles && !isUploading && (
-        <Combobox
+        <ChipCombobox
           options={comboboxOptions}
           value={inputValue}
           onChange={handleComboboxChange}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index 7a4545c0426..470669d95c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -2,17 +2,16 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
-  Combobox,
+  ChipCombobox,
+  CollapsibleCard,
   type ComboboxOption,
-  cn,
-  handleKeyboardActivation,
-  Input,
   Label,
   Trash,
 } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
 import type { FilterRule } from '@/lib/table/query-builder/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import {
   getActiveWorkflowSearchHighlight,
@@ -102,62 +101,23 @@ export function FilterRuleRow({
       label,
     })
 
-  const renderHeader = () => (
-    <div
-      role='group'
-      aria-label={`Condition ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => onToggleCollapse(rule.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {rule.collapsed && rule.column
-            ? formatDisplayText(getColumnLabel(rule.column), {
-                workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
-              })
-            : `Condition ${index + 1}`}
-        </span>
-        {rule.collapsed && rule.column && (
-          <Badge variant='type' size='sm'>
-            {formatDisplayText(getOperatorLabel(rule.operator), {
-              workflowSearchHighlight: getLabelHighlight(
-                'operator',
-                getOperatorLabel(rule.operator)
-              ),
-            })}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Condition</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => onRemove(rule.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Condition</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   const renderValueInput = () => (
     <div className='relative'>
-      <Input
+      <ReferenceTextInput
         ref={valueInputRef}
+        overlayRef={overlayRef}
+        overlayContent={
+          <div className='min-w-fit whitespace-pre'>
+            {formatDisplayText(
+              rule.value,
+              accessiblePrefixes
+                ? { accessiblePrefixes, workflowSearchHighlight }
+                : { highlightAll: true, workflowSearchHighlight }
+            )}
+          </div>
+        }
+        interactiveOverlay={isReadOnly}
+        inputClassName='allow-scroll'
         value={rule.value}
         onChange={handlers.onChange}
         onKeyDown={handlers.onKeyDown}
@@ -175,24 +135,8 @@ export function FilterRuleRow({
         disabled={isReadOnly}
         autoComplete='off'
         placeholder='Enter value'
-        className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
+        className='w-full'
       />
-      <div
-        ref={overlayRef}
-        className={cn(
-          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-          !isReadOnly && 'pointer-events-none'
-        )}
-      >
-        <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-          {formatDisplayText(
-            rule.value,
-            accessiblePrefixes
-              ? { accessiblePrefixes, workflowSearchHighlight }
-              : { highlightAll: true, workflowSearchHighlight }
-          )}
-        </div>
-      </div>
       {fieldState.showTags && (
         <TagDropdown
           visible={fieldState.showTags}
@@ -209,11 +153,11 @@ export function FilterRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+    <>
       {index > 0 && (
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Logic</Label>
-          <Combobox
+          <ChipCombobox
             options={logicalOptions}
             value={rule.logicalOperator}
             onChange={(v) => onUpdate(rule.id, 'logicalOperator', v as 'and' | 'or')}
@@ -236,7 +180,7 @@ export function FilterRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Column</Label>
-        <Combobox
+        <ChipCombobox
           options={columns}
           value={rule.column}
           onChange={(v) => onUpdate(rule.id, 'column', v)}
@@ -256,7 +200,7 @@ export function FilterRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Operator</Label>
-        <Combobox
+        <ChipCombobox
           options={comparisonOptions}
           value={rule.operator}
           onChange={(v) => onUpdate(rule.id, 'operator', v)}
@@ -281,19 +225,57 @@ export function FilterRuleRow({
         <Label className='text-small'>Value</Label>
         {renderValueInput()}
       </div>
-    </div>
+    </>
   )
 
   return (
-    <div
+    <CollapsibleCard
       data-filter-id={rule.id}
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
-      )}
+      title={
+        rule.collapsed && rule.column
+          ? formatDisplayText(getColumnLabel(rule.column), {
+              workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
+            })
+          : `Condition ${index + 1}`
+      }
+      badge={
+        rule.collapsed && rule.column ? (
+          <Badge variant='type' size='sm'>
+            {formatDisplayText(getOperatorLabel(rule.operator), {
+              workflowSearchHighlight: getLabelHighlight(
+                'operator',
+                getOperatorLabel(rule.operator)
+              ),
+            })}
+          </Badge>
+        ) : undefined
+      }
+      actions={
+        <>
+          <Button
+            variant='quiet'
+            size='icon'
+            onClick={onAdd}
+            disabled={isReadOnly}
+            aria-label='Add condition'
+          >
+            <Plus className='size-[14px]' />
+          </Button>
+          <Button
+            variant='quiet'
+            size='icon'
+            onClick={() => onRemove(rule.id)}
+            disabled={isReadOnly}
+            aria-label='Delete condition'
+          >
+            <Trash className='size-[14px] text-[var(--text-error)]' />
+          </Button>
+        </>
+      }
+      collapsed={rule.collapsed ?? false}
+      onToggleCollapse={() => onToggleCollapse(rule.id)}
     >
-      {renderHeader()}
-      {!rule.collapsed && renderContent()}
-    </div>
+      {renderContent()}
+    </CollapsibleCard>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
index 15bb29ed20d..cdda2da961d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts
@@ -1,3 +1,4 @@
+export { BooleanControl } from './boolean-control'
 export { CheckboxList } from './checkbox-list'
 export { Code } from './code'
 export { ComboBox } from './combobox'
@@ -7,6 +8,7 @@ export { DocumentTagEntry } from './document-tag-entry'
 export { Dropdown } from './dropdown'
 export { checkEnvVarTrigger, EnvVarDropdown } from './env-var-dropdown'
 export { EvalInput } from './eval-input'
+export { SubBlockFieldHeader } from './field-header'
 export { FileUpload } from './file-upload'
 export { FilterBuilder } from './filter-builder'
 export { formatDisplayText, type HighlightContext } from './formatted-text'
@@ -18,6 +20,7 @@ export { LongInput } from './long-input'
 export { McpDynamicArgs } from './mcp-dynamic-args'
 export { McpServerSelector, McpToolSelector } from './mcp-server-modal'
 export { MessagesInput } from './messages-input'
+export { ReferenceTextarea, ReferenceTextInput } from './reference-text-control'
 export { ResponseFormat } from './response'
 export { ScheduleInfo } from './schedule-info'
 export { SelectorInput, type SelectorOverrides } from './selector-input'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index b0b8583cce4..2e4aee0d2d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Badge, CollapsibleCard, cn, Input, Label } from '@sim/emcn'
+import { Badge, CollapsibleCard, Label } from '@sim/emcn'
 import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
@@ -132,7 +133,7 @@ export function InputMapping({
     return (
       <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
-          <p className='text-[var(--text-secondary)] text-sm'>No workflow selected</p>
+          <p className='font-medium text-[var(--text-secondary)] text-sm'>No workflow selected</p>
           <p className='mt-1 text-[var(--text-muted)] text-xs'>
             Select a workflow above to configure inputs
           </p>
@@ -253,10 +254,25 @@ function InputMappingField({
       <div className='flex flex-col gap-1.5'>
         <Label>Value</Label>
         <div className='relative'>
-          <Input
+          <ReferenceTextInput
             ref={(el) => {
               if (el) inputRefs.current.set(fieldId, el)
             }}
+            overlayRef={(el) => {
+              if (el) overlayRefs.current.set(fieldId, el)
+            }}
+            overlayContent={
+              <div className='min-w-fit whitespace-pre'>
+                {formatDisplayText(
+                  value,
+                  accessiblePrefixes
+                    ? { accessiblePrefixes, workflowSearchHighlight }
+                    : { highlightAll: true, workflowSearchHighlight }
+                )}
+              </div>
+            }
+            interactiveOverlay={disabled}
+            inputClassName='allow-scroll'
             name='value'
             value={value}
             onChange={handlers.onChange}
@@ -274,33 +290,9 @@ function InputMappingField({
             placeholder='Enter value or reference'
             disabled={disabled}
             autoComplete='off'
-            className={cn(
-              'allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
-            )}
+            className='w-full'
             style={{ overflowX: 'auto' }}
           />
-          <div
-            ref={(el) => {
-              if (el) overlayRefs.current.set(fieldId, el)
-            }}
-            className={cn(
-              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-              !disabled && 'pointer-events-none'
-            )}
-            style={{ overflowX: 'auto' }}
-          >
-            <div
-              className='w-full whitespace-pre'
-              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-            >
-              {formatDisplayText(
-                value,
-                accessiblePrefixes
-                  ? { accessiblePrefixes, workflowSearchHighlight }
-                  : { highlightAll: true, workflowSearchHighlight }
-              )}
-            </div>
-          </div>
           {fieldState.showTags && (
             <TagDropdown
               visible={fieldState.showTags}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
index 73e4bedef42..0ab77a4d4c1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { useQueries } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
@@ -14,7 +14,7 @@ import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflow
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBasesList } from '@/hooks/kb/use-knowledge'
 import { useFolderMap } from '@/hooks/queries/folders'
-import { fetchKnowledgeBase } from '@/hooks/queries/kb/knowledge'
+import { fetchKnowledgeBase, KNOWLEDGE_BASE_DETAIL_STALE_TIME } from '@/hooks/queries/kb/knowledge'
 import { collectDuplicateNames, disambiguateLabelByFolder } from '@/hooks/queries/utils/folder-tree'
 import { knowledgeKeys } from '@/hooks/queries/utils/knowledge-keys'
 
@@ -75,9 +75,9 @@ export function KnowledgeBaseSelector({
   const selectedKnowledgeBaseQueries = useQueries({
     queries: selectedIds.map((selectedId) => ({
       queryKey: knowledgeKeys.detail(selectedId),
-      queryFn: () => fetchKnowledgeBase(selectedId),
+      queryFn: ({ signal }) => fetchKnowledgeBase(selectedId, signal),
       enabled: Boolean(selectedId),
-      staleTime: 60 * 1000,
+      staleTime: KNOWLEDGE_BASE_DETAIL_STALE_TIME,
     })),
   })
 
@@ -198,31 +198,24 @@ export function KnowledgeBaseSelector({
               label: labelOf(kb),
             })
             return (
-              <div
+              <ChipTag
                 key={kb.id}
-                className='inline-flex items-center rounded-md border border-[color-mix(in_srgb,var(--brand-knowledge)_20%,transparent)] bg-[color-mix(in_srgb,var(--brand-knowledge)_10%,transparent)] px-2 py-1 text-xs'
+                variant='field'
+                leftIcon={PackageSearchIcon}
+                rightIcon={!disabled && !isPreview ? X : undefined}
+                rightIconLabel={`Remove ${labelOf(kb)}`}
+                onRightIconClick={
+                  !disabled && !isPreview ? () => handleRemoveKnowledgeBase(kb.id) : undefined
+                }
               >
-                <PackageSearchIcon className='mr-1 size-3 text-[var(--brand-knowledge)]' />
-                <span className='text-[var(--brand-knowledge)]'>
-                  {formatDisplayText(labelOf(kb), { workflowSearchHighlight })}
-                </span>
-                {!disabled && !isPreview && (
-                  <button
-                    type='button'
-                    onClick={() => handleRemoveKnowledgeBase(kb.id)}
-                    className='ml-1 text-[color-mix(in_srgb,var(--brand-knowledge)_60%,transparent)] hover-hover:text-[var(--brand-knowledge)]'
-                    aria-label={`Remove ${labelOf(kb)}`}
-                  >
-                    <X className='size-3' />
-                  </button>
-                )}
-              </div>
+                {formatDisplayText(labelOf(kb), { workflowSearchHighlight })}
+              </ChipTag>
             )
           })}
         </div>
       )}
 
-      <Combobox
+      <ChipCombobox
         options={options}
         value={isMultiSelect ? undefined : (selectedIds[0] ?? '')}
         multiSelect={isMultiSelect}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 1ab2223be92..24898a5a94b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -4,11 +4,9 @@ import { useRef } from 'react'
 import {
   Badge,
   Button,
-  Combobox,
+  ChipCombobox,
+  CollapsibleCard,
   type ComboboxOption,
-  cn,
-  handleKeyboardActivation,
-  Input,
   Label,
   Trash,
 } from '@sim/emcn'
@@ -17,17 +15,18 @@ import { generateId } from '@sim/utils/id'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { type FilterFieldType, getOperatorsForFieldType } from '@/lib/knowledge/filters/types'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
+import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { parseJsonArrayValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/utils'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/kb/use-knowledge-base-tag-definitions'
 import { useTagSelection } from '@/hooks/kb/use-tag-selection'
-import { useSubBlockValue } from '../../hooks/use-sub-block-value'
 
 interface TagFilter {
   id: string
@@ -219,7 +218,7 @@ export function KnowledgeTagFilters({
 
     return (
       <div className='space-y-1'>
-        <Label className='text-muted-foreground text-xs'>Tag Filters</Label>
+        <Label className='font-medium text-muted-foreground text-xs'>Tag Filters</Label>
         <div className='text-muted-foreground text-sm'>
           {appliedFilters > 0 ? `${appliedFilters} filter(s) applied` : 'No filters'}
         </div>
@@ -227,60 +226,6 @@ export function KnowledgeTagFilters({
     )
   }
 
-  /**
-   * Renders the filter header with name, badge, and action buttons
-   * Shows tag name only when collapsed (as summary), generic label when expanded
-   */
-  const renderFilterHeader = (filter: TagFilter, index: number) => (
-    <div
-      role='button'
-      tabIndex={0}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(filter.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(filter.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
-        </span>
-        {filter.collapsed && filter.tagName && (
-          <Badge variant='type' size='sm'>
-            {FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}
-          </Badge>
-        )}
-      </div>
-      <div className='flex items-center gap-2 pl-2'>
-        <Button
-          variant='ghost'
-          onClick={(e) => {
-            e.stopPropagation()
-            addFilter()
-          }}
-          disabled={isReadOnly}
-          className='h-auto p-0'
-        >
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Filter</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={(e) => {
-            e.stopPropagation()
-            removeFilter(filter.id)
-          }}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Filter</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   /**
    * Renders the value input with tag dropdown support
    */
@@ -309,10 +254,25 @@ export function KnowledgeTagFilters({
 
     return (
       <div className='relative'>
-        <Input
+        <ReferenceTextInput
           ref={(el) => {
             if (el) valueInputRefs.current[cellKey] = el
           }}
+          overlayRef={(el) => {
+            if (el) overlayRefs.current[cellKey] = el
+          }}
+          overlayContent={
+            <div className='min-w-fit whitespace-pre'>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+          interactiveOverlay={isReadOnly}
+          inputClassName='allow-scroll'
           value={fieldValue}
           onChange={handlers.onChange}
           onKeyDown={handlers.onKeyDown}
@@ -329,26 +289,8 @@ export function KnowledgeTagFilters({
           disabled={isReadOnly}
           autoComplete='off'
           placeholder={placeholder}
-          className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
+          className='w-full'
         />
-        <div
-          ref={(el) => {
-            if (el) overlayRefs.current[cellKey] = el
-          }}
-          className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-            !isReadOnly && 'pointer-events-none'
-          )}
-        >
-          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
@@ -383,10 +325,10 @@ export function KnowledgeTagFilters({
     const isBetween = filter.operator === 'between'
 
     return (
-      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <>
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Tag</Label>
-          <Combobox
+          <ChipCombobox
             options={tagOptions}
             value={filter.tagName}
             onChange={(value) => updateFilter(filter.id, 'tagName', value)}
@@ -397,7 +339,7 @@ export function KnowledgeTagFilters({
 
         <div className='flex flex-col gap-1.5'>
           <Label className='text-small'>Operator</Label>
-          <Combobox
+          <ChipCombobox
             options={operatorOptions}
             value={filter.operator}
             onChange={(value) => updateFilter(filter.id, 'operator', value)}
@@ -418,24 +360,51 @@ export function KnowledgeTagFilters({
             renderValueInput(filter, 'tagValue')
           )}
         </div>
-      </div>
+      </>
     )
   }
 
   return (
     <div className='space-y-2'>
       {filters.map((filter, index) => (
-        <div
+        <CollapsibleCard
           key={filter.id}
           data-filter-id={filter.id}
-          className={cn(
-            'rounded-sm border border-[var(--border-1)]',
-            filter.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          title={filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
+          badge={
+            filter.collapsed && filter.tagName ? (
+              <Badge variant='type' size='sm'>
+                {FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}
+              </Badge>
+            ) : undefined
+          }
+          actions={
+            <>
+              <Button
+                variant='quiet'
+                size='icon'
+                onClick={addFilter}
+                disabled={isReadOnly}
+                aria-label='Add filter'
+              >
+                <Plus className='size-[14px]' />
+              </Button>
+              <Button
+                variant='quiet'
+                size='icon'
+                onClick={() => removeFilter(filter.id)}
+                disabled={isReadOnly}
+                aria-label='Delete filter'
+              >
+                <Trash className='size-[14px] text-[var(--text-error)]' />
+              </Button>
+            </>
+          }
+          collapsed={filter.collapsed ?? false}
+          onToggleCollapse={() => toggleCollapse(filter.id)}
         >
-          {renderFilterHeader(filter, index)}
-          {!filter.collapsed && renderFilterContent(filter)}
-        </div>
+          {renderFilterContent(filter)}
+        </CollapsibleCard>
       ))}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 3c594cc1788..15d32007caf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -7,11 +7,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { cn, Textarea } from '@sim/emcn'
+import { Button, cn } from '@sim/emcn'
 import { ChevronsUpDown, Wand } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
-import { Button } from '@/components/ui/button'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextarea } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
@@ -220,14 +220,6 @@ export function LongInput({
     }
   }, [rows])
 
-  // Sync scroll position between textarea and overlay
-  const handleScroll = useCallback((e: React.UIEvent<HTMLTextAreaElement>) => {
-    if (overlayRef.current) {
-      overlayRef.current.scrollTop = e.currentTarget.scrollTop
-      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }, [])
-
   // Ensure overlay updates when content changes
   useEffect(() => {
     if (textareaRef.current && overlayRef.current) {
@@ -291,6 +283,8 @@ export function LongInput({
     [wandHook]
   )
 
+  const showWandButton = isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand
+
   return (
     <>
       {/* Wand Prompt Bar - positioned above the textarea */}
@@ -325,91 +319,66 @@ export function LongInput({
             ;(ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = el
           }
           return (
-            <div
-              ref={containerRef}
-              className='group relative w-full'
-              style={{ height: `${height}px` }}
-            >
-              <Textarea
-                ref={setRefs}
-                className={cn(
-                  'allow-scroll box-border min-h-full w-full resize-none text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
-                  wandHook.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
-                )}
-                rows={rows ?? DEFAULT_ROWS}
-                placeholder={placeholder ?? ''}
-                value={value}
-                onChange={handleChange as (e: React.ChangeEvent<HTMLTextAreaElement>) => void}
-                onDrop={onDrop as (e: React.DragEvent<HTMLTextAreaElement>) => void}
-                onDragOver={onDragOver as (e: React.DragEvent<HTMLTextAreaElement>) => void}
-                onScroll={handleScroll}
-                onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLTextAreaElement>) => void}
-                onFocus={onFocus}
-                disabled={isPreview || disabled}
-                style={{
-                  fontFamily: 'inherit',
-                  lineHeight: 'inherit',
-                  height: `${height}px`,
-                  wordBreak: 'break-word',
-                  whiteSpace: 'pre-wrap',
-                }}
-              />
-              <div
-                ref={overlayRef}
-                className={cn(
-                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
-                  (isPreview || disabled) && 'opacity-50',
-                  !(isPreview || disabled) && 'pointer-events-none'
-                )}
-                style={{
-                  fontFamily: 'inherit',
-                  lineHeight: 'inherit',
-                  width: '100%',
-                  height: `${height}px`,
-                }}
-              >
-                {formatDisplayText(value, {
-                  accessiblePrefixes,
-                  highlightAll: !accessiblePrefixes,
-                  workflowSearchHighlight,
-                })}
-              </div>
-
-              {/* Wand Button - only show if not hidden by parent */}
-              {isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand && (
-                <div className='absolute top-2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
-                  <Button
-                    variant='ghost'
-                    size='icon'
-                    onClick={
-                      wandHook.isPromptVisible
-                        ? wandHook.hidePromptInline
-                        : wandHook.showPromptInline
-                    }
-                    disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
-                    aria-label='Generate content with AI'
-                    className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
-                  >
-                    <Wand className='size-4' />
-                  </Button>
-                </div>
-              )}
-
-              {/* Custom resize handle */}
-              {!wandHook.isStreaming && (
-                <div
-                  role='separator'
-                  aria-orientation='horizontal'
-                  className='absolute right-1 bottom-1 flex size-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-                  onMouseDown={startResize}
-                  onDragStart={(e) => {
-                    e.preventDefault()
-                  }}
-                >
-                  <ChevronsUpDown className='size-3 text-[var(--text-muted)]' />
-                </div>
+            <ReferenceTextarea
+              ref={setRefs}
+              containerRef={containerRef}
+              containerStyle={{ height: `${height}px` }}
+              overlayRef={overlayRef}
+              overlayContent={formatDisplayText(value, {
+                accessiblePrefixes,
+                highlightAll: !accessiblePrefixes,
+                workflowSearchHighlight,
+              })}
+              overlayClassName={cn(showWandButton && 'pr-7')}
+              interactiveOverlay={isPreview || Boolean(disabled)}
+              className={cn(
+                'allow-scroll',
+                wandHook.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
               )}
-            </div>
+              rows={rows ?? DEFAULT_ROWS}
+              placeholder={placeholder ?? ''}
+              value={value}
+              onChange={handleChange as (e: React.ChangeEvent<HTMLTextAreaElement>) => void}
+              onDrop={onDrop as (e: React.DragEvent<HTMLTextAreaElement>) => void}
+              onDragOver={onDragOver as (e: React.DragEvent<HTMLTextAreaElement>) => void}
+              onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLTextAreaElement>) => void}
+              onFocus={onFocus}
+              disabled={isPreview || disabled}
+              adornment={
+                <>
+                  {showWandButton ? (
+                    <div className='absolute top-2 right-2 z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100'>
+                      <Button
+                        variant='quiet'
+                        size='icon'
+                        onClick={
+                          wandHook.isPromptVisible
+                            ? wandHook.hidePromptInline
+                            : wandHook.showPromptInline
+                        }
+                        disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
+                        aria-label='Generate content with AI'
+                      >
+                        <Wand className='size-[14px]' />
+                      </Button>
+                    </div>
+                  ) : null}
+                  {!wandHook.isStreaming ? (
+                    <div
+                      role='separator'
+                      aria-orientation='horizontal'
+                      className='absolute right-1 bottom-1 flex size-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border)] bg-[var(--surface-5)] dark:bg-[var(--surface-4)]'
+                      onMouseDown={startResize}
+                      onDragStart={(e) => {
+                        e.preventDefault()
+                      }}
+                    >
+                      <ChevronsUpDown className='size-[14px] text-[var(--text-icon)]' />
+                    </div>
+                  ) : null}
+                </>
+              }
+            />
           )
         }}
       </SubBlockInputController>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
index 08addbf7ab4..1645205aaa7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useState } from 'react'
-import { Combobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
+import { ChipCombobox, Label, Slider } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
+import { BooleanControl } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { LongInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input'
 import { ShortInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input'
@@ -243,20 +244,13 @@ export function McpDynamicArgs({
     switch (inputType) {
       case 'switch':
         return (
-          <div key={`${paramName}-switch`} className='flex items-center gap-x-3'>
-            <Switch
-              id={`${paramName}-switch`}
-              checked={!!value}
-              onCheckedChange={(checked) => updateParameter(paramName, checked)}
-              disabled={disabled}
-            />
-            <Label
-              htmlFor={`${paramName}-switch`}
-              className='cursor-pointer font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
-            >
-              {formatParameterLabel(paramName)}
-            </Label>
-          </div>
+          <BooleanControl
+            key={`${paramName}-switch`}
+            value={Boolean(value)}
+            onChange={(checked) => updateParameter(paramName, checked)}
+            label={formatParameterLabel(paramName)}
+            disabled={disabled}
+          />
         )
 
       case 'dropdown': {
@@ -275,7 +269,7 @@ export function McpDynamicArgs({
 
         return (
           <div key={`${paramName}-dropdown`}>
-            <Combobox
+            <ChipCombobox
               options={dropdownOptions}
               value={value || ''}
               selectedValue={value || ''}
@@ -501,10 +495,9 @@ export function McpDynamicArgs({
       />
       <div>
         {toolSchema.properties &&
-          Object.entries(toolSchema.properties).map(([paramName, paramSchema], index, entries) => {
+          Object.entries(toolSchema.properties).map(([paramName, paramSchema]) => {
             const inputType = getInputType(paramSchema as any)
             const showLabel = inputType !== 'switch'
-            const showDivider = index < entries.length - 1
 
             return (
               <div key={paramName} className='subblock-row'>
@@ -521,7 +514,6 @@ export function McpDynamicArgs({
                   )}
                   {renderParameterInput(paramName, paramSchema as any)}
                 </div>
-                {showDivider && <FieldDivider subblockMarker />}
               </div>
             )
           })}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
index ac65ed2eb68..c0d9a8f0e05 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { Combobox } from '@sim/emcn'
+import { ChipCombobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -78,7 +78,7 @@ export function McpServerSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedServerId}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
index 10739b60484..b0ea5a696ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { Combobox } from '@sim/emcn'
+import { ChipCombobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -120,7 +120,7 @@ export function McpToolSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedToolId}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 79842e8cb5f..44b866eaa9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -7,12 +7,23 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Button, cn, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@sim/emcn'
-import { ChevronDown, ChevronsUpDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
+import {
+  Button,
+  Chip,
+  ChipSelect,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@sim/emcn'
+import { ChevronDown, ChevronUp, Duplicate, MoreHorizontal, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { isEqual } from 'es-toolkit'
 import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextarea } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
@@ -23,8 +34,13 @@ import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
 import type { SubBlockConfig } from '@/blocks/types'
 
-const MIN_TEXTAREA_HEIGHT_PX = 80
-const MAX_TEXTAREA_HEIGHT_PX = 320
+const MIN_TEXTAREA_HEIGHT_PX = 64
+const MAX_TEXTAREA_HEIGHT_PX = 192
+const MESSAGE_ROLE_OPTIONS = [
+  { value: 'system', label: 'System' },
+  { value: 'user', label: 'User' },
+  { value: 'assistant', label: 'Assistant' },
+] as const
 
 /** Pattern to match complete message objects in JSON */
 const COMPLETE_MESSAGE_PATTERN =
@@ -92,7 +108,6 @@ export function MessagesInput({
   const [localMessages, setLocalMessages] = useState<Message[]>([{ role: 'user', content: '' }])
   const messageIdsRef = useRef<string[]>([generateShortId()])
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
-  const [openPopoverIndex, setOpenPopoverIndex] = useState<number | null>(null)
   const subBlockInput = useSubBlockInput({
     blockId,
     subBlockId,
@@ -188,9 +203,6 @@ export function MessagesInput({
     [parseMessages]
   )
 
-  /**
-   * Wand hook for AI-assisted content generation
-   */
   const wandHook = useWand({
     wandConfig: config.wandConfig,
     currentValue: getMessagesJson(),
@@ -229,9 +241,6 @@ export function MessagesInput({
     },
   })
 
-  /**
-   * Expose wand control handlers to parent via ref
-   */
   useImperativeHandle(
     wandControlRef,
     () => ({
@@ -273,13 +282,6 @@ export function MessagesInput({
 
   const overlayRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const textareaRefs = useRef<Record<string, HTMLTextAreaElement | null>>({})
-  const userResizedRef = useRef<Record<string, boolean>>({})
-  const isResizingRef = useRef(false)
-  const resizeStateRef = useRef<{
-    fieldId: string
-    startY: number
-    startHeight: number
-  } | null>(null)
 
   /**
    * Updates a specific message's content
@@ -317,37 +319,42 @@ export function MessagesInput({
     [localMessages, setMessages, isPreview, disabled]
   )
 
-  /**
-   * Adds a message after the specified index
-   */
-  const addMessageAfter = useCallback(
-    (index: number) => {
-      if (isPreview || disabled) return
+  /** Adds a new user message to the conversation. */
+  const addMessage = () => {
+    if (isPreview || disabled) return
 
-      const newMessages = [...localMessages]
-      newMessages.splice(index + 1, 0, { role: 'user' as const, content: '' })
-      messageIdsRef.current.splice(index + 1, 0, generateShortId())
-      setLocalMessages(newMessages)
-      setMessages(newMessages)
-    },
-    [localMessages, setMessages, isPreview, disabled]
-  )
+    const newMessages = [...localMessages, { role: 'user' as const, content: '' }]
+    messageIdsRef.current.push(generateShortId())
+    setLocalMessages(newMessages)
+    setMessages(newMessages)
+  }
 
   /**
    * Deletes a message at the specified index
    */
-  const deleteMessage = useCallback(
-    (index: number) => {
-      if (isPreview || disabled) return
+  const deleteMessage = (index: number) => {
+    if (isPreview || disabled || localMessages.length <= 1) return
+
+    const newMessages = [...localMessages]
+    newMessages.splice(index, 1)
+    messageIdsRef.current.splice(index, 1)
+    setLocalMessages(newMessages)
+    setMessages(newMessages)
+  }
 
-      const newMessages = [...localMessages]
-      newMessages.splice(index, 1)
-      messageIdsRef.current.splice(index, 1)
-      setLocalMessages(newMessages)
-      setMessages(newMessages)
-    },
-    [localMessages, setMessages, isPreview, disabled]
-  )
+  /** Duplicates a message immediately below the source message. */
+  const duplicateMessage = (index: number) => {
+    if (isPreview || disabled) return
+
+    const sourceMessage = localMessages[index]
+    if (!sourceMessage) return
+
+    const newMessages = [...localMessages]
+    newMessages.splice(index + 1, 0, { ...sourceMessage })
+    messageIdsRef.current.splice(index + 1, 0, generateShortId())
+    setLocalMessages(newMessages)
+    setMessages(newMessages)
+  }
 
   /**
    * Moves a message up in the list
@@ -389,13 +396,6 @@ export function MessagesInput({
     [localMessages, setMessages, isPreview, disabled]
   )
 
-  /**
-   * Capitalizes the first letter of the role
-   */
-  const formatRole = (role: string): string => {
-    return role.charAt(0).toUpperCase() + role.slice(1)
-  }
-
   /**
    * Handles header click to focus the textarea
    */
@@ -426,18 +426,6 @@ export function MessagesInput({
       const overlay = overlayRefs.current[fieldId]
       if (!textarea) return
 
-      if (!textarea.value.trim()) {
-        userResizedRef.current[fieldId] = false
-      }
-
-      if (userResizedRef.current[fieldId]) {
-        if (overlay) {
-          overlay.style.height = `${textarea.offsetHeight}px`
-        }
-        syncOverlay(fieldId)
-        return
-      }
-
       textarea.style.height = 'auto'
       const scrollHeight = textarea.scrollHeight
       const height = Math.min(
@@ -455,65 +443,6 @@ export function MessagesInput({
     [syncOverlay]
   )
 
-  const handleResizeStart = useCallback(
-    (fieldId: string, e: React.MouseEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      const textarea = textareaRefs.current[fieldId]
-      if (!textarea) return
-
-      const startHeight = textarea.offsetHeight || textarea.scrollHeight || MIN_TEXTAREA_HEIGHT_PX
-
-      isResizingRef.current = true
-      resizeStateRef.current = {
-        fieldId,
-        startY: e.clientY,
-        startHeight,
-      }
-
-      const handleMouseMove = (moveEvent: MouseEvent) => {
-        if (!isResizingRef.current || !resizeStateRef.current) return
-
-        const { fieldId: activeFieldId, startY, startHeight } = resizeStateRef.current
-        const deltaY = moveEvent.clientY - startY
-        const nextHeight = Math.max(MIN_TEXTAREA_HEIGHT_PX, startHeight + deltaY)
-
-        const activeTextarea = textareaRefs.current[activeFieldId]
-        const overlay = overlayRefs.current[activeFieldId]
-
-        if (activeTextarea) {
-          activeTextarea.style.height = `${nextHeight}px`
-        }
-
-        if (overlay) {
-          overlay.style.height = `${nextHeight}px`
-          if (activeTextarea) {
-            overlay.scrollTop = activeTextarea.scrollTop
-            overlay.scrollLeft = activeTextarea.scrollLeft
-          }
-        }
-      }
-
-      const handleMouseUp = () => {
-        if (resizeStateRef.current) {
-          const { fieldId: activeFieldId } = resizeStateRef.current
-          userResizedRef.current[activeFieldId] = true
-          syncOverlay(activeFieldId)
-        }
-
-        isResizingRef.current = false
-        resizeStateRef.current = null
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-      }
-
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
-    },
-    [syncOverlay]
-  )
-
   useLayoutEffect(() => {
     currentMessages.forEach((_, index) => {
       autoResizeTextarea(`message-${index}`)
@@ -544,177 +473,147 @@ export function MessagesInput({
 
   return (
     <div className='flex w-full flex-col gap-2.5'>
-      {currentMessages.map((message, index) => (
-        <div
-          key={messageIdsRef.current[index] ?? `fallback-${index}`}
-          className={cn(
-            'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
-            disabled && 'opacity-50'
-          )}
-        >
-          {(() => {
-            const fieldId = `message-${index}`
-            const fieldState = subBlockInput.fieldHelpers.getFieldState(fieldId)
-            const fieldHandlers = subBlockInput.fieldHelpers.createFieldHandlers(
-              fieldId,
-              message.content,
-              (newValue: string) => {
-                updateMessageContent(index, newValue)
-              }
-            )
-
-            const handleEnvSelect = subBlockInput.fieldHelpers.createEnvVarSelectHandler(
-              fieldId,
-              message.content,
-              (newValue: string) => {
-                updateMessageContent(index, newValue)
-              }
-            )
-
-            const handleTagSelect = subBlockInput.fieldHelpers.createTagSelectHandler(
-              fieldId,
-              message.content,
-              (newValue: string) => {
-                updateMessageContent(index, newValue)
-              }
-            )
-
-            const textareaRefObject = {
-              current: textareaRefs.current[fieldId] ?? null,
-            } as React.RefObject<HTMLTextAreaElement>
-            const workflowSearchHighlight = getActiveWorkflowSearchHighlight({
-              activeSearchTarget,
-              subBlockId,
-              valuePath: [index, 'content'],
-            })
-
-            return (
-              <>
-                {/* Header with role label and add button */}
-                <div
-                  role='group'
-                  aria-label={`Message ${index + 1}`}
-                  className='flex cursor-pointer items-center justify-between px-2 pt-1.5'
-                  onClick={(e) => handleHeaderClick(index, e)}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget) return
-                    if (event.key === 'Enter' || event.key === ' ') {
-                      event.preventDefault()
-                      textareaRefs.current[fieldId]?.focus()
-                    }
-                  }}
-                >
-                  <Popover
-                    open={openPopoverIndex === index}
-                    onOpenChange={(open) => setOpenPopoverIndex(open ? index : null)}
-                    colorScheme='inverted'
+      <div
+        className={cn(
+          'w-full overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)]',
+          disabled && 'opacity-50'
+        )}
+      >
+        {currentMessages.map((message, index) => (
+          <div
+            key={messageIdsRef.current[index] ?? `fallback-${index}`}
+            className={cn(
+              'relative flex w-full flex-col gap-2 p-2.5',
+              index > 0 && 'border-[var(--border)] border-t'
+            )}
+          >
+            {(() => {
+              const fieldId = `message-${index}`
+              const fieldState = subBlockInput.fieldHelpers.getFieldState(fieldId)
+              const fieldHandlers = subBlockInput.fieldHelpers.createFieldHandlers(
+                fieldId,
+                message.content,
+                (newValue: string) => {
+                  updateMessageContent(index, newValue)
+                }
+              )
+
+              const handleEnvSelect = subBlockInput.fieldHelpers.createEnvVarSelectHandler(
+                fieldId,
+                message.content,
+                (newValue: string) => {
+                  updateMessageContent(index, newValue)
+                }
+              )
+
+              const handleTagSelect = subBlockInput.fieldHelpers.createTagSelectHandler(
+                fieldId,
+                message.content,
+                (newValue: string) => {
+                  updateMessageContent(index, newValue)
+                }
+              )
+
+              const textareaRefObject = {
+                current: textareaRefs.current[fieldId] ?? null,
+              } as React.RefObject<HTMLTextAreaElement>
+              const workflowSearchHighlight = getActiveWorkflowSearchHighlight({
+                activeSearchTarget,
+                subBlockId,
+                valuePath: [index, 'content'],
+              })
+
+              return (
+                <>
+                  <div
+                    role='group'
+                    aria-label={`Message ${index + 1}`}
+                    className='flex cursor-pointer items-center justify-between'
+                    onClick={(e) => handleHeaderClick(index, e)}
+                    onKeyDown={(event) => {
+                      if (event.target !== event.currentTarget) return
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        textareaRefs.current[fieldId]?.focus()
+                      }
+                    }}
                   >
-                    <PopoverTrigger asChild>
-                      <button
-                        type='button'
-                        disabled={isPreview || disabled}
-                        className={cn(
-                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 text-[var(--text-primary)] text-small leading-none transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
-                          (isPreview || disabled) &&
-                            'cursor-default hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
-                        )}
-                        onClick={(e) => e.stopPropagation()}
-                        aria-label='Select message role'
-                      >
-                        {formatRole(message.role)}
-                        {!isPreview && !disabled && (
-                          <ChevronDown
-                            className={cn(
-                              'size-3 flex-shrink-0 transition-transform duration-100',
-                              openPopoverIndex === index && 'rotate-180'
-                            )}
-                          />
-                        )}
-                      </button>
-                    </PopoverTrigger>
-                    <PopoverContent minWidth={140} align='start'>
-                      <div className='flex flex-col gap-0.5'>
-                        {(['system', 'user', 'assistant'] as const).map((role) => (
-                          <PopoverItem
-                            key={role}
-                            active={message.role === role}
-                            onClick={() => {
-                              updateMessageRole(index, role)
-                              setOpenPopoverIndex(null)
-                            }}
-                          >
-                            <span>{formatRole(role)}</span>
-                          </PopoverItem>
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-
-                  {!isPreview && !disabled && (
-                    <div className='flex items-center'>
-                      {currentMessages.length > 1 && (
-                        <>
+                    <ChipSelect
+                      options={[...MESSAGE_ROLE_OPTIONS]}
+                      value={message.role}
+                      onChange={(role) =>
+                        updateMessageRole(index, role as 'system' | 'user' | 'assistant')
+                      }
+                      disabled={isPreview || disabled}
+                      align='start'
+                      aria-label={`Message ${index + 1} role`}
+                    />
+
+                    {!isPreview && !disabled && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
                           <Button
-                            variant='ghost'
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              deleteMessage(index)
-                            }}
-                            disabled={disabled}
-                            className='-my-1 -mr-1 size-6 p-0'
-                            aria-label='Delete message'
+                            variant='quiet'
+                            size='icon'
+                            onClick={(event: React.MouseEvent) => event.stopPropagation()}
+                            aria-label={`Message ${index + 1} actions`}
                           >
-                            <Trash className='size-3' />
+                            <MoreHorizontal className='size-[14px]' />
                           </Button>
-                          <Button
-                            variant='ghost'
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              moveMessageUp(index)
-                            }}
-                            disabled={disabled || index === 0}
-                            className='-my-1 -mr-1 size-6 p-0'
-                            aria-label='Move message up'
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align='end' side='bottom'>
+                          <DropdownMenuItem
+                            disabled={index === 0}
+                            onSelect={() => moveMessageUp(index)}
                           >
-                            <ChevronUp className='size-3' />
-                          </Button>
-                          <Button
-                            variant='ghost'
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              moveMessageDown(index)
-                            }}
-                            disabled={disabled || index === currentMessages.length - 1}
-                            className='-my-1 -mr-1 size-6 p-0'
-                            aria-label='Move message down'
+                            <ChevronUp />
+                            Move up
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            disabled={index === currentMessages.length - 1}
+                            onSelect={() => moveMessageDown(index)}
                           >
-                            <ChevronDown className='size-3' />
-                          </Button>
-                        </>
-                      )}
-                      <Button
-                        variant='ghost'
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation()
-                          addMessageAfter(index)
-                        }}
-                        disabled={disabled}
-                        className='-mr-1.5 -my-1 size-6 p-0'
-                        aria-label='Add message below'
-                      >
-                        <Plus className='size-3.5' />
-                      </Button>
-                    </div>
-                  )}
-                </div>
-
-                {/* Content Input with overlay for variable highlighting */}
-                <div className='relative w-full overflow-hidden'>
-                  <textarea
-                    ref={(el) => {
-                      textareaRefs.current[fieldId] = el
+                            <ChevronDown />
+                            Move down
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onSelect={() => duplicateMessage(index)}>
+                            <Duplicate />
+                            Duplicate
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            disabled={currentMessages.length <= 1}
+                            onSelect={() => deleteMessage(index)}
+                            className='[&_svg]:!text-[var(--text-error)] text-[var(--text-error)] focus:text-[var(--text-error)]'
+                          >
+                            <Trash />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
+                  </div>
+
+                  <ReferenceTextarea
+                    ref={(element) => {
+                      textareaRefs.current[fieldId] = element
                     }}
-                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent p-2 font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [letter-spacing:inherit] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
+                    overlayRef={(element) => {
+                      overlayRefs.current[fieldId] = element
+                    }}
+                    className='h-auto max-h-[192px] min-h-16 overflow-y-auto overflow-x-hidden'
+                    overlayClassName='text-[var(--text-primary)] leading-[1.5]'
+                    overlayContent={
+                      <>
+                        {formatDisplayText(message.content, {
+                          accessiblePrefixes,
+                          highlightAll: !accessiblePrefixes,
+                          workflowSearchHighlight,
+                        })}
+                        {message.content.endsWith('\n') ? '\u200B' : null}
+                      </>
+                    }
+                    interactiveOverlay={isPreview || disabled}
                     placeholder='Enter message content...'
                     value={message.content}
                     onChange={fieldHandlers.onChange}
@@ -741,76 +640,44 @@ export function MessagesInput({
                     onDrop={fieldHandlers.onDrop}
                     onDragOver={fieldHandlers.onDragOver}
                     onFocus={fieldHandlers.onFocus}
-                    onScroll={(e) => {
-                      const overlay = overlayRefs.current[fieldId]
-                      if (overlay) {
-                        overlay.scrollTop = e.currentTarget.scrollTop
-                        overlay.scrollLeft = e.currentTarget.scrollLeft
-                      }
-                    }}
                     disabled={isPreview || disabled}
+                    adornment={
+                      <>
+                        <EnvVarDropdown
+                          visible={fieldState.showEnvVars && !isPreview && !disabled}
+                          onSelect={handleEnvSelect}
+                          searchTerm={fieldState.searchTerm}
+                          inputValue={message.content}
+                          cursorPosition={fieldState.cursorPosition}
+                          onClose={() => subBlockInput.fieldHelpers.hideFieldDropdowns(fieldId)}
+                          workspaceId={subBlockInput.workspaceId}
+                          maxHeight='192px'
+                          inputRef={textareaRefObject}
+                        />
+                        <TagDropdown
+                          visible={fieldState.showTags && !isPreview && !disabled}
+                          onSelect={handleTagSelect}
+                          blockId={blockId}
+                          activeSourceBlockId={fieldState.activeSourceBlockId}
+                          inputValue={message.content}
+                          cursorPosition={fieldState.cursorPosition}
+                          onClose={() => subBlockInput.fieldHelpers.hideFieldDropdowns(fieldId)}
+                          inputRef={textareaRefObject}
+                        />
+                      </>
+                    }
                   />
-                  <div
-                    ref={(el) => {
-                      overlayRefs.current[fieldId] = el
-                    }}
-                    className={cn(
-                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent p-2 font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                      !(isPreview || disabled) && 'pointer-events-none'
-                    )}
-                  >
-                    {formatDisplayText(message.content, {
-                      accessiblePrefixes,
-                      highlightAll: !accessiblePrefixes,
-                      workflowSearchHighlight,
-                    })}
-                    {message.content.endsWith('\n') && '\u200B'}
-                  </div>
-
-                  {/* Env var dropdown for this message */}
-                  <EnvVarDropdown
-                    visible={fieldState.showEnvVars && !isPreview && !disabled}
-                    onSelect={handleEnvSelect}
-                    searchTerm={fieldState.searchTerm}
-                    inputValue={message.content}
-                    cursorPosition={fieldState.cursorPosition}
-                    onClose={() => subBlockInput.fieldHelpers.hideFieldDropdowns(fieldId)}
-                    workspaceId={subBlockInput.workspaceId}
-                    maxHeight='192px'
-                    inputRef={textareaRefObject}
-                  />
-
-                  {/* Tag dropdown for this message */}
-                  <TagDropdown
-                    visible={fieldState.showTags && !isPreview && !disabled}
-                    onSelect={handleTagSelect}
-                    blockId={blockId}
-                    activeSourceBlockId={fieldState.activeSourceBlockId}
-                    inputValue={message.content}
-                    cursorPosition={fieldState.cursorPosition}
-                    onClose={() => subBlockInput.fieldHelpers.hideFieldDropdowns(fieldId)}
-                    inputRef={textareaRefObject}
-                  />
-
-                  {!isPreview && !disabled && (
-                    <div
-                      role='separator'
-                      aria-orientation='horizontal'
-                      className='absolute right-1 bottom-1 z-[3] flex size-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-                      onMouseDown={(e) => handleResizeStart(fieldId, e)}
-                      onDragStart={(e) => {
-                        e.preventDefault()
-                      }}
-                    >
-                      <ChevronsUpDown className='size-3 text-[var(--text-muted)]' />
-                    </div>
-                  )}
-                </div>
-              </>
-            )
-          })()}
-        </div>
-      ))}
+                </>
+              )
+            })()}
+          </div>
+        ))}
+      </div>
+      {!isPreview && !disabled && (
+        <Chip variant='border' leftIcon={Plus} onClick={addMessage}>
+          Add message
+        </Chip>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/index.ts
new file mode 100644
index 00000000000..1f0cedcf085
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/index.ts
@@ -0,0 +1 @@
+export { ReferenceTextarea, ReferenceTextInput } from './reference-text-control'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.test.tsx
new file mode 100644
index 00000000000..15d5166c2ec
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.test.tsx
@@ -0,0 +1,68 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, createRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ReferenceTextarea, ReferenceTextInput } from './reference-text-control'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(control: React.ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(control))
+}
+
+describe('reference text controls', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+  })
+
+  it('synchronizes horizontal scrolling with a single-line reference overlay', () => {
+    const overlayRef = createRef<HTMLDivElement>()
+    mount(
+      <ReferenceTextInput
+        value='<Previous.output>'
+        overlayContent={<span>Previous.output</span>}
+        overlayRef={overlayRef}
+        readOnly
+      />
+    )
+
+    const input = container?.querySelector('input')
+    if (!input || !overlayRef.current) throw new Error('Reference input did not render')
+    input.scrollLeft = 48
+    act(() => input.dispatchEvent(new Event('scroll', { bubbles: true })))
+
+    expect(overlayRef.current.scrollLeft).toBe(48)
+    expect(overlayRef.current.getAttribute('aria-hidden')).not.toBeNull()
+  })
+
+  it('synchronizes both axes with a multi-line reference overlay', () => {
+    const overlayRef = createRef<HTMLDivElement>()
+    mount(
+      <ReferenceTextarea
+        value='<Previous.output>'
+        overlayContent={<span>Previous.output</span>}
+        overlayRef={overlayRef}
+        readOnly
+      />
+    )
+
+    const textarea = container?.querySelector('textarea')
+    if (!textarea || !overlayRef.current) throw new Error('Reference textarea did not render')
+    textarea.scrollLeft = 24
+    textarea.scrollTop = 36
+    act(() => textarea.dispatchEvent(new Event('scroll', { bubbles: true })))
+
+    expect(overlayRef.current.scrollLeft).toBe(24)
+    expect(overlayRef.current.scrollTop).toBe(36)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.tsx
new file mode 100644
index 00000000000..f2c10529399
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control/reference-text-control.tsx
@@ -0,0 +1,189 @@
+import {
+  type CSSProperties,
+  forwardRef,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  type UIEvent,
+  useRef,
+} from 'react'
+import { ChipInput, type ChipInputProps, ChipTextarea, type ChipTextareaProps, cn } from '@sim/emcn'
+
+interface ReferenceOverlayProps {
+  content: ReactNode
+  disabled?: boolean
+  interactive?: boolean
+  multiline?: boolean
+  className?: string
+  overlayRef?: Ref<HTMLDivElement>
+}
+
+function ReferenceOverlay({
+  content,
+  disabled = false,
+  interactive = false,
+  multiline = false,
+  className,
+  overlayRef,
+}: ReferenceOverlayProps) {
+  return (
+    <div
+      ref={overlayRef}
+      aria-hidden
+      className={cn(
+        'absolute inset-0 overflow-auto bg-transparent px-2 text-[var(--text-body)] text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        multiline
+          ? 'box-border whitespace-pre-wrap break-words border border-transparent py-1.5'
+          : 'flex items-center overflow-y-hidden',
+        disabled && 'opacity-50',
+        !interactive && 'pointer-events-none',
+        className
+      )}
+    >
+      {content}
+    </div>
+  )
+}
+
+interface ReferenceTextInputProps extends ChipInputProps {
+  overlayContent: ReactNode
+  overlayClassName?: string
+  overlayRef?: Ref<HTMLDivElement>
+  interactiveOverlay?: boolean
+}
+
+/**
+ * Composes the canonical single-line chip field with workflow reference
+ * decoration while preserving the native input as the accessible value owner.
+ */
+export const ReferenceTextInput = forwardRef<HTMLInputElement, ReferenceTextInputProps>(
+  (
+    {
+      overlayContent,
+      overlayClassName,
+      overlayRef,
+      interactiveOverlay = false,
+      inputClassName,
+      onScroll,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const internalOverlayRef = useRef<HTMLDivElement>(null)
+    const setOverlayRef = (node: HTMLDivElement | null) => {
+      internalOverlayRef.current = node
+      if (typeof overlayRef === 'function') overlayRef(node)
+      else if (overlayRef) overlayRef.current = node
+    }
+    const handleScroll = (event: UIEvent<HTMLInputElement>) => {
+      if (internalOverlayRef.current) {
+        internalOverlayRef.current.scrollLeft = event.currentTarget.scrollLeft
+      }
+      onScroll?.(event)
+    }
+
+    return (
+      <div className='relative w-full'>
+        <ChipInput
+          ref={ref}
+          inputClassName={cn(
+            'overflow-auto text-transparent caret-[var(--text-primary)] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            inputClassName
+          )}
+          onScroll={handleScroll}
+          disabled={disabled}
+          {...props}
+        />
+        <ReferenceOverlay
+          content={overlayContent}
+          disabled={disabled}
+          interactive={interactiveOverlay}
+          className={overlayClassName}
+          overlayRef={setOverlayRef}
+        />
+      </div>
+    )
+  }
+)
+
+ReferenceTextInput.displayName = 'ReferenceTextInput'
+
+interface ReferenceTextareaProps extends ChipTextareaProps {
+  overlayContent: ReactNode
+  overlayClassName?: string
+  overlayRef?: Ref<HTMLDivElement>
+  interactiveOverlay?: boolean
+  containerClassName?: string
+  containerStyle?: CSSProperties
+  containerRef?: RefObject<HTMLDivElement | null>
+  adornment?: ReactNode
+}
+
+/**
+ * Multi-line counterpart of {@link ReferenceTextInput}; owns the decorated
+ * overlay and scroll synchronization while callers own workflow behavior.
+ */
+export const ReferenceTextarea = forwardRef<HTMLTextAreaElement, ReferenceTextareaProps>(
+  (
+    {
+      overlayContent,
+      overlayClassName,
+      overlayRef,
+      interactiveOverlay = false,
+      containerClassName,
+      containerStyle,
+      containerRef,
+      adornment,
+      className,
+      onScroll,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const internalOverlayRef = useRef<HTMLDivElement>(null)
+    const setOverlayRef = (node: HTMLDivElement | null) => {
+      internalOverlayRef.current = node
+      if (typeof overlayRef === 'function') overlayRef(node)
+      else if (overlayRef) overlayRef.current = node
+    }
+    const handleScroll = (event: UIEvent<HTMLTextAreaElement>) => {
+      if (internalOverlayRef.current) {
+        internalOverlayRef.current.scrollTop = event.currentTarget.scrollTop
+        internalOverlayRef.current.scrollLeft = event.currentTarget.scrollLeft
+      }
+      onScroll?.(event)
+    }
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn('group relative w-full', containerClassName)}
+        style={containerStyle}
+      >
+        <ChipTextarea
+          ref={ref}
+          className={cn(
+            'h-full min-h-full text-transparent caret-[var(--text-primary)]',
+            className
+          )}
+          onScroll={handleScroll}
+          disabled={disabled}
+          {...props}
+        />
+        <ReferenceOverlay
+          content={overlayContent}
+          disabled={disabled}
+          interactive={interactiveOverlay}
+          multiline
+          className={cn('h-full w-full', overlayClassName)}
+          overlayRef={setOverlayRef}
+        />
+        {adornment}
+      </div>
+    )
+  }
+)
+
+ReferenceTextarea.displayName = 'ReferenceTextarea'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index faf46bb6b1a..1c2712c19ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -1,6 +1,6 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Combobox as EditableCombobox } from '@sim/emcn'
+import { Button, ChipCombobox as EditableCombobox } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index 72bf7a8791d..25ec60687f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -1,12 +1,12 @@
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { cn, Input } from '@sim/emcn'
+import { Button, cn } from '@sim/emcn'
 import { Wand } from '@sim/emcn/icons'
 import { useReactFlow } from 'reactflow'
-import { Button } from '@/components/ui/button'
 import {
   formatDisplayText,
   getValidWorkflowSearchRange,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -229,12 +229,6 @@ export const ShortInput = memo(function ShortInput({
     }
   }, [baseValue, wandHook.isStreaming])
 
-  const handleScroll = useCallback((e: React.UIEvent<HTMLInputElement>) => {
-    if (overlayRef.current) {
-      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
-  }, [])
-
   const handlePaste = useCallback((_e: React.ClipboardEvent<HTMLInputElement>) => {
     justPastedRef.current = true
     setTimeout(() => {
@@ -298,6 +292,8 @@ export const ShortInput = memo(function ShortInput({
     [wandHook]
   )
 
+  const showWandButton = isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand
+
   return (
     <>
       {isWandEnabled && !hideInternalWand && (
@@ -367,61 +363,54 @@ export const ShortInput = memo(function ShortInput({
                 })
 
             return (
-              <>
-                <Input
-                  ref={ref as React.RefObject<HTMLInputElement>}
-                  className='allow-scroll w-full overflow-auto text-transparent caret-foreground [-ms-overflow-style:none] [letter-spacing:inherit] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden'
-                  readOnly={readOnly}
-                  placeholder={placeholder ?? ''}
-                  type='text'
-                  value={displayValue}
-                  onChange={handleChange as (e: React.ChangeEvent<HTMLInputElement>) => void}
-                  onFocus={(e) => {
-                    setIsFocused(true)
-                    onFocus(e)
-                  }}
-                  onBlur={handleBlur}
-                  onDrop={onDrop as (e: React.DragEvent<HTMLInputElement>) => void}
-                  onDragOver={onDragOver as (e: React.DragEvent<HTMLInputElement>) => void}
-                  onScroll={handleScroll}
-                  onPaste={handlePaste}
-                  onWheel={handleWheel}
-                  onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLInputElement>) => void}
-                  autoComplete='off'
-                  disabled={disabled}
-                />
-                <div
-                  ref={overlayRef}
-                  className={cn(
-                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-                    (isPreview || disabled) && 'opacity-50',
-                    !(isPreview || disabled) && 'pointer-events-none'
-                  )}
-                >
-                  <div className='min-w-fit whitespace-pre'>{formattedText}</div>
-                </div>
-              </>
+              <ReferenceTextInput
+                ref={ref as React.RefObject<HTMLInputElement>}
+                className='w-full'
+                inputClassName='allow-scroll'
+                overlayRef={overlayRef}
+                overlayContent={<div className='min-w-fit whitespace-pre'>{formattedText}</div>}
+                overlayClassName={cn(showWandButton && 'pr-7')}
+                interactiveOverlay={isPreview || disabled}
+                readOnly={readOnly}
+                placeholder={placeholder ?? ''}
+                type='text'
+                value={displayValue}
+                onChange={handleChange as (e: React.ChangeEvent<HTMLInputElement>) => void}
+                onFocus={(e) => {
+                  setIsFocused(true)
+                  onFocus(e)
+                }}
+                onBlur={handleBlur}
+                onDrop={onDrop as (e: React.DragEvent<HTMLInputElement>) => void}
+                onDragOver={onDragOver as (e: React.DragEvent<HTMLInputElement>) => void}
+                onPaste={handlePaste}
+                onWheel={handleWheel}
+                onKeyDown={onKeyDown as (e: React.KeyboardEvent<HTMLInputElement>) => void}
+                autoComplete='off'
+                disabled={disabled}
+                endAdornment={
+                  showWandButton ? (
+                    <div className='flex items-center opacity-0 transition-opacity group-hover:opacity-100'>
+                      <Button
+                        variant='quiet'
+                        size='icon'
+                        onClick={
+                          wandHook.isPromptVisible
+                            ? wandHook.hidePromptInline
+                            : wandHook.showPromptInline
+                        }
+                        disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
+                        aria-label='Generate content with AI'
+                      >
+                        <Wand className='size-[14px]' />
+                      </Button>
+                    </div>
+                  ) : undefined
+                }
+              />
             )
           }}
         </SubBlockInputController>
-
-        {/* Wand Button - only show if not hidden by parent */}
-        {isWandEnabled && !isPreview && !wandHook.isStreaming && !hideInternalWand && (
-          <div className='-translate-y-1/2 absolute top-1/2 right-3 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
-            <Button
-              variant='ghost'
-              size='icon'
-              onClick={
-                wandHook.isPromptVisible ? wandHook.hidePromptInline : wandHook.showPromptInline
-              }
-              disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
-              aria-label='Generate content with AI'
-              className='size-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
-            >
-              <Wand className='size-4' />
-            </Button>
-          </div>
-        )}
       </div>
     </>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 34d9498177e..37106261117 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -1,7 +1,13 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Combobox, type ComboboxOptionGroup } from '@sim/emcn'
+import {
+  Button,
+  ChipCombobox,
+  type ComboboxOptionGroup,
+  chipFieldSurfaceClass,
+  cn,
+} from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { AgentSkillsIcon } from '@/components/icons'
@@ -128,7 +134,7 @@ export function SkillInput({
   return (
     <>
       <div className='w-full space-y-2'>
-        <Combobox
+        <ChipCombobox
           options={[]}
           groups={skillGroups}
           placeholder='Add skill...'
@@ -153,41 +159,40 @@ export function SkillInput({
             return (
               <div
                 key={stored.skillId}
-                className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
+                className={cn(
+                  'group flex h-[30px] items-center gap-1.5 px-2',
+                  chipFieldSurfaceClass
+                )}
               >
-                <div
-                  className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
+                <button
+                  type='button'
+                  className='flex min-w-0 flex-1 items-center gap-1.5 text-left'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkillId(fullSkill.id)
                       setEditingSkillSnapshot(fullSkill)
                     }
                   }}
+                  disabled={!fullSkill || disabled || isPreview}
                 >
-                  <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
-                      <AgentSkillsIcon className='size-[10px] text-[var(--text-icon)]' />
-                    </div>
-                    <span className='truncate text-[var(--text-primary)] text-small'>
-                      {formatDisplayText(skillName, { workflowSearchHighlight })}
-                    </span>
+                  <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
+                    <AgentSkillsIcon className='size-[10px] text-[var(--text-icon)]' />
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-2'>
-                    {!disabled && !isPreview && (
-                      <button
-                        type='button'
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleRemove(stored.skillId)
-                        }}
-                        className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
-                        aria-label='Remove skill'
-                      >
-                        <X className='size-[13px]' />
-                      </button>
-                    )}
-                  </div>
-                </div>
+                  <span className='truncate text-[var(--text-body)] text-sm'>
+                    {formatDisplayText(skillName, { workflowSearchHighlight })}
+                  </span>
+                </button>
+                {!disabled && !isPreview && (
+                  <Button
+                    type='button'
+                    variant='quiet'
+                    size='icon'
+                    onClick={() => handleRemove(stored.skillId)}
+                    aria-label='Remove skill'
+                  >
+                    <X className='size-[14px]' />
+                  </Button>
+                )}
               </div>
             )
           })}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
index c30d2b70382..bc8d1e0275b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -1,7 +1,17 @@
 'use client'
 
 import { type ReactNode, useCallback, useMemo, useState } from 'react'
-import { Checkbox, cn, Input, Label, SecretInput, Tooltip, Wizard } from '@sim/emcn'
+import {
+  Button,
+  Checkbox,
+  Chip,
+  ChipInput,
+  cn,
+  Label,
+  SecretInput,
+  Tooltip,
+  Wizard,
+} from '@sim/emcn'
 import { Check, ChevronRight, CircleInfo, Clipboard } from '@sim/emcn/icons'
 import { useShallow } from 'zustand/react/shallow'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -52,20 +62,15 @@ export function SlackSetupWizard({
 
   return (
     <>
-      <button
-        type='button'
+      <Chip
+        variant='border'
+        fullWidth
+        rightIcon={ChevronRight}
         onClick={() => setOpen(true)}
         disabled={launcherDisabled}
-        className={cn(
-          'flex w-full items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 text-left transition-colors',
-          launcherDisabled
-            ? 'cursor-not-allowed opacity-70'
-            : 'cursor-pointer hover-hover:bg-[var(--surface-6)]'
-        )}
       >
-        <span className='font-sans text-[var(--text-primary)] text-sm'>Setup Slack App</span>
-        <ChevronRight className='size-[14px] text-[var(--text-muted)]' />
-      </button>
+        Setup Slack App
+      </Chip>
 
       <WizardModal
         blockId={blockId}
@@ -188,7 +193,7 @@ interface SubStepProps {
 function SubStep({ n, children }: SubStepProps) {
   return (
     <li className='flex gap-2.5'>
-      <span className='mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--surface-5)] text-[var(--text-secondary)] text-xs tabular-nums'>
+      <span className='mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--surface-5)] font-medium text-[var(--text-secondary)] text-xs tabular-nums'>
         {n}
       </span>
       <div className='flex-1 text-[var(--text-secondary)] text-sm leading-relaxed'>{children}</div>
@@ -220,17 +225,17 @@ function StepConfigure({
       <div className='space-y-1.5'>
         <Label
           htmlFor={`${blockId}-wizard-bot-name`}
-          className='text-[var(--text-secondary)] text-xs'
+          className='font-medium text-[var(--text-secondary)] text-xs'
         >
           Bot name
         </Label>
-        <Input
+        <ChipInput
           id={`${blockId}-wizard-bot-name`}
           value={appName}
           onChange={(e) => onAppNameChange(e.target.value)}
           disabled={disabled}
           placeholder={DEFAULT_APP_NAME}
-          className='h-9 text-sm'
+          className='h-9'
         />
       </div>
       <div className='grid grid-cols-2 gap-x-4 gap-y-4'>
@@ -279,27 +284,15 @@ function StepCreate({ manifestJson, canCopy }: StepCreateProps) {
       <SubStepList>
         <SubStep n={1}>
           <div>Copy your manifest:</div>
-          <button
-            type='button'
-            onClick={handleCopy}
-            disabled={!canCopy}
-            className={cn(
-              'mt-2 inline-flex items-center gap-2 rounded-md border border-[var(--border-muted)] bg-[var(--surface-1)] px-3 py-1.5 text-left transition-colors',
-              canCopy
-                ? 'cursor-pointer hover-hover:bg-[var(--surface-hover)]'
-                : 'cursor-not-allowed opacity-70'
-            )}
-          >
-            <span className='text-[var(--text-secondary)] text-sm'>
-              {canCopy ? 'Click to copy manifest' : 'Deploy once to lock in the webhook URL'}
-            </span>
+          <Button variant='default' onClick={handleCopy} disabled={!canCopy} className='mt-2'>
+            {canCopy ? 'Click to copy manifest' : 'Deploy once to lock in the webhook URL'}
             {canCopy &&
               (copied ? (
                 <Check className='size-[12px] text-[var(--text-success)]' />
               ) : (
                 <Clipboard className='size-[12px] text-[var(--text-muted)]' />
               ))}
-          </button>
+          </Button>
           {copyFailed ? (
             <p className='mt-1.5 text-[var(--text-error)] text-xs'>
               Couldn't copy manifest — copy it manually from the developer console.
@@ -411,7 +404,7 @@ interface SecretFieldProps {
 function SecretField({ id, label, value, onChange, disabled, placeholder }: SecretFieldProps) {
   return (
     <div className='space-y-1.5'>
-      <Label htmlFor={id} className='text-[var(--text-secondary)] text-xs'>
+      <Label htmlFor={id} className='font-medium text-[var(--text-secondary)] text-xs'>
         {label}
       </Label>
       <SecretInput
@@ -486,7 +479,9 @@ function CapabilityGroup({
 }: CapabilityGroupProps) {
   return (
     <div className='space-y-2'>
-      <div className='text-[var(--text-muted)] text-xs uppercase tracking-wide'>{label}</div>
+      <div className='font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
+        {label}
+      </div>
       <div className='flex flex-col gap-y-2.5'>
         {capabilities.map((c) => (
           <CapabilityRow
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 9c13ee26ecd..7673765f9b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -1,10 +1,9 @@
 import {
   Badge,
   Button,
-  Combobox,
+  ChipCombobox,
+  CollapsibleCard,
   type ComboboxOption,
-  cn,
-  handleKeyboardActivation,
   Label,
   Trash,
 } from '@sim/emcn'
@@ -61,63 +60,11 @@ export function SortRuleRow({
       label,
     })
 
-  const renderHeader = () => (
-    <div
-      role='group'
-      aria-label={`Sort ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => onToggleCollapse(rule.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => onToggleCollapse(rule.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {rule.collapsed && rule.column
-            ? formatDisplayText(getColumnLabel(rule.column), {
-                workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
-              })
-            : `Sort ${index + 1}`}
-        </span>
-        {rule.collapsed && rule.column && (
-          <Badge variant='type' size='sm'>
-            {formatDisplayText(getDirectionLabel(rule.direction), {
-              workflowSearchHighlight: getLabelHighlight(
-                'direction',
-                getDirectionLabel(rule.direction)
-              ),
-            })}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add Sort</span>
-        </Button>
-        <Button
-          variant='ghost'
-          onClick={() => onRemove(rule.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Sort</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   const renderContent = () => (
-    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+    <>
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Column</Label>
-        <Combobox
+        <ChipCombobox
           options={columns}
           value={rule.column}
           onChange={(v) => onUpdate(rule.id, 'column', v)}
@@ -137,7 +84,7 @@ export function SortRuleRow({
 
       <div className='flex flex-col gap-1.5'>
         <Label className='text-small'>Direction</Label>
-        <Combobox
+        <ChipCombobox
           options={directionOptions}
           value={rule.direction}
           onChange={(v) => onUpdate(rule.id, 'direction', v as 'asc' | 'desc')}
@@ -157,19 +104,57 @@ export function SortRuleRow({
           }
         />
       </div>
-    </div>
+    </>
   )
 
   return (
-    <div
+    <CollapsibleCard
       data-sort-id={rule.id}
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
-      )}
+      title={
+        rule.collapsed && rule.column
+          ? formatDisplayText(getColumnLabel(rule.column), {
+              workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
+            })
+          : `Sort ${index + 1}`
+      }
+      badge={
+        rule.collapsed && rule.column ? (
+          <Badge variant='type' size='sm'>
+            {formatDisplayText(getDirectionLabel(rule.direction), {
+              workflowSearchHighlight: getLabelHighlight(
+                'direction',
+                getDirectionLabel(rule.direction)
+              ),
+            })}
+          </Badge>
+        ) : undefined
+      }
+      actions={
+        <>
+          <Button
+            variant='quiet'
+            size='icon'
+            onClick={onAdd}
+            disabled={isReadOnly}
+            aria-label='Add sort'
+          >
+            <Plus className='size-[14px]' />
+          </Button>
+          <Button
+            variant='quiet'
+            size='icon'
+            onClick={() => onRemove(rule.id)}
+            disabled={isReadOnly}
+            aria-label='Delete sort'
+          >
+            <Trash className='size-[14px] text-[var(--text-error)]' />
+          </Button>
+        </>
+      }
+      collapsed={rule.collapsed ?? false}
+      onToggleCollapse={() => onToggleCollapse(rule.id)}
     >
-      {renderHeader()}
-      {!rule.collapsed && renderContent()}
-    </div>
+      {renderContent()}
+    </CollapsibleCard>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 5498f4df7fe..e43fb61aa7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -2,8 +2,8 @@ import { useCallback, useRef, useState } from 'react'
 import {
   Badge,
   Button,
+  ChipCombobox,
   Code,
-  Combobox,
   type ComboboxOption,
   calculateGutterWidth,
   cn,
@@ -12,7 +12,6 @@ import {
   getCodeEditorProps,
   handleKeyboardActivation,
   highlight,
-  Input,
   Label,
   languages,
   Tooltip,
@@ -26,6 +25,7 @@ import {
 } from '@/lib/workflows/input-format'
 import { FileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import {
   controlValueToFiles,
   defaultFileFieldMode,
@@ -111,8 +111,6 @@ export function FieldFormat({
   const nameInputRefs = useRef<Record<string, HTMLInputElement>>({})
   const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
   const nameOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
-  const descriptionInputRefs = useRef<Record<string, HTMLInputElement>>({})
-  const descriptionOverlayRefs = useRef<Record<string, HTMLDivElement>>({})
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
   const [fileFieldModes, setFileFieldModes] = useState<Record<string, 'upload' | 'json'>>({})
 
@@ -141,7 +139,9 @@ export function FieldFormat({
   const fields: Field[] = Array.isArray(value) && value.length > 0 ? value : [fallbackField]
   const isReadOnly = isPreview || disabled
 
-  const renderFieldLabel = (label: string) => <Label>{label}</Label>
+  const renderFieldLabel = (label: string) => (
+    <Label className='font-normal text-[var(--text-body)]'>{label}</Label>
+  )
 
   /**
    * Resolves the current editor mode for a file field. The uploader is only
@@ -169,9 +169,10 @@ export function FieldFormat({
     return (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          <button
+          <Button
             type='button'
-            className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+            variant='quiet'
+            size='icon'
             onClick={() =>
               setFileFieldModes((prev) => ({
                 ...prev,
@@ -183,11 +184,11 @@ export function FieldFormat({
           >
             <ArrowLeftRight
               className={cn(
-                '!h-[12px] !w-[12px]',
+                'size-[14px]',
                 mode === 'json' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
               )}
             />
-          </button>
+          </Button>
         </Tooltip.Trigger>
         <Tooltip.Content side='top'>
           <p>{label}</p>
@@ -285,14 +286,6 @@ export function FieldFormat({
     if (overlay) overlay.scrollLeft = scrollLeft
   }
 
-  /**
-   * Syncs scroll position between description input and overlay for text highlighting
-   */
-  const syncDescriptionOverlayScroll = (fieldId: string, scrollLeft: number) => {
-    const overlay = descriptionOverlayRefs.current[fieldId]
-    if (overlay) overlay.scrollLeft = scrollLeft
-  }
-
   /**
    * Generates a unique field key for name inputs to avoid collision with value inputs
    */
@@ -323,14 +316,28 @@ export function FieldFormat({
       (newValue) => updateField(field.id, 'name', newValue)
     )
 
-    const inputClassName = cn('text-transparent [letter-spacing:inherit] caret-foreground')
-
     return (
       <>
-        <Input
+        <ReferenceTextInput
           ref={(el) => {
             if (el) nameInputRefs.current[field.id] = el
           }}
+          overlayRef={(element) => {
+            if (element) nameOverlayRefs.current[field.id] = element
+            else delete nameOverlayRefs.current[field.id]
+          }}
+          overlayContent={
+            <div className='min-w-fit whitespace-pre'>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+          interactiveOverlay={isReadOnly}
+          inputClassName='allow-scroll'
           name='name'
           value={fieldValue}
           onChange={handlers.onChange}
@@ -348,30 +355,8 @@ export function FieldFormat({
           placeholder={placeholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
+          className='w-full'
         />
-        <div
-          ref={(el) => {
-            if (el) nameOverlayRefs.current[field.id] = el
-          }}
-          className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-            !isReadOnly && 'pointer-events-none'
-          )}
-          style={{ scrollbarWidth: 'none' }}
-        >
-          <div
-            className='w-full whitespace-pre'
-            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-          >
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
         {fieldState.showTags && (
           <TagDropdown
             visible={fieldState.showTags}
@@ -395,7 +380,7 @@ export function FieldFormat({
     <div
       role='group'
       aria-label={`${title} ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[3px] bg-[var(--surface-4)] px-2.5 py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-xl px-2 py-1'
       onClick={() => toggleCollapse(field.id)}
       onKeyDown={(event) => {
         if (event.target !== event.currentTarget) return
@@ -403,7 +388,7 @@ export function FieldFormat({
       }}
     >
       <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {field.name || `${title} ${index + 1}`}
         </span>
         {field.name && showType && (
@@ -414,21 +399,26 @@ export function FieldFormat({
       </div>
       <div
         role='presentation'
-        className='flex items-center gap-2 pl-2'
+        className='flex items-center gap-1 pl-2'
         onClick={(e) => e.stopPropagation()}
       >
-        <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
+        <Button
+          variant='quiet'
+          size='icon'
+          onClick={addField}
+          disabled={isReadOnly}
+          aria-label={`Add ${title}`}
+        >
           <Plus className='size-[14px]' />
-          <span className='sr-only'>Add {title}</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='quiet'
+          size='icon'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
+          aria-label='Delete field'
         >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Field</span>
+          <Trash className='size-[14px] text-[var(--text-error)]' />
         </Button>
       </div>
     </div>
@@ -440,7 +430,7 @@ export function FieldFormat({
   const renderValueInput = (field: Field) => {
     if (field.type === 'boolean') {
       return (
-        <Combobox
+        <ChipCombobox
           options={BOOLEAN_OPTIONS}
           value={field.value ?? ''}
           onChange={(v) => !isReadOnly && updateField(field.id, 'value', v)}
@@ -470,8 +460,6 @@ export function FieldFormat({
       (newValue) => updateField(field.id, 'value', newValue)
     )
 
-    const inputClassName = cn('text-transparent [letter-spacing:inherit] caret-foreground')
-
     const tagDropdown = fieldState.showTags && (
       <TagDropdown
         visible={fieldState.showTags}
@@ -493,7 +481,7 @@ export function FieldFormat({
         return Array.from({ length: lineCount }, (_, i) => (
           <div
             key={i}
-            className='font-mono text-[var(--text-muted)] text-xs'
+            className='font-medium font-mono text-[var(--text-muted)] text-xs'
             style={{ height: `${21}px`, lineHeight: `${21}px` }}
           >
             {i + 1}
@@ -502,7 +490,7 @@ export function FieldFormat({
       }
 
       return (
-        <Code.Container className='min-h-[120px]'>
+        <Code.Container appearance='field' className='min-h-[120px]'>
           <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
@@ -528,7 +516,7 @@ export function FieldFormat({
         return Array.from({ length: lineCount }, (_, i) => (
           <div
             key={i}
-            className='font-mono text-[var(--text-muted)] text-xs'
+            className='font-medium font-mono text-[var(--text-muted)] text-xs'
             style={{ height: `${21}px`, lineHeight: `${21}px` }}
           >
             {i + 1}
@@ -537,7 +525,7 @@ export function FieldFormat({
       }
 
       return (
-        <Code.Container className='min-h-[120px]'>
+        <Code.Container appearance='field' className='min-h-[120px]'>
           <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
@@ -587,7 +575,7 @@ export function FieldFormat({
         Array.from({ length: lineCount }, (_, i) => (
           <div
             key={i}
-            className='font-mono text-[var(--text-muted)] text-xs'
+            className='font-medium font-mono text-[var(--text-muted)] text-xs'
             style={{ height: `${21}px`, lineHeight: `${21}px` }}
           >
             {i + 1}
@@ -595,7 +583,7 @@ export function FieldFormat({
         ))
 
       return (
-        <Code.Container className='min-h-[120px]'>
+        <Code.Container appearance='field' className='min-h-[120px]'>
           <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
@@ -617,10 +605,26 @@ export function FieldFormat({
 
     return (
       <>
-        <Input
+        <ReferenceTextInput
           ref={(el) => {
             if (el) valueInputRefs.current[field.id] = el
           }}
+          overlayRef={(element) => {
+            if (element) overlayRefs.current[field.id] = element
+            else delete overlayRefs.current[field.id]
+          }}
+          overlayContent={
+            <div className='min-w-fit whitespace-pre'>
+              {formatDisplayText(
+                fieldValue,
+                accessiblePrefixes
+                  ? { accessiblePrefixes, workflowSearchHighlight }
+                  : { highlightAll: true, workflowSearchHighlight }
+              )}
+            </div>
+          }
+          interactiveOverlay={isReadOnly}
+          inputClassName='allow-scroll'
           name='value'
           value={fieldValue}
           onChange={handlers.onChange}
@@ -638,30 +642,8 @@ export function FieldFormat({
           placeholder={valuePlaceholder}
           disabled={isReadOnly}
           autoComplete='off'
-          className={cn('allow-scroll w-full overflow-x-auto overflow-y-hidden', inputClassName)}
+          className='w-full'
         />
-        <div
-          ref={(el) => {
-            if (el) overlayRefs.current[field.id] = el
-          }}
-          className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-            !isReadOnly && 'pointer-events-none'
-          )}
-          style={{ scrollbarWidth: 'none' }}
-        >
-          <div
-            className='w-full whitespace-pre'
-            style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-          >
-            {formatDisplayText(
-              fieldValue,
-              accessiblePrefixes
-                ? { accessiblePrefixes, workflowSearchHighlight }
-                : { highlightAll: true, workflowSearchHighlight }
-            )}
-          </div>
-        </div>
         {tagDropdown}
       </>
     )
@@ -673,13 +655,13 @@ export function FieldFormat({
         <div
           key={field.id}
           data-field-id={field.id}
-          className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+          className='overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)]'
         >
           {renderFieldHeader(field, index)}
 
           <Expandable expanded={!field.collapsed}>
             <ExpandableContent>
-              <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+              <div className='flex flex-col gap-2 border-[var(--border)] border-t p-2'>
                 <div className='flex flex-col gap-1.5'>
                   {renderFieldLabel('Name')}
                   <div className='relative'>{renderNameInput(field)}</div>
@@ -688,7 +670,7 @@ export function FieldFormat({
                 {showType && (
                   <div className='flex flex-col gap-1.5'>
                     {renderFieldLabel('Type')}
-                    <Combobox
+                    <ChipCombobox
                       options={TYPE_OPTIONS}
                       value={field.type}
                       onChange={(value) => updateField(field.id, 'type', value)}
@@ -701,61 +683,39 @@ export function FieldFormat({
                   <div className='flex flex-col gap-1.5'>
                     {renderFieldLabel('Description')}
                     <div className='relative'>
-                      <Input
-                        ref={(el) => {
-                          if (el) descriptionInputRefs.current[field.id] = el
-                        }}
+                      <ReferenceTextInput
                         value={field.description ?? ''}
                         onChange={(e) => updateField(field.id, 'description', e.target.value)}
-                        onScroll={(e) =>
-                          syncDescriptionOverlayScroll(field.id, e.currentTarget.scrollLeft)
-                        }
-                        onPaste={() =>
-                          setTimeout(() => {
-                            const input = descriptionInputRefs.current[field.id]
-                            input && syncDescriptionOverlayScroll(field.id, input.scrollLeft)
-                          }, 0)
-                        }
                         placeholder={descriptionPlaceholder}
                         disabled={isReadOnly}
-                        autoComplete='off'
-                        className='allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
+                        interactiveOverlay={isReadOnly}
+                        overlayContent={
+                          <span className='truncate'>
+                            {formatDisplayText(
+                              field.description ?? '',
+                              accessiblePrefixes
+                                ? {
+                                    accessiblePrefixes,
+                                    workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                                      activeSearchTarget,
+                                      blockId,
+                                      subBlockId,
+                                      valuePath: [index, 'description'],
+                                    }),
+                                  }
+                                : {
+                                    highlightAll: true,
+                                    workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                                      activeSearchTarget,
+                                      blockId,
+                                      subBlockId,
+                                      valuePath: [index, 'description'],
+                                    }),
+                                  }
+                            )}
+                          </span>
+                        }
                       />
-                      <div
-                        ref={(el) => {
-                          if (el) descriptionOverlayRefs.current[field.id] = el
-                        }}
-                        style={{ scrollbarWidth: 'none' }}
-                        className={cn(
-                          'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-                          isReadOnly && 'opacity-50'
-                        )}
-                      >
-                        <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-                          {formatDisplayText(
-                            field.description ?? '',
-                            accessiblePrefixes
-                              ? {
-                                  accessiblePrefixes,
-                                  workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                                    activeSearchTarget,
-                                    blockId,
-                                    subBlockId,
-                                    valuePath: [index, 'description'],
-                                  }),
-                                }
-                              : {
-                                  highlightAll: true,
-                                  workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                                    activeSearchTarget,
-                                    blockId,
-                                    subBlockId,
-                                    valuePath: [index, 'description'],
-                                  }),
-                                }
-                          )}
-                        </span>
-                      </div>
                     </div>
                   </div>
                 )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/switch/switch.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/switch/switch.tsx
index 9ac68b39dac..da828416bb7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/switch/switch.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { Label, Switch as UISwitch } from '@sim/emcn'
+import { BooleanControl } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/boolean-control'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 
 interface SwitchProps {
@@ -24,26 +24,18 @@ export function Switch({
 
   const value = isPreview ? previewValue : propValue !== undefined ? propValue : storeValue
 
-  const handleChange = (checked: boolean) => {
+  const handleChange = (nextValue: boolean) => {
     if (!isPreview && !disabled) {
-      setStoreValue(checked)
+      setStoreValue(nextValue)
     }
   }
 
   return (
-    <div className='flex items-center gap-x-3'>
-      <UISwitch
-        id={`${blockId}-${subBlockId}`}
-        checked={Boolean(value)}
-        onCheckedChange={handleChange}
-        disabled={isPreview || disabled}
-      />
-      <Label
-        htmlFor={`${blockId}-${subBlockId}`}
-        className='cursor-pointer font-sans text-[var(--text-primary)] text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
-      >
-        {title}
-      </Label>
-    </div>
+    <BooleanControl
+      value={Boolean(value)}
+      onChange={handleChange}
+      label={title}
+      disabled={isPreview || disabled}
+    />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table-selector/table-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table-selector/table-selector.tsx
index 2a57b60aca1..abbe42cdba5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table-selector/table-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table-selector/table-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { Combobox, type ComboboxOption } from '@sim/emcn'
+import { ChipCombobox, type ComboboxOption } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -93,7 +93,7 @@ export function TableSelector({
   })
 
   return (
-    <Combobox
+    <ChipCombobox
       options={options}
       value={tableId ?? undefined}
       onChange={handleChange}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index bce4c0b2ede..421681ab64e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -11,6 +11,8 @@ import {
   PopoverSection,
   usePopoverContext,
 } from '@sim/emcn'
+import { Repeat, Split } from '@sim/emcn/icons'
+import { WorkflowTypeTag } from '@sim/workflow-renderer'
 import { isEqual } from 'es-toolkit'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
@@ -30,6 +32,7 @@ import type {
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { getBlock } from '@/blocks'
 import { BlockTile } from '@/blocks/block-tile'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 import type { BlockConfig } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
 import { useVariablesStore } from '@/stores/variables/store'
@@ -160,10 +163,27 @@ export const getTagSearchTerm = (text: string, cursorPosition: number): string =
 const BLOCK_COLORS = {
   VARIABLE: '#2F8BFF',
   DEFAULT: '#2F55FF',
-  LOOP: '#2FB3FF',
-  PARALLEL: '#FEE12B',
 } as const
 
+const TagIcon: React.FC<{
+  icon: string | React.ComponentType<{ className?: string }>
+  color: string
+}> = ({ icon, color }) => (
+  <div
+    className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'
+    style={{ background: color }}
+  >
+    {typeof icon === 'string' ? (
+      <span className={cn(getTileIconColorClass(color, true), 'font-bold text-micro')}>{icon}</span>
+    ) : (
+      (() => {
+        const IconComponent = icon
+        return <IconComponent className={cn(getTileIconColorClass(color, true), 'size-[9px]')} />
+      })()
+    )}
+  </div>
+)
+
 /**
  * Prefix constants for special tag types.
  */
@@ -455,7 +475,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
             }
           }}
         >
-          <span className='flex-1 truncate'>{currentNestedTag.display}</span>
+          <span className='flex-1 truncate font-medium'>{currentNestedTag.display}</span>
         </PopoverItem>
       )}
 
@@ -503,9 +523,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
           >
             <span className='flex-1 truncate'>{child.display}</span>
             {childType && childType !== 'any' && (
-              <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
-                {childType}
-              </span>
+              <span className='ml-auto text-[var(--text-muted)] text-micro'>{childType}</span>
             )}
           </PopoverItem>
         )
@@ -538,7 +556,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
             }}
           >
             <span className='flex-1 truncate'>{nestedChild.display}</span>
-            <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>{'>'}</span>
+            <span className='ml-auto text-[var(--text-muted)] text-micro'>{'>'}</span>
           </PopoverItem>
         )
       })}
@@ -702,9 +720,7 @@ const NestedTagRenderer: React.FC<NestedTagRendererProps> = ({
     >
       <span className='flex-1 truncate'>{nestedTag.display}</span>
       {tagDescription && tagDescription !== 'any' && (
-        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
-          {tagDescription}
-        </span>
+        <span className='ml-auto text-[var(--text-muted)] text-micro'>{tagDescription}</span>
       )}
     </PopoverItem>
   )
@@ -772,9 +788,7 @@ const VariableTagItem: React.FC<{
         {tag.startsWith(TAG_PREFIXES.VARIABLE) ? tag.substring(TAG_PREFIXES.VARIABLE.length) : tag}
       </span>
       {variableInfo && (
-        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
-          {variableInfo.type}
-        </span>
+        <span className='ml-auto text-[var(--text-muted)] text-micro'>{variableInfo.type}</span>
       )}
     </PopoverItem>
   )
@@ -791,7 +805,10 @@ const BlockRootTagItem: React.FC<{
   handleTagSelect: (tag: string, group?: BlockTagGroup) => void
   itemRefs: React.RefObject<Map<string, HTMLElement>>
   group: BlockTagGroup
+  tagIcon: string | React.ComponentType<{ className?: string }>
   blockType: string
+  brandColor: string
+  isIntegration: boolean
   blockName: string
 }> = ({
   rootTag,
@@ -801,7 +818,10 @@ const BlockRootTagItem: React.FC<{
   handleTagSelect,
   itemRefs,
   group,
+  tagIcon,
   blockType,
+  brandColor,
+  isIntegration,
   blockName,
 }) => {
   const handleMouseEnter = useKeyboardAwareMouseEnter(setSelectedIndex)
@@ -822,12 +842,18 @@ const BlockRootTagItem: React.FC<{
         }
       }}
     >
-      <BlockTile
-        blockType={blockType}
-        fallbackLabel={blockName.charAt(0).toUpperCase()}
-        size='sm'
-      />
-      <span className='flex-1 truncate'>{blockName}</span>
+      {typeof tagIcon === 'string' ? (
+        <TagIcon icon={tagIcon} color={BLOCK_COLORS.DEFAULT} />
+      ) : (
+        <WorkflowTypeTag
+          type={blockType}
+          typeLabel={blockName}
+          Icon={tagIcon}
+          iconBgColor={brandColor}
+          isIntegration={isIntegration}
+        />
+      )}
+      <span className='flex-1 truncate font-medium'>{blockName}</span>
     </PopoverItem>
   )
 }
@@ -1660,7 +1686,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
 
   return (
     <NestedNavigationContext.Provider value={nestedNavigationValue}>
-      <Popover open={visible} onOpenChange={(open) => !open && onClose?.()} colorScheme='inverted'>
+      <Popover open={visible} onOpenChange={(open) => !open && onClose?.()}>
         <PopoverContextCapture contextRef={popoverContextRef} />
         <PopoverAnchor asChild>
           <div
@@ -1689,6 +1715,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           }}
         />
         <PopoverContent
+          appearance='dropdown'
           maxHeight={240}
           className='min-w-[280px]'
           side={side}
@@ -1700,7 +1727,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           <PopoverScrollArea ref={scrollAreaRef}>
             <TagDropdownBackButton setSelectedIndex={setSelectedIndex} />
             {flatTagList.length === 0 ? (
-              <div className='px-1.5 py-2 text-[color-mix(in_srgb,var(--white)_60%,transparent)] text-caption'>
+              <div className='px-1.5 py-2 text-[var(--text-muted)] text-caption'>
                 No matching tags found
               </div>
             ) : (
@@ -1735,6 +1762,18 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                 )}
 
                 {nestedBlockTagGroups.map((group: NestedBlockTagGroup, groupIndex: number) => {
+                  const blockConfig = getBlock(group.blockType)
+
+                  let tagIcon: string | React.ComponentType<{ className?: string }> =
+                    group.blockName.charAt(0).toUpperCase()
+                  if (blockConfig?.icon) {
+                    tagIcon = blockConfig.icon
+                  } else if (group.blockType === 'loop') {
+                    tagIcon = Repeat
+                  } else if (group.blockType === 'parallel') {
+                    tagIcon = Split
+                  }
+
                   const normalizedBlockName = normalizeName(group.blockName)
                   const rootTagFromTags = group.tags.find((tag) => tag === normalizedBlockName)
                   const rootTag = rootTagFromTags || normalizedBlockName
@@ -1751,7 +1790,10 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                         handleTagSelect={handleTagSelect}
                         itemRefs={itemRefs}
                         group={group}
+                        tagIcon={tagIcon}
                         blockType={group.blockType}
+                        brandColor={blockConfig?.bgColor ?? ''}
+                        isIntegration={blockConfig?.category === 'tools'}
                         blockName={group.blockName}
                       />
                       {group.nestedTags.map((nestedTag) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/time-input/time-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/time-input/time-input.tsx
index f450520b4c5..3784f412dc3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/time-input/time-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/time-input/time-input.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { TimePicker } from '@sim/emcn'
+import { ChipTimePicker } from '@sim/emcn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
@@ -25,10 +25,6 @@ function formatTimeInputDisplayLabel(value: string): string {
   return `${displayHour}:${minutes} ${ampm}`
 }
 
-/**
- * Time input wrapper for sub-block editor.
- * Connects the EMCN TimePicker to the sub-block store.
- */
 export function TimeInput({
   blockId,
   subBlockId,
@@ -57,12 +53,13 @@ export function TimeInput({
   }
 
   return (
-    <TimePicker
+    <ChipTimePicker
       value={value || undefined}
       onChange={handleChange}
       placeholder={placeholder || 'Select time'}
       disabled={isPreview || disabled}
       className={className}
+      fullWidth
       overlayContent={
         workflowSearchHighlight ? (
           <span className='truncate'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 61012a92c35..daae56676b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -4,7 +4,6 @@ import {
   CODE_LINE_HEIGHT_PX,
   Code,
   calculateGutterWidth,
-  chipFieldSurfaceClass,
   cn,
   getCodeEditorProps,
   highlight,
@@ -179,12 +178,11 @@ export function CodeEditor({
 
   return (
     <Code.Container
-      className={cn(chipFieldSurfaceClass, error && 'border-[var(--text-error)]', className)}
+      appearance='field'
+      className={cn(error && 'border-[var(--text-error)]', className)}
       style={minHeight ? { minHeight } : undefined}
     >
-      <Code.Gutter width={gutterWidth} className='rounded-l-lg bg-transparent dark:bg-transparent'>
-        {renderLineNumbers()}
-      </Code.Gutter>
+      <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
 
       <Code.Content paddingLeft={`${gutterWidth}px`} editorRef={editorRef}>
         <Code.Placeholder gutterWidth={gutterWidth} show={value.length === 0 && !!placeholder}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
index aa51770bbed..201d1c28fd0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { createElement, useCallback, useMemo, useRef, useState } from 'react'
-import { Button, Combobox } from '@sim/emcn'
+import { Button, ChipCombobox } from '@sim/emcn'
 import { SquareArrowUpRight } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
@@ -220,7 +220,7 @@ export function ToolCredentialSelector({
 
   return (
     <div>
-      <Combobox
+      <ChipCombobox
         options={comboboxOptions}
         value={inputValue}
         selectedValue={selectedId}
@@ -232,7 +232,6 @@ export function ToolCredentialSelector({
         filterOptions={true}
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
-        className={selectedId ? 'pl-7' : ''}
       />
 
       {needsUpdate && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
index e7840a8bf4a..19b12a28d80 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
@@ -2,8 +2,7 @@
 
 import type React from 'react'
 import { useRef, useState } from 'react'
-import { Button, cn, Input, Label, Tooltip } from '@sim/emcn'
-import { ArrowLeftRight, ArrowUp } from '@sim/emcn/icons'
+import { SubBlockFieldHeader } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/field-header'
 import type { WandControlHandlers } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 
 /**
@@ -85,100 +84,33 @@ export function ParameterWithLabel({
 
   return (
     <div key={paramId} className='relative min-w-0 space-y-1.5'>
-      <div className='flex items-center justify-between gap-1.5 pl-0.5'>
-        <Label className='flex items-baseline gap-1.5 whitespace-nowrap text-[var(--text-primary)] text-small'>
-          {title}
-          {isRequired && visibility === 'user-only' && <span className='ml-0.5'>*</span>}
-        </Label>
-        <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
-          {showWand &&
-            (!isSearchActive ? (
-              <Button
-                variant='active'
-                className='-my-1 h-5 px-2 py-0 text-xs'
-                onClick={handleSearchClick}
-              >
-                Generate
-              </Button>
-            ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
-                <Input
-                  ref={searchInputRef}
-                  value={isStreaming ? 'Generating...' : searchQuery}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    handleSearchChange(e.target.value)
-                  }
-                  onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
-                    const relatedTarget = e.relatedTarget as HTMLElement | null
-                    if (relatedTarget?.closest('button')) return
-                    handleSearchBlur()
-                  }}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                    if (e.key === 'Enter' && searchQuery.trim() && !isStreaming) {
-                      handleSearchSubmit()
-                    } else if (e.key === 'Escape') {
-                      handleSearchCancel()
-                    }
-                  }}
-                  disabled={isStreaming}
-                  className={cn(
-                    'h-5 min-w-[80px] flex-1 text-xs',
-                    isStreaming && 'text-muted-foreground'
-                  )}
-                  placeholder='Generate with AI...'
-                />
-                <Button
-                  variant='primary'
-                  disabled={!searchQuery.trim() || isStreaming}
-                  onMouseDown={(e: React.MouseEvent) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                  onClick={(e: React.MouseEvent) => {
-                    e.stopPropagation()
-                    handleSearchSubmit()
-                  }}
-                  className='size-[20px] flex-shrink-0 p-0'
-                >
-                  <ArrowUp className='size-[12px]' />
-                </Button>
-              </div>
-            ))}
-          {canonicalToggle && !isPreview && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <button
-                  type='button'
-                  className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                  onClick={canonicalToggle.onToggle}
-                  disabled={canonicalToggle.disabled || disabled}
-                  aria-label={
-                    canonicalToggle.mode === 'advanced'
-                      ? 'Switch to selector'
-                      : 'Switch to manual ID'
-                  }
-                >
-                  <ArrowLeftRight
-                    className={cn(
-                      '!h-[12px] !w-[12px]',
-                      canonicalToggle.mode === 'advanced'
-                        ? 'text-[var(--text-primary)]'
-                        : 'text-[var(--text-secondary)]'
-                    )}
-                  />
-                </button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                <p>
-                  {canonicalToggle.mode === 'advanced'
-                    ? 'Switch to selector'
-                    : 'Switch to manual ID'}
-                </p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          )}
-        </div>
-      </div>
+      <SubBlockFieldHeader
+        title={title}
+        required={isRequired && visibility === 'user-only'}
+        wandAction={
+          showWand
+            ? {
+                isSearchActive,
+                searchQuery,
+                isStreaming,
+                onSearchClick: handleSearchClick,
+                onSearchBlur: handleSearchBlur,
+                onSearchChange: handleSearchChange,
+                onSearchSubmit: handleSearchSubmit,
+                onSearchCancel: handleSearchCancel,
+                searchInputRef,
+              }
+            : undefined
+        }
+        canonicalAction={
+          canonicalToggle && !isPreview
+            ? {
+                ...canonicalToggle,
+                disabled: canonicalToggle.disabled || disabled,
+              }
+            : undefined
+        }
+      />
       <div className='relative w-full min-w-0'>{children(wandControlRef)}</div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index fe30b4dc656..55720fcbf6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -2,7 +2,9 @@ import type React from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Badge,
-  Combobox,
+  Button,
+  ChipCombobox,
+  ChipSelect,
   type ComboboxOption,
   type ComboboxOptionGroup,
   cn,
@@ -11,7 +13,6 @@ import {
   PopoverContent,
   PopoverItem,
   PopoverTrigger,
-  Switch,
   Tooltip,
 } from '@sim/emcn'
 import { ArrowLeft, ChevronRight, Server, Wrench, X } from '@sim/emcn/icons'
@@ -32,6 +33,7 @@ import { buildToolSubBlockId } from '@/lib/workflows/tool-input/synthetic-subblo
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { McpServerFormModal } from '@/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal'
 import {
+  BooleanControl,
   LongInput,
   ShortInput,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
@@ -115,6 +117,11 @@ import {
 } from '@/tools/params-resolver'
 
 const logger = createLogger('ToolInput')
+const TOOL_USAGE_OPTIONS = [
+  { value: 'auto', label: 'Auto' },
+  { value: 'force', label: 'Force' },
+  { value: 'none', label: 'None' },
+] as const
 
 /**
  * Renders the input for workflow_executor's inputMapping parameter.
@@ -480,7 +487,6 @@ export const ToolInput = memo(function ToolInput({
   const [editingToolIndex, setEditingToolIndex] = useState<number | null>(null)
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
-  const [usageControlPopoverIndex, setUsageControlPopoverIndex] = useState<number | null>(null)
   const [mcpRemovePopoverIndex, setMcpRemovePopoverIndex] = useState<number | null>(null)
   const [mcpServerDrilldown, setMcpServerDrilldown] = useState<string | null>(null)
 
@@ -1234,7 +1240,7 @@ export const ToolInput = memo(function ToolInput({
             label: selectedLabel,
           })
           return (
-            <Combobox
+            <ChipCombobox
               options={options}
               value={value}
               onChange={onChange}
@@ -1253,9 +1259,11 @@ export const ToolInput = memo(function ToolInput({
 
         case 'switch':
           return (
-            <Switch
-              checked={value === 'true' || value === 'True'}
-              onCheckedChange={(checked) => onChange(checked ? 'true' : 'false')}
+            <BooleanControl
+              value={value === 'true' || value === 'True'}
+              onChange={(checked) => onChange(checked ? 'true' : 'false')}
+              disabled={disabled}
+              aria-label={formatParameterLabel(param.id)}
             />
           )
 
@@ -1666,7 +1674,7 @@ export const ToolInput = memo(function ToolInput({
 
   return (
     <div className='w-full space-y-2'>
-      <Combobox
+      <ChipCombobox
         options={[]}
         groups={toolGroups}
         placeholder='Add tool...'
@@ -1819,7 +1827,7 @@ export const ToolInput = memo(function ToolInput({
             <div
               key={`${tool.customToolId || tool.toolId || toolIndex}-${toolIndex}`}
               className={cn(
-                'group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out',
+                'group relative flex flex-col overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-[transform,opacity,border-color] duration-200 ease-in-out',
                 draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                 dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
                   ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
@@ -1834,7 +1842,7 @@ export const ToolInput = memo(function ToolInput({
             >
               <div
                 className={cn(
-                  'flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]',
+                  'flex items-center justify-between gap-2 rounded-t-xl px-2 py-1.5',
                   (isCustomTool || hasToolBody) && 'cursor-pointer'
                 )}
                 role={isCustomTool || hasToolBody ? 'button' : undefined}
@@ -1891,7 +1899,7 @@ export const ToolInput = memo(function ToolInput({
                       />
                     )}
                   </div>
-                  <span className='truncate text-[var(--text-primary)] text-small'>
+                  <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                     {formatDisplayText(toolDisplayName ?? '', {
                       workflowSearchHighlight: getToolTitleSearchHighlight(toolIndex),
                     })}
@@ -1932,60 +1940,14 @@ export const ToolInput = memo(function ToolInput({
                 </div>
                 <div className='flex flex-shrink-0 items-center gap-2'>
                   {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
-                    <Popover
-                      open={usageControlPopoverIndex === toolIndex}
-                      onOpenChange={(open) => setUsageControlPopoverIndex(open ? toolIndex : null)}
-                      colorScheme='inverted'
-                    >
-                      <PopoverTrigger asChild>
-                        <button
-                          className='flex items-center justify-center text-[var(--text-tertiary)] text-caption transition-colors hover-hover:text-[var(--text-primary)]'
-                          onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                          aria-label='Tool usage control'
-                        >
-                          {tool.usageControl === 'auto' && 'Auto'}
-                          {tool.usageControl === 'force' && 'Force'}
-                          {tool.usageControl === 'none' && 'None'}
-                          {!tool.usageControl && 'Auto'}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent
-                        side='bottom'
-                        align='end'
-                        sideOffset={8}
-                        onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        className='gap-0.5'
-                        border
-                      >
-                        <PopoverItem
-                          active={(tool.usageControl || 'auto') === 'auto'}
-                          onClick={() => {
-                            handleUsageControlChange(toolIndex, 'auto')
-                            setUsageControlPopoverIndex(null)
-                          }}
-                        >
-                          Auto <span className='text-[var(--text-tertiary)]'>(model decides)</span>
-                        </PopoverItem>
-                        <PopoverItem
-                          active={tool.usageControl === 'force'}
-                          onClick={() => {
-                            handleUsageControlChange(toolIndex, 'force')
-                            setUsageControlPopoverIndex(null)
-                          }}
-                        >
-                          Force <span className='text-[var(--text-tertiary)]'>(always use)</span>
-                        </PopoverItem>
-                        <PopoverItem
-                          active={tool.usageControl === 'none'}
-                          onClick={() => {
-                            handleUsageControlChange(toolIndex, 'none')
-                            setUsageControlPopoverIndex(null)
-                          }}
-                        >
-                          None
-                        </PopoverItem>
-                      </PopoverContent>
-                    </Popover>
+                    <ChipSelect
+                      options={[...TOOL_USAGE_OPTIONS]}
+                      value={tool.usageControl || 'auto'}
+                      onChange={(value) => handleUsageControlChange(toolIndex, value)}
+                      disabled={isPreview || disabled}
+                      align='end'
+                      aria-label='Tool usage control'
+                    />
                   )}
                   {isMcpTool &&
                   selectedTools.filter(
@@ -1998,7 +1960,10 @@ export const ToolInput = memo(function ToolInput({
                       }}
                     >
                       <PopoverTrigger asChild>
-                        <button
+                        <Button
+                          type='button'
+                          variant='quiet'
+                          size='icon'
                           onClick={(e) => {
                             e.stopPropagation()
                             handleRemoveTool(toolIndex)
@@ -2008,11 +1973,10 @@ export const ToolInput = memo(function ToolInput({
                             e.stopPropagation()
                             setMcpRemovePopoverIndex(toolIndex)
                           }}
-                          className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                           aria-label='Remove tool'
                         >
-                          <X className='size-[13px]' />
-                        </button>
+                          <X className='size-[14px]' />
+                        </Button>
                       </PopoverTrigger>
                       <PopoverContent
                         side='bottom'
@@ -2041,22 +2005,24 @@ export const ToolInput = memo(function ToolInput({
                       </PopoverContent>
                     </Popover>
                   ) : (
-                    <button
+                    <Button
+                      type='button'
+                      variant='quiet'
+                      size='icon'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
-                      <X className='size-[13px]' />
-                    </button>
+                      <X className='size-[14px]' />
+                    </Button>
                   )}
                 </div>
               </div>
 
               {!isCustomTool && isExpandedForDisplay && (
-                <div className='flex flex-col gap-2.5 overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] p-2'>
+                <div className='flex flex-col gap-2.5 overflow-visible border-[var(--border)] border-t p-2'>
                   {/* Operation dropdown for tools with multiple operations */}
                   {(() => {
                     const hasOperations = hasMultipleOperations(tool.type)
@@ -2064,8 +2030,10 @@ export const ToolInput = memo(function ToolInput({
 
                     return hasOperations && operationOptions.length > 0 ? (
                       <div className='relative space-y-1.5'>
-                        <div className='text-[var(--text-primary)] text-small'>Operation</div>
-                        <Combobox
+                        <div className='font-medium text-[var(--text-primary)] text-small'>
+                          Operation
+                        </div>
+                        <ChipCombobox
                           options={operationOptions
                             .filter((option) => option.id !== '')
                             .map((option) => ({
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index c5029139e2b..5be9308c629 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -2,19 +2,21 @@ import { useEffect, useRef, useState } from 'react'
 import {
   Badge,
   Button,
-  Combobox,
+  ChipCombobox,
+  CollapsibleCard,
   type ComboboxOption,
   cn,
-  handleKeyboardActivation,
-  Input,
   Label,
-  Textarea,
   Tooltip,
 } from '@sim/emcn'
 import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
 import { generateId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import {
+  ReferenceTextarea,
+  ReferenceTextInput,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import {
   checkTagTrigger,
   TagDropdown,
@@ -349,7 +351,7 @@ export function VariablesInput({
             d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
           />
         </svg>
-        <p className='mb-1 text-foreground text-sm'>No variable assignments defined</p>
+        <p className='mb-1 font-medium text-foreground text-sm'>No variable assignments defined</p>
         <p className='text-muted-foreground text-xs'>
           Add variables in the Variables panel to get started
         </p>
@@ -394,309 +396,273 @@ export function VariablesInput({
             })
 
             return (
-              <div
+              <CollapsibleCard
                 key={assignment.id}
                 data-assignment-id={assignment.id}
-                className={cn(
-                  'rounded-sm border border-[var(--border-1)]',
-                  collapsed ? 'overflow-hidden' : 'overflow-visible'
-                )}
-              >
-                <div
-                  role='button'
-                  tabIndex={0}
-                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-                  onClick={() => toggleCollapse(assignment.id)}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget) return
-                    handleKeyboardActivation(event, () => toggleCollapse(assignment.id))
-                  }}
-                >
-                  <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-                      {assignment.variableName
-                        ? formatDisplayText(assignment.variableName, {
-                            workflowSearchHighlight: variableLabelHighlight,
-                          })
-                        : `Variable ${index + 1}`}
-                    </span>
-                    {assignment.variableName && (
-                      <Badge variant='type' size='sm'>
-                        {assignment.type}
-                      </Badge>
-                    )}
-                  </div>
-                  <div className='flex items-center gap-2 pl-2'>
+                title={
+                  assignment.variableName
+                    ? formatDisplayText(assignment.variableName, {
+                        workflowSearchHighlight: variableLabelHighlight,
+                      })
+                    : `Variable ${index + 1}`
+                }
+                badge={
+                  assignment.variableName ? (
+                    <Badge variant='type' size='sm'>
+                      {assignment.type}
+                    </Badge>
+                  ) : undefined
+                }
+                actions={
+                  <>
                     <Button
-                      variant='ghost'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        addAssignment()
-                      }}
+                      variant='quiet'
+                      size='icon'
+                      onClick={addAssignment}
                       disabled={isReadOnly || allVariablesAssigned}
-                      className='h-auto p-0'
+                      aria-label='Add variable'
                     >
                       <Plus className='size-[14px]' />
-                      <span className='sr-only'>Add Variable</span>
                     </Button>
                     <Button
-                      variant='ghost'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        removeAssignment(assignment.id)
-                      }}
+                      variant='quiet'
+                      size='icon'
+                      onClick={() => removeAssignment(assignment.id)}
                       disabled={isReadOnly}
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      aria-label='Delete variable'
                     >
-                      <Trash className='size-[14px]' />
-                      <span className='sr-only'>Delete Variable</span>
+                      <Trash className='size-[14px] text-[var(--text-error)]' />
                     </Button>
-                  </div>
+                  </>
+                }
+                collapsed={collapsed}
+                onToggleCollapse={() => toggleCollapse(assignment.id)}
+              >
+                <div className='flex flex-col gap-1.5'>
+                  <Label className='text-small'>Variable</Label>
+                  <ChipCombobox
+                    options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
+                    value={assignment.variableId || ''}
+                    onChange={(value) => handleVariableSelect(assignment.id, value)}
+                    placeholder='Select a variable...'
+                    disabled={isReadOnly}
+                    overlayContent={
+                      variableLabelHighlight ? (
+                        <span className='truncate text-[var(--text-primary)]'>
+                          {formatDisplayText(variableLabel, {
+                            workflowSearchHighlight: variableLabelHighlight,
+                          })}
+                        </span>
+                      ) : undefined
+                    }
+                  />
                 </div>
 
-                {!collapsed && (
-                  <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                    <div className='flex flex-col gap-1.5'>
-                      <Label className='text-small'>Variable</Label>
-                      <Combobox
-                        options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
-                        value={assignment.variableId || ''}
-                        onChange={(value) => handleVariableSelect(assignment.id, value)}
-                        placeholder='Select a variable...'
-                        disabled={isReadOnly}
+                <div className='flex flex-col gap-1.5'>
+                  <div className='flex items-center justify-between'>
+                    <Label className='text-small'>Value</Label>
+                    {assignment.type === 'boolean' && (
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <Button
+                            type='button'
+                            variant='quiet'
+                            size='icon'
+                            onClick={() =>
+                              setManualBooleanModes((prev) => ({
+                                ...prev,
+                                [assignment.id]: !isManualBoolean,
+                              }))
+                            }
+                            disabled={isReadOnly}
+                            aria-label={
+                              isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
+                            }
+                          >
+                            <ArrowLeftRight
+                              className={cn(
+                                'size-[14px]',
+                                isManualBoolean
+                                  ? 'text-[var(--text-primary)]'
+                                  : 'text-[var(--text-secondary)]'
+                              )}
+                            />
+                          </Button>
+                        </Tooltip.Trigger>
+                        <Tooltip.Content side='top'>
+                          <p>{isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}</p>
+                        </Tooltip.Content>
+                      </Tooltip.Root>
+                    )}
+                  </div>
+                  {assignment.type === 'boolean' && !isManualBoolean ? (
+                    <ChipCombobox
+                      options={BOOLEAN_OPTIONS}
+                      value={assignment.value ?? ''}
+                      onChange={(v) => !isReadOnly && updateAssignment(assignment.id, { value: v })}
+                      placeholder='Select value'
+                      disabled={isReadOnly}
+                      overlayContent={
+                        booleanLabelHighlight ? (
+                          <span className='truncate text-[var(--text-primary)]'>
+                            {formatDisplayText(assignment.value ?? '', {
+                              workflowSearchHighlight: booleanLabelHighlight,
+                            })}
+                          </span>
+                        ) : undefined
+                      }
+                    />
+                  ) : assignment.type === 'object' || assignment.type === 'array' ? (
+                    <div className='relative'>
+                      <ReferenceTextarea
+                        ref={(el) => {
+                          if (el) valueInputRefs.current[assignment.id] = el
+                        }}
+                        overlayRef={(el) => {
+                          if (el) overlayRefs.current[assignment.id] = el
+                        }}
                         overlayContent={
-                          variableLabelHighlight ? (
-                            <span className='truncate text-[var(--text-primary)]'>
-                              {formatDisplayText(variableLabel, {
-                                workflowSearchHighlight: variableLabelHighlight,
-                              })}
-                            </span>
-                          ) : undefined
+                          <div className='w-full whitespace-pre-wrap break-words'>
+                            {formatDisplayText(assignment.value || '', {
+                              accessiblePrefixes,
+                              highlightAll: !accessiblePrefixes,
+                              workflowSearchHighlight: valueSearchHighlight,
+                            })}
+                          </div>
                         }
-                      />
-                    </div>
-
-                    <div className='flex flex-col gap-1.5'>
-                      <div className='flex items-center justify-between'>
-                        <Label className='text-small'>Value</Label>
-                        {assignment.type === 'boolean' && (
-                          <Tooltip.Root>
-                            <Tooltip.Trigger asChild>
-                              <button
-                                type='button'
-                                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                                onClick={() =>
-                                  setManualBooleanModes((prev) => ({
-                                    ...prev,
-                                    [assignment.id]: !isManualBoolean,
-                                  }))
-                                }
-                                disabled={isReadOnly}
-                                aria-label={
-                                  isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
-                                }
-                              >
-                                <ArrowLeftRight
-                                  className={cn(
-                                    '!h-[12px] !w-[12px]',
-                                    isManualBoolean
-                                      ? 'text-[var(--text-primary)]'
-                                      : 'text-[var(--text-secondary)]'
-                                  )}
-                                />
-                              </button>
-                            </Tooltip.Trigger>
-                            <Tooltip.Content side='top'>
-                              <p>
-                                {isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}
-                              </p>
-                            </Tooltip.Content>
-                          </Tooltip.Root>
-                        )}
-                      </div>
-                      {assignment.type === 'boolean' && !isManualBoolean ? (
-                        <Combobox
-                          options={BOOLEAN_OPTIONS}
-                          value={assignment.value ?? ''}
-                          onChange={(v) =>
-                            !isReadOnly && updateAssignment(assignment.id, { value: v })
+                        overlayClassName='font-mono'
+                        interactiveOverlay={isReadOnly}
+                        value={assignment.value || ''}
+                        onChange={(e) =>
+                          handleValueInputChange(
+                            assignment.id,
+                            e.target.value,
+                            e.target.selectionStart ?? undefined
+                          )
+                        }
+                        onKeyDown={handleKeyDown}
+                        onFocus={() => {
+                          if (!isReadOnly && !assignment.value?.trim()) {
+                            setActiveFieldId(assignment.id)
+                            setCursorPosition(0)
+                            setShowTags(true)
                           }
-                          placeholder='Select value'
-                          disabled={isReadOnly}
-                          overlayContent={
-                            booleanLabelHighlight ? (
-                              <span className='truncate text-[var(--text-primary)]'>
-                                {formatDisplayText(assignment.value ?? '', {
-                                  workflowSearchHighlight: booleanLabelHighlight,
-                                })}
-                              </span>
-                            ) : undefined
+                        }}
+                        onScroll={(e) => {
+                          const overlay = overlayRefs.current[assignment.id]
+                          if (overlay) {
+                            overlay.scrollTop = e.currentTarget.scrollTop
+                            overlay.scrollLeft = e.currentTarget.scrollLeft
                           }
-                        />
-                      ) : assignment.type === 'object' || assignment.type === 'array' ? (
-                        <div className='relative'>
-                          <Textarea
-                            ref={(el) => {
-                              if (el) valueInputRefs.current[assignment.id] = el
-                            }}
-                            value={assignment.value || ''}
-                            onChange={(e) =>
-                              handleValueInputChange(
-                                assignment.id,
-                                e.target.value,
-                                e.target.selectionStart ?? undefined
-                              )
-                            }
-                            onKeyDown={handleKeyDown}
-                            onFocus={() => {
-                              if (!isReadOnly && !assignment.value?.trim()) {
-                                setActiveFieldId(assignment.id)
-                                setCursorPosition(0)
-                                setShowTags(true)
-                              }
-                            }}
-                            onScroll={(e) => {
-                              const overlay = overlayRefs.current[assignment.id]
-                              if (overlay) {
-                                overlay.scrollTop = e.currentTarget.scrollTop
-                                overlay.scrollLeft = e.currentTarget.scrollLeft
-                              }
-                            }}
-                            placeholder={
-                              assignment.type === 'object'
-                                ? '{\n  "key": "value"\n}'
-                                : '[\n  1, 2, 3\n]'
-                            }
-                            disabled={isReadOnly}
-                            className={cn(
-                              'min-h-[120px] font-mono text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
-                              dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
-                            )}
-                            style={{
-                              wordBreak: 'break-word',
-                              whiteSpace: 'pre-wrap',
-                            }}
-                            onDrop={(e) => handleDrop(e, assignment.id)}
-                            onDragOver={(e) => handleDragOver(e, assignment.id)}
-                            onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                          />
-                          <div
-                            ref={(el) => {
-                              if (el) overlayRefs.current[assignment.id] = el
-                            }}
-                            className={cn(
-                              'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
-                              !isReadOnly && 'pointer-events-none'
+                        }}
+                        placeholder={
+                          assignment.type === 'object'
+                            ? '{\n  "key": "value"\n}'
+                            : '[\n  1, 2, 3\n]'
+                        }
+                        disabled={isReadOnly}
+                        className={cn(
+                          'min-h-[120px] font-mono text-sm text-transparent caret-foreground placeholder:text-muted-foreground/50',
+                          dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
+                        )}
+                        style={{
+                          wordBreak: 'break-word',
+                          whiteSpace: 'pre-wrap',
+                        }}
+                        onDrop={(e) => handleDrop(e, assignment.id)}
+                        onDragOver={(e) => handleDragOver(e, assignment.id)}
+                        onDragLeave={(e) => handleDragLeave(e, assignment.id)}
+                      />
+                    </div>
+                  ) : (
+                    <div className='relative'>
+                      <ReferenceTextInput
+                        ref={(el) => {
+                          if (el) valueInputRefs.current[assignment.id] = el
+                        }}
+                        overlayRef={(el) => {
+                          if (el) overlayRefs.current[assignment.id] = el
+                        }}
+                        overlayContent={
+                          <div className='min-w-fit whitespace-pre'>
+                            {formatDisplayText(
+                              assignment.value || '',
+                              accessiblePrefixes
+                                ? {
+                                    accessiblePrefixes,
+                                    workflowSearchHighlight: valueSearchHighlight,
+                                  }
+                                : {
+                                    highlightAll: true,
+                                    workflowSearchHighlight: valueSearchHighlight,
+                                  }
                             )}
-                            style={{ scrollbarWidth: 'none' }}
-                          >
-                            <div className='w-full whitespace-pre-wrap break-words'>
-                              {formatDisplayText(assignment.value || '', {
-                                accessiblePrefixes,
-                                highlightAll: !accessiblePrefixes,
-                                workflowSearchHighlight: valueSearchHighlight,
-                              })}
-                            </div>
                           </div>
-                        </div>
-                      ) : (
-                        <div className='relative'>
-                          <Input
-                            ref={(el) => {
-                              if (el) valueInputRefs.current[assignment.id] = el
-                            }}
-                            name='value'
-                            value={assignment.value || ''}
-                            onChange={(e) =>
-                              handleValueInputChange(
+                        }
+                        interactiveOverlay={isReadOnly}
+                        inputClassName='allow-scroll overflow-x-auto overflow-y-hidden'
+                        name='value'
+                        value={assignment.value || ''}
+                        onChange={(e) =>
+                          handleValueInputChange(
+                            assignment.id,
+                            e.target.value,
+                            e.target.selectionStart ?? undefined
+                          )
+                        }
+                        onKeyDown={handleKeyDown}
+                        onFocus={() => {
+                          if (!isReadOnly && !assignment.value?.trim()) {
+                            setActiveFieldId(assignment.id)
+                            setCursorPosition(0)
+                            setShowTags(true)
+                          }
+                        }}
+                        onScroll={(e) =>
+                          syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
+                        }
+                        onPaste={() =>
+                          setTimeout(() => {
+                            const input = valueInputRefs.current[assignment.id]
+                            if (input)
+                              syncOverlayScroll(
                                 assignment.id,
-                                e.target.value,
-                                e.target.selectionStart ?? undefined
+                                (input as HTMLInputElement).scrollLeft
                               )
-                            }
-                            onKeyDown={handleKeyDown}
-                            onFocus={() => {
-                              if (!isReadOnly && !assignment.value?.trim()) {
-                                setActiveFieldId(assignment.id)
-                                setCursorPosition(0)
-                                setShowTags(true)
-                              }
-                            }}
-                            onScroll={(e) =>
-                              syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
-                            }
-                            onPaste={() =>
-                              setTimeout(() => {
-                                const input = valueInputRefs.current[assignment.id]
-                                if (input)
-                                  syncOverlayScroll(
-                                    assignment.id,
-                                    (input as HTMLInputElement).scrollLeft
-                                  )
-                              }, 0)
-                            }
-                            placeholder={`${assignment.type} value`}
-                            disabled={isReadOnly}
-                            autoComplete='off'
-                            className={cn(
-                              'allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit]',
-                              dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
-                            )}
-                            onDrop={(e) => handleDrop(e, assignment.id)}
-                            onDragOver={(e) => handleDragOver(e, assignment.id)}
-                            onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                          />
-                          <div
-                            ref={(el) => {
-                              if (el) overlayRefs.current[assignment.id] = el
-                            }}
-                            className={cn(
-                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-                              !isReadOnly && 'pointer-events-none'
-                            )}
-                            style={{ scrollbarWidth: 'none' }}
-                          >
-                            <div
-                              className='w-full whitespace-pre'
-                              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-                            >
-                              {formatDisplayText(
-                                assignment.value || '',
-                                accessiblePrefixes
-                                  ? {
-                                      accessiblePrefixes,
-                                      workflowSearchHighlight: valueSearchHighlight,
-                                    }
-                                  : {
-                                      highlightAll: true,
-                                      workflowSearchHighlight: valueSearchHighlight,
-                                    }
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-
-                      {showTags && activeFieldId === assignment.id && (
-                        <TagDropdown
-                          visible={showTags}
-                          onSelect={handleTagSelect}
-                          blockId={blockId}
-                          activeSourceBlockId={activeSourceBlockId}
-                          inputValue={assignment.value || ''}
-                          cursorPosition={cursorPosition}
-                          onClose={() => setShowTags(false)}
-                          inputRef={
-                            {
-                              current: valueInputRefs.current[assignment.id] || null,
-                            } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
-                          }
-                        />
-                      )}
+                          }, 0)
+                        }
+                        placeholder={`${assignment.type} value`}
+                        disabled={isReadOnly}
+                        autoComplete='off'
+                        className={cn(
+                          'w-full',
+                          dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
+                        )}
+                        onDrop={(e) => handleDrop(e, assignment.id)}
+                        onDragOver={(e) => handleDragOver(e, assignment.id)}
+                        onDragLeave={(e) => handleDragLeave(e, assignment.id)}
+                      />
                     </div>
-                  </div>
-                )}
-              </div>
+                  )}
+
+                  {showTags && activeFieldId === assignment.id && (
+                    <TagDropdown
+                      visible={showTags}
+                      onSelect={handleTagSelect}
+                      blockId={blockId}
+                      activeSourceBlockId={activeSourceBlockId}
+                      inputValue={assignment.value || ''}
+                      cursorPosition={cursorPosition}
+                      onClose={() => setShowTags(false)}
+                      inputRef={
+                        {
+                          current: valueInputRefs.current[assignment.id] || null,
+                        } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
+                      }
+                    />
+                  )}
+                </div>
+              </CollapsibleCard>
             )
           })}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index d9fd577e04f..9b0786af671 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -1,13 +1,4 @@
 import { type JSX, type MouseEvent, memo, useCallback, useMemo, useRef, useState } from 'react'
-import { Button, cn, Input, Label, Tooltip } from '@sim/emcn'
-import {
-  ArrowLeftRight,
-  ArrowUp,
-  Check,
-  Clipboard,
-  SquareArrowUpRight,
-  TriangleAlert,
-} from '@sim/emcn/icons'
 import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
 import type { FilterRule, SortRule } from '@/lib/table/query-builder/constants'
@@ -40,6 +31,7 @@ import {
   SkillInput,
   SliderInput,
   SortBuilder,
+  SubBlockFieldHeader,
   Switch,
   Table,
   TableSelector,
@@ -244,169 +236,50 @@ const renderLabel = (
   if (!config.title) return null
 
   const required = isFieldRequired(config, subBlockValues)
-  const showWand = wandState?.isWandEnabled && !wandState.isPreview && !wandState.disabled
-  const showCanonicalToggle = !!canonicalToggle && !wandState?.isPreview
-  const showCopy = copyState?.showCopyButton && !wandState?.isPreview
-  const showExternalLink = externalLink?.show && !wandState?.isPreview
   const canonicalToggleDisabledResolved = canonicalToggleIsDisabled ?? canonicalToggle?.disabled
 
   return (
-    <div className='flex items-center justify-between gap-1.5 pl-0.5'>
-      <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
-        {config.title}
-        {required && <span className='ml-0.5'>*</span>}
-        {labelSuffix}
-        {config.type === 'code' &&
-          config.language === 'json' &&
-          !isValidJson &&
-          !wandState?.isStreaming && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <span className='inline-flex'>
-                  <TriangleAlert className='size-3 flex-shrink-0 cursor-pointer text-destructive' />
-                </span>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                <p>Invalid JSON</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          )}
-      </Label>
-      <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
-        {showCopy && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                onClick={copyState.onCopy}
-                className='-my-1 flex size-5 items-center justify-center'
-                aria-label='Copy value'
-              >
-                {copyState.copied ? (
-                  <Check className='size-3 text-green-500' />
-                ) : (
-                  <Clipboard className='size-3 text-muted-foreground' />
-                )}
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              <p>{copyState.copied ? 'Copied!' : 'Copy'}</p>
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-        {showWand && (
-          <>
-            {!wandState.isSearchActive ? (
-              <Button
-                variant='active'
-                className='-my-1 h-5 px-2 py-0 text-xs'
-                onClick={wandState.onSearchClick}
-              >
-                Generate
-              </Button>
-            ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
-                <Input
-                  ref={wandState.searchInputRef}
-                  value={wandState.isStreaming ? 'Generating...' : wandState.searchQuery}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    wandState.onSearchChange(e.target.value)
-                  }
-                  onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
-                    // Only close if clicking outside the input container (not on the submit button)
-                    const relatedTarget = e.relatedTarget as HTMLElement | null
-                    if (relatedTarget?.closest('button')) return
-                    wandState.onSearchBlur()
-                  }}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                    if (
-                      e.key === 'Enter' &&
-                      wandState.searchQuery.trim() &&
-                      !wandState.isStreaming
-                    ) {
-                      wandState.onSearchSubmit()
-                    } else if (e.key === 'Escape') {
-                      wandState.onSearchCancel()
-                    }
-                  }}
-                  disabled={wandState.isStreaming}
-                  className={cn(
-                    'h-5 min-w-[80px] flex-1 text-xs',
-                    wandState.isStreaming && 'text-muted-foreground'
-                  )}
-                  placeholder='Generate with AI...'
-                />
-                <Button
-                  variant='primary'
-                  disabled={!wandState.searchQuery.trim() || wandState.isStreaming}
-                  onMouseDown={(e: React.MouseEvent) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                  }}
-                  onClick={(e: React.MouseEvent) => {
-                    e.stopPropagation()
-                    wandState.onSearchSubmit()
-                  }}
-                  className='size-[20px] flex-shrink-0 p-0'
-                >
-                  <ArrowUp className='size-[12px]' />
-                </Button>
-              </div>
-            )}
-          </>
-        )}
-        {showExternalLink && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0'
-                onClick={externalLink?.onClick}
-                aria-label={externalLink?.tooltip}
-              >
-                <SquareArrowUpRight className='!h-[12px] !w-[12px] text-[var(--text-secondary)]' />
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              <p>{externalLink?.tooltip}</p>
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-        {showCanonicalToggle && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button
-                type='button'
-                className='flex size-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                onClick={canonicalToggle?.onToggle}
-                disabled={canonicalToggleDisabledResolved}
-                aria-label={
-                  canonicalToggle?.mode === 'advanced'
-                    ? 'Switch to selector'
-                    : 'Switch to manual ID'
-                }
-              >
-                <ArrowLeftRight
-                  className={cn(
-                    '!h-[12px] !w-[12px]',
-                    canonicalToggle?.mode === 'advanced'
-                      ? 'text-[var(--text-primary)]'
-                      : 'text-[var(--text-secondary)]'
-                  )}
-                />
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              <p>
-                {canonicalToggle?.mode === 'advanced'
-                  ? 'Switch to selector'
-                  : 'Switch to manual ID'}
-              </p>
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-      </div>
-    </div>
+    <SubBlockFieldHeader
+      title={config.title}
+      required={required}
+      invalidJson={
+        config.type === 'code' &&
+        config.language === 'json' &&
+        !isValidJson &&
+        !wandState?.isStreaming
+      }
+      labelSuffix={labelSuffix}
+      wandAction={
+        wandState?.isWandEnabled && !wandState.isPreview && !wandState.disabled
+          ? {
+              isSearchActive: wandState.isSearchActive,
+              searchQuery: wandState.searchQuery,
+              isStreaming: wandState.isStreaming,
+              onSearchClick: wandState.onSearchClick,
+              onSearchBlur: wandState.onSearchBlur,
+              onSearchChange: wandState.onSearchChange,
+              onSearchSubmit: wandState.onSearchSubmit,
+              onSearchCancel: wandState.onSearchCancel,
+              searchInputRef: wandState.searchInputRef,
+            }
+          : undefined
+      }
+      canonicalAction={
+        canonicalToggle && !wandState?.isPreview
+          ? { ...canonicalToggle, disabled: canonicalToggleDisabledResolved }
+          : undefined
+      }
+      copyAction={
+        copyState?.showCopyButton && !wandState?.isPreview
+          ? { copied: copyState.copied, onCopy: copyState.onCopy }
+          : undefined
+      }
+      externalLinkAction={
+        externalLink?.show && !wandState?.isPreview
+          ? { onClick: externalLink.onClick, tooltip: externalLink.tooltip }
+          : undefined
+      }
+    />
   )
 }
 
@@ -1183,7 +1056,7 @@ function SubBlockComponent({
       onMouseDown={handleMouseDown}
       data-workflow-search-subblock-id={config.id}
       data-workflow-search-canonical-id={config.canonicalParamId ?? config.id}
-      className='subblock-content flex flex-col gap-2.5'
+      className='subblock-content flex flex-col gap-1.5'
     >
       {renderLabel(
         config,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index f2327c80172..c8063313d45 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -1,28 +1,28 @@
 'use client'
 
 import {
+  ChipCombobox,
   Code as CodeEditor,
-  Combobox,
-  FieldDivider,
+  cn,
   getCodeEditorProps,
-  Input,
   Label,
+  thinScrollbarClass,
 } from '@sim/emcn'
-import { ChevronUp } from '@sim/emcn/icons'
 import SimpleCodeEditor from 'react-simple-code-editor'
 import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
+import { AvailableData } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/available-data'
+import { WORKFLOW_SEARCH_HIGHLIGHT_CLASS } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/constants'
 import {
   formatDisplayText,
   getValidWorkflowSearchRange,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import { ReferenceTextInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/reference-text-control'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { getActiveWorkflowSearchHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
+import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
+import { useSubflowEditor } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor'
 import { useActiveSearchTarget } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/providers/active-search-target-provider'
 import type { BlockState } from '@/stores/workflows/workflow/types'
-import type { ConnectedBlock } from '../../hooks/use-block-connections'
-import { useSubflowEditor } from '../../hooks/use-subflow-editor'
-import { ConnectionBlocks } from '../connection-blocks'
-import { WORKFLOW_SEARCH_HIGHLIGHT_CLASS } from '../constants'
 
 const WORKFLOW_SEARCH_MATCH_PLACEHOLDER = '__WORKFLOW_SEARCH_MATCH__'
 
@@ -38,14 +38,11 @@ interface SubflowEditorProps {
   currentBlock: BlockState
   currentBlockId: string
   subBlocksRef: React.RefObject<HTMLDivElement | null>
-  connectionsHeight: number
-  isResizing: boolean
   hasIncomingConnections: boolean
   incomingConnections: ConnectedBlock[]
-  handleConnectionsResizeMouseDown: (e: React.MouseEvent) => void
-  toggleConnectionsCollapsed: () => void
   userCanEdit: boolean
-  isConnectionsAtMinHeight: boolean
+  isAvailableDataOpen: boolean
+  onAvailableDataOpenChange: (open: boolean) => void
 }
 
 /**
@@ -58,14 +55,11 @@ export function SubflowEditor({
   currentBlock,
   currentBlockId,
   subBlocksRef,
-  connectionsHeight,
-  isResizing,
   hasIncomingConnections,
   incomingConnections,
-  handleConnectionsResizeMouseDown,
-  toggleConnectionsCollapsed,
   userCanEdit,
-  isConnectionsAtMinHeight,
+  isAvailableDataOpen,
+  onAvailableDataOpenChange,
 }: SubflowEditorProps) {
   const activeSearchTarget = useActiveSearchTarget()
   const {
@@ -125,16 +119,21 @@ export function SubflowEditor({
   return (
     <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
       <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
-        <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-[9px] pb-2'>
+        <div
+          className={cn(
+            'flex-1 overflow-y-auto overflow-x-hidden px-2 pt-[9px] pb-2',
+            thinScrollbarClass
+          )}
+        >
           <div
             data-workflow-search-subblock-id={WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS.type}
             data-workflow-search-canonical-id={WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS.type}
             className='rounded-md'
           >
-            <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
             </Label>
-            <Combobox
+            <ChipCombobox
               options={typeOptions}
               value={currentType || ''}
               onChange={handleSubflowTypeChange}
@@ -143,14 +142,12 @@ export function SubflowEditor({
             />
           </div>
 
-          <FieldDivider className='pb-2.5' />
-
           <div
             data-workflow-search-subblock-id={configSearchFieldId}
             data-workflow-search-canonical-id={configSearchFieldId}
             className='rounded-md'
           >
-            <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {isCountMode
                 ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                 : isConditionMode
@@ -160,19 +157,21 @@ export function SubflowEditor({
 
             {isCountMode ? (
               <div className='relative'>
-                <Input
+                <ReferenceTextInput
                   type='text'
                   value={inputValue}
                   onChange={handleSubflowIterationsChange}
                   onBlur={handleSubflowIterationsBlur}
                   disabled={!userCanEdit}
-                  className='mb-1 text-transparent caret-[var(--text-primary)] [letter-spacing:inherit]'
+                  className='mb-1'
+                  overlayContent={
+                    <div className='min-w-fit whitespace-pre'>
+                      {formatDisplayText(inputValue, {
+                        workflowSearchHighlight: configSearchHighlight,
+                      })}
+                    </div>
+                  }
                 />
-                <div className='pointer-events-none absolute inset-x-0 top-0 flex h-8 items-center overflow-hidden px-2 font-sans text-sm'>
-                  {formatDisplayText(inputValue, {
-                    workflowSearchHighlight: configSearchHighlight,
-                  })}
-                </div>
                 <div className='text-[var(--text-muted)] text-micro'>
                   Enter a whole number greater than 0.
                 </div>
@@ -223,22 +222,24 @@ export function SubflowEditor({
               data-workflow-search-canonical-id={WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS.batchSize}
               className='relative mt-4 rounded-md'
             >
-              <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
+              <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Parallel Batch Size
               </Label>
-              <Input
+              <ReferenceTextInput
                 type='text'
                 value={batchSizeValue}
                 onChange={handleParallelBatchSizeChange}
                 onBlur={handleParallelBatchSizeBlur}
                 disabled={!userCanEdit}
-                className='mb-1 text-transparent caret-[var(--text-primary)] [letter-spacing:inherit]'
+                className='mb-1'
+                overlayContent={
+                  <div className='min-w-fit whitespace-pre'>
+                    {formatDisplayText(batchSizeValue, {
+                      workflowSearchHighlight: batchSizeSearchHighlight,
+                    })}
+                  </div>
+                }
               />
-              <div className='pointer-events-none absolute inset-x-0 top-[26px] flex h-8 items-center overflow-hidden px-2 font-sans text-sm'>
-                {formatDisplayText(batchSizeValue, {
-                  workflowSearchHighlight: batchSizeSearchHighlight,
-                })}
-              </div>
               <div className='text-[var(--text-muted)] text-micro'>
                 Run 1 to 20 parallel branches at a time.
               </div>
@@ -248,48 +249,11 @@ export function SubflowEditor({
       </div>
 
       {hasIncomingConnections && (
-        <div
-          className={
-            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
-            (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
-          }
-          style={{ height: `${connectionsHeight}px` }}
-        >
-          <div className='relative'>
-            <div
-              role='separator'
-              aria-orientation='horizontal'
-              className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
-              onMouseDown={handleConnectionsResizeMouseDown}
-            />
-          </div>
-
-          <div
-            className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
-            onClick={toggleConnectionsCollapsed}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                toggleConnectionsCollapsed()
-              }
-            }}
-            role='button'
-            tabIndex={0}
-            aria-label={isConnectionsAtMinHeight ? 'Expand connections' : 'Collapse connections'}
-          >
-            <ChevronUp
-              className={
-                'size-[14px] transition-transform' +
-                (!isConnectionsAtMinHeight ? ' rotate-180' : '')
-              }
-            />
-            <div className='text-[var(--text-primary)] text-small'>Connections</div>
-          </div>
-
-          <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
-            <ConnectionBlocks connections={incomingConnections} currentBlockId={currentBlock.id} />
-          </div>
-        </div>
+        <AvailableData
+          connections={incomingConnections}
+          open={isAvailableDataOpen}
+          onOpenChange={onAvailableDataOpenChange}
+        />
       )}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor-panel-actions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor-panel-actions.tsx
new file mode 100644
index 00000000000..cc7c96129da
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor-panel-actions.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { useCallback } from 'react'
+import { Chip, Tooltip } from '@sim/emcn'
+import { X } from '@sim/emcn/icons'
+import { useParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { captureEvent } from '@/lib/posthog/client'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar'
+import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
+import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
+import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { getBlock } from '@/blocks/registry'
+import { useFolderMap } from '@/hooks/queries/folders'
+import { isWorkflowEffectivelyLocked } from '@/hooks/queries/utils/folder-tree'
+import { useWorkflowMap } from '@/hooks/queries/workflows'
+import { useIsBlockActive, useIsCurrentWorkflowExecuting } from '@/stores/execution'
+import { usePanelEditorStore } from '@/stores/panel'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+interface EditorPanelActionsProps {
+  onClose: () => void
+}
+
+/** Block overflow and close actions displayed in the panel's shared top control row. */
+export function EditorPanelActions({ onClose }: EditorPanelActionsProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+  const posthog = usePostHog()
+  const userPermissions = useUserPermissionsContext()
+  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const currentWorkflow = useCurrentWorkflow()
+  const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null
+  const blockConfig = currentBlock ? getBlock(currentBlock.type) : null
+  const isSubflow =
+    currentBlock && (currentBlock.type === 'loop' || currentBlock.type === 'parallel')
+  const subflowConfig = isSubflow ? (currentBlock.type === 'loop' ? LoopTool : ParallelTool) : null
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const workflowId = activeWorkflowId ?? (params.workflowId as string | undefined)
+  const { data: workflows = {} } = useWorkflowMap(workspaceId)
+  const { data: folders = {} } = useFolderMap(workspaceId)
+  const workflowMetadata = workflowId ? workflows[workflowId] : undefined
+  const workflowLocked = isWorkflowEffectivelyLocked(workflowMetadata, folders)
+  const isBlockRunning = useIsBlockActive(currentBlockId ?? '')
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+
+  const handleOpenDocs = useCallback(() => {
+    const docsLink = isSubflow ? subflowConfig?.docsLink : blockConfig?.docsLink
+    window.open(docsLink || 'https://docs.sim.ai/quick-reference', '_blank', 'noopener,noreferrer')
+    captureEvent(posthog, 'docs_opened', {
+      source: 'editor_button',
+      block_type: currentBlock?.type,
+    })
+  }, [isSubflow, subflowConfig?.docsLink, blockConfig?.docsLink, posthog, currentBlock?.type])
+
+  if (!currentBlock) return null
+
+  return (
+    <div className='flex items-center gap-1'>
+      <ActionBar
+        blockId={currentBlock.id}
+        blockType={currentBlock.type}
+        disabled={!userPermissions.canEdit || workflowLocked}
+        variant='inline'
+        inlineActions='menu'
+        isRunning={isBlockRunning}
+        isWorkflowRunning={isWorkflowRunning}
+        onOpenDocs={handleOpenDocs}
+      />
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Chip
+            leftIcon={X}
+            className='size-[30px] justify-center p-0'
+            onClick={onClose}
+            aria-label='Close editor and clear block selection'
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Content side='top'>
+          <p>Close editor</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 3beec443a18..ba3a2dadc33 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -1,45 +1,34 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
-import {
-  BookOpen,
-  Check,
-  ChevronDown,
-  ChevronUp,
-  Lock,
-  Pencil,
-  SquareArrowUpRight,
-  Unlock,
-} from '@sim/emcn/icons'
+import { Button, ChipTag, cn, Loader, Tooltip, thinScrollbarClass } from '@sim/emcn'
+import { SquareArrowUpRight } from '@sim/emcn/icons'
+import { getWorkflowTypeAccent } from '@sim/workflow-renderer'
 import type { BlockRetryConfig } from '@sim/workflow-types/workflow'
 import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
-import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
-import { captureEvent } from '@/lib/posthog/client'
 import { isRetryEligibleBlock } from '@/lib/workflows/blocks/retry-eligibility'
 import {
   buildCanonicalIndex,
-  evaluateSubBlockCondition,
-  hasAdvancedValues,
   isCanonicalPair,
-  isStandaloneAdvancedMode,
   resolveCanonicalMode,
   shouldUseSubBlockForTriggerModeCanonicalIndex,
 } from '@/lib/workflows/subblocks/visibility'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar'
 import {
-  ConnectionBlocks,
+  AvailableData,
   RetrySettings,
   SubBlock,
   SubflowEditor,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
+import { BlockEditorSections } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/block-editor-sections'
+import { EditorEmptyState } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/editor-empty-state/editor-empty-state'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import {
   useBlockConnections,
-  useConnectionsResize,
   useEditorBlockProperties,
   useEditorSubblockLayout,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks'
@@ -48,17 +37,15 @@ import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/component
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import {
-  isAncestorProtected,
-  isBlockProtected,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
+import { isBlockProtected } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
-import { BlockTile } from '@/blocks/block-tile'
+import { isLightTileColor } from '@/blocks/icon-color'
 import { getBlock } from '@/blocks/registry'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { isWorkflowEffectivelyLocked } from '@/hooks/queries/utils/folder-tree'
 import { useWorkflowMap, useWorkflowState } from '@/hooks/queries/workflows'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useIsBlockActive, useIsCurrentWorkflowExecuting } from '@/stores/execution'
 import { usePanelEditorSearchStore, usePanelEditorStore } from '@/stores/panel'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
@@ -67,6 +54,18 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 /** Stable empty object to avoid creating new references */
 const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 
+/**
+ * Icon component for rendering block icons.
+ *
+ * @param icon - The icon component to render
+ * @param className - Optional CSS classes
+ * @returns Rendered icon or null if no icon provided
+ */
+const IconComponent = ({ icon: Icon, className }: { icon: any; className?: string }) => {
+  if (!Icon) return null
+  return <Icon className={className} />
+}
+
 /**
  * Editor panel component.
  * Provides editor configuration and customization options for the workflow.
@@ -74,17 +73,9 @@ const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
  * @returns Editor panel content
  */
 export function Editor() {
-  const {
-    currentBlockId,
-    connectionsHeight,
-    toggleConnectionsCollapsed,
-    registerRenameCallback,
-    clearCurrentBlock,
-  } = usePanelEditorStore(
+  const { currentBlockId, registerRenameCallback, clearCurrentBlock } = usePanelEditorStore(
     useShallow((state) => ({
       currentBlockId: state.currentBlockId,
-      connectionsHeight: state.connectionsHeight,
-      toggleConnectionsCollapsed: state.toggleConnectionsCollapsed,
       registerRenameCallback: state.registerRenameCallback,
       clearCurrentBlock: state.clearCurrentBlock,
     }))
@@ -92,8 +83,13 @@ export function Editor() {
   const activeSearchTarget = usePanelEditorSearchStore((state) => state.activeSearchTarget)
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null
+  const isBlockRunning = useIsBlockActive(currentBlockId ?? '')
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
   const blockConfig = currentBlock ? getBlock(currentBlock.type) : null
+  const typeAccent = getWorkflowTypeAccent(currentBlock?.type ?? '')
+  const isIntegration = blockConfig?.category === 'tools'
   const title = currentBlock?.name || 'Editor'
+  const blockDescription = currentBlock?.data?.description ?? ''
   const isBlockNameSearchHighlighted =
     activeSearchTarget?.targetKind === 'block-name' && activeSearchTarget.blockId === currentBlockId
   const blockNameSearchHighlight =
@@ -121,7 +117,6 @@ export function Editor() {
 
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const posthog = usePostHog()
 
   const subBlocksRef = useRef<HTMLDivElement>(null)
 
@@ -137,13 +132,9 @@ export function Editor() {
   // Locked blocks cannot be edited by anyone (admins can only lock/unlock)
   const blocks = useWorkflowStore((state) => state.blocks)
   const isLocked = currentBlockId ? isBlockProtected(currentBlockId, blocks) : false
-  const isAncestorLocked = currentBlockId ? isAncestorProtected(currentBlockId, blocks) : false
   const canEditBlock = userPermissions.canEdit && !workflowLocked && !isLocked
 
-  const { advancedMode, triggerMode } = useEditorBlockProperties(
-    currentBlockId,
-    currentWorkflow.isSnapshotView
-  )
+  const { triggerMode } = useEditorBlockProperties(currentBlockId, currentWorkflow.isSnapshotView)
 
   const blockSubBlockValues = useStoreWithEqualityFn(
     useSubBlockStore,
@@ -168,117 +159,30 @@ export function Editor() {
     [subBlocksForCanonical]
   )
   const canonicalModeOverrides = currentBlock?.data?.canonicalModes
-  const activeSearchTargetNeedsAdvanced = useMemo(() => {
-    if (!activeSearchTarget || activeSearchTarget.blockId !== currentBlockId) return false
-
-    return subBlocksForCanonical.some(
-      (subBlock) =>
-        subBlock.mode === 'advanced' &&
-        (activeSearchTarget.subBlockId === subBlock.id ||
-          activeSearchTarget.canonicalSubBlockId === (subBlock.canonicalParamId ?? subBlock.id))
-    )
-  }, [activeSearchTarget, currentBlockId, subBlocksForCanonical])
-  const advancedValuesPresent = useMemo(
-    () => hasAdvancedValues(subBlocksForCanonical, blockSubBlockValues, canonicalIndex),
-    [subBlocksForCanonical, blockSubBlockValues, canonicalIndex]
-  )
-  /**
-   * Whether the additional-fields disclosure is open, held as view state only.
-   *
-   * Deliberately not written back to `block.advancedMode`: that flag also decides
-   * which member of a canonical pair serializes, so driving it from this control
-   * would change the credential a block sends just because someone opened a
-   * disclosure. Seeded from the stored flag so a block saved while it was on
-   * still opens expanded.
-   */
-  const [additionalFieldsExpanded, setAdditionalFieldsExpanded] = useState(advancedMode)
-
-  useEffect(() => {
-    setAdditionalFieldsExpanded(advancedMode)
-  }, [advancedMode, currentBlockId])
-
-  const displayAdvancedOptions = canEditBlock
-    ? additionalFieldsExpanded || activeSearchTargetNeedsAdvanced
-    : additionalFieldsExpanded || advancedValuesPresent || activeSearchTargetNeedsAdvanced
-
-  const hasAdvancedOnlyFields = useMemo(() => {
-    for (const subBlock of subBlocksForCanonical) {
-      if (!isStandaloneAdvancedMode(subBlock.mode)) continue
-      if (canonicalIndex.canonicalIdBySubBlockId[subBlock.id]) continue
-
-      if (
-        subBlock.condition &&
-        !evaluateSubBlockCondition(subBlock.condition, blockSubBlockValues)
-      ) {
-        continue
-      }
-
-      return true
-    }
-    return false
-  }, [subBlocksForCanonical, canonicalIndex.canonicalIdBySubBlockId, blockSubBlockValues])
 
   const { subBlocks, stateToUse: subBlockState } = useEditorSubblockLayout(
     blockConfig || ({} as any),
     currentBlockId || '',
-    displayAdvancedOptions,
     triggerMode,
     activeWorkflowId,
     blockSubBlockValues,
     currentWorkflow.isSnapshotView
   )
 
-  /**
-   * Partitions subBlocks into regular fields and standalone advanced-only fields.
-   * Standalone advanced fields have mode 'advanced' and are not part of a canonical swap pair.
-   */
-  const { regularSubBlocks, advancedOnlySubBlocks } = useMemo(() => {
-    const regular: typeof subBlocks = []
-    const advancedOnly: typeof subBlocks = []
-
-    for (const subBlock of subBlocks) {
-      const isStandaloneAdvanced =
-        isStandaloneAdvancedMode(subBlock.mode) &&
-        !canonicalIndex.canonicalIdBySubBlockId[subBlock.id]
-
-      if (isStandaloneAdvanced) {
-        advancedOnly.push(subBlock)
-      } else {
-        regular.push(subBlock)
-      }
-    }
-
-    return { regularSubBlocks: regular, advancedOnlySubBlocks: advancedOnly }
-  }, [subBlocks, canonicalIndex.canonicalIdBySubBlockId])
-
   const { incomingConnections, hasIncomingConnections } = useBlockConnections(currentBlockId || '')
 
-  const { handleMouseDown: handleConnectionsResizeMouseDown, isResizing } = useConnectionsResize({
-    subBlocksRef,
-  })
-
   const {
     collaborativeSetBlockCanonicalMode,
-    collaborativeUpdateBlockName,
     collaborativeSetBlockRetry,
-    collaborativeBatchToggleLocked,
+    collaborativeUpdateBlockDescription,
+    collaborativeUpdateBlockName,
   } = useCollaborativeWorkflow()
 
-  const handleToggleAdditionalFields = useCallback(() => {
-    if (!canEditBlock) return
-    setAdditionalFieldsExpanded((expanded) => !expanded)
-  }, [canEditBlock])
-
   const supportsRetry = isRetryEligibleBlock({
     blockType: currentBlock?.type,
     category: blockConfig?.category,
     triggerMode,
   })
-  const showRetrySettings = supportsRetry && displayAdvancedOptions
-
-  /** Retry lives in the additional-fields disclosure, which a block may otherwise have no reason to show. */
-  const hasAdditionalFields = hasAdvancedOnlyFields || supportsRetry
-
   const handleChangeRetry = useCallback(
     (retry: BlockRetryConfig) => {
       if (!currentBlockId) return
@@ -288,8 +192,13 @@ export function Editor() {
   )
 
   const [isRenaming, setIsRenaming] = useState(false)
-  const [editedName, setEditedName] = useState('')
+  const [isEditingDescription, setIsEditingDescription] = useState(false)
+  const [availableDataBlockId, setAvailableDataBlockId] = useState<string | null>(null)
+  const isAvailableDataOpen = availableDataBlockId === currentBlockId
   const renamingBlockIdRef = useRef<string | null>(null)
+  const descriptionBlockIdRef = useRef<string | null>(null)
+  const initialEditedNameRef = useRef('')
+  const initialEditedDescriptionRef = useRef('')
 
   useEffect(() => {
     if (!activeSearchTarget || activeSearchTarget.blockId !== currentBlockId) return
@@ -311,10 +220,33 @@ export function Editor() {
   /**
    * Ref callback that auto-selects the input text when mounted.
    */
-  const nameInputRefCallback = useCallback((element: HTMLInputElement | null) => {
+  const nameEditorRefCallback = useCallback((element: HTMLSpanElement | null) => {
     if (element) {
-      element.select()
+      element.textContent = initialEditedNameRef.current
+      element.focus()
+      const range = document.createRange()
+      range.selectNodeContents(element)
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+    }
+  }, [])
+
+  const descriptionEditorRefCallback = useCallback((element: HTMLDivElement | null) => {
+    if (!element) return
+
+    element.textContent = initialEditedDescriptionRef.current
+    element.focus()
+    const range = document.createRange()
+    if (initialEditedDescriptionRef.current) {
+      range.selectNodeContents(element)
+    } else {
+      range.setStart(element, 0)
+      range.collapse(true)
     }
+    const selection = window.getSelection()
+    selection?.removeAllRanges()
+    selection?.addRange(range)
   }, [])
 
   /**
@@ -333,30 +265,33 @@ export function Editor() {
     if (!userPermissions.canEdit || workflowLocked || isBlockProtected(blockId, blocks)) return
 
     renamingBlockIdRef.current = blockId
-    setEditedName(block.name || '')
+    initialEditedNameRef.current = block.name || ''
     setIsRenaming(true)
   }, [userPermissions.canEdit, workflowLocked])
 
   /**
    * Saves the renamed block using the captured block ID from when rename started.
    */
-  const handleSaveRename = useCallback(() => {
-    const blockIdToRename = renamingBlockIdRef.current
-    if (!blockIdToRename || !isRenaming || workflowLocked) return
-
-    const blocks = useWorkflowStore.getState().blocks
-    const blockToRename = blocks[blockIdToRename]
-
-    const trimmedName = editedName.trim()
-    if (trimmedName && blockToRename && trimmedName !== blockToRename.name) {
-      const result = collaborativeUpdateBlockName(blockIdToRename, trimmedName)
-      if (!result.success) {
-        return
+  const handleSaveRename = useCallback(
+    (nextName: string) => {
+      const blockIdToRename = renamingBlockIdRef.current
+      if (!blockIdToRename || !isRenaming || workflowLocked) return
+
+      const blocks = useWorkflowStore.getState().blocks
+      const blockToRename = blocks[blockIdToRename]
+
+      const trimmedName = nextName.trim()
+      if (trimmedName && blockToRename && trimmedName !== blockToRename.name) {
+        const result = collaborativeUpdateBlockName(blockIdToRename, trimmedName)
+        if (!result.success) {
+          return
+        }
       }
-    }
-    renamingBlockIdRef.current = null
-    setIsRenaming(false)
-  }, [isRenaming, editedName, collaborativeUpdateBlockName, workflowLocked])
+      renamingBlockIdRef.current = null
+      setIsRenaming(false)
+    },
+    [isRenaming, collaborativeUpdateBlockName, workflowLocked]
+  )
 
   /**
    * Handles canceling the rename process.
@@ -364,42 +299,50 @@ export function Editor() {
   const handleCancelRename = useCallback(() => {
     renamingBlockIdRef.current = null
     setIsRenaming(false)
-    setEditedName('')
   }, [])
 
+  const handleStartDescriptionEdit = () => {
+    const blockId = usePanelEditorStore.getState().currentBlockId
+    if (!blockId) return
+
+    const blocks = useWorkflowStore.getState().blocks
+    const block = blocks[blockId]
+    if (!block) return
+    if (!userPermissions.canEdit || workflowLocked || isBlockProtected(blockId, blocks)) return
+
+    descriptionBlockIdRef.current = blockId
+    initialEditedDescriptionRef.current = block.data?.description ?? ''
+    setIsEditingDescription(true)
+  }
+
+  const handleSaveDescription = (nextDescription: string) => {
+    const blockId = descriptionBlockIdRef.current
+    if (!blockId || !isEditingDescription || workflowLocked) return
+
+    const description = nextDescription.trim()
+    const block = useWorkflowStore.getState().blocks[blockId]
+    if (block && description !== (block.data?.description ?? '')) {
+      collaborativeUpdateBlockDescription(blockId, description)
+    }
+
+    descriptionBlockIdRef.current = null
+    setIsEditingDescription(false)
+  }
+
+  const handleCancelDescriptionEdit = () => {
+    descriptionBlockIdRef.current = null
+    setIsEditingDescription(false)
+  }
+
+  const handleAvailableDataOpenChange = (open: boolean) => {
+    setAvailableDataBlockId(open ? currentBlockId : null)
+  }
+
   useEffect(() => {
     registerRenameCallback(handleStartRename)
     return () => registerRenameCallback(null)
   }, [registerRenameCallback, handleStartRename])
 
-  /**
-   * Drops a rename whose block the panel is no longer showing.
-   *
-   * `renamingBlockIdRef` decides what {@link handleSaveRename} writes, and the
-   * header keeps rendering the input regardless of which block is selected — so
-   * a rename left running across a selection change puts one block's name in
-   * front of another and saves it to the first. Nothing else ends a rename on
-   * selection: the input's blur only fires if it held focus.
-   */
-  useEffect(() => {
-    if (!renamingBlockIdRef.current || renamingBlockIdRef.current === currentBlockId) return
-    renamingBlockIdRef.current = null
-    setIsRenaming(false)
-    setEditedName('')
-  }, [currentBlockId])
-
-  /**
-   * Handles opening documentation link in a new secure tab.
-   */
-  const handleOpenDocs = useCallback(() => {
-    const docsLink = isSubflow ? subflowConfig?.docsLink : blockConfig?.docsLink
-    window.open(docsLink || 'https://docs.sim.ai/quick-reference', '_blank', 'noopener,noreferrer')
-    captureEvent(posthog, 'docs_opened', {
-      source: 'editor_button',
-      block_type: currentBlock?.type,
-    })
-  }, [isSubflow, subflowConfig?.docsLink, blockConfig?.docsLink, posthog, currentBlock?.type])
-
   const childWorkflowId = isWorkflowBlock ? blockSubBlockValues?.workflowId : null
 
   const { data: childWorkflowState, isLoading: isLoadingChildWorkflow } =
@@ -414,173 +357,161 @@ export function Editor() {
     }
   }, [childWorkflowId, workspaceId])
 
-  const isConnectionsAtMinHeight = connectionsHeight <= 35
-
   if (isNoteBlock) return null
 
   return (
     <ActiveSearchTargetProvider value={activeSearchTargetForCurrentBlock}>
-      <div className='flex h-full flex-col'>
-        {/* Header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
-          <div className='flex min-w-0 flex-1 items-center gap-2'>
-            {currentBlock && (blockConfig || isSubflow) && (
-              <BlockTile blockType={currentBlock.type} size='lg' />
+      <div className='flex h-full max-h-full min-h-0 flex-col overflow-hidden'>
+        <div
+          className={cn(
+            'flex flex-shrink-0 flex-col border-[var(--border)] border-b bg-[var(--bg)] px-3.5 pt-0.5 pb-1.5',
+            !currentBlock && 'hidden'
+          )}
+        >
+          <div className='flex min-w-0 items-center gap-3'>
+            <div className='flex min-w-0 flex-1 items-center gap-2'>
+              {(blockConfig || isSubflow) && (
+                <ChipTag
+                  variant={isIntegration ? 'brand' : typeAccent.variant}
+                  tone={isIntegration ? undefined : typeAccent.tone}
+                  brandColor={isIntegration ? blockConfig.bgColor : undefined}
+                  brandForeground={
+                    isIntegration && isLightTileColor(blockConfig.bgColor) ? 'dark' : 'light'
+                  }
+                  className='size-5 shrink-0 justify-center p-0'
+                >
+                  <IconComponent
+                    icon={isSubflow ? subflowConfig?.icon : blockConfig?.icon}
+                    className='size-[14px]'
+                  />
+                </ChipTag>
+              )}
+              {isRenaming ? (
+                <span
+                  ref={nameEditorRefCallback}
+                  contentEditable
+                  suppressContentEditableWarning
+                  role='textbox'
+                  aria-label='Block name'
+                  aria-multiline='false'
+                  onBlur={(event) => handleSaveRename(event.currentTarget.textContent ?? '')}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault()
+                      event.currentTarget.blur()
+                    } else if (event.key === 'Escape') {
+                      event.preventDefault()
+                      handleCancelRename()
+                    }
+                  }}
+                  className='min-h-6 min-w-0 truncate font-medium text-[17px] text-[var(--text-primary)] leading-6 outline-none selection:bg-[var(--surface-active)]'
+                />
+              ) : (
+                <h2 className='min-w-0 flex-1'>
+                  <button
+                    type='button'
+                    className={cn(
+                      'flex min-h-6 w-full min-w-0 items-center p-0 text-start font-medium text-[17px] text-[var(--text-primary)] leading-6 outline-none focus-visible:underline',
+                      canEditBlock ? 'cursor-text' : 'cursor-default'
+                    )}
+                    title={canEditBlock ? 'Click to rename' : title}
+                    onClick={handleStartRename}
+                    disabled={!canEditBlock}
+                    aria-label={`Rename ${title}`}
+                  >
+                    <span className='min-w-0 flex-1 truncate'>
+                      {blockNameSearchHighlight
+                        ? formatDisplayText(title, {
+                            workflowSearchHighlight: blockNameSearchHighlight,
+                          })
+                        : title}
+                    </span>
+                  </button>
+                </h2>
+              )}
+            </div>
+            {currentBlock && (
+              <ActionBar
+                blockId={currentBlock.id}
+                blockType={currentBlock.type}
+                disabled={!userPermissions.canEdit || workflowLocked}
+                variant='inline'
+                inlineActions='run'
+                isRunning={isBlockRunning}
+                isWorkflowRunning={isWorkflowRunning}
+              />
             )}
-            {isRenaming ? (
-              <input
-                ref={nameInputRefCallback}
-                type='text'
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
-                onBlur={handleSaveRename}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    handleSaveRename()
-                  } else if (e.key === 'Escape') {
-                    handleCancelRename()
+          </div>
+
+          {currentBlock &&
+            (isEditingDescription ? (
+              <div
+                ref={descriptionEditorRefCallback}
+                contentEditable
+                suppressContentEditableWarning
+                role='textbox'
+                aria-label='Block description'
+                aria-multiline='true'
+                onBlur={(event) => handleSaveDescription(event.currentTarget.textContent ?? '')}
+                onKeyDown={(event) => {
+                  if (event.key === 'Escape') {
+                    event.preventDefault()
+                    handleCancelDescriptionEdit()
+                  } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault()
+                    event.currentTarget.blur()
                   }
                 }}
-                className='min-w-0 flex-1 truncate bg-transparent pr-2 text-[var(--text-primary)] text-sm outline-none'
+                className={cn(
+                  'mt-2 h-10 overflow-y-auto whitespace-pre-wrap break-words text-[var(--text-secondary)] text-small leading-5 outline-none selection:bg-[var(--surface-active)]',
+                  thinScrollbarClass
+                )}
               />
             ) : (
-              <h2
-                className='min-w-0 flex-1 cursor-pointer select-none text-ellipsis whitespace-nowrap pr-2 text-[var(--text-primary)] text-sm [overflow-clip-margin:3px] [overflow:clip]'
-                title={title}
-                onDoubleClick={handleStartRename}
-                onMouseDown={(e) => {
-                  if (e.detail === 2) {
-                    e.preventDefault()
-                  }
-                }}
+              <button
+                type='button'
+                className={cn(
+                  'mt-2 flex h-10 w-full items-start justify-start overflow-hidden p-0 text-start text-small leading-5 outline-none focus-visible:underline',
+                  blockDescription ? 'text-[var(--text-secondary)]' : 'text-[var(--text-muted)]',
+                  canEditBlock ? 'cursor-text' : 'cursor-default'
+                )}
+                title={canEditBlock ? 'Click to edit description' : undefined}
+                onClick={handleStartDescriptionEdit}
+                disabled={!canEditBlock}
+                aria-label={blockDescription ? 'Edit block description' : 'Add block description'}
               >
-                {blockNameSearchHighlight
-                  ? formatDisplayText(title, { workflowSearchHighlight: blockNameSearchHighlight })
-                  : title}
-              </h2>
-            )}
-          </div>
-          <div className='flex shrink-0 items-center gap-2'>
-            {/* Locked indicator - clickable to unlock if user has admin permissions, block is locked directly, and not locked by an ancestor */}
-            {isLocked && currentBlock && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
-                    <Button
-                      variant='ghost'
-                      className='p-0'
-                      onClick={() => collaborativeBatchToggleLocked([currentBlockId!])}
-                      aria-label='Unlock block'
-                    >
-                      <Unlock className='size-[14px] text-[var(--text-secondary)]' />
-                    </Button>
-                  ) : (
-                    <div className='flex items-center justify-center'>
-                      <Lock className='size-[14px] text-[var(--text-secondary)]' />
-                    </div>
-                  )}
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>
-                  <p>
-                    {isAncestorLocked
-                      ? 'Ancestor container is locked'
-                      : userPermissions.canAdmin && currentBlock.locked
-                        ? 'Unlock block'
-                        : 'Block is locked'}
-                  </p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-            {/* Rename button */}
-            {currentBlock && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    className='p-0'
-                    onClick={isRenaming ? handleSaveRename : handleStartRename}
-                    disabled={!canEditBlock}
-                    aria-label={isRenaming ? 'Save name' : 'Rename block'}
-                  >
-                    {isRenaming ? (
-                      <Check className='size-[14px]' />
-                    ) : (
-                      <Pencil className='size-[14px]' />
-                    )}
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top'>
-                  <p>{isRenaming ? 'Save name' : 'Rename block'}</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-            {/* Focus on block button */}
-            {/* {currentBlock && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  className='p-0'
-                  onClick={handleFocusOnBlock}
-                  aria-label='Focus on block'
-                >
-                  <Crosshair className='size-[14px]' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                <p>Focus on block</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          )} */}
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  className='p-0'
-                  onClick={handleOpenDocs}
-                  aria-label='Open documentation'
-                >
-                  <BookOpen className='size-[14px]' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                <p>Open docs</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
+                <span className='line-clamp-2 block w-full'>
+                  {blockDescription || 'Add description'}
+                </span>
+              </button>
+            ))}
         </div>
 
         {!currentBlockId || !currentBlock ? (
-          <div className='flex flex-1 items-center justify-center text-[var(--text-placeholder)] text-small'>
-            Select a block to edit
-          </div>
+          <EditorEmptyState />
         ) : isSubflow ? (
           <SubflowEditor
             currentBlock={currentBlock}
             currentBlockId={currentBlockId}
             subBlocksRef={subBlocksRef}
-            connectionsHeight={connectionsHeight}
-            isResizing={isResizing}
             hasIncomingConnections={hasIncomingConnections}
             incomingConnections={incomingConnections}
-            handleConnectionsResizeMouseDown={handleConnectionsResizeMouseDown}
-            toggleConnectionsCollapsed={toggleConnectionsCollapsed}
             userCanEdit={canEditBlock}
-            isConnectionsAtMinHeight={isConnectionsAtMinHeight}
+            isAvailableDataOpen={isAvailableDataOpen}
+            onAvailableDataOpenChange={handleAvailableDataOpenChange}
           />
         ) : (
-          <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
+          <div
+            className={cn('min-h-0 flex-1 overflow-y-auto overflow-x-hidden', thinScrollbarClass)}
+          >
             {/* Subblocks Section */}
-            <div
-              ref={subBlocksRef}
-              className='subblocks-section flex flex-1 flex-col overflow-hidden'
-            >
-              <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
+            <div ref={subBlocksRef} className='subblocks-section flex flex-col'>
+              <div className='px-4 pt-3 pb-2 [overflow-anchor:none]'>
                 {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
                 {isWorkflowBlock && childWorkflowId && (
                   <>
                     <div className='subblock-content flex flex-col gap-[9.5px]'>
-                      <div className='pl-0.5 text-[var(--text-primary)] text-small leading-none'>
+                      <div className='pl-0.5 font-medium text-[var(--text-primary)] text-small leading-none'>
                         Workflow Preview
                       </div>
                       <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
@@ -625,7 +556,6 @@ export function Editor() {
                         )}
                       </div>
                     </div>
-                    <FieldDivider subblockMarker />
                   </>
                 )}
                 {subBlocks.length === 0 && !isWorkflowBlock ? (
@@ -633,147 +563,69 @@ export function Editor() {
                     This block has no subblocks
                   </div>
                 ) : (
-                  <div className='flex flex-col'>
-                    {regularSubBlocks.map((subBlock, index) => {
-                      const stableKey = getSubBlockStableKey(
-                        currentBlockId || '',
-                        subBlock,
-                        subBlockState
-                      )
-                      const canonicalId = canonicalIndex.canonicalIdBySubBlockId[subBlock.id]
-                      const canonicalGroup = canonicalId
-                        ? canonicalIndex.groupsById[canonicalId]
-                        : undefined
-                      const isCanonicalSwap = isCanonicalPair(canonicalGroup)
-                      const canonicalMode =
-                        canonicalGroup && isCanonicalSwap
-                          ? resolveCanonicalMode(
-                              canonicalGroup,
-                              blockSubBlockValues,
-                              canonicalModeOverrides
-                            )
+                  <div className='flex flex-col gap-4'>
+                    <BlockEditorSections blockType={currentBlock.type} subBlocks={subBlocks}>
+                      {(subBlock) => {
+                        const stableKey = getSubBlockStableKey(
+                          currentBlockId || '',
+                          subBlock,
+                          subBlockState
+                        )
+                        const canonicalId = canonicalIndex.canonicalIdBySubBlockId[subBlock.id]
+                        const canonicalGroup = canonicalId
+                          ? canonicalIndex.groupsById[canonicalId]
                           : undefined
-
-                      const showDivider =
-                        index < regularSubBlocks.length - 1 ||
-                        (!hasAdditionalFields && index < subBlocks.length - 1)
-
-                      return (
-                        <div key={stableKey} className='subblock-row'>
-                          <SubBlock
-                            blockId={currentBlockId}
-                            config={subBlock}
-                            isPreview={false}
-                            subBlockValues={subBlockState}
-                            disabled={!canEditBlock}
-                            allowExpandInPreview={false}
-                            isSearchHighlighted={
-                              activeSearchTarget?.blockId === currentBlockId &&
-                              (activeSearchTarget.subBlockId === subBlock.id ||
-                                activeSearchTarget.canonicalSubBlockId ===
-                                  (subBlock.canonicalParamId ?? subBlock.id))
-                            }
-                            canonicalToggle={
-                              isCanonicalSwap && canonicalMode && canonicalId
-                                ? {
-                                    mode: canonicalMode,
-                                    disabled: !canEditBlock,
-                                    onToggle: () => {
-                                      if (!currentBlockId) return
-                                      const nextMode =
-                                        canonicalMode === 'advanced' ? 'basic' : 'advanced'
-                                      collaborativeSetBlockCanonicalMode(
-                                        currentBlockId,
-                                        canonicalId,
-                                        nextMode
-                                      )
-                                    },
-                                  }
-                                : undefined
-                            }
-                          />
-                          {showDivider && (
-                            <FieldDivider
-                              subblockMarker
-                              className={
-                                regularSubBlocks[index + 1]?.hideDividerBefore
-                                  ? '[&>div]:invisible'
-                                  : undefined
+                        const isCanonicalSwap = isCanonicalPair(canonicalGroup)
+                        const canonicalMode =
+                          canonicalGroup && isCanonicalSwap
+                            ? resolveCanonicalMode(
+                                canonicalGroup,
+                                blockSubBlockValues,
+                                canonicalModeOverrides
+                              )
+                            : undefined
+
+                        return (
+                          <div key={stableKey} className='subblock-row'>
+                            <SubBlock
+                              blockId={currentBlockId}
+                              config={subBlock}
+                              isPreview={false}
+                              subBlockValues={subBlockState}
+                              disabled={!canEditBlock}
+                              allowExpandInPreview={false}
+                              isSearchHighlighted={
+                                activeSearchTarget?.blockId === currentBlockId &&
+                                (activeSearchTarget.subBlockId === subBlock.id ||
+                                  activeSearchTarget.canonicalSubBlockId ===
+                                    (subBlock.canonicalParamId ?? subBlock.id))
                               }
-                            />
-                          )}
-                        </div>
-                      )
-                    })}
-
-                    {hasAdditionalFields && canEditBlock && (
-                      <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <DashedDividerLine className='flex-1' />
-                        <button
-                          type='button'
-                          onClick={handleToggleAdditionalFields}
-                          className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                        >
-                          {displayAdvancedOptions
-                            ? 'Hide additional fields'
-                            : 'Show additional fields'}
-                          <ChevronDown
-                            className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
-                          />
-                        </button>
-                        <DashedDividerLine className='flex-1' />
-                      </div>
-                    )}
-                    {hasAdditionalFields && !canEditBlock && displayAdvancedOptions && (
-                      <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <DashedDividerLine className='flex-1' />
-                        <span className='whitespace-nowrap text-[var(--text-secondary)] text-small'>
-                          Additional fields
-                        </span>
-                        <DashedDividerLine className='flex-1' />
-                      </div>
-                    )}
-
-                    {advancedOnlySubBlocks.map((subBlock, index) => {
-                      const stableKey = getSubBlockStableKey(
-                        currentBlockId || '',
-                        subBlock,
-                        subBlockState
-                      )
-
-                      return (
-                        <div key={stableKey} className='subblock-row'>
-                          <SubBlock
-                            blockId={currentBlockId}
-                            config={subBlock}
-                            isPreview={false}
-                            subBlockValues={subBlockState}
-                            disabled={!canEditBlock}
-                            allowExpandInPreview={false}
-                            isSearchHighlighted={
-                              activeSearchTarget?.blockId === currentBlockId &&
-                              (activeSearchTarget.subBlockId === subBlock.id ||
-                                activeSearchTarget.canonicalSubBlockId ===
-                                  (subBlock.canonicalParamId ?? subBlock.id))
-                            }
-                          />
-                          {(index < advancedOnlySubBlocks.length - 1 || showRetrySettings) && (
-                            <FieldDivider
-                              subblockMarker
-                              className={
-                                advancedOnlySubBlocks[index + 1]?.hideDividerBefore
-                                  ? '[&>div]:invisible'
+                              canonicalToggle={
+                                isCanonicalSwap && canonicalMode && canonicalId
+                                  ? {
+                                      mode: canonicalMode,
+                                      disabled: !canEditBlock,
+                                      onToggle: () => {
+                                        if (!currentBlockId) return
+                                        const nextMode =
+                                          canonicalMode === 'advanced' ? 'basic' : 'advanced'
+                                        collaborativeSetBlockCanonicalMode(
+                                          currentBlockId,
+                                          canonicalId,
+                                          nextMode
+                                        )
+                                      },
+                                    }
                                   : undefined
                               }
                             />
-                          )}
-                        </div>
-                      )
-                    })}
-
-                    {showRetrySettings && (
+                          </div>
+                        )
+                      }}
+                    </BlockEditorSections>
+                    {supportsRetry && (
                       <RetrySettings
-                        retry={currentBlock?.retry}
+                        retry={currentBlock.retry}
                         disabled={!canEditBlock}
                         onChange={handleChangeRetry}
                       />
@@ -783,58 +635,12 @@ export function Editor() {
               </div>
             </div>
 
-            {/* Connections Section - Only show when there are connections */}
             {hasIncomingConnections && (
-              <div
-                className={
-                  'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
-                  (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
-                }
-                style={{ height: `${connectionsHeight}px` }}
-              >
-                {/* Resize Handle */}
-                <div className='relative'>
-                  <div
-                    role='separator'
-                    aria-orientation='horizontal'
-                    className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
-                    onMouseDown={handleConnectionsResizeMouseDown}
-                  />
-                </div>
-
-                {/* Connections Header with Chevron */}
-                <div
-                  className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
-                  onClick={toggleConnectionsCollapsed}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault()
-                      toggleConnectionsCollapsed()
-                    }
-                  }}
-                  role='button'
-                  tabIndex={0}
-                  aria-label={
-                    isConnectionsAtMinHeight ? 'Expand connections' : 'Collapse connections'
-                  }
-                >
-                  <ChevronUp
-                    className={
-                      'size-[14px] transition-transform' +
-                      (!isConnectionsAtMinHeight ? ' rotate-180' : '')
-                    }
-                  />
-                  <div className='text-[var(--text-primary)] text-small'>Connections</div>
-                </div>
-
-                {/* Connections Content - Always visible */}
-                <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
-                  <ConnectionBlocks
-                    connections={incomingConnections}
-                    currentBlockId={currentBlock.id}
-                  />
-                </div>
-              </div>
+              <AvailableData
+                connections={incomingConnections}
+                open={isAvailableDataOpen}
+                onOpenChange={handleAvailableDataOpenChange}
+              />
             )}
           </div>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
index a509707db7c..e4689599176 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections.ts
@@ -19,6 +19,7 @@ export interface ConnectedBlock {
   outputType: string | string[]
   name: string
   outputs?: Record<string, any>
+  distance: number
 }
 
 export function useBlockConnections(blockId: string) {
@@ -119,8 +120,7 @@ export function useBlockConnections(blockId: string) {
       }
     })
     .filter((conn): conn is NonNullable<typeof conn> => conn !== null)
-    .sort((a, b) => a.distance - b.distance) // Sort by distance, closest first
-    .map(({ distance: _distance, ...conn }) => conn) as ConnectedBlock[] // Remove distance from final result
+    .sort((a, b) => a.distance - b.distance)
 
   return {
     incomingConnections,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts
index 6ca9b69470d..e674da998d9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts
@@ -4,8 +4,8 @@ import {
   evaluateSubBlockCondition,
   isSubBlockFeatureEnabled,
   isSubBlockHidden,
-  isSubBlockVisibleForMode,
   isSubBlockVisibleForTriggerMode,
+  isSubBlockVisibleInEditor,
   isToolInputOnlySubBlock,
   shouldUseSubBlockForTriggerModeCanonicalIndex,
 } from '@/lib/workflows/subblocks/visibility'
@@ -22,7 +22,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
  *
  * @param config - The block configuration containing subblock definitions
  * @param blockId - The ID of the current block being edited
- * @param displayAdvancedMode - Whether advanced mode is enabled for this block
  * @param displayTriggerMode - Whether trigger mode is enabled for this block
  * @param activeWorkflowId - The active workflow ID
  * @param blockSubBlockValues - Current subblock values from the store
@@ -32,7 +31,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 export function useEditorSubblockLayout(
   config: BlockConfig,
   blockId: string,
-  displayAdvancedMode: boolean,
   displayTriggerMode: boolean,
   activeWorkflowId: string | null,
   blockSubBlockValues: Record<string, any>,
@@ -106,7 +104,6 @@ export function useEditorSubblockLayout(
       ? (config.subBlocks || []).filter(shouldUseSubBlockForTriggerModeCanonicalIndex)
       : config.subBlocks || []
     const canonicalIndex = buildCanonicalIndex(subBlocksForCanonical)
-    const effectiveAdvanced = displayAdvancedMode
     const canonicalModeOverrides = blockData?.canonicalModes
 
     // Expose canonical mode overrides to condition functions so they can
@@ -137,15 +134,7 @@ export function useEditorSubblockLayout(
         return false
       }
 
-      if (
-        !isSubBlockVisibleForMode(
-          block,
-          effectiveAdvanced,
-          canonicalIndex,
-          rawValues,
-          canonicalModeOverrides
-        )
-      ) {
+      if (!isSubBlockVisibleInEditor(block, canonicalIndex, rawValues, canonicalModeOverrides)) {
         return false
       }
 
@@ -161,7 +150,6 @@ export function useEditorSubblockLayout(
     config.triggers,
     config.category,
     blockId,
-    displayAdvancedMode,
     displayTriggerMode,
     blockSubBlockValues,
     activeWorkflowId,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/index.ts
index eac45feff49..547af2ba143 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/index.ts
@@ -1 +1,2 @@
 export { Editor } from './editor'
+export { EditorPanelActions } from './editor-panel-actions'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.test.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.test.ts
new file mode 100644
index 00000000000..2dff36d53d9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest'
+import { groupSubBlocksIntoEditorSections } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections'
+import type { SubBlockConfig } from '@/blocks/types'
+
+function subBlock(id: string, extras: Partial<SubBlockConfig> = {}): SubBlockConfig {
+  return { id, type: 'short-input', ...extras }
+}
+
+describe('groupSubBlocksIntoEditorSections', () => {
+  it('groups API request fields by responsibility', () => {
+    const sections = groupSubBlocksIntoEditorSections('api', [
+      subBlock('url'),
+      subBlock('method'),
+      subBlock('headers'),
+      subBlock('body'),
+      subBlock('timeout', { mode: 'advanced' }),
+    ])
+
+    expect(sections?.map((section) => section.id)).toEqual(['request', 'request-data', 'execution'])
+    expect(sections?.[1].subBlocks.map((field) => field.id)).toEqual(['headers', 'body'])
+  })
+
+  it('keeps agent model, context, memory, generation, and output settings distinct', () => {
+    const sections = groupSubBlocksIntoEditorSections('agent', [
+      subBlock('messages'),
+      subBlock('model'),
+      subBlock('apiKey'),
+      subBlock('tools'),
+      subBlock('memoryType'),
+      subBlock('thinkingLevel'),
+      subBlock('responseFormat'),
+    ])
+
+    expect(sections?.map((section) => section.id)).toEqual([
+      'messages',
+      'model',
+      'context',
+      'memory',
+      'generation',
+      'output',
+    ])
+  })
+
+  it('keeps integration connections and standalone options out of primary inputs', () => {
+    const sections = groupSubBlocksIntoEditorSections('slack_v2', [
+      subBlock('operation'),
+      subBlock('credential'),
+      subBlock('channel'),
+      subBlock('manualChannel', { mode: 'advanced', canonicalParamId: 'channel' }),
+      subBlock('paginationCursor', { mode: 'advanced' }),
+    ])
+
+    expect(sections?.find((section) => section.id === 'connection')?.subBlocks).toHaveLength(1)
+    expect(
+      sections?.find((section) => section.id === 'inputs')?.subBlocks.map((field) => field.id)
+    ).toEqual(['channel', 'manualChannel'])
+    expect(sections?.find((section) => section.id === 'options')?.subBlocks).toHaveLength(1)
+  })
+
+  it('leaves blocks outside the prototype set unchanged', () => {
+    expect(groupSubBlocksIntoEditorSections('function', [subBlock('code')])).toBeNull()
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.ts
new file mode 100644
index 00000000000..a3cb1683b28
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/lib/editor-sections.ts
@@ -0,0 +1,163 @@
+import type { SubBlockConfig } from '@/blocks/types'
+
+export interface EditorSection {
+  id: string
+  title: string
+  description?: string
+  subBlocks: SubBlockConfig[]
+}
+
+interface EditorSectionDefinition {
+  id: string
+  title: string
+  description?: string
+}
+
+const API_SECTIONS = [
+  { id: 'request', title: 'Request', description: 'Endpoint and request method.' },
+  { id: 'request-data', title: 'Request data', description: 'Parameters, headers, and body.' },
+  { id: 'execution', title: 'Execution', description: 'Timeout, retry, and proxy behavior.' },
+] as const satisfies readonly EditorSectionDefinition[]
+
+const AGENT_SECTIONS = [
+  { id: 'messages', title: 'Prompt', description: 'Instructions and conversation context.' },
+  { id: 'model', title: 'Model & provider', description: 'Model selection and provider access.' },
+  {
+    id: 'context',
+    title: 'Context',
+    description: 'Files, tools, and skills available to the agent.',
+  },
+  { id: 'memory', title: 'Memory', description: 'Conversation state retained across runs.' },
+  { id: 'generation', title: 'Generation', description: 'Model behavior and response limits.' },
+  { id: 'output', title: 'Output', description: 'Response shape and continuation.' },
+] as const satisfies readonly EditorSectionDefinition[]
+
+const INTEGRATION_SECTIONS = [
+  { id: 'operation', title: 'Action', description: 'Choose what this block does.' },
+  { id: 'connection', title: 'Connection', description: 'Account and authentication.' },
+  { id: 'inputs', title: 'Inputs', description: 'Values used by the selected operation.' },
+  { id: 'options', title: 'Options', description: 'Additional operation behavior.' },
+] as const satisfies readonly EditorSectionDefinition[]
+
+const CONDITION_SECTIONS = [
+  { id: 'rules', title: 'Rules', description: 'Define the branches this block can take.' },
+] as const satisfies readonly EditorSectionDefinition[]
+
+const AGENT_MODEL_IDS = new Set([
+  'model',
+  'vertexCredential',
+  'vertexManualCredential',
+  'apiKey',
+  'azureEndpoint',
+  'azureApiVersion',
+  'vertexProject',
+  'vertexLocation',
+  'bedrockAccessKeyId',
+  'bedrockSecretKey',
+  'bedrockRegion',
+])
+
+const AGENT_CONTEXT_IDS = new Set(['attachmentFiles', 'files', 'tools', 'skills'])
+const AGENT_MEMORY_IDS = new Set([
+  'memoryType',
+  'conversationId',
+  'slidingWindowSize',
+  'slidingWindowTokens',
+  'previousInteractionId',
+])
+const AGENT_GENERATION_IDS = new Set([
+  'reasoningEffort',
+  'verbosity',
+  'thinkingLevel',
+  'promptCaching',
+  'temperature',
+  'maxTokens',
+])
+
+function getCanonicalId(subBlock: SubBlockConfig): string {
+  return subBlock.canonicalParamId ?? subBlock.id
+}
+
+function getIntegrationSectionId(subBlock: SubBlockConfig): string {
+  const id = getCanonicalId(subBlock).toLowerCase()
+
+  if (id === 'operation' || id.includes('trigger')) return 'operation'
+  if (
+    id.includes('credential') ||
+    id.includes('account') ||
+    id.includes('token') ||
+    id === 'authmethod'
+  ) {
+    return 'connection'
+  }
+  if (subBlock.mode === 'advanced' && !subBlock.canonicalParamId) return 'options'
+  return 'inputs'
+}
+
+function getSectionConfiguration(
+  blockType: string
+): readonly EditorSectionDefinition[] | undefined {
+  if (blockType === 'api') return API_SECTIONS
+  if (blockType === 'agent') return AGENT_SECTIONS
+  if (blockType === 'slack' || blockType === 'slack_v2') return INTEGRATION_SECTIONS
+  if (blockType === 'linear' || blockType === 'linear_v2') return INTEGRATION_SECTIONS
+  if (blockType === 'condition') return CONDITION_SECTIONS
+  return undefined
+}
+
+function getSectionId(blockType: string, subBlock: SubBlockConfig): string {
+  const id = getCanonicalId(subBlock)
+
+  if (blockType === 'api') {
+    if (id === 'url' || id === 'method') return 'request'
+    if (id === 'params' || id === 'headers' || id === 'body') return 'request-data'
+    return 'execution'
+  }
+
+  if (blockType === 'agent') {
+    if (id === 'messages') return 'messages'
+    if (AGENT_MODEL_IDS.has(id)) return 'model'
+    if (AGENT_CONTEXT_IDS.has(id)) return 'context'
+    if (AGENT_MEMORY_IDS.has(id)) return 'memory'
+    if (AGENT_GENERATION_IDS.has(id)) return 'generation'
+    if (id === 'responseFormat') return 'output'
+    return 'generation'
+  }
+
+  if (
+    blockType === 'slack' ||
+    blockType === 'slack_v2' ||
+    blockType === 'linear' ||
+    blockType === 'linear_v2'
+  ) {
+    return getIntegrationSectionId(subBlock)
+  }
+
+  return 'rules'
+}
+
+/**
+ * Groups visible subblocks for the representative editor-layout prototypes.
+ * Blocks outside the prototype set return `null` and retain the legacy flow.
+ */
+export function groupSubBlocksIntoEditorSections(
+  blockType: string,
+  subBlocks: SubBlockConfig[]
+): EditorSection[] | null {
+  const definitions = getSectionConfiguration(blockType)
+  if (!definitions) return null
+
+  const grouped = new Map<string, SubBlockConfig[]>()
+  for (const subBlock of subBlocks) {
+    const sectionId = getSectionId(blockType, subBlock)
+    const sectionSubBlocks = grouped.get(sectionId) ?? []
+    sectionSubBlocks.push(subBlock)
+    grouped.set(sectionId, sectionSubBlocks)
+  }
+
+  return definitions.flatMap((definition) => {
+    const sectionSubBlocks = grouped.get(definition.id)
+    if (!sectionSubBlocks?.length) return []
+    return [{ ...definition, subBlocks: sectionSubBlocks }]
+  })
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
index d942f6fa12e..8230141d265 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts
@@ -1,3 +1,4 @@
 export { Deploy } from './deploy'
-export { Editor } from './editor'
+export { Editor, EditorPanelActions } from './editor'
+export { PanelViewControls } from './panel-view-controls'
 export { Toolbar } from './toolbar'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-view-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-view-controls.tsx
new file mode 100644
index 00000000000..78d9ee05e3a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-view-controls.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from 'react'
+import { Chip, ChipInput, cn, Tooltip } from '@sim/emcn'
+import { Search } from '@sim/emcn/icons'
+import type { PanelTab } from '@/stores/panel'
+
+interface PanelViewControlsProps {
+  activeTab: PanelTab
+  searchInputRef: RefObject<HTMLInputElement | null>
+  onSearchChange: (query: string) => void
+  onSearchNavigate: () => void
+  onToolbarSelect: () => void
+  onEditorSelect: () => void
+  editorActions?: ReactNode
+}
+
+/**
+ * Switches between the block catalog and editor while the Toolbar control morphs
+ * into the catalog search field and the adjacent Editor control relocates smoothly.
+ */
+export function PanelViewControls({
+  activeTab,
+  searchInputRef,
+  onSearchChange,
+  onSearchNavigate,
+  onToolbarSelect,
+  onEditorSelect,
+  editorActions,
+}: PanelViewControlsProps) {
+  const toolbarActive = activeTab === 'toolbar'
+
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onSearchChange(event.target.value)
+  }
+
+  const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== 'ArrowDown') return
+    event.preventDefault()
+    onSearchNavigate()
+  }
+
+  return (
+    <div
+      className='relative flex h-[40px] flex-shrink-0 items-center justify-start gap-1 px-3.5'
+      aria-label='Workflow panel view'
+    >
+      <div
+        className={cn(
+          'relative h-[30px] min-w-0 flex-shrink-0 rounded-lg transition-[width,flex-grow,background-color] duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+          toolbarActive
+            ? 'w-0 grow'
+            : 'w-[80px] grow-0 cursor-pointer hover-hover:bg-[var(--surface-active)]'
+        )}
+      >
+        <ChipInput
+          ref={searchInputRef}
+          type='search'
+          surface={toolbarActive ? 'field' : 'button'}
+          onChange={handleSearchChange}
+          onKeyDown={handleSearchKeyDown}
+          placeholder='Search blocks...'
+          aria-label={toolbarActive ? 'Search blocks' : undefined}
+          aria-hidden={!toolbarActive}
+          readOnly={!toolbarActive}
+          tabIndex={toolbarActive ? 0 : -1}
+          className='min-w-0'
+          inputClassName={cn(
+            'pl-4 transition-[opacity,transform] duration-150 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            toolbarActive
+              ? 'translate-x-0 opacity-100 delay-75 motion-reduce:delay-0'
+              : '-translate-x-1 opacity-0 delay-0'
+          )}
+        />
+
+        <span
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-0 flex items-center gap-1 px-2'
+        >
+          <Search className='size-[14px] flex-none text-[var(--text-icon)]' />
+          <span
+            aria-hidden='true'
+            className={cn(
+              'min-w-0 whitespace-nowrap text-[var(--text-body)] text-sm transition-[opacity,transform] duration-150 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+              toolbarActive
+                ? 'translate-x-1 opacity-0 delay-0'
+                : 'translate-x-0 opacity-100 delay-100 motion-reduce:delay-0'
+            )}
+          >
+            Toolbar
+          </span>
+        </span>
+
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type='button'
+              onClick={onToolbarSelect}
+              aria-label='Toolbar'
+              aria-pressed={toolbarActive}
+              tabIndex={toolbarActive ? -1 : 0}
+              className={cn(
+                'absolute inset-0 rounded-lg transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                toolbarActive ? 'pointer-events-none opacity-0' : 'opacity-100'
+              )}
+              aria-hidden={toolbarActive}
+            />
+          </Tooltip.Trigger>
+          {!toolbarActive ? <Tooltip.Content side='bottom'>Toolbar</Tooltip.Content> : null}
+        </Tooltip.Root>
+      </div>
+
+      <Chip
+        active={activeTab === 'editor'}
+        onClick={onEditorSelect}
+        aria-pressed={activeTab === 'editor'}
+      >
+        Editor
+      </Chip>
+
+      {editorActions ? (
+        <div
+          aria-hidden={toolbarActive}
+          className={cn(
+            'absolute inset-y-0 end-3.5 flex items-center transition-opacity [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            toolbarActive
+              ? 'pointer-events-none opacity-0 delay-0 duration-0'
+              : 'opacity-100 delay-300 duration-100 motion-reduce:delay-0'
+          )}
+        >
+          {editorActions}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index cffd670abbf..9a9a2ac46d2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -4,36 +4,38 @@ import {
   type ComponentType,
   forwardRef,
   memo,
+  type RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import {
-  Button,
-  chipVariants,
+  ChipTag,
   cn,
+  disclosureChevronClass,
   Expandable,
   ExpandableContent,
   handleKeyboardActivation,
-  Info,
+  ScrollEdgeFade,
 } from '@sim/emcn'
-import { ChevronDown, Search } from '@sim/emcn/icons'
-import clsx from 'clsx'
+import { ChevronDown } from '@sim/emcn/icons'
+import { getWorkflowTypeAccent } from '@sim/workflow-renderer'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
 import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
-import {
-  type DragItemInfo,
-  ToolbarItemContextMenu,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components'
+import { ToolbarItemContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components'
 import { useToolbarItemInteractions } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
-import { BlockTile } from '@/blocks/block-tile'
+import {
+  COMMAND_ITEM_CLASSNAME,
+  filterAndCap,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import {
   buildCustomBlockConfig,
   CUSTOM_BLOCK_TILE_COLOR,
@@ -41,18 +43,18 @@ import {
 } from '@/blocks/custom/build-config'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { getCustomBlockIcon } from '@/blocks/custom/custom-block-icon'
+import { getTileIconColorClass } from '@/blocks/icon-color'
 import { getCanonicalBlocksByCategory } from '@/blocks/registry'
 import type { BlockConfig } from '@/blocks/types'
 import { useOrgBrandConfig } from '@/ee/whitelabeling/components/branding-provider'
 import { useCustomBlocks } from '@/hooks/queries/custom-blocks'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSandboxBlockConstraints } from '@/hooks/use-sandbox-block-constraints'
-import { useToolbarStore } from '@/stores/panel'
-import type { ToolbarSectionKey } from '@/stores/panel/toolbar/store'
 
 interface BlockItem {
   name: string
   type: string
+  description?: string
   config?: BlockConfig
   icon?: ComponentType<{ className?: string }>
   bgColor?: string
@@ -62,35 +64,36 @@ interface BlockItem {
 interface ToolbarItemProps {
   item: BlockItem
   isTrigger: boolean
+  showWorkflowAccent: boolean
   onDragStart: (
     e: React.DragEvent<HTMLElement>,
     type: string,
     enableTriggerMode: boolean,
-    dragItemInfo?: DragItemInfo
+    dragItemInfo?: { name: string; bgColor: string; iconElement: HTMLElement | null }
   ) => void
   onClick: (type: string, enableTriggerMode: boolean) => void
   onContextMenu: (e: React.MouseEvent, type: string, isTrigger: boolean, docsLink?: string) => void
-  itemRef: (el: HTMLDivElement | null) => void
 }
 
 const ToolbarItem = memo(function ToolbarItem({
   item,
   isTrigger,
+  showWorkflowAccent,
   onDragStart,
   onClick,
   onContextMenu,
-  itemRef,
 }: ToolbarItemProps) {
   const Icon = item.icon
   const isTriggerCapable = isTrigger && item.config ? hasTriggerCapability(item.config) : false
+  const workflowAccent = showWorkflowAccent ? getWorkflowTypeAccent(item.type) : null
 
   const handleDragStart = useCallback(
     (e: React.DragEvent<HTMLElement>) => {
-      const iconContainer = e.currentTarget.querySelector<HTMLElement>('[data-toolbar-item-icon]')
+      const iconElement = e.currentTarget.querySelector('.toolbar-item-icon')
       onDragStart(e, item.type, isTriggerCapable, {
         name: item.name,
         bgColor: item.bgColor ?? '#666666',
-        iconContainer,
+        iconElement: iconElement as HTMLElement | null,
       })
     },
     [item.type, item.name, item.bgColor, isTriggerCapable, onDragStart]
@@ -118,7 +121,7 @@ const ToolbarItem = memo(function ToolbarItem({
 
   return (
     <div
-      ref={itemRef}
+      data-toolbar-item
       role='button'
       aria-label={`Add ${item.name}`}
       tabIndex={-1}
@@ -127,17 +130,31 @@ const ToolbarItem = memo(function ToolbarItem({
       onClick={addBlockToPanel}
       onContextMenu={handleContextMenu}
       className={cn(
-        chipVariants({ fullWidth: true }),
-        'focus-visible:bg-[var(--surface-active)] focus-visible:outline-none active:cursor-grabbing'
+        COMMAND_ITEM_CLASSNAME,
+        'mx-0 w-auto hover-hover:bg-[var(--surface-hover)] focus-visible:border-[var(--border)] focus-visible:bg-[var(--surface-active)] focus-visible:outline-none active:cursor-grabbing'
       )}
       onKeyDown={handleKeyDown}
     >
-      <BlockTile
-        blockType={item.type}
-        icon={Icon}
-        bgColor={item.bgColor}
-        data-toolbar-item-icon=''
-      />
+      {workflowAccent && Icon ? (
+        <ChipTag
+          variant={workflowAccent.variant}
+          tone={workflowAccent.tone}
+          className='size-[16px] flex-shrink-0 justify-center p-0'
+        >
+          <Icon className='toolbar-item-icon size-[10px]' />
+        </ChipTag>
+      ) : (
+        <div
+          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
+          style={{ background: item.bgColor }}
+        >
+          {Icon && (
+            <Icon
+              className={cn('toolbar-item-icon size-[10px]', getTileIconColorClass(item.bgColor))}
+            />
+          )}
+        </div>
+      )}
       <span className='min-w-0 flex-1 truncate text-[var(--text-body)]'>{item.name}</span>
     </div>
   )
@@ -191,6 +208,7 @@ function getTriggers(overlayVersion: number): BlockItem[] {
     cachedTriggers = sortedTriggers.map((trigger) => ({
       name: trigger.name,
       type: trigger.type,
+      description: trigger.description,
       config: trigger,
       icon: trigger.icon,
       bgColor: trigger.bgColor,
@@ -227,6 +245,7 @@ function ensureBlockCaches() {
   const regularBlockItems: BlockItem[] = regularBlockConfigs.map((block) => ({
     name: block.name,
     type: block.type,
+    description: block.description,
     config: block,
     icon: block.icon,
     bgColor: block.bgColor,
@@ -251,6 +270,7 @@ function ensureBlockCaches() {
   const toolItems: BlockItem[] = toolConfigs.map((block) => ({
     name: block.name,
     type: block.type,
+    description: block.description,
     config: block,
     icon: block.icon,
     bgColor: block.bgColor,
@@ -277,15 +297,11 @@ function getTools(overlayVersion: number): BlockItem[] {
 
 interface ToolbarSectionProps {
   label: string
-  tooltip: string
-  sectionKey: ToolbarSectionKey
   items: BlockItem[]
   isTrigger: boolean
-  expanded: boolean
-  searching: boolean
-  animate: boolean
-  onToggle: (key: ToolbarSectionKey) => void
-  getItemRef: (index: number) => (el: HTMLDivElement | null) => void
+  showWorkflowAccent: boolean
+  forceExpanded: boolean
+  scrollContainerRef: RefObject<HTMLDivElement | null>
   onDragStart: ToolbarItemProps['onDragStart']
   onItemClick: ToolbarItemProps['onClick']
   onContextMenu: ToolbarItemProps['onContextMenu']
@@ -293,55 +309,84 @@ interface ToolbarSectionProps {
 
 const ToolbarSection = memo(function ToolbarSection({
   label,
-  tooltip,
-  sectionKey,
   items,
   isTrigger,
-  expanded,
-  searching,
-  animate,
-  onToggle,
-  getItemRef,
+  showWorkflowAccent,
+  forceExpanded,
+  scrollContainerRef,
   onDragStart,
   onItemClick,
   onContextMenu,
 }: ToolbarSectionProps) {
-  const toggle = useCallback(() => onToggle(sectionKey), [onToggle, sectionKey])
+  const [expanded, setExpanded] = useState(true)
+  const sectionRef = useRef<HTMLElement>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+  const anchorAfterCollapseRef = useRef(false)
+
+  const isExpanded = forceExpanded || expanded
+
+  const handleToggle = () => {
+    if (forceExpanded) return
+
+    if (isExpanded) {
+      const scrollContainer = scrollContainerRef.current
+      const section = sectionRef.current
+      const header = headerRef.current
+
+      if (scrollContainer && section && header) {
+        const scrollContainerTop = scrollContainer.getBoundingClientRect().top
+        const sectionBottom = section.getBoundingClientRect().bottom
+        const headerTop = header.getBoundingClientRect().top
+
+        anchorAfterCollapseRef.current =
+          Math.abs(headerTop - scrollContainerTop) <= 1 && sectionBottom > scrollContainerTop
+      }
+    }
+
+    setExpanded((current) => !current)
+  }
+
+  useLayoutEffect(() => {
+    if (isExpanded || !anchorAfterCollapseRef.current) return
+
+    const scrollContainer = scrollContainerRef.current
+    const section = sectionRef.current
+    if (scrollContainer && section) {
+      scrollContainer.scrollTop = section.offsetTop
+    }
+    anchorAfterCollapseRef.current = false
+  }, [isExpanded, scrollContainerRef])
 
   if (items.length === 0) return null
 
   return (
-    <section>
-      <div className='sticky top-0 z-10 flex w-full flex-shrink-0 items-center gap-2 bg-[var(--bg)] px-4 pt-3 pb-2'>
+    <section ref={sectionRef} className='group/toolbar-section flex flex-col'>
+      <div
+        ref={headerRef}
+        className='-mx-1.5 sticky top-0 z-20 flex h-[30px] flex-shrink-0 items-center bg-[var(--bg)] px-3.5'
+      >
         <button
           type='button'
-          onClick={toggle}
-          aria-expanded={expanded}
-          disabled={searching}
-          className='flex flex-1 items-center gap-2 text-left'
+          onClick={handleToggle}
+          aria-expanded={isExpanded}
+          className='group/section-toggle flex h-full min-w-0 items-center gap-1.5 text-[var(--text-muted)] text-small transition-colors hover-hover:text-[var(--text-secondary)]'
         >
-          <span className='text-[var(--text-muted)] text-small'>{label}</span>
-          <ChevronDown
-            className={clsx(
-              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
-              !expanded && '-rotate-90'
-            )}
-          />
+          <span className='min-w-0 truncate'>{label}</span>
+          <ChevronDown className={cn(disclosureChevronClass, !isExpanded && '-rotate-90')} />
         </button>
-        <Info>{tooltip}</Info>
       </div>
-      <Expandable expanded={expanded}>
-        <ExpandableContent className={animate ? undefined : '!animate-none'}>
-          <div className='flex flex-col gap-0.5 px-2'>
-            {items.map((item, index) => (
+      <Expandable expanded={isExpanded}>
+        <ExpandableContent className='!animate-none'>
+          <div className='flex flex-col gap-[1px] pt-1 pb-6'>
+            {items.map((item) => (
               <ToolbarItem
-                key={item.type}
+                key={`${isTrigger ? 'trigger' : 'block'}-${item.type}`}
                 item={item}
                 isTrigger={isTrigger}
+                showWorkflowAccent={showWorkflowAccent}
                 onDragStart={onDragStart}
                 onClick={onItemClick}
                 onContextMenu={onContextMenu}
-                itemRef={getItemRef(index)}
               />
             ))}
           </div>
@@ -354,103 +399,44 @@ const ToolbarSection = memo(function ToolbarSection({
 interface ToolbarProps {
   /** Whether the toolbar tab is currently active */
   isActive?: boolean
+  /** Returns keyboard focus to the Toolbar search control. */
+  onFocusSearch?: () => void
 }
 
 /**
  * Imperative handle exposed by the Toolbar component.
  */
 interface ToolbarRef {
+  /** Moves focus into the first visible catalog result. */
+  focusFirstItem: () => void
   /**
-   * Focuses the search input and ensures search mode is active.
+   * Updates the catalog query from the panel-level search control.
    */
-  focusSearch: () => void
+  setSearchQuery: (query: string) => void
 }
 
 /**
- * Toolbar component displaying triggers, blocks, and tools in a single scrollable
- * view with three collapsible sections. Each section is independently expandable
- * and its state is persisted across reloads.
+ * Toolbar component displaying the workflow block catalog in a single scrollable
+ * view with the same search and list hierarchy as the on-canvas block selector.
  *
  * @param props - Component props
  * @param props.isActive - Whether the toolbar tab is currently active
+ * @param props.onFocusSearch - Moves keyboard focus back to the catalog search control
  * @returns Toolbar view with triggers, blocks, and tools sections
  */
 export const Toolbar = memo(
-  forwardRef<ToolbarRef, ToolbarProps>(function Toolbar({ isActive = true }: ToolbarProps, ref) {
+  forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
+    { isActive = true, onFocusSearch }: ToolbarProps,
+    ref
+  ) {
     const rootRef = useRef<HTMLDivElement>(null)
-    const searchInputRef = useRef<HTMLInputElement>(null)
-    const triggerItemRefs = useRef<Array<HTMLDivElement | null>>([])
-    const blockItemRefs = useRef<Array<HTMLDivElement | null>>([])
-    const customBlockItemRefs = useRef<Array<HTMLDivElement | null>>([])
-    const toolItemRefs = useRef<Array<HTMLDivElement | null>>([])
-
-    const triggerRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-    const blockRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-    const customBlockRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-    const toolRefCallbacks = useRef<Record<number, (el: HTMLDivElement | null) => void>>({})
-
-    const getTriggerRefCallback = useCallback((index: number) => {
-      if (!triggerRefCallbacks.current[index]) {
-        triggerRefCallbacks.current[index] = (el) => {
-          triggerItemRefs.current[index] = el
-        }
-      }
-      return triggerRefCallbacks.current[index]
-    }, [])
-
-    const getBlockRefCallback = useCallback((index: number) => {
-      if (!blockRefCallbacks.current[index]) {
-        blockRefCallbacks.current[index] = (el) => {
-          blockItemRefs.current[index] = el
-        }
-      }
-      return blockRefCallbacks.current[index]
-    }, [])
-
-    const getCustomBlockRefCallback = useCallback((index: number) => {
-      if (!customBlockRefCallbacks.current[index]) {
-        customBlockRefCallbacks.current[index] = (el) => {
-          customBlockItemRefs.current[index] = el
-        }
-      }
-      return customBlockRefCallbacks.current[index]
-    }, [])
-
-    const getToolRefCallback = useCallback((index: number) => {
-      if (!toolRefCallbacks.current[index]) {
-        toolRefCallbacks.current[index] = (el) => {
-          toolItemRefs.current[index] = el
-        }
-      }
-      return toolRefCallbacks.current[index]
-    }, [])
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
 
     const posthog = usePostHog()
     const { filterBlocks } = usePermissionConfig()
     const sandboxAllowedBlocks = useSandboxBlockConstraints()
 
-    const expandedSections = useToolbarStore((state) => state.expandedSections)
-    const setSectionExpanded = useToolbarStore((state) => state.setSectionExpanded)
-
-    const [isSearchActive, setIsSearchActive] = useState(false)
     const [searchQuery, setSearchQuery] = useState('')
-    /**
-     * Collapsible animations are only enabled after the user explicitly toggles
-     * a section. Reset when the tab becomes inactive so the next visibility
-     * cycle (display: none → block) does not replay the open animation —
-     * CSS animations restart whenever a hidden ancestor becomes visible again.
-     */
-    const [animationsEnabled, setAnimationsEnabled] = useState(false)
-    const [prevIsActive, setPrevIsActive] = useState(isActive)
-    if (isActive !== prevIsActive) {
-      setPrevIsActive(isActive)
-      if (!isActive) {
-        setIsSearchActive(false)
-        setSearchQuery('')
-        setAnimationsEnabled(false)
-      }
-    }
-
     const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
     const contextMenuRef = useRef<HTMLDivElement>(null)
     const [activeItemInfo, setActiveItemInfo] = useState<{
@@ -491,6 +477,7 @@ export const Toolbar = memo(
           return {
             name: cb.name,
             type: cb.type,
+            description: cb.description,
             config: buildCustomBlockConfig(
               {
                 type: cb.type,
@@ -532,82 +519,43 @@ export const Toolbar = memo(
       return permitted.filter((b) => sandboxAllowedBlocks.includes(b.type))
     }, [filterBlocks, allTools, sandboxAllowedBlocks])
 
-    const normalizedQuery = searchQuery.trim().toLowerCase()
-    const isSearching = normalizedQuery.length > 0
-
-    const filteredTriggers = useMemo(() => {
-      if (!isSearching) return visibleTriggers
-      return visibleTriggers.filter((trigger) =>
-        trigger.name.toLowerCase().includes(normalizedQuery)
-      )
-    }, [visibleTriggers, isSearching, normalizedQuery])
-
-    const filteredBlocks = useMemo(() => {
-      if (!isSearching) return visibleBlocks
-      return visibleBlocks.filter((block) => block.name.toLowerCase().includes(normalizedQuery))
-    }, [visibleBlocks, isSearching, normalizedQuery])
-
-    const filteredCustomBlocks = useMemo(() => {
-      if (!isSearching) return visibleCustomBlocks
-      return visibleCustomBlocks.filter((block) =>
-        block.name.toLowerCase().includes(normalizedQuery)
-      )
-    }, [visibleCustomBlocks, isSearching, normalizedQuery])
-
-    const filteredTools = useMemo(() => {
-      if (!isSearching) return visibleTools
-      return visibleTools.filter((tool) => tool.name.toLowerCase().includes(normalizedQuery))
-    }, [visibleTools, isSearching, normalizedQuery])
-
-    /**
-     * Trim ref arrays to current filtered length to prevent stale refs from
-     * polluting keyboard navigation when items disappear (search, sandbox).
-     */
-    triggerItemRefs.current.length = filteredTriggers.length
-    blockItemRefs.current.length = filteredBlocks.length
-    customBlockItemRefs.current.length = filteredCustomBlocks.length
-    toolItemRefs.current.length = filteredTools.length
-
-    /**
-     * Section expansion is derived during search (force-expand sections with
-     * matches, hide sections with zero matches via items.length === 0). When
-     * not searching, the persisted store state drives expansion.
-     */
-    const sectionExpanded: Record<ToolbarSectionKey, boolean> = {
-      triggers: isSearching ? filteredTriggers.length > 0 : expandedSections.triggers,
-      blocks: isSearching ? filteredBlocks.length > 0 : expandedSections.blocks,
-      customBlocks: isSearching ? filteredCustomBlocks.length > 0 : expandedSections.customBlocks,
-      tools: isSearching ? filteredTools.length > 0 : expandedSections.tools,
-    }
-
-    const handleSectionToggle = useCallback(
-      (key: ToolbarSectionKey) => {
-        if (isSearching) return
-        setAnimationsEnabled(true)
-        setSectionExpanded(key, !expandedSections[key])
-      },
-      [isSearching, expandedSections, setSectionExpanded]
+    const filteredTriggers = useMemo(
+      () => filterAndCap(visibleTriggers, (item) => item.name, searchQuery),
+      [searchQuery, visibleTriggers]
+    )
+    const filteredBlocks = useMemo(
+      () => filterAndCap(visibleBlocks, (item) => item.name, searchQuery),
+      [searchQuery, visibleBlocks]
     )
+    const filteredCustomBlocks = useMemo(
+      () => filterAndCap(visibleCustomBlocks, (item) => item.name, searchQuery),
+      [searchQuery, visibleCustomBlocks]
+    )
+    const filteredTools = useMemo(
+      () => filterAndCap(visibleTools, (item) => item.name, searchQuery),
+      [searchQuery, visibleTools]
+    )
+
+    const hasVisibleResults =
+      filteredTriggers.length > 0 ||
+      filteredBlocks.length > 0 ||
+      filteredTools.length > 0 ||
+      filteredCustomBlocks.length > 0
+    const forceSectionsExpanded = searchQuery.trim().length > 0
 
-    const focusSearch = useCallback(() => {
-      setIsSearchActive(true)
-      queueMicrotask(() => searchInputRef.current?.focus())
+    const handleSearchChange = useCallback((query: string) => {
+      setSearchQuery(query)
+      scrollContainerRef.current?.scrollTo({ top: 0 })
     }, [])
 
-    useImperativeHandle(ref, () => ({ focusSearch }), [focusSearch])
-
-    /**
-     * 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 section lists.
-     */
-    const handleSearchBlur = useCallback(() => {
-      if (!searchQuery.trim()) {
-        setIsSearchActive(false)
-      }
-    }, [searchQuery])
+    const focusFirstItem = useCallback(() => {
+      rootRef.current?.querySelector<HTMLDivElement>('[data-toolbar-item]')?.focus()
+    }, [])
+
+    useImperativeHandle(ref, () => ({ focusFirstItem, setSearchQuery: handleSearchChange }), [
+      focusFirstItem,
+      handleSearchChange,
+    ])
 
     const handleItemContextMenu = useCallback(
       (e: React.MouseEvent, type: string, isTrigger: boolean, docsLink?: string) => {
@@ -658,17 +606,8 @@ export const Toolbar = memo(
       }
     }, [isContextMenuOpen, closeContextMenu])
 
-    /**
-     * Keyboard navigation across the three sections.
-     *
-     * - Active only when the toolbar tab is active and search mode is on.
-     * - Skips collapsed or empty sections so focus only lands on visible items.
-     * - ArrowDown traverses search → triggers → blocks → tools.
-     * - ArrowUp moves backward; from the first item of the first visible section
-     *   it wraps back to the search input.
-     */
     useEffect(() => {
-      if (!isActive || !isSearchActive) return
+      if (!isActive) return
 
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
@@ -676,215 +615,97 @@ export const Toolbar = memo(
         const activeEl = document.activeElement as HTMLElement | null
         const toolbarRoot = rootRef.current
         if (!toolbarRoot || !activeEl || !toolbarRoot.contains(activeEl)) return
-
-        type SectionList = {
-          key: ToolbarSectionKey
-          items: HTMLDivElement[]
-        }
-
-        const allSections: SectionList[] = [
-          {
-            key: 'triggers',
-            items: sectionExpanded.triggers
-              ? triggerItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-          {
-            key: 'blocks',
-            items: sectionExpanded.blocks
-              ? blockItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-          {
-            key: 'tools',
-            items: sectionExpanded.tools
-              ? toolItemRefs.current.filter((el): el is HTMLDivElement => el !== null)
-              : [],
-          },
-        ]
-        const sections = allSections.filter((section) => section.items.length > 0)
-
-        let sectionIndex = -1
-        let itemIndex = -1
-        const isSearch = activeEl === searchInputRef.current
-
-        if (!isSearch) {
-          for (let s = 0; s < sections.length; s++) {
-            const idx = sections[s].items.findIndex(
-              (el) => el === activeEl || el.contains(activeEl)
-            )
-            if (idx !== -1) {
-              sectionIndex = s
-              itemIndex = idx
-              break
-            }
-          }
-        }
-
-        const focusItem = (sIdx: number, iIdx: number) => {
-          const el = sections[sIdx]?.items[iIdx]
-          if (el) {
-            event.preventDefault()
-            event.stopPropagation()
-            el.focus()
-          }
-        }
-
-        const focusSearchInput = () => {
-          if (searchInputRef.current) {
-            event.preventDefault()
-            event.stopPropagation()
-            searchInputRef.current.focus()
-          }
-        }
+        const items = Array.from(
+          toolbarRoot.querySelectorAll<HTMLDivElement>('[data-toolbar-item]')
+        )
+        const activeIndex = items.findIndex((item) => item === activeEl || item.contains(activeEl))
 
         if (event.key === 'ArrowDown') {
-          if (isSearch || sectionIndex === -1) {
-            if (sections.length > 0) focusItem(0, 0)
-            return
-          }
-          const currentSection = sections[sectionIndex]
-          if (itemIndex < currentSection.items.length - 1) {
-            focusItem(sectionIndex, itemIndex + 1)
-            return
-          }
-          if (sectionIndex < sections.length - 1) {
-            focusItem(sectionIndex + 1, 0)
-          }
+          const nextItem = items[activeIndex + 1] ?? (activeIndex === -1 ? items[0] : null)
+          if (!nextItem) return
+          event.preventDefault()
+          event.stopPropagation()
+          nextItem.focus()
           return
         }
 
-        if (event.key === 'ArrowUp') {
-          if (isSearch || sectionIndex === -1) return
-          if (itemIndex > 0) {
-            focusItem(sectionIndex, itemIndex - 1)
-            return
-          }
-          if (sectionIndex > 0) {
-            const prev = sections[sectionIndex - 1]
-            focusItem(sectionIndex - 1, prev.items.length - 1)
-            return
-          }
-          focusSearchInput()
+        if (activeIndex <= 0) {
+          event.preventDefault()
+          event.stopPropagation()
+          onFocusSearch?.()
+          return
         }
+        event.preventDefault()
+        event.stopPropagation()
+        items[activeIndex - 1]?.focus()
       }
 
       window.addEventListener('keydown', handleKeyDown)
       return () => window.removeEventListener('keydown', handleKeyDown)
-    }, [
-      isActive,
-      isSearchActive,
-      sectionExpanded.triggers,
-      sectionExpanded.blocks,
-      sectionExpanded.tools,
-    ])
+    }, [isActive, onFocusSearch])
 
     return (
-      <div
-        ref={rootRef}
-        data-toolbar-root
-        data-search-active={isSearchActive ? 'true' : 'false'}
-        className='flex h-full flex-col'
-      >
-        {/* Header */}
+      <div ref={rootRef} data-toolbar-root className='relative flex h-full min-h-0 flex-col'>
         <div
-          role='button'
-          tabIndex={0}
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
-          onClick={focusSearch}
-          onKeyDown={(event) => handleKeyboardActivation(event, focusSearch)}
+          ref={scrollContainerRef}
+          className='scrollbar-none h-full overflow-y-auto overflow-x-hidden overscroll-none px-1.5 pb-12'
         >
-          <h2 className='text-[var(--text-primary)] text-sm'>Toolbar</h2>
-          <div className='flex shrink-0 items-center gap-2'>
-            {!isSearchActive ? (
-              <Button
-                variant='ghost'
-                className='p-0'
-                aria-label='Search toolbar'
-                onClick={focusSearch}
-              >
-                <Search className='size-[14px]' />
-              </Button>
-            ) : (
-              <input
-                ref={searchInputRef}
-                type='text'
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onBlur={handleSearchBlur}
-                className='w-full border-none bg-transparent pr-0.5 text-right text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
+          {hasVisibleResults ? (
+            <div className='flex flex-col'>
+              <ToolbarSection
+                label='Triggers'
+                items={filteredTriggers}
+                isTrigger={true}
+                showWorkflowAccent={false}
+                forceExpanded={forceSectionsExpanded}
+                scrollContainerRef={scrollContainerRef}
+                onDragStart={handleDragStart}
+                onItemClick={handleItemClick}
+                onContextMenu={handleItemContextMenu}
               />
-            )}
-          </div>
-        </div>
-
-        {/* Single scroll container with three collapsible sections */}
-        <div className='flex flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-none pb-3'>
-          <ToolbarSection
-            label='Triggers'
-            tooltip='Events that start a workflow'
-            sectionKey='triggers'
-            items={filteredTriggers}
-            isTrigger={true}
-            expanded={sectionExpanded.triggers}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getTriggerRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
-          <ToolbarSection
-            label='Core Blocks'
-            tooltip='Core building blocks for agent logic'
-            sectionKey='blocks'
-            items={filteredBlocks}
-            isTrigger={false}
-            expanded={sectionExpanded.blocks}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getBlockRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
-          {allCustomBlocks.length > 0 && (
-            <ToolbarSection
-              label='Custom Blocks'
-              tooltip='Workflows published as reusable blocks across your organization'
-              sectionKey='customBlocks'
-              items={filteredCustomBlocks}
-              isTrigger={false}
-              expanded={sectionExpanded.customBlocks}
-              searching={isSearching}
-              animate={animationsEnabled}
-              onToggle={handleSectionToggle}
-              getItemRef={getCustomBlockRefCallback}
-              onDragStart={handleDragStart}
-              onItemClick={handleItemClick}
-              onContextMenu={handleItemContextMenu}
-            />
+              <ToolbarSection
+                label='Core Blocks'
+                items={filteredBlocks}
+                isTrigger={false}
+                showWorkflowAccent
+                forceExpanded={forceSectionsExpanded}
+                scrollContainerRef={scrollContainerRef}
+                onDragStart={handleDragStart}
+                onItemClick={handleItemClick}
+                onContextMenu={handleItemContextMenu}
+              />
+              <ToolbarSection
+                label='Integrations'
+                items={filteredTools}
+                isTrigger={false}
+                showWorkflowAccent={false}
+                forceExpanded={forceSectionsExpanded}
+                scrollContainerRef={scrollContainerRef}
+                onDragStart={handleDragStart}
+                onItemClick={handleItemClick}
+                onContextMenu={handleItemContextMenu}
+              />
+              <ToolbarSection
+                label='Custom'
+                items={filteredCustomBlocks}
+                isTrigger={false}
+                showWorkflowAccent
+                forceExpanded={forceSectionsExpanded}
+                scrollContainerRef={scrollContainerRef}
+                onDragStart={handleDragStart}
+                onItemClick={handleItemClick}
+                onContextMenu={handleItemContextMenu}
+              />
+            </div>
+          ) : (
+            <div className='flex items-center justify-center px-4 py-8 text-center text-[var(--text-subtle)] text-sm'>
+              No blocks found.
+            </div>
           )}
-          <ToolbarSection
-            label='Integrations'
-            tooltip='Connect agents to external services'
-            sectionKey='tools'
-            items={filteredTools}
-            isTrigger={false}
-            expanded={sectionExpanded.tools}
-            searching={isSearching}
-            animate={animationsEnabled}
-            onToggle={handleSectionToggle}
-            getItemRef={getToolRefCallback}
-            onDragStart={handleDragStart}
-            onItemClick={handleItemClick}
-            onContextMenu={handleItemContextMenu}
-          />
         </div>
 
-        {/* Toolbar Item Context Menu */}
+        <ScrollEdgeFade position='bottom' variant='panel' />
+
         <ToolbarItemContextMenu
           isOpen={isContextMenuOpen}
           position={contextMenuPosition}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts
index fbecf8be6f7..83a56e682f8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts
@@ -1,21 +1,35 @@
+import { type KeyboardEvent, useEffect, useState } from 'react'
 import { useDragResize } from '@/hooks/use-drag-resize'
-import { CONTENT_WINDOW_GAP, PANEL_WIDTH } from '@/stores/constants'
+import { PANEL_WIDTH } from '@/stores/constants'
 import { usePanelStore } from '@/stores/panel'
 
+const PANEL_RESIZE_STEP = 16
+
+function getPanelMaxWidth(): number {
+  return Math.max(PANEL_WIDTH.MIN, window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE)
+}
+
+function clampPanelWidth(width: number, maxWidth: number): number {
+  return Math.min(Math.max(width, PANEL_WIDTH.MIN), maxWidth)
+}
+
 /**
  * Computes the clamped panel width for a pointer position. The maximum is
  * floored at the minimum so a narrow viewport can never invert the clamp
  * and force the panel below {@link PANEL_WIDTH.MIN}.
  */
 function computePanelWidth(ev: PointerEvent): number {
-  const maxWidth = Math.max(PANEL_WIDTH.MIN, window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE)
-  const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - ev.clientX
-  return Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth)
+  const maxWidth = getPanelMaxWidth()
+  const panelRight =
+    document.querySelector<HTMLElement>('.panel-container')?.getBoundingClientRect().right ??
+    window.innerWidth
+  const newWidth = panelRight - ev.clientX
+  return clampPanelWidth(newWidth, maxWidth)
 }
 
-/** The `.panel-container` element sizes itself from `--panel-width`. */
-function getPanelContainer(): HTMLElement | null {
-  return document.querySelector<HTMLElement>('.panel-container')
+/** The docked canvas shell and panel both size themselves from `--panel-width`. */
+function getPanelResizeTarget(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('.workflow-canvas-shell')
 }
 
 /**
@@ -29,22 +43,67 @@ function getToastViewport(): (HTMLElement | null)[] {
 
 /**
  * Handles panel drag-resize with zero React renders during the drag. The
- * `--panel-width` variable is written to `.panel-container` (a scoped style
- * recalc) rather than `:root` (a whole-document recalc), and the final width
+ * `--panel-width` variable is written to `.workflow-canvas-shell` (a scoped style
+ * recalc shared by the canvas and panel) rather than `:root`, and the final width
  * is committed to the store (one re-render + one localStorage write) when the
  * drag ends.
  *
  * @returns Pointer-down handler for the resize handle
  */
 export function usePanelResize() {
+  const panelWidth = usePanelStore((s) => s.panelWidth)
   const setPanelWidth = usePanelStore((s) => s.setPanelWidth)
+  const [maxPanelWidth, setMaxPanelWidth] = useState<number | null>(null)
+
+  useEffect(() => {
+    const updateMaxPanelWidth = () => {
+      const nextMaxPanelWidth = getPanelMaxWidth()
+      setMaxPanelWidth(nextMaxPanelWidth)
 
-  return useDragResize({
+      const currentWidth = usePanelStore.getState().panelWidth
+      if (currentWidth > nextMaxPanelWidth) {
+        setPanelWidth(nextMaxPanelWidth)
+      }
+    }
+
+    updateMaxPanelWidth()
+    window.addEventListener('resize', updateMaxPanelWidth)
+    return () => window.removeEventListener('resize', updateMaxPanelWidth)
+  }, [setPanelWidth])
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const currentMaxPanelWidth = maxPanelWidth ?? getPanelMaxWidth()
+    let nextWidth: number
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        nextWidth = panelWidth + PANEL_RESIZE_STEP
+        break
+      case 'ArrowRight':
+        nextWidth = panelWidth - PANEL_RESIZE_STEP
+        break
+      case 'Home':
+        nextWidth = PANEL_WIDTH.MIN
+        break
+      case 'End':
+        nextWidth = currentMaxPanelWidth
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    setPanelWidth(clampPanelWidth(nextWidth, currentMaxPanelWidth))
+  }
+
+  const { handlePointerDown } = useDragResize({
     cursor: 'ew-resize',
     cssVar: '--panel-width',
-    getTarget: getPanelContainer,
+    getTarget: getPanelResizeTarget,
     getExtraTargets: getToastViewport,
     compute: computePanelWidth,
     commit: setPanelWidth,
   })
+
+  return { handleKeyDown, handlePointerDown, maxPanelWidth, panelWidth }
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index c8a924870fe..1dbe40cc898 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -1,56 +1,11 @@
 'use client'
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  BubbleChatClose,
-  BubbleChatPreview,
-  Button,
-  Chip,
-  ChipConfirmModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Duplicate,
-  Layout,
-  MoreHorizontal,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverScrollArea,
-  PopoverSection,
-  PopoverTrigger,
-  Trash,
-  toast,
-} from '@sim/emcn'
-import { BubbleChatDelay, Download, Lock, Plus, Unlock } from '@sim/emcn/icons'
-import { createLogger } from '@sim/logger'
-import { toError } from '@sim/utils/errors'
-import { useQueryClient } from '@tanstack/react-query'
-import { useParams, useRouter } from 'next/navigation'
-import { usePostHog } from 'posthog-js/react'
-import { useShallow } from 'zustand/react/shallow'
-import { VariableIcon } from '@/components/icons'
+import { memo, useCallback, useRef } from 'react'
+import { Chip, cn, toast } from '@sim/emcn'
+import { useParams } from 'next/navigation'
 import { ThinkingLoader } from '@/components/ui'
-import { requestJson } from '@/lib/api/client/request'
-import {
-  createWorkflowCopilotChatContract,
-  deleteCopilotChatContract,
-} from '@/lib/api/contracts/copilot'
-import { getWorkflowNormalizedStateContract } from '@/lib/api/contracts/workflows'
 import { useSession } from '@/lib/auth/auth-client'
 import { getWorkspaceUsageLimitAction } from '@/lib/billing/workspace-permissions'
-import { isChatEnabled } from '@/lib/core/config/env-flags'
-import {
-  MOTHERSHIP_SEND_MESSAGE_EVENT,
-  type MothershipSendMessageDetail,
-} from '@/lib/mothership/events'
-import { captureEvent } from '@/lib/posthog/client'
-import { generateWorkflowJson } from '@/lib/workflows/operations/import-export'
-import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
-import { MothershipChat } from '@/app/workspace/[workspaceId]/home/components'
-import { getWorkflowCopilotUseChatOptions, useChat } from '@/app/workspace/[workspaceId]/home/hooks'
-import type { FileAttachmentForApi } from '@/app/workspace/[workspaceId]/home/types'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -58,6 +13,8 @@ import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-uti
 import {
   Deploy,
   Editor,
+  EditorPanelActions,
+  PanelViewControls,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
 import {
@@ -65,133 +22,53 @@ import {
   useUsageLimits,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks'
 import { Variables } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables'
-import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-auto-layout'
-import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow'
-import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
-import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
-import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
-import { useCopilotChatSelection } from '@/hooks/queries/copilot-chat-selection'
 import {
-  type CopilotChatListItem,
-  copilotChatsKeys,
-  useCopilotChats,
-} from '@/hooks/queries/copilot-chats'
+  WorkflowControls,
+  WorkflowHistoryControls,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls'
+import { WorkflowOptionsMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-options-menu'
+import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import { useFolderMap } from '@/hooks/queries/folders'
 import { isWorkflowEffectivelyLocked } from '@/hooks/queries/utils/folder-tree'
-import { useDuplicateWorkflowMutation, useWorkflowMap } from '@/hooks/queries/workflows'
-import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
-import { usePermissionConfig } from '@/hooks/use-permission-config'
+import { useWorkflowMap } from '@/hooks/queries/workflows'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
-import { useChatStore } from '@/stores/chat/store'
-import type { ChatContext, PanelTab } from '@/stores/panel'
-import { usePanelStore } from '@/stores/panel'
-import { useVariablesModalStore } from '@/stores/variables/modal'
-import { useVariablesStore } from '@/stores/variables/store'
-import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
-import { captureBaselineSnapshot } from '@/stores/workflow-diff/utils'
-import { getWorkflowWithValues } from '@/stores/workflows'
+import { PANEL_WIDTH } from '@/stores/constants'
+import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
-const logger = createLogger('Panel')
-const EMPTY_COPILOT_CHATS: readonly CopilotChatListItem[] = []
+interface PanelProps {
+  onCloseEditor?: () => void
+}
+
 /**
- * Panel component with resizable width and tab navigation that persists across page refreshes.
- *
- * Uses a CSS-based approach to prevent hydration mismatches and flash on load:
- * 1. Width is controlled by CSS variable (--panel-width)
- * 2. Blocking script in layout.tsx sets CSS variable and data-panel-active-tab before React hydrates
- * 3. CSS rules control initial visibility based on data-panel-active-tab attribute
- * 4. React takes over visibility control after hydration completes
- * 5. Store updates CSS variable when width changes
- *
- * This ensures server and client render identical HTML, preventing hydration errors and visual flash.
- *
- * Note: All tabs are kept mounted but hidden to preserve component state during tab switches.
- * This prevents unnecessary remounting which would trigger data reloads and reset state.
+ * Workflow header and contextual right panel. Toolbar and Editor remain independently
+ * available so users can browse blocks without losing their current canvas selection.
  *
- * @returns Panel on the right side of the workflow
+ * @returns Structured workflow chrome around the canvas
  */
-export const Panel = memo(function Panel() {
-  const router = useRouter()
+export const Panel = memo(function Panel({ onCloseEditor }: PanelProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
 
-  const posthog = usePostHog()
-  const posthogRef = useRef(posthog)
-
   const panelRef = useRef<HTMLElement>(null)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const {
-    activeTab: storedActiveTab,
-    setActiveTab,
-    _hasHydrated,
-    setHasHydrated,
-  } = usePanelStore(
-    useShallow((state) => ({
-      activeTab: state.activeTab,
-      setActiveTab: state.setActiveTab,
-      _hasHydrated: state._hasHydrated,
-      setHasHydrated: state.setHasHydrated,
-    }))
-  )
+  const activeTab = usePanelStore((state) => state.activeTab)
+  const setActiveTab = usePanelStore((state) => state.setActiveTab)
+  const toolbarSearchInputRef = useRef<HTMLInputElement>(null)
   const toolbarRef = useRef<{
-    focusSearch: () => void
+    focusFirstItem: () => void
+    setSearchQuery: (query: string) => void
   } | null>(null)
   const { data: session } = useSession()
   const hostContext = useWorkspaceHostContext()
 
-  // State
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isAutoLayouting, setIsAutoLayouting] = useState(false)
-  const [isExporting, setIsExporting] = useState(false)
-  const [isDuplicating, setIsDuplicating] = useState(false)
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
-
   // Hooks
   const userPermissions = useUserPermissionsContext()
-  const { config: permissionConfig } = usePermissionConfig()
 
-  /**
-   * The Chat tab is hidden when the deployment has Chat off, or when the user's
-   * permission group hides it. Tab bodies stay mounted and are toggled with
-   * `hidden`, so a persisted `activeTab: 'copilot'` would hide all three and
-   * paint an empty panel — resolve it to the toolbar instead.
-   */
-  const isCopilotTabAvailable = isChatEnabled && !permissionConfig.hideCopilot
-  const activeTab: PanelTab =
-    storedActiveTab === 'copilot' && !isCopilotTabAvailable ? 'toolbar' : storedActiveTab
-  const { isImporting, handleFileChange } = useImportWorkflow({ workspaceId })
-  const duplicateWorkflowMutation = useDuplicateWorkflowMutation()
   const { data: workflows = {} } = useWorkflowMap(workspaceId)
   const { data: folders = {} } = useFolderMap(workspaceId)
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-  const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null)
-
-  // Check for locked blocks (disables auto-layout)
-  const hasLockedBlocks = useWorkflowStore((state) =>
-    Object.values(state.blocks).some((block) => block.locked)
-  )
-
-  const allBlocksLocked = useWorkflowStore((state) => {
-    const blockList = Object.values(state.blocks)
-    return blockList.length > 0 && blockList.every((block) => block.locked)
-  })
-
-  const hasBlocks = useWorkflowStore((state) => Object.keys(state.blocks).length > 0)
-
-  const { collaborativeBatchToggleLocked } = useCollaborativeWorkflow()
   const { navigateToSettings } = useSettingsNavigation()
 
-  // Delete workflow hook
-  const { isDeleting, handleDeleteWorkflow } = useDeleteWorkflow({
-    workspaceId,
-    workflowIds: activeWorkflowId || '',
-    isActive: true,
-    onSuccess: () => setIsDeleteModalOpen(false),
-  })
-
   // Usage limits hook
   const {
     usageExceeded,
@@ -204,7 +81,7 @@ export const Panel = memo(function Panel() {
   const { handleRunWorkflow, handleCancelExecution, isExecuting } = useWorkflowExecution()
 
   // Panel resize hook
-  const { handlePointerDown } = usePanelResize()
+  const { handleKeyDown, handlePointerDown, maxPanelWidth, panelWidth } = usePanelResize()
 
   /**
    * Opens subscription settings modal
@@ -249,395 +126,34 @@ export const Panel = memo(function Panel() {
     handleRunWorkflow,
   ])
 
-  // Chat state
-  const { isChatOpen, setIsChatOpen } = useChatStore(
-    useShallow((state) => ({
-      isChatOpen: state.isChatOpen,
-      setIsChatOpen: state.setIsChatOpen,
-    }))
-  )
-  const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesModalStore(
-    useShallow((state) => ({
-      isOpen: state.isOpen,
-      setIsOpen: state.setIsOpen,
-    }))
-  )
-
   const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
   const workflowLocked = isWorkflowEffectivelyLocked(currentWorkflow, folders)
-  const canMutateWorkflow = userPermissions.canEdit && !workflowLocked
-  const { isSnapshotView } = useCurrentWorkflow()
-
-  const { chatId: copilotChatId, setChatId: setCopilotChatId } = useCopilotChatSelection(
-    activeWorkflowId ?? undefined
-  )
-
-  const { data: copilotChatList = EMPTY_COPILOT_CHATS } = useCopilotChats(
-    isCopilotTabAvailable ? (activeWorkflowId ?? undefined) : undefined
-  )
-  const [isCopilotHistoryOpen, setIsCopilotHistoryOpen] = useState(false)
-
-  const copilotChatTitle = useMemo(
-    () =>
-      copilotChatId ? (copilotChatList.find((c) => c.id === copilotChatId)?.title ?? null) : null,
-    [copilotChatId, copilotChatList]
-  )
-
-  const queryClient = useQueryClient()
-  const loadCopilotChats = useCallback(() => {
-    if (!activeWorkflowId) return
-    queryClient.invalidateQueries({ queryKey: copilotChatsKeys.list(activeWorkflowId) })
-  }, [activeWorkflowId, queryClient])
-
-  // Auto-select most recent on first list arrival per workflow, and drop a
-  // selection that no longer matches anything in the current list (e.g. the
-  // chat was deleted in another tab).
-  const autoSelectAttemptedForRef = useRef<Set<string>>(new Set())
-  useEffect(() => {
-    // The list query is skipped when the tab is unavailable, so an empty list
-    // there means "not fetched", not "deleted elsewhere" — clearing on it would
-    // discard the selection and latch the ref against ever restoring it.
-    if (!activeWorkflowId || !isCopilotTabAvailable) return
-
-    if (copilotChatId && !copilotChatList.find((c) => c.id === copilotChatId)) {
-      setCopilotChatId(undefined)
-      return
-    }
-
-    if (copilotChatId) return
-    if (autoSelectAttemptedForRef.current.has(activeWorkflowId)) return
-    if (copilotChatList.length === 0) return
-    autoSelectAttemptedForRef.current.add(activeWorkflowId)
-    setCopilotChatId(copilotChatList[0].id)
-  }, [copilotChatList, copilotChatId, activeWorkflowId, isCopilotTabAvailable, setCopilotChatId])
-
-  useEffect(() => {
-    posthogRef.current = posthog
-  }, [posthog])
-
-  const handleCopilotSelectChat = useCallback(
-    (chat: { id: string; title: string | null }) => {
-      setCopilotChatId(chat.id)
-      setIsCopilotHistoryOpen(false)
-    },
-    [setCopilotChatId]
-  )
-
-  const handleCopilotDeleteChat = useCallback(
-    (chatId: string) => {
-      requestJson(deleteCopilotChatContract, { body: { chatId } })
-        .then(() => {
-          if (copilotChatId === chatId) {
-            setCopilotChatId(undefined)
-          }
-          loadCopilotChats()
-        })
-        .catch((err) => {
-          logger.error('Failed to delete copilot chat', { error: toError(err).message, chatId })
-        })
-    },
-    [copilotChatId, loadCopilotChats, setCopilotChatId]
-  )
-
-  const handleCopilotToolResult = useCallback(
-    (toolName: string, success: boolean, _output: unknown) => {
-      if (toolName !== 'edit_workflow' || !success) return
-      const workflowId = activeWorkflowId || useWorkflowRegistry.getState().activeWorkflowId
-      if (!workflowId) return
-
-      const baselineWorkflow = captureBaselineSnapshot(workflowId)
-
-      requestJson(getWorkflowNormalizedStateContract, { params: { id: workflowId } })
-        .then((freshState) => {
-          const diffStore = useWorkflowDiffStore.getState()
-          return diffStore.setProposedChanges(freshState as WorkflowState, undefined, {
-            baselineWorkflow,
-            skipPersist: true,
-          })
-        })
-        .catch((err) => {
-          logger.error('Failed to fetch/apply edit_workflow state', {
-            error: toError(err).message,
-            workflowId,
-          })
-        })
-    },
-    [activeWorkflowId]
-  )
-
-  const {
-    messages: copilotMessages,
-    isSending: copilotIsSending,
-    isReconnecting: copilotIsReconnecting,
-    sendMessage: copilotSendMessage,
-    stopGeneration: copilotStopGeneration,
-    resolvedChatId: copilotResolvedChatId,
-    messageQueue: copilotMessageQueue,
-    removeFromQueue: copilotRemoveFromQueue,
-    sendNow: copilotSendNow,
-    editQueuedMessage: copilotEditQueuedMessage,
-    cancelQueueEdit: copilotCancelQueueEdit,
-    editingQueuedId: copilotEditingQueuedId,
-    dispatchingHeadId: copilotDispatchingHeadId,
-  } = useChat(
-    workspaceId,
-    copilotChatId,
-    getWorkflowCopilotUseChatOptions({
-      workflowId: activeWorkflowId || undefined,
-      onTitleUpdate: loadCopilotChats,
-      onToolResult: handleCopilotToolResult,
-      onRequestStarted: ({ requestId, userMessageId }) => {
-        captureEvent(posthogRef.current, 'task_request_started', {
-          workspace_id: workspaceId,
-          view: 'copilot',
-          request_id: requestId,
-          user_message_id: userMessageId,
-        })
-      },
-    })
-  )
-
-  const handleCopilotNewChat = useCallback(() => {
-    if (!activeWorkflowId || !workspaceId) return
-    requestJson(createWorkflowCopilotChatContract, {
-      body: { workspaceId, workflowId: activeWorkflowId },
-    })
-      .then((data) => {
-        // Seed the new chat into the list cache before selecting it. Without this, the
-        // auto-select effect sees a selected id that isn't in the (still-stale) list and
-        // deselects it, which leaves the panel detached from the freshly created row.
-        queryClient.setQueryData<CopilotChatListItem[]>(
-          copilotChatsKeys.list(activeWorkflowId),
-          (prev) => [
-            {
-              id: data.id,
-              title: null,
-              workflowId: activeWorkflowId,
-              updatedAt: new Date().toISOString(),
-              activeStreamId: null,
-            },
-            ...(prev ?? []),
-          ]
-        )
-        setCopilotChatId(data.id)
-        loadCopilotChats()
-      })
-      .catch((err) => {
-        logger.error('Failed to create copilot chat', { error: toError(err).message })
-      })
-  }, [activeWorkflowId, workspaceId, loadCopilotChats, setCopilotChatId, queryClient])
 
-  const prevResolvedRef = useRef<string | undefined>(undefined)
-  useEffect(() => {
-    if (
-      copilotResolvedChatId &&
-      copilotResolvedChatId !== prevResolvedRef.current &&
-      !copilotChatId
-    ) {
-      prevResolvedRef.current = copilotResolvedChatId
-      setCopilotChatId(copilotResolvedChatId)
-      loadCopilotChats()
+  const handleCloseEditor = useCallback(() => {
+    if (onCloseEditor) {
+      onCloseEditor()
     } else {
-      prevResolvedRef.current = copilotResolvedChatId
+      usePanelEditorStore.getState().clearCurrentBlock()
     }
-  }, [copilotResolvedChatId, copilotChatId, loadCopilotChats, setCopilotChatId])
-
-  const wasCopilotSendingRef = useRef(false)
-  useEffect(() => {
-    if (wasCopilotSendingRef.current && !copilotIsSending) {
-      loadCopilotChats()
-    }
-    wasCopilotSendingRef.current = copilotIsSending
-  }, [copilotIsSending, loadCopilotChats])
-
-  const handleCopilotStopGeneration = useCallback(() => {
-    captureEvent(posthogRef.current, 'task_generation_aborted', {
-      workspace_id: workspaceId,
-      view: 'copilot',
-    })
-    copilotStopGeneration()
-  }, [copilotStopGeneration, workspaceId])
+  }, [onCloseEditor])
 
-  const handleCopilotSubmit = useCallback(
-    (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
-      const trimmed = text.trim()
-      if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
-      copilotSendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
-    },
-    [copilotSendMessage]
-  )
-
-  /**
-   * Mark hydration as complete on mount
-   * This allows React to take over visibility control from CSS
-   */
-  useEffect(() => {
-    setHasHydrated(true)
-  }, [setHasHydrated])
+  const handleFocusToolbarSearch = useCallback(() => {
+    setActiveTab('toolbar')
+    requestAnimationFrame(() => toolbarSearchInputRef.current?.focus())
+  }, [setActiveTab])
 
-  /**
-   * Only claims handoffs while the Chat tab can actually receive them. The
-   * handler's `preventDefault()` is what tells `sendMothershipMessage` a host
-   * consumed the message, so listening with the tab hidden would swallow it and
-   * skip the caller's own fallback.
-   */
-  useEffect(() => {
-    if (!isCopilotTabAvailable) return
-
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent<MothershipSendMessageDetail>).detail
-      if (!detail?.message) return
-      e.preventDefault()
-      setActiveTab('copilot')
-      copilotSendMessage(detail.message, detail.fileAttachments, detail.contexts, {
-        ...(detail.resumeUserMessageId ? { resumeUserMessageId: detail.resumeUserMessageId } : {}),
-      })
-    }
-    window.addEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
-    return () => window.removeEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
-  }, [isCopilotTabAvailable, setActiveTab, copilotSendMessage])
-
-  useEffect(() => {
-    if (activeTab !== 'copilot') return
-    const id = window.setTimeout(() => {
-      const textarea = document.querySelector<HTMLTextAreaElement>(
-        "[data-tab-content='copilot'] textarea"
-      )
-      textarea?.focus()
-    }, 0)
-    return () => window.clearTimeout(id)
-  }, [activeTab])
-
-  /**
-   * Handles tab click events
-   */
-  const handleTabClick = (tab: PanelTab) => {
-    setActiveTab(tab)
-  }
-
-  /**
-   * Downloads a file with the given content
-   */
-  const downloadFile = useCallback((content: string, filename: string, mimeType: string) => {
-    try {
-      const blob = 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)
-    }
+  const handleToolbarSearchChange = useCallback((query: string) => {
+    toolbarRef.current?.setSearchQuery(query)
   }, [])
 
-  /**
-   * Handles auto-layout of workflow blocks
-   */
-  const handleAutoLayout = useCallback(async () => {
-    if (isExecuting || !canMutateWorkflow || isAutoLayouting) {
-      return
-    }
-
-    setIsAutoLayouting(true)
-    try {
-      const result = await autoLayoutWithFitView()
-      if (!result.success && result.error) {
-        toast({ message: result.error })
-      }
-    } finally {
-      setIsAutoLayouting(false)
-    }
-  }, [isExecuting, canMutateWorkflow, isAutoLayouting, autoLayoutWithFitView])
-
-  /**
-   * Handles exporting workflow as JSON
-   */
-  const handleExportJson = useCallback(async () => {
-    if (!currentWorkflow || !activeWorkflowId) {
-      logger.warn('No active workflow to export')
-      return
-    }
-
-    setIsExporting(true)
-    try {
-      const workflow = getWorkflowWithValues(activeWorkflowId, workspaceId)
-
-      if (!workflow || !workflow.state) {
-        throw new Error('No workflow state found')
-      }
-
-      const workflowVariables = useVariablesStore
-        .getState()
-        .getVariablesByWorkflowId(activeWorkflowId)
-
-      const jsonContent = generateWorkflowJson(workflow.state, {
-        workflowId: activeWorkflowId,
-        name: currentWorkflow.name,
-        description: currentWorkflow.description,
-        variables: workflowVariables.map((v) => ({
-          id: v.id,
-          name: v.name,
-          type: v.type,
-          value: v.value,
-        })),
-      })
-
-      const filename = `${currentWorkflow.name.replace(/[^a-z0-9]/gi, '-')}.json`
-      downloadFile(jsonContent, filename, 'application/json')
-      logger.info('Workflow exported as JSON')
-    } catch (error) {
-      logger.error('Failed to export workflow as JSON:', error)
-    } finally {
-      setIsExporting(false)
-      setIsMenuOpen(false)
-    }
-  }, [currentWorkflow, activeWorkflowId, downloadFile])
-
-  /**
-   * Handles duplicating the current workflow
-   */
-  const handleDuplicateWorkflow = useCallback(async () => {
-    if (!activeWorkflowId || !userPermissions.canEdit || isDuplicating) {
-      return
-    }
-
-    const sourceWorkflow = workflows[activeWorkflowId]
-    if (!sourceWorkflow) return
-
-    setIsDuplicating(true)
-    try {
-      const result = await duplicateWorkflowMutation.mutateAsync({
-        workspaceId,
-        sourceId: activeWorkflowId,
-        name: `${sourceWorkflow.name} (Copy)`,
-        description: sourceWorkflow.description,
-        folderId: sourceWorkflow.folderId,
-      })
-      if (result?.id) {
-        router.push(`/workspace/${workspaceId}/w/${result.id}`)
-      }
-    } catch (error) {
-      logger.error('Error duplicating workflow:', error)
-    } finally {
-      setIsDuplicating(false)
-      setIsMenuOpen(false)
-    }
-  }, [activeWorkflowId, userPermissions.canEdit, isDuplicating, workflows, router, workspaceId])
+  const handleToolbarSearchNavigate = useCallback(() => {
+    toolbarRef.current?.focusFirstItem()
+  }, [])
 
-  /**
-   * Toggles the locked state of all blocks in the workflow
-   */
-  const handleToggleWorkflowLock = useCallback(() => {
-    const blocks = useWorkflowStore.getState().blocks
-    const allLocked = Object.values(blocks).every((b) => b.locked)
-    const ids = getWorkflowLockToggleIds(blocks, !allLocked)
-    if (ids.length > 0) collaborativeBatchToggleLocked(ids)
-    setIsMenuOpen(false)
-  }, [collaborativeBatchToggleLocked])
+  const handleEditorSelect = useCallback(() => {
+    toolbarSearchInputRef.current?.blur()
+    setActiveTab('editor')
+  }, [setActiveTab])
 
   // Compute run button state
   const canRun = userPermissions.canRead // Running only requires read permissions
@@ -670,10 +186,7 @@ export const Panel = memo(function Panel() {
       },
       {
         id: 'focus-toolbar-search',
-        handler: () => {
-          setActiveTab('toolbar')
-          toolbarRef.current?.focusSearch()
-        },
+        handler: handleFocusToolbarSearch,
         overrides: {
           allowInEditable: false,
         },
@@ -683,330 +196,111 @@ export const Panel = memo(function Panel() {
 
   return (
     <>
-      <aside
-        ref={panelRef}
-        className='panel-container relative shrink-0 overflow-hidden bg-[var(--bg)]'
-        aria-label='Workflow panel'
-      >
-        <div className='flex h-full flex-col border-[var(--border)] border-l pt-3.5'>
-          {/* Header */}
-          <div className='flex flex-shrink-0 items-center justify-between px-2'>
-            {/* More and Chat */}
-            <div className='flex gap-1.5'>
-              <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-                <DropdownMenuTrigger asChild>
-                  <Button className='size-[30px] rounded-[5px]'>
-                    <MoreHorizontal className='size-[14px]' />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align='start' side='bottom' sideOffset={8}>
-                  <DropdownMenuItem
-                    onSelect={handleAutoLayout}
-                    disabled={
-                      isExecuting || !canMutateWorkflow || isAutoLayouting || hasLockedBlocks
-                    }
-                    title={hasLockedBlocks ? 'Unlock blocks to use auto-layout' : undefined}
-                  >
-                    <Layout animate={isAutoLayouting} variant='clockwise' />
-                    Auto layout
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={() => setVariablesOpen(!isVariablesOpen)}>
-                    <VariableIcon />
-                    Variables
-                  </DropdownMenuItem>
-                  {userPermissions.canAdmin && !isSnapshotView && (
-                    <DropdownMenuItem
-                      onSelect={handleToggleWorkflowLock}
-                      disabled={!hasBlocks || workflowLocked}
-                      title={
-                        workflowLocked
-                          ? 'Workflow is locked at the row or folder level — release it from the workflow notification or folder menu'
-                          : undefined
-                      }
-                    >
-                      {allBlocksLocked ? <Unlock /> : <Lock />}
-                      {allBlocksLocked ? 'Unlock workflow' : 'Lock workflow'}
-                    </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem
-                    onSelect={handleExportJson}
-                    disabled={!userPermissions.canEdit || isExporting || !currentWorkflow}
-                  >
-                    <Download />
-                    Export workflow
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={handleDuplicateWorkflow}
-                    disabled={!userPermissions.canEdit || isDuplicating}
-                  >
-                    <Duplicate />
-                    Duplicate workflow
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setIsDeleteModalOpen(true)
-                    }}
-                    disabled={!canMutateWorkflow || Object.keys(workflows).length <= 1}
-                  >
-                    <Trash />
-                    Delete workflow
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <Button
-                className='size-[30px] rounded-[5px]'
-                variant={isChatOpen ? 'active' : 'default'}
-                onClick={() => setIsChatOpen(!isChatOpen)}
-              >
-                {isChatOpen ? <BubbleChatClose /> : <BubbleChatPreview />}
-              </Button>
-            </div>
-
-            {/* Deploy and Run */}
-            <div className='flex gap-1.5'>
-              <Deploy
-                activeWorkflowId={activeWorkflowId}
-                userPermissions={userPermissions}
-                disabled={workflowLocked}
-              />
-              <Chip
-                variant={isExecuting ? undefined : 'primary'}
-                active={isExecuting}
-                onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
-                disabled={!isExecuting && isButtonDisabled}
-                aria-label={isExecuting ? 'Stop' : 'Run'}
-                leftAdornment={
-                  <span
-                    aria-hidden='true'
-                    className='inline-flex size-5 flex-shrink-0 items-center justify-center overflow-visible'
-                  >
-                    <ThinkingLoader
-                      variant={isExecuting ? undefined : 'play'}
-                      startVariant='play'
-                      startHoldMs={140}
-                      size={20}
-                      morphDurationMs={isExecuting ? 650 : 180}
-                      tone='inherit'
-                    />
-                  </span>
-                }
-              >
-                <span className='inline-grid'>
-                  <span aria-hidden='true' className='invisible col-start-1 row-start-1'>
-                    Stop
-                  </span>
-                  <span className='col-start-1 row-start-1'>{isExecuting ? 'Stop' : 'Run'}</span>
-                </span>
-              </Chip>
-            </div>
+      <header className='workflow-header pointer-events-none absolute top-0 right-[var(--panel-width)] left-0 z-30 flex h-[40px] items-stretch border-[var(--border)] border-b'>
+        <div className='pointer-events-auto flex min-w-0 flex-1 items-center gap-3 bg-[var(--bg)] px-3'>
+          <div className='flex min-w-0 flex-1 items-center gap-1'>
+            <h1 className='min-w-0 truncate text-[var(--text-body)] text-sm'>
+              {currentWorkflow?.name ?? 'Untitled workflow'}
+            </h1>
+            <WorkflowOptionsMenu isExecuting={isExecuting} />
           </div>
-
-          {/* Tabs */}
-          <div className='flex flex-shrink-0 items-center justify-between px-2 pt-3.5'>
-            <div className='flex gap-1'>
-              {isCopilotTabAvailable && (
-                <Button
-                  className={`h-[28px] truncate rounded-md border px-2 py-[5px] text-[12.5px] ${
-                    _hasHydrated && activeTab === 'copilot'
-                      ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
-                  }`}
-                  variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
-                  onClick={() => handleTabClick('copilot')}
-                  data-tab-button='copilot'
+          <WorkflowHistoryControls />
+          <WorkflowControls />
+          <div className='flex items-center gap-1.5'>
+            <Deploy
+              activeWorkflowId={activeWorkflowId}
+              userPermissions={userPermissions}
+              disabled={workflowLocked}
+            />
+            <Chip
+              variant={isExecuting ? undefined : 'primary'}
+              active={isExecuting}
+              onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
+              disabled={!isExecuting && isButtonDisabled}
+              aria-label={isExecuting ? 'Stop workflow' : 'Run workflow'}
+              leftAdornment={
+                <span
+                  aria-hidden='true'
+                  className='inline-flex size-[14px] flex-shrink-0 items-center justify-center overflow-visible'
                 >
-                  Chat
-                </Button>
-              )}
-              <Button
-                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'toolbar'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
-                onClick={() => handleTabClick('toolbar')}
-                data-tab-button='toolbar'
-              >
-                Toolbar
-              </Button>
-              <Button
-                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
-                  _hasHydrated && activeTab === 'editor'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
-                onClick={() => handleTabClick('editor')}
-                data-tab-button='editor'
-              >
-                Editor
-              </Button>
-            </div>
+                  <ThinkingLoader
+                    variant={isExecuting ? undefined : 'play'}
+                    startVariant='play'
+                    startHoldMs={140}
+                    size={14}
+                    morphDurationMs={isExecuting ? 650 : 180}
+                    tone='inherit'
+                  />
+                </span>
+              }
+            >
+              {isExecuting ? 'Stop' : 'Run'}
+            </Chip>
           </div>
-
-          {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}
-          <div className='flex-1 overflow-hidden pt-3'>
-            {isCopilotTabAvailable && (
+        </div>
+      </header>
+
+      <div className='workflow-right-tools pointer-events-none absolute top-0 right-0 bottom-0 z-20 flex w-[var(--panel-width)] [container-type:size]'>
+        <aside
+          ref={panelRef}
+          className='panel-container pointer-events-auto relative flex h-full min-h-0 w-full flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)]'
+          aria-label='Workflow panel'
+        >
+          <div className='flex h-full min-h-0 flex-col'>
+            <PanelViewControls
+              key={activeWorkflowId ?? 'workflow'}
+              activeTab={activeTab}
+              searchInputRef={toolbarSearchInputRef}
+              onSearchChange={handleToolbarSearchChange}
+              onSearchNavigate={handleToolbarSearchNavigate}
+              onToolbarSelect={handleFocusToolbarSearch}
+              onEditorSelect={handleEditorSelect}
+              editorActions={<EditorPanelActions onClose={handleCloseEditor} />}
+            />
+
+            <div className='min-h-0 flex-1 overflow-hidden'>
               <div
-                className={
-                  _hasHydrated && activeTab === 'copilot'
-                    ? 'flex h-full flex-col'
-                    : _hasHydrated
-                      ? 'hidden'
-                      : 'flex h-full flex-col'
-                }
-                data-tab-content='copilot'
+                data-tab-content='toolbar'
+                className={cn(
+                  'h-full min-h-0',
+                  activeTab === 'toolbar' ? 'flex flex-col' : 'hidden'
+                )}
               >
-                {/* Copilot Header */}
-                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
-                  <h2 className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-sm'>
-                    {copilotChatTitle || 'New Chat'}
-                  </h2>
-                  <div className='flex items-center gap-2'>
-                    <Button variant='ghost' className='p-0' onClick={handleCopilotNewChat}>
-                      <Plus className='size-[14px]' />
-                    </Button>
-                    <Popover
-                      open={isCopilotHistoryOpen}
-                      onOpenChange={(open) => {
-                        setIsCopilotHistoryOpen(open)
-                        if (open) loadCopilotChats()
-                      }}
-                    >
-                      <PopoverTrigger asChild>
-                        <Button variant='ghost' className='p-0'>
-                          <BubbleChatDelay className='size-[14px]' />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent align='end' side='bottom' sideOffset={8} maxHeight={280}>
-                        {copilotChatList.length === 0 ? (
-                          <div className='px-1.5 py-4 text-center text-caption text-muted-foreground'>
-                            No chats yet
-                          </div>
-                        ) : (
-                          <PopoverScrollArea>
-                            <PopoverSection className='pt-0'>Recent</PopoverSection>
-                            <div className='flex flex-col gap-0.5'>
-                              {copilotChatList.map((chat) => (
-                                <div key={chat.id} className='group'>
-                                  <PopoverItem
-                                    active={copilotChatId === chat.id}
-                                    onClick={() => handleCopilotSelectChat(chat)}
-                                  >
-                                    <ConversationListItem
-                                      title={chat.title || 'New Chat'}
-                                      isActive={Boolean(chat.activeStreamId)}
-                                      titleClassName='text-small'
-                                      actions={
-                                        <div
-                                          className={`flex flex-shrink-0 items-center gap-1 ${copilotChatId !== chat.id ? 'opacity-0 transition-opacity group-hover:opacity-100' : ''}`}
-                                        >
-                                          <Button
-                                            variant='ghost'
-                                            className='size-[16px] p-0'
-                                            onClick={(e) => {
-                                              e.stopPropagation()
-                                              handleCopilotDeleteChat(chat.id)
-                                            }}
-                                            aria-label='Delete chat'
-                                          >
-                                            <Trash className='size-[10px]' />
-                                          </Button>
-                                        </div>
-                                      }
-                                    />
-                                  </PopoverItem>
-                                </div>
-                              ))}
-                            </div>
-                          </PopoverScrollArea>
-                        )}
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                </div>
-
-                <MothershipChat
-                  className='min-h-0 flex-1'
-                  messages={copilotMessages}
-                  isSending={copilotIsSending}
-                  isReconnecting={copilotIsReconnecting}
-                  onSubmit={handleCopilotSubmit}
-                  onStopGeneration={handleCopilotStopGeneration}
-                  messageQueue={copilotMessageQueue}
-                  editingQueuedId={copilotEditingQueuedId}
-                  dispatchingHeadId={copilotDispatchingHeadId}
-                  onRemoveQueuedMessage={copilotRemoveFromQueue}
-                  onSendQueuedMessage={copilotSendNow}
-                  onEditQueuedMessage={copilotEditQueuedMessage}
-                  onCancelQueueEdit={copilotCancelQueueEdit}
-                  userId={session?.user?.id}
-                  chatId={copilotResolvedChatId}
-                  layout='copilot-view'
+                <Toolbar
+                  key={activeWorkflowId ?? 'workflow'}
+                  ref={toolbarRef}
+                  isActive={activeTab === 'toolbar'}
+                  onFocusSearch={handleFocusToolbarSearch}
                 />
               </div>
-            )}
-            <div
-              className={
-                _hasHydrated && activeTab === 'editor'
-                  ? 'h-full'
-                  : _hasHydrated
-                    ? 'hidden'
-                    : 'h-full'
-              }
-              data-tab-content='editor'
-            >
-              <Editor />
-            </div>
-            <div
-              className={
-                _hasHydrated && activeTab === 'toolbar'
-                  ? 'h-full'
-                  : _hasHydrated
-                    ? 'hidden'
-                    : 'h-full'
-              }
-              data-tab-content='toolbar'
-            >
-              <Toolbar ref={toolbarRef} isActive={activeTab === 'toolbar'} />
+              <div
+                data-tab-content='editor'
+                className={cn(
+                  'h-full min-h-0 flex-col overflow-hidden',
+                  activeTab === 'editor' ? 'flex' : 'hidden'
+                )}
+              >
+                <Editor />
+              </div>
             </div>
           </div>
-        </div>
-
-        {/* Resize Handle */}
-        <div
-          className='absolute top-0 bottom-0 left-[-4px] z-20 w-[8px] cursor-ew-resize'
-          onPointerDown={handlePointerDown}
-          role='separator'
-          aria-orientation='vertical'
-          aria-label='Resize panel'
-        />
-      </aside>
 
-      {/* Delete Confirmation Modal */}
-      <ChipConfirmModal
-        open={isDeleteModalOpen}
-        onOpenChange={setIsDeleteModalOpen}
-        srTitle='Delete Workflow'
-        title='Delete Workflow'
-        text={[
-          'Are you sure you want to delete ',
-          { text: currentWorkflow?.name ?? 'this workflow', bold: true },
-          '? ',
-          {
-            text: 'All associated blocks, executions, and configuration will be removed.',
-            error: true,
-          },
-          ' You can restore it from Recently Deleted in Settings.',
-        ]}
-        confirm={{
-          label: 'Delete',
-          onClick: handleDeleteWorkflow,
-          pending: isDeleting,
-          pendingLabel: 'Deleting...',
-        }}
-      />
+          <div
+            data-panel-resize-handle=''
+            className="before:-translate-x-1/2 absolute top-0 bottom-0 left-[-4px] z-20 w-[8px] cursor-ew-resize before:absolute before:inset-y-0 before:left-1/2 before:w-[2px] before:bg-[var(--border)] before:opacity-0 before:transition-opacity before:duration-150 before:ease-out before:content-[''] hover-hover:before:opacity-100 focus-visible:outline-none focus-visible:before:opacity-100 active:before:opacity-100"
+            onPointerDown={handlePointerDown}
+            onKeyDown={handleKeyDown}
+            role='separator'
+            aria-orientation='vertical'
+            aria-label='Resize panel'
+            aria-valuemin={PANEL_WIDTH.MIN}
+            aria-valuemax={maxPanelWidth === null ? undefined : Math.round(maxPanelWidth)}
+            aria-valuenow={maxPanelWidth === null ? undefined : Math.round(panelWidth)}
+            aria-valuetext={maxPanelWidth === null ? undefined : `${Math.round(panelWidth)} pixels`}
+            tabIndex={0}
+          />
+        </aside>
+      </div>
 
       {/* Floating Variables Modal */}
       <Variables readOnly={workflowLocked} />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
index be31940d6ab..6744bdd8dc6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
@@ -5,6 +5,7 @@ import { Button, cn, Input, toast } from '@sim/emcn'
 import { ChevronDown, ChevronRight, ChevronUp, X } from '@sim/emcn/icons'
 import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 import { getWorkflowSearchDependentClears } from '@/lib/workflows/search-replace/dependencies'
 import { indexWorkflowSearchMatches } from '@/lib/workflows/search-replace/indexer'
 import { buildWorkflowSearchReplacePlan } from '@/lib/workflows/search-replace/replacements'
@@ -56,11 +57,9 @@ const SEARCH_PANEL_EXPANDED_HEIGHT = 156
 function getDefaultSearchPanelPosition() {
   if (typeof window === 'undefined') return { x: 100, y: 100 }
 
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
   const x = window.innerWidth - 8 - panelWidth - 32 - SEARCH_PANEL_WIDTH
-  const y = 40
+  const y = getVisibleWorkflowHeaderHeight() + 8
   return { x, y }
 }
 
@@ -70,9 +69,8 @@ function constrainSearchPanelPosition(position: { x: number; y: number }, height
   const sidebarWidth = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
   )
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
+  const headerHeight = getVisibleWorkflowHeaderHeight()
   const terminalHeight = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--terminal-height') || '0'
   )
@@ -82,7 +80,10 @@ function constrainSearchPanelPosition(position: { x: number; y: number }, height
       sidebarWidth,
       Math.min(window.innerWidth - panelWidth - SEARCH_PANEL_WIDTH - 8, position.x)
     ),
-    y: Math.max(8, Math.min(window.innerHeight - terminalHeight - height - 8, position.y)),
+    y: Math.max(
+      headerHeight + 8,
+      Math.min(window.innerHeight - terminalHeight - height - 8, position.y)
+    ),
   }
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index 9ac4335730b..145ad851501 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -18,6 +18,7 @@ import {
   chipHoverSurfaceClass,
   cn,
   disclosureChevronClass,
+  thinScrollbarClass,
 } from '@sim/emcn'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { isUserFileDisplayMetadata } from '@/lib/core/utils/user-file'
@@ -928,6 +929,7 @@ export const StructuredOutput = memo(function StructuredOutput({
   const containerClass = cn('flex flex-col pl-5', wrapText && 'overflow-x-hidden', className)
   const virtualizedContainerClass = cn(
     'overflow-y-auto',
+    thinScrollbarClass,
     wrapText ? 'overflow-x-hidden' : 'overflow-x-auto',
     className
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index 8582f06c58e..c0fc96b58fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -10,6 +10,7 @@ import {
   PopoverItem,
   PopoverTrigger,
   Tooltip,
+  thinScrollbarClass,
 } from '@sim/emcn'
 import {
   ArrowDown,
@@ -541,7 +542,11 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Content */}
         <div
-          className={clsx('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
+          className={clsx(
+            'flex-1 overflow-y-auto',
+            thinScrollbarClass,
+            !wrapText && 'overflow-x-auto'
+          )}
           onContextMenu={handleOutputPanelContextMenu}
         >
           {!showInput &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index adbffa83d00..e77beb76e12 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -12,6 +12,7 @@ import {
   PopoverItem,
   PopoverTrigger,
   Tooltip,
+  thinScrollbarClass,
 } from '@sim/emcn'
 import { ArrowDown, ArrowUp, Download, MoreHorizontal, Palette, Trash } from '@sim/emcn/icons'
 import { formatDuration } from '@sim/utils/formatting'
@@ -560,7 +561,7 @@ const TerminalLogsPane = memo(function TerminalLogsPane({
   const virtualItems = virtualizer.getVirtualItems()
 
   return (
-    <div ref={scrollRef} className='h-full overflow-y-auto'>
+    <div ref={scrollRef} className={clsx('h-full overflow-y-auto', thinScrollbarClass)}>
       <div className='relative w-full' style={{ height: virtualizer.getTotalSize() }}>
         {virtualItems.map((virtualItem) => (
           <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 1fe75ee7c5b..14104663d84 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -14,6 +14,7 @@ import {
   Input,
   Label,
   languages,
+  thinScrollbarClass,
 } from '@sim/emcn'
 import { Plus, Trash, X } from '@sim/emcn/icons'
 import Editor from 'react-simple-code-editor'
@@ -486,7 +487,7 @@ export function Variables({ readOnly = false }: VariablesProps) {
             {STRINGS.emptyState}
           </div>
         ) : (
-          <div className='h-full overflow-y-auto overflow-x-hidden'>
+          <div className={cn('h-full overflow-y-auto overflow-x-hidden', thinScrollbarClass)}>
             <div className='w-full max-w-full space-y-2 overflow-hidden'>
               {workflowVariables.map((variable, index) => (
                 <div
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 406dd5f06a0..88ccd287da3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -27,6 +27,7 @@ import { isEqual } from 'es-toolkit'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { type NodeProps, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow'
+import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'
@@ -712,8 +713,10 @@ export const WorkflowBlock = memo(function WorkflowBlock({
    * store subscription only re-renders on real changes.
    */
   const editorBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const panelActiveTab = usePanelStore((state) => state.activeTab)
-  const editorOpenBlockId = panelActiveTab === 'editor' ? editorBlockId : null
+  const { panelActiveTab, isPanelOpen } = usePanelStore(
+    useShallow((state) => ({ panelActiveTab: state.activeTab, isPanelOpen: state.isOpen }))
+  )
+  const editorOpenBlockId = isPanelOpen && panelActiveTab === 'editor' ? editorBlockId : null
   const highlightedHandleKey = useReactFlowStore(
     useCallback(
       (state) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index c934e7c22ea..9a138f45a06 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -3,17 +3,13 @@
 import { memo, useCallback, useRef, useState } from 'react'
 import {
   Button,
-  ChevronDown,
+  ChipSwitch,
   Cursor,
-  chipHoverSurfaceClass,
-  cn,
-  disclosureChevronClass,
   Hand,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverItem,
-  PopoverTrigger,
   Redo,
   Tooltip,
   Undo,
@@ -34,8 +30,77 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('WorkflowControls')
 
+const CANVAS_MODE_OPTIONS = [
+  {
+    value: 'cursor',
+    label: <span className='sr-only'>Pointer</span>,
+    icon: Cursor,
+  },
+  {
+    value: 'hand',
+    label: <span className='sr-only'>Hand</span>,
+    icon: Hand,
+  },
+] as const
+
+/**
+ * Header controls for navigating workflow history.
+ */
+export const WorkflowHistoryControls = memo(function WorkflowHistoryControls() {
+  const { undo, redo } = useCollaborativeWorkflow()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const { data: session } = useSession()
+  const userId = session?.user?.id
+  const historyKey = activeWorkflowId && userId ? `${activeWorkflowId}:${userId}` : ''
+  const stack = useUndoRedoStore((state) => (historyKey ? state.stacks[historyKey] : undefined))
+  const canUndo = (stack?.undo.length ?? 0) > 0
+  const canRedo = (stack?.redo.length ?? 0) > 0
+
+  return (
+    <div
+      className='flex flex-shrink-0 items-center gap-0.5'
+      role='group'
+      aria-label='Workflow history'
+    >
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='ghost'
+            className='size-[30px] rounded-lg p-0 hover-hover:bg-[var(--surface-5)]'
+            onClick={undo}
+            disabled={!canUndo}
+            aria-label='Undo'
+          >
+            <Undo className='size-[16px]' />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <Tooltip.Shortcut keys='⌘Z'>Undo</Tooltip.Shortcut>
+        </Tooltip.Content>
+      </Tooltip.Root>
+
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='ghost'
+            className='size-[30px] rounded-lg p-0 hover-hover:bg-[var(--surface-5)]'
+            onClick={redo}
+            disabled={!canRedo}
+            aria-label='Redo'
+          >
+            <Redo className='size-[16px]' />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <Tooltip.Shortcut keys='⌘⇧Z'>Redo</Tooltip.Shortcut>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  )
+})
+
 /**
- * Floating controls for canvas mode, undo/redo, and fit-to-view.
+ * Header controls for canvas mode and fit-to-view.
  */
 export const WorkflowControls = memo(function WorkflowControls() {
   const reactFlowInstance = useReactFlow()
@@ -43,17 +108,8 @@ export const WorkflowControls = memo(function WorkflowControls() {
   const { mode, setMode } = useCanvasModeStore(
     useShallow((s) => ({ mode: s.mode, setMode: s.setMode }))
   )
-  const { undo, redo } = useCollaborativeWorkflow()
   const showWorkflowControls = useShowActionBar()
   const updateSetting = useUpdateGeneralSetting()
-  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-  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 handleFitToView = useCallback(() => {
     fitViewToBounds({ padding: 0.1, duration: 300 })
@@ -67,7 +123,6 @@ export const WorkflowControls = memo(function WorkflowControls() {
   ])
 
   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) => {
@@ -91,107 +146,20 @@ export const WorkflowControls = memo(function WorkflowControls() {
 
   return (
     <>
-      <div
-        /*
-         * 12px off both edges, the same clearance the toast stack keeps from the
-         * terminal and the panel, so the two floating surfaces read as one row.
-         * The toast reaches it as `--terminal-height + 20px` because it anchors
-         * from the viewport and the terminal is itself inset by
-         * CONTENT_WINDOW_GAP; these controls measure from the canvas floor and
-         * wall, so they take the 12 directly.
-         */
-        className='absolute bottom-3 left-3 z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'
-        onContextMenu={handleContextMenu}
-      >
-        {/* Canvas Mode Selector */}
-        <Popover open={isCanvasModeOpen} onOpenChange={setIsCanvasModeOpen} size='sm'>
-          <Tooltip.Root>
-            <PopoverTrigger asChild>
-              <div className='flex cursor-pointer items-center gap-1'>
-                <Tooltip.Trigger asChild>
-                  <Button className='size-[28px] rounded-sm p-0' variant='active'>
-                    {mode === 'hand' ? (
-                      <Hand className='size-[14px]' />
-                    ) : (
-                      <Cursor className='size-[14px]' />
-                    )}
-                  </Button>
-                </Tooltip.Trigger>
-                <Button
-                  variant='ghost'
-                  className={cn('size-[20px] rounded-sm p-0', chipHoverSurfaceClass)}
-                >
-                  <ChevronDown
-                    className={cn(disclosureChevronClass, isCanvasModeOpen && 'rotate-180')}
-                  />
-                </Button>
-              </div>
-            </PopoverTrigger>
-            <Tooltip.Content side='top'>{mode === 'hand' ? 'Mover' : 'Pointer'}</Tooltip.Content>
-          </Tooltip.Root>
-          <PopoverContent side='top' sideOffset={8} maxWidth={100} minWidth={100}>
-            <PopoverItem
-              onClick={() => {
-                setMode('hand')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Hand className='size-[14px]' />
-              <span>Mover</span>
-            </PopoverItem>
-            <PopoverItem
-              onClick={() => {
-                setMode('cursor')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Cursor className='size-[14px]' />
-              <span>Pointer</span>
-            </PopoverItem>
-          </PopoverContent>
-        </Popover>
-
-        <div className='mx-1 h-[20px] w-px bg-[var(--border)]' />
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
-              onClick={undo}
-              disabled={!canUndo}
-            >
-              <Undo className='size-[14px]' />
-            </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={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
-              onClick={redo}
-              disabled={!canRedo}
-            >
-              <Redo className='size-[14px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            <Tooltip.Shortcut keys='⌘⇧Z'>Redo</Tooltip.Shortcut>
-          </Tooltip.Content>
-        </Tooltip.Root>
-
-        <div className='mx-1 h-[20px] w-px bg-[var(--border)]' />
+      <div className='flex flex-shrink-0 items-center gap-0.5' onContextMenu={handleContextMenu}>
+        <ChipSwitch
+          options={CANVAS_MODE_OPTIONS}
+          value={mode}
+          onChange={setMode}
+          size='compact'
+          aria-label='Canvas interaction mode'
+        />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className={cn('size-[28px] rounded-sm p-0', chipHoverSurfaceClass)}
+              className='size-[30px] rounded-lg p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={handleFitToView}
             >
               <SelectAll className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-options-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-options-menu.tsx
new file mode 100644
index 00000000000..54d303e2f13
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-options-menu.tsx
@@ -0,0 +1,294 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import {
+  Button,
+  ChipConfirmModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Duplicate,
+  Layout,
+  MoreHorizontal,
+  Tooltip,
+  Trash,
+  toast,
+} from '@sim/emcn'
+import { BubbleChatClose, BubbleChatPreview, Download, Lock, Unlock } from '@sim/emcn/icons'
+import { createLogger } from '@sim/logger'
+import { useParams, useRouter } from 'next/navigation'
+import { useShallow } from 'zustand/react/shallow'
+import { VariableIcon } from '@/components/icons'
+import { generateWorkflowJson } from '@/lib/workflows/operations/import-export'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { useAutoLayout } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-auto-layout'
+import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow'
+import { getWorkflowLockToggleIds } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import { useDeleteWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
+import { useFolderMap } from '@/hooks/queries/folders'
+import { isWorkflowEffectivelyLocked } from '@/hooks/queries/utils/folder-tree'
+import { useDuplicateWorkflowMutation, useWorkflowMap } from '@/hooks/queries/workflows'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useChatStore } from '@/stores/chat/store'
+import { useVariablesModalStore } from '@/stores/variables/modal'
+import { useVariablesStore } from '@/stores/variables/store'
+import { getWorkflowWithValues } from '@/stores/workflows'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+
+const logger = createLogger('WorkflowOptionsMenu')
+
+interface WorkflowOptionsMenuProps {
+  isExecuting: boolean
+}
+
+export function WorkflowOptionsMenu({ isExecuting }: WorkflowOptionsMenuProps) {
+  const router = useRouter()
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isAutoLayouting, setIsAutoLayouting] = useState(false)
+  const [isExporting, setIsExporting] = useState(false)
+  const [isDuplicating, setIsDuplicating] = useState(false)
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+  const userPermissions = useUserPermissionsContext()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const { data: workflows = {} } = useWorkflowMap(workspaceId)
+  const { data: folders = {} } = useFolderMap(workspaceId)
+  const duplicateWorkflowMutation = useDuplicateWorkflowMutation()
+  const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null)
+  const { collaborativeBatchToggleLocked } = useCollaborativeWorkflow()
+  const { isSnapshotView } = useCurrentWorkflow()
+  const { isChatOpen, setIsChatOpen } = useChatStore(
+    useShallow((state) => ({
+      isChatOpen: state.isChatOpen,
+      setIsChatOpen: state.setIsChatOpen,
+    }))
+  )
+  const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesModalStore(
+    useShallow((state) => ({
+      isOpen: state.isOpen,
+      setIsOpen: state.setIsOpen,
+    }))
+  )
+  const hasLockedBlocks = useWorkflowStore((state) =>
+    Object.values(state.blocks).some((block) => block.locked)
+  )
+  const allBlocksLocked = useWorkflowStore((state) => {
+    const blockList = Object.values(state.blocks)
+    return blockList.length > 0 && blockList.every((block) => block.locked)
+  })
+  const hasBlocks = useWorkflowStore((state) => Object.keys(state.blocks).length > 0)
+  const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
+  const workflowLocked = isWorkflowEffectivelyLocked(currentWorkflow, folders)
+  const canMutateWorkflow = userPermissions.canEdit && !workflowLocked
+  const { isDeleting, handleDeleteWorkflow } = useDeleteWorkflow({
+    workspaceId,
+    workflowIds: activeWorkflowId || '',
+    isActive: true,
+    onSuccess: () => setIsDeleteModalOpen(false),
+  })
+
+  const downloadFile = useCallback((content: string, filename: string, mimeType: string) => {
+    try {
+      const blob = new Blob([content], { type: mimeType })
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = filename
+      document.body.appendChild(anchor)
+      anchor.click()
+      document.body.removeChild(anchor)
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      logger.error('Failed to download file:', error)
+    }
+  }, [])
+
+  const handleAutoLayout = useCallback(async () => {
+    if (isExecuting || !canMutateWorkflow || isAutoLayouting) return
+
+    setIsAutoLayouting(true)
+    try {
+      const result = await autoLayoutWithFitView()
+      if (!result.success && result.error) toast({ message: result.error })
+    } finally {
+      setIsAutoLayouting(false)
+    }
+  }, [isExecuting, canMutateWorkflow, isAutoLayouting, autoLayoutWithFitView])
+
+  const handleExportJson = useCallback(async () => {
+    if (!currentWorkflow || !activeWorkflowId) {
+      logger.warn('No active workflow to export')
+      return
+    }
+
+    setIsExporting(true)
+    try {
+      const workflow = getWorkflowWithValues(activeWorkflowId, workspaceId)
+      if (!workflow?.state) throw new Error('No workflow state found')
+
+      const workflowVariables = useVariablesStore
+        .getState()
+        .getVariablesByWorkflowId(activeWorkflowId)
+      const jsonContent = generateWorkflowJson(workflow.state, {
+        workflowId: activeWorkflowId,
+        name: currentWorkflow.name,
+        description: currentWorkflow.description,
+        variables: workflowVariables.map((variable) => ({
+          id: variable.id,
+          name: variable.name,
+          type: variable.type,
+          value: variable.value,
+        })),
+      })
+
+      const filename = `${currentWorkflow.name.replace(/[^a-z0-9]/gi, '-')}.json`
+      downloadFile(jsonContent, filename, 'application/json')
+      logger.info('Workflow exported as JSON')
+    } catch (error) {
+      logger.error('Failed to export workflow as JSON:', error)
+    } finally {
+      setIsExporting(false)
+      setIsMenuOpen(false)
+    }
+  }, [currentWorkflow, activeWorkflowId, workspaceId, downloadFile])
+
+  const handleDuplicateWorkflow = useCallback(async () => {
+    if (!activeWorkflowId || !userPermissions.canEdit || isDuplicating) return
+
+    const sourceWorkflow = workflows[activeWorkflowId]
+    if (!sourceWorkflow) return
+
+    setIsDuplicating(true)
+    try {
+      const result = await duplicateWorkflowMutation.mutateAsync({
+        workspaceId,
+        sourceId: activeWorkflowId,
+        name: `${sourceWorkflow.name} (Copy)`,
+        description: sourceWorkflow.description,
+        folderId: sourceWorkflow.folderId,
+      })
+      if (result?.id) router.push(`/workspace/${workspaceId}/w/${result.id}`)
+    } catch (error) {
+      logger.error('Error duplicating workflow:', error)
+    } finally {
+      setIsDuplicating(false)
+      setIsMenuOpen(false)
+    }
+  }, [
+    activeWorkflowId,
+    userPermissions.canEdit,
+    isDuplicating,
+    workflows,
+    duplicateWorkflowMutation,
+    workspaceId,
+    router,
+  ])
+
+  const handleToggleWorkflowLock = useCallback(() => {
+    const blocks = useWorkflowStore.getState().blocks
+    const allLocked = Object.values(blocks).every((block) => block.locked)
+    const ids = getWorkflowLockToggleIds(blocks, !allLocked)
+    if (ids.length > 0) collaborativeBatchToggleLocked(ids)
+    setIsMenuOpen(false)
+  }, [collaborativeBatchToggleLocked])
+
+  return (
+    <>
+      <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant='ghost'
+                className='size-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
+                aria-label='Workflow options'
+              >
+                <MoreHorizontal className='size-[16px]' />
+              </Button>
+            </DropdownMenuTrigger>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom'>Workflow options</Tooltip.Content>
+        </Tooltip.Root>
+        <DropdownMenuContent align='center' side='bottom' sideOffset={6}>
+          <DropdownMenuItem onSelect={() => setIsChatOpen(!isChatOpen)}>
+            {isChatOpen ? <BubbleChatClose /> : <BubbleChatPreview />}
+            {isChatOpen ? 'Close test chat' : 'Test in chat'}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={handleAutoLayout}
+            disabled={isExecuting || !canMutateWorkflow || isAutoLayouting || hasLockedBlocks}
+            title={hasLockedBlocks ? 'Unlock blocks to use auto-layout' : undefined}
+          >
+            <Layout animate={isAutoLayouting} variant='clockwise' />
+            Auto layout
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => setVariablesOpen(!isVariablesOpen)}>
+            <VariableIcon />
+            Variables
+          </DropdownMenuItem>
+          {userPermissions.canAdmin && !isSnapshotView && (
+            <DropdownMenuItem
+              onSelect={handleToggleWorkflowLock}
+              disabled={!hasBlocks || workflowLocked}
+              title={
+                workflowLocked
+                  ? 'Workflow is locked at the row or folder level — release it from the workflow notification or folder menu'
+                  : undefined
+              }
+            >
+              {allBlocksLocked ? <Unlock /> : <Lock />}
+              {allBlocksLocked ? 'Unlock workflow' : 'Lock workflow'}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            onSelect={handleExportJson}
+            disabled={!userPermissions.canEdit || isExporting || !currentWorkflow}
+          >
+            <Download />
+            Export workflow
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={handleDuplicateWorkflow}
+            disabled={!userPermissions.canEdit || isDuplicating}
+          >
+            <Duplicate />
+            Duplicate workflow
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setIsDeleteModalOpen(true)}
+            disabled={!canMutateWorkflow || Object.keys(workflows).length <= 1}
+          >
+            <Trash />
+            Delete workflow
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ChipConfirmModal
+        open={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+        srTitle='Delete Workflow'
+        title='Delete Workflow'
+        text={[
+          'Are you sure you want to delete ',
+          { text: currentWorkflow?.name ?? 'this workflow', bold: true },
+          '? ',
+          {
+            text: 'All associated blocks, executions, and configuration will be removed.',
+            error: true,
+          },
+          ' You can restore it from Recently Deleted in Settings.',
+        ]}
+        confirm={{
+          label: 'Delete',
+          onClick: handleDeleteWorkflow,
+          pending: isDeleting,
+          pendingLabel: 'Deleting...',
+        }}
+      />
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-boundary-sync.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-boundary-sync.ts
index d8577eab5bf..79615d7900c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-boundary-sync.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-boundary-sync.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react'
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 
 interface UseFloatBoundarySyncProps {
   isOpen: boolean
@@ -20,7 +21,7 @@ const CONTENT_WINDOW_GAP = 8
  */
 const BOUNDARY_DIMENSIONS = [
   { selector: '.sidebar-shell-outer', cssVar: '--sidebar-width' },
-  { selector: '.panel-container', cssVar: '--panel-width' },
+  { selector: '.workflow-right-tools', cssVar: '--panel-width' },
   { selector: '.terminal-container', cssVar: '--terminal-height' },
 ] as const
 
@@ -51,7 +52,8 @@ export function useFloatBoundarySync({
 
   const checkAndUpdatePosition = useCallback(() => {
     const sidebarWidth = readBoundaryDimension('.sidebar-shell-outer', '--sidebar-width')
-    const panelWidth = readBoundaryDimension('.panel-container', '--panel-width')
+    const panelWidth = getVisiblePanelWidth()
+    const headerHeight = getVisibleWorkflowHeaderHeight()
     const terminalHeight = readBoundaryDimension('.terminal-container', '--terminal-height')
 
     const prev = previousDimensionsRef.current
@@ -67,7 +69,7 @@ export function useFloatBoundarySync({
 
     const minX = sidebarWidth
     const maxX = window.innerWidth - CONTENT_WINDOW_GAP - panelWidth - width
-    const minY = CONTENT_WINDOW_GAP
+    const minY = headerHeight + CONTENT_WINDOW_GAP
     const maxY = window.innerHeight - CONTENT_WINDOW_GAP - terminalHeight - height
 
     const currentPos = positionRef.current
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
index c33b5987fc0..d1b5368630b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 import {
   MAX_CHAT_HEIGHT,
   MAX_CHAT_WIDTH,
@@ -197,15 +198,14 @@ export function useFloatResize({
       const sidebarWidth = Number.parseInt(
         getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
       )
-      const panelWidth = Number.parseInt(
-        getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-      )
+      const panelWidth = getVisiblePanelWidth()
+      const headerHeight = getVisibleWorkflowHeaderHeight()
       const terminalHeight = Number.parseInt(
         getComputedStyle(document.documentElement).getPropertyValue('--terminal-height') || '0'
       )
 
       if (direction === 'top' || direction === 'top-left' || direction === 'top-right') {
-        const minTop = CONTENT_WINDOW_GAP
+        const minTop = headerHeight + CONTENT_WINDOW_GAP
         const maxUpwardDelta = initial.y - minTop
         if (deltaY < -maxUpwardDelta) {
           deltaY = -maxUpwardDelta
@@ -308,7 +308,7 @@ export function useFloatResize({
 
       const minX = sidebarWidth
       const maxX = window.innerWidth - CONTENT_WINDOW_GAP - panelWidth - constrainedWidth
-      const minY = CONTENT_WINDOW_GAP
+      const minY = headerHeight + CONTENT_WINDOW_GAP
       const maxY = window.innerHeight - CONTENT_WINDOW_GAP - terminalHeight - constrainedHeight
 
       const finalX = Math.max(minX, Math.min(maxX, newX))
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
index b24c6e15a5f..b19ef5d0cb4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
@@ -58,7 +58,7 @@ export function useBlockVisual({
     useCallback(
       (state) => {
         if (isPreview || isEmbedded || !isThisBlockInEditor) return false
-        return state.activeTab === 'editor'
+        return state.isOpen && state.activeTab === 'editor'
       },
       [isPreview, isEmbedded, isThisBlockInEditor]
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index fdfc5a2ef8e..7823c47219e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -14,7 +14,7 @@ import ReactFlow, {
   useReactFlow,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
-import { toast } from '@sim/emcn'
+import { cn, toast } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import type { SubflowNodeData } from '@sim/workflow-renderer'
@@ -61,7 +61,6 @@ import {
 import { Cursors } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors'
 import { ErrorBoundary } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error/index'
 import { WorkflowSearchReplace } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace'
-import { WorkflowControls } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls'
 import {
   useAutoLayout,
   useCanvasContextMenu,
@@ -4125,6 +4124,14 @@ const WorkflowContent = React.memo(
       }
     }, [closeConnectionBlockSelector, pendingConnect])
 
+    const handleClosePanelEditor = useCallback(() => {
+      setSelectedEdges(new Map())
+      setDisplayNodes((currentNodes) =>
+        currentNodes.map((node) => (node.selected ? { ...node, selected: false } : node))
+      )
+      usePanelEditorStore.getState().clearCurrentBlock()
+    }, [])
+
     const handleCanvasPointerDownCapture = () => {
       if (pendingConnect) {
         hasPointerDownSinceSelectorOpenedRef.current = true
@@ -4741,7 +4748,14 @@ const WorkflowContent = React.memo(
     }, [blocksStructureHash, embedded, isWorkflowReady, scheduleEmbeddedFit])
 
     return (
-      <div className='flex h-full w-full overflow-hidden'>
+      <div className='relative flex h-full w-full overflow-hidden'>
+        {!embedded && (
+          <div
+            aria-hidden='true'
+            className='pointer-events-none absolute inset-x-0 top-0 z-10 h-[40px] border-[var(--border)] border-b bg-[var(--bg)]'
+          />
+        )}
+
         <div className='flex min-w-0 flex-1 flex-col'>
           <div
             ref={canvasContainerRef}
@@ -4749,10 +4763,18 @@ const WorkflowContent = React.memo(
             /* The in-flight line reads `--text-secondary`, not the `--workflow-edge`
                grey a resting edge uses: it has to stay legible over a subflow body
                as well as the canvas, and that grey is ~1.1:1 against one. */
-            className='relative flex-1 overflow-hidden [--connection-line-stroke:var(--text-secondary)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] data-[connection-active=true]:[&_.react-flow__handle.source]:pointer-events-none'
+            className={cn(
+              'workflow-canvas-shell relative flex-1 overflow-hidden [--connection-line-stroke:var(--text-secondary)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] data-[connection-active=true]:[&_.react-flow__handle.source]:pointer-events-none',
+              !embedded && 'pr-[var(--panel-width)]'
+            )}
           >
             {!isWorkflowReady && (
-              <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
+              <div
+                className={cn(
+                  'absolute top-0 bottom-0 left-0 z-[5] flex items-center justify-center bg-[var(--bg)]',
+                  embedded ? 'right-0' : 'right-[var(--panel-width)]'
+                )}
+              >
                 <div
                   className='size-[18px] animate-spin rounded-full'
                   style={{
@@ -4876,7 +4898,6 @@ const WorkflowContent = React.memo(
 
                 {!embedded && (
                   <>
-                    <WorkflowControls />
                     <Suspense fallback={null}>
                       <LazyChat />
                     </Suspense>
@@ -4951,6 +4972,8 @@ const WorkflowContent = React.memo(
               </>
             )}
 
+            {!embedded && <Panel onCloseEditor={handleClosePanelEditor} />}
+
             {!embedded && <WorkflowSearchReplace />}
 
             {!embedded && isWorkflowReady && isWorkflowEmpty && effectivePermissions.canEdit && (
@@ -4963,8 +4986,6 @@ const WorkflowContent = React.memo(
           <Terminal />
         </div>
 
-        {!embedded && <Panel />}
-
         {!embedded && oauthModal && (
           <ConnectOAuthModal
             mode='reauthorize'
diff --git a/apps/sim/components/empty-state/empty-state.tsx b/apps/sim/components/empty-state/empty-state.tsx
new file mode 100644
index 00000000000..9711afd83e6
--- /dev/null
+++ b/apps/sim/components/empty-state/empty-state.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+
+interface EmptyStateProps {
+  title: string
+  description: string
+  graphic?: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+/**
+ * Shared platform empty-state frame with a visual, concise guidance, and an optional action.
+ */
+export function EmptyState({ title, description, graphic, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex min-h-0 flex-1 flex-col items-center justify-center px-6 py-8 text-center',
+        className
+      )}
+    >
+      {graphic ? <div className='mb-6 flex items-center justify-center'>{graphic}</div> : null}
+      <p className='font-medium text-[var(--text-primary)] text-small'>{title}</p>
+      <p className='mt-1 max-w-[240px] text-[var(--text-muted)] text-small leading-5'>
+        {description}
+      </p>
+      {action ? <div className='mt-4'>{action}</div> : null}
+    </div>
+  )
+}
diff --git a/apps/sim/hooks/use-canvas-viewport.ts b/apps/sim/hooks/use-canvas-viewport.ts
index 1c4cf902e15..c2509081412 100644
--- a/apps/sim/hooks/use-canvas-viewport.ts
+++ b/apps/sim/hooks/use-canvas-viewport.ts
@@ -1,11 +1,13 @@
 import { useCallback, useMemo } from 'react'
 import { BLOCK_DIMENSIONS } from '@sim/workflow-renderer'
 import type { Node, ReactFlowInstance } from 'reactflow'
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 
 interface VisibleBounds {
   width: number
   height: number
   offsetLeft: number
+  offsetTop: number
   offsetRight: number
   offsetBottom: number
 }
@@ -27,6 +29,7 @@ function getVisibleCanvasBounds(options?: CanvasViewportOptions): VisibleBounds
       width: rect.width,
       height: rect.height,
       offsetLeft: 0,
+      offsetTop: 0,
       offsetRight: 0,
       offsetBottom: 0,
     }
@@ -36,13 +39,15 @@ function getVisibleCanvasBounds(options?: CanvasViewportOptions): VisibleBounds
 
   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 panelWidth = getVisiblePanelWidth()
+  const headerHeight = getVisibleWorkflowHeaderHeight()
 
   if (!flowContainer) {
     return {
       width: window.innerWidth - sidebarWidth - panelWidth,
-      height: window.innerHeight - terminalHeight,
+      height: window.innerHeight - terminalHeight - headerHeight,
       offsetLeft: sidebarWidth,
+      offsetTop: headerHeight,
       offsetRight: panelWidth,
       offsetBottom: terminalHeight,
     }
@@ -54,16 +59,18 @@ function getVisibleCanvasBounds(options?: CanvasViewportOptions): VisibleBounds
   // 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 visibleTop = Math.min(rect.bottom, rect.top + headerHeight)
   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)
+  const visibleHeight = Math.max(0, visibleBottom - visibleTop)
 
   return {
     width: visibleWidth,
     height: visibleHeight,
     offsetLeft: visibleLeft - rect.left,
+    offsetTop: visibleTop - rect.top,
     offsetRight: rect.right - visibleRight,
     offsetBottom: rect.bottom - visibleBottom,
   }
@@ -82,7 +89,7 @@ function getVisibleCanvasCenter(options?: CanvasViewportOptions): { x: number; y
 
   return {
     x: containerLeft + bounds.offsetLeft + bounds.width / 2,
-    y: containerTop + bounds.height / 2,
+    y: containerTop + bounds.offsetTop + bounds.height / 2,
   }
 }
 
@@ -178,7 +185,7 @@ export function useCanvasViewport(
       // 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 visibleCenterY = bounds.offsetTop + bounds.height / 2
 
       const x = visibleCenterX - contentCenterX * zoom
       const y = visibleCenterY - contentCenterY * zoom
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index 87e37394c0e..bde7edd96e0 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -227,6 +227,9 @@ export function useCollaborativeWorkflow() {
             case BLOCK_OPERATIONS.UPDATE_NAME:
               useWorkflowStore.getState().updateBlockName(payload.id, payload.name)
               break
+            case BLOCK_OPERATIONS.UPDATE_DESCRIPTION:
+              useWorkflowStore.getState().updateBlockDescription(payload.id, payload.description)
+              break
             case BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE:
               useWorkflowStore.getState().setBlockAdvancedMode(payload.id, payload.advancedMode)
               break
@@ -1150,6 +1153,26 @@ export function useCollaborativeWorkflow() {
     [executeQueuedOperation, addToQueue, activeWorkflowId, session?.user?.id]
   )
 
+  const collaborativeUpdateBlockDescription = useCallback(
+    (id: string, description: string) => {
+      const blocks = useWorkflowStore.getState().blocks
+      if (isBlockProtected(id, blocks)) {
+        logger.error('Cannot update description for locked block')
+        toast({ message: 'Cannot edit locked blocks' })
+        return false
+      }
+
+      executeQueuedOperation(
+        BLOCK_OPERATIONS.UPDATE_DESCRIPTION,
+        OPERATION_TARGETS.BLOCK,
+        { id, description },
+        () => useWorkflowStore.getState().updateBlockDescription(id, description)
+      )
+      return true
+    },
+    [executeQueuedOperation]
+  )
+
   const collaborativeBatchToggleBlockEnabled = useCallback(
     (ids: string[]) => {
       if (isBaselineDiffView) {
@@ -2280,6 +2303,7 @@ export function useCollaborativeWorkflow() {
     // Collaborative operations
     collaborativeBatchUpdatePositions,
     collaborativeUpdateBlockName,
+    collaborativeUpdateBlockDescription,
     collaborativeBatchToggleBlockEnabled,
     collaborativeBatchUpdateParent,
     collaborativeToggleBlockAdvancedMode,
diff --git a/apps/sim/lib/core/utils/layout.ts b/apps/sim/lib/core/utils/layout.ts
new file mode 100644
index 00000000000..5d25d6b1df3
--- /dev/null
+++ b/apps/sim/lib/core/utils/layout.ts
@@ -0,0 +1,17 @@
+/** Returns the width currently occupied by the workflow inspector and tool rail. */
+export function getVisiblePanelWidth(): number {
+  if (typeof document === 'undefined') return 0
+
+  return (
+    document.querySelector<HTMLElement>('.workflow-right-tools')?.getBoundingClientRect().width ?? 0
+  )
+}
+
+/** Returns the height currently occupied by the workflow header. */
+export function getVisibleWorkflowHeaderHeight(): number {
+  if (typeof document === 'undefined') return 0
+
+  return (
+    document.querySelector<HTMLElement>('.workflow-header')?.getBoundingClientRect().height ?? 0
+  )
+}
diff --git a/apps/sim/lib/workflows/subblocks/visibility.test.ts b/apps/sim/lib/workflows/subblocks/visibility.test.ts
index 8d6a87224b1..a4ee2b9c6bd 100644
--- a/apps/sim/lib/workflows/subblocks/visibility.test.ts
+++ b/apps/sim/lib/workflows/subblocks/visibility.test.ts
@@ -2,8 +2,11 @@
  * @vitest-environment node
  */
 import { describe, expect, it } from 'vitest'
+import type { SubBlockConfig } from '@/blocks/types'
 import {
+  buildCanonicalIndex,
   evaluateSubBlockCondition,
+  isSubBlockVisibleInEditor,
   reindexToolCanonicalModes,
   scopeCanonicalModesForTool,
 } from './visibility'
@@ -183,6 +186,52 @@ describe('evaluateSubBlockCondition', () => {
   })
 })
 
+describe('isSubBlockVisibleInEditor', () => {
+  it.concurrent('shows standalone basic and advanced fields together', () => {
+    const subBlocks = [
+      { id: 'name', title: 'Name', type: 'short-input', mode: 'basic' },
+      { id: 'runMetadata', title: 'Run metadata', type: 'switch', mode: 'advanced' },
+    ] satisfies SubBlockConfig[]
+    const canonicalIndex = buildCanonicalIndex(subBlocks)
+
+    expect(isSubBlockVisibleInEditor(subBlocks[0], canonicalIndex, {})).toBe(true)
+    expect(isSubBlockVisibleInEditor(subBlocks[1], canonicalIndex, {})).toBe(true)
+  })
+
+  it.concurrent('keeps canonical basic and advanced controls mutually exclusive', () => {
+    const subBlocks = [
+      {
+        id: 'resourceSelector',
+        title: 'Resource',
+        type: 'dropdown',
+        mode: 'basic',
+        canonicalParamId: 'resource',
+      },
+      {
+        id: 'resourceId',
+        title: 'Resource ID',
+        type: 'short-input',
+        mode: 'advanced',
+        canonicalParamId: 'resource',
+      },
+    ] satisfies SubBlockConfig[]
+    const canonicalIndex = buildCanonicalIndex(subBlocks)
+
+    expect(isSubBlockVisibleInEditor(subBlocks[0], canonicalIndex, {}, { resource: 'basic' })).toBe(
+      true
+    )
+    expect(isSubBlockVisibleInEditor(subBlocks[1], canonicalIndex, {}, { resource: 'basic' })).toBe(
+      false
+    )
+    expect(
+      isSubBlockVisibleInEditor(subBlocks[0], canonicalIndex, {}, { resource: 'advanced' })
+    ).toBe(false)
+    expect(
+      isSubBlockVisibleInEditor(subBlocks[1], canonicalIndex, {}, { resource: 'advanced' })
+    ).toBe(true)
+  })
+})
+
 describe('scopeCanonicalModesForTool', () => {
   it.concurrent('returns undefined when there are no overrides', () => {
     expect(scopeCanonicalModesForTool(undefined, 0)).toBeUndefined()
diff --git a/apps/sim/lib/workflows/subblocks/visibility.ts b/apps/sim/lib/workflows/subblocks/visibility.ts
index ef588530a03..c54971787cb 100644
--- a/apps/sim/lib/workflows/subblocks/visibility.ts
+++ b/apps/sim/lib/workflows/subblocks/visibility.ts
@@ -448,6 +448,26 @@ export function isSubBlockVisibleForMode(
   return true
 }
 
+/**
+ * Determine whether a subblock is visible in the editor panel.
+ *
+ * The editor exposes standalone basic and advanced fields together. Canonical
+ * basic/advanced pairs remain mutually exclusive because they are alternate
+ * controls for the same parameter.
+ */
+export function isSubBlockVisibleInEditor(
+  subBlock: SubBlockConfig,
+  canonicalIndex: CanonicalIndex,
+  values: Record<string, unknown>,
+  overrides?: CanonicalModeOverrides
+): boolean {
+  const canonicalId = canonicalIndex.canonicalIdBySubBlockId[subBlock.id]
+  const group = canonicalId ? canonicalIndex.groupsById[canonicalId] : undefined
+
+  if (!group || !isCanonicalPair(group)) return true
+  return isSubBlockVisibleForMode(subBlock, false, canonicalIndex, values, overrides)
+}
+
 export function isTriggerModeSubBlock(subBlock: Pick<SubBlockConfig, 'mode'>): boolean {
   return subBlock.mode === 'trigger' || subBlock.mode === 'trigger-advanced'
 }
diff --git a/apps/sim/stores/chat/utils.ts b/apps/sim/stores/chat/utils.ts
index 037b65da220..17c594988e1 100644
--- a/apps/sim/stores/chat/utils.ts
+++ b/apps/sim/stores/chat/utils.ts
@@ -1,3 +1,4 @@
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 import type { ChatPosition } from './types'
 
 /**
@@ -29,12 +30,10 @@ const calculateDefaultPosition = (): ChatPosition => {
     return { x: 100, y: 100 }
   }
 
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
 
   const x = window.innerWidth - CONTENT_WINDOW_GAP - panelWidth - 32 - DEFAULT_WIDTH
-  const y = CONTENT_WINDOW_GAP + 32
+  const y = getVisibleWorkflowHeaderHeight() + CONTENT_WINDOW_GAP
 
   return { x, y }
 }
@@ -62,16 +61,15 @@ export const constrainChatPosition = (
   const sidebarWidth = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
   )
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
+  const headerHeight = getVisibleWorkflowHeaderHeight()
   const terminalHeight = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--terminal-height') || '0'
   )
 
   const minX = sidebarWidth
   const maxX = window.innerWidth - CONTENT_WINDOW_GAP - panelWidth - width
-  const minY = CONTENT_WINDOW_GAP
+  const minY = headerHeight + CONTENT_WINDOW_GAP
   const maxY = window.innerHeight - CONTENT_WINDOW_GAP - terminalHeight - height
 
   return {
diff --git a/apps/sim/stores/panel/store.ts b/apps/sim/stores/panel/store.ts
index 80d0c618f4b..e20bc6a5d97 100644
--- a/apps/sim/stores/panel/store.ts
+++ b/apps/sim/stores/panel/store.ts
@@ -1,19 +1,16 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { isChatEnabled } from '@/lib/core/config/env-flags'
 import { PANEL_WIDTH } from '@/stores/constants'
 import type { PanelState, PanelTab } from '@/stores/panel/types'
 
-/**
- * Default panel tab. Falls back to the toolbar when Chat is disabled, since the
- * copilot tab is not rendered then and would leave the panel body empty.
- */
-const DEFAULT_TAB: PanelTab = isChatEnabled ? 'copilot' : 'toolbar'
+/** Default right inspector tab. Workflow chat is a separate left-side surface. */
+const DEFAULT_TAB: PanelTab = 'toolbar'
 
 export const usePanelStore = create<PanelState>()(
   persist(
     (set) => ({
       panelWidth: PANEL_WIDTH.DEFAULT,
+      isOpen: true,
       setPanelWidth: (width) => {
         // Only enforce minimum - maximum is enforced dynamically by the resize hook
         const clampedWidth = Math.max(PANEL_WIDTH.MIN, width)
@@ -25,12 +22,13 @@ export const usePanelStore = create<PanelState>()(
       },
       activeTab: DEFAULT_TAB,
       setActiveTab: (tab) => {
-        set({ activeTab: tab })
+        set({ activeTab: tab, isOpen: true })
         // Remove data attribute once React takes control
         if (typeof document !== 'undefined') {
           document.documentElement.removeAttribute('data-panel-active-tab')
         }
       },
+      closePanel: () => set({ isOpen: false }),
       _hasHydrated: false,
       setHasHydrated: (hasHydrated) => {
         set({ _hasHydrated: hasHydrated })
diff --git a/apps/sim/stores/panel/types.ts b/apps/sim/stores/panel/types.ts
index 42c4a8cfd54..7fb742eeef2 100644
--- a/apps/sim/stores/panel/types.ts
+++ b/apps/sim/stores/panel/types.ts
@@ -1,7 +1,7 @@
 /**
  * Available panel tabs
  */
-export type PanelTab = 'copilot' | 'editor' | 'toolbar'
+export type PanelTab = 'editor' | 'toolbar'
 
 /**
  * Panel state interface
@@ -9,8 +9,10 @@ export type PanelTab = 'copilot' | 'editor' | 'toolbar'
 export interface PanelState {
   panelWidth: number
   setPanelWidth: (width: number) => void
+  isOpen: boolean
   activeTab: PanelTab
   setActiveTab: (tab: PanelTab) => void
+  closePanel: () => void
   _hasHydrated: boolean
   setHasHydrated: (hasHydrated: boolean) => void
 }
diff --git a/apps/sim/stores/variables/modal.ts b/apps/sim/stores/variables/modal.ts
index 157dcd75339..daf99038b31 100644
--- a/apps/sim/stores/variables/modal.ts
+++ b/apps/sim/stores/variables/modal.ts
@@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
+import { getVisiblePanelWidth, getVisibleWorkflowHeaderHeight } from '@/lib/core/utils/layout'
 import type { VariablesModalStore, VariablesPosition } from '@/stores/variables/types'
 
 /**
@@ -32,17 +33,17 @@ const calculateDefaultPosition = (): VariablesPosition => {
   const sidebarWidth = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
   )
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
+  const headerHeight = getVisibleWorkflowHeaderHeight()
   const terminalHeight = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--terminal-height') || '0'
   )
 
   const availableWidth = window.innerWidth - sidebarWidth - CONTENT_WINDOW_GAP - panelWidth
-  const availableHeight = window.innerHeight - CONTENT_WINDOW_GAP * 2 - terminalHeight
+  const availableHeight =
+    window.innerHeight - headerHeight - CONTENT_WINDOW_GAP * 2 - terminalHeight
   const x = sidebarWidth + (availableWidth - DEFAULT_WIDTH) / 2
-  const y = CONTENT_WINDOW_GAP + (availableHeight - DEFAULT_HEIGHT) / 2
+  const y = headerHeight + CONTENT_WINDOW_GAP + (availableHeight - DEFAULT_HEIGHT) / 2
   return { x, y }
 }
 
@@ -59,16 +60,15 @@ const constrainPosition = (
   const sidebarWidth = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
   )
-  const panelWidth = Number.parseInt(
-    getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-  )
+  const panelWidth = getVisiblePanelWidth()
+  const headerHeight = getVisibleWorkflowHeaderHeight()
   const terminalHeight = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--terminal-height') || '0'
   )
 
   const minX = sidebarWidth
   const maxX = window.innerWidth - CONTENT_WINDOW_GAP - panelWidth - width
-  const minY = CONTENT_WINDOW_GAP
+  const minY = headerHeight + CONTENT_WINDOW_GAP
   const maxY = window.innerHeight - CONTENT_WINDOW_GAP - terminalHeight - height
 
   return {
diff --git a/apps/sim/stores/workflows/workflow/store.test.ts b/apps/sim/stores/workflows/workflow/store.test.ts
index a4d086aa1af..c50a1e219bb 100644
--- a/apps/sim/stores/workflows/workflow/store.test.ts
+++ b/apps/sim/stores/workflows/workflow/store.test.ts
@@ -1804,4 +1804,21 @@ describe('workflow store', () => {
       expect(state.blocks.block2.name).toBe('Unique Name')
     })
   })
+
+  describe('updateBlockDescription', () => {
+    it('stores and clears a block description without replacing other block data', () => {
+      addBlock('block1', 'agent', 'Agent', { x: 0, y: 0 }, { parentId: 'loop1' })
+
+      const { updateBlockDescription } = useWorkflowStore.getState()
+      updateBlockDescription('block1', 'Formats the incoming request.')
+
+      expect(useWorkflowStore.getState().blocks.block1.data).toEqual({
+        parentId: 'loop1',
+        description: 'Formats the incoming request.',
+      })
+
+      updateBlockDescription('block1', '')
+      expect(useWorkflowStore.getState().blocks.block1.data?.description).toBe('')
+    })
+  })
 })
diff --git a/apps/sim/stores/workflows/workflow/store.ts b/apps/sim/stores/workflows/workflow/store.ts
index 797c49eedac..9cbd1363adb 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -790,6 +790,30 @@ export const useWorkflowStore = create<WorkflowStore>()(
         }
       },
 
+      updateBlockDescription: (id: string, description: string) => {
+        set((state) => {
+          const block = state.blocks[id]
+          if (!block) return state
+
+          return {
+            blocks: {
+              ...state.blocks,
+              [id]: {
+                ...block,
+                data: {
+                  ...block.data,
+                  description,
+                },
+              },
+            },
+            edges: [...state.edges],
+            loops: { ...state.loops },
+            parallels: { ...state.parallels },
+          }
+        })
+        get().updateLastSaved()
+      },
+
       setBlockErrorEnabled: (id: string, errorEnabled: boolean) => {
         set((state) => {
           const block = state.blocks[id]
diff --git a/apps/sim/stores/workflows/workflow/types.ts b/apps/sim/stores/workflows/workflow/types.ts
index 80904c60978..fe5934229a9 100644
--- a/apps/sim/stores/workflows/workflow/types.ts
+++ b/apps/sim/stores/workflows/workflow/types.ts
@@ -75,6 +75,7 @@ export interface WorkflowActions {
     success: boolean
     changedSubblocks: Array<{ blockId: string; subBlockId: string; newValue: any }>
   }
+  updateBlockDescription: (id: string, description: string) => void
   setBlockAdvancedMode: (id: string, advancedMode: boolean) => void
   setBlockCanonicalMode: (id: string, canonicalId: string, mode: 'basic' | 'advanced') => void
   /**
diff --git a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
index 9650a9892f7..2d65b767d62 100644
--- a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
+++ b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx
@@ -27,6 +27,7 @@ export function ChipCombobox({ className, ...props }: ComboboxProps) {
   return (
     <Combobox
       {...props}
+      appearance='chip'
       className={cn(
         'h-[30px] rounded-lg text-[var(--text-body)] dark:bg-[var(--surface-4)]',
         className
diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx
new file mode 100644
index 00000000000..0af5b26dad4
--- /dev/null
+++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx
@@ -0,0 +1,60 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Search } from '../../icons'
+import { ChipInput } from './chip-input'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('ChipInput', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it('forwards the input ref and renders canonical adornment slots', () => {
+    let input: HTMLInputElement | null = null
+
+    mount(
+      <ChipInput
+        ref={(node) => {
+          input = node
+        }}
+        icon={Search}
+        endAdornment={<span data-testid='adornment'>⌘K</span>}
+        aria-label='Search'
+      />
+    )
+
+    expect(input).toBe(container?.querySelector('input'))
+    expect(container?.querySelector('svg')).not.toBeNull()
+    expect(container?.querySelector('[data-testid="adornment"]')?.textContent).toBe('⌘K')
+  })
+
+  it('uses component state for error and disabled chrome', () => {
+    mount(<ChipInput error disabled aria-label='Invalid field' />)
+
+    const input = container?.querySelector('input')
+    const wrapper = input?.parentElement
+    expect(input?.disabled).toBe(true)
+    expect(wrapper?.className).toContain('border-[var(--text-error)]')
+    expect(wrapper?.className).toContain('opacity-50')
+  })
+})
diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx
index 1266a9aa5b9..f799945712c 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -7,9 +7,9 @@
  * secret/credential value fields, and any standalone labeled input that would
  * otherwise hand-roll the chip chrome with custom classNames.
  *
- * The chrome lives on the wrapper so a leading `icon` and a trailing
- * `endAdornment` (reveal / copy buttons) sit flush next to a transparent inner
- * `<input>`. The leading icon uses the same 1.5 gap as `Chip`. It shares the
+ * The chrome lives on the wrapper so a leading `icon` or `startAdornment` and a
+ * trailing `endAdornment` (reveal / copy buttons) sit flush next to a transparent
+ * inner `<input>`. The leading icon uses the same 1.5 gap as `Chip`. It shares the
  * chip-field chrome with {@link ChipTextarea}, shows no focus ring — keep the
  * surface calm and rely on the caret for focus. Pass `error` to swap the border
  * to the error token.
@@ -27,17 +27,27 @@
  */
 import * as React from 'react'
 import { cn } from '../../lib/cn'
+import { chipVariants } from '../chip/chip'
 import { chipFieldSurfaceClass, chipFieldTextClass } from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
+type ChipInputSurface = 'field' | 'button'
 
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
+  /** Custom content rendered before the input (e.g. a fixed URL prefix). */
+  startAdornment?: React.ReactNode
   /** Trailing content rendered after the input (e.g. reveal / copy buttons). */
   endAdornment?: React.ReactNode
   /** Marks the field invalid; swaps the border to the error token. */
   error?: boolean
+  /**
+   * Controls the outer surface while preserving the same input geometry.
+   * `button` uses the canonical bare Chip treatment for controls that
+   * progressively reveal an input without swapping DOM surfaces.
+   */
+  surface?: ChipInputSurface
   /** Class applied to the outer container (the chrome), not the inner input. */
   className?: string
   /** Class applied to the inner `<input>` (e.g. `font-mono`). */
@@ -54,8 +64,10 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       className,
       inputClassName,
       icon: Icon,
+      startAdornment,
       endAdornment,
       error,
+      surface = 'field',
       disabled,
       type = 'text',
       ...props
@@ -64,14 +76,17 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
   ) => (
     <div
       className={cn(
-        'flex h-[30px] w-full items-center gap-1.5 px-2',
-        chipFieldSurfaceClass,
+        'w-full',
+        surface === 'field'
+          ? cn('flex h-[30px] items-center gap-1.5 px-2', chipFieldSurfaceClass)
+          : chipVariants({ fullWidth: true }),
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
         className
       )}
     >
       {Icon ? <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' /> : null}
+      {startAdornment}
       <input
         ref={ref}
         type={type}
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index 4909e62009b..61e239d3fc5 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -52,6 +52,7 @@ import { ChipSwitch } from '../chip-switch/chip-switch'
 import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { Label } from '../label/label'
 import { Modal, ModalContent, useModalDismissDisabled } from '../modal/modal'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 import { Tooltip } from '../tooltip/tooltip'
 
 /**
@@ -304,6 +305,7 @@ const ChipModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
       ref={ref}
       className={cn(
         'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-2 pt-4 pb-4.5',
+        thinScrollbarClass,
         className
       )}
       {...props}
@@ -359,6 +361,7 @@ const ChipModalPromptBody = React.forwardRef<HTMLDivElement, ChipModalPromptBody
       ref={ref}
       className={cn(
         'flex flex-1 flex-col overflow-y-auto px-3 pt-3 pb-3.5 [&>:first-child]:flex-1',
+        thinScrollbarClass,
         className
       )}
       style={{ ...style, minHeight }}
diff --git a/packages/emcn/src/components/chip-select/chip-select.test.tsx b/packages/emcn/src/components/chip-select/chip-select.test.tsx
new file mode 100644
index 00000000000..48bbf1deb19
--- /dev/null
+++ b/packages/emcn/src/components/chip-select/chip-select.test.tsx
@@ -0,0 +1,76 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ChipSelect } from './chip-select'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+function getTrigger() {
+  const trigger = container?.querySelector('button')
+  if (!trigger) throw new Error('Select trigger did not render')
+  return trigger
+}
+
+describe('ChipSelect', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+    document.body.replaceChildren()
+  })
+
+  it('resolves a selected hidden option without exposing it as a visible choice', () => {
+    mount(
+      <ChipSelect
+        value='legacy'
+        options={[
+          { value: 'current', label: 'Current option' },
+          { value: 'legacy', label: 'Legacy option', hidden: true },
+        ]}
+      />
+    )
+
+    expect(getTrigger().textContent).toContain('Legacy option')
+    expect(document.body.textContent).not.toContain('Current option')
+  })
+
+  it('summarizes multiple selected values in the trigger', () => {
+    mount(
+      <ChipSelect
+        multiSelect
+        multiSelectValues={['one', 'two']}
+        options={[
+          { value: 'one', label: 'One' },
+          { value: 'two', label: 'Two' },
+        ]}
+      />
+    )
+
+    expect(getTrigger().textContent).toContain('2 selected')
+  })
+
+  it('renders async loading state inside the open menu', () => {
+    mount(<ChipSelect options={[]} isLoading aria-label='Load resources' />)
+
+    act(() => {
+      getTrigger().dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true, button: 0, ctrlKey: false })
+      )
+    })
+
+    expect(document.body.textContent).toContain('Loading options...')
+  })
+})
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
index 94b4da1885e..fe270a48fdf 100644
--- a/packages/emcn/src/components/chip-select/chip-select.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronDown } from '../../icons'
+import { ChevronDown, Loader } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
-import { chipIconSlotClass } from '../chip/chip-chrome'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -25,6 +24,8 @@ export interface ChipSelectOption {
   icon?: React.ComponentType<{ className?: string }>
   /** Whether this option is non-selectable. */
   disabled?: boolean
+  /** Keep the option available for selected-label resolution without showing it in the menu. */
+  hidden?: boolean
 }
 
 /** A labeled group of options. When `groups` is set, `options` is ignored. */
@@ -74,12 +75,16 @@ export interface ChipSelectProps {
   dropdownWidth?: 'trigger' | number
   /** Max height of the menu in px (defaults to the menu's 240px). */
   maxHeight?: number
-  /**
-   * Keep the menu below its trigger and shrink it to the remaining viewport
-   * height instead of allowing collision handling to flip it above. Use this
-   * for long form-field menus that would otherwise obscure preceding fields.
-   */
+  /** Keep the menu below its trigger and constrain it to the available viewport height. */
   stayBelow?: boolean
+  /** Loading state rendered inside the menu. */
+  isLoading?: boolean
+  /** Error message rendered inside the menu. */
+  error?: string | null
+  /** Empty-state message rendered when no options are available. */
+  emptyMessage?: string
+  /** Called whenever the menu opens or closes. */
+  onOpenChange?: (open: boolean) => void
   /** Forwarded to the trigger button. */
   className?: string
   /** Forwarded to the menu content. */
@@ -145,6 +150,10 @@ export function ChipSelect({
   dropdownWidth,
   maxHeight,
   stayBelow = false,
+  isLoading = false,
+  error = null,
+  emptyMessage = 'No results',
+  onOpenChange,
   className,
   contentClassName,
   'aria-label': ariaLabel,
@@ -162,6 +171,14 @@ export function ChipSelect({
 
   const allOptions = React.useMemo(() => sections.flatMap((g) => g.items), [sections])
 
+  const visibleSections = React.useMemo(
+    () =>
+      sections
+        .map((group) => ({ ...group, items: group.items.filter((option) => !option.hidden) }))
+        .filter((group) => group.items.length > 0),
+    [sections]
+  )
+
   const triggerLabel = React.useMemo(() => {
     if (multiSelect) {
       if (selectedValues.length === 0) return showAllOption ? allOptionLabel : placeholder
@@ -175,11 +192,14 @@ export function ChipSelect({
   }, [multiSelect, selectedValues, showAllOption, allOptionLabel, placeholder, value, allOptions])
 
   const filteredSections = React.useMemo(() => {
-    if (!searchable || !query.trim()) return sections
-    return sections
-      .map((g) => ({ ...g, items: g.items.filter((o) => chipSelectOptionMatchesSearch(o, query)) }))
+    if (!searchable || !query.trim()) return visibleSections
+    return visibleSections
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((option) => chipSelectOptionMatchesSearch(option, query)),
+      }))
       .filter((g) => g.items.length > 0)
-  }, [searchable, query, sections])
+  }, [searchable, query, visibleSections])
 
   const hasResults = filteredSections.some((g) => g.items.length > 0)
 
@@ -242,6 +262,7 @@ export function ChipSelect({
       modal={modal}
       onOpenChange={(open) => {
         if (!open) setQuery('')
+        onOpenChange?.(open)
       }}
     >
       <DropdownMenuTrigger asChild>
@@ -259,8 +280,11 @@ export function ChipSelect({
           <span className='min-w-0 truncate text-[var(--text-body)]'>
             {displayLabel ?? triggerLabel}
           </span>
-          <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
-            <ChevronDown className='size-[14px]' />
+          <span
+            aria-hidden
+            className='inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'
+          >
+            <ChevronDown className='h-[6px] w-[10px]' />
           </span>
         </button>
       </DropdownMenuTrigger>
@@ -292,7 +316,14 @@ export function ChipSelect({
           </DropdownMenuCheckboxItem>
         ) : null}
 
-        {hasResults ? (
+        {isLoading ? (
+          <div className='flex items-center justify-center py-3.5'>
+            <Loader className='size-[16px] text-[var(--text-muted)]' animate />
+            <span className='ml-2 text-[var(--text-muted)] text-caption'>Loading options...</span>
+          </div>
+        ) : error ? (
+          <div className='px-2 py-3.5 text-center text-caption text-red-500'>{error}</div>
+        ) : hasResults ? (
           filteredSections.map((group, index) => (
             <React.Fragment key={group.section ?? `group-${index}`}>
               {group.section ? <DropdownMenuLabel>{group.section}</DropdownMenuLabel> : null}
@@ -301,7 +332,7 @@ export function ChipSelect({
           ))
         ) : (
           <div className='px-2 py-4 text-center text-[var(--text-muted)] text-small'>
-            No results
+            {emptyMessage}
           </div>
         )}
       </DropdownMenuContent>
diff --git a/packages/emcn/src/components/chip-switch/chip-switch.tsx b/packages/emcn/src/components/chip-switch/chip-switch.tsx
index dcf287749b2..f160af679d6 100644
--- a/packages/emcn/src/components/chip-switch/chip-switch.tsx
+++ b/packages/emcn/src/components/chip-switch/chip-switch.tsx
@@ -27,6 +27,10 @@ export interface ChipSwitchProps<T extends string = string> {
   value: T
   /** Invoked with the next selection when a segment is clicked. */
   onChange: (value: T) => void
+  /** Disables every segment in the switch. */
+  disabled?: boolean
+  /** Visual density. `compact` matches the canonical 30px chip and toolbar controls. */
+  size?: 'default' | 'compact'
   /** Optional accessible label for the radio group. */
   'aria-label'?: string
   /** Extra classes merged onto the outer container. */
@@ -54,6 +58,8 @@ export function ChipSwitch<T extends string>({
   options,
   value,
   onChange,
+  disabled = false,
+  size = 'default',
   'aria-label': ariaLabel,
   className,
 }: ChipSwitchProps<T>) {
@@ -61,8 +67,10 @@ export function ChipSwitch<T extends string>({
     <div
       role='radiogroup'
       aria-label={ariaLabel}
+      aria-disabled={disabled}
       className={cn(
-        'inline-flex items-center rounded-[10px] bg-[var(--surface-5)] p-[2px] dark:bg-[var(--surface-4)]',
+        'inline-flex items-center bg-[var(--surface-5)] p-[2px] dark:bg-[var(--surface-4)]',
+        size === 'compact' ? 'rounded-lg' : 'rounded-[10px]',
         className
       )}
     >
@@ -76,12 +84,14 @@ export function ChipSwitch<T extends string>({
             role='radio'
             aria-checked={isActive}
             data-state={isActive ? 'on' : 'off'}
+            disabled={disabled}
             onClick={() => onChange(option.value)}
             className={cn(
               chipVariants({
                 variant: isActive ? 'border-shadow' : 'default',
               }),
               'justify-center',
+              size === 'compact' && 'h-[26px] px-1.5',
               isActive
                 ? 'text-[var(--text-primary)] shadow-none hover-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-6)] dark:shadow-none dark:hover-hover:bg-[var(--surface-6)]'
                 : 'text-[var(--text-muted)] hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
diff --git a/packages/emcn/src/components/chip-tag/chip-tag.test.tsx b/packages/emcn/src/components/chip-tag/chip-tag.test.tsx
new file mode 100644
index 00000000000..f7192b3e012
--- /dev/null
+++ b/packages/emcn/src/components/chip-tag/chip-tag.test.tsx
@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { ChipTag } from './chip-tag'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('ChipTag', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it.each([
+    ['green', '--badge-success-bg', '--badge-success-text'],
+    ['red', '--badge-error-bg', '--badge-error-text'],
+    ['amber', '--badge-amber-bg', '--badge-amber-text'],
+  ] as const)('renders the %s semantic status variant', (variant, background, text) => {
+    mount(<ChipTag variant={variant}>Status</ChipTag>)
+
+    const tag = container?.querySelector('span')
+    expect(tag?.className).toContain(background)
+    expect(tag?.className).toContain(text)
+  })
+})
diff --git a/packages/emcn/src/components/chip-tag/chip-tag.tsx b/packages/emcn/src/components/chip-tag/chip-tag.tsx
index 479a27d6132..176796850bb 100644
--- a/packages/emcn/src/components/chip-tag/chip-tag.tsx
+++ b/packages/emcn/src/components/chip-tag/chip-tag.tsx
@@ -25,6 +25,8 @@ import { cn } from '../../lib/cn'
  *   when it sits *on* a `--surface-5` input, combobox trigger, or tag container.
  * - `gray` — a light surface over a slightly darker inset ring with muted
  *   `--text-secondary` text for low-emphasis status labels.
+ * - `green`, `red`, and `amber` — semantic status tags using the shared badge
+ *   token families.
  * - `solid` — a filled inverse tag: a dark neutral surface (`--text-secondary`)
  *   with inverse text (`--text-inverse`), mirroring {@link Chip}'s `primary`
  *   inverse-surface convention one step softer than near-black. For eyebrow
@@ -68,6 +70,9 @@ const chipTagVariants = cva(
         field:
           'h-5 gap-[3px] px-1 bg-[var(--surface-6)] text-[var(--text-primary)] dark:bg-[var(--surface-3)]',
         gray: 'h-5 gap-[3px] px-1 border border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-secondary)]',
+        green: 'h-5 gap-[3px] px-1 bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
+        red: 'h-5 gap-[3px] px-1 bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]',
+        amber: 'h-5 gap-[3px] px-1 bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
         solid: 'h-5 gap-[3px] px-1 bg-[var(--text-secondary)] text-[var(--text-inverse)]',
         workflow: 'h-5 gap-[3px] px-1',
         brand: 'h-5 gap-[3px] px-1',
@@ -191,7 +196,13 @@ export function ChipTag({
      all but disappear on a tone's deep fill. */
   const iconClass = cn(
     'size-[14px] flex-shrink-0',
-    !invalid && variant !== 'workflow' && variant !== 'brand' && 'text-[var(--text-icon)]'
+    !invalid &&
+      variant !== 'workflow' &&
+      variant !== 'brand' &&
+      variant !== 'green' &&
+      variant !== 'red' &&
+      variant !== 'amber' &&
+      'text-[var(--text-icon)]'
   )
   const interactive = RightIcon != null && onRightIconClick != null
   const resolvedStyle = variant === 'brand' ? { ...style, background: brandColor } : style
diff --git a/packages/emcn/src/components/chip-textarea/chip-textarea.test.tsx b/packages/emcn/src/components/chip-textarea/chip-textarea.test.tsx
new file mode 100644
index 00000000000..7b551aabcef
--- /dev/null
+++ b/packages/emcn/src/components/chip-textarea/chip-textarea.test.tsx
@@ -0,0 +1,45 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ChipTextarea } from './chip-textarea'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('ChipTextarea', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+  })
+
+  it('keeps view-only content legible without disabling the field', () => {
+    mount(<ChipTextarea value='Generated value' viewOnly readOnly={false} />)
+
+    const textarea = container?.querySelector('textarea')
+    expect(textarea?.readOnly).toBe(true)
+    expect(textarea?.disabled).toBe(false)
+    expect(textarea?.className).toContain('cursor-default')
+  })
+
+  it('applies error and resize state through props', () => {
+    mount(<ChipTextarea error resizable />)
+
+    const textarea = container?.querySelector('textarea')
+    expect(textarea?.className).toContain('border-[var(--text-error)]')
+    expect(textarea?.className).toContain('resize-y')
+    expect(textarea?.className).not.toContain('resize-none')
+  })
+})
diff --git a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
index 8f891a11031..2ab149bf332 100644
--- a/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
+++ b/packages/emcn/src/components/chip-textarea/chip-textarea.tsx
@@ -22,6 +22,7 @@
 import * as React from 'react'
 import { cn } from '../../lib/cn'
 import { chipFieldSurfaceClass, chipFieldTextClass } from '../chip/chip-chrome'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 export interface ChipTextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
@@ -49,6 +50,7 @@ export const ChipTextarea = React.forwardRef<HTMLTextAreaElement, ChipTextareaPr
         'w-full px-2 py-1.5 disabled:cursor-not-allowed disabled:opacity-50',
         chipFieldSurfaceClass,
         chipFieldTextClass,
+        thinScrollbarClass,
         error ? 'border-[var(--text-error)]' : undefined,
         resizable ? 'resize-y' : 'resize-none',
         viewOnly && 'cursor-default',
diff --git a/packages/emcn/src/components/chip-time-picker/chip-time-picker.test.tsx b/packages/emcn/src/components/chip-time-picker/chip-time-picker.test.tsx
new file mode 100644
index 00000000000..c9ed4b82167
--- /dev/null
+++ b/packages/emcn/src/components/chip-time-picker/chip-time-picker.test.tsx
@@ -0,0 +1,65 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ChipTimePicker } from './chip-time-picker'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(onChange: (value: string) => void) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(<ChipTimePicker value='09:30' onChange={onChange} />))
+  const input = container.querySelector('input')
+  if (!input) throw new Error('Time input did not render')
+  return input
+}
+
+function type(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+  setter?.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+describe('ChipTimePicker', () => {
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    root = null
+    container?.remove()
+    container = null
+  })
+
+  it('normalizes typed time and commits it on Enter', () => {
+    const onChange = vi.fn()
+    const input = mount(onChange)
+    expect(input.value).toBe('9:30 AM')
+
+    act(() => {
+      input.focus()
+      type(input, '2:05 pm')
+      input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }))
+    })
+
+    expect(onChange).toHaveBeenCalledWith('14:05')
+    expect(input.value).toBe('2:05 PM')
+  })
+
+  it('restores the committed value when Escape cancels an edit', () => {
+    const onChange = vi.fn()
+    const input = mount(onChange)
+
+    act(() => {
+      input.focus()
+      type(input, 'not a time')
+      input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+    })
+
+    expect(onChange).not.toHaveBeenCalled()
+    expect(input.value).toBe('9:30 AM')
+  })
+})
diff --git a/packages/emcn/src/components/chip-time-picker/chip-time-picker.tsx b/packages/emcn/src/components/chip-time-picker/chip-time-picker.tsx
index 6bebb61d419..c23a4df2bf1 100644
--- a/packages/emcn/src/components/chip-time-picker/chip-time-picker.tsx
+++ b/packages/emcn/src/components/chip-time-picker/chip-time-picker.tsx
@@ -54,6 +54,8 @@ export interface ChipTimePickerProps {
   fullWidth?: boolean
   /** Layout/sizing only — width overrides, margins. The chrome is owned by the chip field. */
   className?: string
+  /** Optional display overlay, used when a consumer needs decorated value text. */
+  overlayContent?: React.ReactNode
 }
 
 /**
@@ -68,11 +70,12 @@ export interface ChipTimePickerProps {
  */
 const ChipTimePicker = React.forwardRef<HTMLInputElement, ChipTimePickerProps>(
   function ChipTimePicker(
-    { value, onChange, placeholder = '10:00 AM', disabled, fullWidth, className },
+    { value, onChange, placeholder = '10:00 AM', disabled, fullWidth, className, overlayContent },
     ref
   ) {
     const [text, setText] = React.useState(() => formatTimeLabel(value))
     const [prevValue, setPrevValue] = React.useState(value)
+    const [isFocused, setIsFocused] = React.useState(false)
 
     if (value !== prevValue) {
       setPrevValue(value)
@@ -110,20 +113,39 @@ const ChipTimePicker = React.forwardRef<HTMLInputElement, ChipTimePickerProps>(
     )
 
     return (
-      <ChipInput
-        ref={ref}
-        value={text}
-        onChange={(event) => setText(event.target.value)}
-        onFocus={(event) => event.target.select()}
-        onBlur={commit}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        disabled={disabled}
-        aria-label='Time'
-        autoComplete='off'
-        spellCheck={false}
-        className={cn(fullWidth ? 'w-full' : 'w-[88px]', className)}
-      />
+      <div className={cn('relative', fullWidth ? 'w-full' : 'w-[88px]', className)}>
+        <ChipInput
+          ref={ref}
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          onFocus={(event) => {
+            setIsFocused(true)
+            event.target.select()
+          }}
+          onBlur={() => {
+            setIsFocused(false)
+            commit()
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label='Time'
+          autoComplete='off'
+          spellCheck={false}
+          className='w-full'
+          inputClassName={overlayContent && !isFocused ? 'text-transparent' : undefined}
+        />
+        {overlayContent && !isFocused ? (
+          <div
+            className={cn(
+              'pointer-events-none absolute inset-0 flex items-center overflow-hidden px-2 text-[var(--text-body)] text-sm',
+              disabled && 'opacity-50'
+            )}
+          >
+            {overlayContent}
+          </div>
+        ) : null}
+      </div>
     )
   }
 )
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index fa8d4754819..c1084bd1b17 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -54,7 +54,9 @@ export const chipContentGap = 'gap-1.5'
  * current-location label or a non-navigable breadcrumb) reuse it directly to
  * match a chip's shape without inheriting its hover.
  */
-export const chipGeometryClass = `h-[30px] items-center ${chipContentGap} rounded-lg px-2 text-left text-sm`
+export const chipGeometryWithoutRadiusClass = `h-[30px] items-center ${chipContentGap} px-2 text-left text-sm`
+/** Standalone chip geometry, including the canonical 8px control radius. */
+export const chipGeometryClass = `${chipGeometryWithoutRadiusClass} rounded-lg`
 /** Chip-content icon (non-inverse): 16px, non-shrinking, `--text-icon`. Inverse chip variants override the color to `currentColor`. */
 export const chipContentIconClass = 'size-[16px] flex-shrink-0 text-[var(--text-icon)]'
 /** Chip-content label (non-inverse): truncating `--text-body` at `text-sm`. Inverse chip variants override the color to `currentColor`. */
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index aa80a5d225a..c26eb7492ca 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -15,7 +15,7 @@ import {
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryClass,
+  chipGeometryWithoutRadiusClass,
   chipHoverSurfaceClass,
   chipPrimaryFillTokens,
 } from './chip-chrome'
@@ -54,7 +54,7 @@ import {
  * {@link chipHoverSurfaceClass}.
  */
 const chipVariants = cva(
-  `group cursor-pointer ${chipGeometryClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
+  `group cursor-pointer ${chipGeometryWithoutRadiusClass} transition-colors disabled:cursor-not-allowed disabled:opacity-60`,
   {
     variants: {
       variant: {
@@ -69,12 +69,23 @@ const chipVariants = cva(
       },
       active: { true: '', false: '' },
       fullWidth: { true: 'flex', false: 'inline-flex' },
+      groupPosition: {
+        standalone: 'rounded-lg',
+        first: 'rounded-l-lg rounded-r-none',
+        middle: 'rounded-none',
+        last: 'rounded-l-none rounded-r-lg',
+      },
     },
     compoundVariants: [
       { variant: ['default', 'filled'], active: false, className: chipHoverSurfaceClass },
       { variant: ['default', 'filled'], active: true, className: chipActiveSurfaceClass },
     ],
-    defaultVariants: { variant: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      active: false,
+      fullWidth: false,
+      groupPosition: 'standalone',
+    },
   }
 )
 
@@ -138,6 +149,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     variant,
     active,
     fullWidth,
+    groupPosition,
     leftIcon,
     leftAdornment,
     rightIcon,
@@ -151,7 +163,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, active, fullWidth, groupPosition }), className)}
       {...props}
     >
       <ChipContent
@@ -175,13 +187,24 @@ interface ChipLinkProps
  * @example <ChipLink href='/integrations' active={isCurrent} leftIcon={ArrowLeft}>Integrations</ChipLink>
  */
 const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
-  { className, variant, active, fullWidth, leftIcon, leftAdornment, rightIcon, children, ...props },
+  {
+    className,
+    variant,
+    active,
+    fullWidth,
+    groupPosition,
+    leftIcon,
+    leftAdornment,
+    rightIcon,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
     <Link
       ref={ref}
-      className={cn(chipVariants({ variant, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, active, fullWidth, groupPosition }), className)}
       {...props}
     >
       <ChipContent
diff --git a/packages/emcn/src/components/code/code.test.tsx b/packages/emcn/src/components/code/code.test.tsx
new file mode 100644
index 00000000000..54d5ea2ccd2
--- /dev/null
+++ b/packages/emcn/src/components/code/code.test.tsx
@@ -0,0 +1,59 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Code } from './code'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('Code.Container', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it('uses chip field chrome for interactive field contexts', () => {
+    mount(
+      <Code.Container appearance='field'>
+        <Code.Gutter width={24}>1</Code.Gutter>
+      </Code.Container>
+    )
+
+    const surface = container?.firstElementChild
+    const gutter = surface?.firstElementChild
+    expect(surface?.className).toContain('rounded-lg')
+    expect(surface?.className).toContain('font-normal')
+    expect(gutter?.className).toContain('rounded-l-lg')
+    expect(gutter?.className).toContain('bg-transparent')
+  })
+
+  it('preserves code-centric chrome by default', () => {
+    mount(
+      <Code.Container>
+        <Code.Gutter width={24}>1</Code.Gutter>
+      </Code.Container>
+    )
+
+    const surface = container?.firstElementChild
+    const gutter = surface?.firstElementChild
+    expect(surface?.className).toContain('rounded-sm')
+    expect(surface?.className).toContain('font-normal')
+    expect(gutter?.className).toContain('rounded-l-[4px]')
+  })
+})
diff --git a/packages/emcn/src/components/code/code.tsx b/packages/emcn/src/components/code/code.tsx
index b23a16bf74c..744dd2056d6 100644
--- a/packages/emcn/src/components/code/code.tsx
+++ b/packages/emcn/src/components/code/code.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import {
+  createContext,
   Fragment,
   memo,
   type ReactNode,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -13,8 +15,14 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { ChevronRight } from '../../icons'
 import { cn } from '../../lib/cn'
+import { chipFieldSurfaceClass } from '../chip/chip-chrome'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 import './code.css'
 
+type CodeAppearance = 'code' | 'field'
+
+const CodeAppearanceContext = createContext<CodeAppearance>('code')
+
 /**
  * Shape of the lazily-loaded Prism module (`./prism`), narrowed to the two
  * members this component uses for highlighting.
@@ -24,7 +32,7 @@ type PrismModule = typeof import('./prism')
 /**
  * Module-level singleton promise for the lazily-loaded Prism module.
  *
- * Prism (core + the side-effectful JS/Python/JSON/Bash grammar registrations) is kept
+ * Prism (core + the side-effectful JS/Python/JSON grammar registrations) is kept
  * out of this module's static import graph so it never lands in bundles that only
  * pull `Code` through the shared `@sim/emcn` barrel. It is loaded once per
  * session on the first highlight and cached here for all subsequent viewers.
@@ -452,6 +460,8 @@ const CollapseLineButton = memo(function CollapseLineButton({
 interface CodeContainerProps {
   /** Editor content wrapped by this container */
   children: ReactNode
+  /** Visual treatment for code-centric surfaces or chip-aligned form fields. */
+  appearance?: CodeAppearance
   /** Additional CSS classes for the container */
   className?: string
   /** Inline styles for the container */
@@ -475,24 +485,32 @@ interface CodeContainerProps {
  * </Code.Container>
  * ```
  */
-function Container({ children, className, style, onDragOver, onDrop }: CodeContainerProps) {
+function Container({
+  children,
+  appearance = 'code',
+  className,
+  style,
+  onDragOver,
+  onDrop,
+}: CodeContainerProps) {
   return (
-    <div
-      className={cn(
-        // Base container styling
-        'group relative min-h-[100px] rounded-sm border border-[var(--border-1)]',
-        'bg-[var(--surface-1)] font-mono text-sm transition-colors',
-        'dark:bg-[var(--code-bg)]',
-        // Overflow handling for long content
-        'overflow-x-auto overflow-y-auto',
-        className
-      )}
-      style={style}
-      onDragOver={onDragOver}
-      onDrop={onDrop}
-    >
-      {children}
-    </div>
+    <CodeAppearanceContext.Provider value={appearance}>
+      <div
+        className={cn(
+          'group relative min-h-[100px] overflow-x-auto overflow-y-auto border font-mono font-normal text-sm transition-colors',
+          thinScrollbarClass,
+          appearance === 'field'
+            ? chipFieldSurfaceClass
+            : 'rounded-sm border-[var(--border-1)] bg-[var(--surface-1)] dark:bg-[var(--code-bg)]',
+          className
+        )}
+        style={style}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        {children}
+      </div>
+    </CodeAppearanceContext.Provider>
   )
 }
 
@@ -587,12 +605,16 @@ interface CodeGutterProps {
  * Provides consistent styling for the line number column.
  */
 function Gutter({ children, width, className, style }: CodeGutterProps) {
+  const appearance = useContext(CodeAppearanceContext)
+
   return (
     <div
       className={cn(
         'absolute top-0 bottom-0 left-0',
         'flex select-none flex-col items-end overflow-hidden',
-        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[var(--code-bg)]',
+        appearance === 'field'
+          ? 'rounded-l-lg bg-transparent dark:bg-transparent'
+          : 'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[var(--code-bg)]',
         'pr-0.5',
         className
       )}
@@ -1082,6 +1104,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
         'bg-[var(--surface-1)] font-mono text-sm',
         wrapText ? 'overflow-x-hidden' : 'overflow-x-auto',
         'overflow-y-auto',
+        thinScrollbarClass,
         'dark:bg-[var(--code-bg)]',
         className
       )}
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
new file mode 100644
index 00000000000..59969c5efb8
--- /dev/null
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
@@ -0,0 +1,87 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { CollapsibleCard, FieldCard } from './collapsible-card'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('CollapsibleCard', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it('keeps header actions separate from the collapse toggle', () => {
+    const onToggleCollapse = vi.fn()
+    const onAction = vi.fn()
+
+    mount(
+      <CollapsibleCard
+        title='Variable'
+        collapsed={false}
+        onToggleCollapse={onToggleCollapse}
+        actions={
+          <button type='button' onClick={onAction}>
+            Add
+          </button>
+        }
+      >
+        <div>Value</div>
+      </CollapsibleCard>
+    )
+
+    const buttons = container?.querySelectorAll('button')
+    act(() => buttons?.[1]?.click())
+    expect(onAction).toHaveBeenCalledOnce()
+    expect(onToggleCollapse).not.toHaveBeenCalled()
+
+    act(() => buttons?.[0]?.click())
+    expect(onToggleCollapse).toHaveBeenCalledOnce()
+  })
+
+  it('shares chip field chrome with static edge-to-edge cards', () => {
+    mount(
+      <FieldCard title='if' flush>
+        <div>Condition editor</div>
+      </FieldCard>
+    )
+
+    const card = container?.firstElementChild
+    const header = card?.firstElementChild
+    const body = card?.lastElementChild
+    expect(card?.className).toContain('rounded-lg')
+    expect(header?.className).toContain('border-b')
+    expect(body?.className).not.toContain('px-2.5')
+  })
+
+  it('does not render an empty body for static header-only cards', () => {
+    mount(
+      <FieldCard title='else'>
+        {false}
+        {null}
+      </FieldCard>
+    )
+
+    const card = container?.firstElementChild
+    const header = card?.firstElementChild
+    expect(card?.childElementCount).toBe(1)
+    expect(header?.className).not.toContain('border-b')
+  })
+})
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
index 8629675bf01..6b543c5773f 100644
--- a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
@@ -1,59 +1,118 @@
 'use client'
 
 import type * as React from 'react'
+import { Children } from 'react'
 import { cn } from '../../lib/cn'
-import { handleKeyboardActivation } from '../../lib/keyboard'
+import { chipContentLabelClass, chipFieldSurfaceClass } from '../chip/chip-chrome'
 
-export interface CollapsibleCardProps {
+interface FieldCardSharedProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
   /** Header label (rendered in the standard truncated field-title style). */
   title: React.ReactNode
   /** Optional trailing header content, e.g. a type `Badge`. */
   badge?: React.ReactNode
+  /** Optional interactive actions rendered outside the header toggle. */
+  actions?: React.ReactNode
+  /** Removes the default body padding for edge-to-edge editors. */
+  flush?: boolean
+  /** Body content rendered below the header. */
+  children?: React.ReactNode
+}
+
+export type FieldCardProps = FieldCardSharedProps
+
+export interface CollapsibleCardProps extends FieldCardSharedProps {
   collapsed: boolean
   onToggleCollapse: () => void
-  /** Body content, shown when expanded. */
-  children: React.ReactNode
-  className?: string
 }
 
 /**
- * A collapsible field card: a `--surface-4` header (click / keyboard to toggle)
- * with a truncated title + optional badge, over a `--surface-2` body. Shared by
- * the workflow input-mapping rows and the enrichment output-column config.
+ * Shared chip-aligned frame used by static and collapsible field cards.
  */
-export function CollapsibleCard({
-  title,
-  badge,
-  collapsed,
-  onToggleCollapse,
+function FieldCardFrame({
+  header,
+  actions,
   children,
+  flush = false,
   className,
-}: CollapsibleCardProps) {
+  ...props
+}: Omit<FieldCardSharedProps, 'title' | 'badge'> & { header: React.ReactNode }) {
+  const hasBody = Children.toArray(children).length > 0
+
   return (
-    <div
-      className={cn(
-        'rounded-sm border border-[var(--border-1)]',
-        collapsed ? 'overflow-hidden' : 'overflow-visible',
-        className
-      )}
-    >
+    <div className={cn(chipFieldSurfaceClass, 'overflow-hidden', className)} {...props}>
       <div
-        role='button'
-        tabIndex={0}
-        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-        onClick={onToggleCollapse}
-        onKeyDown={(event) => handleKeyboardActivation(event, onToggleCollapse)}
+        className={cn(
+          'flex min-h-[30px] items-center justify-between px-2',
+          hasBody && 'border-[var(--border-1)] border-b'
+        )}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-2'>
-          <span className='block truncate text-[var(--text-tertiary)] text-sm'>{title}</span>
-          {badge}
-        </div>
+        {header}
+        {actions ? <div className='flex items-center gap-1 pl-2'>{actions}</div> : null}
       </div>
-      {!collapsed && (
-        <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      {hasBody ? (
+        <div
+          className={cn(
+            'bg-[var(--surface-2)]',
+            !flush && 'flex flex-col gap-2 px-2.5 pt-1.5 pb-2.5'
+          )}
+        >
           {children}
         </div>
-      )}
+      ) : null}
     </div>
   )
 }
+
+/**
+ * A chip-aligned field card with a static header and optional edge-to-edge body.
+ */
+export function FieldCard({ title, badge, actions, children, ...props }: FieldCardProps) {
+  return (
+    <FieldCardFrame
+      header={
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
+          <span className={chipContentLabelClass}>{title}</span>
+          {badge}
+        </div>
+      }
+      actions={actions}
+      {...props}
+    >
+      {children}
+    </FieldCardFrame>
+  )
+}
+
+/**
+ * A chip-aligned field card whose header toggles the body.
+ */
+export function CollapsibleCard({
+  title,
+  badge,
+  actions,
+  collapsed,
+  onToggleCollapse,
+  children,
+  ...props
+}: CollapsibleCardProps) {
+  return (
+    <FieldCardFrame
+      header={
+        <button
+          type='button'
+          className='flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left'
+          aria-expanded={!collapsed}
+          onClick={onToggleCollapse}
+        >
+          <span className={chipContentLabelClass}>{title}</span>
+          {badge}
+        </button>
+      }
+      actions={actions}
+      {...props}
+    >
+      {collapsed ? null : children}
+    </FieldCardFrame>
+  )
+}
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index 391e1028a1f..695bde02897 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -18,6 +18,10 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown, Loader, Search } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipActiveSurfaceClass, chipHoverSurfaceClass } from '../chip/chip-chrome'
+import {
+  DROPDOWN_MENU_ITEM_BASE_CLASSES,
+  DROPDOWN_MENU_SURFACE_CLASSES,
+} from '../dropdown-menu/dropdown-menu'
 import { Input } from '../input/input'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
 
@@ -149,6 +153,8 @@ export interface ComboboxProps
   maxHeight?: number
   /** Empty state message when no options match the search */
   emptyMessage?: string
+  /** Use canonical chip trigger and dropdown-menu surface chrome. */
+  appearance?: 'default' | 'chip'
 }
 
 /**
@@ -191,6 +197,7 @@ const Combobox = memo(
         groups,
         maxHeight = 192,
         emptyMessage,
+        appearance = 'default',
         ...props
       },
       ref
@@ -616,6 +623,7 @@ const Combobox = memo(
                         (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
                         SelectedIcon && !overlayContent && 'pl-7',
                         open && 'focus-visible:border-[var(--border-1)]',
+                        appearance === 'chip' && 'pr-8 font-normal',
                         className
                       )}
                       placeholder={placeholder}
@@ -631,6 +639,7 @@ const Combobox = memo(
                       <div
                         className={cn(
                           'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-2 py-1.5 font-sans text-sm',
+                          appearance === 'chip' && 'right-[28px] font-normal',
                           disabled && 'opacity-50'
                         )}
                       >
@@ -638,7 +647,14 @@ const Combobox = memo(
                           overlayContent
                         ) : (
                           <>
-                            {SelectedIcon && <SelectedIcon className='mr-2 size-3 flex-shrink-0' />}
+                            {SelectedIcon && (
+                              <SelectedIcon
+                                className={cn(
+                                  'mr-2 size-3 flex-shrink-0',
+                                  appearance === 'chip' && 'size-[16px] text-[var(--text-icon)]'
+                                )}
+                              />
+                            )}
                             <span className='truncate text-[var(--text-primary)]'>
                               {selectedOption?.label}
                             </span>
@@ -649,12 +665,17 @@ const Combobox = memo(
                     <button
                       type='button'
                       aria-label={open ? 'Close options' : 'Open options'}
-                      className='-translate-y-1/2 absolute top-1/2 right-[4px] z-10 flex size-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0'
+                      className={cn(
+                        '-translate-y-1/2 absolute top-1/2 right-[4px] z-10 flex size-6 cursor-pointer items-center justify-center border-0 bg-transparent p-0',
+                        appearance === 'chip' && 'right-1'
+                      )}
                       onMouseDown={handleChevronClick}
                     >
                       <ChevronDown
                         className={cn(
                           'size-4 opacity-50 transition-transform',
+                          appearance === 'chip' &&
+                            'h-[6px] w-[10px] text-[var(--text-icon)] opacity-100',
                           open && 'rotate-180'
                         )}
                       />
@@ -690,6 +711,8 @@ const Combobox = memo(
                     <ChevronDown
                       className={cn(
                         'ml-2 size-4 flex-shrink-0 opacity-50 transition-transform',
+                        appearance === 'chip' &&
+                          'h-[6px] w-[10px] text-[var(--text-icon)] opacity-100',
                         open && 'rotate-180'
                       )}
                     />
@@ -706,9 +729,11 @@ const Combobox = memo(
             <PopoverContent
               side='bottom'
               align={align}
-              sideOffset={4}
+              sideOffset={appearance === 'chip' ? 6 : 4}
               className={cn(
-                'rounded-md border border-[var(--border-1)] p-0',
+                appearance === 'chip'
+                  ? DROPDOWN_MENU_SURFACE_CLASSES
+                  : 'rounded-md border border-[var(--border-1)] p-0',
                 dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
               )}
               style={
@@ -766,7 +791,7 @@ const Combobox = memo(
                 </div>
               )}
               <PopoverScrollArea
-                className='!flex-none p-1'
+                className={cn('!flex-none', appearance === 'chip' ? 'p-0' : 'p-1')}
                 style={{ maxHeight: `${maxHeight}px` }}
                 onWheelCapture={(e) => {
                   const target = e.currentTarget
@@ -840,8 +865,11 @@ const Combobox = memo(
                                   !option.disabled && setHighlightedIndex(globalIndex)
                                 }
                                 className={cn(
-                                  'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans',
-                                  size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                                  appearance === 'chip'
+                                    ? DROPDOWN_MENU_ITEM_BASE_CLASSES
+                                    : 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans',
+                                  appearance !== 'chip' &&
+                                    (size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm'),
                                   /*
                                      No CSS `:hover` here — `isHighlighted` is the
                                      single source of truth for the cursor, because
@@ -861,7 +889,14 @@ const Combobox = memo(
                                   : OptionIcon && (
                                       <OptionIcon className='size-[14px] flex-shrink-0' />
                                     )}
-                                <span className='flex-1 truncate text-[var(--text-primary)]'>
+                                <span
+                                  className={cn(
+                                    'flex-1 truncate',
+                                    appearance === 'chip'
+                                      ? 'text-[var(--text-body)]'
+                                      : 'text-[var(--text-primary)]'
+                                  )}
+                                >
                                   {option.label}
                                 </span>
                                 {option.suffixElement}
@@ -889,15 +924,25 @@ const Combobox = memo(
                           }}
                           onMouseEnter={() => setHighlightedIndex(-1)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-sans',
-                            size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                            appearance === 'chip'
+                              ? DROPDOWN_MENU_ITEM_BASE_CLASSES
+                              : 'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-sans',
+                            appearance !== 'chip' &&
+                              (size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm'),
                             // Clears the highlight rather than taking it, so unlike option rows it hovers.
                             !multiSelectValues?.length
                               ? chipActiveSurfaceClass
                               : chipHoverSurfaceClass
                           )}
                         >
-                          <span className='flex-1 truncate text-[var(--text-primary)]'>
+                          <span
+                            className={cn(
+                              'flex-1 truncate',
+                              appearance === 'chip'
+                                ? 'text-[var(--text-body)]'
+                                : 'text-[var(--text-primary)]'
+                            )}
+                          >
                             {allOptionLabel}
                           </span>
                         </div>
@@ -925,8 +970,11 @@ const Combobox = memo(
                             }}
                             onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
                             className={cn(
-                              'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans',
-                              size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                              appearance === 'chip'
+                                ? DROPDOWN_MENU_ITEM_BASE_CLASSES
+                                : 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans',
+                              appearance !== 'chip' &&
+                                (size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm'),
                               // See above: `isHighlighted` alone, so paint matches what Enter commits.
                               (isHighlighted || isSelected) && chipActiveSurfaceClass,
                               option.disabled && 'cursor-not-allowed opacity-50'
@@ -935,7 +983,14 @@ const Combobox = memo(
                             {option.iconElement
                               ? option.iconElement
                               : OptionIcon && <OptionIcon className='size-[14px] flex-shrink-0' />}
-                            <span className='flex-1 truncate text-[var(--text-primary)]'>
+                            <span
+                              className={cn(
+                                'flex-1 truncate',
+                                appearance === 'chip'
+                                  ? 'text-[var(--text-body)]'
+                                  : 'text-[var(--text-primary)]'
+                              )}
+                            >
                               {option.label}
                             </span>
                             {option.suffixElement}
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
index ee7555508d6..ebeb88bc74d 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
@@ -26,6 +26,7 @@ import { Check, ChevronRight, Circle, Search } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipFieldSurfaceClass } from '../chip/chip-chrome'
 import { InsideModalContext } from '../modal/modal'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 const ANIMATION_CLASSES =
   'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
@@ -121,8 +122,10 @@ function withEllipsizedLabel(children: React.ReactNode): React.ReactNode {
  * object next to the surfaces it opens over, so match the convention rather than
  * making the two corners strictly concentric.
  */
-const CONTENT_BASE_CLASSES =
-  'z-[var(--z-popover)] max-h-[240px] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden overscroll-none rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm'
+export const DROPDOWN_MENU_SURFACE_CLASSES =
+  'rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm'
+
+const CONTENT_BASE_CLASSES = `z-[var(--z-popover)] max-h-[240px] min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden overscroll-none ${thinScrollbarClass} ${DROPDOWN_MENU_SURFACE_CLASSES}`
 
 /**
  * Menu root. Inside a `ModalContent` (Radix modal dialog) the menu is forced
@@ -244,7 +247,7 @@ const DropdownMenuContent = React.forwardRef<
 ))
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-const DROPDOWN_MENU_ITEM_BASE_CLASSES = `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-pointer select-none items-center gap-2 ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`
+export const DROPDOWN_MENU_ITEM_BASE_CLASSES = `relative flex ${MENU_ROW_HEIGHT_CLASS} min-w-0 cursor-pointer select-none items-center gap-2 ${MENU_ROW_RADIUS_CLASS} px-2 text-[var(--text-body)] text-small outline-none ${MENU_ROW_TRANSITION_CLASS} data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${MENU_ROW_SINGLE_LINE_CLASS} [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]`
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 1b23439bf8b..240dc803be5 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -96,7 +96,12 @@ export {
 } from './code/code'
 export { CopyCodeButton } from './code/copy-code-button'
 export { highlight, languages } from './code/prism'
-export { CollapsibleCard, type CollapsibleCardProps } from './collapsible-card/collapsible-card'
+export {
+  CollapsibleCard,
+  type CollapsibleCardProps,
+  FieldCard,
+  type FieldCardProps,
+} from './collapsible-card/collapsible-card'
 export {
   Combobox,
   type ComboboxOption,
@@ -174,6 +179,12 @@ export {
 } from './popover/popover'
 export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export { ProgressItem } from './progress-item/progress-item'
+export {
+  ScrollEdgeFade,
+  type ScrollEdgeFadeProps,
+  type ScrollEdgeFadeVariant,
+} from './scroll-edge-fade/scroll-edge-fade'
+export { thinScrollbarClass } from './scrollbar/scrollbar'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
 export { Skeleton } from './skeleton/skeleton'
diff --git a/packages/emcn/src/components/info-card/info-card.tsx b/packages/emcn/src/components/info-card/info-card.tsx
index 8187ade7836..6825b9bbde4 100644
--- a/packages/emcn/src/components/info-card/info-card.tsx
+++ b/packages/emcn/src/components/info-card/info-card.tsx
@@ -22,6 +22,7 @@
 import * as React from 'react'
 import { Check } from '../../icons'
 import { cn } from '../../lib/cn'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -61,7 +62,12 @@ const InfoCardList = React.forwardRef<HTMLUListElement, InfoCardListProps>(
   ({ className, maxHeightClassName = 'max-h-[200px]', ...props }, ref) => (
     <ul
       ref={ref}
-      className={cn('flex flex-col gap-2 overflow-y-auto p-2', maxHeightClassName, className)}
+      className={cn(
+        'flex flex-col gap-2 overflow-y-auto p-2',
+        thinScrollbarClass,
+        maxHeightClassName,
+        className
+      )}
       {...props}
     />
   )
diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx
index 7e4f99c83ce..38e8821a3fd 100644
--- a/packages/emcn/src/components/modal/modal.tsx
+++ b/packages/emcn/src/components/modal/modal.tsx
@@ -43,6 +43,7 @@ import { usePathname } from 'next/navigation'
 import { X } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Button } from '../button/button'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 import { focusFirstTextInput, focusFirstTextInputIn } from './auto-focus'
 
 /**
@@ -857,7 +858,11 @@ ModalTabsContent.displayName = 'ModalTabsContent'
  */
 const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex-1 overflow-y-auto px-4 pt-3 pb-4', className)} {...props} />
+    <div
+      ref={ref}
+      className={cn('flex-1 overflow-y-auto px-4 pt-3 pb-4', thinScrollbarClass, className)}
+      {...props}
+    />
   )
 )
 
diff --git a/packages/emcn/src/components/popover/popover.test.tsx b/packages/emcn/src/components/popover/popover.test.tsx
new file mode 100644
index 00000000000..22acf9a788a
--- /dev/null
+++ b/packages/emcn/src/components/popover/popover.test.tsx
@@ -0,0 +1,133 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { PopoverItem, PopoverScrollArea } from './popover'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('PopoverScrollArea', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it('keeps the scroll viewport flush with the popover edges', () => {
+    mount(
+      <PopoverScrollArea>
+        <div>Items</div>
+      </PopoverScrollArea>
+    )
+
+    const scrollArea = container?.querySelector<HTMLElement>('[data-popover-scroll]')
+    expect(scrollArea?.parentElement?.className).toContain('overflow-hidden')
+    expect(scrollArea?.parentElement?.className).toContain('-my-1.5')
+    expect(scrollArea?.parentElement?.classList.contains('py-1.5')).toBe(false)
+    expect(scrollArea?.classList.contains('py-1.5')).toBe(true)
+    expect(scrollArea?.className).toContain('scroll-py-3')
+    expect(scrollArea?.className).toContain('[&::-webkit-scrollbar]:size-1')
+  })
+
+  it('supports a panel fade variant without changing the scroll contract', () => {
+    mount(
+      <PopoverScrollArea fadeVariant='panel'>
+        <div>Items</div>
+      </PopoverScrollArea>
+    )
+
+    const scrollArea = container?.querySelector<HTMLElement>('[data-popover-scroll]')
+    const fade = container?.querySelector<HTMLElement>('[data-popover-scroll-fade="top"]')
+    expect(scrollArea?.className).toContain('scroll-py-12')
+    expect(fade?.dataset.scrollEdgeFadeVariant).toBe('panel')
+  })
+
+  it('can hide scrollbar chrome while preserving the scroll viewport', () => {
+    mount(
+      <PopoverScrollArea scrollbar='hidden'>
+        <div>Items</div>
+      </PopoverScrollArea>
+    )
+
+    const scrollArea = container?.querySelector<HTMLElement>('[data-popover-scroll]')
+    expect(scrollArea?.className).toContain('[scrollbar-width:none]')
+    expect(scrollArea?.className).toContain('[&::-webkit-scrollbar]:hidden')
+    expect(scrollArea?.className).toContain('overflow-y-auto')
+    expect(scrollArea?.className).toContain('overflow-x-hidden')
+  })
+
+  it('can defer the bottom fade to an overlapping action surface', () => {
+    mount(
+      <PopoverScrollArea bottomFade={false}>
+        <div>Items</div>
+      </PopoverScrollArea>
+    )
+
+    expect(container?.querySelector('[data-popover-scroll-fade="top"]')).not.toBeNull()
+    expect(container?.querySelector('[data-popover-scroll-fade="bottom"]')).toBeNull()
+  })
+
+  it('reveals edge fades only when more content exists in that direction', () => {
+    mount(
+      <PopoverScrollArea>
+        <div>Items</div>
+      </PopoverScrollArea>
+    )
+
+    const scrollArea = container?.querySelector<HTMLElement>('[data-popover-scroll]')
+    if (!scrollArea) throw new Error('Expected popover scroll area')
+
+    Object.defineProperties(scrollArea, {
+      clientHeight: { configurable: true, value: 100 },
+      scrollHeight: { configurable: true, value: 200 },
+      scrollTop: { configurable: true, value: 0, writable: true },
+    })
+
+    const topFade = container?.querySelector<HTMLElement>('[data-popover-scroll-fade="top"]')
+    const bottomFade = container?.querySelector<HTMLElement>('[data-popover-scroll-fade="bottom"]')
+
+    act(() => scrollArea.dispatchEvent(new Event('scroll', { bubbles: true })))
+    expect(topFade?.className).toContain('opacity-0')
+    expect(bottomFade?.className).toContain('opacity-100')
+
+    scrollArea.scrollTop = 50
+    act(() => scrollArea.dispatchEvent(new Event('scroll', { bubbles: true })))
+    expect(topFade?.className).toContain('opacity-100')
+    expect(bottomFade?.className).toContain('opacity-100')
+
+    scrollArea.scrollTop = 100
+    act(() => scrollArea.dispatchEvent(new Event('scroll', { bubbles: true })))
+    expect(topFade?.className).toContain('opacity-100')
+    expect(bottomFade?.className).toContain('opacity-0')
+  })
+
+  it('lets nested components own their icon foreground', () => {
+    mount(
+      <PopoverItem>
+        <svg aria-label='Direct icon' />
+        <span>
+          <svg aria-label='Nested icon' />
+        </span>
+      </PopoverItem>
+    )
+
+    const item = container?.firstElementChild
+    expect(item?.className).toContain('[&>svg]:text-[var(--text-icon)]')
+    expect(item?.className).not.toContain('[&_svg]:text-[var(--text-icon)]')
+  })
+})
diff --git a/packages/emcn/src/components/popover/popover.tsx b/packages/emcn/src/components/popover/popover.tsx
index 6ecd0d529a0..966238add61 100644
--- a/packages/emcn/src/components/popover/popover.tsx
+++ b/packages/emcn/src/components/popover/popover.tsx
@@ -56,6 +56,9 @@ import { createPortal } from 'react-dom'
 import { Check, ChevronLeft, ChevronRight, Search } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipActiveSurfaceClass, chipHoverSurfaceClass } from '../chip/chip-chrome'
+import { DROPDOWN_MENU_SURFACE_CLASSES } from '../dropdown-menu/dropdown-menu'
+import { ScrollEdgeFade, type ScrollEdgeFadeVariant } from '../scroll-edge-fade/scroll-edge-fade'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 type PopoverSize = 'sm' | 'md'
 type PopoverColorScheme = 'default' | 'inverted'
@@ -85,11 +88,12 @@ const STYLES = {
   /** Color scheme variants */
   colorScheme: {
     default: {
-      text: 'text-[var(--text-body)] [&_svg]:text-[var(--text-icon)]',
+      text: 'text-[var(--text-body)] [&>svg]:text-[var(--text-icon)]',
       section: 'text-[var(--text-tertiary)]',
       search: 'text-[var(--text-muted)]',
       searchInput: 'text-[var(--text-primary)] placeholder:text-[var(--text-muted)]',
-      content: 'bg-[var(--surface-5)] text-foreground dark:bg-[var(--surface-3)]',
+      content:
+        'bg-[var(--surface-5)] text-foreground [--popover-surface:var(--surface-5)] dark:bg-[var(--surface-3)] dark:[--popover-surface:var(--surface-3)]',
       divider: 'border-[var(--border-1)]',
     },
     inverted: {
@@ -98,7 +102,8 @@ const STYLES = {
       search: 'text-[var(--text-muted-inverse)] dark:text-[var(--text-muted)]',
       searchInput:
         'text-white placeholder:text-[var(--text-muted-inverse)] dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-muted)]',
-      content: 'bg-[var(--surface-inverted)] text-white dark:text-foreground',
+      content:
+        'bg-[var(--surface-inverted)] text-white [--popover-surface:var(--surface-inverted)] dark:text-foreground',
       divider: 'border-[var(--border-inverted)]',
     },
   } satisfies Record<
@@ -388,6 +393,12 @@ interface PopoverContentProps
    * @default false
    */
   border?: boolean
+  /**
+   * Uses the canonical theme-aware chip-dropdown surface instead of the
+   * standard contextual popover surface.
+   * @default 'default'
+   */
+  appearance?: 'default' | 'dropdown'
   /**
    * Flip to avoid viewport collisions
    * @default true
@@ -428,6 +439,7 @@ const PopoverContent = React.forwardRef<
       sideOffset,
       collisionPadding = 8,
       border = false,
+      appearance = 'default',
       avoidCollisions = true,
       showArrow = false,
       arrowClassName,
@@ -587,12 +599,19 @@ const PopoverContent = React.forwardRef<
         data-native-surface-overlay=''
         className={cn(
           'z-[var(--z-popover)] flex flex-col outline-none',
-          showArrow ? 'overflow-visible' : 'overflow-auto',
-          STYLES.colorScheme[colorScheme].content,
-          STYLES.content,
+          thinScrollbarClass,
+          showArrow
+            ? 'overflow-visible'
+            : 'overflow-auto [&:has([data-popover-scroll])]:overflow-hidden',
+          appearance === 'dropdown'
+            ? cn(DROPDOWN_MENU_SURFACE_CLASSES, '[--popover-surface:var(--bg)]')
+            : cn(
+                STYLES.colorScheme[colorScheme].content,
+                STYLES.content,
+                border && 'border border-[var(--border-1)]'
+              ),
           hasUserWidthConstraint &&
             '[&_.flex-1:not([data-popover-scroll])]:truncate [&_[data-popover-section]]:truncate',
-          border && 'border border-[var(--border-1)]',
           className
         )}
         style={{
@@ -611,7 +630,7 @@ const PopoverContent = React.forwardRef<
       >
         {showArrow ? (
           <div
-            className='flex flex-1 flex-col overflow-auto'
+            className={cn('flex flex-1 flex-col overflow-auto', thinScrollbarClass)}
             style={{ maxHeight: `${maxHeight || 400}px` }}
           >
             {children}
@@ -651,23 +670,125 @@ const PopoverContent = React.forwardRef<
 
 PopoverContent.displayName = 'PopoverContent'
 
-interface PopoverScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface PopoverScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Progressive fade density. Compact is the canonical menu treatment. */
+  fadeVariant?: ScrollEdgeFadeVariant
+  /** Whether this viewport owns its bottom edge fade. */
+  bottomFade?: boolean
+  /** Whether the scroll viewport exposes its native scrollbar chrome. */
+  scrollbar?: 'thin' | 'hidden'
+}
 
 /**
- * Scrollable container for popover items.
+ * Scrollable container for popover items with overflow-safe sizing and subtle
+ * edge fades that reveal additional content without clipping rows.
  */
 const PopoverScrollArea = React.forwardRef<HTMLDivElement, PopoverScrollAreaProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      className={cn(
-        'min-h-0 overflow-auto overscroll-contain',
-        '[&>div:has([data-popover-section]):not(:first-child)]:mt-1.5',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
+  (
+    {
+      className,
+      children,
+      fadeVariant = 'compact',
+      bottomFade = true,
+      scrollbar = 'thin',
+      onScroll,
+      ...props
+    },
+    ref
+  ) => {
+    const scrollRef = React.useRef<HTMLDivElement>(null)
+    const [edges, setEdges] = React.useState({ top: false, bottom: false })
+
+    const setScrollRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        scrollRef.current = node
+        if (typeof ref === 'function') {
+          ref(node)
+        } else if (ref) {
+          ref.current = node
+        }
+      },
+      [ref]
+    )
+
+    const updateEdges = React.useCallback(() => {
+      const node = scrollRef.current
+      if (!node) return
+
+      const nextEdges = {
+        top: node.scrollTop > 1,
+        bottom: node.scrollTop + node.clientHeight < node.scrollHeight - 1,
+      }
+
+      setEdges((current) =>
+        current.top === nextEdges.top && current.bottom === nextEdges.bottom ? current : nextEdges
+      )
+    }, [])
+
+    React.useEffect(() => {
+      const node = scrollRef.current
+      if (!node) return
+
+      updateEdges()
+
+      const resizeObserver =
+        typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateEdges)
+      resizeObserver?.observe(node)
+
+      const mutationObserver =
+        typeof MutationObserver === 'undefined' ? null : new MutationObserver(updateEdges)
+      mutationObserver?.observe(node, { childList: true, subtree: true })
+
+      return () => {
+        resizeObserver?.disconnect()
+        mutationObserver?.disconnect()
+      }
+    }, [updateEdges])
+
+    const handleScroll = React.useCallback(
+      (event: React.UIEvent<HTMLDivElement>) => {
+        updateEdges()
+        onScroll?.(event)
+      },
+      [onScroll, updateEdges]
+    )
+
+    return (
+      <div className='-my-1.5 relative flex max-h-full min-h-0 flex-1 overflow-hidden [--scroll-edge-fade-surface:var(--popover-surface)]'>
+        <div
+          className={cn(
+            'min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain py-1.5',
+            scrollbar === 'thin'
+              ? thinScrollbarClass
+              : '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            fadeVariant === 'compact' ? 'scroll-py-3' : 'scroll-py-12',
+            '[&>div:has([data-popover-section]):not(:first-child)]:mt-1.5',
+            className
+          )}
+          data-popover-scroll=''
+          ref={setScrollRef}
+          onScroll={handleScroll}
+          {...props}
+        >
+          {children}
+        </div>
+        <ScrollEdgeFade
+          position='top'
+          variant={fadeVariant}
+          visible={edges.top}
+          data-popover-scroll-fade='top'
+        />
+        {bottomFade && (
+          <ScrollEdgeFade
+            position='bottom'
+            variant={fadeVariant}
+            visible={edges.bottom}
+            data-popover-scroll-fade='bottom'
+          />
+        )}
+      </div>
+    )
+  }
 )
 
 PopoverScrollArea.displayName = 'PopoverScrollArea'
diff --git a/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.test.tsx b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.test.tsx
new file mode 100644
index 00000000000..a04fd265641
--- /dev/null
+++ b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.test.tsx
@@ -0,0 +1,57 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { ScrollEdgeFade } from './scroll-edge-fade'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+describe('ScrollEdgeFade', () => {
+  beforeEach(() => {
+    container = null
+    root = null
+  })
+
+  afterEach(() => {
+    if (root) act(() => root?.unmount())
+    container?.remove()
+  })
+
+  it('uses a compact edge treatment for constrained menus', () => {
+    mount(<ScrollEdgeFade position='top' variant='compact' />)
+
+    const fade = container?.querySelector<HTMLElement>('[data-scroll-edge-fade="top"]')
+    expect(fade?.className).toContain('h-3')
+    expect(fade?.dataset.scrollEdgeFadeVariant).toBe('compact')
+  })
+
+  it('keeps the deeper progressive treatment for panels', () => {
+    mount(<ScrollEdgeFade position='bottom' variant='panel' />)
+
+    const fade = container?.querySelector<HTMLElement>('[data-scroll-edge-fade="bottom"]')
+    expect(fade?.className).toContain('h-12')
+    expect(fade?.dataset.scrollEdgeFadeVariant).toBe('panel')
+  })
+
+  it('uses a stronger treatment behind floating actions', () => {
+    mount(<ScrollEdgeFade position='bottom' variant='action' />)
+
+    const fade = container?.querySelector<HTMLElement>('[data-scroll-edge-fade="bottom"]')
+    const strongestBlur = fade?.querySelector<HTMLElement>('.backdrop-blur-\\[16px\\]')
+
+    expect(fade?.className).toContain('h-20')
+    expect(fade?.dataset.scrollEdgeFadeVariant).toBe('action')
+    expect(strongestBlur).not.toBeNull()
+  })
+})
diff --git a/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.tsx b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.tsx
new file mode 100644
index 00000000000..75ad4a0e18e
--- /dev/null
+++ b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import { cn } from '../../lib/cn'
+
+export type ScrollEdgeFadeVariant = 'action' | 'compact' | 'panel'
+
+export interface ScrollEdgeFadeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Edge where the fade is anchored. */
+  position: 'top' | 'bottom'
+  /** Whether overflow currently exists beyond this edge. */
+  visible?: boolean
+  /** Density of the scroll surface that owns the fade. */
+  variant?: ScrollEdgeFadeVariant
+}
+
+/**
+ * Progressive edge blur for scrollable EMCN surfaces.
+ *
+ * @remarks
+ * Set `--scroll-edge-fade-surface` on a parent when the surface differs from
+ * `--bg`. The compact variant is sized for menus, panel is for full-height
+ * catalog and resource surfaces, and action protects a floating footer CTA.
+ */
+export function ScrollEdgeFade({
+  className,
+  position,
+  visible = true,
+  variant = 'panel',
+  ...props
+}: ScrollEdgeFadeProps) {
+  const isTop = position === 'top'
+  const isAction = variant === 'action'
+
+  return (
+    <div
+      aria-hidden='true'
+      className={cn(
+        'pointer-events-none absolute inset-x-0 z-10 select-none transition-opacity ease-out motion-reduce:transition-none',
+        isTop ? 'top-0' : 'bottom-0',
+        variant === 'compact'
+          ? 'h-3 duration-150'
+          : isAction
+            ? 'h-20 duration-200'
+            : 'h-12 duration-200',
+        visible ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+      data-scroll-edge-fade={position}
+      data-scroll-edge-fade-variant={variant}
+      {...props}
+    >
+      <div
+        className={cn(
+          'absolute inset-0',
+          isAction ? 'backdrop-blur-[4px]' : 'backdrop-blur-[1px]',
+          isTop
+            ? '[-webkit-mask-image:linear-gradient(to_top,transparent_0%,black_72%,black_100%)] [mask-image:linear-gradient(to_top,transparent_0%,black_72%,black_100%)]'
+            : '[-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_72%,black_100%)] [mask-image:linear-gradient(to_bottom,transparent_0%,black_72%,black_100%)]'
+        )}
+      />
+      <div
+        className={cn(
+          'absolute inset-0',
+          isAction ? 'backdrop-blur-[8px]' : 'backdrop-blur-[2px]',
+          isTop
+            ? '[-webkit-mask-image:linear-gradient(to_top,transparent_20%,black_100%)] [mask-image:linear-gradient(to_top,transparent_20%,black_100%)]'
+            : '[-webkit-mask-image:linear-gradient(to_bottom,transparent_20%,black_100%)] [mask-image:linear-gradient(to_bottom,transparent_20%,black_100%)]'
+        )}
+      />
+      <div
+        className={cn(
+          'absolute inset-0',
+          isAction ? 'backdrop-blur-[16px]' : 'backdrop-blur-[4px]',
+          isTop
+            ? '[-webkit-mask-image:linear-gradient(to_top,transparent_55%,black_100%)] [mask-image:linear-gradient(to_top,transparent_55%,black_100%)]'
+            : '[-webkit-mask-image:linear-gradient(to_bottom,transparent_55%,black_100%)] [mask-image:linear-gradient(to_bottom,transparent_55%,black_100%)]'
+        )}
+      />
+      <div
+        className={cn(
+          'absolute inset-0',
+          isAction
+            ? isTop
+              ? 'bg-[linear-gradient(to_top,transparent_0%,var(--scroll-edge-fade-surface,var(--bg))_28%)]'
+              : 'bg-[linear-gradient(to_bottom,transparent_0%,var(--scroll-edge-fade-surface,var(--bg))_28%)]'
+            : isTop
+              ? 'bg-[linear-gradient(to_top,transparent_0%,transparent_12%,var(--scroll-edge-fade-surface,var(--bg))_100%)]'
+              : 'bg-[linear-gradient(to_bottom,transparent_0%,transparent_12%,var(--scroll-edge-fade-surface,var(--bg))_100%)]'
+        )}
+      />
+    </div>
+  )
+}
diff --git a/packages/emcn/src/components/scrollbar/scrollbar.test.ts b/packages/emcn/src/components/scrollbar/scrollbar.test.ts
new file mode 100644
index 00000000000..20d7872d2ca
--- /dev/null
+++ b/packages/emcn/src/components/scrollbar/scrollbar.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { thinScrollbarClass } from './scrollbar'
+
+describe('thinScrollbarClass', () => {
+  it('uses compact edge-aligned geometry and theme tokens', () => {
+    expect(thinScrollbarClass).toContain('[&::-webkit-scrollbar]:size-1')
+    expect(thinScrollbarClass).toContain('[scrollbar-width:thin]')
+    expect(thinScrollbarClass).toContain('var(--scrollbar-thumb-color)')
+    expect(thinScrollbarClass).toContain('var(--scrollbar-thumb-hover-color)')
+  })
+})
diff --git a/packages/emcn/src/components/scrollbar/scrollbar.ts b/packages/emcn/src/components/scrollbar/scrollbar.ts
new file mode 100644
index 00000000000..ec9d8bfdfe5
--- /dev/null
+++ b/packages/emcn/src/components/scrollbar/scrollbar.ts
@@ -0,0 +1,9 @@
+/**
+ * Canonical chrome for visible EMCN scrollbars.
+ *
+ * The 4px WebKit geometry keeps the thumb close to the surface edge without
+ * covering dense menu or panel content. Firefox exposes only its native
+ * `thin` width, so it receives the matching token-based color treatment.
+ */
+export const thinScrollbarClass =
+  '[scrollbar-color:var(--scrollbar-thumb-color)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:size-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb-color)] [&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover-color)]'
diff --git a/packages/emcn/src/components/table/table.tsx b/packages/emcn/src/components/table/table.tsx
index 0ba67ba490f..a19303b41c1 100644
--- a/packages/emcn/src/components/table/table.tsx
+++ b/packages/emcn/src/components/table/table.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { cn } from '../../lib/cn'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 /**
  * A simple Table component for displaying data.
@@ -24,7 +25,7 @@ import { cn } from '../../lib/cn'
  */
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className='relative w-full overflow-auto'>
+    <div className={cn('relative w-full overflow-auto', thinScrollbarClass)}>
       <table ref={ref} className={cn('w-full caption-bottom text-small', className)} {...props} />
     </div>
   )
diff --git a/packages/emcn/src/components/tag-input/tag-input.tsx b/packages/emcn/src/components/tag-input/tag-input.tsx
index 3e5a99eddc9..72359b2eff3 100644
--- a/packages/emcn/src/components/tag-input/tag-input.tsx
+++ b/packages/emcn/src/components/tag-input/tag-input.tsx
@@ -43,6 +43,7 @@ import { Paperclip, Plus, X } from '../../icons'
 import { cn } from '../../lib/cn'
 import { handleKeyboardActivation } from '../../lib/keyboard'
 import { ChipTag, chipTagVariants } from '../chip-tag/chip-tag'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 import { Tooltip } from '../tooltip/tooltip'
 
 /**
@@ -61,7 +62,7 @@ import { Tooltip } from '../tooltip/tooltip'
  *   `max-h` scrolls vertically.
  */
 const tagInputVariants = cva(
-  'flex w-full cursor-text flex-wrap gap-2 overflow-y-auto border border-[var(--border-1)] bg-[var(--surface-5)] px-2 transition-colors',
+  `flex w-full cursor-text flex-wrap gap-2 overflow-y-auto border border-[var(--border-1)] bg-[var(--surface-5)] px-2 transition-colors ${thinScrollbarClass}`,
   {
     variants: {
       variant: {
diff --git a/packages/emcn/src/components/textarea/textarea.tsx b/packages/emcn/src/components/textarea/textarea.tsx
index 7d2525be242..9245b28afd4 100644
--- a/packages/emcn/src/components/textarea/textarea.tsx
+++ b/packages/emcn/src/components/textarea/textarea.tsx
@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
+import { thinScrollbarClass } from '../scrollbar/scrollbar'
 
 /** `[letter-spacing:inherit]` — see the note on `INPUT_CLASS`; keep the two in step. */
 const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  `flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50 ${thinScrollbarClass}`,
   {
     variants: {
       variant: {
diff --git a/packages/emcn/src/icons/corner-up-right.tsx b/packages/emcn/src/icons/corner-up-right.tsx
new file mode 100644
index 00000000000..7136f361abe
--- /dev/null
+++ b/packages/emcn/src/icons/corner-up-right.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+export function CornerUpRight(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M15 14L20 9L15 4' />
+      <path d='M4 20V13C4 10.79 5.79 9 8 9H20' />
+    </svg>
+  )
+}
diff --git a/packages/emcn/src/icons/index.ts b/packages/emcn/src/icons/index.ts
index 54b2f5162ff..3f2cce27bc7 100644
--- a/packages/emcn/src/icons/index.ts
+++ b/packages/emcn/src/icons/index.ts
@@ -42,6 +42,7 @@ export { Columns2 } from './columns2'
 export { Columns3 } from './columns3'
 export { Compass } from './compass'
 export { Connections } from './connections'
+export { CornerUpRight } from './corner-up-right'
 export { Credit } from './credit'
 export { Cursor } from './cursor'
 export { Database } from './database'
diff --git a/packages/realtime-protocol/src/constants.ts b/packages/realtime-protocol/src/constants.ts
index fe6c2c87bf6..0f9e442ef99 100644
--- a/packages/realtime-protocol/src/constants.ts
+++ b/packages/realtime-protocol/src/constants.ts
@@ -1,6 +1,7 @@
 export const BLOCK_OPERATIONS = {
   UPDATE_POSITION: 'update-position',
   UPDATE_NAME: 'update-name',
+  UPDATE_DESCRIPTION: 'update-description',
   TOGGLE_ENABLED: 'toggle-enabled',
   UPDATE_PARENT: 'update-parent',
   UPDATE_ADVANCED_MODE: 'update-advanced-mode',
diff --git a/packages/realtime-protocol/src/schemas.ts b/packages/realtime-protocol/src/schemas.ts
index dd15b86af62..fdd5018703c 100644
--- a/packages/realtime-protocol/src/schemas.ts
+++ b/packages/realtime-protocol/src/schemas.ts
@@ -40,6 +40,7 @@ export const BlockOperationSchema = z.object({
   operation: z.enum([
     BLOCK_OPERATIONS.UPDATE_POSITION,
     BLOCK_OPERATIONS.UPDATE_NAME,
+    BLOCK_OPERATIONS.UPDATE_DESCRIPTION,
     BLOCK_OPERATIONS.TOGGLE_ENABLED,
     BLOCK_OPERATIONS.UPDATE_PARENT,
     BLOCK_OPERATIONS.UPDATE_ADVANCED_MODE,
@@ -54,6 +55,7 @@ export const BlockOperationSchema = z.object({
     id: z.string(),
     type: z.string().optional(),
     name: z.string().optional(),
+    description: z.string().optional(),
     position: PositionSchema.optional(),
     commit: z.boolean().optional(),
     data: z.record(z.string(), z.any()).optional(),
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
index 85bca72b6fa..95c6e9c0633 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
@@ -169,6 +169,8 @@ interface WorkflowBlockBorderProps {
   isSelected?: boolean
   /** Overrides the selected silhouette while preserving the canonical idle and ring colors. */
   selectedSilhouetteColor?: string
+  /** Paints the action-menu swell at its resting size immediately instead of springing in. */
+  staticActionMenuSwell?: boolean
   /** Overrides the resolved silhouette without changing selected or ring state. */
   silhouetteColorOverride?: string
   /** Fills the card body without changing its silhouette or border color. */
@@ -898,6 +900,7 @@ export function WorkflowBlockBorder({
   ringStyles,
   isSelected = false,
   selectedSilhouetteColor,
+  staticActionMenuSwell = false,
   silhouetteColorOverride,
   bodyFill = 'var(--surface-2)',
   width,
@@ -1039,10 +1042,14 @@ export function WorkflowBlockBorder({
     }
     const actionMenuPort = resolvedPorts.find((port) => port.id === 'action-menu')
     actionMenuSpringRef.current.target = (actionMenuPort?.restAmplitude ?? 0) > 0 ? 1 : 0
+    if (staticActionMenuSwell) {
+      actionMenuSpringRef.current.value = actionMenuSpringRef.current.target
+      actionMenuSpringRef.current.velocity = 0
+    }
     /* Repaint in the same commit: ports or size changed, and a silhouette
        that lags the content by an animation frame reads as a flash. */
     renderNowRef.current()
-  }, [ports, radius, size.height, size.width])
+  }, [ports, radius, size.height, size.width, staticActionMenuSwell])
 
   useLayoutEffect(() => {
     const svg = svgRef.current
diff --git a/packages/workflow-types/src/workflow.ts b/packages/workflow-types/src/workflow.ts
index b1ba622d14e..5c56cd80205 100644
--- a/packages/workflow-types/src/workflow.ts
+++ b/packages/workflow-types/src/workflow.ts
@@ -43,6 +43,7 @@ export interface Position {
 }
 
 export interface BlockData {
+  description?: string
   parentId?: string
   extent?: 'parent'
   width?: number