diff --git a/apps/realtime/src/database/operations.ts b/apps/realtime/src/database/operations.ts
index cec1c8c0ba4..475fdbf6b29 100644
--- a/apps/realtime/src/database/operations.ts
+++ b/apps/realtime/src/database/operations.ts
@@ -32,6 +32,8 @@ import {
   isKnownWorkflowTriggerBlock,
   isWorkflowAnnotationOnlyBlockType,
   isWorkflowBlockProtected,
+  normalizeWorkflowEdgeSourceHandle,
+  normalizeWorkflowEdgeTargetHandle,
 } from '@sim/workflow-types/workflow'
 import { and, eq, inArray, isNull, or, sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/postgres-js'
@@ -57,13 +59,21 @@ function toEdgeHandles(edge: PersistedEdgeRecord) {
 }
 
 interface EdgeAddCandidate {
-  id?: string
+  id: string
   source: string
   target: string
   sourceHandle?: string | null
   targetHandle?: string | null
 }
 
+function canonicalizeEdgeAddCandidate(edge: EdgeAddCandidate): EdgeAddCandidate {
+  return {
+    ...edge,
+    sourceHandle: normalizeWorkflowEdgeSourceHandle(edge.sourceHandle),
+    targetHandle: normalizeWorkflowEdgeTargetHandle(edge.targetHandle),
+  }
+}
+
 interface FilterEdgesForPersistResult<T> {
   safeEdges: T[]
   droppedCounts: Record<string, number>
@@ -283,8 +293,8 @@ async function insertAutoConnectEdge(
     workflowId,
     sourceBlockId: autoConnectEdge.source,
     targetBlockId: autoConnectEdge.target,
-    sourceHandle: autoConnectEdge.sourceHandle || null,
-    targetHandle: autoConnectEdge.targetHandle || null,
+    sourceHandle: normalizeWorkflowEdgeSourceHandle(autoConnectEdge.sourceHandle),
+    targetHandle: normalizeWorkflowEdgeTargetHandle(autoConnectEdge.targetHandle),
   })
   logger.debug(
     `Added auto-connect edge ${autoConnectEdge.id}: ${autoConnectEdge.source} -> ${autoConnectEdge.target}`
@@ -618,6 +628,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')
@@ -736,6 +773,33 @@ async function handleBlockOperationTx(
       break
     }
 
+    case BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED: {
+      if (!payload.id || payload.errorEnabled === undefined) {
+        throw new Error('Missing required fields for update error enabled operation')
+      }
+
+      const updateResult = await tx
+        .update(workflowBlocks)
+        .set({
+          data: sql`jsonb_set(
+            coalesce(${workflowBlocks.data}, '{}'::jsonb),
+            '{errorEnabled}',
+            ${JSON.stringify(payload.errorEnabled)}::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 error output: ${payload.id} -> ${payload.errorEnabled}`)
+      break
+    }
+
     case BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE: {
       if (!payload.id || !payload.canonicalId || !payload.canonicalMode) {
         throw new Error('Missing required fields for update canonical mode operation')
@@ -1024,8 +1088,8 @@ async function handleBlocksOperationTx(
         // blocksById lookup (a plain `tx.select` from `workflowBlocks`) also
         // sees the blocks this same batch just inserted — reads observe a
         // transaction's own prior writes.
-        const candidates: EdgeAddCandidate[] = (edges as Array<Record<string, unknown>>).map(
-          (e) => ({
+        const candidates: EdgeAddCandidate[] = (edges as Array<Record<string, unknown>>).map((e) =>
+          canonicalizeEdgeAddCandidate({
             id: e.id as string,
             source: e.source as string,
             target: e.target as string,
@@ -1051,8 +1115,8 @@ async function handleBlocksOperationTx(
             workflowId,
             sourceBlockId: edge.source,
             targetBlockId: edge.target,
-            sourceHandle: edge.sourceHandle || null,
-            targetHandle: edge.targetHandle || null,
+            sourceHandle: normalizeWorkflowEdgeSourceHandle(edge.sourceHandle),
+            targetHandle: normalizeWorkflowEdgeTargetHandle(edge.targetHandle),
           }))
 
           await tx
@@ -1509,18 +1573,17 @@ async function handleEdgeOperationTx(tx: any, workflowId: string, operation: str
         throw new Error('Missing required fields for add edge operation')
       }
 
+      const candidate = canonicalizeEdgeAddCandidate({
+        id: payload.id,
+        source: payload.source,
+        target: payload.target,
+        sourceHandle: payload.sourceHandle ?? null,
+        targetHandle: payload.targetHandle ?? null,
+      })
       const { safeEdges, droppedCounts, droppedDuplicates } = await filterEdgesForPersist(
         tx,
         workflowId,
-        [
-          {
-            id: payload.id,
-            source: payload.source,
-            target: payload.target,
-            sourceHandle: payload.sourceHandle ?? null,
-            targetHandle: payload.targetHandle ?? null,
-          },
-        ]
+        [candidate]
       )
 
       if (safeEdges.length === 0) {
@@ -1534,13 +1597,14 @@ async function handleEdgeOperationTx(tx: any, workflowId: string, operation: str
         break
       }
 
+      const [safeEdge] = safeEdges
       await tx.insert(workflowEdges).values({
-        id: payload.id,
+        id: safeEdge.id,
         workflowId,
-        sourceBlockId: payload.source,
-        targetBlockId: payload.target,
-        sourceHandle: payload.sourceHandle || null,
-        targetHandle: payload.targetHandle || null,
+        sourceBlockId: safeEdge.source,
+        targetBlockId: safeEdge.target,
+        sourceHandle: normalizeWorkflowEdgeSourceHandle(safeEdge.sourceHandle),
+        targetHandle: normalizeWorkflowEdgeTargetHandle(safeEdge.targetHandle),
       })
 
       logger.debug(`Added edge ${payload.id}: ${payload.source} -> ${payload.target}`)
@@ -1755,13 +1819,15 @@ async function handleEdgesOperationTx(
 
       logger.info(`Batch adding ${edges.length} edges to workflow ${workflowId}`)
 
-      const candidates: EdgeAddCandidate[] = (edges as Array<Record<string, unknown>>).map((e) => ({
-        id: e.id as string,
-        source: e.source as string,
-        target: e.target as string,
-        sourceHandle: (e.sourceHandle as string | null) ?? null,
-        targetHandle: (e.targetHandle as string | null) ?? null,
-      }))
+      const candidates: EdgeAddCandidate[] = (edges as Array<Record<string, unknown>>).map((e) =>
+        canonicalizeEdgeAddCandidate({
+          id: e.id as string,
+          source: e.source as string,
+          target: e.target as string,
+          sourceHandle: (e.sourceHandle as string | null) ?? null,
+          targetHandle: (e.targetHandle as string | null) ?? null,
+        })
+      )
 
       const { safeEdges, droppedCounts, droppedDuplicates, droppedCyclic } =
         await filterEdgesForPersist(tx, workflowId, candidates)
@@ -1784,8 +1850,8 @@ async function handleEdgesOperationTx(
         workflowId,
         sourceBlockId: edge.source,
         targetBlockId: edge.target,
-        sourceHandle: edge.sourceHandle || null,
-        targetHandle: edge.targetHandle || null,
+        sourceHandle: normalizeWorkflowEdgeSourceHandle(edge.sourceHandle),
+        targetHandle: normalizeWorkflowEdgeTargetHandle(edge.targetHandle),
       }))
 
       await tx
@@ -2152,16 +2218,34 @@ async function handleWorkflowOperationTx(
 
       // Insert all edges from the new state
       if (edges && edges.length > 0) {
-        const edgeValues = edges.map((edge: any) => ({
+        const canonicalEdges = (edges as Array<Record<string, unknown>>).map((edge) =>
+          canonicalizeEdgeAddCandidate({
+            id: edge.id as string,
+            source: edge.source as string,
+            target: edge.target as string,
+            sourceHandle: (edge.sourceHandle as string | null) ?? null,
+            targetHandle: (edge.targetHandle as string | null) ?? null,
+          })
+        )
+        const uniqueEdges = filterUniqueWorkflowEdges(canonicalEdges, [])
+        const edgeValues = uniqueEdges.map((edge) => ({
           id: edge.id,
           workflowId,
           sourceBlockId: edge.source,
           targetBlockId: edge.target,
-          sourceHandle: edge.sourceHandle || null,
-          targetHandle: edge.targetHandle || null,
+          sourceHandle: edge.sourceHandle ?? null,
+          targetHandle: edge.targetHandle ?? null,
         }))
 
-        await tx.insert(workflowEdges).values(edgeValues)
+        if (uniqueEdges.length < edges.length) {
+          logger.info(`Dropped ${edges.length - uniqueEdges.length} duplicate edge(s)`, {
+            operation: WORKFLOW_OPERATIONS.REPLACE_STATE,
+          })
+        }
+
+        if (edgeValues.length > 0) {
+          await tx.insert(workflowEdges).values(edgeValues)
+        }
       }
 
       // Insert all loops from the new state
diff --git a/apps/realtime/src/middleware/permissions.test.ts b/apps/realtime/src/middleware/permissions.test.ts
index c109259f390..ad4bc8b7ddc 100644
--- a/apps/realtime/src/middleware/permissions.test.ts
+++ b/apps/realtime/src/middleware/permissions.test.ts
@@ -263,6 +263,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 69892a590a6..f9af2dc5189 100644
--- a/apps/realtime/src/middleware/permissions.ts
+++ b/apps/realtime/src/middleware/permissions.ts
@@ -26,9 +26,11 @@ 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,
+  BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
   BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE,
   BLOCK_OPERATIONS.REPLACE_CANONICAL_MODES,
   BLOCK_OPERATIONS.TOGGLE_HANDLES,
diff --git a/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
index 27ace3935de..e574b958e7d 100644
--- a/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/navbar-shell/navbar-shell.tsx
@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react'
 import { createContext, use, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
+import { FROSTED_GLASS_SURFACE } from '@/lib/ui/glass-surface'
 
 /**
  * Frosted near-white surface for the scrolled bar - `--bg` at 92% + a strong 40px
@@ -10,8 +11,7 @@ import { cn } from '@sim/emcn'
  * dropdown sheet ({@link MobileNav}) wears the exact same glass as the bar and the
  * two can never drift.
  */
-export const NAVBAR_GLASS_SURFACE =
-  'bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] backdrop-blur-2xl'
+export const NAVBAR_GLASS_SURFACE = FROSTED_GLASS_SURFACE
 
 interface NavbarFrostContextValue {
   /**
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index 6f5d5ff5705..4effe597eae 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 22b78338769..979d7c8bb75 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 2a2c3ad50aa..e66ff31ab00 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,30 +1,160 @@
-import { memo, useCallback } from 'react'
-import { Button, cn, Duplicate, PlayOutline, Tooltip, Trash, toast } from '@sim/emcn'
-import { ArrowLeftRight, ArrowUpDown, Ban, Circle, Lock, LogOut, Unlock } from '@sim/emcn/icons'
+import { type ComponentType, memo, useCallback, useState } from 'react'
+import {
+  Button,
+  Chip,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Duplicate,
+  PlayOutline,
+  Tooltip,
+  Trash,
+  toast,
+} from '@sim/emcn'
+import {
+  Ban,
+  BookOpen,
+  Circle,
+  Lock,
+  LogOut,
+  MoreHorizontal,
+  Palette,
+  Square,
+  Unlock,
+} from '@sim/emcn/icons'
+import {
+  DEFAULT_NOTE_COLOR,
+  isNoteColor,
+  NOTE_COLOR_OPTIONS,
+  type NoteColor,
+} from '@sim/workflow-renderer'
 import { useShallow } from 'zustand/react/shallow'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { useRunningActionSweep } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import {
-  getRunFromBlockDependencyState,
-  validateTriggerPaste,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import { validateTriggerPaste } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
-import { useIsCurrentWorkflowExecuting, useLastExecutionSnapshot } from '@/stores/execution'
+import { useExecutionStore, useIsCurrentWorkflowExecuting } from '@/stores/execution'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'size-[23px] rounded-lg p-0',
-  'border border-[var(--border)] bg-[var(--surface-5)]',
-  'text-[var(--text-secondary)]',
-  'hover-hover:border-transparent hover-hover:bg-[var(--brand-secondary)] hover-hover:!text-[var(--text-inverse)]',
-  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover-hover:bg-[var(--brand-secondary)]',
+  'size-[24px] rounded-md p-0',
+  'border-none bg-transparent text-[var(--text-icon)]',
+  'hover-hover:bg-[var(--surface-5)] hover-hover:!text-[var(--text-primary)]',
+  'dark:hover-hover:bg-[var(--surface-4)]',
+  'transition-[background-color,color,opacity,transform] duration-150 active:scale-[0.96]',
 ].join(' ')
 
-const ICON_SIZE = 'size-[11px]'
+const INLINE_ACTION_BUTTON_STYLES = [
+  'size-[28px] shrink-0 justify-start overflow-hidden rounded-md bg-transparent px-1.5 py-0 text-[var(--text-icon)]',
+  'group-hover/inline-action:w-[var(--inline-action-width)] group-hover/inline-action:bg-[var(--surface-5)] group-hover/inline-action:text-[var(--text-primary)]',
+  'group-focus-within/inline-action:w-[var(--inline-action-width)] group-focus-within/inline-action:bg-[var(--surface-5)] group-focus-within/inline-action:text-[var(--text-primary)]',
+  'transition-[width,background-color,color,transform] duration-150 [transition-timing-function:cubic-bezier(0.2,0,0,1)] active:scale-[0.96] motion-reduce:transition-none',
+].join(' ')
+
+const ICON_SIZE = 'size-[14px]'
+const INLINE_ICON_SIZE = 'size-[16px] shrink-0'
+
+type ActionId = 'run' | 'enabled' | 'lock' | 'duplicate' | 'remove' | 'delete' | 'color'
+
+const INLINE_ACTION_WIDTH_STYLES: Record<ActionId, string> = {
+  run: '[--inline-action-width:90px]',
+  enabled: '[--inline-action-width:86px]',
+  lock: '[--inline-action-width:82px]',
+  duplicate: '[--inline-action-width:100px]',
+  remove: '[--inline-action-width:104px]',
+  delete: '[--inline-action-width:78px]',
+  color: '[--inline-action-width:72px]',
+}
+
+function InlineActionLabel({
+  children,
+  persistent = false,
+}: {
+  children: string
+  persistent?: boolean
+}) {
+  return (
+    <span
+      className={cn(
+        'ml-1.5 shrink-0 whitespace-nowrap font-medium text-small leading-none',
+        !persistent &&
+          '-translate-x-1 opacity-0 transition-[opacity,transform] duration-100 [transition-timing-function:cubic-bezier(0.2,0,0,1)] group-focus-within/inline-action:translate-x-0 group-focus-within/inline-action:opacity-100 group-hover/inline-action:translate-x-0 group-hover/inline-action:opacity-100 motion-reduce:transition-none'
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function RunningActionIcon({ inline = false }: { inline?: boolean }) {
+  return (
+    <span
+      className={cn(
+        'relative grid place-items-center',
+        inline ? 'size-[16px]' : 'size-[14px] translate-x-[8px] translate-y-px'
+      )}
+      aria-hidden='true'
+    >
+      <span className='col-start-1 row-start-1 opacity-100 transition-opacity duration-100 group-hover/run:opacity-0 group-focus-visible/run:opacity-0 motion-safe:animate-spin motion-reduce:transition-none'>
+        <svg className={inline ? 'size-[16px]' : 'size-[14px]'} viewBox='0 0 24 24' fill='none'>
+          <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='2' opacity='0.25' />
+          <circle
+            cx='12'
+            cy='12'
+            r='10'
+            stroke='currentColor'
+            strokeWidth='2'
+            strokeLinecap='round'
+            strokeDasharray='18 45'
+          />
+        </svg>
+      </span>
+      <span className='col-start-1 row-start-1 opacity-0 transition-opacity duration-100 group-hover/run:opacity-100 group-focus-visible/run:opacity-100 motion-reduce:transition-none'>
+        <Square className='size-[11px] fill-current' strokeWidth={0} />
+      </span>
+    </span>
+  )
+}
+
+interface InlineBlockStatusProps {
+  icon: ComponentType<{ className?: string }>
+  label: string
+  disabled: boolean
+  onClick: () => void
+}
+
+function InlineBlockStatus({ icon: Icon, label, disabled, onClick }: InlineBlockStatusProps) {
+  return (
+    <Tooltip.Root preferAbove>
+      <Tooltip.Trigger asChild>
+        <span className='inline-flex'>
+          <Chip
+            variant='border'
+            leftIcon={Icon}
+            aria-label={label}
+            className='size-[30px] justify-center p-0'
+            disabled={disabled}
+            onClick={(event) => {
+              event.stopPropagation()
+              onClick()
+            }}
+          />
+        </span>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>{label}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
 
 /**
  * Props for the ActionBar component
@@ -36,6 +166,20 @@ interface ActionBarProps {
   blockType: string
   /** Whether the action bar is disabled */
   disabled?: boolean
+  /** Places the actions inside the workflow card's border swell. */
+  variant?: 'floating' | 'swell' | 'inline'
+  /** Limits an inline action bar to the block run control or overflow menu. */
+  inlineActions?: 'all' | 'run' | 'menu'
+  /** Whether this block is currently executing. */
+  isRunning?: boolean
+  /** Whether any block in the current workflow is executing. */
+  isWorkflowRunning?: boolean
+  noteColor?: NoteColor
+  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
 }
 
 /**
@@ -45,17 +189,27 @@ interface ActionBarProps {
  * @component
  */
 export const ActionBar = memo(
-  function ActionBar({ blockId, blockType, disabled = false }: ActionBarProps) {
+  function ActionBar({
+    blockId,
+    blockType,
+    disabled = false,
+    variant = 'floating',
+    inlineActions = 'all',
+    isRunning = false,
+    isWorkflowRunning = false,
+    noteColor = DEFAULT_NOTE_COLOR,
+    onNoteColorChange,
+    onNoteColorMenuOpen,
+    onOpenDocs,
+  }: ActionBarProps) {
     const {
       collaborativeBatchAddBlocks,
       collaborativeBatchRemoveBlocks,
       collaborativeBatchToggleBlockEnabled,
-      collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
     } = useCollaborativeWorkflow()
     const { setPendingSelection } = useWorkflowRegistry()
-    const { handleRunFromBlock } = useWorkflowExecution()
-
+    const { handleCancelExecution, handleRunFromBlock } = useWorkflowExecution()
     const handleDuplicateBlock = useCallback(() => {
       const { copyBlocks, preparePasteData } = useWorkflowRegistry.getState()
       const existingBlocks = useWorkflowStore.getState().blocks
@@ -81,46 +235,163 @@ export const ActionBar = memo(
       )
     }, [blockId, collaborativeBatchAddBlocks, setPendingSelection])
 
-    const {
-      isEnabled,
-      horizontalHandles,
-      parentId,
-      parentType,
-      isLocked,
-      isParentLocked,
-      isParentDisabled,
-    } = useWorkflowStore(
-      useShallow((state) => {
-        const block = state.blocks[blockId]
-        const parentId = block?.data?.parentId
-        const parentBlock = parentId ? state.blocks[parentId] : undefined
-        return {
-          isEnabled: block?.enabled ?? true,
-          horizontalHandles: block?.horizontalHandles ?? false,
-          parentId,
-          parentType: parentBlock?.type,
-          isLocked: block?.locked ?? false,
-          isParentLocked: parentBlock?.locked ?? false,
-          isParentDisabled: parentBlock ? !parentBlock.enabled : false,
-        }
-      })
-    )
+    const { isEnabled, parentId, parentType, isLocked, isParentLocked, isParentDisabled } =
+      useWorkflowStore(
+        useShallow((state) => {
+          const block = state.blocks[blockId]
+          const parentId = block?.data?.parentId
+          const parentBlock = parentId ? state.blocks[parentId] : undefined
+          return {
+            isEnabled: block?.enabled ?? true,
+            parentId,
+            parentType: parentBlock?.type,
+            isLocked: block?.locked ?? false,
+            isParentLocked: parentBlock?.locked ?? false,
+            isParentDisabled: parentBlock ? !parentBlock.enabled : false,
+          }
+        })
+      )
 
     const { activeWorkflowId } = useWorkflowRegistry()
     const isExecuting = useIsCurrentWorkflowExecuting()
-    const snapshot = useLastExecutionSnapshot(activeWorkflowId)
+    const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
     const userPermissions = useUserPermissionsContext()
     const edges = useWorkflowStore((state) => state.edges)
 
     const isStartBlock = isInputDefinitionTrigger(blockType)
     const isResponseBlock = blockType === 'response'
     const isNoteBlock = blockType === 'note'
-    const isSubflowBlock = blockType === 'loop' || blockType === 'parallel'
     const isInsideSubflow = parentId && (parentType === 'loop' || parentType === 'parallel')
+    const cantEnable = !isEnabled && isParentDisabled
+    const isEffectivelyLocked = isLocked || isParentLocked
+    const isEffectivelyDisabled = !isEnabled || isParentDisabled
+
+    const snapshot = activeWorkflowId ? getLastExecutionSnapshot(activeWorkflowId) : null
+    const incomingEdges = edges.filter((edge) => edge.target === blockId)
+    const isTriggerBlock = incomingEdges.length === 0
 
-    const { dependenciesSatisfied } = getRunFromBlockDependencyState(blockId, edges, snapshot)
+    // Check if each source block is either executed OR is a trigger block (triggers don't need prior execution)
+    const isSourceSatisfied = (sourceId: string) => {
+      if (snapshot?.executedBlocks.includes(sourceId)) return true
+      // Check if source is a trigger (has no incoming edges itself)
+      const sourceIncomingEdges = edges.filter((edge) => edge.target === sourceId)
+      return sourceIncomingEdges.length === 0
+    }
+
+    // Non-trigger blocks need a snapshot to exist (so upstream outputs are available)
+    const dependenciesSatisfied =
+      isTriggerBlock || (snapshot && incomingEdges.every((edge) => isSourceSatisfied(edge.source)))
     const canRunFromBlock =
       dependenciesSatisfied && !isNoteBlock && !isInsideSubflow && !isExecuting
+    const isSwell = variant === 'swell'
+    const isInline = variant === 'inline'
+    const isPersistentInlineRun = isInline && inlineActions === 'run'
+    const isCompactDisabledInlineRun =
+      isPersistentInlineRun && !isWorkflowRunning && (isEffectivelyLocked || isEffectivelyDisabled)
+    const firstActionId: ActionId = isNoteBlock
+      ? 'color'
+      : !isInsideSubflow || isWorkflowRunning
+        ? 'run'
+        : 'enabled'
+    const runningSweepActionIds: ActionId[] = [
+      ...(!isNoteBlock ? (['enabled'] as const) : []),
+      ...(userPermissions.canAdmin ? (['lock'] as const) : []),
+      ...(!isStartBlock && !isResponseBlock ? (['duplicate'] as const) : []),
+      ...(!isInline && !isStartBlock && isInsideSubflow ? (['remove'] as const) : []),
+      'delete',
+    ]
+    const runningSweepFilledCount = useRunningActionSweep(isRunning, runningSweepActionIds.length)
+    const [isInlineMenuOpen, setIsInlineMenuOpen] = useState(false)
+    /**
+     * Icon treatment follows the swell's own fill, published by the card view
+     * as `data-node-selected`. Keying off React Flow's raw `selected` would
+     * diverge: an executing block keeps the success ring, so the swell stays
+     * gray (or retracts) while `selected` is still true.
+     */
+    const actionButtonStyles = cn(
+      isInline ? INLINE_ACTION_BUTTON_STYLES : ACTION_BUTTON_STYLES,
+      isSwell && [
+        'group-data-[node-selected]:text-[var(--surface-2)]',
+        'hover-hover:group-data-[node-selected]:bg-[var(--surface-2)]',
+        'hover-hover:group-data-[node-selected]:!text-[var(--text-primary)]',
+      ]
+    )
+    /*
+     * End-button silhouettes: a straight diagonal edge running parallel to
+     * the gray swell's taper above it (slope 20/24 ≈ 40° from vertical — the
+     * falloff curve's central gradient), blended into the top edge with a
+     * generous r8 arc and meeting the bottom edge with a pointier r2.5 arc;
+     * the outer corners keep a modest r4. The right (delete) shape is the
+     * exact mirror of the left (first action) shape. Width is 40px — outer
+     * diagonal pushed out so the glyph has room before the cut; inner side
+     * stays tight against neighboring actions. The row is right-[24px] to
+     * match the swell anchor inset (right-aligned on the card). Glyphs shift
+     * away from the outer cut (+6 / -6). Play gets an extra +2px because the
+     * triangle’s optical center sits left of its viewBox center; the Note
+     * palette uses the same inset so its first-action padding matches.
+     */
+    const getActionButtonStyles = (actionId: ActionId) => {
+      const runningSweepIndex = runningSweepActionIds.indexOf(actionId)
+      const isRunningSweepSlot = isRunning && runningSweepIndex >= 0
+      const isRunningSweepFilled = isRunningSweepSlot && runningSweepIndex < runningSweepFilledCount
+
+      return cn(
+        actionButtonStyles,
+        isInline && !isPersistentInlineRun && INLINE_ACTION_WIDTH_STYLES[actionId],
+        isInline &&
+          !isPersistentInlineRun &&
+          actionId === 'run' && [
+            'border border-transparent',
+            'group-hover/inline-action:border-[var(--border)] group-hover/inline-action:!bg-transparent',
+            'group-focus-within/inline-action:border-[var(--border)] group-focus-within/inline-action:!bg-transparent',
+          ],
+        !isWorkflowRunning &&
+          ((actionId === 'enabled' && !isEnabled) || (actionId === 'lock' && isLocked)) && [
+            'bg-[var(--text-secondary)] text-[var(--text-inverse)]',
+          ],
+        actionId === 'run' &&
+          isRunning && [
+            '!bg-[var(--text-secondary)] !text-[var(--text-inverse)]',
+            'dark:!bg-[var(--surface-4)] dark:!text-[var(--text-primary)]',
+            'hover-hover:!bg-[var(--white)] hover-hover:!text-[var(--surface-inverted)]',
+            'dark:hover-hover:!bg-[var(--white)] dark:hover-hover:!text-[var(--surface-inverted)]',
+            'focus-visible:!bg-[var(--white)] focus-visible:!text-[var(--surface-inverted)]',
+            'dark:focus-visible:!bg-[var(--white)] dark:focus-visible:!text-[var(--surface-inverted)]',
+          ],
+        isSwell &&
+          actionId === firstActionId &&
+          "!w-[40px] [clip-path:path('M23.75_0A8_8_0_0_0_17.6_2.88L3.41_19.9A2.5_2.5_0_0_0_5.34_24L36_24A4_4_0_0_0_40_20L40_4A4_4_0_0_0_36_0Z')] [&>svg]:translate-y-px",
+        isSwell &&
+          actionId === firstActionId &&
+          (actionId === 'run' || actionId === 'color'
+            ? '[&>svg]:translate-x-[8px]'
+            : '[&>svg]:translate-x-[6px]'),
+        isSwell &&
+          actionId === 'delete' &&
+          "!w-[40px] [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] [&_svg]:-translate-x-[6px] [&_svg]:translate-y-px",
+        isWorkflowRunning &&
+          !isRunning && [
+            '!bg-transparent !opacity-25',
+            actionId === 'run'
+              ? [
+                  'hover-hover:!bg-[var(--surface-2)] hover-hover:!text-[var(--text-primary)] hover-hover:!opacity-100',
+                  'focus-visible:!bg-[var(--surface-2)] focus-visible:!text-[var(--text-primary)] focus-visible:!opacity-100',
+                ]
+              : 'hover-hover:!bg-transparent dark:hover-hover:!bg-transparent',
+          ],
+        isRunningSweepSlot && [
+          '!opacity-100 [&_svg]:!opacity-0',
+          isRunningSweepFilled
+            ? '!bg-[var(--surface-2)] hover-hover:!bg-[var(--surface-2)]'
+            : '!bg-transparent hover-hover:!bg-transparent',
+          'motion-reduce:!bg-[var(--surface-2)] motion-reduce:transition-none',
+        ],
+        /* `!` is required: these buttons are also `disabled` when locked, and
+           the emcn Button base carries `disabled:opacity-70`, which outranks a
+           plain `opacity-35` on specificity. */
+        !isWorkflowRunning && actionId !== 'lock' && isLocked && '!opacity-35'
+      )
+    }
 
     const handleRunFromBlockClick = useCallback(() => {
       if (!activeWorkflowId || !canRunFromBlock) return
@@ -142,205 +413,481 @@ export const ActionBar = memo(
 
     return (
       <div
+        data-workflow-action-bar-swell={isSwell ? '' : undefined}
         className={cn(
-          '-top-[46px] pointer-events-auto absolute right-0',
-          'flex flex-row items-center',
-          'opacity-0 transition-opacity duration-200 group-hover:opacity-100',
-          'gap-[5px] rounded-[10px] p-[5px]',
-          'border border-[var(--border)] bg-[var(--surface-2)]',
-          'dark:border-transparent dark:bg-[var(--surface-4)]'
+          'rounded-lg',
+          isSwell
+            ? [
+                'absolute',
+                // Above RF handles (`z-30`) so icons stay clickable when a top edge crosses.
+                '-top-[28px] right-[24px] z-[40] h-[28px] w-fit overflow-hidden px-[0.2rem] py-0.5',
+                'pointer-events-auto',
+              ]
+            : isInline
+              ? 'relative w-fit'
+              : [
+                  'absolute',
+                  '-top-[40px] pointer-events-auto right-0 flex flex-row items-center gap-[2px] p-[3px]',
+                  'border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]',
+                  'opacity-0 transition-opacity duration-[150ms] group-hover:opacity-100',
+                ]
         )}
       >
-        {!isNoteBlock && !isInsideSubflow && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <span className='inline-flex'>
-                <Button
-                  variant='ghost'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    if (canRunFromBlock && !disabled) {
-                      handleRunFromBlockClick()
+        <div
+          className={cn(
+            'flex flex-row items-center',
+            isInline ? 'gap-1' : 'gap-[2px]',
+            isSwell && [
+              'pointer-events-none h-full opacity-0 transition-opacity duration-[30ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              'group-data-[action-menu-ready]:pointer-events-auto group-data-[action-menu-ready]:opacity-100 group-data-[action-menu-ready]:duration-100',
+            ]
+          )}
+        >
+          {isPersistentInlineRun && isEffectivelyDisabled && (
+            <InlineBlockStatus
+              icon={Ban}
+              label={isParentDisabled ? 'Parent container is disabled' : 'Enable block'}
+              disabled={
+                isWorkflowRunning || disabled || isLocked || isParentLocked || isParentDisabled
+              }
+              onClick={() => collaborativeBatchToggleBlockEnabled([blockId])}
+            />
+          )}
+          {isPersistentInlineRun && isEffectivelyLocked && (
+            <InlineBlockStatus
+              icon={Lock}
+              label={
+                isParentLocked
+                  ? 'Parent container is locked'
+                  : userPermissions.canAdmin
+                    ? 'Unlock block'
+                    : 'Block is locked'
+              }
+              disabled={
+                isWorkflowRunning || disabled || isParentLocked || !userPermissions.canAdmin
+              }
+              onClick={() => collaborativeBatchToggleLocked([blockId])}
+            />
+          )}
+          {!isNoteBlock &&
+            (!isInsideSubflow || isWorkflowRunning) &&
+            (!isInline || inlineActions !== 'menu') && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className={cn('inline-flex', isInline && 'group/inline-action')}>
+                    {isPersistentInlineRun ? (
+                      <Chip
+                        variant='border'
+                        leftIcon={isWorkflowRunning ? undefined : PlayOutline}
+                        leftAdornment={
+                          isWorkflowRunning ? (
+                            isRunning ? (
+                              <RunningActionIcon inline />
+                            ) : (
+                              <Square
+                                className='size-[14px] shrink-0 fill-current'
+                                aria-hidden='true'
+                                strokeWidth={0}
+                              />
+                            )
+                          ) : undefined
+                        }
+                        aria-label={isWorkflowRunning ? 'Stop workflow' : 'Run block'}
+                        className={cn(
+                          isCompactDisabledInlineRun && 'size-[30px] justify-center p-0'
+                        )}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          if (isWorkflowRunning) {
+                            handleCancelExecution()
+                            return
+                          }
+                          if (canRunFromBlock && !disabled) {
+                            handleRunFromBlockClick()
+                          }
+                        }}
+                        disabled={
+                          !isWorkflowRunning &&
+                          (disabled ||
+                            !canRunFromBlock ||
+                            isEffectivelyLocked ||
+                            isEffectivelyDisabled)
+                        }
+                      >
+                        {isWorkflowRunning
+                          ? 'Stop'
+                          : isCompactDisabledInlineRun
+                            ? null
+                            : 'Run block'}
+                      </Chip>
+                    ) : (
+                      <Button
+                        variant='ghost'
+                        aria-label={isWorkflowRunning ? 'Stop workflow' : 'Run block'}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          if (isWorkflowRunning) {
+                            handleCancelExecution()
+                            return
+                          }
+                          if (canRunFromBlock && !disabled) {
+                            handleRunFromBlockClick()
+                          }
+                        }}
+                        className={cn(
+                          getActionButtonStyles('run'),
+                          isWorkflowRunning && 'group/run'
+                        )}
+                        disabled={
+                          !isWorkflowRunning &&
+                          (disabled ||
+                            !canRunFromBlock ||
+                            isEffectivelyLocked ||
+                            isEffectivelyDisabled)
+                        }
+                      >
+                        {isWorkflowRunning ? (
+                          isRunning ? (
+                            <RunningActionIcon inline={isInline} />
+                          ) : (
+                            <Square
+                              className={cn(
+                                'shrink-0 fill-current',
+                                isInline ? 'size-[14px]' : 'size-[11px]'
+                              )}
+                              aria-hidden='true'
+                              strokeWidth={0}
+                            />
+                          )
+                        ) : (
+                          <PlayOutline className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                        )}
+                        {isInline && (
+                          <InlineActionLabel>
+                            {isWorkflowRunning ? 'Stop' : 'Run block'}
+                          </InlineActionLabel>
+                        )}
+                      </Button>
+                    )}
+                  </span>
+                </Tooltip.Trigger>
+                {(!isInline || isCompactDisabledInlineRun) && (
+                  <Tooltip.Content side='top'>
+                    {(() => {
+                      if (isWorkflowRunning) return 'Stop'
+                      if (isEffectivelyLocked) return 'Block is locked'
+                      if (isEffectivelyDisabled) return 'Block is disabled'
+                      if (disabled) return getTooltipMessage('Run')
+                      if (isExecuting) return 'Running...'
+                      if (!dependenciesSatisfied) return 'Run previous blocks first'
+                      return 'Run'
+                    })()}
+                  </Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            )}
+
+          {!isNoteBlock && !isInline && (
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <span className={cn('inline-flex', isInline && 'group/inline-action')}>
+                  <Button
+                    variant='ghost'
+                    aria-label={isEnabled ? 'Disable block' : 'Enable block'}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!disabled && !isLocked && !isParentLocked && !cantEnable) {
+                        collaborativeBatchToggleBlockEnabled([blockId])
+                      }
+                    }}
+                    className={getActionButtonStyles('enabled')}
+                    disabled={
+                      isWorkflowRunning ||
+                      disabled ||
+                      isLocked ||
+                      isParentLocked ||
+                      (!isEnabled && isParentDisabled)
                     }
+                  >
+                    {isEnabled ? (
+                      <Circle className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                    ) : (
+                      <Ban className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                    )}
+                    {isInline && (
+                      <InlineActionLabel>{isEnabled ? 'Disable' : 'Enable'}</InlineActionLabel>
+                    )}
+                  </Button>
+                </span>
+              </Tooltip.Trigger>
+              {!isInline && (
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked
+                    ? 'Block is locked'
+                    : !isEnabled && isParentDisabled
+                      ? 'Parent container is disabled'
+                      : getTooltipMessage(isEnabled ? 'Disable' : 'Enable')}
+                </Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          )}
+
+          {isNoteBlock && (
+            <DropdownMenu
+              onOpenChange={(open) => {
+                if (open) onNoteColorMenuOpen?.()
+              }}
+            >
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant='ghost'
+                      className={getActionButtonStyles('color')}
+                      disabled={
+                        isWorkflowRunning ||
+                        disabled ||
+                        isLocked ||
+                        isParentLocked ||
+                        !onNoteColorChange
+                      }
+                      aria-label='Note color'
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      <Palette className={ICON_SIZE} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>Color</Tooltip.Content>
+              </Tooltip.Root>
+              <DropdownMenuContent
+                align='center'
+                side='top'
+                sideOffset={8}
+                className='w-fit min-w-0 rounded-full p-1'
+              >
+                <DropdownMenuRadioGroup
+                  value={noteColor}
+                  className='flex flex-col gap-0.5'
+                  onValueChange={(value) => {
+                    if (isNoteColor(value)) onNoteColorChange?.(value)
                   }}
-                  className={ACTION_BUTTON_STYLES}
-                  disabled={disabled || !canRunFromBlock}
                 >
-                  <PlayOutline className={ICON_SIZE} />
-                </Button>
-              </span>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {(() => {
-                if (disabled) return getTooltipMessage('Run from block')
-                if (isExecuting) return 'Running...'
-                if (!dependenciesSatisfied) return 'Run previous blocks first'
-                return 'Run from block'
-              })()}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+                  {NOTE_COLOR_OPTIONS.map((option) => (
+                    <DropdownMenuRadioItem
+                      key={option.id}
+                      value={option.id}
+                      aria-label={option.label}
+                      className='size-[28px] cursor-pointer justify-center rounded-full p-0 [&>span:first-child]:hidden'
+                    >
+                      <span
+                        className={cn(
+                          'size-[16px] rounded-full border border-black/15',
+                          option.swatchClassName,
+                          option.id === noteColor &&
+                            'ring-2 ring-[var(--text-primary)] ring-offset-1 ring-offset-[var(--bg)]'
+                        )}
+                      />
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
 
-        {!isNoteBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  // Can't enable if parent is disabled (must enable parent first)
-                  const cantEnable = !isEnabled && isParentDisabled
-                  if (!disabled && !isLocked && !isParentLocked && !cantEnable) {
-                    collaborativeBatchToggleBlockEnabled([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={
-                  disabled || isLocked || isParentLocked || (!isEnabled && isParentDisabled)
-                }
-              >
-                {isEnabled ? <Circle className={ICON_SIZE} /> : <Ban className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : !isEnabled && isParentDisabled
-                  ? 'Parent container is disabled'
-                  : getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+          {userPermissions.canAdmin && !isInline && (
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <span className={cn('inline-flex', isInline && 'group/inline-action')}>
+                  <Button
+                    variant='ghost'
+                    aria-label={isLocked ? 'Unlock block' : 'Lock block'}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!disabled && !(isLocked && isParentLocked)) {
+                        collaborativeBatchToggleLocked([blockId])
+                      }
+                    }}
+                    className={getActionButtonStyles('lock')}
+                    disabled={isWorkflowRunning || disabled || (isLocked && isParentLocked)}
+                  >
+                    {isLocked ? (
+                      <Lock className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                    ) : (
+                      <Unlock className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                    )}
+                    {isInline && (
+                      <InlineActionLabel>{isLocked ? 'Unlock' : 'Lock'}</InlineActionLabel>
+                    )}
+                  </Button>
+                </span>
+              </Tooltip.Trigger>
+              {!isInline && (
+                <Tooltip.Content side='top'>
+                  {isLocked && isParentLocked
+                    ? 'Parent container is locked'
+                    : isLocked
+                      ? 'Unlock'
+                      : 'Lock'}
+                </Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          )}
 
-        {userPermissions.canAdmin && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  // Can't unlock a block if its parent container is locked
-                  if (!disabled && !(isLocked && isParentLocked)) {
-                    collaborativeBatchToggleLocked([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || (isLocked && isParentLocked)}
-              >
-                {isLocked ? <Unlock className={ICON_SIZE} /> : <Lock className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked && isParentLocked
-                ? 'Parent container is locked'
-                : isLocked
-                  ? 'Unlock Block'
-                  : 'Lock Block'}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+          {!isStartBlock && !isResponseBlock && !isInline && (
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <span className={cn('inline-flex', isInline && 'group/inline-action')}>
+                  <Button
+                    variant='ghost'
+                    aria-label='Duplicate block'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!disabled && !isLocked && !isParentLocked) {
+                        handleDuplicateBlock()
+                      }
+                    }}
+                    className={getActionButtonStyles('duplicate')}
+                    disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
+                  >
+                    <Duplicate className={isInline ? INLINE_ICON_SIZE : ICON_SIZE} />
+                    {isInline && <InlineActionLabel>Duplicate</InlineActionLabel>}
+                  </Button>
+                </span>
+              </Tooltip.Trigger>
+              {!isInline && (
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked ? 'Block is locked' : getTooltipMessage('Duplicate')}
+                </Tooltip.Content>
+              )}
+            </Tooltip.Root>
+          )}
 
-        {!isStartBlock && !isResponseBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && !isLocked && !isParentLocked) {
-                    handleDuplicateBlock()
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || isLocked || isParentLocked}
-              >
-                <Duplicate className={ICON_SIZE} />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage('Duplicate Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+          {!isInline &&
+            !isStartBlock &&
+            parentId &&
+            (parentType === 'loop' || parentType === 'parallel') && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <span className='inline-flex'>
+                    <Button
+                      variant='ghost'
+                      aria-label='Remove block from subflow'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (!disabled && userPermissions.canEdit && !isLocked && !isParentLocked) {
+                          window.dispatchEvent(
+                            new CustomEvent('remove-from-subflow', {
+                              detail: { blockIds: [blockId] },
+                            })
+                          )
+                        }
+                      }}
+                      className={getActionButtonStyles('remove')}
+                      disabled={
+                        isWorkflowRunning ||
+                        disabled ||
+                        !userPermissions.canEdit ||
+                        isLocked ||
+                        isParentLocked
+                      }
+                    >
+                      <LogOut className={ICON_SIZE} />
+                    </Button>
+                  </span>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>
+                  {isLocked || isParentLocked
+                    ? 'Block is locked'
+                    : getTooltipMessage('Remove from Subflow')}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
 
-        {!isNoteBlock && !isSubflowBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && !isLocked && !isParentLocked) {
-                    collaborativeBatchToggleBlockHandles([blockId])
+          {isInline && inlineActions !== 'run' && (
+            <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'>
+                <DropdownMenuItem
+                  onSelect={() => collaborativeBatchToggleBlockEnabled([blockId])}
+                  disabled={
+                    isWorkflowRunning || disabled || isLocked || isParentLocked || cantEnable
                   }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || isLocked || isParentLocked}
-              >
-                {horizontalHandles ? (
-                  <ArrowLeftRight className={ICON_SIZE} />
-                ) : (
-                  <ArrowUpDown className={ICON_SIZE} />
+                >
+                  {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>
                 )}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-
-        {!isStartBlock && parentId && (parentType === 'loop' || parentType === 'parallel') && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled && userPermissions.canEdit && !isLocked && !isParentLocked) {
-                    window.dispatchEvent(
-                      new CustomEvent('remove-from-subflow', { detail: { blockIds: [blockId] } })
-                    )
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled || !userPermissions.canEdit || isLocked || isParentLocked}
-              >
-                <LogOut className={ICON_SIZE} />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {isLocked || isParentLocked
-                ? 'Block is locked'
-                : getTooltipMessage('Remove from Subflow')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
+                {!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>
+          )}
 
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={(e) => {
-                e.stopPropagation()
-                if (!disabled && !isLocked && !isParentLocked) {
-                  collaborativeBatchRemoveBlocks([blockId])
-                }
-              }}
-              className={ACTION_BUTTON_STYLES}
-              disabled={disabled || isLocked || isParentLocked}
-            >
-              <Trash className={ICON_SIZE} />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            {isLocked || isParentLocked ? 'Block is locked' : getTooltipMessage('Delete Block')}
-          </Tooltip.Content>
-        </Tooltip.Root>
+          {!isInline && (
+            <Tooltip.Root preferAbove>
+              <Tooltip.Trigger asChild>
+                <span className='inline-flex'>
+                  <Button
+                    variant='ghost'
+                    aria-label='Delete block'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (!disabled && !isLocked && !isParentLocked) {
+                        collaborativeBatchRemoveBlocks([blockId])
+                      }
+                    }}
+                    className={getActionButtonStyles('delete')}
+                    disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
+                  >
+                    <Trash className={ICON_SIZE} />
+                  </Button>
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>
+                {isLocked || isParentLocked ? 'Block is locked' : getTooltipMessage('Delete')}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </div>
       </div>
     )
   },
@@ -356,7 +903,15 @@ export const ActionBar = memo(
     return (
       prevProps.blockId === nextProps.blockId &&
       prevProps.blockType === nextProps.blockType &&
-      prevProps.disabled === nextProps.disabled
+      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.onOpenDocs === nextProps.onOpenDocs
     )
   }
 )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.test.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.test.ts
new file mode 100644
index 00000000000..a9e2f248ef9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import {
+  advanceActionSweep,
+  INITIAL_ACTION_SWEEP_STATE,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep'
+
+describe('advanceActionSweep', () => {
+  it('fills action slots cumulatively from left to right', () => {
+    const first = advanceActionSweep(INITIAL_ACTION_SWEEP_STATE, 3)
+    const second = advanceActionSweep(first, 3)
+    const third = advanceActionSweep(second, 3)
+
+    expect([first.filledCount, second.filledCount, third.filledCount]).toEqual([1, 2, 3])
+    expect(third.direction).toBe(-1)
+  })
+
+  it('empties action slots from right to left before restarting', () => {
+    const second = advanceActionSweep({ filledCount: 3, direction: -1 }, 3)
+    const first = advanceActionSweep(second, 3)
+    const empty = advanceActionSweep(first, 3)
+
+    expect([second.filledCount, first.filledCount, empty.filledCount]).toEqual([2, 1, 0])
+    expect(empty.direction).toBe(1)
+  })
+
+  it('stays empty when there are no action slots', () => {
+    expect(advanceActionSweep({ filledCount: 2, direction: -1 }, 0)).toEqual(
+      INITIAL_ACTION_SWEEP_STATE
+    )
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.ts
new file mode 100644
index 00000000000..d4d22106145
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+
+const ACTION_SWEEP_INTERVAL_MS = 160
+
+interface ActionSweepState {
+  filledCount: number
+  direction: 1 | -1
+}
+
+export const INITIAL_ACTION_SWEEP_STATE: ActionSweepState = {
+  filledCount: 0,
+  direction: 1,
+}
+
+/** Advances the cumulative action-slot sweep by one frame. */
+export function advanceActionSweep(state: ActionSweepState, slotCount: number): ActionSweepState {
+  if (slotCount <= 0) return INITIAL_ACTION_SWEEP_STATE
+
+  const nextCount = state.filledCount + state.direction
+  if (nextCount >= slotCount) {
+    return { filledCount: slotCount, direction: -1 }
+  }
+  if (nextCount <= 0) {
+    return INITIAL_ACTION_SWEEP_STATE
+  }
+  return { filledCount: nextCount, direction: state.direction }
+}
+
+/** Runs a cumulative left-to-right, right-to-left sweep while a block executes. */
+export function useRunningActionSweep(isRunning: boolean, slotCount: number): number {
+  const [state, setState] = useState<ActionSweepState>(INITIAL_ACTION_SWEEP_STATE)
+
+  useEffect(() => {
+    setState(INITIAL_ACTION_SWEEP_STATE)
+    if (!isRunning || slotCount <= 0) return
+
+    const intervalId = window.setInterval(() => {
+      setState((current) => advanceActionSweep(current, slotCount))
+    }, ACTION_SWEEP_INTERVAL_MS)
+
+    return () => window.clearInterval(intervalId)
+  }, [isRunning, slotCount])
+
+  return isRunning ? state.filledCount : 0
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
index acc8e422da7..c92301ffe9b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
@@ -11,7 +11,6 @@ export interface BlockInfo {
   id: string
   type: string
   enabled: boolean
-  horizontalHandles: boolean
   parentId?: string
   parentType?: string
   locked?: boolean
@@ -34,7 +33,6 @@ export interface BlockMenuProps {
   onDuplicate: () => void
   onDelete: () => void
   onToggleEnabled: () => void
-  onToggleHandles: () => void
   onRemoveFromSubflow: () => void
   onOpenEditor: () => void
   onRename: () => void
@@ -74,7 +72,6 @@ export function BlockMenu({
   onDuplicate,
   onDelete,
   onToggleEnabled,
-  onToggleHandles,
   onRemoveFromSubflow,
   onOpenEditor,
   onRename,
@@ -207,17 +204,6 @@ export function BlockMenu({
             {hasBlockWithDisabledParent ? 'Parent is disabled' : getToggleEnabledLabel()}
           </PopoverItem>
         )}
-        {!allNoteBlocks && !isSubflow && (
-          <PopoverItem
-            disabled={disableEdit}
-            onClick={() => {
-              onToggleHandles()
-              onClose()
-            }}
-          >
-            Flip Handles
-          </PopoverItem>
-        )}
         {canRemoveFromSubflow && (
           <PopoverItem
             disabled={disableEdit}
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 58214dd8dcb..98182ff4708 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/connection-block-selector/connection-block-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
new file mode 100644
index 00000000000..138e5e018c9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
@@ -0,0 +1,505 @@
+'use client'
+
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, cn, X } from '@sim/emcn'
+import { WorkflowBlockBorder, type WorkflowBorderPort } from '@sim/workflow-renderer'
+import { Command } from 'cmdk'
+import { Search } from 'lucide-react'
+import { useParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { Handle, type NodeProps, Position } from 'reactflow'
+import { captureEvent } from '@/lib/posthog/client'
+import { MemoizedCommandItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items'
+import {
+  BlocksGroup,
+  ToolsGroup,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups'
+import {
+  filterAndCap,
+  GROUP_HEADING_CLASSNAME,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
+import {
+  CMDK_ITEM_GAP_CLASS,
+  CMDK_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { useSearchModalStore } from '@/stores/modals/search/store'
+import type {
+  PendingConnect,
+  SearchBlockItem,
+  SearchToolOperationItem,
+} from '@/stores/modals/search/types'
+
+export const CONNECTION_BLOCK_SELECTOR_NODE_ID = '__connection-block-selector__'
+
+export const CONNECTION_BLOCK_SELECTOR_DIMENSIONS = {
+  width: 250,
+  height: 352,
+} as const
+
+const SELECTOR_ACTION_MENU_WIDTH = 140
+const SELECTOR_ACTION_MENU_RIGHT_INSET = 24
+const SELECTOR_ACTION_MENU_AMPLITUDE = 7
+const RECENT_SELECTION_LIMIT = 3
+const RECENT_SELECTION_STORAGE_PREFIX = 'sim:connection-block-selector:recent'
+const POPULAR_BLOCK_TYPES = [
+  'agent',
+  'function',
+  'api',
+  'condition',
+  'knowledge',
+  'memory',
+] as const
+
+const SELECTOR_PORTS: WorkflowBorderPort[] = [
+  {
+    id: 'target',
+    side: 'left',
+    position: 'center',
+    plateau: 38,
+    color: 'var(--text-secondary)',
+    restAmplitude: 1,
+    hoverAmplitude: 1,
+    magnetizable: false,
+  },
+  {
+    id: 'action-menu',
+    side: 'top',
+    position: {
+      fromEnd: SELECTOR_ACTION_MENU_RIGHT_INSET + SELECTOR_ACTION_MENU_WIDTH / 2,
+    },
+    plateau: SELECTOR_ACTION_MENU_WIDTH,
+    restAmplitude: SELECTOR_ACTION_MENU_AMPLITUDE,
+    hoverAmplitude: SELECTOR_ACTION_MENU_AMPLITUDE,
+    magnetizable: false,
+  },
+]
+
+export interface ConnectionBlockSelectorData {
+  pendingConnect: PendingConnect
+  onClose: () => void
+}
+
+type RecentSelection =
+  | { kind: 'block'; id: string }
+  | { kind: 'tool'; id: string }
+  | { kind: 'tool_operation'; id: string }
+
+type RecentPickerResult =
+  | { kind: 'block'; item: SearchBlockItem }
+  | { kind: 'tool'; item: SearchBlockItem }
+  | { kind: 'tool_operation'; item: SearchToolOperationItem }
+
+function getBlockCommandValue(item: SearchBlockItem, kind: 'block' | 'tool'): string {
+  return `${item.name} ${kind}-${item.id}`
+}
+
+function getToolOperationCommandValue(item: SearchToolOperationItem): string {
+  return `${item.searchValue} operation-${item.id}`
+}
+
+function getPickerResultCommandValue(result: RecentPickerResult): string {
+  return result.kind === 'tool_operation'
+    ? getToolOperationCommandValue(result.item)
+    : getBlockCommandValue(result.item, result.kind)
+}
+
+function getRecentCommandValue(result: RecentPickerResult): string {
+  return `recent ${getPickerResultCommandValue(result)}`
+}
+
+function isRecentSelection(value: unknown): value is RecentSelection {
+  if (
+    !value ||
+    typeof value !== 'object' ||
+    !('kind' in value) ||
+    !('id' in value) ||
+    typeof value.id !== 'string'
+  ) {
+    return false
+  }
+  return value.kind === 'block' || value.kind === 'tool' || value.kind === 'tool_operation'
+}
+
+/**
+ * Transient on-canvas block picker shown after a connection is released on the
+ * pane. Its outer silhouette is the canonical workflow-card border, so the
+ * temporary edge reads as connected to the block that will replace it.
+ */
+export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockSelectorData>) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+  const currentWorkflowId = params.workflowId as string | undefined
+  const posthog = usePostHog()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const [search, setSearch] = useState('')
+  const [selectedValue, setSelectedValue] = useState('')
+  const [recentSelections, setRecentSelections] = useState<RecentSelection[]>([])
+  const deferredSearch = useDeferredValue(search)
+  const isSearching = deferredSearch.trim().length > 0
+  const recentStorageKey = `${RECENT_SELECTION_STORAGE_PREFIX}:${workspaceId}`
+  const { blocks, tools, toolOperations } = useSearchModalStore((state) => state.data)
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') data.onClose()
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [data])
+
+  useEffect(() => {
+    try {
+      const storedSelections = window.localStorage.getItem(recentStorageKey)
+      if (!storedSelections) {
+        setRecentSelections([])
+        return
+      }
+      const parsedSelections: unknown = JSON.parse(storedSelections)
+      setRecentSelections(
+        Array.isArray(parsedSelections)
+          ? parsedSelections.filter(isRecentSelection).slice(0, RECENT_SELECTION_LIMIT)
+          : []
+      )
+    } catch {
+      setRecentSelections([])
+    }
+  }, [recentStorageKey])
+
+  const availableBlocks = useMemo(
+    () =>
+      blocks.filter(
+        (block) => !block.sourceWorkflowId || block.sourceWorkflowId !== currentWorkflowId
+      ),
+    [blocks, currentWorkflowId]
+  )
+
+  const availableTools = useMemo(
+    () =>
+      tools.filter((tool) => !tool.sourceWorkflowId || tool.sourceWorkflowId !== currentWorkflowId),
+    [currentWorkflowId, tools]
+  )
+
+  const searchCandidates = useMemo<RecentPickerResult[]>(
+    () => [
+      ...availableBlocks.map((item): RecentPickerResult => ({ kind: 'block', item })),
+      ...availableTools.map((item): RecentPickerResult => ({ kind: 'tool', item })),
+      ...toolOperations.map((item): RecentPickerResult => ({ kind: 'tool_operation', item })),
+    ],
+    [availableBlocks, availableTools, toolOperations]
+  )
+
+  const searchResults = useMemo(
+    () =>
+      deferredSearch.trim()
+        ? filterAndCap(
+            searchCandidates,
+            (result) => result.item.name,
+            deferredSearch,
+            (result) => result.item.searchValue
+          )
+        : [],
+    [deferredSearch, searchCandidates]
+  )
+
+  const recentSelectionKeys = useMemo(
+    () => new Set(recentSelections.map((selection) => `${selection.kind}:${selection.id}`)),
+    [recentSelections]
+  )
+
+  const recentResults = useMemo(() => {
+    const blocksById = new Map(availableBlocks.map((block) => [block.id, block]))
+    const toolsById = new Map(availableTools.map((tool) => [tool.id, tool]))
+    const operationsById = new Map(toolOperations.map((operation) => [operation.id, operation]))
+    const results: RecentPickerResult[] = []
+
+    for (const selection of recentSelections) {
+      if (selection.kind === 'block') {
+        const item = blocksById.get(selection.id)
+        if (item) results.push({ kind: 'block', item })
+      } else if (selection.kind === 'tool') {
+        const item = toolsById.get(selection.id)
+        if (item) results.push({ kind: 'tool', item })
+      } else {
+        const item = operationsById.get(selection.id)
+        if (item) results.push({ kind: 'tool_operation', item })
+      }
+    }
+
+    return results.slice(0, RECENT_SELECTION_LIMIT)
+  }, [availableBlocks, availableTools, recentSelections, toolOperations])
+
+  const popularBlocks = useMemo(
+    () =>
+      POPULAR_BLOCK_TYPES.map((type) => availableBlocks.find((block) => block.type === type))
+        .filter((block): block is SearchBlockItem => Boolean(block))
+        .filter((block) => !recentSelectionKeys.has(`block:${block.id}`))
+        .slice(0, RECENT_SELECTION_LIMIT),
+    [availableBlocks, recentSelectionKeys]
+  )
+
+  const popularBlockIds = useMemo(
+    () => new Set(popularBlocks.map((block) => block.id)),
+    [popularBlocks]
+  )
+
+  const browseBlocks = useMemo(
+    () =>
+      availableBlocks.filter(
+        (block) => !recentSelectionKeys.has(`block:${block.id}`) && !popularBlockIds.has(block.id)
+      ),
+    [availableBlocks, popularBlockIds, recentSelectionKeys]
+  )
+
+  const browseTools = useMemo(
+    () => availableTools.filter((tool) => !recentSelectionKeys.has(`tool:${tool.id}`)),
+    [availableTools, recentSelectionKeys]
+  )
+
+  const dispatchSelection = useCallback(
+    (type: string, resultType: 'block' | 'tool' | 'tool_operation', presetOperation?: string) => {
+      window.dispatchEvent(
+        new CustomEvent('add-block-from-toolbar', {
+          detail: {
+            type,
+            presetOperation,
+            pendingConnect: data.pendingConnect,
+          },
+        })
+      )
+      captureEvent(posthog, 'search_result_selected', {
+        result_type: resultType,
+        query_length: deferredSearch.length,
+        workspace_id: workspaceId,
+      })
+      data.onClose()
+    },
+    [data, deferredSearch.length, posthog, workspaceId]
+  )
+
+  const rememberSelection = useCallback(
+    (selection: RecentSelection) => {
+      const nextSelections = [
+        selection,
+        ...recentSelections.filter(
+          (recent) => recent.kind !== selection.kind || recent.id !== selection.id
+        ),
+      ].slice(0, RECENT_SELECTION_LIMIT)
+      setRecentSelections(nextSelections)
+      try {
+        window.localStorage.setItem(recentStorageKey, JSON.stringify(nextSelections))
+      } catch {
+        return
+      }
+    },
+    [recentSelections, recentStorageKey]
+  )
+
+  const handleBlockSelect = useCallback(
+    (block: SearchBlockItem) => {
+      rememberSelection({ kind: 'block', id: block.id })
+      dispatchSelection(block.type, 'block')
+    },
+    [dispatchSelection, rememberSelection]
+  )
+
+  const handleToolSelect = useCallback(
+    (tool: SearchBlockItem) => {
+      rememberSelection({ kind: 'tool', id: tool.id })
+      dispatchSelection(tool.type, 'tool')
+    },
+    [dispatchSelection, rememberSelection]
+  )
+
+  const handleToolOperationSelect = (operation: SearchToolOperationItem) => {
+    rememberSelection({ kind: 'tool_operation', id: operation.id })
+    dispatchSelection(operation.blockType, 'tool_operation', operation.operationId)
+  }
+
+  const resetResultsViewport = useCallback(() => {
+    const list = listRef.current
+    if (!list) return
+    list.scrollTop = 0
+  }, [])
+
+  let firstResultValue = ''
+  const firstSearchResult = searchResults[0]
+  const firstRecent = recentResults[0]
+  const firstPopular = popularBlocks[0]
+  const firstBrowseBlock = browseBlocks[0]
+  const firstBrowseTool = browseTools[0]
+
+  if (isSearching) {
+    if (firstSearchResult) firstResultValue = getPickerResultCommandValue(firstSearchResult)
+  } else if (firstRecent) {
+    firstResultValue = getRecentCommandValue(firstRecent)
+  } else if (firstPopular) {
+    firstResultValue = getBlockCommandValue(firstPopular, 'block')
+  } else if (firstBrowseBlock) {
+    firstResultValue = getBlockCommandValue(firstBrowseBlock, 'block')
+  } else if (firstBrowseTool) {
+    firstResultValue = getBlockCommandValue(firstBrowseTool, 'tool')
+  }
+
+  const resolvedSelectedValue = selectedValue || (search === deferredSearch ? firstResultValue : '')
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value)
+    setSelectedValue('')
+    requestAnimationFrame(resetResultsViewport)
+  }
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(resetResultsViewport)
+    return () => cancelAnimationFrame(frame)
+  }, [deferredSearch, resetResultsViewport])
+
+  return (
+    <div
+      role='dialog'
+      aria-label='Add a connected block'
+      className='workflow-drag-handle relative h-[352px] w-[250px] cursor-grab select-none rounded-2xl [&:active]:cursor-grabbing'
+    >
+      <WorkflowBlockBorder
+        nodeId={id}
+        ports={SELECTOR_PORTS}
+        cursorSwellEnabled={false}
+        hasRing
+        ringStyles='ring-[1.5px] ring-[var(--text-secondary)]'
+        height={CONNECTION_BLOCK_SELECTOR_DIMENSIONS.height}
+      />
+      <div
+        data-workflow-action-bar-swell=''
+        className='-top-[28px] pointer-events-auto absolute right-[24px] z-30 flex h-[28px] w-[140px] items-center justify-between gap-1.5 overflow-hidden py-0.5 pr-[0.2rem] pl-5'
+      >
+        <span className='min-w-max shrink-0 whitespace-nowrap font-medium text-[var(--surface-2)] text-sm leading-5'>
+          Add block
+        </span>
+        <Button
+          variant='ghost'
+          onClick={data.onClose}
+          aria-label='Close block selector'
+          title='Close'
+          className="nodrag nopan !h-[24px] !w-[40px] !bg-[color-mix(in_srgb,var(--surface-2)_18%,transparent)] !text-[color-mix(in_srgb,var(--text-inverse)_72%,transparent)] hover-hover:!bg-[var(--surface-2)] hover-hover:!text-[var(--text-primary)] [&_svg]:-translate-x-[6px] shrink-0 rounded-md border-none p-0 transition-[background-color,color,opacity,transform] duration-150 [clip-path:path('M16.25_0A8_8_0_0_1_22.4_2.88L36.59_19.9A2.5_2.5_0_0_1_34.66_24L4_24A4_4_0_0_1_0_20L0_4A4_4_0_0_1_4_0Z')] active:scale-[0.96] [&_svg]:translate-y-px"
+        >
+          <X className='size-[14px]' />
+        </Button>
+      </div>
+      <Handle
+        type='target'
+        position={Position.Left}
+        id='target'
+        className='!left-0 !top-1/2 !z-30 !h-[38px] !w-[14px] !-translate-y-1/2 !cursor-default !rounded-none !border-none !bg-transparent !opacity-0'
+        isConnectableStart={false}
+        isConnectableEnd={false}
+      />
+
+      <Command
+        label='Add a connected block'
+        shouldFilter={false}
+        value={resolvedSelectedValue}
+        onValueChange={setSelectedValue}
+        className='relative z-20 flex h-full flex-col overflow-hidden rounded-2xl [clip-path:inset(0_round_16px)]'
+      >
+        <div className='relative min-h-0 flex-1'>
+          <Command.List
+            ref={listRef}
+            className={cn(
+              "nodrag nopan nowheel allow-scroll scrollbar-none [&_[cmdk-item][aria-selected='true']]:!border-transparent [&_[cmdk-item][aria-selected='true']]:!bg-[var(--surface-hover)] [&_[cmdk-item]_svg]:!scale-100 [&_[cmdk-item]_svg]:!transition-none h-full overflow-y-auto overflow-x-hidden px-1.5 pt-12 pb-1.5 [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [clip-path:inset(3px_round_13px)] [mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col",
+              CMDK_ITEM_GAP_CLASS,
+              CMDK_SECTION_GAP_CLASS
+            )}
+          >
+            <Command.Empty className='flex items-center justify-center px-4 py-8 text-center text-[var(--text-subtle)] text-sm'>
+              No blocks found.
+            </Command.Empty>
+            {isSearching ? (
+              searchResults.length > 0 && (
+                <Command.Group className={GROUP_HEADING_CLASSNAME}>
+                  {searchResults.map((result) => (
+                    <MemoizedCommandItem
+                      key={`search-${result.kind}-${result.item.id}`}
+                      value={getPickerResultCommandValue(result)}
+                      onSelect={() => {
+                        if (result.kind === 'block') handleBlockSelect(result.item)
+                        else if (result.kind === 'tool') handleToolSelect(result.item)
+                        else handleToolOperationSelect(result.item)
+                      }}
+                      icon={result.item.icon}
+                      bgColor={result.item.bgColor}
+                      showColoredIcon
+                      workflowType={result.kind === 'block' ? result.item.type : undefined}
+                      label={result.item.name}
+                    />
+                  ))}
+                </Command.Group>
+              )
+            ) : (
+              <>
+                {recentResults.length > 0 && (
+                  <Command.Group heading='Recently used' className={GROUP_HEADING_CLASSNAME}>
+                    {recentResults.map((result) => {
+                      if (result.kind === 'tool_operation') {
+                        return (
+                          <MemoizedCommandItem
+                            key={`recent-operation-${result.item.id}`}
+                            value={getRecentCommandValue(result)}
+                            onSelect={() => handleToolOperationSelect(result.item)}
+                            icon={result.item.icon}
+                            bgColor={result.item.bgColor}
+                            showColoredIcon
+                            label={result.item.name}
+                          />
+                        )
+                      }
+
+                      return (
+                        <MemoizedCommandItem
+                          key={`recent-${result.kind}-${result.item.id}`}
+                          value={getRecentCommandValue(result)}
+                          onSelect={() =>
+                            result.kind === 'block'
+                              ? handleBlockSelect(result.item)
+                              : handleToolSelect(result.item)
+                          }
+                          icon={result.item.icon}
+                          bgColor={result.item.bgColor}
+                          showColoredIcon
+                          workflowType={result.kind === 'block' ? result.item.type : undefined}
+                          label={result.item.name}
+                        />
+                      )
+                    })}
+                  </Command.Group>
+                )}
+                <BlocksGroup items={popularBlocks} onSelect={handleBlockSelect} heading='Popular' />
+                <BlocksGroup
+                  items={browseBlocks}
+                  onSelect={handleBlockSelect}
+                  heading='All blocks'
+                />
+                <ToolsGroup items={browseTools} onSelect={handleToolSelect} />
+              </>
+            )}
+          </Command.List>
+          <div
+            data-connection-selector-search-frost=''
+            className='nodrag nopan absolute inset-x-[3px] top-[3px] z-20 flex h-12 cursor-text items-center gap-2 rounded-t-[13px] bg-[linear-gradient(to_bottom,var(--surface-2)_0%,color-mix(in_srgb,var(--surface-2)_88%,transparent)_68%,transparent_100%)] px-2.5 pb-2'
+          >
+            <Search className='size-[14px] flex-shrink-0 text-[var(--text-muted)]' />
+            <Command.Input
+              ref={inputRef}
+              autoFocus
+              aria-label='Search blocks'
+              value={search}
+              onValueChange={handleSearchChange}
+              placeholder='Search blocks...'
+              className='h-8 min-w-0 flex-1 cursor-text bg-transparent text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+            />
+          </div>
+        </div>
+      </Command>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 38130ca0903..f028cb3ebe7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -1,17 +1,33 @@
-import { memo, useCallback, useMemo } from 'react'
-import { BLOCK_DIMENSIONS, NoteBlockView } from '@sim/workflow-renderer'
-import type { NodeProps } from 'reactflow'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BLOCK_DIMENSIONS,
+  DEFAULT_NOTE_COLOR,
+  estimateNoteBlockHeight,
+  isNoteColor,
+  NoteBlockView,
+  type NoteColor,
+  type NoteContentEditorProps,
+} from '@sim/workflow-renderer'
+import { type NodeProps, useReactFlow } from 'reactflow'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
+import { NoteMarkdownEditor } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor'
+import type { WorkflowBlockProps } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types'
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
+import { isBlockProtected } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useIsCurrentWorkflowExecuting } from '@/stores/execution'
+import { usePanelEditorStore } from '@/stores/panel'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import type { WorkflowBlockProps } from '../workflow-block/types'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 interface NoteBlockNodeData extends WorkflowBlockProps {}
 
-/** Extracts the string content from a raw subblock value (string or `{ value }`). */
-function extractFieldValue(rawValue: unknown): string | undefined {
+const NOTE_EXPAND_FOCUS_DURATION_MS = 300
+
+/** Resolves a string stored directly or inside a serialized subblock value. */
+function getNoteStringValue(rawValue: unknown): string | undefined {
   if (typeof rawValue === 'string') return rawValue
   if (rawValue && typeof rawValue === 'object' && 'value' in rawValue) {
     const candidate = (rawValue as { value?: unknown }).value
@@ -20,6 +36,10 @@ function extractFieldValue(rawValue: unknown): string | undefined {
   return undefined
 }
 
+function renderNoteContentEditor(props: NoteContentEditorProps) {
+  return <NoteMarkdownEditor {...props} />
+}
+
 /**
  * Editor container for {@link NoteBlockView}.
  *
@@ -34,12 +54,15 @@ export const NoteBlock = memo(function NoteBlock({
   selected,
 }: NodeProps<NoteBlockNodeData>) {
   const { type, name } = data
+  const focusFrameRef = useRef<number | null>(null)
+  const { getNode, getViewport, setCenter } = useReactFlow()
 
-  const { activeWorkflowId, isEnabled, handleClick, hasRing, ringStyles } = useBlockVisual({
+  const { activeWorkflowId, isEnabled, hasRing, ringStyles } = useBlockVisual({
     blockId: id,
     data,
     isSelected: selected,
   })
+  const { collaborativeSetSubblockValue, collaborativeUpdateBlockName } = useCollaborativeWorkflow()
   const storedValues = useSubBlockStore(
     useCallback(
       (state) => {
@@ -52,17 +75,92 @@ export const NoteBlock = memo(function NoteBlock({
 
   const content = useMemo(() => {
     if (data.isPreview && data.subBlockValues) {
-      const extractedContent = extractFieldValue(data.subBlockValues.content)
+      const extractedContent = getNoteStringValue(data.subBlockValues.content)
       return typeof extractedContent === 'string' ? extractedContent : ''
     }
-    const storedContent = extractFieldValue(storedValues?.content)
+    const storedContent = getNoteStringValue(storedValues?.content)
     return typeof storedContent === 'string' ? storedContent : ''
   }, [data.isPreview, data.subBlockValues, storedValues])
 
-  const isEmpty = content.trim().length === 0
+  const rawColor = data.isPreview
+    ? getNoteStringValue(data.subBlockValues?.color)
+    : getNoteStringValue(storedValues?.color)
+  const noteColor = isNoteColor(rawColor) ? rawColor : DEFAULT_NOTE_COLOR
 
   const userPermissions = useUserPermissionsContext()
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
   const canEditWorkflow = userPermissions.canEdit && !data.isWorkflowLocked
+  const isProtected = useWorkflowStore(
+    useCallback((state) => isBlockProtected(id, state.blocks), [id])
+  )
+  const clearCurrentBlock = usePanelEditorStore((state) => state.clearCurrentBlock)
+  const canEditNote = canEditWorkflow && !data.isPreview && !isProtected
+  const [blockHeight, setBlockHeight] = useState(() => estimateNoteBlockHeight(content))
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isFocused = selected
+
+  useEffect(() => {
+    if (!canEditNote) setIsExpanded(false)
+  }, [canEditNote])
+
+  useEffect(
+    () => () => {
+      if (focusFrameRef.current !== null) cancelAnimationFrame(focusFrameRef.current)
+    },
+    []
+  )
+
+  const handleNameChange = (nextName: string) => {
+    if (!canEditNote) return false
+    return collaborativeUpdateBlockName(id, nextName).success
+  }
+
+  const handleContentChange = (nextContent: string) => {
+    if (!canEditNote) return
+    collaborativeSetSubblockValue(id, 'content', nextContent)
+  }
+
+  const handleColorChange = useCallback(
+    (color: NoteColor) => {
+      if (!canEditNote) return
+      collaborativeSetSubblockValue(id, 'color', color)
+    },
+    [canEditNote, collaborativeSetSubblockValue, id]
+  )
+
+  const handleNoteSelect = useCallback(() => {
+    if (data.isPreview || data.isEmbedded) return
+    clearCurrentBlock()
+  }, [clearCurrentBlock, data.isEmbedded, data.isPreview])
+
+  const handleExpandedChange = useCallback(
+    (expanded: boolean) => {
+      if (expanded && !canEditNote) return
+      if (expanded) handleNoteSelect()
+      setIsExpanded(expanded)
+
+      if (focusFrameRef.current !== null) cancelAnimationFrame(focusFrameRef.current)
+      if (!expanded) return
+
+      focusFrameRef.current = requestAnimationFrame(() => {
+        focusFrameRef.current = requestAnimationFrame(() => {
+          focusFrameRef.current = null
+          const node = getNode(id)
+          const position = node?.positionAbsolute ?? node?.position
+          if (!position) return
+          void setCenter(
+            position.x + BLOCK_DIMENSIONS.NOTE_WIDTH / 2,
+            position.y + blockHeight / 2,
+            {
+              zoom: getViewport().zoom,
+              duration: NOTE_EXPAND_FOCUS_DURATION_MS,
+            }
+          )
+        })
+      })
+    },
+    [blockHeight, canEditNote, getNode, getViewport, handleNoteSelect, id, setCenter]
+  )
 
   /**
    * Calculate deterministic dimensions based on content structure. Uses fixed
@@ -71,26 +169,43 @@ export const NoteBlock = memo(function NoteBlock({
   useBlockDimensions({
     blockId: id,
     calculateDimensions: () => {
-      const contentHeight = isEmpty
-        ? BLOCK_DIMENSIONS.NOTE_MIN_CONTENT_HEIGHT
-        : BLOCK_DIMENSIONS.NOTE_BASE_CONTENT_HEIGHT
-      const calculatedHeight =
-        BLOCK_DIMENSIONS.HEADER_HEIGHT + BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING + contentHeight
-
-      return { width: BLOCK_DIMENSIONS.FIXED_WIDTH, height: calculatedHeight }
+      return {
+        width: BLOCK_DIMENSIONS.NOTE_WIDTH,
+        height: blockHeight,
+      }
     },
-    dependencies: [isEmpty],
+    dependencies: [blockHeight],
   })
 
   return (
     <NoteBlockView
       name={name}
       content={content}
+      noteColor={noteColor}
       isEnabled={isEnabled}
+      isFocused={isFocused}
+      isExpanded={isExpanded}
+      canEdit={canEditNote}
       hasRing={hasRing}
       ringStyles={ringStyles}
-      onSelect={handleClick}
-      actionBar={<ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />}
+      onSelect={handleNoteSelect}
+      onNameChange={handleNameChange}
+      onContentChange={handleContentChange}
+      onHeightChange={setBlockHeight}
+      onExpandedChange={handleExpandedChange}
+      renderContentEditor={renderNoteContentEditor}
+      actionBar={
+        <ActionBar
+          blockId={id}
+          blockType={type}
+          disabled={!canEditWorkflow}
+          variant='swell'
+          isWorkflowRunning={isWorkflowRunning}
+          noteColor={noteColor}
+          onNoteColorChange={handleColorChange}
+          onNoteColorMenuOpen={handleNoteSelect}
+        />
+      }
     />
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx
new file mode 100644
index 00000000000..02a7e7a5d53
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-markdown-editor.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '@sim/emcn'
+import type { JSONContent } from '@tiptap/core'
+import Placeholder from '@tiptap/extension-placeholder'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { createMarkdownContentExtensions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions'
+import { postProcessSerializedMarkdown } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-fidelity'
+import { parseMarkdownToDoc } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-parse'
+
+interface NoteMarkdownEditorProps {
+  value: string
+  selectionClassName: string
+  onChange: (content: string) => void
+  onBlur: () => void
+  onCancel: () => void
+}
+
+const NOTE_EDITOR_PROSE_CLASS_NAME = [
+  'min-h-full w-full text-current',
+  '[&_.ProseMirror]:min-h-full [&_.ProseMirror]:break-words [&_.ProseMirror]:pt-0.5 [&_.ProseMirror]:pb-2 [&_.ProseMirror]:outline-none',
+  '[&_.ProseMirror_p]:mb-1 [&_.ProseMirror_p]:text-sm [&_.ProseMirror_p]:leading-[1.25rem] [&_.ProseMirror_p:last-child]:mb-0',
+  '[&_.ProseMirror_h1]:mt-3 [&_.ProseMirror_h1]:mb-3 [&_.ProseMirror_h1]:font-semibold [&_.ProseMirror_h1]:text-lg [&_.ProseMirror_h1:first-child]:mt-0',
+  '[&_.ProseMirror_h2]:mt-2.5 [&_.ProseMirror_h2]:mb-2.5 [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:text-base [&_.ProseMirror_h2:first-child]:mt-0',
+  '[&_.ProseMirror_h3]:mt-2 [&_.ProseMirror_h3]:mb-2 [&_.ProseMirror_h3]:font-semibold [&_.ProseMirror_h3]:text-sm [&_.ProseMirror_h3:first-child]:mt-0',
+  '[&_.ProseMirror_h4]:mt-2 [&_.ProseMirror_h4]:mb-2 [&_.ProseMirror_h4]:font-semibold [&_.ProseMirror_h4]:text-xs [&_.ProseMirror_h4:first-child]:mt-0',
+  '[&_.ProseMirror_ul]:mt-1 [&_.ProseMirror_ul]:mb-1 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:space-y-1 [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ul]:text-sm',
+  '[&_.ProseMirror_ol]:mt-1 [&_.ProseMirror_ol]:mb-1 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:space-y-1 [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_ol]:text-sm',
+  '[&_.ProseMirror_li]:break-words [&_.ProseMirror_li>p]:mb-0',
+  '[&_.ProseMirror_code]:whitespace-normal [&_.ProseMirror_code]:rounded [&_.ProseMirror_code]:bg-black/10 [&_.ProseMirror_code]:px-1 [&_.ProseMirror_code]:py-0.5 [&_.ProseMirror_code]:font-mono [&_.ProseMirror_code]:text-xs',
+  '[&_.ProseMirror_pre]:my-2 [&_.ProseMirror_pre]:whitespace-pre-wrap [&_.ProseMirror_pre]:break-words [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:bg-black/15 [&_.ProseMirror_pre]:p-2 [&_.ProseMirror_pre]:text-xs',
+  '[&_.ProseMirror_pre_code]:block [&_.ProseMirror_pre_code]:bg-transparent [&_.ProseMirror_pre_code]:p-0',
+  '[&_.ProseMirror_a]:break-all [&_.ProseMirror_a]:font-medium [&_.ProseMirror_a]:underline [&_.ProseMirror_a]:underline-offset-2',
+  '[&_.ProseMirror_strong]:font-semibold',
+  '[&_.ProseMirror_em]:opacity-80',
+  '[&_.ProseMirror_blockquote]:my-4 [&_.ProseMirror_blockquote]:border-current/25 [&_.ProseMirror_blockquote]:border-l-2 [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:italic',
+  '[&_.ProseMirror_table]:my-2 [&_.ProseMirror_table]:w-full [&_.ProseMirror_table]:border-collapse [&_.ProseMirror_table]:text-xs',
+  '[&_.ProseMirror_th]:px-2 [&_.ProseMirror_th]:py-1 [&_.ProseMirror_th]:text-left [&_.ProseMirror_th]:font-semibold',
+  '[&_.ProseMirror_td]:px-2 [&_.ProseMirror_td]:py-1 [&_.ProseMirror_td]:opacity-90',
+  '[&_.ProseMirror_.is-editor-empty:first-child]:before:pointer-events-none [&_.ProseMirror_.is-editor-empty:first-child]:before:float-left [&_.ProseMirror_.is-editor-empty:first-child]:before:h-0 [&_.ProseMirror_.is-editor-empty:first-child]:before:text-current/55 [&_.ProseMirror_.is-editor-empty:first-child]:before:content-[attr(data-placeholder)]',
+].join(' ')
+
+/** WYSIWYG markdown editing surface styled to match the rendered Note exactly. */
+export function NoteMarkdownEditor({
+  value,
+  selectionClassName,
+  onChange,
+  onBlur,
+  onCancel,
+}: NoteMarkdownEditorProps) {
+  const onChangeRef = useRef(onChange)
+  const onBlurRef = useRef(onBlur)
+  const onCancelRef = useRef(onCancel)
+  const lastEmittedValueRef = useRef(value)
+  onChangeRef.current = onChange
+  onBlurRef.current = onBlur
+  onCancelRef.current = onCancel
+  const [extensions] = useState(() => [
+    ...createMarkdownContentExtensions(),
+    Placeholder.configure({ placeholder: 'Add note…' }),
+  ])
+  const [initialContent] = useState<JSONContent>(() => parseMarkdownToDoc(value))
+
+  const editor = useEditor({
+    extensions,
+    content: initialContent,
+    autofocus: 'end',
+    immediatelyRender: false,
+    shouldRerenderOnTransaction: false,
+    editorProps: {
+      attributes: {
+        class: 'min-h-full outline-none',
+      },
+      handleKeyDown: (_view, event) => {
+        if (event.key !== 'Escape' && !(event.key === 'Enter' && event.metaKey)) return false
+        event.preventDefault()
+        onCancelRef.current()
+        return true
+      },
+    },
+    onUpdate: ({ editor: currentEditor }) => {
+      const nextValue = postProcessSerializedMarkdown(currentEditor.getMarkdown())
+      lastEmittedValueRef.current = nextValue
+      onChangeRef.current(nextValue)
+    },
+    onBlur: () => onBlurRef.current(),
+  })
+
+  useEffect(() => {
+    if (!editor || value === lastEmittedValueRef.current) return
+    lastEmittedValueRef.current = value
+    editor.commands.setContent(parseMarkdownToDoc(value), {
+      contentType: 'json',
+      emitUpdate: false,
+    })
+  }, [editor, value])
+
+  return (
+    <EditorContent
+      editor={editor}
+      className={cn('min-h-full w-full', NOTE_EDITOR_PROSE_CLASS_NAME, selectionClassName)}
+    />
+  )
+}
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..d63b8b04002 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
@@ -183,8 +183,11 @@ export function Versions({
 
   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 className='flex h-[120px] flex-col items-center justify-center gap-1 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-6 text-center'>
+        <p className='font-medium text-[var(--text-secondary)] text-small'>No versions yet</p>
+        <p className='text-[var(--text-muted)] text-small'>
+          Your deployment history will appear here.
+        </p>
       </div>
     )
   }
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..55c888a5ba6 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
@@ -253,8 +253,13 @@ export function GeneralDeploy({
                 </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 className='flex h-full flex-col items-center justify-center gap-1 bg-[var(--surface-1)] px-6 text-center'>
+                <p className='font-medium text-[var(--text-secondary)] text-small'>
+                  No live version
+                </p>
+                <p className='max-w-[320px] text-[var(--text-muted)] text-small'>
+                  Deploy this workflow to create a live preview and version history.
+                </p>
               </div>
             )}
           </div>
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 d46e57a420c..631bfd79511 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
@@ -5,6 +5,7 @@ import {
   Badge,
   Button,
   ChipConfirmModal,
+  ChipSwitch,
   Loader,
   Modal,
   ModalBody,
@@ -14,8 +15,6 @@ import {
   ModalHeader,
   ModalTabs,
   ModalTabsContent,
-  ModalTabsList,
-  ModalTabsTrigger,
   Tooltip,
   toast,
 } from '@sim/emcn'
@@ -133,6 +132,12 @@ export function DeployModal({
   const userPermissions = useUserPermissionsContext()
   const canManageWorkspaceKeys = userPermissions.canAdmin
   const { config: permissionConfig, isPublicApiDisabled } = usePermissionConfig()
+  const deployTabs = [
+    { value: 'general' as const, label: 'General' },
+    ...(!permissionConfig.hideDeployApi ? [{ value: 'api' as const, label: 'API' }] : []),
+    ...(!permissionConfig.hideDeployMcp ? [{ value: 'mcp' as const, label: 'MCP' }] : []),
+    ...(!permissionConfig.hideDeployChatbot ? [{ value: 'chat' as const, label: 'Chat' }] : []),
+  ]
   const { data: apiKeysData, isLoading: isLoadingKeys } = useApiKeys(workflowWorkspaceId || '')
   const { data: workspaceSettingsData, isLoading: isLoadingSettings } = useWorkspaceSettings(
     workflowWorkspaceId || ''
@@ -508,25 +513,20 @@ export function DeployModal({
     <>
       <Modal open={open} onOpenChange={handleCloseModal}>
         <ModalContent size='lg' className='h-[76vh]'>
-          <ModalHeader>Workflow Deployment</ModalHeader>
+          <ModalHeader>Deploy workflow</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>
-              )}
-            </ModalTabsList>
+            <ChipSwitch<TabView>
+              value={activeTab}
+              onChange={setActiveTab}
+              options={deployTabs}
+              aria-label='Deployment section'
+              className='mt-3 ml-4 self-start'
+            />
 
             <ModalBody className='min-h-0 flex-1'>
               <ModalDescription className='sr-only'>
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 598207320da..60f2e04c71a 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,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, Tooltip } from '@sim/emcn'
+import { Chip } from '@sim/emcn'
 import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
   useChangeDetection,
@@ -16,16 +16,10 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 interface DeployProps {
   activeWorkflowId: string | null
   userPermissions: WorkspaceUserPermissions
-  className?: string
   disabled?: boolean
 }
 
-export function Deploy({
-  activeWorkflowId,
-  userPermissions,
-  className,
-  disabled = false,
-}: DeployProps) {
+export function Deploy({ activeWorkflowId, userPermissions, disabled = false }: DeployProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
   const isRegistryLoading = hydrationPhase === 'idle' || hydrationPhase === 'state-loading'
@@ -81,34 +75,6 @@ export function Deploy({
     }
   }
 
-  const getTooltipText = () => {
-    if (isEmpty) {
-      return 'Cannot deploy an empty workflow'
-    }
-    if (!canDeploy) {
-      return 'Admin permissions required'
-    }
-    if (disabled) {
-      return 'Workflow is locked'
-    }
-    if (isDeploying) {
-      return 'Deploying...'
-    }
-    if (isChangeDetectionSettling) {
-      return 'Syncing deployment state...'
-    }
-    if (deployReadiness.isBlocked && !isDeployed) {
-      return deployReadiness.tooltip
-    }
-    if (changeDetected) {
-      return 'Update deployment'
-    }
-    if (isDeployed) {
-      return 'Active deployment'
-    }
-    return 'Deploy workflow'
-  }
-
   const getButtonLabel = () => {
     if (changeDetected) {
       return 'Update'
@@ -121,23 +87,9 @@ export function Deploy({
 
   return (
     <>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <span>
-            <Button
-              className='h-[30px] gap-1.5 px-2.5'
-              variant={
-                isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
-              }
-              onClick={onDeployClick}
-              disabled={isRegistryLoading || isDisabled}
-            >
-              {getButtonLabel()}
-            </Button>
-          </span>
-        </Tooltip.Trigger>
-        <Tooltip.Content>{getTooltipText()}</Tooltip.Content>
-      </Tooltip.Root>
+      <Chip variant='border' onClick={onDeployClick} disabled={isRegistryLoading || isDisabled}>
+        {getButtonLabel()}
+      </Chip>
 
       <DeployModal
         open={isModalOpen}
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 da9c088a6b2..293f785ddda 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,10 +1,17 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
-import { ChevronDown, handleKeyboardActivation } from '@sim/emcn'
-import { Repeat, Split } from '@sim/emcn/icons'
+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,
@@ -12,7 +19,6 @@ 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 { getTileIconColorClass } from '@/blocks/icon-color'
 import { getBlock } from '@/blocks/registry'
 import { normalizeName } from '@/executor/constants'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -23,7 +29,6 @@ const logger = createLogger('ConnectionBlocks')
 
 interface ConnectionBlocksProps {
   connections: ConnectedBlock[]
-  currentBlockId: string
 }
 
 interface FieldTreeNodesProps {
@@ -33,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({
@@ -42,6 +48,7 @@ function FieldTreeNodes({
   connection,
   isFieldExpanded,
   onToggleFieldExpansion,
+  onSelectReference,
 }: FieldTreeNodesProps) {
   return fields.map((field) => {
     const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name
@@ -58,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'>
@@ -69,6 +77,7 @@ function FieldTreeNodes({
               connection={connection}
               isFieldExpanded={isFieldExpanded}
               onToggleFieldExpansion={onToggleFieldExpansion}
+              onSelectReference={onSelectReference}
             />
           </div>
         )}
@@ -87,6 +96,7 @@ interface ConnectionItemProps {
   connectionRef: (el: HTMLDivElement | null) => void
   mergedSubBlocks: Record<string, any>
   sourceBlock: { triggerMode?: boolean } | undefined
+  onSelectReference: (reference: string) => void
 }
 
 /**
@@ -102,6 +112,7 @@ function ConnectionItem({
   connectionRef,
   mergedSubBlocks,
   sourceBlock,
+  onSelectReference,
 }: ConnectionItemProps) {
   const blockConfig = getBlock(connection.type)
 
@@ -113,55 +124,40 @@ function ConnectionItem({
   })
   const hasFields = fields.length > 0
 
-  let Icon = blockConfig?.icon
-  let bgColor = blockConfig?.bgColor || '#6B7280'
-
-  if (!blockConfig) {
-    if (connection.type === 'loop') {
-      Icon = Repeat
-      bgColor = '#2FB3FF'
-    } else if (connection.type === 'parallel') {
-      Icon = Split
-      bgColor = '#FEE12B'
-    }
-  }
+  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)
+          )
         }}
       >
-        <div
-          className='[&_img]:!size-full relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
-          style={{ background: bgColor }}
-        >
-          {Icon && (
-            <Icon
-              className={clsx(
-                'transition-transform duration-200',
-                getTileIconColorClass(bgColor),
-                hasFields && 'group-hover:scale-110',
-                '!size-[9px]'
-              )}
-            />
-          )}
-        </div>
+        <WorkflowTypeTag
+          type={connection.type}
+          blockName={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)]'
           )}
         >
@@ -169,7 +165,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'
             )}
@@ -187,6 +183,7 @@ function ConnectionItem({
             connection={connection}
             isFieldExpanded={isFieldExpanded}
             onToggleFieldExpansion={onToggleFieldExpansion}
+            onSelectReference={onSelectReference}
           />
         </div>
       )}
@@ -197,11 +194,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) => ({
@@ -279,6 +278,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)
@@ -306,37 +311,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 dbe37dd8f21..18f7f23c26b 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 { SubBlock } from './sub-block/sub-block'
 export { SubflowEditor } from './subflow-editor/subflow-editor'
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 43c818d3b86..8e9885c4ce5 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 920177208e4..12de3866993 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 { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
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 f575404cad4..3df61a584a0 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
@@ -12,6 +12,7 @@ import {
   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'
@@ -161,8 +162,6 @@ export const getTagSearchTerm = (text: string, cursorPosition: number): string =
 const BLOCK_COLORS = {
   VARIABLE: '#2F8BFF',
   DEFAULT: '#2F55FF',
-  LOOP: '#2FB3FF',
-  PARALLEL: '#FEE12B',
 } as const
 
 /**
@@ -475,7 +474,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>
       )}
 
@@ -523,9 +522,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>
         )
@@ -558,7 +555,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>
         )
       })}
@@ -722,9 +719,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>
   )
@@ -792,9 +787,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>
   )
@@ -812,7 +805,9 @@ const BlockRootTagItem: React.FC<{
   itemRefs: React.RefObject<Map<string, HTMLElement>>
   group: BlockTagGroup
   tagIcon: string | React.ComponentType<{ className?: string }>
-  blockColor: string
+  blockType: string
+  brandColor: string
+  isIntegration: boolean
   blockName: string
 }> = ({
   rootTag,
@@ -823,7 +818,9 @@ const BlockRootTagItem: React.FC<{
   itemRefs,
   group,
   tagIcon,
-  blockColor,
+  blockType,
+  brandColor,
+  isIntegration,
   blockName,
 }) => {
   const handleMouseEnter = useKeyboardAwareMouseEnter(setSelectedIndex)
@@ -844,8 +841,18 @@ const BlockRootTagItem: React.FC<{
         }
       }}
     >
-      <TagIcon icon={tagIcon} color={blockColor} />
-      <span className='flex-1 truncate'>{blockName}</span>
+      {typeof tagIcon === 'string' ? (
+        <TagIcon icon={tagIcon} color={BLOCK_COLORS.DEFAULT} />
+      ) : (
+        <WorkflowTypeTag
+          type={blockType}
+          blockName={blockName}
+          Icon={tagIcon}
+          iconBgColor={brandColor}
+          isIntegration={isIntegration}
+        />
+      )}
+      <span className='flex-1 truncate font-medium'>{blockName}</span>
     </PopoverItem>
   )
 }
@@ -1678,7 +1685,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
@@ -1707,6 +1714,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           }}
         />
         <PopoverContent
+          appearance='dropdown'
           maxHeight={240}
           className='min-w-[280px]'
           side={side}
@@ -1718,7 +1726,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>
             ) : (
@@ -1754,13 +1762,6 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
 
                 {nestedBlockTagGroups.map((group: NestedBlockTagGroup, groupIndex: number) => {
                   const blockConfig = getBlock(group.blockType)
-                  let blockColor = blockConfig?.bgColor || BLOCK_COLORS.DEFAULT
-
-                  if (group.blockType === 'loop') {
-                    blockColor = BLOCK_COLORS.LOOP
-                  } else if (group.blockType === 'parallel') {
-                    blockColor = BLOCK_COLORS.PARALLEL
-                  }
 
                   let tagIcon: string | React.ComponentType<{ className?: string }> =
                     group.blockName.charAt(0).toUpperCase()
@@ -1789,7 +1790,9 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                         itemRefs={itemRefs}
                         group={group}
                         tagIcon={tagIcon}
-                        blockColor={blockColor}
+                        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 d26d7599874..8ff80775a61 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 753e0818874..e9d9ae37a3e 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'
@@ -114,6 +116,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.
@@ -479,7 +486,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)
 
@@ -1247,7 +1253,7 @@ export const ToolInput = memo(function ToolInput({
             label: selectedLabel,
           })
           return (
-            <Combobox
+            <ChipCombobox
               options={options}
               value={value}
               onChange={onChange}
@@ -1266,9 +1272,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)}
             />
           )
 
@@ -1679,7 +1687,7 @@ export const ToolInput = memo(function ToolInput({
 
   return (
     <div className='w-full space-y-2'>
-      <Combobox
+      <ChipCombobox
         options={[]}
         groups={toolGroups}
         placeholder='Add tool...'
@@ -1832,7 +1840,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'
@@ -1847,7 +1855,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}
@@ -1904,7 +1912,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),
                     })}
@@ -1945,60 +1953,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(
@@ -2011,7 +1973,10 @@ export const ToolInput = memo(function ToolInput({
                       }}
                     >
                       <PopoverTrigger asChild>
-                        <button
+                        <Button
+                          type='button'
+                          variant='quiet'
+                          size='icon'
                           onClick={(e) => {
                             e.stopPropagation()
                             handleRemoveTool(toolIndex)
@@ -2021,11 +1986,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'
@@ -2054,22 +2018,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)
@@ -2077,8 +2043,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 c15d80c4c74..aafbeb4da9d 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,42 +1,31 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, 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 { 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 {
   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,
   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'
@@ -45,17 +34,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 { getTileIconColorClass } from '@/blocks/icon-color'
+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'
@@ -83,20 +70,23 @@ const IconComponent = ({ icon: Icon, className }: { icon: any; className?: strin
  * @returns Editor panel content
  */
 export function Editor() {
-  const { currentBlockId, connectionsHeight, toggleConnectionsCollapsed, registerRenameCallback } =
-    usePanelEditorStore(
-      useShallow((state) => ({
-        currentBlockId: state.currentBlockId,
-        connectionsHeight: state.connectionsHeight,
-        toggleConnectionsCollapsed: state.toggleConnectionsCollapsed,
-        registerRenameCallback: state.registerRenameCallback,
-      }))
-    )
+  const { currentBlockId, registerRenameCallback, clearCurrentBlock } = usePanelEditorStore(
+    useShallow((state) => ({
+      currentBlockId: state.currentBlockId,
+      registerRenameCallback: state.registerRenameCallback,
+      clearCurrentBlock: state.clearCurrentBlock,
+    }))
+  )
   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 =
@@ -116,10 +106,14 @@ export function Editor() {
 
   const isWorkflowBlock =
     currentBlock && (currentBlock.type === 'workflow' || currentBlock.type === 'workflow_input')
+  const isNoteBlock = currentBlock?.type === 'note'
+
+  useEffect(() => {
+    if (isNoteBlock) clearCurrentBlock()
+  }, [clearCurrentBlock, isNoteBlock])
 
   const params = useParams()
   const workspaceId = params.workspaceId as string
-  const posthog = usePostHog()
 
   const subBlocksRef = useRef<HTMLDivElement>(null)
 
@@ -135,13 +129,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,
@@ -166,95 +156,32 @@ 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]
-  )
-  const displayAdvancedOptions = canEditBlock
-    ? advancedMode || activeSearchTargetNeedsAdvanced
-    : advancedMode || 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,
+    collaborativeUpdateBlockDescription,
     collaborativeUpdateBlockName,
-    collaborativeToggleBlockAdvancedMode,
-    collaborativeBatchToggleLocked,
   } = useCollaborativeWorkflow()
 
-  const handleToggleAdvancedMode = useCallback(() => {
-    if (!currentBlockId || !canEditBlock) return
-    collaborativeToggleBlockAdvancedMode(currentBlockId)
-  }, [currentBlockId, canEditBlock, collaborativeToggleBlockAdvancedMode])
-
   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
@@ -276,10 +203,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)
   }, [])
 
   /**
@@ -298,30 +248,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.
@@ -329,26 +282,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])
 
-  /**
-   * 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 } =
@@ -363,182 +340,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'>
-            {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
-              <div
-                className='flex size-[18px] items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
-                style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
-              >
-                <IconComponent
-                  icon={isSubflow ? subflowConfig?.icon : blockConfig?.icon}
-                  className={cn(
-                    'size-[12px]',
-                    getTileIconColorClass(isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor)
-                  )}
+      <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)]'
                 />
-              </div>
+              ) : (
+                <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)]'>
@@ -583,7 +539,6 @@ export function Editor() {
                         )}
                       </div>
                     </div>
-                    <FieldDivider subblockMarker />
                   </>
                 )}
                 {subBlocks.length === 0 && !isWorkflowBlock ? (
@@ -591,8 +546,8 @@ export function Editor() {
                     This block has no subblocks
                   </div>
                 ) : (
-                  <div className='flex flex-col'>
-                    {regularSubBlocks.map((subBlock, index) => {
+                  <BlockEditorSections blockType={currentBlock.type} subBlocks={subBlocks}>
+                    {(subBlock) => {
                       const stableKey = getSubBlockStableKey(
                         currentBlockId || '',
                         subBlock,
@@ -612,10 +567,6 @@ export function Editor() {
                             )
                           : undefined
 
-                      const showDivider =
-                        index < regularSubBlocks.length - 1 ||
-                        (!hasAdvancedOnlyFields && index < subBlocks.length - 1)
-
                       return (
                         <div key={stableKey} className='subblock-row'>
                           <SubBlock
@@ -650,141 +601,20 @@ export function Editor() {
                                 : undefined
                             }
                           />
-                          {showDivider && (
-                            <FieldDivider
-                              subblockMarker
-                              className={
-                                regularSubBlocks[index + 1]?.hideDividerBefore
-                                  ? '[&>div]:invisible'
-                                  : undefined
-                              }
-                            />
-                          )}
-                        </div>
-                      )
-                    })}
-
-                    {hasAdvancedOnlyFields && 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={handleToggleAdvancedMode}
-                          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>
-                    )}
-                    {hasAdvancedOnlyFields && !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 && (
-                            <FieldDivider
-                              subblockMarker
-                              className={
-                                advancedOnlySubBlocks[index + 1]?.hideDividerBefore
-                                  ? '[&>div]:invisible'
-                                  : undefined
-                              }
-                            />
-                          )}
                         </div>
                       )
-                    })}
-                  </div>
+                    }}
+                  </BlockEditorSections>
                 )}
               </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/components/drag-preview.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
index e79663e5c06..0c7d85480b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
@@ -4,7 +4,7 @@
 export interface DragItemInfo {
   name: string
   bgColor: string
-  iconElement?: HTMLElement | null
+  iconContainer?: HTMLElement | null
 }
 
 /**
@@ -32,25 +32,23 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
     z-index: 9999;
   `
 
-  const iconContainer = document.createElement('div')
-  iconContainer.style.cssText = `
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-    background: ${info.bgColor};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  `
+  const iconContainer = info.iconContainer
+    ? (info.iconContainer.cloneNode(true) as HTMLElement)
+    : document.createElement('div')
+  iconContainer.style.width = '24px'
+  iconContainer.style.height = '24px'
+  iconContainer.style.borderRadius = '6px'
+  iconContainer.style.display = 'flex'
+  iconContainer.style.alignItems = 'center'
+  iconContainer.style.justifyContent = 'center'
+  iconContainer.style.flexShrink = '0'
+  if (!info.iconContainer) iconContainer.style.background = info.bgColor
 
-  if (info.iconElement) {
-    const clonedIcon = info.iconElement.cloneNode(true) as HTMLElement
+  const clonedIcon = iconContainer.querySelector<HTMLElement>('svg, img')
+  if (clonedIcon) {
     clonedIcon.style.width = '16px'
     clonedIcon.style.height = '16px'
-    clonedIcon.style.color = 'white'
     clonedIcon.style.flexShrink = '0'
-    iconContainer.appendChild(clonedIcon)
   }
 
   const text = document.createElement('span')
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 df9a9ba0b06..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,24 +4,26 @@ 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'
@@ -30,6 +32,10 @@ import { ToolbarItemContextMenu } from '@/app/workspace/[workspaceId]/w/[workflo
 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 {
+  COMMAND_ITEM_CLASSNAME,
+  filterAndCap,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import {
   buildCustomBlockConfig,
   CUSTOM_BLOCK_TILE_COLOR,
@@ -44,12 +50,11 @@ import { useOrgBrandConfig } from '@/ee/whitelabeling/components/branding-provid
 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
@@ -59,6 +64,7 @@ interface BlockItem {
 interface ToolbarItemProps {
   item: BlockItem
   isTrigger: boolean
+  showWorkflowAccent: boolean
   onDragStart: (
     e: React.DragEvent<HTMLElement>,
     type: string,
@@ -67,19 +73,19 @@ interface ToolbarItemProps {
   ) => 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>) => {
@@ -115,7 +121,7 @@ const ToolbarItem = memo(function ToolbarItem({
 
   return (
     <div
-      ref={itemRef}
+      data-toolbar-item
       role='button'
       aria-label={`Add ${item.name}`}
       tabIndex={-1}
@@ -124,26 +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}
     >
-      <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={clsx(
-              'toolbar-item-icon transition-transform duration-200',
-              getTileIconColorClass(item.bgColor),
-              'group-hover:scale-110',
-              'size-[10px]'
-            )}
-          />
-        )}
-      </div>
+      {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>
   )
@@ -197,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,
@@ -233,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,
@@ -257,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,
@@ -283,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']
@@ -299,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>
@@ -360,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<{
@@ -497,6 +477,7 @@ export const Toolbar = memo(
           return {
             name: cb.name,
             type: cb.type,
+            description: cb.description,
             config: buildCustomBlockConfig(
               {
                 type: cb.type,
@@ -538,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) => {
@@ -664,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
@@ -682,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 5f20d08e113..f2230228c18 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,40 +1,99 @@
+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')
 }
 
 /**
  * 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,
     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 1b05767f83c..4e36775b023 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,55 +1,11 @@
 'use client'
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  BubbleChatClose,
-  BubbleChatPreview,
-  Button,
-  ChipConfirmModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Duplicate,
-  Layout,
-  MoreHorizontal,
-  Play,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverScrollArea,
-  PopoverSection,
-  PopoverTrigger,
-  Trash,
-  toast,
-} from '@sim/emcn'
-import { BubbleChatDelay, Download, Lock, Plus, Square, 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 { requestJson } from '@/lib/api/client/request'
-import {
-  createWorkflowCopilotChatContract,
-  deleteCopilotChatContract,
-} from '@/lib/api/contracts/copilot'
-import { getWorkflowNormalizedStateContract } from '@/lib/api/contracts/workflows'
+import { memo, useCallback, useRef } from 'react'
+import { Chip, cn, toast } from '@sim/emcn'
+import { useParams } from 'next/navigation'
+import { ThinkingLoader } from '@/components/ui'
 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'
@@ -57,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 {
@@ -64,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,
@@ -203,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
@@ -248,393 +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, undefined, detail.contexts)
-    }
-    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
@@ -667,10 +186,7 @@ export const Panel = memo(function Panel() {
       },
       {
         id: 'focus-toolbar-search',
-        handler: () => {
-          setActiveTab('toolbar')
-          toolbarRef.current?.focusSearch()
-        },
+        handler: handleFocusToolbarSearch,
         overrides: {
           allowInEditable: false,
         },
@@ -680,314 +196,110 @@ 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}
-              />
-              <Button
-                className='h-[30px] gap-2 px-2.5'
-                variant={isExecuting ? 'active' : 'tertiary'}
-                onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
-                disabled={!isExecuting && isButtonDisabled}
-              >
-                {isExecuting ? (
-                  <Square className='h-[11.5px] w-[11.5px] fill-current' />
-                ) : (
-                  <Play className='h-[11.5px] w-[11.5px]' />
-                )}
-                {isExecuting ? 'Stop' : 'Run'}
-              </Button>
-            </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
+            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/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index efdb4153e8f..557806ccb63 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -4,8 +4,11 @@ import { type NodeProps, useReactFlow } from 'reactflow'
 import { hasDiffStatus } from '@/lib/workflows/diff/types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
-import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { useLastRunPath } from '@/stores/execution'
+import {
+  useCurrentWorkflow,
+  useIsBlockInActiveExecutionHandoff,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useIsBlockActive, useIsCurrentWorkflowExecuting } from '@/stores/execution'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -30,20 +33,13 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
   const isEnabled = currentBlock?.enabled ?? true
   const isLocked = currentBlock?.locked ?? false
-  const isPreview = data?.isPreview || false
-
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const isFocused = currentBlockId === id
 
-  const lastRunPath = useLastRunPath()
-  const executionStatus = data.executionStatus
-  const runPathStatus: 'success' | 'error' | undefined =
-    executionStatus === 'success' || executionStatus === 'error'
-      ? executionStatus
-      : isPreview
-        ? undefined
-        : lastRunPath.get(id)
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isRunning = useIsBlockActive(id)
+  const isExecutionHighlighted = useIsBlockInActiveExecutionHandoff(id)
 
   /**
    * Nesting depth, walking the parent chain so the view can apply nested
@@ -71,12 +67,23 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
       isEnabled={isEnabled}
       isLocked={isLocked}
       isFocused={isFocused}
-      runPathStatus={runPathStatus}
+      isRunning={isRunning}
+      isWorkflowRunning={isWorkflowRunning}
+      isExecutionHighlighted={isExecutionHighlighted}
       diffStatus={diffStatus}
       nestingLevel={nestingLevel}
       canEditWorkflow={canEditWorkflow}
       onSelect={() => setCurrentBlockId(id)}
-      actionBar={<ActionBar blockId={id} blockType={data.kind} disabled={!canEditWorkflow} />}
+      actionBar={
+        <ActionBar
+          blockId={id}
+          blockType={data.kind}
+          disabled={!canEditWorkflow}
+          variant='swell'
+          isRunning={isRunning}
+          isWorkflowRunning={isWorkflowRunning}
+        />
+      }
     />
   )
 })
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 6a4c917bd39..623d9354836 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
@@ -11,7 +11,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Badge, ChevronDown, cn } from '@sim/emcn'
+import { Badge, ChevronDown, cn, thinScrollbarClass } from '@sim/emcn'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { isUserFileDisplayMetadata } from '@/lib/core/utils/user-file'
 import {
@@ -913,6 +913,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 5382e0fdd89..60989a7ff84 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 803e5024a4d..6cfad38cb3e 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
@@ -11,6 +11,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'
@@ -638,7 +639,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/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
index c6c626f383d..ccdb6130b66 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types.ts
@@ -18,6 +18,10 @@ export interface WorkflowBlockProps {
   isWorkflowLocked?: boolean
   subBlockValues?: Record<string, any>
   blockState?: any
+  /** Persists and broadcasts the Error output toggle. */
+  onSetErrorOutputEnabled?: (blockId: string, enabled: boolean) => void
+  /** Persists and broadcasts edge removals caused by disabling Error output. */
+  onRemoveEdges?: (edgeIds: string[]) => void
 }
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
index 1d41ca55463..3030c36ec0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils.ts
@@ -40,6 +40,8 @@ export function shouldSkipBlockRender(
     prevProps.data.config === nextProps.data.config &&
     prevProps.data.subBlockValues === nextProps.data.subBlockValues &&
     prevProps.data.blockState === nextProps.data.blockState &&
+    prevProps.data.onSetErrorOutputEnabled === nextProps.data.onSetErrorOutputEnabled &&
+    prevProps.data.onRemoveEdges === nextProps.data.onRemoveEdges &&
     prevProps.selected === nextProps.selected &&
     prevProps.dragging === nextProps.dragging
   )
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 0ad551eb5a3..a8d672fa726 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
@@ -1,10 +1,29 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { type ComponentType, Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { SubBlockRowView, WorkflowBlockView } from '@sim/workflow-renderer'
+import { isPositionedSourceHandle, isPositionedTargetHandle } from '@sim/workflow-types/workflow'
 import { isEqual } from 'es-toolkit'
+import {
+  ArrowLeftRight,
+  ArrowUpDown,
+  Braces,
+  Clock,
+  Globe,
+  Hash,
+  KeyRound,
+  ListFilter,
+  MessageSquareText,
+  Paperclip,
+  SkipForward,
+  SlidersHorizontal,
+  Sparkles,
+  ToggleLeft,
+  Wrench,
+} from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { type NodeProps, useUpdateNodeInternals } from 'reactflow'
+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'
@@ -12,10 +31,12 @@ import { createMcpToolId } from '@/lib/mcp/shared'
 import { sendMothershipMessage } from '@/lib/mothership/events'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import { captureEvent } from '@/lib/posthog/client'
+import { resolveCanvasBlockPresentation } from '@/lib/workflows/blocks/canvas-presentation'
 import { calculateWorkflowBlockDimensions } from '@/lib/workflows/blocks/deterministic-dimensions'
 import { getConditionRows, getRouterRows } from '@/lib/workflows/dynamic-handle-topology'
 import {
   getDisplayValue,
+  hasDisplayableRowValue,
   resolveDropdownLabel,
   resolveFilterFieldLabel,
   resolveSandboxLabel,
@@ -48,7 +69,10 @@ import {
   getProviderName,
   shouldSkipBlockRender,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
-import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  useBlockVisual,
+  useIsBlockInActiveExecutionHandoff,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { getBlock } from '@/blocks/registry'
@@ -71,6 +95,8 @@ import { useWorkflowMap } from '@/hooks/queries/workflows'
 import { useReactiveConditions } from '@/hooks/use-reactive-conditions'
 import { useSelectorDisplayName } from '@/hooks/use-selector-display-name'
 import { getModelSunsetStatus } from '@/providers/models'
+import { useIsCurrentWorkflowExecuting } from '@/stores/execution'
+import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -85,6 +111,245 @@ const EMPTY_SUBBLOCK_VALUES = {} as Record<string, any>
 /** Stable empty map for rows that never resolve MCP tool names */
 const EMPTY_MCP_TOOL_NAMES: ReadonlyMap<string, string> = new Map()
 
+/**
+ * Selector subblock types whose hydrated value names the block's primary
+ * target (table, channel, knowledge base, …) — promoted to a chip.
+ */
+const CHIP_TARGET_SELECTOR_TYPES = new Set<string>([
+  'table-selector',
+  'knowledge-base-selector',
+  'workflow-selector',
+  'mcp-server-selector',
+  'mcp-tool-selector',
+  'channel-selector',
+  'user-selector',
+  'file-selector',
+  'sheet-selector',
+  'folder-selector',
+  'project-selector',
+  'document-selector',
+])
+
+/** Maximum fragments in the statement line; remaining candidates fall back to rows. */
+const MAX_CHIPS = 2
+
+type MetaIcon = ComponentType<{ className?: string }>
+
+/** Leading icons for compact meta rows, keyed by subblock id. */
+const SUBBLOCK_META_ICONS_BY_ID: Record<string, MetaIcon> = {
+  filterBuilder: ListFilter,
+  bulkFilterBuilder: ListFilter,
+  filter: ListFilter,
+  filterCriteria: ListFilter,
+  sortBuilder: ArrowUpDown,
+  sort: ArrowUpDown,
+  limit: Hash,
+  offset: SkipForward,
+  rowId: KeyRound,
+  url: Globe,
+  method: ArrowLeftRight,
+  body: Braces,
+  data: Braces,
+}
+
+/** Leading icons for compact meta rows, keyed by subblock type. */
+const SUBBLOCK_META_ICONS_BY_TYPE: Record<string, MetaIcon> = {
+  code: Braces,
+  'messages-input': MessageSquareText,
+  'tool-input': Wrench,
+  'skill-input': Sparkles,
+  'oauth-input': KeyRound,
+  switch: ToggleLeft,
+  'file-upload': Paperclip,
+  'time-input': Clock,
+  slider: SlidersHorizontal,
+}
+
+/** Resolves the meta-row icon for a subblock; null keeps the labeled row. */
+function getMetaIcon(subBlock: SubBlockConfig): MetaIcon | null {
+  return (
+    SUBBLOCK_META_ICONS_BY_ID[subBlock.id] ?? SUBBLOCK_META_ICONS_BY_TYPE[subBlock.type] ?? null
+  )
+}
+
+/** A value token in a summary sentence, referencing a visible subblock. */
+interface SentenceToken {
+  id: string
+}
+
+type SentenceSegment = string | SentenceToken
+
+const T = (id: string): SentenceToken => ({ id })
+
+/**
+ * Builds the natural-language summary for a block as text fragments
+ * interleaved with value tokens (rendered as inline chips). Returns null for
+ * block types or states without a template - those keep the field-row layout.
+ * `resolve` returns the first listed subblock id that is visible with a
+ * displayable value, so templates only reference real, configured fields.
+ */
+function buildSentenceSegments(
+  type: string,
+  operation: unknown,
+  resolve: (...ids: string[]) => string | null
+): SentenceSegment[] | null {
+  if (type === 'table') {
+    const table = resolve('tableSelector', 'manualTableId')
+    if (!table) return null
+    const rowId = resolve('rowId')
+    const data = resolve('data')
+    const filter = resolve('filterBuilder', 'bulkFilterBuilder', 'filter')
+    const sort = resolve('sortBuilder', 'sort')
+    const limit = resolve('limit')
+
+    switch (operation) {
+      case 'query_rows': {
+        const segments: SentenceSegment[] = ['Queries rows from', T(table)]
+        if (filter) segments.push(', where', T(filter))
+        if (sort) segments.push(', sorted by', T(sort))
+        if (limit) segments.push(', up to', T(limit), 'rows')
+        return segments
+      }
+      case 'insert_row':
+        return ['Inserts a row into', T(table), ...(data ? [', with', T(data)] : [])]
+      case 'upsert_row': {
+        const conflict = resolve('conflictColumnSelector', 'manualConflictColumn')
+        return ['Upserts a row into', T(table), ...(conflict ? [', keyed on', T(conflict)] : [])]
+      }
+      case 'batch_insert_rows': {
+        const rows = resolve('rows')
+        return ['Inserts', ...(rows ? [T(rows)] : ['rows']), 'into', T(table)]
+      }
+      case 'update_row':
+        return [
+          'Updates row',
+          ...(rowId ? [T(rowId)] : []),
+          'in',
+          T(table),
+          ...(data ? [', setting', T(data)] : []),
+        ]
+      case 'delete_row':
+        return ['Deletes row', ...(rowId ? [T(rowId)] : []), 'from', T(table)]
+      case 'get_row':
+        return ['Fetches row', ...(rowId ? [T(rowId)] : []), 'from', T(table)]
+      case 'update_rows_by_filter':
+        return [
+          'Updates rows in',
+          T(table),
+          ...(filter ? [', where', T(filter)] : []),
+          ...(data ? [', setting', T(data)] : []),
+        ]
+      case 'delete_rows_by_filter':
+        return ['Deletes rows from', T(table), ...(filter ? [', where', T(filter)] : [])]
+      case 'get_schema':
+        return ['Reads the schema of', T(table)]
+      default:
+        return null
+    }
+  }
+
+  if (type === 'agent') {
+    const model = resolve('model')
+    if (!model) return null
+    const messages = resolve('messages')
+    const tools = resolve('tools')
+    const segments: SentenceSegment[] = ['Prompts', T(model)]
+    if (messages) segments.push('with', T(messages))
+    if (tools) segments.push(', using', T(tools))
+    return segments
+  }
+
+  if (type === 'api') {
+    const url = resolve('url')
+    if (!url) return null
+    const method = resolve('method')
+    const body = resolve('body')
+    const segments: SentenceSegment[] = method
+      ? ['Sends a', T(method), 'request to', T(url)]
+      : ['Sends a request to', T(url)]
+    if (body) segments.push(', with body', T(body))
+    return segments
+  }
+
+  if (type === 'function') {
+    const code = resolve('code')
+    if (!code) return null
+    return ['Runs code', T(code)]
+  }
+
+  return null
+}
+
+/** Approximate character widths for the sentence line estimate (px). */
+const SENTENCE_TEXT_CHAR_PX = 6.3
+const SENTENCE_CHIP_CHAR_PX = 6.8
+/** Inline chip horizontal padding + surrounding gap (px). */
+const SENTENCE_CHIP_EXTRA_PX = 26
+/** Usable sentence width inside the card (px). */
+const SENTENCE_WRAP_WIDTH_PX = 224
+/** Chip text is truncated around this many characters by max-width. */
+const SENTENCE_CHIP_MAX_CHARS = 24
+/**
+ * Rendered cap on an inline value chip: `max-w-[160px]` on the chip itself
+ * (see SubBlockRowView's `inline-value`). Without this clamp a long value is
+ * estimated wider than it can ever paint, which predicts an extra wrapped
+ * line and pads the card's height.
+ */
+const SENTENCE_CHIP_MAX_PX = 160
+
+/**
+ * Estimates the wrapped line count of a summary sentence for the
+ * deterministic node height. Approximate by design - being off by a line
+ * only affects node bounds, never handle anchoring (source/target anchor to
+ * the header and the error port anchors to the bottom).
+ */
+function estimateSentenceLines(
+  segments: SentenceSegment[],
+  getValueText: (id: string) => string
+): number {
+  let widthPx = 0
+  for (const segment of segments) {
+    if (typeof segment === 'string') {
+      widthPx += segment.length * SENTENCE_TEXT_CHAR_PX + 4
+    } else {
+      widthPx += Math.min(
+        Math.min(getValueText(segment.id).length, SENTENCE_CHIP_MAX_CHARS) * SENTENCE_CHIP_CHAR_PX +
+          SENTENCE_CHIP_EXTRA_PX,
+        SENTENCE_CHIP_MAX_PX
+      )
+    }
+  }
+  return Math.max(1, Math.ceil(widthPx / SENTENCE_WRAP_WIDTH_PX))
+}
+
+/**
+ * Priority for promoting a visible subblock into the chips row: the
+ * operation first, then the primary target selector, then the model.
+ * Returns null for subblocks that stay as label/value rows.
+ */
+function chipPriority(subBlock: SubBlockConfig): number | null {
+  if (subBlock.id === 'operation') return 0
+  if (CHIP_TARGET_SELECTOR_TYPES.has(subBlock.type)) return 1
+  if (subBlock.id === 'model') return 2
+  return null
+}
+
+/**
+ * Names of MCP tool-schema parameters whose argument values are displayable
+ * on the collapsed node. Params without a set value are hidden from the
+ * preview, matching the empty-row filtering applied to regular subblocks.
+ */
+function getDisplayableMcpParamNames(schemaValue: unknown, argsValue: unknown): string[] {
+  const schema = schemaValue as { properties?: Record<string, unknown> } | undefined
+  const properties = schema?.properties
+  if (!properties || typeof properties !== 'object') return []
+  const args = (argsValue && typeof argsValue === 'object' ? argsValue : {}) as Record<
+    string,
+    unknown
+  >
+  return Object.keys(properties).filter((name) => getDisplayValue(args[name]) !== '-')
+}
+
 interface BlockSunset {
   status: 'legacy' | 'deprecated'
   kind: 'block' | 'model'
@@ -171,6 +436,10 @@ interface SubBlockRowProps {
   displayAdvancedOptions?: boolean
   canonicalIndex?: ReturnType<typeof buildCanonicalIndex>
   canonicalModeOverrides?: Record<string, 'basic' | 'advanced'>
+  /** Presentation variant forwarded to the row view. */
+  variant?: 'row' | 'meta' | 'statement-primary' | 'statement-muted' | 'inline-value'
+  /** Leading icon forwarded to the row view (meta variant). */
+  icon?: MetaIcon
 }
 
 /**
@@ -196,7 +465,9 @@ const areSubBlockRowPropsEqual = (
     valueEqual &&
     prevProps.displayAdvancedOptions === nextProps.displayAdvancedOptions &&
     prevProps.canonicalIndex === nextProps.canonicalIndex &&
-    prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides
+    prevProps.canonicalModeOverrides === nextProps.canonicalModeOverrides &&
+    prevProps.variant === nextProps.variant &&
+    prevProps.icon === nextProps.icon
   )
 }
 
@@ -217,6 +488,8 @@ const SubBlockRow = memo(function SubBlockRow({
   displayAdvancedOptions,
   canonicalIndex,
   canonicalModeOverrides,
+  variant,
+  icon,
 }: SubBlockRowProps) {
   const getStringValue = useCallback(
     (key?: string): string | undefined => {
@@ -486,7 +759,13 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <SubBlockRowView title={title} displayValue={displayValue} isMonospace={isMonospaceField} />
+    <SubBlockRowView
+      title={title}
+      displayValue={displayValue}
+      isMonospace={isMonospaceField}
+      variant={variant}
+      icon={icon}
+    />
   )
 }, areSubBlockRowPropsEqual)
 
@@ -506,6 +785,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     currentWorkflow,
     activeWorkflowId,
     isEnabled,
+    isExecuting,
     isLocked,
     handleClick,
     hasRing,
@@ -513,6 +793,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     runPathStatus,
   } = useBlockVisual({ blockId: id, data, isPending, isSelected: selected })
 
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isExecutionHighlighted = useIsBlockInActiveExecutionHandoff(id)
   const currentWorkflowId = (params.workflowId as string) || activeWorkflowId || ''
 
   const currentBlock = currentWorkflow.getBlockById(id)
@@ -581,6 +863,114 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     isEqual
   )
 
+  /**
+   * Whether a persisted legacy error route is wired from this block. The
+   * renderer uses this only to retain a non-interactive edge anchor.
+   */
+  const hasErrorConnection = useWorkflowStore(
+    useCallback(
+      (state) => state.edges.some((edge) => edge.source === id && edge.sourceHandle === 'error'),
+      [id]
+    )
+  )
+
+  /**
+   * Handle ids whose connected edge is highlighted because an endpoint block
+   * is selected — the view darkens those tabs to the edge highlight color so
+   * port and line read as one piece. Serialized to a string so the ReactFlow
+   * store subscription only re-renders on real changes.
+   */
+  const editorBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const { panelActiveTab, isPanelOpen } = usePanelStore(
+    useShallow((state) => ({ panelActiveTab: state.activeTab, isPanelOpen: state.isOpen }))
+  )
+  const editorOpenBlockId = isPanelOpen && panelActiveTab === 'editor' ? editorBlockId : null
+  const highlightedHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const keys: string[] = []
+        for (const edge of state.edges) {
+          if (edge.source !== id && edge.target !== id) continue
+          /*
+           * Must mirror workflow-edge's shouldHighlightEdge exactly: the edge
+           * darkens when an endpoint is canvas-selected OR open in the editor
+           * panel. If the knob checks fewer conditions than the line, a dark
+           * line runs into a light knob.
+           */
+          const isHighlighted =
+            state.nodeInternals.get(edge.source)?.selected ||
+            state.nodeInternals.get(edge.target)?.selected ||
+            (edge.data as { isConnectedToSelection?: boolean } | undefined)
+              ?.isConnectedToSelection ||
+            (editorOpenBlockId !== null &&
+              (edge.source === editorOpenBlockId || edge.target === editorOpenBlockId))
+          if (!isHighlighted) continue
+          if (edge.source === id) keys.push(edge.sourceHandle || 'source')
+          if (edge.target === id) keys.push(edge.targetHandle || 'target')
+        }
+        return keys.sort().join('|')
+      },
+      [id, editorOpenBlockId]
+    )
+  )
+  const highlightedHandles = useMemo(
+    () => new Set(highlightedHandleKey ? highlightedHandleKey.split('|') : []),
+    [highlightedHandleKey]
+  )
+  const connectedSourceHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const handles = new Set<string>()
+        for (const edge of state.edges) {
+          if (edge.source === id && isPositionedSourceHandle(edge.sourceHandle)) {
+            handles.add(edge.sourceHandle)
+          }
+        }
+        return Array.from(handles).sort().join('|')
+      },
+      [id]
+    )
+  )
+  const connectedSourceHandles = useMemo(
+    () => new Set(connectedSourceHandleKey ? connectedSourceHandleKey.split('|') : []),
+    [connectedSourceHandleKey]
+  )
+  const connectedTargetHandleKey = useReactFlowStore(
+    useCallback(
+      (state) => {
+        const handles = new Set<string>()
+        for (const edge of state.edges) {
+          if (edge.target === id && isPositionedTargetHandle(edge.targetHandle)) {
+            handles.add(edge.targetHandle)
+          }
+        }
+        return Array.from(handles).sort().join('|')
+      },
+      [id]
+    )
+  )
+  const connectedTargetHandles = useMemo(
+    () => new Set(connectedTargetHandleKey ? connectedTargetHandleKey.split('|') : []),
+    [connectedTargetHandleKey]
+  )
+
+  const errorOutputEnabled = Boolean(currentBlock?.errorEnabled || hasErrorConnection)
+  const handleToggleErrorOutput = useCallback(
+    (next: boolean) => {
+      const store = useWorkflowStore.getState()
+      data.onSetErrorOutputEnabled?.(id, next)
+      if (!next) {
+        /* Turning the branch off removes its connections — a hidden error
+           edge would still reroute failures with no visible affordance. */
+        const errorEdgeIds = store.edges
+          .filter((edge) => edge.source === id && edge.sourceHandle === 'error')
+          .map((edge) => edge.id)
+        if (errorEdgeIds.length > 0) data.onRemoveEdges?.(errorEdgeIds)
+      }
+    },
+    [data.onRemoveEdges, data.onSetErrorOutputEnabled, id]
+  )
+
   const posthog = usePostHog()
 
   const sunset = getBlockSunset(config, name, blockSubBlockValues.model, currentWorkflow.isDiffMode)
@@ -640,6 +1030,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       ? displayAdvancedMode
       : displayAdvancedMode || hasAdvancedValues(config.subBlocks, rawValues, canonicalIndex)
     const effectiveTrigger = displayTriggerMode
+    const canvasPresentation = resolveCanvasBlockPresentation(config, name, rawValues)
 
     const visibleSubBlocks = config.subBlocks.filter((block) => {
       if (block.hidden) return false
@@ -679,12 +1070,32 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         return false
       }
 
-      if (!block.condition) return true
+      if (block.condition && !evaluateSubBlockCondition(block.condition, rawValues)) {
+        return false
+      }
+
+      if (
+        canvasPresentation.usesDefaultTitle &&
+        block.id === canvasPresentation.operationSubBlockId
+      ) {
+        return false
+      }
 
-      return evaluateSubBlockCondition(block.condition, rawValues)
+      return hasDisplayableRowValue(block, rawValues[block.id])
     })
 
-    visibleSubBlocks.forEach((block) => {
+    const chipBlocks = visibleSubBlocks
+      .filter(
+        (block) =>
+          canvasPresentation.usesDefaultTitle || block.id !== canvasPresentation.operationSubBlockId
+      )
+      .filter((block) => chipPriority(block) !== null)
+      .sort((a, b) => (chipPriority(a) ?? 0) - (chipPriority(b) ?? 0))
+      .slice(0, MAX_CHIPS)
+    const chipIds = new Set(chipBlocks.map((block) => block.id))
+    const rowSubBlocks = visibleSubBlocks.filter((block) => !chipIds.has(block.id))
+
+    rowSubBlocks.forEach((block) => {
       if (currentRowWidth + blockWidth > 1) {
         if (currentRow.length > 0) {
           rows.push([...currentRow])
@@ -701,7 +1112,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       rows.push(currentRow)
     }
 
-    return { rows, stateToUse }
+    return { rows, stateToUse, chipBlocks, canvasPresentation }
   }, [
     config.subBlocks,
     config.category,
@@ -719,10 +1130,13 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     hiddenByReactiveCondition,
     blockSubBlockValues,
     activeWorkflowId,
+    name,
   ])
 
   const subBlockRows = subBlockRowsData.rows
   const subBlockState = subBlockRowsData.stateToUse
+  const chipBlocks = subBlockRowsData.chipBlocks
+  const canvasPresentation = subBlockRowsData.canvasPresentation
   const topologySubBlocks = data.isPreview
     ? (data.blockState?.subBlocks ?? {})
     : (currentStoreBlock?.subBlocks ?? {})
@@ -739,13 +1153,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       : displayAdvancedMode || hasAdvancedValues(config.subBlocks, rawValues, canonicalIndex)
   }, [subBlockState, displayAdvancedMode, config.subBlocks, canonicalIndex, canEditWorkflow])
 
-  /**
-   * Determine if block has content below the header (subblocks or error row).
-   * Controls header border visibility and content container rendering.
-   */
   const shouldShowDefaultHandles =
     config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode
-  const hasContentBelowHeader = subBlockRows.length > 0 || shouldShowDefaultHandles
 
   /**
    * Compute per-condition rows (title/value/id) for condition blocks so we can render
@@ -772,6 +1181,18 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     }))
   }, [type, topologySubBlocks, id])
 
+  /**
+   * Whether anything renders below the header — subblock rows, chips, or the
+   * condition/router branch rows.
+   */
+  const showsErrorRow = shouldShowDefaultHandles && type !== 'response'
+  const hasContentBelowHeader =
+    subBlockRows.length > 0 ||
+    chipBlocks.length > 0 ||
+    conditionRows.length > 0 ||
+    routerRows.length > 0 ||
+    showsErrorRow
+
   /**
    * Total rendered row count. `mcp-dynamic-args` expands one row per parameter
    * in the cached tool schema, so we count those properties instead of 1.
@@ -781,11 +1202,10 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     for (const row of subBlockRows) {
       for (const subBlock of row) {
         if (subBlock.type === 'mcp-dynamic-args') {
-          const schema = subBlockState._toolSchema?.value as
-            | { properties?: Record<string, unknown> }
-            | undefined
-          const properties = schema?.properties
-          count += properties && typeof properties === 'object' ? Object.keys(properties).length : 0
+          count += getDisplayableMcpParamNames(
+            subBlockState._toolSchema?.value,
+            subBlockState[subBlock.id]?.value
+          ).length
         } else {
           count += 1
         }
@@ -794,6 +1214,27 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     return count
   }, [subBlockRows, subBlockState])
 
+  /**
+   * Natural-language summary data: segments + line estimate for the block
+   * types with a sentence template. Null keeps the field-row layout.
+   */
+  const sentenceData = useMemo(() => {
+    if (type === 'condition' || type === 'router_v2') return null
+    const visibleSubBlocksById = new Map<string, SubBlockConfig>()
+    for (const subBlock of chipBlocks) visibleSubBlocksById.set(subBlock.id, subBlock)
+    for (const row of subBlockRows) {
+      for (const subBlock of row) visibleSubBlocksById.set(subBlock.id, subBlock)
+    }
+    const resolve = (...ids: string[]) =>
+      ids.find((candidate) => visibleSubBlocksById.has(candidate)) ?? null
+    const segments = buildSentenceSegments(type, subBlockState.operation?.value, resolve)
+    if (!segments) return null
+    const lines = estimateSentenceLines(segments, (subBlockId) =>
+      getDisplayValue(subBlockState[subBlockId]?.value)
+    )
+    return { segments, visibleSubBlocksById, lines }
+  }, [type, chipBlocks, subBlockRows, subBlockState])
+
   /**
    * Compute and publish deterministic layout metrics for workflow blocks.
    * This avoids ResizeObserver/animation-frame jitter and prevents initial "jump".
@@ -805,9 +1246,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         blockType: type,
         category: config.category,
         displayTriggerMode,
-        visibleSubBlockCount: totalRenderedRowCount,
+        visibleSubBlockCount: sentenceData ? 0 : totalRenderedRowCount,
         conditionRowCount: conditionRows.length,
         routerRowCount: routerRows.length,
+        chipCount: sentenceData ? 0 : chipBlocks.length,
+        sentenceLineCount: sentenceData?.lines ?? 0,
+        hasErrorRow: showsErrorRow,
       })
     },
     dependencies: [
@@ -817,7 +1261,11 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       totalRenderedRowCount,
       conditionRows.length,
       routerRows.length,
+      chipBlocks.length,
+      sentenceData?.lines ?? 0,
+      Boolean(sentenceData),
       horizontalHandles,
+      showsErrorRow,
     ],
   })
 
@@ -839,8 +1287,73 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   const wouldCreateConnectionCycle = (source: string, target: string) =>
     wouldCreateCycle(useWorkflowStore.getState().edges, source, target)
 
+  const getCanvasRowTitle = (subBlock: SubBlockConfig) =>
+    subBlock.id === canvasPresentation.operationSubBlockId && !canvasPresentation.usesDefaultTitle
+      ? (canvasPresentation.operationRowTitle ?? subBlock.title ?? subBlock.id)
+      : (subBlock.title ?? subBlock.id)
+
   const webhookProviderName = webhookProvider ? getProviderName(webhookProvider) : undefined
 
+  const isBranchBlock = type === 'condition' || type === 'router_v2'
+
+  const sentence = sentenceData ? (
+    <>
+      {sentenceData.segments.map((segment, index) => {
+        if (typeof segment === 'string') {
+          const glue = index > 0 && !segment.startsWith(',') && !segment.startsWith('.') ? ' ' : ''
+          return <Fragment key={`text-${index}`}>{`${glue}${segment}`}</Fragment>
+        }
+        const subBlock = sentenceData.visibleSubBlocksById.get(segment.id)
+        if (!subBlock) return null
+        const rawValue = subBlockState[segment.id]?.value
+        return (
+          <Fragment key={`value-${index}`}>
+            {' '}
+            <SubBlockRow
+              title={getCanvasRowTitle(subBlock)}
+              value={getDisplayValue(rawValue)}
+              subBlock={subBlock}
+              rawValue={rawValue}
+              workspaceId={workspaceId}
+              workflowId={currentWorkflowId}
+              blockId={id}
+              allSubBlockValues={subBlockState}
+              displayAdvancedOptions={effectiveAdvanced}
+              canonicalIndex={canonicalIndex}
+              canonicalModeOverrides={canonicalModeOverrides}
+              variant='inline-value'
+            />
+          </Fragment>
+        )
+      })}
+    </>
+  ) : undefined
+
+  const chips =
+    isBranchBlock || sentenceData || chipBlocks.length === 0 ? undefined : (
+      <>
+        {chipBlocks.map((subBlock, index) => (
+          <Fragment key={`statement-${subBlock.id}`}>
+            {index > 0 && <span className='flex-shrink-0 text-[var(--text-muted)] text-sm'>·</span>}
+            <SubBlockRow
+              title={getCanvasRowTitle(subBlock)}
+              value={getDisplayValue(subBlockState[subBlock.id]?.value)}
+              subBlock={subBlock}
+              rawValue={subBlockState[subBlock.id]?.value}
+              workspaceId={workspaceId}
+              workflowId={currentWorkflowId}
+              blockId={id}
+              allSubBlockValues={subBlockState}
+              displayAdvancedOptions={effectiveAdvanced}
+              canonicalIndex={canonicalIndex}
+              canonicalModeOverrides={canonicalModeOverrides}
+              variant={subBlock.id === 'operation' ? 'statement-primary' : 'statement-muted'}
+            />
+          </Fragment>
+        ))}
+      </>
+    )
+
   const rows =
     type === 'condition' || type === 'router_v2' ? null : (
       <>
@@ -848,29 +1361,25 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           row.flatMap((subBlock) => {
             const rawValue = subBlockState[subBlock.id]?.value
             if (subBlock.type === 'mcp-dynamic-args') {
-              const schema = subBlockState._toolSchema?.value as
-                | { properties?: Record<string, unknown> }
-                | undefined
-              const properties = schema?.properties
-              if (properties && typeof properties === 'object') {
-                const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
-                  string,
-                  unknown
-                >
-                return Object.keys(properties).map((paramName) => (
+              const args = (rawValue && typeof rawValue === 'object' ? rawValue : {}) as Record<
+                string,
+                unknown
+              >
+              return getDisplayableMcpParamNames(subBlockState._toolSchema?.value, rawValue).map(
+                (paramName) => (
                   <SubBlockRow
                     key={`${subBlock.id}-${paramName}-${rowIndex}`}
                     title={formatParameterLabel(paramName)}
                     value={getDisplayValue(args[paramName])}
                   />
-                ))
-              }
-              return []
+                )
+              )
             }
+            const metaIcon = getMetaIcon(subBlock)
             return [
               <SubBlockRow
                 key={`${subBlock.id}-${rowIndex}`}
-                title={subBlock.title ?? subBlock.id}
+                title={getCanvasRowTitle(subBlock)}
                 value={getDisplayValue(rawValue)}
                 subBlock={subBlock}
                 rawValue={rawValue}
@@ -881,6 +1390,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                 displayAdvancedOptions={effectiveAdvanced}
                 canonicalIndex={canonicalIndex}
                 canonicalModeOverrides={canonicalModeOverrides}
+                variant={metaIcon ? 'meta' : 'row'}
+                icon={metaIcon ?? undefined}
               />,
             ]
           })
@@ -892,17 +1403,22 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     <WorkflowBlockView
       id={id}
       type={type}
-      name={name}
+      name={canvasPresentation.title}
       isPending={isPending}
       isEnabled={isEnabled}
       isLocked={isLocked}
       hasRing={hasRing}
       ringStyles={ringStyles}
       runPathStatus={runPathStatus}
+      isRunning={isExecuting}
+      isWorkflowRunning={isWorkflowRunning}
+      isExecutionHighlighted={isExecutionHighlighted}
       Icon={config.icon}
       iconBgColor={config.bgColor}
+      isIntegration={config.category === 'tools'}
       horizontalHandles={horizontalHandles}
       shouldShowDefaultHandles={shouldShowDefaultHandles}
+      blockHeight={blockHeight}
       hasContentBelowHeader={hasContentBelowHeader}
       conditionRows={conditionRows}
       routerRows={routerRows}
@@ -946,10 +1462,28 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       contentRef={contentRef}
       actionBar={
         !data.isPreview && !data.isEmbedded ? (
-          <ActionBar blockId={id} blockType={type} disabled={!canEditWorkflow} />
+          <ActionBar
+            blockId={id}
+            blockType={type}
+            disabled={!canEditWorkflow}
+            variant='swell'
+            isRunning={isExecuting}
+            isWorkflowRunning={isWorkflowRunning}
+          />
         ) : undefined
       }
       rows={rows}
+      chips={chips}
+      typeLabel={canvasPresentation.typeLabel}
+      sentence={sentence}
+      hasErrorConnection={hasErrorConnection}
+      errorOutputEnabled={errorOutputEnabled}
+      onToggleErrorOutput={
+        canEditWorkflow && data.onSetErrorOutputEnabled ? handleToggleErrorOutput : undefined
+      }
+      highlightedHandles={highlightedHandles}
+      connectedSourceHandles={connectedSourceHandles}
+      connectedTargetHandles={connectedTargetHandles}
     />
   )
 }, shouldSkipBlockRender)
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 c57b08ea2ff..e14fe56bf01 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,14 +3,13 @@
 import { memo, useCallback, useRef, useState } from 'react'
 import {
   Button,
-  ChevronDown,
+  ChipSwitch,
   Cursor,
   Hand,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverItem,
-  PopoverTrigger,
   Redo,
   Tooltip,
   Undo,
@@ -31,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()
@@ -40,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 })
@@ -64,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) => {
@@ -88,101 +146,20 @@ export const WorkflowControls = memo(function WorkflowControls() {
 
   return (
     <>
-      <div
-        className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
-        onContextMenu={handleContextMenu}
-      >
-        {/* Canvas Mode Selector */}
-        <Popover
-          open={isCanvasModeOpen}
-          onOpenChange={setIsCanvasModeOpen}
-          variant='secondary'
-          size='sm'
-        >
-          <Tooltip.Root>
-            <PopoverTrigger asChild>
-              <div className='flex cursor-pointer items-center gap-1'>
-                <Tooltip.Trigger asChild>
-                  <Button className='size-[28px] rounded-md p-0' variant='active'>
-                    {mode === 'hand' ? (
-                      <Hand className='size-[14px]' />
-                    ) : (
-                      <Cursor className='size-[14px]' />
-                    )}
-                  </Button>
-                </Tooltip.Trigger>
-                <Button className='-m-1 !p-1.5 group' variant='ghost'>
-                  <ChevronDown
-                    className={`size-[14px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${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-3' />
-              <span>Mover</span>
-            </PopoverItem>
-            <PopoverItem
-              onClick={() => {
-                setMode('cursor')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Cursor className='size-3' />
-              <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='size-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
-              onClick={undo}
-              disabled={!canUndo}
-            >
-              <Undo className='size-[16px]' />
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            <Tooltip.Shortcut keys='⌘Z'>Undo</Tooltip.Shortcut>
-          </Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='size-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
-              onClick={redo}
-              disabled={!canRedo}
-            >
-              <Redo className='size-[16px]' />
-            </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='size-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
+              className='size-[30px] rounded-lg p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={handleFitToView}
             >
               <SelectAll className='size-[16px]' />
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]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
index eff2ef11c30..f0e92a4aa59 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -1,8 +1,13 @@
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { type EdgeDiffStatus, WorkflowEdgeView } from '@sim/workflow-renderer'
-import type { EdgeProps } from 'reactflow'
+import { type EdgeProps, useStore } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
-import { useLastRunEdges } from '@/stores/execution'
+import {
+  useIsBlockActive,
+  useIsCurrentWorkflowExecuting,
+  useLastRunEdges,
+} from '@/stores/execution'
+import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 
 /** Extended edge props with optional handle identifiers */
@@ -28,6 +33,36 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
     }))
   )
   const lastRunEdges = useLastRunEdges()
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isTargetActive = useIsBlockActive(target)
+  const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
+  const { activeTab, isPanelOpen } = usePanelStore(
+    useShallow((state) => ({ activeTab: state.activeTab, isPanelOpen: state.isOpen }))
+  )
+
+  /**
+   * Match the block ring: darken edges when an endpoint is canvas-selected or
+   * open in the editor panel (same `--text-secondary` as the selection ring).
+   */
+  const isEndpointSelected = useStore(
+    useCallback(
+      (state) =>
+        Boolean(
+          state.nodeInternals.get(source)?.selected || state.nodeInternals.get(target)?.selected
+        ),
+      [source, target]
+    )
+  )
+  const isConnectedToSelection = Boolean(
+    isEndpointSelected ||
+      (data as { isConnectedToSelection?: boolean } | undefined)?.isConnectedToSelection
+  )
+  const isConnectedToEditor =
+    isPanelOpen &&
+    activeTab === 'editor' &&
+    currentBlockId !== null &&
+    (currentBlockId === source || currentBlockId === target)
+  const shouldHighlightEdge = isConnectedToSelection || isConnectedToEditor
 
   const previewExecutionStatus = (
     data as { executionStatus?: 'success' | 'error' | 'not-executed' } | undefined
@@ -66,6 +101,9 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
       diffStatus={diffStatus}
       runStatus={runStatus}
       isPreviewRun={Boolean(previewExecutionStatus)}
+      isWorkflowRunning={isWorkflowRunning}
+      isTargetActive={isTargetActive}
+      isConnectedToSelection={shouldHighlightEdge}
     />
   )
 }
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/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
index 922df81d023..17dcb0a2eb1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -7,6 +7,10 @@ export { useBlockVisual } from './use-block-visual'
 export { useCanvasContextMenu } from './use-canvas-context-menu'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
 export { useDynamicHandleRefresh } from './use-dynamic-handle-refresh'
+export {
+  isBlockInActiveExecutionHandoff,
+  useIsBlockInActiveExecutionHandoff,
+} from './use-execution-handoff'
 export { useNodeUtilities } from './use-node-utilities'
 export { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'
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 2eac158d9aa..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
@@ -23,7 +23,7 @@ interface UseBlockVisualProps {
 
 /**
  * Provides visual state and interaction handlers for workflow blocks.
- * Computes ring styling based on editor open state, execution, diff, deletion, and run path states.
+ * Computes ring styling based on editor open state, execution, diff, deletion, and pending states.
  * Ring is shown only when the editor panel is open for this block, not during selection/dragging.
  * In preview mode, uses isPreviewSelected for selection highlighting.
  *
@@ -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]
     )
@@ -84,7 +84,6 @@ export function useBlockVisual({
         isPending: isPreview ? false : isPending,
         isDeletedBlock: isPreview ? false : isDeletedBlock,
         diffStatus: isPreview ? undefined : diffStatus,
-        runPathStatus,
         isPreviewSelection: isPreview && isPreviewSelected,
         isSelected: isPreview || isEmbedded ? false : isSelected,
       }),
@@ -94,7 +93,6 @@ export function useBlockVisual({
       isPending,
       isDeletedBlock,
       diffStatus,
-      runPathStatus,
       isPreview,
       isEmbedded,
       isPreviewSelected,
@@ -106,6 +104,7 @@ export function useBlockVisual({
     currentWorkflow,
     activeWorkflowId,
     isEnabled,
+    isExecuting,
     isLocked,
     handleClick,
     hasRing,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
index 13a9968e742..90167a8bb89 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts
@@ -37,7 +37,6 @@ export function useCanvasContextMenu({ blocks, getNodes, setNodes }: UseCanvasCo
           id: n.id,
           type: block?.type || '',
           enabled: block?.enabled ?? true,
-          horizontalHandles: block?.horizontalHandles ?? false,
           parentId,
           parentType,
           locked: block?.locked ?? false,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.test.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.test.ts
new file mode 100644
index 00000000000..f4cb0cb43d8
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { isBlockInActiveExecutionHandoff } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff'
+
+const edges = [
+  { id: 'source-to-target', source: 'source', target: 'target' },
+  { id: 'stale-to-target', source: 'stale-source', target: 'target' },
+  { id: 'source-to-idle', source: 'source', target: 'idle-target' },
+]
+
+describe('isBlockInActiveExecutionHandoff', () => {
+  it('highlights the active destination and the source that just delivered it', () => {
+    const options = {
+      isExecuting: true,
+      activeBlockIds: new Set(['target']),
+      lastRunEdges: new Map([['source-to-target', 'success']]),
+      edges,
+    }
+
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'target' })).toBe(true)
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'source' })).toBe(true)
+  })
+
+  it('does not highlight unrelated sources or previously traversed inactive paths', () => {
+    const options = {
+      isExecuting: true,
+      activeBlockIds: new Set(['target']),
+      lastRunEdges: new Map([
+        ['source-to-target', 'success'],
+        ['source-to-idle', 'success'],
+      ]),
+      edges,
+    }
+
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'stale-source' })).toBe(false)
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'idle-target' })).toBe(false)
+  })
+
+  it('clears every handoff highlight when execution stops', () => {
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'target',
+        isExecuting: false,
+        activeBlockIds: new Set(['target']),
+        lastRunEdges: new Map([['source-to-target', 'success']]),
+        edges,
+      })
+    ).toBe(false)
+  })
+
+  it('recomputes the handoff when the execution snapshot changes', () => {
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'source',
+        isExecuting: true,
+        activeBlockIds: new Set(['target']),
+        lastRunEdges: new Map([['source-to-target', 'success']]),
+        edges,
+      })
+    ).toBe(true)
+
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'source',
+        isExecuting: true,
+        activeBlockIds: new Set(['idle-target']),
+        lastRunEdges: new Map(),
+        edges,
+      })
+    ).toBe(false)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.ts
new file mode 100644
index 00000000000..bec9b19b5d7
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff.ts
@@ -0,0 +1,94 @@
+import type { Edge } from 'reactflow'
+import { useExecutionStore } from '@/stores/execution'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+
+interface ActiveExecutionHandoffOptions {
+  blockId: string
+  isExecuting: boolean
+  activeBlockIds: ReadonlySet<string>
+  lastRunEdges: ReadonlyMap<string, unknown>
+  edges: ReadonlyArray<Pick<Edge, 'id' | 'source' | 'target'>>
+}
+
+interface ActiveExecutionHandoffCache {
+  activeBlockIds: ReadonlySet<string>
+  lastRunEdges: ReadonlyMap<string, unknown>
+  edges: ReadonlyArray<Pick<Edge, 'id' | 'source' | 'target'>>
+  highlightedBlockIds: ReadonlySet<string>
+}
+
+let activeExecutionHandoffCache: ActiveExecutionHandoffCache | null = null
+
+/** Resolves the active handoff once for every immutable execution snapshot. */
+function getActiveExecutionHandoffBlockIds(
+  activeBlockIds: ReadonlySet<string>,
+  lastRunEdges: ReadonlyMap<string, unknown>,
+  edges: ReadonlyArray<Pick<Edge, 'id' | 'source' | 'target'>>
+): ReadonlySet<string> {
+  if (
+    activeExecutionHandoffCache?.activeBlockIds === activeBlockIds &&
+    activeExecutionHandoffCache.lastRunEdges === lastRunEdges &&
+    activeExecutionHandoffCache.edges === edges
+  ) {
+    return activeExecutionHandoffCache.highlightedBlockIds
+  }
+
+  const highlightedBlockIds = new Set(activeBlockIds)
+  for (const edge of edges) {
+    if (lastRunEdges.has(edge.id) && activeBlockIds.has(edge.target)) {
+      highlightedBlockIds.add(edge.source)
+    }
+  }
+
+  activeExecutionHandoffCache = {
+    activeBlockIds,
+    lastRunEdges,
+    edges,
+    highlightedBlockIds,
+  }
+
+  return highlightedBlockIds
+}
+
+/**
+ * Returns whether a block is participating in the handoff into an active block.
+ *
+ * The active destination always participates. A source participates only when
+ * its outgoing edge has been taken and currently feeds an active destination.
+ */
+export function isBlockInActiveExecutionHandoff({
+  blockId,
+  isExecuting,
+  activeBlockIds,
+  lastRunEdges,
+  edges,
+}: ActiveExecutionHandoffOptions): boolean {
+  if (!isExecuting) return false
+  return getActiveExecutionHandoffBlockIds(activeBlockIds, lastRunEdges, edges).has(blockId)
+}
+
+/**
+ * Selects whether a block belongs to the current live execution handoff.
+ *
+ * The selector returns a boolean so unrelated execution updates do not rerender
+ * every block on the canvas.
+ */
+export function useIsBlockInActiveExecutionHandoff(blockId: string): boolean {
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const edges = useWorkflowStore((state) => state.edges)
+
+  return useExecutionStore((state) => {
+    if (!activeWorkflowId) return false
+    const execution = state.workflowExecutions.get(activeWorkflowId)
+    if (!execution) return false
+
+    return isBlockInActiveExecutionHandoff({
+      blockId,
+      isExecuting: execution.isExecuting,
+      activeBlockIds: execution.activeBlockIds,
+      lastRunEdges: execution.lastRunEdges,
+      edges,
+    })
+  })
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
index 77d5cde2635..85a4a7ab128 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts
@@ -48,8 +48,11 @@ export function useNodeUtilities(blocks: Record<string, any>) {
 
       if (block.height) {
         return {
-          width: BLOCK_DIMENSIONS.FIXED_WIDTH,
-          height: Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT),
+          width: block.type === 'note' ? BLOCK_DIMENSIONS.NOTE_WIDTH : BLOCK_DIMENSIONS.FIXED_WIDTH,
+          height:
+            block.type === 'note'
+              ? block.height
+              : Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT),
         }
       }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.test.tsx
index b742a87a169..b4f8c31960b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.test.tsx
@@ -9,10 +9,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 const {
   DirectUploadErrorMock,
   executionStoreState,
+  mockCancel,
   mockExecute,
   mockExecuteFromBlock,
   mockFetch,
+  mockHandleExecutionCancelledConsole,
   mockHandleExecutionErrorConsole,
+  mockRequestJson,
   mockResolveStartCandidates,
   mockRunUploadStrategy,
   mockSelectBestTrigger,
@@ -92,10 +95,13 @@ const {
   return {
     DirectUploadErrorMock,
     executionStoreState,
+    mockCancel: vi.fn(),
     mockExecute: vi.fn(),
     mockExecuteFromBlock: vi.fn(),
     mockFetch: vi.fn(),
+    mockHandleExecutionCancelledConsole: vi.fn(),
     mockHandleExecutionErrorConsole: vi.fn(),
+    mockRequestJson: vi.fn(),
     mockResolveStartCandidates: vi.fn(),
     mockRunUploadStrategy: vi.fn(),
     mockSelectBestTrigger: vi.fn(),
@@ -114,7 +120,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 vi.mock('@/lib/api/client/request', () => ({
-  requestJson: vi.fn(),
+  requestJson: mockRequestJson,
 }))
 
 vi.mock('@/lib/api/contracts/workflows', () => ({
@@ -182,7 +188,7 @@ vi.mock('@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-u
   }),
   reconcileFinalBlockLogs: vi.fn(),
   addExecutionErrorConsoleEntry: vi.fn(),
-  handleExecutionCancelledConsole: vi.fn(),
+  handleExecutionCancelledConsole: mockHandleExecutionCancelledConsole,
   handleExecutionErrorConsole: mockHandleExecutionErrorConsole,
 }))
 
@@ -218,7 +224,7 @@ vi.mock('@/hooks/use-execution-stream', () => {
       execute: mockExecute,
       executeFromBlock: mockExecuteFromBlock,
       reconnect: vi.fn(),
-      cancel: vi.fn(),
+      cancel: mockCancel,
       cancelExecute: vi.fn(),
       cancelReconnect: vi.fn(),
     }),
@@ -351,6 +357,44 @@ async function drainStream(value: unknown): Promise<void> {
   while (!(await reader.read()).done) {}
 }
 
+describe('useWorkflowExecution cancellation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    executionStoreState.getCurrentExecutionId.mockReturnValue('execution-1')
+    mockRequestJson.mockResolvedValue({ success: true })
+  })
+
+  afterEach(() => {
+    executionStoreState.getCurrentExecutionId.mockReturnValue(null)
+  })
+
+  it('stops the local execution state immediately while cancelling the server execution', () => {
+    const { result, unmount } = renderWorkflowExecutionHook()
+
+    act(() => {
+      result().handleCancelExecution()
+    })
+
+    expect(mockCancel).toHaveBeenCalledWith('workflow-1')
+    expect(executionStoreState.setCurrentExecutionId).toHaveBeenCalledWith('workflow-1', null)
+    expect(executionStoreState.setIsExecuting).toHaveBeenCalledWith('workflow-1', false)
+    expect(executionStoreState.setIsDebugging).toHaveBeenCalledWith('workflow-1', false)
+    expect(executionStoreState.setActiveBlocks).toHaveBeenCalledWith('workflow-1', expect.any(Set))
+    expect(mockHandleExecutionCancelledConsole.mock.calls[0]?.[1]).toEqual({
+      workflowId: 'workflow-1',
+      executionId: 'execution-1',
+    })
+    expect(mockRequestJson).toHaveBeenCalledWith(
+      {},
+      expect.objectContaining({
+        params: { id: 'workflow-1', executionId: 'execution-1' },
+      })
+    )
+
+    unmount()
+  })
+})
+
 describe('useWorkflowExecution attachment uploads', () => {
   beforeEach(() => {
     vi.clearAllMocks()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
index a292e62455a..b1c7854f933 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
@@ -1864,6 +1864,18 @@ export function useWorkflowExecution() {
 
     const storedExecutionId = getCurrentExecutionId(activeWorkflowId)
 
+    executionStream.cancel(activeWorkflowId)
+    currentChatExecutionIdRef.current = null
+    runFromBlockOwnerRef.current = null
+    setCurrentExecutionId(activeWorkflowId, null)
+    setIsExecuting(activeWorkflowId, false)
+    setIsDebugging(activeWorkflowId, false)
+    setActiveBlocks(activeWorkflowId, new Set())
+    handleExecutionCancelledConsole({
+      workflowId: activeWorkflowId,
+      executionId: storedExecutionId ?? undefined,
+    })
+
     if (storedExecutionId) {
       void requestJson(cancelWorkflowExecutionContract, {
         params: { id: activeWorkflowId, executionId: storedExecutionId },
@@ -1878,10 +1890,7 @@ export function useWorkflowExecution() {
             return
           }
 
-          const currentId = getCurrentExecutionId(activeWorkflowId)
-          if (currentId !== storedExecutionId) return
-
-          logger.info('Workflow execution cancellation confirmed; awaiting terminal event', {
+          logger.info('Workflow execution cancellation confirmed', {
             workflowId: activeWorkflowId,
             executionId: storedExecutionId,
           })
@@ -1893,12 +1902,6 @@ export function useWorkflowExecution() {
             error,
           })
         })
-    } else {
-      executionStream.cancel(activeWorkflowId)
-      currentChatExecutionIdRef.current = null
-      setIsExecuting(activeWorkflowId, false)
-      setIsDebugging(activeWorkflowId, false)
-      setActiveBlocks(activeWorkflowId, new Set())
     }
 
     if (isDebugging) {
@@ -1911,8 +1914,10 @@ export function useWorkflowExecution() {
     setIsExecuting,
     setIsDebugging,
     setActiveBlocks,
+    setCurrentExecutionId,
     activeWorkflowId,
     getCurrentExecutionId,
+    handleExecutionCancelledConsole,
   ])
 
   /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.test.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.test.ts
new file mode 100644
index 00000000000..53b68a0a19d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { getBlockRingStyles } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils'
+
+const IDLE_OPTIONS = {
+  isExecuting: false,
+  isEditorOpen: false,
+  isPending: false,
+  isDeletedBlock: false,
+  diffStatus: null,
+  isPreviewSelection: false,
+  isSelected: false,
+} as const
+
+describe('getBlockRingStyles', () => {
+  it('does not render an outline for execution alone', () => {
+    expect(getBlockRingStyles({ ...IDLE_OPTIONS, isExecuting: true })).toEqual({
+      hasRing: false,
+      ringClassName: '',
+    })
+  })
+
+  it('preserves the selection ring while a selected block executes', () => {
+    const result = getBlockRingStyles({
+      ...IDLE_OPTIONS,
+      isExecuting: true,
+      isSelected: true,
+    })
+
+    expect(result.hasRing).toBe(true)
+    expect(result.ringClassName).toContain('ring-[var(--text-secondary)]')
+    expect(result.ringClassName).not.toContain('animate-ring-pulse')
+    expect(result.ringClassName).not.toContain('ring-[var(--border-success)]')
+  })
+
+  it('preserves non-execution status rings while idle', () => {
+    const result = getBlockRingStyles({
+      ...IDLE_OPTIONS,
+      diffStatus: 'new',
+    })
+
+    expect(result.hasRing).toBe(true)
+    expect(result.ringClassName).toContain('ring-[var(--brand-accent)]')
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
index b4996dd90ad..26871469f6b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -2,17 +2,14 @@ import { cn } from '@sim/emcn'
 
 export type BlockDiffStatus = 'new' | 'edited' | null | undefined
 
-export type BlockRunPathStatus = 'success' | 'error' | undefined
-
 interface BlockRingOptions {
-  /** Whether the block is executing (shows green pulsing ring) */
+  /** Whether the block is executing (suppresses stale status rings) */
   isExecuting: boolean
   /** Whether the editor panel is open for this block (shows blue ring) */
   isEditorOpen: boolean
   isPending: boolean
   isDeletedBlock: boolean
   diffStatus: BlockDiffStatus
-  runPathStatus: BlockRunPathStatus
   isPreviewSelection?: boolean
   /** Whether the block is selected via shift-click or selection box (shows blue ring) */
   isSelected?: boolean
@@ -20,7 +17,7 @@ interface BlockRingOptions {
 
 /**
  * Derives visual ring visibility and class names for workflow blocks
- * based on editor open state, execution, diff, deletion, and run-path states.
+ * based on editor open state, execution, diff, deletion, and pending states.
  */
 export function getBlockRingStyles(options: BlockRingOptions): {
   hasRing: boolean
@@ -32,76 +29,42 @@ export function getBlockRingStyles(options: BlockRingOptions): {
     isPending,
     isDeletedBlock,
     diffStatus,
-    runPathStatus,
     isPreviewSelection,
     isSelected,
   } = options
 
-  const hasRing =
-    isExecuting ||
-    isEditorOpen ||
-    isSelected ||
-    isPending ||
-    diffStatus === 'new' ||
-    diffStatus === 'edited' ||
-    isDeletedBlock ||
-    !!runPathStatus
+  const isSelectionHighlighted = isEditorOpen || isSelected || isPreviewSelection
+  const hasStatusRing =
+    !isExecuting && (isPending || diffStatus === 'new' || diffStatus === 'edited' || isDeletedBlock)
+  const hasRing = Boolean(isSelectionHighlighted || hasStatusRing)
 
   const ringClassName = cn(
-    // Executing block: pulsing success ring with prominent thickness (highest priority)
-    isExecuting && 'ring-[3.5px] ring-[var(--border-success)] animate-ring-pulse',
-    // Editor open, selected, or preview selection: static blue ring
-    !isExecuting &&
-      (isEditorOpen || isSelected || isPreviewSelection) &&
-      'ring-[1.75px] ring-[var(--brand-secondary)]',
+    // Editor open, selected, or preview selection: neutral highlight ring,
+    // matching the selection-highlighted edge color
+    isSelectionHighlighted && 'ring-[1.5px] ring-[var(--text-secondary)]',
     // Non-active states use standard ring utilities
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
-      !isPreviewSelection &&
-      hasRing &&
-      'ring-[1.75px]',
+    !isSelectionHighlighted && hasStatusRing && 'ring-[1.5px]',
     // Pending state: warning ring
-    !isExecuting && !isEditorOpen && !isSelected && isPending && 'ring-[var(--warning)]',
+    !isSelectionHighlighted && !isExecuting && isPending && 'ring-[var(--warning)]',
     // Deleted state (highest priority after active/pending)
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
+    !isSelectionHighlighted &&
+      !isExecuting &&
       !isPending &&
       isDeletedBlock &&
       'ring-[var(--text-error)]',
     // Diff states
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
+    !isSelectionHighlighted &&
+      !isExecuting &&
       !isPending &&
       !isDeletedBlock &&
       diffStatus === 'new' &&
       'ring-[var(--brand-accent)]',
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
+    !isSelectionHighlighted &&
+      !isExecuting &&
       !isPending &&
       !isDeletedBlock &&
       diffStatus === 'edited' &&
-      'ring-[var(--warning)]',
-    // Run path states (lowest priority - only show if no other states active)
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
-      !isPending &&
-      !isDeletedBlock &&
-      !diffStatus &&
-      runPathStatus === 'success' &&
-      'ring-[var(--border-success)]',
-    !isExecuting &&
-      !isEditorOpen &&
-      !isSelected &&
-      !isPending &&
-      !isDeletedBlock &&
-      !diffStatus &&
-      runPathStatus === 'error' &&
-      'ring-[var(--text-error)]'
+      'ring-[var(--warning)]'
   )
 
   return { hasRing, ringClassName }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.ts
index ccefe9f3d3f..81d1298e65d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils.ts
@@ -1,4 +1,4 @@
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, getNoteBlockHeight } from '@sim/workflow-renderer'
 import { getBlock } from '@/blocks/registry'
 
 /**
@@ -9,6 +9,13 @@ import { getBlock } from '@/blocks/registry'
  * @returns Estimated width and height for the block
  */
 export function estimateBlockDimensions(blockType: string): { width: number; height: number } {
+  if (blockType === 'note') {
+    return {
+      width: BLOCK_DIMENSIONS.NOTE_WIDTH,
+      height: getNoteBlockHeight(true),
+    }
+  }
+
   const blockConfig = getBlock(blockType)
   const subBlockCount = blockConfig?.subBlocks?.length ?? 3
   const estimatedRows = Math.max(3, Math.min(Math.ceil(subBlockCount / 2), 7))
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts
index 30f9edd2cb0..d432a2a9126 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.test.ts
@@ -2,7 +2,10 @@
  * @vitest-environment node
  */
 import { describe, expect, it } from 'vitest'
-import { isPositionalTriggerBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
+import {
+  isPositionalTriggerBlock,
+  shouldHighlightContainerDropTarget,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
 
 describe('isPositionalTriggerBlock', () => {
   it('returns true for a top-level block with no incoming edges', () => {
@@ -60,3 +63,14 @@ describe('isPositionalTriggerBlock', () => {
     expect(isPositionalTriggerBlock(pastedBlock, edges)).toBe(false)
   })
 })
+
+describe('shouldHighlightContainerDropTarget', () => {
+  it('does not highlight the loop while a nested block moves within it', () => {
+    expect(shouldHighlightContainerDropTarget('loop-1', 'loop-1')).toBe(false)
+  })
+
+  it('highlights a different container as a genuine re-parent target', () => {
+    expect(shouldHighlightContainerDropTarget('loop-1', 'loop-2')).toBe(true)
+    expect(shouldHighlightContainerDropTarget(null, 'loop-1')).toBe(true)
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
index 2fa772f78bb..da1c4c12591 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts
@@ -1,9 +1,11 @@
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, getNoteBlockHeight } from '@sim/workflow-renderer'
 import type { Edge, Node } from 'reactflow'
 import { TriggerUtils } from '@/lib/workflows/triggers/triggers'
 import { clampPositionToContainer } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 
+export const SUBFLOW_DROP_TARGET_CLASS = 'subflow-node-drop-target'
+
 /**
  * Collects all descendant block IDs for container blocks (loop/parallel) in the given set.
  * Used to treat a nested subflow as one unit when computing boundary edges (e.g. remove-from-subflow).
@@ -107,18 +109,31 @@ export function isPositionalTriggerBlock(
   return !edges.some((edge) => edge.target === block.id)
 }
 
+/**
+ * Returns whether a container should be emphasized as a new drop target.
+ * Moving within the block's existing container is a position change, not a
+ * re-parent operation, so it must not activate the container highlight.
+ */
+export function shouldHighlightContainerDropTarget(
+  currentParentId: string | null | undefined,
+  targetContainerId: string
+): boolean {
+  return currentParentId !== targetContainerId
+}
+
 /**
  * Clears drag highlight classes and resets cursor state.
  * Used when drag operations end or are cancelled.
  */
 export function clearDragHighlights(): void {
-  document.querySelectorAll('.loop-node-drag-over, .parallel-node-drag-over').forEach((el) => {
-    el.classList.remove('loop-node-drag-over', 'parallel-node-drag-over')
+  document.querySelectorAll(`.${SUBFLOW_DROP_TARGET_CLASS}`).forEach((el) => {
+    el.classList.remove(SUBFLOW_DROP_TARGET_CLASS)
   })
   document.body.style.cursor = ''
 }
 
 interface BlockData {
+  type?: string
   height?: number
   data?: {
     parentId?: string
@@ -154,11 +169,15 @@ export function getClampedPositionForNode(
     height: parentNode.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
   }
   const blockDimensions = {
-    width: BLOCK_DIMENSIONS.FIXED_WIDTH,
-    height: Math.max(
-      currentBlock?.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
-      BLOCK_DIMENSIONS.MIN_HEIGHT
-    ),
+    width:
+      currentBlock?.type === 'note' ? BLOCK_DIMENSIONS.NOTE_WIDTH : BLOCK_DIMENSIONS.FIXED_WIDTH,
+    height:
+      currentBlock?.type === 'note'
+        ? currentBlock.height || getNoteBlockHeight(true)
+        : Math.max(
+            currentBlock?.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
+            BLOCK_DIMENSIONS.MIN_HEIGHT
+          ),
   }
 
   return clampPositionToContainer(nodePosition, containerDimensions, blockDimensions)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
index 4d8bb03eeef..723d9292fb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts
@@ -2,6 +2,7 @@ import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { isPlainRecord } from '@sim/utils/object'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import { COPILOT_WORKFLOW_EXECUTION_CONFLICT_CODE } from '@/lib/copilot/constants'
 import type { SecretSafeBlockLog } from '@/lib/logs/execution/display-types'
 import type { TraceSpan } from '@/lib/logs/types'
@@ -78,6 +79,10 @@ function shouldActivateEdgeClient(
     return output?.selectedRoute === handle.substring('router-'.length)
   }
 
+  if (isPositionedSourceHandle(handle)) {
+    return !output?.error
+  }
+
   switch (handle) {
     case 'error':
       return !!output?.error
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
index f1ac35e01ee..26aa09fde74 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts
@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic'
 import type { EdgeTypes, NodeTypes } from 'reactflow'
 import { SubflowNodeComponent } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
+import { ConnectionBlockSelector } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector'
 import { WorkflowBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block'
 import { WorkflowEdge } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge'
 
@@ -22,6 +23,7 @@ const NoteBlock = dynamic(
 
 /** Custom node types for ReactFlow. */
 export const nodeTypes: NodeTypes = {
+  connectionBlockSelector: ConnectionBlockSelector,
   workflowBlock: WorkflowBlock,
   noteBlock: NoteBlock,
   subflowNode: SubflowNodeComponent,
@@ -39,8 +41,11 @@ export const defaultEdgeOptions = { type: 'custom' } as const
 export const reactFlowStyles = [
   '[&_.react-flow__handle]:!z-[30]',
   '[&_.react-flow__edge-labels]:!z-[1001]',
+  String.raw`[&_.react-flow\_\_connectionline]:!z-[0]`,
   '[&_.react-flow__pane]:select-none',
   '[&_.react-flow__selectionpane]:select-none',
+  String.raw`[&_.react-flow\_\_selection]:!border-[var(--text-secondary)]`,
+  String.raw`[&_.react-flow\_\_selection]:!bg-[color-mix(in_oklch,var(--text-secondary)_8%,transparent)]`,
   '[&_.react-flow__background]:hidden',
   '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 94e1c5ec5f6..677511b4521 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -8,16 +8,29 @@ import ReactFlow, {
   type Edge,
   type Node,
   type NodeChange,
+  type OnConnectStart,
   ReactFlowProvider,
   SelectionMode,
   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'
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import {
+  BLOCK_DIMENSIONS,
+  CONTAINER_DIMENSIONS,
+  getNoteBlockHeight,
+  normalizeCursorSourceHandleId,
+} from '@sim/workflow-renderer'
+import {
+  getHorizontalWorkflowHandleSide,
+  getPositionedTargetHandleId,
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useSession } from '@/lib/auth/auth-client'
 import type { OAuthConnectEventDetail } from '@/lib/copilot/tools/client/base-tool'
@@ -34,10 +47,14 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { BlockMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu'
 import { CanvasMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu'
+import {
+  CONNECTION_BLOCK_SELECTOR_DIMENSIONS,
+  CONNECTION_BLOCK_SELECTOR_NODE_ID,
+  type ConnectionBlockSelectorData,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector'
 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,
@@ -65,6 +82,8 @@ import {
   isInEditableElement,
   isPositionalTriggerBlock,
   resolveSelectionConflicts,
+  SUBFLOW_DROP_TARGET_CLASS,
+  shouldHighlightContainerDropTarget,
   validateTriggerPaste,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import {
@@ -121,6 +140,21 @@ const LazyChat = lazy(() =>
 const logger = createLogger('Workflow')
 
 const DEFAULT_PASTE_OFFSET = { x: 50, y: 50 }
+const CONNECTION_BLOCK_SELECTOR_FOCUS_DURATION_MS = 300
+const SUBFLOW_FOCUS_STABLE_FRAMES = 2
+const SUBFLOW_FOCUS_MIN_WAIT_FRAMES = 4
+const SUBFLOW_FOCUS_MAX_WAIT_FRAMES = 18
+const SUBFLOW_FOCUS_LAYOUT_TOLERANCE_PX = 0.5
+const SUBFLOW_FOCUS_PADDING = 0.08
+const CONNECTION_LINE_STYLE = {
+  stroke: 'var(--connection-line-stroke)',
+  strokeWidth: 2,
+}
+
+const getRegularBlockWidth = (type: string) =>
+  type === 'note' || type === 'noteBlock'
+    ? BLOCK_DIMENSIONS.NOTE_WIDTH
+    : BLOCK_DIMENSIONS.FIXED_WIDTH
 
 /**
  * Calculates the offset to paste blocks at viewport center
@@ -142,7 +176,7 @@ function calculatePasteOffset(
       const width =
         b.type === 'loop' || b.type === 'parallel'
           ? CONTAINER_DIMENSIONS.DEFAULT_WIDTH
-          : BLOCK_DIMENSIONS.FIXED_WIDTH
+          : getRegularBlockWidth(b.type)
       return b.position.x + width
     })
   )
@@ -188,10 +222,13 @@ function mapEdgesByNode(edges: Edge[], nodeIds: Set<string>): Map<string, Edge[]
  */
 function syncPanelWithSelection(selectedIds: string[]) {
   const { currentBlockId, clearCurrentBlock, setCurrentBlockId } = usePanelEditorStore.getState()
-  if (selectedIds.length === 0) {
+  const blocks = useWorkflowStore.getState().blocks
+  const editorSelectedIds = selectedIds.filter((id) => blocks[id]?.type !== 'note')
+
+  if (editorSelectedIds.length === 0) {
     if (currentBlockId) clearCurrentBlock()
   } else {
-    const lastSelectedId = selectedIds[selectedIds.length - 1]
+    const lastSelectedId = editorSelectedIds[editorSelectedIds.length - 1]
     if (lastSelectedId !== currentBlockId) {
       setCurrentBlockId(lastSelectedId)
     }
@@ -237,10 +274,17 @@ const WorkflowContent = React.memo(
     const [isCanvasReady, setIsCanvasReady] = useState(false)
     const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
     const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
-    const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
+    const [pendingConnect, setPendingConnect] = useState<PendingConnect | null>(null)
+    const hasPointerDownSinceSelectorOpenedRef = useRef(false)
+    const closeConnectionBlockSelector = useCallback(() => {
+      hasPointerDownSinceSelectorOpenedRef.current = false
+      setPendingConnect(null)
+    }, [])
     const canvasContainerRef = useRef<HTMLDivElement>(null)
     const embeddedFitFrameRef = useRef<number | null>(null)
     const hasCompletedInitialEmbeddedFitRef = useRef(false)
+    const initializedViewportWorkflowIdRef = useRef<string | null>(null)
+    const userFocusedWorkflowIdRef = useRef<string | null>(null)
     const canvasMode = useCanvasModeStore((state) => state.mode)
     const isHandMode = embedded ? true : canvasMode === 'hand'
     const { handleCanvasMouseDown, selectionProps } = useShiftSelectionLock({ isHandMode })
@@ -309,6 +353,10 @@ const WorkflowContent = React.memo(
       }))
     )
 
+    useEffect(() => {
+      userFocusedWorkflowIdRef.current = null
+    }, [activeWorkflowId, workflowIdParam])
+
     const currentWorkflow = useCurrentWorkflow()
 
     // Undo/redo availability for context menu
@@ -469,19 +517,14 @@ const WorkflowContent = React.memo(
     )
 
     /** Applies highlight styling to a container node during drag operations. */
-    const highlightContainerNode = useCallback(
-      (containerId: string, containerKind: 'loop' | 'parallel') => {
-        clearDragHighlights()
-        const containerElement = document.querySelector(`[data-id="${containerId}"]`)
-        if (containerElement) {
-          containerElement.classList.add(
-            containerKind === 'loop' ? 'loop-node-drag-over' : 'parallel-node-drag-over'
-          )
-          document.body.style.cursor = 'copy'
-        }
-      },
-      []
-    )
+    const highlightContainerNode = useCallback((containerId: string) => {
+      clearDragHighlights()
+      const containerElement = document.querySelector(`[data-id="${containerId}"]`)
+      if (containerElement) {
+        containerElement.classList.add(SUBFLOW_DROP_TARGET_CLASS)
+        document.body.style.cursor = 'copy'
+      }
+    }, [])
 
     const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null, {
       embedded,
@@ -531,7 +574,10 @@ const WorkflowContent = React.memo(
       )
 
     /** Stores source node/handle info when a connection drag starts for drop-on-block detection. */
-    const connectionSourceRef = useRef<{ nodeId: string; handleId: string } | null>(null)
+    const connectionSourceRef = useRef<{
+      nodeId: string | null
+      handleId: string | null
+    } | null>(null)
 
     /** Tracks whether onConnect successfully handled the connection (ReactFlow pattern). */
     const connectionCompletedRef = useRef(false)
@@ -603,11 +649,18 @@ const WorkflowContent = React.memo(
         edgesToFilter = [...edges, ...reconstructedEdges]
       }
 
-      return edgesToFilter.filter((edge) => {
-        const sourceBlock = blocks[edge.source]
-        const targetBlock = blocks[edge.target]
-        return Boolean(sourceBlock && targetBlock)
-      })
+      return edgesToFilter
+        .map((edge) => {
+          const sourceHandle = normalizePositionedSourceHandleId(edge.sourceHandle)
+          const targetHandle = normalizePositionedTargetHandleId(edge.targetHandle)
+          if (sourceHandle === edge.sourceHandle && targetHandle === edge.targetHandle) return edge
+          return { ...edge, sourceHandle, targetHandle }
+        })
+        .filter((edge) => {
+          const sourceBlock = blocks[edge.source]
+          const targetBlock = blocks[edge.target]
+          return Boolean(sourceBlock && targetBlock)
+        })
     }, [edges, isShowingDiff, isDiffReady, diffAnalysis, blocks])
 
     const { userPermissions, workspacePermissions, permissionsError } =
@@ -632,8 +685,8 @@ const WorkflowContent = React.memo(
       collaborativeBatchAddBlocks,
       collaborativeBatchRemoveBlocks,
       collaborativeBatchToggleBlockEnabled,
-      collaborativeBatchToggleBlockHandles,
       collaborativeBatchToggleLocked,
+      collaborativeSetBlockErrorEnabled,
       undo,
       redo,
     } = useCollaborativeWorkflow()
@@ -772,6 +825,19 @@ const WorkflowContent = React.memo(
       ]
     )
 
+    /**
+     * Block queued to be centered once its node mounts and has been measured.
+     * Creation is asynchronous — the store write, the node mount, and the
+     * dimension measurement each land on a later frame — so `addBlock` records
+     * the id and the effect below performs the camera move.
+     */
+    const pendingFocusBlockIdRef = useRef<string | null>(null)
+    /**
+     * Mirrors displayNodes for the run-follow subscription, which must read
+     * current node positions without re-subscribing on every node change.
+     */
+    const displayNodesRef = useRef<Node[]>([])
+
     const addBlock = useCallback(
       (
         id: string,
@@ -787,6 +853,7 @@ const WorkflowContent = React.memo(
       ) => {
         setPendingSelection([id])
         setSelectedEdges(new Map())
+        pendingFocusBlockIdRef.current = id
 
         const blockData: Record<string, unknown> = { ...(data || {}) }
         if (parentId) blockData.parentId = parentId
@@ -848,15 +915,6 @@ const WorkflowContent = React.memo(
 
     const [dragStartParentId, setDragStartParentId] = useState<string | null>(null)
 
-    /** Connection line style - red for error handles, default otherwise. */
-    const connectionLineStyle = useMemo(
-      () => ({
-        stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--workflow-edge)',
-        strokeWidth: 2,
-      }),
-      [isErrorConnectionDrag]
-    )
-
     /** Logs permission loading results for debugging. */
     useEffect(() => {
       if (permissionsError) {
@@ -1048,7 +1106,7 @@ const WorkflowContent = React.memo(
           if (clipboardBlocks.length > 0 && !hasNestedBlocks) {
             const minX = Math.min(...clipboardBlocks.map((b) => b.position.x))
             const maxX = Math.max(
-              ...clipboardBlocks.map((b) => b.position.x + BLOCK_DIMENSIONS.FIXED_WIDTH)
+              ...clipboardBlocks.map((b) => b.position.x + getRegularBlockWidth(b.type))
             )
             const minY = Math.min(...clipboardBlocks.map((b) => b.position.y))
             const maxY = Math.max(
@@ -1112,7 +1170,7 @@ const WorkflowContent = React.memo(
                 Math.min(
                   relativePosition.x,
                   targetContainer.dimensions.width -
-                    BLOCK_DIMENSIONS.FIXED_WIDTH -
+                    getRegularBlockWidth(block.type) -
                     CONTAINER_DIMENSIONS.RIGHT_PADDING
                 )
               ),
@@ -1221,11 +1279,6 @@ const WorkflowContent = React.memo(
       collaborativeBatchToggleBlockEnabled(blockIds)
     }, [contextMenuBlocks, collaborativeBatchToggleBlockEnabled])
 
-    const handleContextToggleHandles = useCallback(() => {
-      const blockIds = contextMenuBlocks.map((block) => block.id)
-      collaborativeBatchToggleBlockHandles(blockIds)
-    }, [contextMenuBlocks, collaborativeBatchToggleBlockHandles])
-
     const handleContextToggleLocked = useCallback(() => {
       const blockIds = contextMenuBlocks.map((block) => block.id)
       collaborativeBatchToggleLocked(blockIds)
@@ -2031,13 +2084,16 @@ const WorkflowContent = React.memo(
         if (typeof type !== 'string' || !type) return
         if (type === 'connectionBlock') return
 
-        // Complete an edge drag-release: only a genuine palette selection carries
-        // `pendingConnect` (other add-block dispatchers — toolbar, sidebar, command
-        // list — don't), so its presence is the signal. Delegating to
-        // handleToolbarDrop with the drag source gives container-aware placement AND
-        // an edge from the released handle that respects container boundaries.
+        /**
+         * A genuine edge drag-release carries `pendingConnect`. Delegating to
+         * `handleToolbarDrop` preserves container-aware placement and connects
+         * from the exact released handle.
+         */
         if (pendingConnect) {
-          // screenToFlowPosition subtracts the pane rect internally — pass raw client coords.
+          const blockHeight =
+            type === 'loop' || type === 'parallel'
+              ? CONTAINER_DIMENSIONS.DEFAULT_HEIGHT
+              : estimateBlockDimensions(type).height
           handleToolbarDrop(
             {
               type,
@@ -2045,7 +2101,10 @@ const WorkflowContent = React.memo(
               presetOperation: typeof presetOperation === 'string' ? presetOperation : undefined,
               forcedSource: pendingConnect.source,
             },
-            screenToFlowPosition({ x: pendingConnect.screenX, y: pendingConnect.screenY })
+            {
+              x: pendingConnect.position.x,
+              y: pendingConnect.position.y - blockHeight / 2,
+            }
           )
           return
         }
@@ -2327,7 +2386,7 @@ const WorkflowContent = React.memo(
             if (containerNode?.type === 'subflowNode') {
               const kind = (containerNode.data as SubflowNodeData)?.kind
               if (kind === 'loop' || kind === 'parallel') {
-                highlightContainerNode(containerInfo.loopId, kind)
+                highlightContainerNode(containerInfo.loopId)
               }
             }
           } else {
@@ -2632,13 +2691,17 @@ const WorkflowContent = React.memo(
             isPending,
             ...(embedded && { isEmbedded: true }),
             isWorkflowLocked: workflowReadOnly,
+            onSetErrorOutputEnabled: collaborativeSetBlockErrorEnabled,
+            onRemoveEdges: collaborativeBatchRemoveEdges,
           },
           // Include dynamic dimensions for container resizing calculations (must match rendered size)
           // Both note and workflow blocks calculate dimensions deterministically via useBlockDimensions
           // Use estimated dimensions for blocks without measured height to ensure selection bounds are correct
-          width: BLOCK_DIMENSIONS.FIXED_WIDTH,
+          width: getRegularBlockWidth(block.type),
           height: block.height
-            ? Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT)
+            ? block.type === 'note'
+              ? block.height
+              : Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT)
             : estimateBlockDimensions(block.type).height,
         })
       })
@@ -2653,10 +2716,13 @@ const WorkflowContent = React.memo(
       getBlockConfig,
       embedded,
       workflowReadOnly,
+      collaborativeSetBlockErrorEnabled,
+      collaborativeBatchRemoveEdges,
     ])
 
     // Local state for nodes - allows smooth drag without store updates on every frame
     const [displayNodes, setDisplayNodes] = useState<Node[]>([])
+    displayNodesRef.current = displayNodes
     const [lastInteractedNodeId, setLastInteractedNodeId] = useState<string | null>(null)
 
     const selectedNodeIds = useMemo(
@@ -2907,18 +2973,45 @@ const WorkflowContent = React.memo(
     /** Handles node changes - applies changes and resolves parent-child selection conflicts. */
     const onNodesChange = useCallback(
       (changes: NodeChange[]) => {
-        const hasSelectionChange = changes.some((c) => c.type === 'select')
+        const selectorPositionChange = [...changes]
+          .reverse()
+          .find(
+            (change) =>
+              change.type === 'position' &&
+              change.id === CONNECTION_BLOCK_SELECTOR_NODE_ID &&
+              change.position
+          )
+
+        if (selectorPositionChange?.type === 'position' && selectorPositionChange.position) {
+          const { position } = selectorPositionChange
+          setPendingConnect((current) =>
+            current
+              ? {
+                  ...current,
+                  position: {
+                    x: position.x,
+                    y: position.y + CONNECTION_BLOCK_SELECTOR_DIMENSIONS.height / 2,
+                  },
+                }
+              : current
+          )
+        }
+
+        const workflowChanges = changes.filter(
+          (change) => !('id' in change) || change.id !== CONNECTION_BLOCK_SELECTOR_NODE_ID
+        )
+        const hasSelectionChange = workflowChanges.some((c) => c.type === 'select')
         setDisplayNodes((currentNodes) => {
           // Filter out cross-context selection changes before applying so that
           // nodes at a different nesting level never appear selected, even for
           // a single frame.
-          let changesToApply = changes
+          let changesToApply = workflowChanges
           if (hasSelectionChange) {
             const currentlySelected = currentNodes.filter((n) => n.selected)
             // Only filter on additive multi-select (shift-click), not replacement
             // clicks. A replacement click includes deselections of currently selected
             // nodes; a shift-click only adds selections.
-            const isReplacementClick = changes.some(
+            const isReplacementClick = workflowChanges.some(
               (c) =>
                 c.type === 'select' &&
                 'selected' in c &&
@@ -2927,7 +3020,7 @@ const WorkflowContent = React.memo(
             )
             if (!isReplacementClick && currentlySelected.length > 0) {
               const selectionContext = getNodeSelectionContextId(currentlySelected[0], blocks)
-              changesToApply = changes.filter((c) => {
+              changesToApply = workflowChanges.filter((c) => {
                 if (c.type !== 'select' || !('selected' in c) || !c.selected) return true
                 const node = currentNodes.find((n) => n.id === c.id)
                 if (!node) return true
@@ -2956,7 +3049,7 @@ const WorkflowContent = React.memo(
           getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
         const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> =
           []
-        for (const change of changes) {
+        for (const change of workflowChanges) {
           if (
             change.type === 'position' &&
             !change.dragging &&
@@ -3079,20 +3172,41 @@ const WorkflowContent = React.memo(
      * Captures the source handle when a connection drag starts.
      * Resets connectionCompletedRef to track if onConnect handles this connection.
      */
-    const onConnectStart = useCallback((_event: any, params: any) => {
-      const handleId: string | undefined = params?.handleId
-      setIsErrorConnectionDrag(handleId === 'error')
-      connectionSourceRef.current = {
-        nodeId: params?.nodeId,
-        handleId: params?.handleId,
-      }
-      connectionCompletedRef.current = false
-    }, [])
+    const onConnectStart = useCallback<OnConnectStart>(
+      (_event, params) => {
+        useSearchModalStore.getState().close()
+        closeConnectionBlockSelector()
+        const handleId = params.handleId ?? undefined
+        const isSelectedSource = Boolean(
+          getNodes().find((node) => node.id === params?.nodeId)?.selected
+        )
+        const connectionLineVariant =
+          handleId === 'error' ? 'error' : isSelectedSource ? 'selected' : 'default'
+        canvasContainerRef.current?.setAttribute('data-connection-line', connectionLineVariant)
+        canvasContainerRef.current?.setAttribute('data-connection-active', 'true')
+        connectionSourceRef.current = {
+          nodeId: params?.nodeId,
+          handleId: params?.handleId,
+        }
+        connectionCompletedRef.current = false
+      },
+      [closeConnectionBlockSelector, getNodes]
+    )
 
     /** Handles new edge connections with container boundary validation. */
     const onConnect = useCallback(
       (connection: any) => {
         if (connection.source && connection.target) {
+          const normalizedConnection = {
+            ...connection,
+            sourceHandle: normalizePositionedSourceHandleId(
+              normalizeCursorSourceHandleId(
+                connection.sourceHandle,
+                blocks[connection.source]?.type
+              )
+            ),
+            targetHandle: normalizePositionedTargetHandleId(connection.targetHandle),
+          }
           // Check if connecting nodes across container boundaries
           const sourceNode = getNodes().find((n) => n.id === connection.source)
           const targetNode = getNodes().find((n) => n.id === connection.target)
@@ -3100,7 +3214,7 @@ const WorkflowContent = React.memo(
           if (!sourceNode || !targetNode) return
 
           // Prevent connections to protected blocks (outbound from locked blocks is allowed)
-          if (isEdgeProtected(connection, blocks)) {
+          if (isEdgeProtected(normalizedConnection, blocks)) {
             toast({
               message: 'Cannot connect to locked blocks or blocks inside locked containers',
             })
@@ -3110,9 +3224,9 @@ const WorkflowContent = React.memo(
           // Get parent information (handle container start node case)
           const sourceParentId =
             blocks[sourceNode.id]?.data?.parentId ||
-            (connection.sourceHandle === 'loop-start-source' ||
-            connection.sourceHandle === 'parallel-start-source'
-              ? connection.source
+            (normalizedConnection.sourceHandle === 'loop-start-source' ||
+            normalizedConnection.sourceHandle === 'parallel-start-source'
+              ? normalizedConnection.source
               : undefined)
           const targetParentId = blocks[targetNode.id]?.data?.parentId
 
@@ -3121,14 +3235,14 @@ const WorkflowContent = React.memo(
 
           // Special case for container start source: Always allow connections to nodes within the same container
           if (
-            (connection.sourceHandle === 'loop-start-source' ||
-              connection.sourceHandle === 'parallel-start-source') &&
+            (normalizedConnection.sourceHandle === 'loop-start-source' ||
+              normalizedConnection.sourceHandle === 'parallel-start-source') &&
             blocks[targetNode.id]?.data?.parentId === sourceNode.id
           ) {
             // This is a connection from container start to a node inside the container - always allow
 
             addEdge({
-              ...connection,
+              ...normalizedConnection,
               id: edgeId,
               type: 'workflowEdge',
               // Add metadata about the container context
@@ -3156,7 +3270,7 @@ const WorkflowContent = React.memo(
 
           // Add appropriate metadata for container context
           addEdge({
-            ...connection,
+            ...normalizedConnection,
             id: edgeId,
             type: 'workflowEdge',
             data: isInsideContainer
@@ -3181,7 +3295,8 @@ const WorkflowContent = React.memo(
      */
     const onConnectEnd = useCallback(
       (event: MouseEvent | TouchEvent) => {
-        setIsErrorConnectionDrag(false)
+        canvasContainerRef.current?.setAttribute('data-connection-line', 'default')
+        canvasContainerRef.current?.setAttribute('data-connection-active', 'false')
 
         const source = connectionSourceRef.current
         if (!source?.nodeId) {
@@ -3198,36 +3313,89 @@ const WorkflowContent = React.memo(
         // Find node under cursor using DOM hit-testing
         const clientPos = 'changedTouches' in event ? event.changedTouches[0] : event
         const targetNode = findNodeAtScreenPosition(clientPos.clientX, clientPos.clientY)
+        const sourceHandle =
+          normalizeCursorSourceHandleId(source.handleId, blocks[source.nodeId]?.type) ?? 'source'
 
         // Create connection if valid target found (handle-to-body case)
         if (targetNode && targetNode.id !== source.nodeId) {
+          /*
+           * Connections are horizontal-only. A body drop resolves by card
+           * half, so even a top/bottom drop terminates at the nearest left or
+           * right anchor without reintroducing a vertical edge endpoint.
+           */
+          const nodeEl = document.querySelector(
+            `.react-flow__node[data-id="${targetNode.id}"]`
+          ) as HTMLElement | null
+          let dropSide: PositionedSourceHandleSide | null = null
+          if (nodeEl) {
+            const rect = nodeEl.getBoundingClientRect()
+            dropSide = getHorizontalWorkflowHandleSide(clientPos.clientX - rect.left, rect.width)
+          }
+          /*
+           * Always source→target. Inputs never originate a drag: the `target`
+           * handle sets `isConnectableStart={false}` and the positioned side
+           * anchors are `isConnectable={false}`, so React Flow only ever
+           * reports an output handle here. Dragging over an input knob starts
+           * from the cursor swell's temporary source handle instead.
+           */
+          const targetHandle =
+            !dropSide || dropSide === 'left' ? 'target' : getPositionedTargetHandleId(dropSide)
           onConnect({
             source: source.nodeId,
-            sourceHandle: source.handleId,
+            sourceHandle,
             target: targetNode.id,
-            targetHandle: 'target',
+            targetHandle,
           })
         } else if (!targetNode) {
-          // Released on empty canvas: open the command palette with the drag origin
-          // + drop point, so the chosen block lands here wired from this handle.
-          useSearchModalStore.getState().open({
-            sections: ['blocks', 'tools', 'toolOperations'],
-            pendingConnect: {
-              source: { nodeId: source.nodeId, handleId: source.handleId },
-              screenX: clientPos.clientX,
-              screenY: clientPos.clientY,
-            },
+          const canvasBounds = canvasContainerRef.current?.getBoundingClientRect()
+          const zoom = reactFlowInstance.getViewport().zoom
+          const margin = 12
+          const selectorWidth = CONNECTION_BLOCK_SELECTOR_DIMENSIONS.width * zoom
+          const selectorHalfHeight = (CONNECTION_BLOCK_SELECTOR_DIMENSIONS.height * zoom) / 2
+          const minScreenX = (canvasBounds?.left ?? 0) + margin
+          const maxScreenX = (canvasBounds?.right ?? clientPos.clientX) - selectorWidth - margin
+          const minScreenY = (canvasBounds?.top ?? 0) + selectorHalfHeight + margin
+          const maxScreenY =
+            (canvasBounds?.bottom ?? clientPos.clientY) - selectorHalfHeight - margin
+          const position = screenToFlowPosition({
+            x:
+              maxScreenX >= minScreenX
+                ? Math.min(Math.max(clientPos.clientX, minScreenX), maxScreenX)
+                : clientPos.clientX,
+            y:
+              maxScreenY >= minScreenY
+                ? Math.min(Math.max(clientPos.clientY, minScreenY), maxScreenY)
+                : clientPos.clientY,
+          })
+          hasPointerDownSinceSelectorOpenedRef.current = false
+          const nextPendingConnect: PendingConnect = {
+            source: { nodeId: source.nodeId, handleId: sourceHandle },
+            position,
+          }
+          setPendingConnect(nextPendingConnect)
+          requestAnimationFrame(() => {
+            const { zoom: currentZoom } = reactFlowInstance.getViewport()
+            void reactFlowInstance.setCenter(
+              nextPendingConnect.position.x + CONNECTION_BLOCK_SELECTOR_DIMENSIONS.width / 2,
+              nextPendingConnect.position.y,
+              {
+                zoom: currentZoom,
+                duration: CONNECTION_BLOCK_SELECTOR_FOCUS_DURATION_MS,
+              }
+            )
           })
         }
 
         connectionSourceRef.current = null
       },
-      [findNodeAtScreenPosition, onConnect]
+      [findNodeAtScreenPosition, onConnect, blocks, reactFlowInstance, screenToFlowPosition]
     )
 
     /** Handles node drag to detect container intersections and update highlighting. */
     const onNodeDrag = useCallback(
       (_event: React.MouseEvent, node: any) => {
+        if (node.id === CONNECTION_BLOCK_SELECTOR_NODE_ID) return
+
         // Note: We don't emit position updates during drag to avoid flooding socket events.
         // The final position is sent in onNodeDragStop for collaborative updates.
 
@@ -3277,12 +3445,17 @@ const WorkflowContent = React.memo(
             const nodeWidth =
               node.type === 'subflowNode'
                 ? node.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH
-                : BLOCK_DIMENSIONS.FIXED_WIDTH
+                : getRegularBlockWidth(node.type ?? '')
 
             const nodeHeight =
               node.type === 'subflowNode'
                 ? node.data?.height || CONTAINER_DIMENSIONS.DEFAULT_HEIGHT
-                : Math.max(node.height || BLOCK_DIMENSIONS.MIN_HEIGHT, BLOCK_DIMENSIONS.MIN_HEIGHT)
+                : node.type === 'noteBlock'
+                  ? node.height || getNoteBlockHeight(true)
+                  : Math.max(
+                      node.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
+                      BLOCK_DIMENSIONS.MIN_HEIGHT
+                    )
 
             // Check intersection using absolute coordinates
             const nodeRect = {
@@ -3341,10 +3514,15 @@ const WorkflowContent = React.memo(
           if (bestContainerMatch) {
             setPotentialParentId(bestContainerMatch.container.id)
 
-            // Add highlight class and change cursor
-            const kind = (bestContainerMatch.container.data as SubflowNodeData)?.kind
-            if (kind === 'loop' || kind === 'parallel') {
-              highlightContainerNode(bestContainerMatch.container.id, kind)
+            if (
+              !shouldHighlightContainerDropTarget(currentParentId, bestContainerMatch.container.id)
+            ) {
+              clearDragHighlights()
+            } else {
+              const kind = (bestContainerMatch.container.data as SubflowNodeData)?.kind
+              if (kind === 'loop' || kind === 'parallel') {
+                highlightContainerNode(bestContainerMatch.container.id)
+              }
             }
           } else {
             clearDragHighlights()
@@ -3374,6 +3552,8 @@ const WorkflowContent = React.memo(
     /** Captures initial parent ID and position when drag starts. */
     const onNodeDragStart = useCallback(
       (_event: React.MouseEvent, node: any) => {
+        if (node.id === CONNECTION_BLOCK_SELECTOR_NODE_ID) return
+
         // Note: Protected blocks are already non-draggable via the `draggable` node property
 
         // Store the original parent ID when starting to drag
@@ -3440,6 +3620,8 @@ const WorkflowContent = React.memo(
     /** Handles node drag stop to establish parent-child relationships. */
     const onNodeDragStop = useCallback(
       (_event: React.MouseEvent, node: any) => {
+        if (node.id === CONNECTION_BLOCK_SELECTOR_NODE_ID) return
+
         clearDragHighlights()
 
         // Get all selected nodes to update their positions too
@@ -3717,6 +3899,11 @@ const WorkflowContent = React.memo(
 
         // Filter out nodes that can't be placed in containers
         const eligibleNodes = nodes.filter(canNodeEnterContainer)
+        const currentParentIds = new Set(
+          eligibleNodes.map((node) => blocks[node.id]?.data?.parentId ?? null)
+        )
+        const sharedCurrentParentId =
+          currentParentIds.size === 1 ? currentParentIds.values().next().value : null
 
         // If no eligible nodes, clear any potential parent
         if (eligibleNodes.length === 0) {
@@ -3735,11 +3922,11 @@ const WorkflowContent = React.memo(
 
         eligibleNodes.forEach((node) => {
           const absolutePos = getNodeAbsolutePosition(node.id)
-          const width = BLOCK_DIMENSIONS.FIXED_WIDTH
-          const height = Math.max(
-            node.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
-            BLOCK_DIMENSIONS.MIN_HEIGHT
-          )
+          const width = getRegularBlockWidth(node.type ?? '')
+          const height =
+            node.type === 'noteBlock'
+              ? node.height || getNoteBlockHeight(true)
+              : Math.max(node.height || BLOCK_DIMENSIONS.MIN_HEIGHT, BLOCK_DIMENSIONS.MIN_HEIGHT)
 
           minX = Math.min(minX, absolutePos.x)
           minY = Math.min(minY, absolutePos.y)
@@ -3794,16 +3981,22 @@ const WorkflowContent = React.memo(
           })
 
           const bestMatch = sortedContainers[0]
+          const shouldHighlightContainer = shouldHighlightContainerDropTarget(
+            sharedCurrentParentId,
+            bestMatch.container.id
+          )
 
           if (bestMatch.container.id !== potentialParentId) {
             setPotentialParentId(bestMatch.container.id)
 
-            // Add highlight
-            const kind = (bestMatch.container.data as SubflowNodeData)?.kind
-            if (kind === 'loop' || kind === 'parallel') {
-              highlightContainerNode(bestMatch.container.id, kind)
+            if (shouldHighlightContainer) {
+              const kind = (bestMatch.container.data as SubflowNodeData)?.kind
+              if (kind === 'loop' || kind === 'parallel') {
+                highlightContainerNode(bestMatch.container.id)
+              }
             }
           }
+          if (!shouldHighlightContainer) clearDragHighlights()
         } else if (potentialParentId) {
           clearDragHighlights()
           setPotentialParentId(null)
@@ -3811,6 +4004,7 @@ const WorkflowContent = React.memo(
       },
       [
         canNodeEnterContainer,
+        blocks,
         getNodes,
         potentialParentId,
         getNodeAbsolutePosition,
@@ -3852,8 +4046,183 @@ const WorkflowContent = React.memo(
     const onPaneClick = useCallback(() => {
       setSelectedEdges(new Map())
       usePanelEditorStore.getState().clearCurrentBlock()
+      if (pendingConnect && hasPointerDownSinceSelectorOpenedRef.current) {
+        closeConnectionBlockSelector()
+      }
+    }, [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
+      }
+    }
+
+    /**
+     * Animates the camera so the given block centers in the canvas frame.
+     * Regular cards defer by two frames and retain close zoom. Subflows wait
+     * for the editor panel layout to settle, then fit the full container into
+     * the centered canvas frame so large loops are not cropped.
+     */
+    const focusBlockInView = useCallback(
+      (node: Node, onFocusStart?: () => void, durationMs = 500) => {
+        const centerNode = () => {
+          const currentNodes = getNodes()
+          const mountedNode = currentNodes.find((candidate) => candidate.id === node.id) ?? node
+          const getAbsolutePosition = (candidate: Node) =>
+            candidate.parentId
+              ? (candidate.positionAbsolute ?? getNodeAbsolutePosition(candidate.id))
+              : candidate.position
+          const getFocusDimensions = (candidate: Node) => {
+            const subflowData =
+              candidate.type === 'subflowNode' ? (candidate.data as SubflowNodeData) : undefined
+            const declaredWidth = subflowData?.width
+            const declaredHeight = subflowData?.height
+            const width =
+              typeof declaredWidth === 'number' && declaredWidth > 0
+                ? declaredWidth
+                : typeof candidate.width === 'number' && candidate.width > 0
+                  ? candidate.width
+                  : candidate.type === 'subflowNode'
+                    ? CONTAINER_DIMENSIONS.DEFAULT_WIDTH
+                    : 250
+            const height =
+              typeof declaredHeight === 'number' && declaredHeight > 0
+                ? declaredHeight
+                : typeof candidate.height === 'number' && candidate.height > 0
+                  ? candidate.height
+                  : candidate.type === 'subflowNode'
+                    ? CONTAINER_DIMENSIONS.DEFAULT_HEIGHT
+                    : 100
+            return { width, height }
+          }
+
+          if (mountedNode.type === 'subflowNode') {
+            const focusCandidates = currentNodes.some(
+              (candidate) => candidate.id === mountedNode.id
+            )
+              ? currentNodes
+              : [...currentNodes, mountedNode]
+            const nodesById = new Map(focusCandidates.map((candidate) => [candidate.id, candidate]))
+            const focusNodes = focusCandidates
+              .filter((candidate) => {
+                let currentId: string | undefined = candidate.id
+                const visitedIds = new Set<string>()
+                while (currentId && !visitedIds.has(currentId)) {
+                  if (currentId === mountedNode.id) return true
+                  visitedIds.add(currentId)
+                  currentId = nodesById.get(currentId)?.parentId
+                }
+                return false
+              })
+              .map((candidate) => ({
+                ...candidate,
+                position: getAbsolutePosition(candidate),
+                ...getFocusDimensions(candidate),
+              }))
+
+            fitViewToBounds({
+              nodes: focusNodes,
+              padding: SUBFLOW_FOCUS_PADDING,
+              maxZoom: 1,
+              minZoom: 0.1,
+              duration: durationMs,
+            })
+            onFocusStart?.()
+            return
+          }
+
+          const position = getAbsolutePosition(mountedNode)
+          const { width: nodeWidth, height: nodeHeight } = getFocusDimensions(mountedNode)
+          const currentZoom = reactFlowInstance.getViewport().zoom
+          const targetZoom = Math.max(currentZoom, 1)
+          reactFlowInstance.setCenter(position.x + nodeWidth / 2, position.y + nodeHeight / 2, {
+            zoom: targetZoom,
+            duration: durationMs,
+          })
+          onFocusStart?.()
+        }
+
+        if (node.type !== 'subflowNode') {
+          requestAnimationFrame(() => requestAnimationFrame(centerNode))
+          return
+        }
+
+        let previousWidth = canvasContainerRef.current?.getBoundingClientRect().width
+        let stableFrames = 0
+        let elapsedFrames = 0
+        let remainingFrames = SUBFLOW_FOCUS_MAX_WAIT_FRAMES
+
+        const waitForSettledCanvas = () => {
+          requestAnimationFrame(() => {
+            const currentWidth = canvasContainerRef.current?.getBoundingClientRect().width
+            if (
+              currentWidth !== undefined &&
+              previousWidth !== undefined &&
+              Math.abs(currentWidth - previousWidth) <= SUBFLOW_FOCUS_LAYOUT_TOLERANCE_PX
+            ) {
+              stableFrames += 1
+            } else {
+              stableFrames = 0
+            }
+
+            previousWidth = currentWidth
+            elapsedFrames += 1
+            remainingFrames -= 1
+            if (
+              (elapsedFrames >= SUBFLOW_FOCUS_MIN_WAIT_FRAMES &&
+                stableFrames >= SUBFLOW_FOCUS_STABLE_FRAMES) ||
+              remainingFrames <= 0
+            ) {
+              centerNode()
+              return
+            }
+            waitForSettledCanvas()
+          })
+        }
+
+        waitForSettledCanvas()
+      },
+      [fitViewToBounds, getNodeAbsolutePosition, getNodes, reactFlowInstance]
+    )
+
+    /**
+     * Centers a newly created block once its node has mounted and been
+     * measured. A card added from a drag-release, the block menu, or the
+     * toolbar can land outside the viewport (or under the editor panel), so
+     * the camera follows it the same way it follows a click.
+     *
+     * Waits for real dimensions: `focusBlockInView` centers on the card's
+     * midpoint, and an unmeasured node reports no size, which would center the
+     * camera on its top-left corner instead.
+     */
+    useEffect(() => {
+      const pendingId = pendingFocusBlockIdRef.current
+      if (!pendingId) return
+
+      const node = displayNodes.find((candidate) => candidate.id === pendingId)
+      if (!node) return
+      if (
+        typeof node.width !== 'number' ||
+        typeof node.height !== 'number' ||
+        node.width <= 0 ||
+        node.height <= 0
+      ) {
+        return
+      }
+
+      pendingFocusBlockIdRef.current = null
+      if (embedded) return
+      focusBlockInView(node)
+    }, [displayNodes, embedded, focusBlockInView])
+
     /**
      * Handles node click to select the node in ReactFlow.
      * Uses the controlled display node state so parent-child conflicts are resolved
@@ -3887,14 +4256,97 @@ const WorkflowContent = React.memo(
           }))
           return resolveSelectionConflicts(updated, blocks, isMultiSelect ? node.id : undefined)
         })
+
+        /**
+         * Focus the clicked block: animate the camera so the card centers in
+         * the canvas frame. Plain clicks focus both regular cards and subflow
+         * containers; multi-select keeps the camera still.
+         * onNodeClick never fires after a drag.
+         */
+        if (
+          !embedded &&
+          !isMultiSelect &&
+          (node.type === 'workflowBlock' ||
+            node.type === 'noteBlock' ||
+            node.type === 'subflowNode')
+        ) {
+          userFocusedWorkflowIdRef.current = activeWorkflowId ?? workflowIdParam
+          focusBlockInView(node)
+        }
       },
-      [blocks, getNodes]
+      [activeWorkflowId, blocks, getNodes, embedded, focusBlockInView, workflowIdParam]
     )
 
+    /**
+     * Arrow-key navigation: with a single block selected, Right/Down moves to
+     * the next block in canvas reading order (left-to-right, top-to-bottom)
+     * and Left/Up to the previous, wrapping at the ends. Selection, the
+     * editor panel, and the camera focus all follow. Skipped while typing in
+     * inputs/editors or interacting with menus, and in embedded mode.
+     */
+    useEffect(() => {
+      if (embedded) return
+
+      const handleArrowNavigation = (event: KeyboardEvent) => {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
+        const isNext = event.key === 'ArrowRight' || event.key === 'ArrowDown'
+        const isPrev = event.key === 'ArrowLeft' || event.key === 'ArrowUp'
+        if (!isNext && !isPrev) return
+
+        const target = event.target as HTMLElement | null
+        if (
+          target &&
+          (target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.tagName === 'SELECT' ||
+            target.isContentEditable ||
+            target.closest(
+              '[contenteditable="true"], [role="listbox"], [role="menu"], [role="combobox"], .cm-editor'
+            ))
+        ) {
+          return
+        }
+
+        const workflowNodes = getNodes().filter((n) => n.type === 'workflowBlock')
+        const selected = workflowNodes.filter((n) => n.selected)
+        if (selected.length !== 1 || workflowNodes.length < 2) return
+
+        const ordered = [...workflowNodes].sort((a, b) => {
+          const pa = a.positionAbsolute ?? a.position
+          const pb = b.positionAbsolute ?? b.position
+          return pa.x - pb.x || pa.y - pb.y
+        })
+        const currentIndex = ordered.findIndex((n) => n.id === selected[0].id)
+        if (currentIndex === -1) return
+
+        event.preventDefault()
+        event.stopPropagation()
+
+        const nextNode =
+          ordered[(currentIndex + (isNext ? 1 : -1) + ordered.length) % ordered.length]
+
+        setDisplayNodes((currentNodes) =>
+          resolveSelectionConflicts(
+            currentNodes.map((currentNode) => ({
+              ...currentNode,
+              selected: currentNode.id === nextNode.id,
+            })),
+            blocks
+          )
+        )
+        usePanelEditorStore.getState().setCurrentBlockId(nextNode.id)
+        focusBlockInView(nextNode)
+      }
+
+      window.addEventListener('keydown', handleArrowNavigation, true)
+      return () => window.removeEventListener('keydown', handleArrowNavigation, true)
+    }, [embedded, getNodes, blocks, focusBlockInView])
+
     /** Handles edge selection with container context tracking and Shift-click multi-selection. */
     const onEdgeClick = useCallback(
       (event: React.MouseEvent, edge: any) => {
         event.stopPropagation() // Prevent bubbling
+        if (edge.id === `${CONNECTION_BLOCK_SELECTOR_NODE_ID}-edge`) return
 
         const contextId = `${edge.id}${(() => {
           const selectionContextId = getEdgeSelectionContextId(edge, getNodes(), blocks)
@@ -3958,7 +4410,7 @@ const WorkflowContent = React.memo(
     // Child blocks inside containers already carry zIndex 1000 and are bumped by
     // +10 when selected so they stay above their sibling child blocks.
     const nodesForRender = useMemo(() => {
-      return displayNodes.map((node) => {
+      const elevatedNodes = displayNodes.map((node) => {
         if (node.type === 'subflowNode') return node
         const base = node.zIndex ?? 21
         const target = node.selected
@@ -3969,44 +4421,67 @@ const WorkflowContent = React.memo(
         if (target === (node.zIndex ?? 21)) return node
         return { ...node, zIndex: target }
       })
-    }, [displayNodes, lastInteractedNodeId])
+
+      if (!pendingConnect) return elevatedNodes
+
+      return [
+        ...elevatedNodes,
+        {
+          id: CONNECTION_BLOCK_SELECTOR_NODE_ID,
+          type: 'connectionBlockSelector',
+          position: {
+            x: pendingConnect.position.x,
+            y: pendingConnect.position.y - CONNECTION_BLOCK_SELECTOR_DIMENSIONS.height / 2,
+          },
+          data: {
+            pendingConnect,
+            onClose: closeConnectionBlockSelector,
+          },
+          width: CONNECTION_BLOCK_SELECTOR_DIMENSIONS.width,
+          height: CONNECTION_BLOCK_SELECTOR_DIMENSIONS.height,
+          zIndex: 2000,
+          dragHandle: '.workflow-drag-handle',
+          draggable: true,
+          selectable: false,
+          connectable: false,
+          deletable: false,
+          focusable: false,
+        } satisfies Node<ConnectionBlockSelectorData>,
+      ]
+    }, [closeConnectionBlockSelector, displayNodes, lastInteractedNodeId, pendingConnect])
 
     /** Transforms edges to include selection state and delete handlers. Memoized to prevent re-renders. */
     const edgesWithSelection = useMemo(() => {
       const nodeMap = new Map(displayNodes.map((n) => [n.id, n]))
-      const elevatedNodeIdSet = new Set(
-        lastInteractedNodeId ? [...selectedNodeIds, lastInteractedNodeId] : selectedNodeIds
-      )
 
       return edgesForDisplay.map((edge) => {
         const sourceNode = nodeMap.get(edge.source)
         const targetNode = nodeMap.get(edge.target)
         const parentLoopId = sourceNode?.parentId || targetNode?.parentId
         const edgeContextId = `${edge.id}${parentLoopId ? `-${parentLoopId}` : ''}`
-        const connectedToElevated =
-          elevatedNodeIdSet.has(edge.source) || elevatedNodeIdSet.has(edge.target)
-        // Derive elevated z-index from connected nodes so edges inside subflows
-        // (child nodes at z-1000) stay above their sibling child blocks.
-        const elevatedZIndex = Math.max(
-          22,
-          (sourceNode?.zIndex ?? 21) + 1,
-          (targetNode?.zIndex ?? 21) + 1
-        )
 
         // Edges inside subflows need a z-index above the container's body area
         // (which has pointer-events: auto) so they're directly clickable.
         // Derive from the container's depth-based zIndex (+1) so the edge sits
         // just above its parent container but below canvas blocks (z-21+) and
         // child blocks (z-1000).
+        //
+        // Edges are NEVER elevated above cards — not even when an endpoint is
+        // selected. A line always passes behind cards, knobs, and the action
+        // bar swell; elevating highlighted edges drew them across their own
+        // endpoint's chrome.
         const containerNode = parentLoopId ? nodeMap.get(parentLoopId) : null
         const baseZIndex = containerNode ? (containerNode.zIndex ?? 0) + 1 : 0
+        const isConnectedToSelection =
+          selectedNodeIds.includes(edge.source) || selectedNodeIds.includes(edge.target)
 
         return {
           ...edge,
-          zIndex: connectedToElevated ? elevatedZIndex : baseZIndex,
+          zIndex: baseZIndex,
           data: {
             ...edge.data,
             isSelected: selectedEdges.has(edgeContextId),
+            isConnectedToSelection,
             isInsideLoop: Boolean(parentLoopId),
             parentLoopId,
             sourceHandle: edge.sourceHandle,
@@ -4014,14 +4489,36 @@ const WorkflowContent = React.memo(
           },
         }
       })
-    }, [
-      edgesForDisplay,
-      displayNodes,
-      selectedNodeIds,
-      selectedEdges,
-      handleEdgeDelete,
-      lastInteractedNodeId,
-    ])
+    }, [edgesForDisplay, displayNodes, selectedNodeIds, selectedEdges, handleEdgeDelete])
+
+    const edgesForRender = useMemo(() => {
+      if (!pendingConnect) return edgesWithSelection
+
+      const sourceParentId = blocks[pendingConnect.source.nodeId]?.data?.parentId
+      const sourceParentNode = sourceParentId
+        ? displayNodes.find((node) => node.id === sourceParentId)
+        : null
+
+      return [
+        ...edgesWithSelection,
+        {
+          id: `${CONNECTION_BLOCK_SELECTOR_NODE_ID}-edge`,
+          source: pendingConnect.source.nodeId,
+          sourceHandle: pendingConnect.source.handleId,
+          target: CONNECTION_BLOCK_SELECTOR_NODE_ID,
+          targetHandle: 'target',
+          type: 'workflowEdge',
+          zIndex: sourceParentNode ? (sourceParentNode.zIndex ?? 0) + 1 : 0,
+          focusable: false,
+          deletable: false,
+          reconnectable: false,
+          data: {
+            isConnectedToSelection: true,
+            sourceHandle: pendingConnect.source.handleId,
+          },
+        } satisfies Edge,
+      ]
+    }, [blocks, displayNodes, edgesWithSelection, pendingConnect])
 
     /** Handles Delete/Backspace to remove selected edges or blocks. */
     useEffect(() => {
@@ -4130,11 +4627,30 @@ 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} className='relative flex-1 overflow-hidden'>
+          <div
+            ref={canvasContainerRef}
+            onPointerDownCapture={handleCanvasPointerDownCapture}
+            className={cn(
+              'workflow-canvas-shell relative flex-1 overflow-hidden [--connection-line-stroke:var(--workflow-edge)] data-[connection-line=error]:[--connection-line-stroke:var(--text-error)] data-[connection-line=selected]:[--connection-line-stroke:var(--text-secondary)] 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={{
@@ -4152,7 +4668,7 @@ const WorkflowContent = React.memo(
               <>
                 <ReactFlow
                   nodes={nodesForRender}
-                  edges={edgesWithSelection}
+                  edges={edgesForRender}
                   onNodesChange={onNodesChange}
                   onEdgesChange={onEdgesChange}
                   onConnect={!embedded && effectivePermissions.canEdit ? onConnect : undefined}
@@ -4180,7 +4696,21 @@ const WorkflowContent = React.memo(
                       return
                     }
 
+                    const viewportWorkflowId = activeWorkflowId ?? workflowIdParam
+                    if (
+                      initializedViewportWorkflowIdRef.current === viewportWorkflowId ||
+                      userFocusedWorkflowIdRef.current === viewportWorkflowId
+                    ) {
+                      setIsCanvasReady(true)
+                      return
+                    }
+                    initializedViewportWorkflowIdRef.current = viewportWorkflowId
+
                     requestAnimationFrame(() => {
+                      if (userFocusedWorkflowIdRef.current === viewportWorkflowId) {
+                        setIsCanvasReady(true)
+                        return
+                      }
                       instance.fitView(reactFlowFitViewOptions)
                       setIsCanvasReady(true)
                     })
@@ -4191,7 +4721,7 @@ const WorkflowContent = React.memo(
                   panOnScroll
                   defaultEdgeOptions={defaultEdgeOptions}
                   proOptions={reactFlowProOptions}
-                  connectionLineStyle={connectionLineStyle}
+                  connectionLineStyle={CONNECTION_LINE_STYLE}
                   connectionLineType={ConnectionLineType.SmoothStep}
                   onPaneClick={onPaneClick}
                   onEdgeClick={embedded ? undefined : onEdgeClick}
@@ -4208,6 +4738,7 @@ const WorkflowContent = React.memo(
                   selectionKeyCode={embedded ? null : selectionProps.selectionKeyCode}
                   multiSelectionKeyCode={embedded ? null : ['Meta', 'Control', 'Shift']}
                   nodesConnectable={!embedded && effectivePermissions.canEdit}
+                  connectOnClick={false}
                   nodesDraggable={!embedded && effectivePermissions.canEdit}
                   draggable={false}
                   noWheelClassName='allow-scroll'
@@ -4242,7 +4773,6 @@ const WorkflowContent = React.memo(
 
                 {!embedded && (
                   <>
-                    <WorkflowControls />
                     <Suspense fallback={null}>
                       <LazyChat />
                     </Suspense>
@@ -4259,7 +4789,6 @@ const WorkflowContent = React.memo(
                       onDuplicate={handleContextDuplicate}
                       onDelete={handleContextDelete}
                       onToggleEnabled={handleContextToggleEnabled}
-                      onToggleHandles={handleContextToggleHandles}
                       onRemoveFromSubflow={handleContextRemoveFromSubflow}
                       onOpenEditor={handleContextOpenEditor}
                       onRename={handleContextRename}
@@ -4317,6 +4846,8 @@ const WorkflowContent = React.memo(
               </>
             )}
 
+            {!embedded && <Panel onCloseEditor={handleClosePanelEditor} />}
+
             {!embedded && <WorkflowSearchReplace />}
 
             {!embedded && isWorkflowReady && isWorkflowEmpty && effectivePermissions.canEdit && (
@@ -4329,8 +4860,6 @@ const WorkflowContent = React.memo(
           <Terminal />
         </div>
 
-        {!embedded && <Panel />}
-
         {!embedded && oauthModal && (
           <ConnectOAuthModal
             mode='reauthorize'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index 1a6968a676a..1d4220e598a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -1,10 +1,18 @@
 'use client'
 
 import { type CSSProperties, memo, useMemo } from 'react'
-import { HANDLE_POSITIONS } from '@sim/workflow-renderer'
+import { HANDLE_POSITIONS, humanizeBlockName, WorkflowTypeTag } from '@sim/workflow-renderer'
+import {
+  getPositionedSourceHandleId,
+  getPositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
 import { Handle, type NodeProps, Position } from 'reactflow'
+import { resolveCanvasBlockPresentation } from '@/lib/workflows/blocks/canvas-presentation'
 import {
   getDisplayValue,
+  hasDisplayableRowValue,
   resolveDropdownLabel,
   resolveSkillsLabel,
   resolveToolsLabel,
@@ -20,7 +28,6 @@ import {
   isToolInputOnlySubBlock,
 } from '@/lib/workflows/subblocks/visibility'
 import { getBlock } from '@/blocks'
-import { getTileIconColorClass } from '@/blocks/icon-color'
 import { SELECTOR_TYPES_HYDRATION_REQUIRED, type SubBlockConfig } from '@/blocks/types'
 import { useVariablesStore } from '@/stores/variables/store'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
@@ -39,21 +46,34 @@ interface SubBlockValueEntry {
  */
 const HANDLE_STYLES = {
   horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-xs',
-  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-xs',
   right:
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
   error:
-    '!z-[10] !border-none !bg-[var(--text-error)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+    '!z-[10] !border-none !bg-[var(--text-error)] !h-[7px] !w-6 !rounded-b-[2px] !rounded-t-none',
 } as const
 
 /** Reusable style object for error handles positioned at bottom-right */
 const ERROR_HANDLE_STYLE: CSSProperties = {
-  right: '-7px',
+  right: 'auto',
   top: 'auto',
-  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-  transform: 'translateY(50%)',
+  bottom: '-7px',
+  left: 'calc(100% - 30px)',
+  transform: 'translateX(-50%)',
 }
 
+const getReactFlowPosition = (side: PositionedSourceHandleSide) =>
+  side === 'left' ? Position.Left : Position.Right
+
+const getCenteredSideHandleStyle = (side: PositionedSourceHandleSide): CSSProperties => ({
+  right: 'auto',
+  bottom: 'auto',
+  width: 1,
+  height: 1,
+  top: '50%',
+  left: side === 'left' ? 0 : '100%',
+  transform: 'translate(-50%, -50%)',
+})
+
 interface WorkflowPreviewBlockData {
   type: string
   name: string
@@ -179,7 +199,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     workflowMap = {},
     workflowLabelsReady = false,
     isTrigger = false,
-    horizontalHandles = false,
     enabled = true,
     isPreviewSelected = false,
     executionStatus,
@@ -202,6 +221,11 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     }, {})
   }, [subBlockValues, lightweight])
 
+  const canvasPresentation = useMemo(
+    () => (blockConfig ? resolveCanvasBlockPresentation(blockConfig, name, rawValues) : undefined),
+    [blockConfig, name, rawValues]
+  )
+
   const visibleSubBlocks = useMemo(() => {
     if (!blockConfig?.subBlocks) return []
 
@@ -231,8 +255,16 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
       if (!isSubBlockVisibleForMode(subBlock, false, canonicalIndex, rawValues, undefined)) {
         return false
       }
-      if (!subBlock.condition) return true
-      return evaluateSubBlockCondition(subBlock.condition, rawValues)
+      if (subBlock.condition && !evaluateSubBlockCondition(subBlock.condition, rawValues)) {
+        return false
+      }
+      if (
+        canvasPresentation?.usesDefaultTitle &&
+        subBlock.id === canvasPresentation.operationSubBlockId
+      ) {
+        return false
+      }
+      return hasDisplayableRowValue(subBlock, rawValues[subBlock.id])
     })
   }, [
     lightweight,
@@ -243,6 +275,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     isTrigger,
     canonicalIndex,
     rawValues,
+    canvasPresentation,
   ])
 
   /**
@@ -320,7 +353,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     return defaultRows
   }, [type, rawValues, lightweight])
 
-  if (!blockConfig) {
+  if (!blockConfig || !canvasPresentation) {
     return null
   }
 
@@ -341,57 +374,52 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const hasSuccess = executionStatus === 'success'
 
   return (
-    <div className='relative w-[250px] select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)]'>
+    <div className='relative w-[250px] select-none rounded-2xl border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]'>
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--text-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-accent)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--brand-accent)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle - not shown for triggers/starters */}
       {shouldShowDefaultHandles && (
         <Handle
           type='target'
-          position={horizontalHandles ? Position.Left : Position.Top}
+          position={Position.Left}
           id='target'
-          className={horizontalHandles ? HANDLE_STYLES.horizontal : HANDLE_STYLES.vertical}
-          style={
-            horizontalHandles
-              ? { left: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-              : { top: '-7px', left: '50%', transform: 'translateX(-50%)' }
-          }
+          className={HANDLE_STYLES.horizontal}
+          style={{ left: '-7px', top: '50%', transform: 'translateY(-50%)' }}
         />
       )}
 
       {/* Header - matches WorkflowBlock structure */}
-      <div
-        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
-      >
-        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
-          {!isNoteBlock && (
-            <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
-              style={{ background: enabled ? blockConfig.bgColor : 'gray' }}
-            >
-              <IconComponent
-                className={`size-[16px] ${enabled ? getTileIconColorClass(blockConfig.bgColor) : 'text-[var(--text-icon)]'}`}
-              />
-            </div>
-          )}
+      <div className='flex h-[40px] items-center justify-between px-2'>
+        <div className='relative z-10 flex min-w-0 flex-1 items-center'>
           <span
             className={`truncate text-md ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
-            title={name}
+            title={canvasPresentation.title}
           >
-            {name}
+            {humanizeBlockName(canvasPresentation.title)}
           </span>
         </div>
+        {!isNoteBlock && (
+          <WorkflowTypeTag
+            type={type}
+            typeLabel={canvasPresentation.typeLabel}
+            blockName={canvasPresentation.title}
+            Icon={IconComponent}
+            iconBgColor={blockConfig.bgColor}
+            isIntegration={blockConfig.category === 'tools'}
+            isEnabled={enabled}
+          />
+        )}
       </div>
 
       {/* Content area with subblocks */}
@@ -432,7 +460,12 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               return (
                 <SubBlockRow
                   key={subBlock.id}
-                  title={subBlock.title ?? subBlock.id}
+                  title={
+                    subBlock.id === canvasPresentation.operationSubBlockId &&
+                    !canvasPresentation.usesDefaultTitle
+                      ? (canvasPresentation.operationRowTitle ?? subBlock.title ?? subBlock.id)
+                      : (subBlock.title ?? subBlock.id)
+                  }
                   value={lightweight ? undefined : getDisplayValue(rawValue)}
                   subBlock={lightweight ? undefined : subBlock}
                   rawValue={rawValue}
@@ -442,14 +475,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               )
             })
           )}
-          {/* Error row for non-trigger blocks */}
-          {shouldShowDefaultHandles && (
-            <SubBlockRow
-              title='error'
-              workflowMap={workflowMap}
-              workflowLabelsReady={workflowLabelsReady}
-            />
-          )}
         </div>
       )}
 
@@ -470,13 +495,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               />
             )
           })}
-          <Handle
-            type='source'
-            position={Position.Right}
-            id='error'
-            className={HANDLE_STYLES.error}
-            style={ERROR_HANDLE_STYLE}
-          />
         </>
       )}
 
@@ -498,13 +516,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
               />
             )
           })}
-          <Handle
-            type='source'
-            position={Position.Right}
-            id='error'
-            className={HANDLE_STYLES.error}
-            style={ERROR_HANDLE_STYLE}
-          />
         </>
       )}
 
@@ -513,26 +524,49 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         <>
           <Handle
             type='source'
-            position={horizontalHandles ? Position.Right : Position.Bottom}
+            position={Position.Right}
             id='source'
-            className={horizontalHandles ? HANDLE_STYLES.right : HANDLE_STYLES.vertical}
-            style={
-              horizontalHandles
-                ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-                : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
-            }
+            className={HANDLE_STYLES.right}
+            style={{ right: '-7px', top: '50%', transform: 'translateY(-50%)' }}
           />
-          {shouldShowDefaultHandles && (
+          {POSITIONED_SOURCE_HANDLE_SIDES.map((side) => (
             <Handle
+              key={getPositionedSourceHandleId(side)}
               type='source'
-              position={Position.Right}
-              id='error'
-              className={HANDLE_STYLES.error}
-              style={ERROR_HANDLE_STYLE}
+              position={getReactFlowPosition(side)}
+              id={getPositionedSourceHandleId(side)}
+              className='!pointer-events-none !z-0 !border-none !bg-transparent !opacity-0'
+              style={getCenteredSideHandleStyle(side)}
+              isConnectable={false}
+              aria-hidden='true'
             />
-          )}
+          ))}
         </>
       )}
+
+      {shouldShowDefaultHandles &&
+        POSITIONED_SOURCE_HANDLE_SIDES.map((side) => (
+          <Handle
+            key={getPositionedTargetHandleId(side)}
+            type='target'
+            position={getReactFlowPosition(side)}
+            id={getPositionedTargetHandleId(side)}
+            className='!pointer-events-none !z-0 !border-none !bg-transparent !opacity-0'
+            style={getCenteredSideHandleStyle(side)}
+            isConnectable={false}
+            aria-hidden='true'
+          />
+        ))}
+
+      {shouldShowDefaultHandles && type !== 'response' && (
+        <Handle
+          type='source'
+          position={Position.Bottom}
+          id='error'
+          className={HANDLE_STYLES.error}
+          style={ERROR_HANDLE_STYLE}
+        />
+      )}
     </div>
   )
 }
@@ -553,7 +587,6 @@ function shouldSkipPreviewBlockRender(
     prevProps.data.type !== nextProps.data.type ||
     prevProps.data.name !== nextProps.data.name ||
     prevProps.data.isTrigger !== nextProps.data.isTrigger ||
-    prevProps.data.horizontalHandles !== nextProps.data.horizontalHandles ||
     prevProps.data.enabled !== nextProps.data.enabled ||
     prevProps.data.isPreviewSelected !== nextProps.data.isPreviewSelected ||
     prevProps.data.executionStatus !== nextProps.data.executionStatus ||
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
index 904b57af1a4..3027f64de2a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
@@ -1,11 +1,8 @@
 'use client'
 
 import { memo } from 'react'
-import { Badge, cn } from '@sim/emcn'
-import { Repeat, Split } from '@sim/emcn/icons'
-import { HANDLE_POSITIONS } from '@sim/workflow-renderer'
-import { Handle, type NodeProps, Position } from 'reactflow'
-import { getTileIconColorClass } from '@/blocks/icon-color'
+import { SubflowNodeView } from '@sim/workflow-renderer'
+import type { NodeProps } from 'reactflow'
 
 /** Execution status for subflows in preview mode */
 type ExecutionStatus = 'success' | 'error' | 'not-executed'
@@ -30,122 +27,19 @@ interface WorkflowPreviewSubflowData {
  * Renders loop/parallel containers without hooks, store subscriptions,
  * or interactive features.
  */
-function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowData>) {
-  const {
-    name,
-    width = 500,
-    height = 300,
-    kind,
-    enabled = true,
-    isPreviewSelected = false,
-    executionStatus,
-  } = data
-
-  const isLoop = kind === 'loop'
-  const BlockIcon = isLoop ? Repeat : Split
-  const blockIconBg = isLoop ? '#2FB3FF' : '#FEE12B'
-  const blockName = name || (isLoop ? 'Loop' : 'Parallel')
-
-  const startHandleId = isLoop ? 'loop-start-source' : 'parallel-start-source'
-  const endHandleId = isLoop ? 'loop-end-source' : 'parallel-end-source'
-
-  const leftHandleClass =
-    '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none'
-  const rightHandleClass =
-    '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none'
-
-  const hasError = executionStatus === 'error'
-  const hasSuccess = executionStatus === 'success'
-
+function WorkflowPreviewSubflowInner({ data, id }: NodeProps<WorkflowPreviewSubflowData>) {
   return (
-    <div
-      className='relative select-none rounded-lg border border-[var(--border-1)]'
-      style={{
-        width,
-        height,
-      }}
-    >
-      {/* Selection ring overlay (takes priority over execution rings) */}
-      {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
-      )}
-      {/* Success ring overlay (only shown if not selected) */}
-      {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-accent)]' />
-      )}
-      {/* Error ring overlay (only shown if not selected) */}
-      {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
-      )}
-
-      {/* Target handle on left (input to the subflow) */}
-      <Handle
-        type='target'
-        position={Position.Left}
-        id='target'
-        className={leftHandleClass}
-        style={{
-          left: '-8px',
-          top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
-          transform: 'translateY(-50%)',
-        }}
-      />
-
-      {/* Header - matches actual subflow header structure */}
-      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2'>
-        <div className='flex min-w-0 flex-1 items-center gap-2.5'>
-          <div
-            className='flex size-[24px] flex-shrink-0 items-center justify-center rounded-md'
-            style={{ backgroundColor: enabled ? blockIconBg : 'var(--surface-4)' }}
-          >
-            <BlockIcon
-              className={cn(
-                'size-[16px]',
-                enabled ? getTileIconColorClass(blockIconBg) : 'text-[var(--text-icon)]'
-              )}
-            />
-          </div>
-          <span
-            className={cn('truncate text-md', !enabled && 'text-[var(--text-muted)]')}
-            title={blockName}
-          >
-            {blockName}
-          </span>
-        </div>
-        {!enabled && <Badge variant='gray-secondary'>disabled</Badge>}
-      </div>
-
-      {/* Content area - matches workflow structure */}
-      <div
-        className='h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
-        style={{ position: 'relative' }}
-      >
-        {/* Subflow Start - connects to first block in subflow */}
-        <div className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'>
-          <span className='text-[var(--text-primary)] text-sm'>Start</span>
-          <Handle
-            type='source'
-            position={Position.Right}
-            id={startHandleId}
-            className={rightHandleClass}
-            style={{ right: '-8px', top: '50%', transform: 'translateY(-50%)' }}
-          />
-        </div>
-      </div>
-
-      {/* End source handle on right (output from the subflow) */}
-      <Handle
-        type='source'
-        position={Position.Right}
-        id={endHandleId}
-        className={rightHandleClass}
-        style={{
-          right: '-8px',
-          top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
-          transform: 'translateY(-50%)',
-        }}
-      />
-    </div>
+    <SubflowNodeView
+      id={id}
+      data={{ ...data, isPreview: true }}
+      selected={false}
+      isEnabled={data.enabled ?? true}
+      isLocked={false}
+      isFocused={false}
+      nestingLevel={0}
+      canEditWorkflow={false}
+      onSelect={() => undefined}
+    />
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
index 625dc23cf8d..df0a88afd69 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
@@ -4,6 +4,7 @@ import type { ComponentType } from 'react'
 import { memo } from 'react'
 import { cn } from '@sim/emcn'
 import { File, Workflow } from '@sim/emcn/icons'
+import { WorkflowTypeIcon } from '@sim/workflow-renderer'
 import { Command } from 'cmdk'
 import type { CommandItemProps } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import { COMMAND_ITEM_CLASSNAME } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
@@ -16,23 +17,28 @@ export const MemoizedCommandItem = memo(
     icon: Icon,
     bgColor,
     showColoredIcon,
+    workflowType,
     label,
   }: CommandItemProps) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <div
-          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
-          style={{ background: showColoredIcon ? bgColor : 'transparent' }}
-        >
-          <Icon
-            className={cn(
-              'transition-transform duration-100 group-hover:scale-110',
-              showColoredIcon
-                ? `size-[10px] ${getTileIconColorClass(bgColor)}`
-                : 'size-[16px] text-[var(--text-icon)]'
-            )}
-          />
-        </div>
+        {workflowType ? (
+          <WorkflowTypeIcon type={workflowType} Icon={Icon} />
+        ) : (
+          <div
+            className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
+            style={{ background: showColoredIcon ? bgColor : 'transparent' }}
+          >
+            <Icon
+              className={cn(
+                'transition-transform duration-100 group-hover:scale-110',
+                showColoredIcon
+                  ? `size-[10px] ${getTileIconColorClass(bgColor)}`
+                  : 'size-[16px] text-[var(--text-icon)]'
+              )}
+            />
+          </div>
+        )}
         <span className='truncate text-[var(--text-body)]'>{label}</span>
       </Command.Item>
     )
@@ -42,6 +48,7 @@ export const MemoizedCommandItem = memo(
     prev.icon === next.icon &&
     prev.bgColor === next.bgColor &&
     prev.showColoredIcon === next.showColoredIcon &&
+    prev.workflowType === next.workflowType &&
     prev.label === next.label
 )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
index 9b8f24518f6..d3589afeb77 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
@@ -58,13 +58,15 @@ export const ActionsGroup = memo(function ActionsGroup({
 export const BlocksGroup = memo(function BlocksGroup({
   items,
   onSelect,
+  heading = 'Blocks',
 }: {
   items: SearchBlockItem[]
   onSelect: (block: SearchBlockItem) => void
+  heading?: string | null
 }) {
   if (items.length === 0) return null
   return (
-    <Command.Group heading='Blocks' className={GROUP_HEADING_CLASSNAME}>
+    <Command.Group heading={heading ?? undefined} className={GROUP_HEADING_CLASSNAME}>
       {items.map((block) => (
         <MemoizedCommandItem
           key={block.id}
@@ -73,6 +75,7 @@ export const BlocksGroup = memo(function BlocksGroup({
           icon={block.icon}
           bgColor={block.bgColor}
           showColoredIcon
+          workflowType={block.type}
           label={block.name}
         />
       ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 47428604ba5..0fe8b4c5ded 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -636,7 +636,12 @@ export function SearchModal({
 
   const filteredToolOps = useMemo(() => {
     if (!isOnWorkflowPage) return []
-    return filterAndCap(toolOperations, (op) => op.searchValue, deferredSearch)
+    return filterAndCap(
+      toolOperations,
+      (op) => op.name,
+      deferredSearch,
+      (op) => op.searchValue
+    )
   }, [isOnWorkflowPage, toolOperations, deferredSearch])
 
   const filteredDocs = useMemo(() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts
index a82b79fd5f9..6f5d50a2cf8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.test.ts
@@ -275,6 +275,17 @@ describe('filterAndSort — name ranked above secondary text', () => {
     expect(filterAndSort(items, toName, 'gpt-4o', toExtra)).toHaveLength(1)
   })
 
+  it('ranks a visible operation-name match above a service metadata match', () => {
+    const items: Item[] = [
+      { name: 'List Calls', searchValue: 'AgentPhone List Calls' },
+      { name: 'Agent Status', searchValue: 'Example Agent Status' },
+    ]
+
+    const sorted = filterAndSort(items, toName, 'agent', toExtra)
+
+    expect(sorted.map((item) => item.name)).toEqual(['Agent Status', 'List Calls'])
+  })
+
   it('is byte-identical to single-field ranking when no secondary accessor is given', () => {
     const items = ['Slack message', 'Send message to Slack']
     expect(filterAndSort(items, (s) => s, 'slack')).toEqual(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
index 72265a6740e..e9ed9824ae7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
@@ -90,6 +90,8 @@ export interface CommandItemProps {
   icon: ComponentType<{ className?: string }>
   bgColor: string
   showColoredIcon?: boolean
+  /** Core workflow block type whose shared accent should replace the catalog color. */
+  workflowType?: string
   /** Primary text of the row. */
   label: string
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.test.tsx
index 14633fada64..267e66b9275 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.test.tsx
@@ -80,7 +80,7 @@ const NO_PINS: ReadonlySet<string> = new Set()
 let container: HTMLDivElement
 let root: Root
 
-function render() {
+function render(overrides: Partial<Parameters<typeof WorkspaceHeader>[0]> = {}) {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
   document.body.appendChild(container)
@@ -105,6 +105,7 @@ function render() {
         onUploadLogo={() => {}}
         onLeaveWorkspace={async () => {}}
         isLeavingWorkspace={false}
+        {...overrides}
       />
     )
   })
@@ -154,6 +155,21 @@ afterEach(() => {
 })
 
 describe('WorkspaceHeader workspace switcher highlight', () => {
+  it('shows the route workspace identity while the switcher list is unavailable', () => {
+    render({
+      activeWorkspace: { name: 'Brightwave' },
+      workspaceId: 'ws-brightwave',
+      workspaces: [],
+      isWorkspaceMenuOpen: false,
+    })
+
+    const switcher = container.querySelector('button[aria-label="Switch workspace"]')
+    expect(switcher).toBeDisabled()
+    expect(switcher).toHaveTextContent('Brightwave')
+    expect(switcher).toHaveTextContent('B')
+    expect(switcher?.querySelector('.animate-pulse')).toBeNull()
+  })
+
   it('leaves Enter unarmed until a cursor is on screen', () => {
     render()
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 82db252aea0..199ad9e9d3c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -445,31 +445,35 @@ function WorkspaceHeaderImpl({
           className={chipVariants({ fullWidth: true })}
         >
           <div className='relative flex size-[16px] flex-shrink-0 items-center justify-center'>
-            {!activeWorkspaceFull ? (
-              <Skeleton className='size-[16px] rounded-sm' />
-            ) : (
+            {activeWorkspaceFull?.logoUrl ? (
               <>
-                {activeWorkspaceFull.logoUrl ? (
-                  <img
-                    src={activeWorkspaceFull.logoUrl}
-                    alt={activeWorkspaceFull.name || 'Workspace logo'}
-                    className='size-[16px] rounded-sm object-cover group-hover:invisible'
-                  />
-                ) : (
-                  <div
-                    className='flex size-[16px] items-center justify-center rounded-sm text-[9px] text-white leading-none group-hover:invisible'
-                    style={{
-                      backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
-                    }}
-                  >
-                    {workspaceInitial}
-                  </div>
-                )}
+                <img
+                  src={activeWorkspaceFull.logoUrl}
+                  alt={activeWorkspaceFull.name || 'Workspace logo'}
+                  className='size-[16px] rounded-sm object-cover group-hover:invisible'
+                />
                 <PanelLeft
                   aria-hidden
                   className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
                 />
               </>
+            ) : activeWorkspace ? (
+              <>
+                <div
+                  className='flex size-[16px] items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none group-hover:invisible'
+                  style={{
+                    backgroundColor: activeWorkspaceFull?.color ?? 'var(--brand-accent)',
+                  }}
+                >
+                  {workspaceInitial}
+                </div>
+                <PanelLeft
+                  aria-hidden
+                  className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
+                />
+              </>
+            ) : (
+              <Skeleton className='size-[16px] rounded-sm' />
             )}
           </div>
         </button>
@@ -852,21 +856,19 @@ function WorkspaceHeaderImpl({
           title={activeWorkspace?.name}
           disabled
         >
-          {activeWorkspaceFull ? (
-            activeWorkspaceFull.logoUrl ? (
-              <img
-                src={activeWorkspaceFull.logoUrl}
-                alt={activeWorkspaceFull.name || 'Workspace logo'}
-                className='size-[16px] flex-shrink-0 rounded-sm object-cover'
-              />
-            ) : (
-              <div
-                className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
-                style={{ backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)' }}
-              >
-                {workspaceInitial}
-              </div>
-            )
+          {activeWorkspaceFull?.logoUrl ? (
+            <img
+              src={activeWorkspaceFull.logoUrl}
+              alt={activeWorkspaceFull.name || 'Workspace logo'}
+              className='size-[16px] flex-shrink-0 rounded-sm object-cover'
+            />
+          ) : activeWorkspace ? (
+            <div
+              className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-[9px] text-white leading-none'
+              style={{ backgroundColor: activeWorkspaceFull?.color ?? 'var(--brand-accent)' }}
+            >
+              {workspaceInitial}
+            </div>
           ) : (
             <Skeleton className='size-[16px] flex-shrink-0 rounded-sm' />
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 71468b115cd..fd9fc031970 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -44,6 +44,7 @@ import { buildFolderTree, getFolderPathNames } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 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'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
@@ -422,6 +423,7 @@ export const Sidebar = memo(function Sidebar({
 
   const posthog = usePostHog()
   const { data: sessionData, isPending: sessionLoading } = useSession()
+  const { workspace: routeWorkspace } = useWorkspaceHostContext()
   const { canEdit, isLoading: permissionsLoading } = useUserPermissionsContext()
   const {
     config: permissionConfig,
@@ -1354,7 +1356,7 @@ export const Sidebar = memo(function Sidebar({
               )}
             >
               <WorkspaceHeader
-                activeWorkspace={activeWorkspace}
+                activeWorkspace={activeWorkspace ?? routeWorkspace}
                 workspaceId={workspaceId}
                 workspaces={workspaces}
                 pinnedWorkspaceIds={pinnedWorkspaceIds}
diff --git a/apps/sim/blocks/blocks/deployments.ts b/apps/sim/blocks/blocks/deployments.ts
index 4a101f1ba33..2b3973c47e2 100644
--- a/apps/sim/blocks/blocks/deployments.ts
+++ b/apps/sim/blocks/blocks/deployments.ts
@@ -1,4 +1,4 @@
-import { SimDeploymentsIcon } from '@/components/icons'
+import { Rocket } from '@sim/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 export const DeploymentsBlock: BlockConfig = {
@@ -15,8 +15,7 @@ export const DeploymentsBlock: BlockConfig = {
   - Deploy, undeploy, and promote require admin permission on the workspace; the read operations require workspace access.
   `,
   bgColor: '#0C0C0C',
-  iconColor: '#33C482',
-  icon: SimDeploymentsIcon,
+  icon: Rocket,
   category: 'blocks',
   docsLink: 'https://docs.sim.ai/workflows/deployment',
   subBlocks: [
diff --git a/apps/sim/blocks/blocks/gmail.ts b/apps/sim/blocks/blocks/gmail.ts
index af65d44ffd5..10ae9f7c399 100644
--- a/apps/sim/blocks/blocks/gmail.ts
+++ b/apps/sim/blocks/blocks/gmail.ts
@@ -56,6 +56,13 @@ export const GmailBlock: BlockConfig<GmailToolResponse> = {
   integrationType: IntegrationType.Email,
   bgColor: '#FFFFFF',
   icon: GmailIcon,
+  canvasPresentation: {
+    typeLabel: 'Gmail',
+    defaultTitle: 'Send Email',
+    defaultName: 'Gmail',
+    operationSubBlockId: 'operation',
+    operationRowTitle: 'Action',
+  },
   hideFromToolbar: true,
   sunset: { status: 'legacy', replacedBy: 'gmail_v2' },
   triggerAllowed: true,
diff --git a/apps/sim/blocks/blocks/human_in_the_loop.ts b/apps/sim/blocks/blocks/human_in_the_loop.ts
index 99310a4913f..0f63c3bc20a 100644
--- a/apps/sim/blocks/blocks/human_in_the_loop.ts
+++ b/apps/sim/blocks/blocks/human_in_the_loop.ts
@@ -4,7 +4,7 @@ import type { ResponseBlockOutput } from '@/tools/response/types'
 
 export const HumanInTheLoopBlock: BlockConfig<ResponseBlockOutput> = {
   type: 'human_in_the_loop',
-  name: 'Human in the Loop',
+  name: 'Human',
   description: 'Pause workflow execution and wait for human input',
   longDescription:
     'Combines response and start functionality. Sends structured responses and allows workflow to resume from this point.',
@@ -12,6 +12,11 @@ export const HumanInTheLoopBlock: BlockConfig<ResponseBlockOutput> = {
   bgColor: '#10B981',
   docsLink: 'https://docs.sim.ai/workflows/blocks/human-in-the-loop',
   icon: HumanInTheLoopIcon,
+  canvasPresentation: {
+    typeLabel: 'Human',
+    defaultTitle: 'Wait for Input',
+    defaultName: 'Human in the Loop',
+  },
   subBlocks: [
     // Operation dropdown hidden - block defaults to human approval mode
     // {
diff --git a/apps/sim/blocks/blocks/note.ts b/apps/sim/blocks/blocks/note.ts
index e41dbc04840..21a11d7654d 100644
--- a/apps/sim/blocks/blocks/note.ts
+++ b/apps/sim/blocks/blocks/note.ts
@@ -17,6 +17,13 @@ export const NoteBlock: BlockConfig = {
       rows: 8,
       placeholder: 'Add context or instructions for collaborators...',
       description: 'Write your note using Markdown. YouTube links will display as embedded videos.',
+      hidden: true,
+    },
+    {
+      id: 'color',
+      type: 'short-input',
+      defaultValue: 'carbon',
+      hidden: true,
     },
   ],
   tools: { access: [] },
diff --git a/apps/sim/blocks/types.ts b/apps/sim/blocks/types.ts
index 3a1626566d8..f48aff9900c 100644
--- a/apps/sim/blocks/types.ts
+++ b/apps/sim/blocks/types.ts
@@ -512,6 +512,19 @@ export interface BlockConfig<T extends ToolResponse = ToolResponse> {
    */
   iconColor?: string
   icon: BlockIcon
+  /** Canvas-only naming rules. Stored block names remain unchanged for references and serialization. */
+  canvasPresentation?: {
+    /** Stable provider or block-kind label shown in the header tag. */
+    typeLabel?: string
+    /** Semantic title used when the stored block name is still auto-generated. */
+    defaultTitle: string
+    /** Additional generated-name prefix retained for legacy block instances. */
+    defaultName?: string
+    /** Subblock whose selected option replaces the default title. */
+    operationSubBlockId?: string
+    /** Label used for the operation row after a user gives the block a custom name. */
+    operationRowTitle?: string
+  }
   subBlocks: SubBlockConfig[]
   triggerAllowed?: boolean
   authMode?: AuthMode
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/components/icons.tsx b/apps/sim/components/icons.tsx
index 447d38bb28f..7fdab31bfed 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -1518,12 +1518,12 @@ export function InputIcon(props: SVGProps<SVGSVGElement>) {
 export function StartIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      {...props}
       width='26'
       height='16'
       viewBox='0 0 26 16'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      {...props}
     >
       <path
         d='M7.8 13C9.23 13 10.45 12.49 11.47 11.47C12.49 10.45 13 9.23 13 7.8C13 6.37 12.49 5.15 11.47 4.13C10.45 3.11 9.23 2.6 7.8 2.6C6.37 2.6 5.15 3.11 4.13 4.13C3.11 5.15 2.6 6.37 2.6 7.8C2.6 9.23 3.11 10.45 4.13 11.47C5.15 12.49 6.37 13 7.8 13ZM7.8 15.6C5.63 15.6 3.79 14.84 2.28 13.33C0.76 11.81 0 9.97 0 7.8C0 5.63 0.76 3.79 2.28 2.28C3.79 0.76 5.63 0 7.8 0C9.75 0 11.45 0.62 12.89 1.85C14.33 3.09 15.2 4.64 15.5 6.5H24.7C25.07 6.5 25.38 6.62 25.63 6.87C25.88 7.12 26 7.43 26 7.8C26 8.17 25.87 8.48 25.63 8.73C25.38 8.98 25.07 9.1 24.7 9.1H15.5C15.2 10.96 14.33 12.51 12.89 13.75C11.44 14.98 9.75 15.6 7.8 15.6Z'
diff --git a/apps/sim/components/ui/thinking-loader.module.css b/apps/sim/components/ui/thinking-loader.module.css
index 0e914eae3cb..fb8c72e4c0e 100644
--- a/apps/sim/components/ui/thinking-loader.module.css
+++ b/apps/sim/components/ui/thinking-loader.module.css
@@ -78,6 +78,13 @@
   --tl-glow: rgba(255, 255, 255, 0.6);
 }
 
+.frame.inheritInk {
+  color: inherit;
+  --tl-grad-inner: currentColor;
+  --tl-grad-outer: currentColor;
+  --tl-glow: color-mix(in srgb, var(--white) 60%, transparent);
+}
+
 .labelRow {
   display: inline-flex;
   align-items: center;
@@ -154,7 +161,7 @@
 
 .stage {
   opacity: 0;
-  transition: opacity 0.5s ease;
+  transition: opacity var(--tl-morph-duration, 500ms) ease-in-out;
 }
 
 .stageActive {
@@ -181,10 +188,6 @@
   }
 }
 
-/* relay (Return) — always left → right: the ball emerges from the left post,
-   travels across, and dissolves into the right post (the goo morphs it into
-   that shape). It fades out at the right and in at the left, so the reset back
-   to the start happens while invisible — no bounce, no hard snap. */
 .relayBall {
   animation: relay 1.3s linear infinite;
 }
@@ -200,11 +203,266 @@
     opacity: 1;
   }
   100% {
-    transform: translateX(58px);
+    transform: translateX(var(--tl-relay-distance, 58px));
     opacity: 0;
   }
 }
 
+/* The wide workflow relay keeps its angled cap paths static. Only a narrow
+   inner-edge extension moves with the four flexing center cells, so the outer
+   corners and slopes never distort. */
+@property --tl-relay-left-cap-progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --tl-relay-right-cap-progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --tl-relay-b1 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 25%;
+}
+
+@property --tl-relay-b2 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 50%;
+}
+
+@property --tl-relay-b3 {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 75%;
+}
+
+.relayWideLayout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: layout paint;
+  animation: relay-wide-wave 1.6s linear infinite both;
+}
+
+.relayCapFrame {
+  position: absolute;
+  top: 0;
+  width: 40px;
+  height: 24px;
+  overflow: visible;
+}
+
+.relayLeftCapFrame {
+  left: 0;
+}
+
+.relayRightCapFrame {
+  right: 0;
+}
+
+.relayCapExtension {
+  position: absolute;
+  top: 0;
+  height: 24px;
+  background: currentColor;
+  will-change: width;
+}
+
+.relayLeftCap {
+  left: 35px;
+  width: calc(5px + var(--tl-relay-left-cap-progress) * 1px);
+  border-radius: 0 4px 4px 0;
+}
+
+.relayRightCap {
+  right: 35px;
+  width: calc(5px + var(--tl-relay-right-cap-progress) * 1px);
+  border-radius: 4px 0 0 4px;
+}
+
+.relayActivityTrack {
+  position: absolute;
+  top: 0;
+  right: calc(42px + var(--tl-relay-right-cap-progress) * 1px);
+  bottom: 0;
+  left: calc(42px + var(--tl-relay-left-cap-progress) * 1px);
+  contain: layout paint;
+}
+
+.relayActivityBlock {
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  clip-path: inset(0 calc(100% - var(--tl-relay-b1) + 1px) 0 0 round 4px);
+  will-change: clip-path;
+}
+
+.relayActivityBlockSecond {
+  clip-path: inset(
+    0 calc(100% - var(--tl-relay-b2) + 1px) 0 calc(var(--tl-relay-b1) + 1px) round 4px
+  );
+}
+
+.relayActivityBlockThird {
+  clip-path: inset(
+    0 calc(100% - var(--tl-relay-b3) + 1px) 0 calc(var(--tl-relay-b2) + 1px) round 4px
+  );
+}
+
+.relayActivityBlockFourth {
+  clip-path: inset(0 0 0 calc(var(--tl-relay-b3) + 1px) round 4px);
+}
+
+@keyframes relay-wide-wave {
+  0%,
+  100% {
+    --tl-relay-b1: 10.655%;
+    --tl-relay-b2: 24.978%;
+    --tl-relay-b3: 58.16%;
+    --tl-relay-left-cap-progress: 0;
+    --tl-relay-right-cap-progress: 0.976;
+  }
+  5% {
+    --tl-relay-b1: 14.423%;
+    --tl-relay-b2: 27.648%;
+    --tl-relay-b3: 55.273%;
+    --tl-relay-left-cap-progress: 0.095;
+    --tl-relay-right-cap-progress: 0.994;
+  }
+  10% {
+    --tl-relay-b1: 21.161%;
+    --tl-relay-b2: 33.204%;
+    --tl-relay-b3: 55.113%;
+    --tl-relay-left-cap-progress: 0.295;
+    --tl-relay-right-cap-progress: 1;
+  }
+  15% {
+    --tl-relay-b1: 28.65%;
+    --tl-relay-b2: 40.122%;
+    --tl-relay-b3: 58.089%;
+    --tl-relay-left-cap-progress: 0.513;
+    --tl-relay-right-cap-progress: 0.905;
+  }
+  20% {
+    --tl-relay-b1: 35.828%;
+    --tl-relay-b2: 47.584%;
+    --tl-relay-b3: 63.388%;
+    --tl-relay-left-cap-progress: 0.683;
+    --tl-relay-right-cap-progress: 0.705;
+  }
+  25% {
+    --tl-relay-b1: 40.906%;
+    --tl-relay-b2: 56.326%;
+    --tl-relay-b3: 70.465%;
+    --tl-relay-left-cap-progress: 0.802;
+    --tl-relay-right-cap-progress: 0.487;
+  }
+  30% {
+    --tl-relay-b1: 42.672%;
+    --tl-relay-b2: 64.684%;
+    --tl-relay-b3: 77.21%;
+    --tl-relay-left-cap-progress: 0.885;
+    --tl-relay-right-cap-progress: 0.317;
+  }
+  35% {
+    --tl-relay-b1: 42.602%;
+    --tl-relay-b2: 70.912%;
+    --tl-relay-b3: 82.247%;
+    --tl-relay-left-cap-progress: 0.941;
+    --tl-relay-right-cap-progress: 0.198;
+  }
+  40% {
+    --tl-relay-b1: 42.139%;
+    --tl-relay-b2: 74.843%;
+    --tl-relay-b3: 85.574%;
+    --tl-relay-left-cap-progress: 0.976;
+    --tl-relay-right-cap-progress: 0.115;
+  }
+  45% {
+    --tl-relay-b1: 40.427%;
+    --tl-relay-b2: 75.01%;
+    --tl-relay-b3: 88.046%;
+    --tl-relay-left-cap-progress: 0.994;
+    --tl-relay-right-cap-progress: 0.059;
+  }
+  50% {
+    --tl-relay-b1: 37.684%;
+    --tl-relay-b2: 72.125%;
+    --tl-relay-b3: 89.89%;
+    --tl-relay-left-cap-progress: 1;
+    --tl-relay-right-cap-progress: 0.024;
+  }
+  55% {
+    --tl-relay-b1: 33.489%;
+    --tl-relay-b2: 67.94%;
+    --tl-relay-b3: 90.833%;
+    --tl-relay-left-cap-progress: 0.905;
+    --tl-relay-right-cap-progress: 0.006;
+  }
+  60% {
+    --tl-relay-b1: 28.085%;
+    --tl-relay-b2: 63.498%;
+    --tl-relay-b3: 90.982%;
+    --tl-relay-left-cap-progress: 0.705;
+    --tl-relay-right-cap-progress: 0;
+  }
+  65% {
+    --tl-relay-b1: 22.094%;
+    --tl-relay-b2: 57.865%;
+    --tl-relay-b3: 88.465%;
+    --tl-relay-left-cap-progress: 0.487;
+    --tl-relay-right-cap-progress: 0.095;
+  }
+  70% {
+    --tl-relay-b1: 16.986%;
+    --tl-relay-b2: 51.788%;
+    --tl-relay-b3: 83.593%;
+    --tl-relay-left-cap-progress: 0.317;
+    --tl-relay-right-cap-progress: 0.295;
+  }
+  75% {
+    --tl-relay-b1: 13.648%;
+    --tl-relay-b2: 45.485%;
+    --tl-relay-b3: 78.236%;
+    --tl-relay-left-cap-progress: 0.198;
+    --tl-relay-right-cap-progress: 0.513;
+  }
+  80% {
+    --tl-relay-b1: 11.758%;
+    --tl-relay-b2: 38.997%;
+    --tl-relay-b3: 73.344%;
+    --tl-relay-left-cap-progress: 0.115;
+    --tl-relay-right-cap-progress: 0.683;
+  }
+  85% {
+    --tl-relay-b1: 10.679%;
+    --tl-relay-b2: 32.987%;
+    --tl-relay-b3: 69.104%;
+    --tl-relay-left-cap-progress: 0.059;
+    --tl-relay-right-cap-progress: 0.802;
+  }
+  90% {
+    --tl-relay-b1: 10.047%;
+    --tl-relay-b2: 28.326%;
+    --tl-relay-b3: 65.775%;
+    --tl-relay-left-cap-progress: 0.024;
+    --tl-relay-right-cap-progress: 0.885;
+  }
+  95% {
+    --tl-relay-b1: 10.022%;
+    --tl-relay-b2: 25.718%;
+    --tl-relay-b3: 62.334%;
+    --tl-relay-left-cap-progress: 0.006;
+    --tl-relay-right-cap-progress: 0.941;
+  }
+}
+
 /* corners — four dots rotate around a center square */
 .cornersA {
   animation: corners-a 0.8s infinite;
@@ -354,6 +612,9 @@
   .labelIn {
     animation: none;
   }
+  .stage {
+    transition: none;
+  }
   .gradInner,
   .gradOuter,
   .glow {
diff --git a/apps/sim/components/ui/thinking-loader.test.tsx b/apps/sim/components/ui/thinking-loader.test.tsx
new file mode 100644
index 00000000000..ef3d5f923c5
--- /dev/null
+++ b/apps/sim/components/ui/thinking-loader.test.tsx
@@ -0,0 +1,143 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { ThinkingLoader } from '@/components/ui'
+
+beforeAll(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.replaceChildren()
+})
+
+describe('ThinkingLoader', () => {
+  it('keeps the play silhouette mounted while entering the morph cycle', () => {
+    vi.useFakeTimers()
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(<ThinkingLoader variant='play' size={14} tone='inherit' />)
+    })
+
+    const playPath = host.querySelector("path[d^='M 31 20']")
+    expect(playPath).not.toBeNull()
+    expect(playPath?.closest('g')?.className.baseVal).toContain('stageActive')
+
+    act(() => {
+      root.render(
+        <ThinkingLoader
+          startVariant='play'
+          startHoldMs={140}
+          size={20}
+          morphDurationMs={650}
+          tone='inherit'
+        />
+      )
+    })
+
+    expect(host.querySelector("path[d^='M 31 20']")).toBe(playPath)
+    expect(host.querySelectorAll('svg')).toHaveLength(1)
+    expect(playPath?.closest('g')?.className.baseVal).toContain('stageActive')
+    expect(host.querySelector('svg')?.style.getPropertyValue('--tl-morph-duration')).toBe('650ms')
+
+    act(() => {
+      vi.advanceTimersByTime(140)
+    })
+
+    expect(playPath?.closest('g')?.className.baseVal).not.toContain('stageActive')
+
+    act(() => {
+      root.render(
+        <ThinkingLoader
+          variant='play'
+          startVariant='play'
+          size={20}
+          morphDurationMs={180}
+          tone='inherit'
+        />
+      )
+    })
+
+    expect(host.querySelectorAll("g[class*='stage']")).toHaveLength(9)
+    expect(playPath?.closest('g')?.className.baseVal).toContain('stageActive')
+
+    act(() => {
+      vi.advanceTimersByTime(180)
+    })
+
+    expect(host.querySelectorAll("g[class*='stage']")).toHaveLength(1)
+
+    act(() => {
+      root.unmount()
+    })
+  })
+
+  it('expands the relay geometry without changing the default layout', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => {
+      root.render(
+        <ThinkingLoader variant='relay' relayLayout='wide' size={24} className='w-full' />
+      )
+    })
+
+    const wideSvg = host.querySelector('svg')
+    expect(wideSvg?.getAttribute('viewBox')).toBeNull()
+    expect(wideSvg?.getAttribute('width')).toBe('160')
+    expect(wideSvg?.getAttribute('height')).toBe('24')
+    expect(wideSvg?.getAttribute('preserveAspectRatio')).toBeNull()
+    expect(wideSvg?.getAttribute('class')).toContain('w-full')
+    expect(wideSvg?.style.getPropertyValue('--tl-glow')).toBe('transparent')
+    expect(wideSvg?.style.getPropertyValue('--tl-sync')).toBe('0ms')
+    expect(host.querySelector("path[d^='M23.75 0A8']")).not.toBeNull()
+    expect(host.querySelector("path[d^='M16.25 0A8']")).not.toBeNull()
+    expect(host.querySelector("span[class*='relayLeftCap']")).not.toBeNull()
+    expect(host.querySelector("span[class*='relayRightCap']")).not.toBeNull()
+    const wideLayout = host.querySelector("foreignObject[width='100%'][height='24'] > div")
+    expect(wideLayout?.getAttribute('class')).toContain('relayWideLayout')
+    const activityTrack = wideLayout?.querySelector("div[class*='relayActivityTrack']")
+    expect(activityTrack?.getAttribute('class')).toContain('relayActivityTrack')
+    const activityBlocks = activityTrack?.querySelectorAll('span') ?? []
+    expect(activityBlocks).toHaveLength(4)
+    expect(activityBlocks[0]?.getAttribute('class')).toContain('relayActivityBlock')
+    expect(activityBlocks[1]?.getAttribute('class')).toContain('relayActivityBlockSecond')
+    expect(activityBlocks[2]?.getAttribute('class')).toContain('relayActivityBlockThird')
+    expect(activityBlocks[3]?.getAttribute('class')).toContain('relayActivityBlockFourth')
+    const capFrames = host.querySelectorAll("svg[viewBox='0 0 40 24']")
+    expect(capFrames).toHaveLength(2)
+    expect(capFrames[0]?.getAttribute('class')).toContain('relayLeftCapFrame')
+    expect(capFrames[1]?.getAttribute('class')).toContain('relayRightCapFrame')
+
+    act(() => {
+      root.render(<ThinkingLoader variant='relay' size={24} />)
+    })
+
+    const compactSvg = host.querySelector('svg')
+    expect(compactSvg?.getAttribute('viewBox')).toBe('0 0 100 100')
+    expect(compactSvg?.getAttribute('width')).toBe('24')
+    expect(compactSvg?.getAttribute('preserveAspectRatio')).toBeNull()
+    expect(compactSvg?.style.getPropertyValue('--tl-relay-distance')).toBe('')
+
+    act(() => {
+      root.unmount()
+    })
+  })
+})
diff --git a/apps/sim/components/ui/thinking-loader.tsx b/apps/sim/components/ui/thinking-loader.tsx
index 700d39c9a56..d17b27c6dee 100644
--- a/apps/sim/components/ui/thinking-loader.tsx
+++ b/apps/sim/components/ui/thinking-loader.tsx
@@ -5,6 +5,7 @@ import { cn } from '@sim/emcn'
 import styles from '@/components/ui/thinking-loader.module.css'
 
 const VARIANTS = [
+  'play',
   'metaballs',
   'relay',
   'corners',
@@ -18,11 +19,10 @@ const VARIANTS = [
 export type ThinkingLoaderVariant = (typeof VARIANTS)[number]
 
 /**
- * Shapes used in the random morph cycle. `orb` (the solid terminal circle) is
- * excluded — it is only reachable by pinning `variant='orb'` or via `settle`,
- * so the cycle never lands on it mid-stream.
+ * Shapes used in the random morph cycle. The `play` entry shape and `orb`
+ * terminal shape are excluded so the cycle never lands on either mid-stream.
  */
-const CYCLE_VARIANTS = VARIANTS.filter((v) => v !== 'orb')
+const CYCLE_VARIANTS = VARIANTS.filter((v) => v !== 'play' && v !== 'orb')
 
 /**
  * Deterministic integer hash — turns a step index into a spread-out pseudo-
@@ -44,6 +44,7 @@ function hashStep(n: number): number {
  * animation-delay that phase-locks instances mounted at different times.
  */
 const SYNC_PERIOD_MS = 12_000
+const DEFAULT_MORPH_DURATION_MS = 500
 
 /**
  * A super-cycle of steps, each holding a pseudo-random shape for a pseudo-random
@@ -89,6 +90,9 @@ function variantAtNow(): { variant: ThinkingLoaderVariant; msUntilNext: number }
  * contain-fit to the canvas. Animations live in the CSS module.
  */
 const VARIANT_SHAPES: Record<ThinkingLoaderVariant, ReactNode> = {
+  play: (
+    <path d='M 31 20 C 27 17 22 20 22 25 V 75 C 22 80 27 83 31 80 L 76 55 C 81 52 81 48 76 45 Z' />
+  ),
   metaballs: (
     <>
       <circle className={styles.metaballsA} cx='22' cy='50' r='16' />
@@ -160,12 +164,52 @@ const VARIANT_SHAPES: Record<ThinkingLoaderVariant, ReactNode> = {
   orb: <circle cx='50' cy='50' r='42' />,
 }
 
+const WIDE_RELAY_WIDTH = 160
+const WIDE_RELAY_HEIGHT = 24
+const WIDE_RELAY_LEFT_CAP_PATH =
+  'M23.75 0A8 8 0 0 0 17.6 2.88L3.41 19.9A2.5 2.5 0 0 0 5.34 24L36 24L36 0Z'
+const WIDE_RELAY_RIGHT_CAP_PATH =
+  'M16.25 0A8 8 0 0 1 22.4 2.88L36.59 19.9A2.5 2.5 0 0 1 34.66 24L4 24L4 0Z'
+const WIDE_RELAY_LAYOUT = (
+  <foreignObject width='100%' height={WIDE_RELAY_HEIGHT}>
+    <div className={styles.relayWideLayout}>
+      <svg
+        aria-hidden='true'
+        className={cn(styles.relayCapFrame, styles.relayLeftCapFrame)}
+        viewBox='0 0 40 24'
+        width='40'
+        height='24'
+      >
+        <path d={WIDE_RELAY_LEFT_CAP_PATH} fill='currentColor' />
+      </svg>
+      <span aria-hidden='true' className={cn(styles.relayCapExtension, styles.relayLeftCap)} />
+      <div className={styles.relayActivityTrack}>
+        <span className={styles.relayActivityBlock} />
+        <span className={cn(styles.relayActivityBlock, styles.relayActivityBlockSecond)} />
+        <span className={cn(styles.relayActivityBlock, styles.relayActivityBlockThird)} />
+        <span className={cn(styles.relayActivityBlock, styles.relayActivityBlockFourth)} />
+      </div>
+      <svg
+        aria-hidden='true'
+        className={cn(styles.relayCapFrame, styles.relayRightCapFrame)}
+        viewBox='0 0 40 24'
+        width='40'
+        height='24'
+      >
+        <path d={WIDE_RELAY_RIGHT_CAP_PATH} fill='currentColor' />
+      </svg>
+      <span aria-hidden='true' className={cn(styles.relayCapExtension, styles.relayRightCap)} />
+    </div>
+  </foreignObject>
+)
+
 /**
  * World-aligned status phrase per shape (used when `phase` is set). Each phrase
  * names what the shape represents in the Sim world, so the words on screen always
  * match the loader. Keys are the shape names; the comment is the world concept.
  */
 const VARIANT_PHRASE: Record<ThinkingLoaderVariant, string> = {
+  play: 'Ready',
   corners: 'Orchestrating…', // Mothership — the Core directing the work
   squeeze: 'Working…', // Pod — one agent on a task
   compass: 'In formation…', // Formation — many Pods in parallel
@@ -179,12 +223,16 @@ const VARIANT_PHRASE: Record<ThinkingLoaderVariant, string> = {
 export interface ThinkingLoaderProps {
   /** Pin one pattern. When omitted, the loader morphs between all patterns at random. */
   variant?: ThinkingLoaderVariant
+  /** Expand a pinned relay across a horizontal container while preserving its canonical motion. */
+  relayLayout?: 'compact' | 'wide'
   /**
    * When cycling, open on this pattern (held one beat) before joining the
    * shared morph timeline. Use `'corners'` (the Mothership shape) to always
    * begin on the Core. Ignored when `variant` pins a single pattern.
    */
   startVariant?: ThinkingLoaderVariant
+  /** Time to keep the entry shape painted before joining the shared cycle. */
+  startHoldMs?: number
   /**
    * Stop cycling and morph to the solid `orb` disc — the loader's terminal
    * resting shape. The goo filter melts the current shape into the orb (no hard
@@ -194,6 +242,8 @@ export interface ThinkingLoaderProps {
   settle?: boolean
   /** Rendered square size in px. Defaults to 20. */
   size?: number
+  /** Shape-to-shape goo overlap duration. Defaults to the loader's CSS timing. */
+  morphDurationMs?: number
   /** Optional status text (e.g. "Thinking…") rendered beside the goo with a shimmer sweep. */
   label?: string
   /**
@@ -214,6 +264,8 @@ export interface ThinkingLoaderProps {
    * sweep — while the phrase crossfade still applies.
    */
   shimmer?: boolean
+  /** Inherit the surrounding control's current text color instead of using the default loader ink. */
+  tone?: 'default' | 'inherit'
   /** Layout-only classes (margins, alignment). The loader owns its chrome. */
   className?: string
   /**
@@ -241,16 +293,21 @@ export interface ThinkingLoaderProps {
  */
 export function ThinkingLoader({
   variant,
+  relayLayout = 'compact',
   startVariant,
+  startHoldMs = STEP_MIN_MS,
   settle = false,
   size = 20,
+  morphDurationMs,
   label,
   phase,
   labelRatio = 0.7,
   shimmer = true,
+  tone = 'default',
   className,
   style,
 }: ThinkingLoaderProps) {
+  const isWideRelay = variant === 'relay' && relayLayout === 'wide'
   // useId emits colons, which break url(#...) filter references — strip them.
   const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
   const filterId = `tl-goo-${id}`
@@ -258,9 +315,16 @@ export function ThinkingLoader({
   const windowClipId = `tl-window-${id}`
   const gradientId = `tl-grad-${id}`
   const [cycleVariant, setCycleVariant] = useState<ThinkingLoaderVariant>(
-    startVariant ?? 'metaballs'
+    variant ?? startVariant ?? 'metaballs'
   )
   const cycling = variant === undefined
+  const [retainMorphStages, setRetainMorphStages] = useState(cycling)
+
+  useEffect(() => {
+    if (variant !== undefined) {
+      setCycleVariant(variant)
+    }
+  }, [variant])
 
   useEffect(() => {
     if (!cycling) return
@@ -269,7 +333,10 @@ export function ThinkingLoader({
       setCycleVariant('orb')
       return
     }
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setCycleVariant('thinking')
+      return
+    }
 
     // When a startVariant is given, hold it for one min-step so the cycle always
     // opens on that shape, then join the shared wall-clock morph timeline.
@@ -279,7 +346,7 @@ export function ThinkingLoader({
       if (!opened) {
         opened = true
         setCycleVariant(startVariant as ThinkingLoaderVariant)
-        timeout = setTimeout(tick, STEP_MIN_MS)
+        timeout = setTimeout(tick, startHoldMs)
         return
       }
       const { variant: next, msUntilNext } = variantAtNow()
@@ -288,17 +355,36 @@ export function ThinkingLoader({
     }
     tick()
     return () => clearTimeout(timeout)
-  }, [cycling, startVariant, settle])
+  }, [cycling, startHoldMs, startVariant, settle])
+
+  useEffect(() => {
+    if (cycling) {
+      setRetainMorphStages(true)
+      return
+    }
+    if (!retainMorphStages) return
+
+    const timeout = window.setTimeout(
+      () => setRetainMorphStages(false),
+      morphDurationMs ?? DEFAULT_MORPH_DURATION_MS
+    )
+    return () => window.clearTimeout(timeout)
+  }, [cycling, morphDurationMs, retainMorphStages])
 
   // Phase-lock the CSS animations to the wall clock (set after mount so
   // server and client markup agree). All instances share the same negative
   // delay modulus, so their keyframes line up regardless of mount time.
-  const [syncDelay, setSyncDelay] = useState<string | undefined>(undefined)
+  const [syncDelay, setSyncDelay] = useState<string | undefined>(isWideRelay ? '0ms' : undefined)
   useEffect(() => {
+    if (isWideRelay) {
+      setSyncDelay('0ms')
+      return
+    }
     setSyncDelay(`-${Date.now() % SYNC_PERIOD_MS}ms`)
-  }, [])
+  }, [isWideRelay])
 
   const shown = variant ?? cycleVariant
+  const renderedWidth = isWideRelay ? WIDE_RELAY_WIDTH : size
   // `phase` shows the world phrase for the shape on screen; otherwise the
   // caller's static label (if any). Cycling, it updates as the shape morphs.
   const displayLabel = phase ? VARIANT_PHRASE[shown] : label
@@ -319,19 +405,31 @@ export function ThinkingLoader({
     return () => clearTimeout(timeout)
   }, [exitingLabel])
 
-  const stages = cycling ? VARIANTS : [shown]
+  const stages = cycling || retainMorphStages ? VARIANTS : [shown]
 
   const loader = (
     <svg
       role={displayLabel ? undefined : 'status'}
       aria-label={displayLabel ? undefined : 'Thinking'}
       aria-hidden={displayLabel ? true : undefined}
-      viewBox='0 0 100 100'
-      width={size}
+      viewBox={isWideRelay ? undefined : '0 0 100 100'}
+      width={renderedWidth}
       height={size}
-      className={cn(styles.frame, !displayLabel && className)}
+      className={cn(
+        styles.frame,
+        tone === 'inherit' && styles.inheritInk,
+        !displayLabel && className
+      )}
       style={{
         ...(syncDelay ? ({ '--tl-sync': syncDelay } as CSSProperties) : {}),
+        ...(morphDurationMs !== undefined
+          ? ({ '--tl-morph-duration': `${morphDurationMs}ms` } as CSSProperties)
+          : {}),
+        ...(isWideRelay
+          ? ({
+              '--tl-glow': 'transparent',
+            } as CSSProperties)
+          : {}),
         ...style,
       }}
     >
@@ -401,22 +499,26 @@ export function ThinkingLoader({
           <rect x='12.5' y='12.5' width='75' height='75' />
         </clipPath>
       </defs>
-      <g
-        filter={`url(#${filterId})`}
-        fill={`url(#${gradientId})`}
-        stroke={`url(#${gradientId})`}
-        strokeWidth={0}
-      >
-        {stages.map((v) => (
-          <g
-            key={v}
-            clipPath={`url(#${v === 'burst' ? windowClipId : clipId})`}
-            className={cn(styles.stage, v === shown && styles.stageActive)}
-          >
-            {VARIANT_SHAPES[v]}
-          </g>
-        ))}
-      </g>
+      {isWideRelay ? (
+        <g className={cn(styles.stage, styles.stageActive)}>{WIDE_RELAY_LAYOUT}</g>
+      ) : (
+        <g
+          filter={`url(#${filterId})`}
+          fill={`url(#${gradientId})`}
+          stroke={`url(#${gradientId})`}
+          strokeWidth={0}
+        >
+          {stages.map((v) => (
+            <g
+              key={v}
+              clipPath={`url(#${v === 'burst' ? windowClipId : clipId})`}
+              className={cn(styles.stage, v === shown && styles.stageActive)}
+            >
+              {VARIANT_SHAPES[v]}
+            </g>
+          ))}
+        </g>
+      )}
     </svg>
   )
 
diff --git a/apps/sim/executor/execution/edge-manager.test.ts b/apps/sim/executor/execution/edge-manager.test.ts
index 80bd4100d34..4d28b2d947e 100644
--- a/apps/sim/executor/execution/edge-manager.test.ts
+++ b/apps/sim/executor/execution/edge-manager.test.ts
@@ -531,6 +531,29 @@ describe('EdgeManager', () => {
       expect(readyNodes).toContain(successTargetId)
       expect(readyNodes).not.toContain(errorTargetId)
     })
+
+    it('treats positioned source handles as success edges', () => {
+      const sourceId = 'source-1'
+      const successTargetId = 'success-target'
+      const errorTargetId = 'error-target'
+      const sourceNode = createMockNode(sourceId, [
+        { target: successTargetId, sourceHandle: 'source-top' },
+        { target: errorTargetId, sourceHandle: 'error' },
+      ])
+      const nodes = new Map<string, DAGNode>([
+        [sourceId, sourceNode],
+        [successTargetId, createMockNode(successTargetId, [], [sourceId])],
+        [errorTargetId, createMockNode(errorTargetId, [], [sourceId])],
+      ])
+      const edgeManager = new EdgeManager(createMockDAG(nodes))
+
+      const readyNodes = edgeManager.processOutgoingEdges(sourceNode, {
+        error: 'Something went wrong',
+      })
+
+      expect(readyNodes).toContain(errorTargetId)
+      expect(readyNodes).not.toContain(successTargetId)
+    })
   })
 
   describe('Router edge handling', () => {
diff --git a/apps/sim/executor/execution/edge-manager.ts b/apps/sim/executor/execution/edge-manager.ts
index 148d88a352e..7454311b4c2 100644
--- a/apps/sim/executor/execution/edge-manager.ts
+++ b/apps/sim/executor/execution/edge-manager.ts
@@ -1,4 +1,5 @@
 import { createLogger } from '@sim/logger'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import { CONTROL_BACK_EDGE_HANDLES, EDGE, SUBFLOW_CONTROL_EDGE_HANDLES } from '@/executor/constants'
 import type { DAG, DAGNode } from '@/executor/dag/builder'
 import type { DAGEdge } from '@/executor/dag/types'
@@ -286,6 +287,10 @@ export class EdgeManager {
       return output.selectedRoute === routeId
     }
 
+    if (isPositionedSourceHandle(handle)) {
+      return !output.error
+    }
+
     switch (handle) {
       case EDGE.ERROR:
         return !!output.error
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 ca73695d24f..056a4a1b214 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -65,6 +65,7 @@ const logger = createLogger('CollaborativeWorkflow')
 export function useCollaborativeWorkflow() {
   const queryClient = useQueryClient()
   const undoRedo = useUndoRedo()
+  const recordBatchRemoveEdges = undoRedo.recordBatchRemoveEdges
   const isUndoRedoInProgress = useRef(false)
   const lastDiffOperationId = useRef<string | null>(null)
 
@@ -229,9 +230,15 @@ 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
+            case BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED:
+              useWorkflowStore.getState().setBlockErrorEnabled(payload.id, payload.errorEnabled)
+              break
             case BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE:
               useWorkflowStore
                 .getState()
@@ -1146,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) {
@@ -1301,6 +1328,18 @@ export function useCollaborativeWorkflow() {
     [executeQueuedOperation]
   )
 
+  const collaborativeSetBlockErrorEnabled = useCallback(
+    (id: string, errorEnabled: boolean) => {
+      executeQueuedOperation(
+        BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
+        OPERATION_TARGETS.BLOCK,
+        { id, errorEnabled },
+        () => useWorkflowStore.getState().setBlockErrorEnabled(id, errorEnabled)
+      )
+    },
+    [executeQueuedOperation]
+  )
+
   const collaborativeSetBlockCanonicalMode = useCallback(
     (id: string, canonicalId: string, canonicalMode: 'basic' | 'advanced') => {
       if (isBaselineDiffView) {
@@ -1549,13 +1588,13 @@ export function useCollaborativeWorkflow() {
       useWorkflowStore.getState().batchRemoveEdges(validEdgeIds)
 
       if (!options?.skipUndoRedo && edgeSnapshots.length > 0) {
-        undoRedo.recordBatchRemoveEdges(edgeSnapshots)
+        recordBatchRemoveEdges(edgeSnapshots)
       }
 
       logger.info('Batch removed edges', { count: validEdgeIds.length })
       return true
     },
-    [isBaselineDiffView, addToQueue, activeWorkflowId, session, undoRedo]
+    [isBaselineDiffView, addToQueue, activeWorkflowId, session, recordBatchRemoveEdges]
   )
 
   const collaborativeSetSubblockValue = useCallback(
@@ -2252,9 +2291,11 @@ export function useCollaborativeWorkflow() {
     // Collaborative operations
     collaborativeBatchUpdatePositions,
     collaborativeUpdateBlockName,
+    collaborativeUpdateBlockDescription,
     collaborativeBatchToggleBlockEnabled,
     collaborativeBatchUpdateParent,
     collaborativeToggleBlockAdvancedMode,
+    collaborativeSetBlockErrorEnabled,
     collaborativeSetBlockCanonicalMode,
     collaborativeSetBlockCanonicalModes,
     collaborativeBatchToggleBlockHandles,
diff --git a/apps/sim/lib/api/contracts/workflows.ts b/apps/sim/lib/api/contracts/workflows.ts
index 854940b69ed..7f7826aa744 100644
--- a/apps/sim/lib/api/contracts/workflows.ts
+++ b/apps/sim/lib/api/contracts/workflows.ts
@@ -41,6 +41,7 @@ const workflowBlockDataSchema = z.object({
   batchSize: z.number().optional(),
   type: z.string().optional(),
   canonicalModes: z.record(z.string(), z.enum(['basic', 'advanced'])).optional(),
+  errorEnabled: z.boolean().optional(),
 })
 
 const workflowSubBlockStateSchema = z.object({
@@ -66,6 +67,7 @@ const workflowBlockStateSchema = z.object({
   horizontalHandles: z.boolean().optional(),
   height: z.number().optional(),
   advancedMode: z.boolean().optional(),
+  errorEnabled: z.boolean().optional(),
   triggerMode: z.boolean().optional(),
   data: workflowBlockDataSchema.optional(),
   locked: z.boolean().optional(),
diff --git a/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts b/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
index 2780a902496..4409c2d85fd 100644
--- a/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
+++ b/apps/sim/lib/copilot/tools/server/workflow/edit-workflow/validation.ts
@@ -1,6 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { omit } from '@sim/utils/object'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import { validateSelectorIds } from '@/lib/copilot/validation/selector-validator'
 import { isHosted as isHostedDeployment } from '@/lib/core/config/env-flags'
 import { isIntegrationDeploymentAvailableForVisibility } from '@/lib/integrations/availability.server'
@@ -713,7 +714,11 @@ export function validateSourceHandleForBlock(
     }
 
     case 'router':
-      if (sourceHandle === 'source' || sourceHandle.startsWith(EDGE.ROUTER_PREFIX)) {
+      if (
+        sourceHandle === 'source' ||
+        isPositionedSourceHandle(sourceHandle) ||
+        sourceHandle.startsWith(EDGE.ROUTER_PREFIX)
+      ) {
         return { valid: true }
       }
       return {
@@ -736,7 +741,7 @@ export function validateSourceHandleForBlock(
     }
 
     default:
-      if (sourceHandle === 'source') {
+      if (sourceHandle === 'source' || isPositionedSourceHandle(sourceHandle)) {
         return { valid: true }
       }
       return {
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/ui/glass-surface.ts b/apps/sim/lib/ui/glass-surface.ts
new file mode 100644
index 00000000000..df6ab68fae4
--- /dev/null
+++ b/apps/sim/lib/ui/glass-surface.ts
@@ -0,0 +1,3 @@
+/** Shared translucent surface used when content should remain visible through frosted chrome. */
+export const FROSTED_GLASS_SURFACE =
+  'bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] backdrop-blur-2xl'
diff --git a/apps/sim/lib/workflows/autolayout/core.test.ts b/apps/sim/lib/workflows/autolayout/core.test.ts
index 233147cadd5..9a745a04bef 100644
--- a/apps/sim/lib/workflows/autolayout/core.test.ts
+++ b/apps/sim/lib/workflows/autolayout/core.test.ts
@@ -1,7 +1,6 @@
 /**
  * @vitest-environment node
  */
-import { HANDLE_POSITIONS } from '@sim/workflow-renderer'
 import { describe, expect, it, vi } from 'vitest'
 import { layoutBlocksCore } from '@/lib/workflows/autolayout/core'
 import type { Edge } from '@/lib/workflows/autolayout/types'
@@ -98,11 +97,10 @@ describe('layoutBlocksCore', () => {
     const { nodes } = layoutBlocksCore(blocks, edges, { isContainer: false })
     const sourceNode = nodes.get('source')!
 
-    // The error branch's target handle lines up with the source's error handle,
-    // which sits ERROR_BOTTOM_OFFSET above the source's real bottom edge.
-    const errorHandleY =
-      sourceNode.position.y + sourceNode.metrics.height - HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET
-    expect(nodes.get('failed')!.position.y + HANDLE_POSITIONS.DEFAULT_Y_OFFSET).toBe(errorHandleY)
+    // The error branch's centered target lines up with the source's bottom-edge error handle.
+    const failedNode = nodes.get('failed')!
+    const errorHandleY = sourceNode.position.y + sourceNode.metrics.height
+    expect(failedNode.position.y + failedNode.metrics.height / 2).toBe(errorHandleY)
     expect(nodes.get('ok')!.position.y).toBeLessThan(nodes.get('failed')!.position.y)
   })
 })
diff --git a/apps/sim/lib/workflows/autolayout/core.ts b/apps/sim/lib/workflows/autolayout/core.ts
index a1d5ec5e6b3..e4214cb3b1c 100644
--- a/apps/sim/lib/workflows/autolayout/core.ts
+++ b/apps/sim/lib/workflows/autolayout/core.ts
@@ -32,7 +32,7 @@ function getSourceHandleYOffset(node: GraphNode, sourceHandle?: string | null):
   const block = node.block
 
   if (sourceHandle === 'error') {
-    return node.metrics.height - HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET
+    return node.metrics.height
   }
 
   if (sourceHandle && SUBFLOW_START_HANDLES.has(sourceHandle)) {
@@ -58,14 +58,25 @@ function getSourceHandleYOffset(node: GraphNode, sourceHandle?: string | null):
     }
   }
 
-  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+  return getDefaultHandleYOffset(node)
+}
+
+/**
+ * Default handle Y for a block: regular cards anchor their side ports at the
+ * vertical center; subflow containers keep the fixed top offset.
+ */
+function getDefaultHandleYOffset(node: GraphNode): number {
+  if (node.block.type === 'loop' || node.block.type === 'parallel') {
+    return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+  }
+  return node.metrics.height / 2
 }
 
 /**
  * Calculates the Y offset for a target handle based on block type and handle ID.
  */
-function getTargetHandleYOffset(_block: BlockState, _targetHandle?: string | null): number {
-  return HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+function getTargetHandleYOffset(node: GraphNode, _targetHandle?: string | null): number {
+  return getDefaultHandleYOffset(node)
 }
 
 /**
@@ -340,7 +351,7 @@ export function calculatePositions(
         bestSourceHandleY = padding.y + HANDLE_POSITIONS.DEFAULT_Y_OFFSET
       }
 
-      const targetHandleOffset = getTargetHandleYOffset(node.block, bestEdge?.targetHandle)
+      const targetHandleOffset = getTargetHandleYOffset(node, bestEdge?.targetHandle)
 
       node.position = { x: xPosition, y: bestSourceHandleY - targetHandleOffset }
     }
diff --git a/apps/sim/lib/workflows/autolayout/utils.ts b/apps/sim/lib/workflows/autolayout/utils.ts
index ff18c4129b7..a674b32d21f 100644
--- a/apps/sim/lib/workflows/autolayout/utils.ts
+++ b/apps/sim/lib/workflows/autolayout/utils.ts
@@ -1,4 +1,4 @@
-import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@sim/workflow-renderer'
+import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS, getNoteBlockHeight } from '@sim/workflow-renderer'
 import {
   AUTO_LAYOUT_EXCLUDED_TYPES,
   CONTAINER_BLOCK_TYPES,
@@ -329,20 +329,20 @@ function getNoteDimensions(block: BlockState): { width: number; height: number }
   const width = Math.max(
     resolveNumeric(block.data?.width, 0),
     block.layout?.measuredWidth ?? 0,
-    BLOCK_DIMENSIONS.FIXED_WIDTH
+    BLOCK_DIMENSIONS.NOTE_WIDTH
   )
 
-  const defaultHeight =
-    BLOCK_DIMENSIONS.HEADER_HEIGHT +
-    BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING +
-    BLOCK_DIMENSIONS.NOTE_BASE_CONTENT_HEIGHT
-
-  const height = Math.max(
+  const measuredHeight = Math.max(
     resolveNumeric(block.data?.height, 0),
     block.layout?.measuredHeight ?? 0,
-    block.height ?? 0,
-    defaultHeight
+    block.height ?? 0
   )
+  const minimumHeight = getNoteBlockHeight(true)
+  const maximumHeight = getNoteBlockHeight(false)
+  const height =
+    measuredHeight > 0
+      ? Math.min(maximumHeight, Math.max(minimumHeight, measuredHeight))
+      : maximumHeight
 
   return { width, height }
 }
@@ -555,8 +555,14 @@ export function transferBlockHeights(
   for (const block of Object.values(sourceBlocks)) {
     const key = `${block.type}:${block.name}`
     heightMap.set(key, {
-      height: block.height || BLOCK_DIMENSIONS.MIN_HEIGHT,
-      width: block.layout?.measuredWidth || BLOCK_DIMENSIONS.FIXED_WIDTH,
+      height:
+        block.height ||
+        (block.type === NOTE_BLOCK_TYPE ? getNoteBlockHeight(true) : BLOCK_DIMENSIONS.MIN_HEIGHT),
+      width:
+        block.layout?.measuredWidth ||
+        (block.type === NOTE_BLOCK_TYPE
+          ? BLOCK_DIMENSIONS.NOTE_WIDTH
+          : BLOCK_DIMENSIONS.FIXED_WIDTH),
     })
   }
 
diff --git a/apps/sim/lib/workflows/blocks/canvas-presentation.test.ts b/apps/sim/lib/workflows/blocks/canvas-presentation.test.ts
new file mode 100644
index 00000000000..b1552980156
--- /dev/null
+++ b/apps/sim/lib/workflows/blocks/canvas-presentation.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+import { resolveCanvasBlockPresentation } from '@/lib/workflows/blocks/canvas-presentation'
+import type { BlockConfig, SubBlockConfig } from '@/blocks/types'
+
+const operationSubBlock = {
+  id: 'operation',
+  title: 'Operation',
+  type: 'dropdown',
+  options: [
+    { label: 'Send Email', id: 'send_gmail' },
+    { label: 'Search Email', id: 'search_gmail' },
+  ],
+} as SubBlockConfig
+
+const gmailConfig = {
+  name: 'Gmail',
+  subBlocks: [operationSubBlock],
+  canvasPresentation: {
+    typeLabel: 'Gmail',
+    defaultTitle: 'Send Email',
+    operationSubBlockId: 'operation',
+    operationRowTitle: 'Action',
+  },
+} as Pick<BlockConfig, 'name' | 'subBlocks' | 'canvasPresentation'>
+
+describe('resolveCanvasBlockPresentation', () => {
+  it('uses the selected operation for an auto-generated block name', () => {
+    expect(
+      resolveCanvasBlockPresentation(gmailConfig, 'Gmail 1', { operation: 'search_gmail' })
+    ).toEqual({
+      title: 'Search Email',
+      typeLabel: 'Gmail',
+      usesDefaultTitle: true,
+      operationSubBlockId: 'operation',
+      operationRowTitle: 'Action',
+    })
+  })
+
+  it('keeps a custom title and exposes operation row metadata', () => {
+    expect(
+      resolveCanvasBlockPresentation(gmailConfig, 'Customer Welcome', {
+        operation: 'send_gmail',
+      })
+    ).toEqual({
+      title: 'Customer Welcome',
+      typeLabel: 'Gmail',
+      usesDefaultTitle: false,
+      operationSubBlockId: 'operation',
+      operationRowTitle: 'Action',
+    })
+  })
+
+  it('uses a static semantic title for a block without an operation selector', () => {
+    const humanConfig = {
+      name: 'Human',
+      subBlocks: [],
+      canvasPresentation: {
+        typeLabel: 'Human',
+        defaultTitle: 'Wait for Input',
+        defaultName: 'Human in the Loop',
+      },
+    } as Pick<BlockConfig, 'name' | 'subBlocks' | 'canvasPresentation'>
+
+    expect(resolveCanvasBlockPresentation(humanConfig, 'Human in the Loop 1', {})).toEqual({
+      title: 'Wait for Input',
+      typeLabel: 'Human',
+      usesDefaultTitle: true,
+      operationSubBlockId: undefined,
+      operationRowTitle: undefined,
+    })
+
+    expect(resolveCanvasBlockPresentation(humanConfig, 'Human 1', {})).toMatchObject({
+      title: 'Wait for Input',
+      typeLabel: 'Human',
+      usesDefaultTitle: true,
+    })
+  })
+})
diff --git a/apps/sim/lib/workflows/blocks/canvas-presentation.ts b/apps/sim/lib/workflows/blocks/canvas-presentation.ts
new file mode 100644
index 00000000000..beff55cffc2
--- /dev/null
+++ b/apps/sim/lib/workflows/blocks/canvas-presentation.ts
@@ -0,0 +1,67 @@
+import { resolveDropdownLabel } from '@/lib/workflows/subblocks/display'
+import type { BlockConfig, SubBlockConfig } from '@/blocks/types'
+
+type CanvasPresentationConfig = Pick<BlockConfig, 'name' | 'subBlocks' | 'canvasPresentation'>
+
+export interface CanvasBlockPresentation {
+  title: string
+  typeLabel: string
+  usesDefaultTitle: boolean
+  operationSubBlockId?: string
+  operationRowTitle?: string
+}
+
+function isGeneratedBlockName(name: string, config: CanvasPresentationConfig): boolean {
+  const candidates = [config.name, config.canvasPresentation?.defaultName].filter(
+    (candidate): candidate is string => Boolean(candidate)
+  )
+  const normalizedName = name.trim().toLocaleLowerCase()
+
+  return candidates.some((candidate) => {
+    const normalizedCandidate = candidate.trim().toLocaleLowerCase()
+    if (normalizedName === normalizedCandidate) return true
+    if (!normalizedName.startsWith(`${normalizedCandidate} `)) return false
+
+    const suffix = normalizedName.slice(normalizedCandidate.length + 1)
+    return /^\d+$/.test(suffix)
+  })
+}
+
+function getOperationTitle(
+  subBlocks: SubBlockConfig[],
+  operationSubBlockId: string | undefined,
+  rawValues: Record<string, unknown>
+): string | null {
+  if (!operationSubBlockId) return null
+  const operationSubBlock = subBlocks.find((subBlock) => subBlock.id === operationSubBlockId)
+  return resolveDropdownLabel(operationSubBlock, rawValues[operationSubBlockId])
+}
+
+/** Resolves semantic canvas copy without changing the block's persisted internal name. */
+export function resolveCanvasBlockPresentation(
+  config: CanvasPresentationConfig,
+  storedName: string,
+  rawValues: Record<string, unknown>
+): CanvasBlockPresentation {
+  const presentation = config.canvasPresentation
+  if (!presentation) {
+    return {
+      title: storedName,
+      typeLabel: config.name,
+      usesDefaultTitle: false,
+    }
+  }
+
+  const usesDefaultTitle = isGeneratedBlockName(storedName, config)
+  const operationTitle = usesDefaultTitle
+    ? getOperationTitle(config.subBlocks, presentation.operationSubBlockId, rawValues)
+    : null
+
+  return {
+    title: usesDefaultTitle ? (operationTitle ?? presentation.defaultTitle) : storedName,
+    typeLabel: presentation.typeLabel ?? config.name,
+    usesDefaultTitle,
+    operationSubBlockId: presentation.operationSubBlockId,
+    operationRowTitle: presentation.operationRowTitle,
+  }
+}
diff --git a/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts b/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
index b3d8145e91b..fd42e24e2eb 100644
--- a/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
+++ b/apps/sim/lib/workflows/blocks/deterministic-dimensions.ts
@@ -8,36 +8,82 @@ interface WorkflowBlockDimensionsInput {
   visibleSubBlockCount: number
   conditionRowCount?: number
   routerRowCount?: number
+  /** Number of value pills in the chips row (standard blocks only). */
+  chipCount?: number
+  /**
+   * Estimated wrapped line count of the natural-language summary. When > 0
+   * the summary replaces the chips row and all field rows.
+   */
+  sentenceLineCount?: number
+  /**
+   * Whether the card carries the error-output row. It is permanent for blocks
+   * that can emit an error — it is the affordance for switching the output on —
+   * so it holds a row whether or not the toggle is set.
+   */
+  hasErrorRow?: boolean
 }
 
 export function calculateWorkflowBlockDimensions({
   blockType,
-  category,
-  displayTriggerMode,
   visibleSubBlockCount,
   conditionRowCount = 0,
   routerRowCount = 0,
+  chipCount = 0,
+  sentenceLineCount = 0,
+  hasErrorRow = false,
 }: WorkflowBlockDimensionsInput): { width: number; height: number } {
-  const shouldShowDefaultHandles =
-    category !== 'triggers' && blockType !== 'starter' && !displayTriggerMode
-  const defaultHandlesRow = shouldShowDefaultHandles ? 1 : 0
+  const isBranchBlock = blockType === 'condition' || blockType === 'router_v2'
 
   let rowsCount = 0
   if (blockType === 'condition') {
-    rowsCount = conditionRowCount + defaultHandlesRow
+    rowsCount = conditionRowCount
   } else if (blockType === 'router_v2') {
-    rowsCount = 1 + routerRowCount + defaultHandlesRow
+    rowsCount = 1 + routerRowCount
   } else {
-    rowsCount = visibleSubBlockCount + defaultHandlesRow
+    rowsCount = visibleSubBlockCount
   }
 
-  const hasContentBelowHeader = rowsCount > 0
+  const hasSentence = !isBranchBlock && sentenceLineCount > 0
+  const chipsRowHeight =
+    !isBranchBlock && !hasSentence && chipCount > 0 ? BLOCK_DIMENSIONS.WORKFLOW_CHIPS_ROW_HEIGHT : 0
+
+  /*
+   * The content column is `flex flex-col gap-2 p-2`, so its height is the sum
+   * of the sections it renders plus one gap between each adjacent pair. Adding
+   * the sections without the gaps (or applying a per-row pitch that bakes one
+   * in) over-estimates, and the card's silhouette is painted from this number —
+   * an over-estimate draws a card taller than its own content.
+   */
+  const sections: number[] = []
+  if (chipsRowHeight > 0) sections.push(chipsRowHeight)
+  if (hasSentence) {
+    sections.push(sentenceLineCount * BLOCK_DIMENSIONS.WORKFLOW_SENTENCE_LINE_HEIGHT)
+  } else {
+    for (let index = 0; index < rowsCount; index++) {
+      sections.push(BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT)
+    }
+  }
+  if (hasErrorRow) sections.push(BLOCK_DIMENSIONS.WORKFLOW_ERROR_ROW_HEIGHT)
+  const hasContentBelowHeader = sections.length > 0
   const contentHeight = hasContentBelowHeader
-    ? BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING + rowsCount * BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT
+    ? BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING +
+      sections.reduce((total, section) => total + section, 0) +
+      (sections.length - 1) * BLOCK_DIMENSIONS.WORKFLOW_CONTENT_GAP
     : 0
+  /*
+   * The old `MIN_HEIGHT` (100) floor is gone: it stretched a header-only
+   * trigger card to more than twice its content and painted an empty band
+   * under the title. Consumers that need a minimum for canvas math (selection
+   * bounds, paste placement) already clamp with MIN_HEIGHT themselves.
+   *
+   * `MIN_PAINTED_HEIGHT` (48) is the shortest silhouette the border renderer
+   * will paint. Header-only cards (40px header) must still use this floor —
+   * and size their DOM host to match — or `preserveAspectRatio='none'`
+   * squashes the action-menu tab and leaves uneven gray under the icons.
+   */
   const height = Math.max(
     BLOCK_DIMENSIONS.HEADER_HEIGHT + contentHeight,
-    BLOCK_DIMENSIONS.MIN_HEIGHT
+    BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT
   )
 
   return {
diff --git a/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx b/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx
new file mode 100644
index 00000000000..cd926daa265
--- /dev/null
+++ b/apps/sim/lib/workflows/blocks/workflow-block-border-mount.test.tsx
@@ -0,0 +1,913 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Mount smoke test for the border renderer. It lives in apps/sim because the
+ * renderer package has no test runner. The coloured-port case exists because
+ * a knob-paint bug once threw only when a card had a coloured knob — invisible
+ * on an idle canvas, fatal on node creation.
+ */
+import { act } from 'react'
+import {
+  ERROR_SOURCE_HANDLE_POSITION,
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandlePosition,
+  getErrorBorderPort,
+  getErrorSourceHandleStyle,
+  getNearestBranchCursorHandleId,
+  getNoteBlockHeight,
+  getWorkflowBorderFrameDeltaSeconds,
+  HANDLE_POSITIONS,
+  isActionMenuSwellReady,
+  NoteBlockView,
+  normalizeCursorSourceHandleId,
+  SubflowNodeView,
+  SubflowStartView,
+  WorkflowBlockBorder,
+  type WorkflowBorderPort,
+} from '@sim/workflow-renderer'
+import {
+  getHorizontalWorkflowHandleSide,
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+} from '@sim/workflow-types/workflow'
+import { createRoot, type Root } from 'react-dom/client'
+import { ReactFlowProvider } from 'reactflow'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+beforeAll(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+})
+
+const ports: WorkflowBorderPort[] = [
+  { id: 'target', side: 'left', position: 'center', plateau: 33 },
+  { id: 'source', side: 'right', position: 'center', plateau: 33 },
+  {
+    id: 'error',
+    side: 'bottom',
+    position: { fromEnd: HANDLE_POSITIONS.ERROR_RIGHT_OFFSET },
+    plateau: 24,
+    color: 'var(--text-secondary)',
+  },
+  {
+    id: 'action-menu',
+    side: 'top',
+    position: { fromEnd: 24 + 82 },
+    plateau: 164,
+    restAmplitude: 7,
+    hoverAmplitude: 7,
+    magnetizable: false,
+  },
+]
+
+const mountedRoots = new Set<Root>()
+const mountedHosts = new Set<HTMLDivElement>()
+
+function mount(element: React.ReactElement) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  mountedRoots.add(root)
+  mountedHosts.add(host)
+  act(() => {
+    root.render(element)
+  })
+  return { host, root }
+}
+
+afterEach(() => {
+  act(() => {
+    mountedRoots.forEach((root) => root.unmount())
+  })
+  mountedRoots.clear()
+  mountedHosts.forEach((host) => host.remove())
+  mountedHosts.clear()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+
+describe('WorkflowBlockBorder mount', () => {
+  it('resolves every connection start to a horizontal source anchor', () => {
+    expect(POSITIONED_SOURCE_HANDLE_SIDES).toEqual(['left', 'right'])
+    expect(getHorizontalWorkflowHandleSide(20, 250)).toBe('left')
+    expect(getHorizontalWorkflowHandleSide(124.9, 250)).toBe('left')
+    expect(getHorizontalWorkflowHandleSide(125, 250)).toBe('right')
+    expect(getHorizontalWorkflowHandleSide(230, 250)).toBe('right')
+    /* Outputs always leave from the right, whichever edge the drag began on —
+       anchoring one on the left would put an outgoing line on the input port. */
+    expect(normalizeCursorSourceHandleId('source-cursor-left')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-right')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-top')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-bottom')).toBe('source-right')
+    expect(normalizeCursorSourceHandleId('source-cursor-left', 'loop')).toBe('loop-end-source')
+    expect(normalizeCursorSourceHandleId('source-cursor-right', 'parallel')).toBe(
+      'parallel-end-source'
+    )
+    /* Anything that already reached the graph collapses the same way. */
+    expect(normalizePositionedSourceHandleId('source-left')).toBe('source-right')
+    expect(normalizePositionedSourceHandleId('source-right')).toBe('source-right')
+  })
+
+  it('uses the grabbed edge only for the transient preview direction', () => {
+    expect(getCursorSourceHandlePosition('top')).toBe('top')
+    expect(getCursorSourceHandlePosition('bottom')).toBe('bottom')
+    expect(getCursorSourceHandlePosition('left')).toBe('left')
+    expect(getCursorSourceHandlePosition('right')).toBe('right')
+  })
+
+  it('keeps moving branch swells attached to a valid branch output', () => {
+    const conditionRows = [{ id: 'if-id' }, { id: 'else-if-id' }, { id: 'else-id' }]
+
+    expect(getNearestBranchCursorHandleId(conditionRows, 0, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-if-id')
+    )
+    expect(getNearestBranchCursorHandleId(conditionRows, 90, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-else-if-id')
+    )
+    expect(getNearestBranchCursorHandleId(conditionRows, 200, 60, 'condition')).toBe(
+      getCursorBranchSourceHandleId('condition-else-id')
+    )
+    expect(normalizeCursorSourceHandleId(getCursorBranchSourceHandleId('condition-else-id'))).toBe(
+      'condition-else-id'
+    )
+  })
+
+  it('keeps Error as the bottom-right persisted source exception', () => {
+    expect(getErrorBorderPort('var(--text-secondary)')).toEqual({
+      id: 'error',
+      side: 'bottom',
+      position: { fromEnd: 30 },
+      plateau: 24,
+      color: 'var(--text-secondary)',
+    })
+    expect(ERROR_SOURCE_HANDLE_POSITION).toBe('bottom')
+    expect(getErrorSourceHandleStyle()).toEqual({
+      right: 'auto',
+      top: 'auto',
+      bottom: -7,
+      left: 'calc(100% - 30px)',
+      width: 24,
+      height: 14,
+      transform: 'translateX(-50%)',
+    })
+    expect(normalizeCursorSourceHandleId('error')).toBe('error')
+  })
+
+  it('collapses legacy vertical edge anchors during persistence normalization', () => {
+    expect(normalizePositionedSourceHandleId('source-top')).toBe('source-right')
+    expect(normalizePositionedSourceHandleId('source-bottom')).toBe('source-right')
+    expect(normalizePositionedTargetHandleId('target-top')).toBe('target-left')
+    expect(normalizePositionedTargetHandleId('target-bottom')).toBe('target-left')
+  })
+
+  it('never advances a spring with a negative or unbounded frame delta', () => {
+    expect(getWorkflowBorderFrameDeltaSeconds(90, 100)).toBe(0)
+    expect(getWorkflowBorderFrameDeltaSeconds(Number.NaN, 100)).toBe(0)
+    expect(getWorkflowBorderFrameDeltaSeconds(10_000, 100)).toBeCloseTo(1 / 30)
+  })
+
+  it('reveals action-menu content only once the swell can contain it', () => {
+    /* The row clips to the swell, so revealing it while the swell is shorter
+       than the buttons collides the icons with the card's top edge. Pin the
+       ratio, not the threshold constant — 24px of buttons in a 28px swell. */
+    const ACTION_ROW_HEIGHT_PX = 24
+    const OPEN_SWELL_HEIGHT_PX = 28
+    const minimumSafeFraction = ACTION_ROW_HEIGHT_PX / OPEN_SWELL_HEIGHT_PX
+
+    expect(isActionMenuSwellReady(1, minimumSafeFraction - 0.001)).toBe(false)
+    expect(isActionMenuSwellReady(1, 1)).toBe(true)
+    /* Never reveal while retracting, however far open the swell still is. */
+    expect(isActionMenuSwellReady(0, 1)).toBe(false)
+  })
+
+  it('paints synchronously at mount without throwing', () => {
+    const { host } = mount(
+      <div style={{ width: 250, height: 136 }}>
+        <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+      </div>
+    )
+    const path = host.querySelector('svg path')
+    expect(path?.getAttribute('d')?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  it('paints a tall selector card across floating-point segment seams', () => {
+    const selectorPorts: WorkflowBorderPort[] = [
+      {
+        id: 'target',
+        side: 'left',
+        position: 'center',
+        plateau: 38,
+        color: 'var(--text-secondary)',
+        magnetizable: false,
+      },
+    ]
+    const { host } = mount(
+      <div style={{ width: 250, height: 384 }}>
+        <WorkflowBlockBorder ports={selectorPorts} hasRing={false} ringStyles='' height={384} />
+      </div>
+    )
+    const path = host.querySelector('svg path')
+    expect(path?.getAttribute('d')?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  it('paints camera-followed execution with the selected silhouette color', () => {
+    const { host } = mount(
+      <div style={{ width: 250, height: 136 }}>
+        <WorkflowBlockBorder
+          ports={ports}
+          hasRing={true}
+          ringStyles='ring-[3.5px] ring-[var(--border-success)] animate-ring-pulse'
+          isSelected={true}
+          height={136}
+        />
+      </div>
+    )
+
+    expect(host.querySelector('path[fill="var(--text-secondary)"]')).toBeTruthy()
+    expect(host.querySelector('path[stroke="var(--border-success)"]')).toBeNull()
+  })
+
+  it('mounts a header-only card without throwing', () => {
+    const { host } = mount(
+      <div style={{ width: 250, height: 48 }}>
+        <WorkflowBlockBorder
+          ports={[{ id: 'source', side: 'right', position: 'center', plateau: 10 }]}
+          hasRing={false}
+          ringStyles=''
+          height={48}
+        />
+      </div>
+    )
+    expect(host.querySelector('svg')).toBeTruthy()
+  })
+
+  it('bounds note content in a faded scroll viewport without connection handles', () => {
+    const observedTargets: Element[] = []
+    const handleNameChange = vi.fn(() => true)
+    const handleContentChange = vi.fn()
+    const handleExpandedChange = vi.fn()
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe(target: Element) {
+          observedTargets.push(target)
+        }
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+
+    const { host, root } = mount(
+      <NoteBlockView
+        name='Implementation notes'
+        content={'Long note content\n'.repeat(40)}
+        isEnabled
+        isFocused={false}
+        canEdit
+        hasRing={false}
+        ringStyles=''
+        onSelect={() => undefined}
+        onExpandedChange={handleExpandedChange}
+        actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+      />
+    )
+
+    const scrollRegion = host.querySelector('[data-note-scroll-region]')
+    expect(scrollRegion).toHaveClass('h-[calc(100%_-_40px)]', 'overflow-y-auto')
+    expect(scrollRegion).not.toHaveClass('pointer-events-none', 'overflow-hidden')
+    expect(scrollRegion).not.toHaveClass('allow-scroll', 'nodrag', 'nopan')
+    expect(host.querySelector('[data-note-scroll-region] > div')).toHaveClass('pointer-events-none')
+
+    Object.defineProperties(scrollRegion, {
+      clientHeight: { configurable: true, value: 120 },
+      scrollHeight: { configurable: true, value: 320 },
+      scrollTop: { configurable: true, writable: true, value: 0 },
+    })
+    act(() => {
+      scrollRegion?.dispatchEvent(new Event('scroll', { bubbles: true }))
+    })
+    expect(scrollRegion).toHaveClass('nowheel', 'allow-scroll', 'touch-pan-y')
+    expect(host.querySelector('[data-note-card]')).toHaveClass(
+      'w-[320px]',
+      'transition-[color,width,height]',
+      'cursor-grab'
+    )
+    expect(host.querySelector('[data-note-card]')).not.toHaveClass('cursor-text')
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '240px' })
+    expect(getNoteBlockHeight(true)).toBe(70)
+    expect(getNoteBlockHeight(false)).toBe(240)
+    expect(host.querySelector('[data-workflow-action-bar-bridge]')).toBeTruthy()
+    expect(host.querySelector('svg rect[fill="#525252"]')).toBeTruthy()
+    expect(
+      host.querySelector('svg path[fill="var(--border-1)"][stroke="var(--border-1)"]')
+    ).toBeTruthy()
+    expect(host.querySelector('[data-handleid]')).toBeNull()
+    expect(observedTargets).toContain(host.querySelector('[data-note-card]'))
+    expect(host.querySelector('button[aria-label="Expand note"]')).toHaveClass(
+      'pointer-events-none',
+      'opacity-0',
+      'group-hover:pointer-events-auto',
+      'group-hover:opacity-70',
+      'group-data-[node-selected]:opacity-70'
+    )
+
+    act(() => {
+      root.render(
+        <NoteBlockView
+          name='Implementation notes'
+          content={'Long note content\n'.repeat(40)}
+          noteColor='light-gray'
+          isEnabled
+          isFocused={false}
+          canEdit
+          hasRing={false}
+          ringStyles=''
+          onSelect={() => undefined}
+          onExpandedChange={handleExpandedChange}
+          actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+        />
+      )
+    })
+
+    const lightGrayCard = host.querySelector('[data-note-card]')
+    act(() => {
+      lightGrayCard?.dispatchEvent(new MouseEvent('pointerover', { bubbles: true }))
+    })
+    expect(host.querySelector('svg path[fill="#D4D4D4"]')).toBeTruthy()
+
+    act(() => {
+      lightGrayCard?.dispatchEvent(
+        new MouseEvent('pointerout', { bubbles: true, relatedTarget: document.body })
+      )
+    })
+    expect(host.querySelector('svg path[fill="#D4D4D4"]')).toBeNull()
+    expect(host.querySelector('svg path[fill="var(--border-1)"]')).toBeTruthy()
+
+    act(() => {
+      root.render(
+        <NoteBlockView
+          name='Implementation notes'
+          content={'Long note content\n'.repeat(40)}
+          noteColor='light-gray'
+          isEnabled
+          isFocused
+          canEdit
+          hasRing
+          ringStyles='ring-[1.5px] ring-[var(--text-secondary)]'
+          onSelect={() => undefined}
+          onNameChange={handleNameChange}
+          onContentChange={handleContentChange}
+          onExpandedChange={handleExpandedChange}
+          actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+        />
+      )
+    })
+
+    expect(host.querySelector('[data-note-card]')).toHaveClass(
+      'w-[320px]',
+      'transition-[color,width,height]',
+      'note-drag-handle',
+      'cursor-text'
+    )
+    expect(host.querySelector('[data-note-card]')).not.toHaveClass('cursor-grab')
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '240px' })
+    expect(host.querySelector('[data-note-card]')).not.toHaveClass(
+      'transition-[width,height]',
+      'will-change-[width,height]'
+    )
+    expect(host.querySelector('[data-note-scroll-region]')).toHaveClass(
+      'h-[calc(100%_-_40px)]',
+      'pb-0',
+      '[contain:layout]'
+    )
+    expect(host.querySelector('[data-note-scroll-region]')).toHaveClass(
+      'allow-scroll',
+      'nowheel',
+      'overflow-y-auto'
+    )
+    expect(host.querySelector('[data-note-scroll-region]')).not.toHaveClass('nodrag', 'nopan')
+    expect(host.querySelector('[data-note-scroll-region]')).not.toHaveClass('pointer-events-none')
+    expect(host.querySelector('input[aria-label="Note title"]')).toBeNull()
+    expect(host.querySelector('textarea[aria-label="Note content"]')).toBeNull()
+    expect(host.querySelector('svg')).toHaveAttribute('viewBox', '-36 -36 392 312')
+    expect(host.querySelector('svg rect[fill="#E5E5E5"]')).toBeTruthy()
+    expect(observedTargets).toContain(host.querySelector('[data-note-card]'))
+    expect(host.querySelector('[data-node-selected]')).toBeTruthy()
+    expect(host.querySelector('svg path[fill="var(--text-secondary)"]')).toBeTruthy()
+    expect(host.querySelector('button[aria-label="Edit note title"]')).toBeNull()
+    expect(host.querySelector('button[aria-label="Edit note content"]')).toBeNull()
+    const compactCard = host.querySelector<HTMLElement>('[data-note-card]')
+
+    act(() => {
+      compactCard?.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true, clientX: 10, clientY: 10, button: 0 })
+      )
+      compactCard?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, clientX: 30, clientY: 30, detail: 1 })
+      )
+    })
+
+    expect(handleExpandedChange).not.toHaveBeenCalled()
+
+    act(() => {
+      compactCard?.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true, clientX: 10, clientY: 10, button: 0 })
+      )
+      compactCard?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, clientX: 11, clientY: 11, detail: 1 })
+      )
+    })
+
+    expect(handleExpandedChange).toHaveBeenCalledWith(true)
+    handleExpandedChange.mockClear()
+    const expandButton = host.querySelector<HTMLButtonElement>('button[aria-label="Expand note"]')
+    expect(expandButton).toBeTruthy()
+    expect(host.querySelector('[data-note-card]')?.contains(expandButton)).toBe(true)
+
+    act(() => {
+      expandButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(handleExpandedChange).toHaveBeenCalledWith(true)
+
+    act(() => {
+      root.render(
+        <NoteBlockView
+          name='Implementation notes'
+          content={'Long note content\n'.repeat(40)}
+          noteColor='light-gray'
+          isEnabled
+          isFocused={false}
+          isExpanded
+          canEdit
+          hasRing
+          ringStyles='ring-[1.5px] ring-[var(--text-secondary)]'
+          onSelect={() => undefined}
+          onNameChange={handleNameChange}
+          onContentChange={handleContentChange}
+          onExpandedChange={handleExpandedChange}
+          actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+        />
+      )
+    })
+
+    expect(host.querySelector('[data-note-expanded]')).toBeTruthy()
+    expect(host.querySelector('[data-note-card]')).toHaveClass(
+      'nodrag',
+      'w-[520px]',
+      'cursor-default'
+    )
+    expect(host.querySelector('[data-note-card]')).not.toHaveClass('note-drag-handle')
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '400px' })
+    expect(host.querySelector('[data-node-selected]')).toBeTruthy()
+    expect(host.querySelector('button[aria-label="Collapse note"]')).toBeTruthy()
+
+    const outsideCanvas = document.createElement('div')
+    outsideCanvas.className = 'react-flow__pane'
+    document.body.appendChild(outsideCanvas)
+    handleExpandedChange.mockClear()
+
+    act(() => {
+      host
+        .querySelector('[data-note-card]')
+        ?.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+      outsideCanvas.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, button: 0 }))
+    })
+
+    expect(handleExpandedChange).not.toHaveBeenCalled()
+
+    act(() => {
+      outsideCanvas.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0 }))
+    })
+
+    expect(handleExpandedChange).toHaveBeenCalledOnce()
+    expect(handleExpandedChange).toHaveBeenCalledWith(false)
+    outsideCanvas.remove()
+
+    const titleEditTrigger = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Edit note title"]'
+    )
+    expect(titleEditTrigger).toBeTruthy()
+    expect(titleEditTrigger).not.toHaveClass('nodrag')
+
+    act(() => {
+      titleEditTrigger?.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true, clientX: 10, clientY: 10 })
+      )
+      titleEditTrigger?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, clientX: 30, clientY: 30, detail: 1 })
+      )
+    })
+
+    expect(host.querySelector('input[aria-label="Note title"]')).toBeNull()
+
+    act(() => {
+      titleEditTrigger?.dispatchEvent(
+        new MouseEvent('pointerdown', { bubbles: true, clientX: 10, clientY: 10 })
+      )
+      titleEditTrigger?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, clientX: 11, clientY: 11, detail: 1 })
+      )
+    })
+
+    const titleInput = host.querySelector<HTMLInputElement>('input[aria-label="Note title"]')
+    expect(titleInput).toBeTruthy()
+    expect(titleInput).toHaveClass(
+      'nodrag',
+      'nopan',
+      'nowheel',
+      'caret-current',
+      'selection:bg-black/15'
+    )
+    expect(titleInput).toHaveFocus()
+    expect(titleInput?.selectionStart).toBe(titleInput?.value.length)
+    expect(titleInput?.selectionEnd).toBe(titleInput?.value.length)
+
+    act(() => {
+      const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
+      setValue?.call(titleInput, 'Renamed note')
+      titleInput?.dispatchEvent(new Event('input', { bubbles: true }))
+      titleInput?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    })
+
+    expect(handleNameChange).toHaveBeenCalledOnce()
+    expect(handleNameChange).toHaveBeenCalledWith('Renamed note')
+
+    const contentEditTrigger = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Edit note content"]'
+    )
+    expect(contentEditTrigger).toBeTruthy()
+    expect(contentEditTrigger).not.toHaveClass('nodrag')
+
+    act(() => {
+      contentEditTrigger?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    const contentInput = host.querySelector<HTMLTextAreaElement>(
+      'textarea[aria-label="Note content"]'
+    )
+    expect(contentInput).toBeTruthy()
+    expect(contentInput).toHaveClass(
+      'nodrag',
+      'nopan',
+      'nowheel',
+      'caret-current',
+      'selection:bg-black/15'
+    )
+    expect(contentInput).toHaveFocus()
+
+    let textareaScrollHeight = 30
+    Object.defineProperty(contentInput, 'scrollHeight', {
+      configurable: true,
+      get: () => textareaScrollHeight,
+    })
+
+    act(() => {
+      textareaScrollHeight = 90
+      const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+      setValue?.call(contentInput, 'Updated note content')
+      contentInput?.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '400px' })
+
+    act(() => {
+      textareaScrollHeight = 400
+      const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+      setValue?.call(contentInput, `${'Maximum height content '.repeat(20)}`)
+      contentInput?.dispatchEvent(new Event('input', { bubbles: true }))
+      contentInput?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    })
+
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '400px' })
+    expect(handleContentChange).toHaveBeenCalledWith(expect.stringContaining('Maximum height'))
+
+    act(() => {
+      root.render(
+        <NoteBlockView
+          name='Implementation notes'
+          content={'Long note content\n'.repeat(40)}
+          noteColor='carbon'
+          isEnabled
+          isFocused
+          isExpanded
+          canEdit
+          hasRing
+          ringStyles='ring-[1.5px] ring-[var(--text-secondary)]'
+          onSelect={() => undefined}
+          onNameChange={handleNameChange}
+          onContentChange={handleContentChange}
+          onExpandedChange={handleExpandedChange}
+          actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+        />
+      )
+    })
+
+    expect(host.querySelector('svg rect[fill="#525252"]')).toBeTruthy()
+    expect(host.querySelector('svg path[fill="#3F3F3F"][stroke="#3F3F3F"]')).toBeTruthy()
+
+    act(() => {
+      host
+        .querySelector<HTMLButtonElement>('button[aria-label="Edit note title"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(host.querySelector('input[aria-label="Note title"]')).toHaveClass(
+      'selection:bg-white/25'
+    )
+  })
+
+  it('keeps an expanded note anchored while its compact height grows', () => {
+    const handleHeightChange = vi.fn()
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+
+    const { host } = mount(
+      <NoteBlockView
+        name='Positioned note'
+        content=''
+        isEnabled
+        isFocused
+        isExpanded
+        canEdit
+        hasRing={false}
+        ringStyles=''
+        onSelect={() => undefined}
+        onContentChange={() => undefined}
+        onHeightChange={handleHeightChange}
+        onExpandedChange={() => undefined}
+      />
+    )
+
+    expect(host.querySelector('[data-note-layout]')).toHaveStyle({ height: '70px' })
+
+    act(() => {
+      host
+        .querySelector<HTMLButtonElement>('button[aria-label="Edit note content"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    const contentInput = host.querySelector<HTMLTextAreaElement>(
+      'textarea[aria-label="Note content"]'
+    )
+    Object.defineProperty(contentInput, 'scrollHeight', {
+      configurable: true,
+      value: 120,
+    })
+
+    act(() => {
+      const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+      setValue?.call(contentInput, 'Content that increases the compact note height')
+      contentInput?.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    expect(handleHeightChange.mock.calls.some(([height]) => height > 70)).toBe(true)
+    expect(host.querySelector('[data-note-layout]')).toHaveStyle({ height: '70px' })
+    expect(host.querySelector('[data-note-card]')).toHaveStyle({ height: '400px' })
+  })
+
+  it('paints the subflow Start source as a unified connection swell', () => {
+    const { host } = mount(
+      <ReactFlowProvider>
+        <div className='relative size-[100px]'>
+          <SubflowStartView parentId='loop-1' kind='loop' isHighlighted />
+        </div>
+      </ReactFlowProvider>
+    )
+
+    const start = host.querySelector('[data-node-role="loop-start"]')
+    expect(start).toHaveAttribute('data-connection-swell')
+    expect(start).toHaveClass('top-3')
+    expect(start?.querySelector('svg')).toHaveAttribute('viewBox', '-36 -36 130 106')
+    expect(start?.querySelector('[data-handleid="loop-start-source"]')).toBeTruthy()
+    expect(start?.querySelector('path[stroke="var(--text-secondary)"]')).toBeTruthy()
+  })
+
+  it('uses the standard card header and lower full-size ports for subflows', () => {
+    const { host } = mount(
+      <ReactFlowProvider>
+        <SubflowNodeView
+          id='loop-1'
+          data={{ kind: 'loop', name: 'Loop 1', width: 500, height: 300, isPreview: true }}
+          isEnabled
+          isLocked={false}
+          isFocused={false}
+          nestingLevel={0}
+          canEditWorkflow={false}
+          onSelect={() => undefined}
+        />
+      </ReactFlowProvider>
+    )
+
+    const header = host.querySelector('[data-subflow-header]')
+    expect(header).toHaveClass('h-[40px]')
+    expect(header).not.toHaveClass('border-b')
+    expect(header).not.toHaveClass('bg-[var(--surface-2)]')
+    expect(host.querySelector('[data-subflow-type-tag="loop"]')).toHaveTextContent('Loop')
+    expect(host.querySelector('[data-handleid="target"]')).toHaveStyle({ top: '69px' })
+    expect(host.querySelector('[data-handleid="loop-end-source"]')).toHaveStyle({ top: '69px' })
+    expect(host.querySelector('svg')).toHaveAttribute('viewBox', '-36 -36 572 372')
+    expect(host.querySelector('svg rect[fill="var(--surface-3)"]')).toBeTruthy()
+    const dropTargetOutline = host.querySelector('[data-subflow-drop-target-outline]')
+    expect(dropTargetOutline).toHaveClass(
+      'rounded-2xl',
+      'ring-[1.5px]',
+      'ring-[var(--text-secondary)]',
+      '[.subflow-node-drop-target_&]:opacity-100'
+    )
+  })
+
+  it('retracts a selected loop action swell after hover ends', () => {
+    vi.useFakeTimers()
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+
+    const { host } = mount(
+      <ReactFlowProvider>
+        <SubflowNodeView
+          id='loop-1'
+          data={{ kind: 'loop', name: 'Loop 1', width: 500, height: 300 }}
+          selected
+          isEnabled
+          isLocked={false}
+          isFocused
+          nestingLevel={0}
+          canEditWorkflow
+          onSelect={() => undefined}
+          actionBar={<div data-workflow-action-bar-swell=''>Actions</div>}
+        />
+      </ReactFlowProvider>
+    )
+
+    const actionMenuRoot = host.querySelector('[data-node-selected]')
+    expect(actionMenuRoot?.hasAttribute('data-action-menu-open')).toBe(false)
+
+    act(() => actionMenuRoot?.dispatchEvent(new Event('pointerenter')))
+    expect(actionMenuRoot?.hasAttribute('data-action-menu-open')).toBe(true)
+
+    act(() => actionMenuRoot?.dispatchEvent(new Event('pointerleave')))
+    act(() => vi.advanceTimersByTime(101))
+    act(() => vi.advanceTimersByTime(41))
+    expect(actionMenuRoot?.hasAttribute('data-action-menu-open')).toBe(false)
+  })
+
+  it('gives a nested block exclusive hover ownership over the loop action swell', () => {
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+
+    const { host } = mount(
+      <ReactFlowProvider>
+        <div>
+          <div className='react-flow__node' data-loop-node='loop-1'>
+            <SubflowNodeView
+              id='loop-1'
+              data={{ kind: 'loop', name: 'Loop 1', width: 500, height: 300 }}
+              isEnabled
+              isLocked={false}
+              isFocused={false}
+              nestingLevel={0}
+              canEditWorkflow
+              onSelect={() => undefined}
+              actionBar={<div data-workflow-action-bar-swell=''>Loop actions</div>}
+            />
+          </div>
+          <div className='react-flow__node' data-nested-node='block-1' />
+        </div>
+      </ReactFlowProvider>
+    )
+
+    const loopNode = host.querySelector('[data-loop-node="loop-1"]')
+    const actionMenuRoot = host.querySelector('[data-node-id="loop-1"]')?.parentElement
+    const nestedNode = host.querySelector('[data-nested-node="block-1"]')
+    const loopHeader = host.querySelector('[data-subflow-header]')
+
+    act(() => loopNode?.dispatchEvent(new Event('pointerenter')))
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-open')
+
+    act(() =>
+      loopNode?.dispatchEvent(
+        new MouseEvent('pointerleave', { relatedTarget: nestedNode, bubbles: false })
+      )
+    )
+    expect(actionMenuRoot).not.toHaveAttribute('data-action-menu-open')
+
+    act(() => loopNode?.dispatchEvent(new Event('pointerenter')))
+    act(() => loopHeader?.dispatchEvent(new Event('pointerover', { bubbles: true })))
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-open')
+  })
+
+  it('keeps every path coordinate bounded when animation timestamps move backward', () => {
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let nextFrameId = 0
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        nextFrameId += 1
+        callbacks.set(nextFrameId, callback)
+        return nextFrameId
+      })
+    )
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((frameId: number) => {
+        callbacks.delete(frameId)
+      })
+    )
+
+    const { host } = mount(
+      <div style={{ width: 250, height: 136 }}>
+        <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+      </div>
+    )
+    const initialTimestamp = performance.now()
+
+    for (let index = 1; index <= 24; index++) {
+      const next = callbacks.entries().next().value as [number, FrameRequestCallback] | undefined
+      expect(next).toBeDefined()
+      if (!next) break
+      callbacks.delete(next[0])
+      act(() => next[1](initialTimestamp - index * 33))
+    }
+
+    const pathData = [...host.querySelectorAll('svg path')]
+      .map((path) => path.getAttribute('d') ?? '')
+      .join(' ')
+    const coordinates = pathData.match(/-?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi)?.map(Number) ?? []
+    expect(pathData).not.toMatch(/NaN|Infinity/)
+    expect(coordinates.every(Number.isFinite)).toBe(true)
+    expect(Math.max(...coordinates.map(Math.abs))).toBeLessThanOrEqual(278.1)
+  })
+
+  it('keeps only one animation frame scheduled across synchronous geometry repaints', () => {
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let nextFrameId = 0
+    vi.stubGlobal(
+      'requestAnimationFrame',
+      vi.fn((callback: FrameRequestCallback) => {
+        nextFrameId += 1
+        callbacks.set(nextFrameId, callback)
+        return nextFrameId
+      })
+    )
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      vi.fn((frameId: number) => {
+        callbacks.delete(frameId)
+      })
+    )
+
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+    act(() => {
+      root.render(
+        <div style={{ width: 250, height: 136 }}>
+          <WorkflowBlockBorder ports={ports} hasRing={false} ringStyles='' height={136} />
+        </div>
+      )
+    })
+    expect(callbacks.size).toBe(1)
+
+    const updatedPorts = ports.map((port) =>
+      port.id === 'source' ? { ...port, color: 'var(--text-secondary)' } : port
+    )
+    act(() => {
+      root.render(
+        <div style={{ width: 250, height: 136 }}>
+          <WorkflowBlockBorder ports={updatedPorts} hasRing={false} ringStyles='' height={136} />
+        </div>
+      )
+    })
+
+    expect(callbacks.size).toBe(1)
+  })
+})
diff --git a/apps/sim/lib/workflows/blocks/workflow-block-view-interaction.test.tsx b/apps/sim/lib/workflows/blocks/workflow-block-view-interaction.test.tsx
new file mode 100644
index 00000000000..3f49bd97d86
--- /dev/null
+++ b/apps/sim/lib/workflows/blocks/workflow-block-view-interaction.test.tsx
@@ -0,0 +1,313 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import {
+  getWorkflowTypeAccent,
+  getWorkflowTypeRole,
+  hasWorkflowTypeRole,
+  WorkflowBlockView,
+  WorkflowTypeIcon,
+  WorkflowTypeTag,
+} from '@sim/workflow-renderer'
+import { createRoot, type Root } from 'react-dom/client'
+import { ReactFlowProvider } from 'reactflow'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mountedRoots = new Set<Root>()
+const mountedHosts = new Set<HTMLDivElement>()
+
+function TestIcon({ className }: { className?: string }) {
+  return <svg aria-hidden='true' className={className} />
+}
+
+function createView(
+  isRunning: boolean,
+  isEnabled = true,
+  isLocked = false,
+  isExecutionHighlighted = false
+) {
+  return (
+    <ReactFlowProvider>
+      <WorkflowBlockView
+        id='block-1'
+        type='function'
+        name='Validate Input'
+        isEnabled={isEnabled}
+        isLocked={isLocked}
+        hasRing={false}
+        ringStyles=''
+        isRunning={isRunning}
+        isExecutionHighlighted={isExecutionHighlighted}
+        Icon={TestIcon}
+        iconBgColor='var(--surface-2)'
+        horizontalHandles={true}
+        shouldShowDefaultHandles={false}
+        blockHeight={96}
+        hasContentBelowHeader={false}
+        conditionRows={[]}
+        routerRows={[]}
+        wouldCreateConnectionCycle={() => false}
+        onSelect={() => {}}
+        actionBar={<div data-workflow-action-bar-swell='' />}
+        rows={null}
+      />
+    </ReactFlowProvider>
+  )
+}
+
+function flushAnimationFrames() {
+  act(() => {
+    vi.runAllTimers()
+  })
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.stubGlobal(
+    'ResizeObserver',
+    class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+    window.setTimeout(() => callback(performance.now()), 0)
+  )
+  vi.stubGlobal('cancelAnimationFrame', (frameId: number) => window.clearTimeout(frameId))
+  window.matchMedia = ((query: string) => ({
+    matches: true,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+})
+
+afterEach(() => {
+  act(() => {
+    mountedRoots.forEach((root) => root.unmount())
+  })
+  mountedRoots.clear()
+  mountedHosts.forEach((host) => host.remove())
+  mountedHosts.clear()
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+describe('WorkflowBlockView action menu', () => {
+  it('keeps an executing block visually unselected while its actions stay available', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(true)))
+    flushAnimationFrames()
+
+    const actionMenuRoot = host.querySelector<HTMLElement>('.group.relative')
+    expect(actionMenuRoot).not.toHaveAttribute('data-node-selected')
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-ready')
+  })
+
+  it('uses the selected graphite treatment for a block in the active handoff', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(true, true, false, true)))
+    flushAnimationFrames()
+
+    const actionMenuRoot = host.querySelector<HTMLElement>('.group.relative')
+    expect(actionMenuRoot).toHaveAttribute('data-node-selected')
+    expect(actionMenuRoot).toHaveAttribute('data-execution-highlighted')
+  })
+
+  it('clears stale hover when execution stops and waits for a fresh pointer entry', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(false)))
+    const actionMenuRoot = host.querySelector<HTMLElement>('.group.relative')
+    expect(actionMenuRoot).toBeTruthy()
+
+    act(() => actionMenuRoot?.dispatchEvent(new Event('pointerenter')))
+    flushAnimationFrames()
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-ready')
+
+    act(() => root.render(createView(true)))
+    flushAnimationFrames()
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-ready')
+
+    act(() => root.render(createView(false)))
+    flushAnimationFrames()
+    expect(actionMenuRoot).not.toHaveAttribute('data-action-menu-ready')
+
+    act(() => actionMenuRoot?.dispatchEvent(new Event('pointerenter')))
+    flushAnimationFrames()
+    expect(actionMenuRoot).toHaveAttribute('data-action-menu-ready')
+  })
+
+  it('places active block-state indicators before the type tag', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() => root.render(createView(false, false, true)))
+
+    const disabledIndicator = host.querySelector('[aria-label="Disabled"]')
+    const lockedIndicator = host.querySelector('[aria-label="Locked"]')
+    const typeTag = host.querySelector('[data-workflow-type-accent="function"]')
+    expect(Array.from(typeTag?.parentElement?.children ?? [])).toEqual([
+      disabledIndicator,
+      lockedIndicator,
+      typeTag,
+    ])
+  })
+})
+
+describe('WorkflowTypeTag colors', () => {
+  it('maps core blocks through semantic workflow roles', () => {
+    expect(getWorkflowTypeRole('agent')).toBe('agentic')
+    expect(getWorkflowTypeRole('api')).toBe('interface')
+    expect(getWorkflowTypeRole('condition')).toBe('logic')
+    expect(getWorkflowTypeRole('credential')).toBe('state')
+    expect(getWorkflowTypeRole('router_v2')).toBe('flow')
+    expect(getWorkflowTypeRole('table')).toBe('records')
+    expect(getWorkflowTypeRole('a2a')).toBe('neutral')
+    expect(getWorkflowTypeRole('image_generator_v2')).toBe('generative')
+    expect(getWorkflowTypeRole('knowledge')).toBe('knowledge')
+    expect(getWorkflowTypeRole('start_trigger')).toBe('flow')
+    expect(getWorkflowTypeRole('schedule')).toBe('flow')
+    expect(getWorkflowTypeRole('generic_webhook')).toBe('interface')
+    expect(getWorkflowTypeRole('imap')).toBe('interface')
+    expect(getWorkflowTypeRole('rss')).toBe('knowledge')
+    expect(getWorkflowTypeRole('sim_workspace_event')).toBe('interface')
+
+    expect(getWorkflowTypeAccent('agent')).toEqual({ variant: 'workflow', tone: 'inverse' })
+    expect(getWorkflowTypeAccent('api')).toEqual({ variant: 'workflow', tone: 'blue' })
+    expect(getWorkflowTypeAccent('loop')).toEqual({ variant: 'workflow', tone: 'ash' })
+    expect(getWorkflowTypeAccent('parallel')).toEqual({ variant: 'workflow', tone: 'ash' })
+    expect(getWorkflowTypeAccent('router')).toEqual({ variant: 'workflow', tone: 'ash' })
+    expect(getWorkflowTypeAccent('condition')).toEqual({ variant: 'workflow', tone: 'orange' })
+    expect(getWorkflowTypeAccent('image_generator_v2')).toEqual({
+      variant: 'workflow',
+      tone: 'purple',
+    })
+    expect(getWorkflowTypeAccent('knowledge')).toEqual({ variant: 'workflow', tone: 'content' })
+  })
+
+  it('distinguishes semantic workflow types from branded providers', () => {
+    expect(hasWorkflowTypeRole('start_trigger')).toBe(true)
+    expect(hasWorkflowTypeRole('schedule')).toBe(true)
+    expect(hasWorkflowTypeRole('generic_webhook')).toBe(true)
+    expect(hasWorkflowTypeRole('table')).toBe(true)
+    expect(hasWorkflowTypeRole('circleback')).toBe(false)
+    expect(hasWorkflowTypeRole('airtable')).toBe(false)
+  })
+
+  it('renders compact workflow icons with their canonical fill and ink', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() =>
+      root.render(
+        <>
+          <WorkflowTypeIcon type='knowledge' Icon={TestIcon} />
+          <WorkflowTypeIcon type='image_generator_v2' Icon={TestIcon} />
+        </>
+      )
+    )
+
+    expect(host.querySelector('[data-workflow-type-icon="knowledge"]')).toHaveClass(
+      'bg-[#007E80]',
+      'text-[#FFFFFF]'
+    )
+    expect(host.querySelector('[data-workflow-type-icon="image_generator_v2"]')).toHaveClass(
+      'bg-[#AA00FF]',
+      'text-[#F8F8F8]'
+    )
+  })
+
+  it('uses square geometry for icon-only workflow type tags', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() =>
+      root.render(
+        <WorkflowTypeTag
+          type='table'
+          blockName='Fetch Inbox'
+          Icon={TestIcon}
+          iconBgColor='#10B981'
+        />
+      )
+    )
+
+    const tag = host.querySelector<HTMLElement>('[data-workflow-type-accent="table"]')
+    expect(tag).toHaveClass('size-5', 'p-0')
+    expect(tag?.querySelector('svg')).toHaveClass('size-[14px]')
+  })
+
+  it('uses the provider background with a contrasting shared icon and label color', () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    mountedRoots.add(root)
+    mountedHosts.add(host)
+
+    act(() =>
+      root.render(
+        <WorkflowTypeTag
+          type='airweave'
+          typeLabel='Airweave'
+          blockName='Search Collections'
+          Icon={TestIcon}
+          iconBgColor='#6366F1'
+          isIntegration
+        />
+      )
+    )
+
+    const tag = host.querySelector<HTMLElement>('[data-workflow-brand-tag]')
+    expect(tag).toHaveStyle({ background: '#6366F1' })
+    expect(tag).toHaveClass('text-[#FFFFFF]')
+    expect(tag).toHaveTextContent('Airweave')
+
+    act(() =>
+      root.render(
+        <WorkflowTypeTag
+          type='gmail'
+          typeLabel='Gmail'
+          blockName='Send Email'
+          Icon={TestIcon}
+          iconBgColor='#FFFFFF'
+          isIntegration
+        />
+      )
+    )
+
+    const lightTag = host.querySelector<HTMLElement>('[data-workflow-brand-tag]')
+    expect(lightTag).toHaveStyle({ background: '#FFFFFF' })
+    expect(lightTag).toHaveClass('text-[#000000]')
+  })
+})
diff --git a/apps/sim/lib/workflows/comparison/compare.ts b/apps/sim/lib/workflows/comparison/compare.ts
index 0b402b913f7..2bf81ad3411 100644
--- a/apps/sim/lib/workflows/comparison/compare.ts
+++ b/apps/sim/lib/workflows/comparison/compare.ts
@@ -195,7 +195,12 @@ export function generateWorkflowDiffSummary(
           newValue: currentBlock.enabled,
         })
       }
-      const blockFields = ['horizontalHandles', 'advancedMode', 'triggerMode'] as const
+      const blockFields = [
+        'horizontalHandles',
+        'advancedMode',
+        'triggerMode',
+        'errorEnabled',
+      ] as const
       for (const field of blockFields) {
         if (!!currentBlock[field] !== !!previousBlock[field]) {
           changes.push({
diff --git a/apps/sim/lib/workflows/defaults.ts b/apps/sim/lib/workflows/defaults.ts
index c326ca43a64..29407ab1eeb 100644
--- a/apps/sim/lib/workflows/defaults.ts
+++ b/apps/sim/lib/workflows/defaults.ts
@@ -94,6 +94,7 @@ function buildStartBlockState(
     enabled: true,
     horizontalHandles: true,
     advancedMode: false,
+    errorEnabled: false,
     triggerMode: false,
     height: 0,
     data: {},
diff --git a/apps/sim/lib/workflows/diff/diff-engine.ts b/apps/sim/lib/workflows/diff/diff-engine.ts
index fa6c0c44b77..75c0fc6093b 100644
--- a/apps/sim/lib/workflows/diff/diff-engine.ts
+++ b/apps/sim/lib/workflows/diff/diff-engine.ts
@@ -42,6 +42,7 @@ function hasBlockChanged(currentBlock: BlockState, proposedBlock: BlockState): b
   if (currentBlock.name !== proposedBlock.name) return true
   if (currentBlock.enabled !== proposedBlock.enabled) return true
   if (currentBlock.triggerMode !== proposedBlock.triggerMode) return true
+  if (currentBlock.errorEnabled !== proposedBlock.errorEnabled) return true
   if ((currentBlock.data?.parentId ?? null) !== (proposedBlock.data?.parentId ?? null)) return true
 
   // Compare subBlocks
@@ -73,7 +74,14 @@ function computeFieldDiff(
   const unchangedFields: string[] = []
 
   // Check basic fields
-  const fieldsToCheck = ['type', 'name', 'enabled', 'triggerMode', 'horizontalHandles'] as const
+  const fieldsToCheck = [
+    'type',
+    'name',
+    'enabled',
+    'triggerMode',
+    'horizontalHandles',
+    'errorEnabled',
+  ] as const
   for (const field of fieldsToCheck) {
     const currentValue = currentBlock[field]
     const proposedValue = proposedBlock[field]
diff --git a/apps/sim/lib/workflows/edges/workflow-edge-view-mount.test.tsx b/apps/sim/lib/workflows/edges/workflow-edge-view-mount.test.tsx
new file mode 100644
index 00000000000..ef55b0a861d
--- /dev/null
+++ b/apps/sim/lib/workflows/edges/workflow-edge-view-mount.test.tsx
@@ -0,0 +1,154 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { WorkflowEdgeView, type WorkflowEdgeViewProps } from '@sim/workflow-renderer'
+import { createRoot, type Root } from 'react-dom/client'
+import { Position } from 'reactflow'
+import { afterEach, describe, expect, it } from 'vitest'
+
+const mountedHosts = new Set<HTMLDivElement>()
+const mountedRoots = new Set<Root>()
+
+function renderEdge(overrides: Partial<WorkflowEdgeViewProps> = {}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  mountedHosts.add(host)
+
+  const root = createRoot(host)
+  mountedRoots.add(root)
+  act(() => {
+    root.render(
+      <WorkflowEdgeView
+        id='start-to-next'
+        source='start'
+        target='next'
+        sourceX={0}
+        sourceY={40}
+        targetX={160}
+        targetY={40}
+        sourcePosition={Position.Right}
+        targetPosition={Position.Left}
+        sourceHandle='source'
+        diffStatus={null}
+        runStatus={undefined}
+        isPreviewRun={false}
+        {...overrides}
+      />
+    )
+  })
+
+  return {
+    host,
+    path: host.querySelector<SVGPathElement>('.react-flow__edge-path'),
+    pulseLayers: host.querySelectorAll<SVGPathElement>('[data-workflow-edge-pulse-layer]'),
+    traversingPath: host.querySelector<SVGPathElement>('[data-workflow-edge-traversing]'),
+    pulseGlow: host.querySelector<SVGPathElement>('[data-workflow-edge-pulse-glow]'),
+  }
+}
+
+afterEach(() => {
+  act(() => {
+    for (const root of mountedRoots) root.unmount()
+  })
+  mountedRoots.clear()
+  for (const host of mountedHosts) {
+    host.remove()
+  }
+  mountedHosts.clear()
+})
+
+describe('WorkflowEdgeView', () => {
+  it('shows taken edges as a solid graphite path while the workflow is running', () => {
+    const { path } = renderEdge({ runStatus: 'success', isWorkflowRunning: true })
+
+    expect(path?.style.stroke).toBe('var(--text-secondary)')
+    expect(path?.style.strokeWidth).toBe('2')
+    expect(path?.style.opacity).toBe('1')
+  })
+
+  it('mutes edges that have not been taken during execution', () => {
+    const { host, path } = renderEdge({ isWorkflowRunning: true })
+
+    expect(path?.style.stroke).toBe('var(--workflow-edge)')
+    expect(path?.style.strokeWidth).toBe('1.5')
+    expect(path?.style.opacity).toBe('0.52')
+    expect(host.querySelector('[data-workflow-edge-state="waiting"]')).not.toBeNull()
+  })
+
+  it('moves a reduced-motion-safe signal toward the currently active target', () => {
+    const { host, pulseLayers, traversingPath, pulseGlow } = renderEdge({
+      runStatus: 'success',
+      isWorkflowRunning: true,
+      isTargetActive: true,
+    })
+
+    expect(host.querySelector('[data-workflow-edge-state="traversing"]')).not.toBeNull()
+    expect(traversingPath).not.toBeNull()
+    expect(pulseGlow).not.toBeNull()
+    expect(pulseLayers).toHaveLength(4)
+    expect(traversingPath?.classList.contains('motion-reduce:hidden')).toBe(true)
+    expect(traversingPath?.getAttribute('stroke-dasharray')).toBe('0.07 2.13')
+    expect(traversingPath?.getAttribute('stroke')).toBe('var(--white)')
+    expect(pulseGlow?.getAttribute('stroke-dasharray')).toBe('0.32 1.88')
+    expect(pulseGlow?.getAttribute('stroke-width')).toBe('6')
+    expect(traversingPath?.querySelector('animate')?.getAttribute('repeatCount')).toBe('indefinite')
+    expect(traversingPath?.querySelector('animate')?.getAttribute('from')).toBe('-0.125')
+    expect(traversingPath?.querySelector('animate')?.getAttribute('to')).toBe('-2.325')
+    expect(traversingPath?.querySelector('animate')?.getAttribute('dur')).toBe('1100ms')
+    expect(
+      Array.from(pulseLayers).map((layer) => [
+        layer.getAttribute('data-workflow-edge-pulse-layer'),
+        layer.getAttribute('stroke-dasharray'),
+        layer.getAttribute('opacity'),
+      ])
+    ).toEqual([
+      ['tail', '0.32 1.88', '0.22'],
+      ['shoulder', '0.23 1.97', '0.32'],
+      ['body', '0.15 2.05', '0.6'],
+      ['core', '0.07 2.13', '1'],
+    ])
+  })
+
+  it('settles a taken edge when its target is no longer active', () => {
+    const { host, traversingPath } = renderEdge({
+      runStatus: 'success',
+      isWorkflowRunning: true,
+      isTargetActive: false,
+    })
+
+    expect(host.querySelector('[data-workflow-edge-state="traversed"]')).not.toBeNull()
+    expect(traversingPath).toBeNull()
+  })
+
+  it('restores the canvas success color after execution stops', () => {
+    const { path } = renderEdge({ runStatus: 'success', isWorkflowRunning: false })
+
+    expect(path?.style.stroke).toBe('var(--border-success)')
+  })
+
+  it('keeps execution errors distinct during an active run', () => {
+    const { path } = renderEdge({ runStatus: 'error', isWorkflowRunning: true })
+
+    expect(path?.style.stroke).toBe('var(--text-error)')
+  })
+
+  it('mutes an untaken error branch during execution', () => {
+    const { path } = renderEdge({
+      sourceHandle: 'error',
+      isWorkflowRunning: true,
+    })
+
+    expect(path?.style.stroke).toBe('var(--workflow-edge)')
+    expect(path?.style.opacity).toBe('0.52')
+  })
+
+  it('restores the error branch color after execution', () => {
+    const { path } = renderEdge({
+      sourceHandle: 'error',
+      isWorkflowRunning: false,
+    })
+
+    expect(path?.style.stroke).toBe('var(--text-error)')
+  })
+})
diff --git a/apps/sim/lib/workflows/persistence/utils.test.ts b/apps/sim/lib/workflows/persistence/utils.test.ts
index e0fb92ded00..7d1156ee615 100644
--- a/apps/sim/lib/workflows/persistence/utils.test.ts
+++ b/apps/sim/lib/workflows/persistence/utils.test.ts
@@ -362,6 +362,7 @@ describe('Database Helpers', () => {
         name: 'Start Block',
         position: { x: 100, y: 100 },
         enabled: true,
+        errorEnabled: false,
         horizontalHandles: true,
         height: 150,
         subBlocks: { input: { id: 'input', type: 'short-input' as const, value: 'test' } },
@@ -369,6 +370,7 @@ describe('Database Helpers', () => {
         data: { parentId: undefined, extent: undefined, width: 350 },
         advancedMode: false,
         triggerMode: false,
+        locked: undefined,
       })
 
       expect(result?.edges[0]).toEqual({
diff --git a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
index 4507f23c0dc..a4a3cb23539 100644
--- a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
+++ b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
@@ -1,4 +1,5 @@
 import { isRecordLike, sortObjectKeysDeep } from '@sim/utils/object'
+import { isPositionedSourceHandle } from '@sim/workflow-types/workflow'
 import type { Edge } from 'reactflow'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { sanitizeWorkflowForSharing } from '@/lib/workflows/credentials/credential-extractor'
@@ -30,6 +31,7 @@ interface CopilotBlockState {
   nestedNodes?: Record<string, CopilotBlockState>
   enabled: boolean
   advancedMode?: boolean
+  errorEnabled?: boolean
   triggerMode?: boolean
 }
 
@@ -477,7 +479,9 @@ function extractConnectionsForBlock(
 
   // Group by source handle (converting to simple format)
   for (const edge of outgoingEdges) {
-    let handle = edge.sourceHandle || 'source'
+    let handle = isPositionedSourceHandle(edge.sourceHandle)
+      ? 'source'
+      : edge.sourceHandle || 'source'
 
     // Convert internal UUID handles to simple format (if, else-if-0, route-0, etc.)
     handle = convertToSimpleHandle(handle, blockId, block)
@@ -606,6 +610,7 @@ export function sanitizeForCopilot(
     if (connections) result.connections = connections
     if (Object.keys(nestedNodes).length > 0) result.nestedNodes = nestedNodes
     if (block.advancedMode !== undefined) result.advancedMode = block.advancedMode
+    if (block.errorEnabled !== undefined) result.errorEnabled = block.errorEnabled
     if (block.triggerMode !== undefined) result.triggerMode = block.triggerMode
 
     // Note: outputs, position, height, layout, horizontalHandles are intentionally excluded
diff --git a/apps/sim/lib/workflows/subblocks/display.ts b/apps/sim/lib/workflows/subblocks/display.ts
index 17689f68818..c164ed82a84 100644
--- a/apps/sim/lib/workflows/subblocks/display.ts
+++ b/apps/sim/lib/workflows/subblocks/display.ts
@@ -311,6 +311,18 @@ export const getDisplayValue = (value: unknown): string => {
   return stringValue.trim().length > 0 ? stringValue : '-'
 }
 
+/**
+ * Whether a collapsed-node row has a meaningful value to display.
+ * Rows whose value renders as the empty placeholder are hidden from the
+ * node preview so blocks only surface configured fields.
+ * `webhookUrlDisplay*` rows derive their value from the block id rather than
+ * the stored value, so they always count as displayable.
+ */
+export function hasDisplayableRowValue(subBlock: SubBlockConfig, rawValue: unknown): boolean {
+  if (subBlock.id.startsWith('webhookUrlDisplay')) return true
+  return getDisplayValue(rawValue) !== '-'
+}
+
 /**
  * Workflow id -> metadata lookup for the workflow selector resolvers.
  * `ready` gates resolution so missing entries only render as deleted once
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/execution/store.ts b/apps/sim/stores/execution/store.ts
index 2e3b21fae95..886a341a9a7 100644
--- a/apps/sim/stores/execution/store.ts
+++ b/apps/sim/stores/execution/store.ts
@@ -67,9 +67,10 @@ export const useExecutionStore = create<ExecutionState & ExecutionActions>()((se
   },
 
   setActiveBlocks: (workflowId, blockIds) => {
+    const activeBlockIds = new Set(blockIds)
     set({
       workflowExecutions: updatedMap(get().workflowExecutions, workflowId, {
-        activeBlockIds: new Set(blockIds),
+        activeBlockIds,
       }),
     })
   },
diff --git a/apps/sim/stores/modals/search/types.ts b/apps/sim/stores/modals/search/types.ts
index a8e1e9022c1..c3e8feb50f6 100644
--- a/apps/sim/stores/modals/search/types.ts
+++ b/apps/sim/stores/modals/search/types.ts
@@ -86,8 +86,8 @@ export type SearchSection = (typeof SEARCH_SECTIONS)[number]
  */
 export interface PendingConnect {
   source: { nodeId: string; handleId: string }
-  screenX: number
-  screenY: number
+  /** Canvas-space point where the connection was released. */
+  position: { x: number; y: number }
 }
 
 /**
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/utils.test.ts b/apps/sim/stores/workflows/utils.test.ts
index 78c602d2954..2b8fa320b8a 100644
--- a/apps/sim/stores/workflows/utils.test.ts
+++ b/apps/sim/stores/workflows/utils.test.ts
@@ -9,7 +9,7 @@ import {
 import type { Edge } from 'reactflow'
 import { describe, expect, it } from 'vitest'
 import { normalizeName } from '@/executor/constants'
-import { getUniqueBlockName, regenerateBlockIds } from './utils'
+import { filterNewEdges, getUniqueBlockName, regenerateBlockIds } from './utils'
 
 describe('normalizeName', () => {
   it.concurrent('should convert to lowercase', () => {
@@ -107,6 +107,33 @@ describe('normalizeName', () => {
   })
 })
 
+describe('filterNewEdges', () => {
+  const makeEdge = (id: string, sourceHandle: string, targetHandle: string): Edge => ({
+    id,
+    source: 'source',
+    target: 'target',
+    sourceHandle,
+    targetHandle,
+  })
+
+  it('treats legacy positioned handles as the same logical connection', () => {
+    const currentEdges = [makeEdge('legacy', 'source-left', 'target-top')]
+    const candidates = [
+      makeEdge('current', 'source-right', 'target-left'),
+      makeEdge('legacy-vertical', 'source-bottom', 'target-bottom'),
+    ]
+
+    expect(filterNewEdges(candidates, currentEdges)).toEqual([])
+  })
+
+  it('keeps semantic routing handles distinct', () => {
+    const currentEdges = [makeEdge('true-route', 'condition-true', 'target-left')]
+    const candidates = [makeEdge('false-route', 'condition-false', 'target-left')]
+
+    expect(filterNewEdges(candidates, currentEdges)).toEqual(candidates)
+  })
+})
+
 describe('getUniqueBlockName', () => {
   it('should return "Start" for starter blocks', () => {
     expect(getUniqueBlockName('Start', {})).toBe('Start')
diff --git a/apps/sim/stores/workflows/workflow/store.test.ts b/apps/sim/stores/workflows/workflow/store.test.ts
index 43e79b4cac5..c50a1e219bb 100644
--- a/apps/sim/stores/workflows/workflow/store.test.ts
+++ b/apps/sim/stores/workflows/workflow/store.test.ts
@@ -1045,6 +1045,24 @@ describe('workflow store', () => {
     })
   })
 
+  describe('setBlockErrorEnabled', () => {
+    it('updates the persisted Error output flag', () => {
+      addBlock('function-1', 'function', 'Function 1', { x: 0, y: 0 })
+
+      useWorkflowStore.getState().setBlockErrorEnabled('function-1', true)
+
+      expect(useWorkflowStore.getState().blocks['function-1'].errorEnabled).toBe(true)
+    })
+
+    it('ignores an unknown block id', () => {
+      const before = useWorkflowStore.getState().blocks
+
+      useWorkflowStore.getState().setBlockErrorEnabled('missing', true)
+
+      expect(useWorkflowStore.getState().blocks).toEqual(before)
+    })
+  })
+
   describe('syncDynamicHandleSubblockValue', () => {
     it('should sync condition topology values into the workflow store', () => {
       addBlock('condition-1', 'condition', 'Condition 1', { x: 0, y: 0 })
@@ -1786,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 740bf790eaf..068df7860f4 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -786,6 +786,49 @@ 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]
+          if (!block) return state
+          return {
+            blocks: {
+              ...state.blocks,
+              [id]: {
+                ...block,
+                errorEnabled,
+              },
+            },
+            edges: [...state.edges],
+            loops: { ...state.loops },
+          }
+        })
+        get().updateLastSaved()
+      },
+
       setBlockAdvancedMode: (id: string, advancedMode: boolean) => {
         set((state) => ({
           blocks: {
diff --git a/apps/sim/stores/workflows/workflow/types.ts b/apps/sim/stores/workflows/workflow/types.ts
index 1afca6311a1..3828eca4c9b 100644
--- a/apps/sim/stores/workflows/workflow/types.ts
+++ b/apps/sim/stores/workflows/workflow/types.ts
@@ -59,6 +59,7 @@ export interface WorkflowActions {
   batchToggleHandles: (ids: string[]) => void
   batchAddEdges: (edges: Edge[], options?: { skipValidation?: boolean }) => void
   batchRemoveEdges: (ids: string[]) => void
+  setBlockErrorEnabled: (id: string, errorEnabled: boolean) => void
   clear: () => Partial<WorkflowState>
   updateLastSaved: () => void
   setBlockEnabled: (id: string, enabled: boolean) => void
@@ -71,6 +72,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/bun.lock b/bun.lock
index fdedeaa89ec..7bb5f09b30c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -658,6 +658,7 @@
         "@sim/emcn": "workspace:*",
         "@sim/tsconfig": "workspace:*",
         "@sim/utils": "workspace:*",
+        "@sim/workflow-types": "workspace:*",
         "@types/react": "^19",
         "react": "19.2.4",
         "reactflow": "^11.11.4",
@@ -668,6 +669,7 @@
       "peerDependencies": {
         "@sim/emcn": "workspace:*",
         "@sim/utils": "workspace:*",
+        "@sim/workflow-types": "workspace:*",
         "react": "^19",
         "reactflow": "^11.11.4",
         "remark-breaks": "^4.0.0",
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 1893a682403..ae0ae7c4862 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -39,6 +39,13 @@ const buttonVariants = cva(
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
           'bg-[var(--brand-accent)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--brand-accent-hover)] dark:bg-[var(--brand-accent)] dark:hover-hover:bg-[var(--brand-accent-hover)] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
+        /* Fixed brand pairs, matching the workflow type tags rather than the
+           theme tokens — `graphite` is the Agent tag's fill and ink. Both hold
+           one value across modes, so neither takes a `dark:` override. */
+        graphite:
+          'bg-[#3B3B3B] text-[#F8F8F8] hover-hover:text-[#F8F8F8] hover-hover:brightness-125',
+        graphiteSubtle:
+          'bg-[#E6E6E6] text-[#3B3B3B] hover-hover:text-[#3B3B3B] hover-hover:brightness-[0.96]',
         ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
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..dc5c5755482 100644
--- a/packages/emcn/src/components/chip-input/chip-input.tsx
+++ b/packages/emcn/src/components/chip-input/chip-input.tsx
@@ -27,9 +27,11 @@
  */
 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. */
@@ -38,6 +40,12 @@ export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
   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`). */
@@ -56,6 +64,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       icon: Icon,
       endAdornment,
       error,
+      surface = 'field',
       disabled,
       type = 'text',
       ...props
@@ -64,8 +73,10 @@ 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
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.tsx b/packages/emcn/src/components/chip-tag/chip-tag.tsx
index c19fbba8277..479a27d6132 100644
--- a/packages/emcn/src/components/chip-tag/chip-tag.tsx
+++ b/packages/emcn/src/components/chip-tag/chip-tag.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import type { ComponentType, HTMLAttributes, MouseEventHandler, ReactNode } from 'react'
+import type {
+  ComponentType,
+  CSSProperties,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactNode,
+} from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 
@@ -24,6 +30,30 @@ import { cn } from '../../lib/cn'
  *   inverse-surface convention one step softer than near-black. For eyebrow
  *   kickers and emphasis labels that should read as a solid chip rather than a
  *   bordered one.
+ * - `workflow` — the brand type cue for workflow cards. Pair with `tone`; the
+ *   icon inherits the label colour and remains the non-colour identifier.
+ *
+ *   These are fixed brand values, not derived ones — do not "correct" a hex
+ *   for contrast or gamut. Labels use `#F8F8F8` on dark semantic fills and
+ *   `#1A1A1A` on light fills; the content tone uses true white (`#FFFFFF`) on
+ *   `#007E80`. `#3B3B3B` appears only as `inverse`'s fill, never as text. One
+ *   value serves both modes; the tones carry no `dark:` overrides.
+ *
+ *   Contrast against the paired ink varies, and two pairs sit under WCAG AA
+ *   (4.5:1) for normal text: `green` at 3.98:1 and `orange` at 3.15:1. These
+ *   are brand decisions rather than oversights.
+ *   Because the label is short and always duplicated by an icon and the block
+ *   name beside it, the tag is a redundant cue rather than the sole carrier of
+ *   the information — but do not reuse these pairings anywhere the label
+ *   stands alone.
+ *
+ *   `neutral` is the only tone that is not a solid fill — neutral/system blocks
+ *   and unmapped block types read as white, outlined slots rather than as one
+ *   more colour in the set. Every other tone is fill-only, so it is also the
+ *   only one whose edge depends on the ring rather than on the fill itself.
+ * - `brand` — a provider-owned integration colour supplied through
+ *   `brandColor`. Pair with `brandForeground` so both the icon and label use
+ *   the same contrast rule as integration tiles elsewhere in the product.
  * - `invite` — recipient pill used in invite/sharing flows. Borrows the chip
  *   family's icon gap (`gap-1.5`), `--text-body` label, and `--text-icon`
  *   leading/trailing icons; pairs with the `invalid` boolean to flip to an
@@ -39,10 +69,27 @@ const chipTagVariants = cva(
           '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)]',
         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',
         invite:
           'h-5 gap-1.5 px-1 border border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-body)] dark:bg-[var(--surface-4)]',
       },
       invalid: { true: '', false: '' },
+      tone: {
+        neutral: '',
+        inverse: '',
+        ash: '',
+        orange: '',
+        blue: '',
+        green: '',
+        yellow: '',
+        purple: '',
+        content: '',
+      },
+      brandForeground: {
+        light: '',
+        dark: '',
+      },
     },
     compoundVariants: [
       {
@@ -50,8 +97,32 @@ const chipTagVariants = cva(
         invalid: true,
         className: 'bg-[var(--badge-error-bg)] text-[var(--text-error)] border-transparent',
       },
+      {
+        variant: 'workflow',
+        tone: 'neutral',
+        /* The only outlined tone. Neutral/system and unmapped block types read
+           as empty slots rather than a colour, so the fill is plain white and
+           an inset ring — not a border — carries the edge, keeping the tag the
+           same size as every filled sibling. */
+        className: 'bg-[#FFFFFF] text-[#1A1A1A] shadow-[inset_0_0_0_1px_#C3C3C3]',
+      },
+      { variant: 'workflow', tone: 'inverse', className: 'bg-[#3B3B3B] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'ash', className: 'bg-[#E6E6E6] text-[#1A1A1A]' },
+      { variant: 'workflow', tone: 'orange', className: 'bg-[#FF4C00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'blue', className: 'bg-[#0062FF] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'green', className: 'bg-[#188F00] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'yellow', className: 'bg-[#FFEF08] text-[#1A1A1A]' },
+      { variant: 'workflow', tone: 'purple', className: 'bg-[#AA00FF] text-[#F8F8F8]' },
+      { variant: 'workflow', tone: 'content', className: 'bg-[#007E80] text-[#FFFFFF]' },
+      { variant: 'brand', brandForeground: 'light', className: 'text-[#FFFFFF]' },
+      { variant: 'brand', brandForeground: 'dark', className: 'text-[#000000]' },
     ],
-    defaultVariants: { variant: 'mono', invalid: false },
+    defaultVariants: {
+      variant: 'mono',
+      invalid: false,
+      tone: 'neutral',
+      brandForeground: 'light',
+    },
   }
 )
 
@@ -65,6 +136,8 @@ export interface ChipTagProps
     VariantProps<typeof chipTagVariants> {
   /** Tag content — typically a short label, number, percentage, or recipient. */
   children: ReactNode
+  /** Dynamic provider fill used by the `brand` variant. */
+  brandColor?: CSSProperties['background']
   /** Icon component rendered before the label. Non-interactive. */
   leftIcon?: ChipTagIcon
   /**
@@ -100,8 +173,12 @@ export interface ChipTagProps
 export function ChipTag({
   variant,
   invalid,
+  tone,
+  brandForeground,
+  brandColor,
   className,
   children,
+  style,
   leftIcon: LeftIcon,
   rightIcon: RightIcon,
   onRightIconClick,
@@ -109,11 +186,22 @@ export function ChipTag({
   rightIconDisabled,
   ...props
 }: ChipTagProps) {
-  const iconClass = cn('size-[14px] flex-shrink-0', !invalid && 'text-[var(--text-icon)]')
+  /* `workflow` icons inherit the tone's tinted label colour. The shared
+     `--text-icon` gray is tuned for this component's light surfaces and would
+     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)]'
+  )
   const interactive = RightIcon != null && onRightIconClick != null
+  const resolvedStyle = variant === 'brand' ? { ...style, background: brandColor } : style
 
   return (
-    <span className={cn(chipTagVariants({ variant, invalid }), className)} {...props}>
+    <span
+      className={cn(chipTagVariants({ variant, invalid, tone, brandForeground }), className)}
+      style={resolvedStyle}
+      {...props}
+    >
       {LeftIcon ? <LeftIcon className={iconClass} /> : null}
       {children}
       {RightIcon ? (
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 8c158a7eb13..4c0880c4abd 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -53,7 +53,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 fb87f1684e9..fcd2ddb3726 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -14,7 +14,7 @@ import {
   chipContentIconClass,
   chipContentLabelClass,
   chipFilledFillTokens,
-  chipGeometryClass,
+  chipGeometryWithoutRadiusClass,
   chipPrimaryFillTokens,
 } from './chip-chrome'
 
@@ -50,7 +50,7 @@ import {
  * silently diverging raw consumers (e.g. an active row that darkens with `Chip` but not with raw `chipVariants`).
  */
 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: {
@@ -66,6 +66,12 @@ 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: [
       {
@@ -89,7 +95,12 @@ const chipVariants = cva(
         className: 'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-6)]',
       },
     ],
-    defaultVariants: { variant: 'default', active: false, fullWidth: false },
+    defaultVariants: {
+      variant: 'default',
+      active: false,
+      fullWidth: false,
+      groupPosition: 'standalone',
+    },
   }
 )
 
@@ -107,6 +118,8 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
   variant?: ChipVariant
   /** Icon component rendered before the label. */
   leftIcon?: ChipIcon
+  /** Custom content rendered before the label. Takes precedence over `leftIcon`. */
+  leftAdornment?: ReactNode
   /** Icon component rendered after the label. */
   rightIcon?: ChipIcon
   children?: ReactNode
@@ -120,6 +133,7 @@ interface ChipBaseProps extends Omit<VariantProps<typeof chipVariants>, 'variant
 function ChipContent({
   variant,
   leftIcon: LeftIcon,
+  leftAdornment,
   rightIcon: RightIcon,
   children,
 }: ChipBaseProps) {
@@ -128,7 +142,7 @@ function ChipContent({
   const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
   return (
     <>
-      {LeftIcon ? <LeftIcon className={iconClass} /> : null}
+      {leftAdornment ?? (LeftIcon ? <LeftIcon className={iconClass} /> : null)}
       {children != null && children !== false ? (
         <span className={labelClass}>{children}</span>
       ) : null}
@@ -145,17 +159,34 @@ interface ChipProps
  * @example <Chip leftIcon={Credit} onClick={openBilling}>{balance}</Chip>
  */
 const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
-  { className, variant, active, fullWidth, leftIcon, rightIcon, children, type, ...props },
+  {
+    className,
+    variant,
+    active,
+    fullWidth,
+    groupPosition,
+    leftIcon,
+    leftAdornment,
+    rightIcon,
+    children,
+    type,
+    ...props
+  },
   ref
 ) {
   return (
     <button
       ref={ref}
       type={type ?? 'button'}
-      className={cn(chipVariants({ variant, active, fullWidth }), className)}
+      className={cn(chipVariants({ variant, active, fullWidth, groupPosition }), className)}
       {...props}
     >
-      <ChipContent variant={variant} leftIcon={leftIcon} rightIcon={rightIcon}>
+      <ChipContent
+        variant={variant}
+        leftIcon={leftIcon}
+        leftAdornment={leftAdornment}
+        rightIcon={rightIcon}
+      >
         {children}
       </ChipContent>
     </button>
@@ -171,16 +202,32 @@ interface ChipLinkProps
  * @example <ChipLink href='/integrations' active={isCurrent} leftIcon={ArrowLeft}>Integrations</ChipLink>
  */
 const ChipLink = forwardRef<HTMLAnchorElement, ChipLinkProps>(function ChipLink(
-  { className, variant, active, fullWidth, leftIcon, 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 variant={variant} leftIcon={leftIcon} rightIcon={rightIcon}>
+      <ChipContent
+        variant={variant}
+        leftIcon={leftIcon}
+        leftAdornment={leftAdornment}
+        rightIcon={rightIcon}
+      >
         {children}
       </ChipContent>
     </Link>
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 41ccc3b7772..c17691cc07a 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -17,6 +17,10 @@ import {
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown, Loader, Search } from '../../icons'
 import { cn } from '../../lib/cn'
+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'
 
@@ -148,6 +152,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'
 }
 
 /**
@@ -190,6 +196,7 @@ const Combobox = memo(
         groups,
         maxHeight = 192,
         emptyMessage,
+        appearance = 'default',
         ...props
       },
       ref
@@ -615,6 +622,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}
@@ -630,6 +638,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'
                         )}
                       >
@@ -637,7 +646,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>
@@ -648,12 +664,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'
                         )}
                       />
@@ -689,6 +710,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'
                       )}
                     />
@@ -705,9 +728,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={
@@ -765,7 +790,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
@@ -839,8 +864,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'),
                                   'hover-hover:bg-[var(--surface-active)]',
                                   (isHighlighted || isSelected) && 'bg-[var(--surface-active)]',
                                   option.disabled && 'cursor-not-allowed opacity-50'
@@ -851,7 +879,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}
@@ -879,13 +914,23 @@ 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'),
                             'hover-hover:bg-[var(--surface-active)]',
                             !multiSelectValues?.length && 'bg-[var(--surface-active)]'
                           )}
                         >
-                          <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>
@@ -913,8 +958,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'),
                               'hover-hover:bg-[var(--surface-active)]',
                               (isHighlighted || isSelected) && 'bg-[var(--surface-active)]',
                               option.disabled && 'cursor-not-allowed opacity-50'
@@ -923,7 +971,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 a9af709e481..f27b979f8ca 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'
@@ -94,8 +95,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
@@ -214,7 +217,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 transition-colors focus:bg-[var(--surface-active)] 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 transition-colors focus:bg-[var(--surface-active)] 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 9a39315744c..9ecd0bb83e3 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -94,7 +94,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,
@@ -172,6 +177,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'
@@ -206,6 +217,7 @@ export {
   isFocusVisible,
   isTextClipped,
   Tooltip,
+  type UseFloatingTooltipOptions,
   useFloatingTooltip,
   useIsOverflowing,
 } from './tooltip/tooltip'
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..7b50f096899
--- /dev/null
+++ b/packages/emcn/src/components/popover/popover.test.tsx
@@ -0,0 +1,108 @@
+/**
+ * @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('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 0cca2b5c73d..64ebb3deed3 100644
--- a/packages/emcn/src/components/popover/popover.tsx
+++ b/packages/emcn/src/components/popover/popover.tsx
@@ -55,6 +55,9 @@ import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { createPortal } from 'react-dom'
 import { Check, ChevronLeft, ChevronRight, Search } from '../../icons'
 import { cn } from '../../lib/cn'
+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<
@@ -409,6 +414,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
@@ -449,6 +460,7 @@ const PopoverContent = React.forwardRef<
       sideOffset,
       collisionPadding = 8,
       border = false,
+      appearance = 'default',
       avoidCollisions = true,
       showArrow = false,
       arrowClassName,
@@ -608,12 +620,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={{
@@ -632,7 +651,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}
@@ -672,23 +691,106 @@ 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
+}
 
 /**
- * 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', 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 flex-1 overflow-auto overscroll-contain py-1.5',
+            thinScrollbarClass,
+            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'
+        />
+        <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..8f9445004ab
--- /dev/null
+++ b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.test.tsx
@@ -0,0 +1,46 @@
+/**
+ * @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')
+  })
+})
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..e88428b083a
--- /dev/null
+++ b/packages/emcn/src/components/scroll-edge-fade/scroll-edge-fade.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import { cn } from '../../lib/cn'
+
+export type ScrollEdgeFadeVariant = '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.
+ */
+export function ScrollEdgeFade({
+  className,
+  position,
+  visible = true,
+  variant = 'panel',
+  ...props
+}: ScrollEdgeFadeProps) {
+  const isTop = position === 'top'
+
+  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' : '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 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 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 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',
+          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/components/tooltip/tooltip.tsx b/packages/emcn/src/components/tooltip/tooltip.tsx
index 247b3974c1f..a305ce02657 100644
--- a/packages/emcn/src/components/tooltip/tooltip.tsx
+++ b/packages/emcn/src/components/tooltip/tooltip.tsx
@@ -81,6 +81,14 @@ const HIDDEN_STATE: FloatingTooltipState = {
   alignY: 'below',
 }
 
+export interface UseFloatingTooltipOptions {
+  /**
+   * Prefer placing the bubble above the cursor. Still flips below when the
+   * pointer is too close to the top of the viewport.
+   */
+  preferAbove?: boolean
+}
+
 /**
  * Drives a pointer-reactive floating tooltip. `canShow` is queried on every
  * gesture with the event target, letting the caller gate the tooltip on its own
@@ -88,12 +96,17 @@ const HIDDEN_STATE: FloatingTooltipState = {
  * a {@link FloatingTooltip} and a stable set of {@link FloatingTooltipHandlers}
  * to spread onto the trigger element.
  */
-export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
+export function useFloatingTooltip(
+  canShow: (target: HTMLElement) => boolean,
+  options: UseFloatingTooltipOptions = {}
+): {
   state: FloatingTooltipState
   handlers: FloatingTooltipHandlers
 } {
   const canShowRef = React.useRef(canShow)
   canShowRef.current = canShow
+  const preferAboveRef = React.useRef(options.preferAbove === true)
+  preferAboveRef.current = options.preferAbove === true
 
   const lastPointerRef = React.useRef<PointerSnapshot | null>(null)
   const velocityRef = React.useRef({ x: 0, magnitude: 0 })
@@ -114,7 +127,10 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
 
   const handlers = React.useMemo<FloatingTooltipHandlers>(() => {
     const apply = (clientX: number, clientY: number, motion: TooltipMotion) => {
-      const next = { ...getTooltipPosition(clientX, clientY), ...motion }
+      const next = {
+        ...getTooltipPosition(clientX, clientY, preferAboveRef.current),
+        ...motion,
+      }
       setState((current) =>
         current.visible &&
         current.x === next.x &&
@@ -187,7 +203,7 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
         if (!isFocusVisible(target)) return
         triggerRef.current = target
         const rect = target.getBoundingClientRect()
-        showFromElement(rect.left + rect.width / 2, rect.bottom)
+        showFromElement(rect.left + rect.width / 2, preferAboveRef.current ? rect.top : rect.bottom)
       },
       onBlur: hide,
     }
@@ -358,7 +374,10 @@ export const FloatingTooltip = React.memo(function FloatingTooltip({
         translate: getTooltipTranslate(state, offset),
         scale: `${state.scaleX} ${state.scaleY}`,
         transform: `skew(${state.skew}deg)`,
-        transformOrigin: state.alignX === 'left' ? '12px 12px' : 'calc(100% - 12px) 12px',
+        transformOrigin: [
+          state.alignX === 'left' ? '12px' : 'calc(100% - 12px)',
+          state.alignY === 'below' ? '12px' : 'calc(100% - 12px)',
+        ].join(' '),
       }}
     >
       {children ?? <span className='block whitespace-normal break-words text-left'>{label}</span>}
@@ -369,14 +388,22 @@ export const FloatingTooltip = React.memo(function FloatingTooltip({
 
 function getTooltipPosition(
   clientX: number,
-  clientY: number
+  clientY: number,
+  preferAbove = false
 ): Pick<FloatingTooltipState, 'x' | 'y' | 'alignX' | 'alignY'> {
   if (typeof window === 'undefined') {
-    return { x: Math.round(clientX), y: Math.round(clientY), alignX: 'left', alignY: 'below' }
+    return {
+      x: Math.round(clientX),
+      y: Math.round(clientY),
+      alignX: 'left',
+      alignY: preferAbove ? 'above' : 'below',
+    }
   }
 
   const alignX = window.innerWidth - clientX < EDGE_THRESHOLD ? 'right' : 'left'
-  const alignY = window.innerHeight - clientY < EDGE_THRESHOLD / 2 ? 'above' : 'below'
+  const nearTop = clientY < EDGE_THRESHOLD / 2
+  const nearBottom = window.innerHeight - clientY < EDGE_THRESHOLD / 2
+  const alignY = preferAbove ? (nearTop ? 'below' : 'above') : nearBottom ? 'above' : 'below'
 
   return {
     x: Math.round(clamp(clientX, EDGE_GUTTER, window.innerWidth - EDGE_GUTTER)),
@@ -435,6 +462,11 @@ interface RootProps {
   children: React.ReactNode
   /** Accepted for API compatibility; the floating tooltip has no hover delay. */
   delayDuration?: number
+  /**
+   * Prefer the bubble above the cursor (e.g. action bars sitting on top of a card).
+   * Still flips below when the pointer is too close to the top of the viewport.
+   */
+  preferAbove?: boolean
 }
 
 /**
@@ -451,9 +483,9 @@ interface RootProps {
  * </Tooltip.Root>
  * ```
  */
-function Root({ children }: RootProps) {
+function Root({ children, preferAbove = false }: RootProps) {
   const contentId = React.useId()
-  const { state, handlers } = useFloatingTooltip(ALWAYS_SHOW)
+  const { state, handlers } = useFloatingTooltip(ALWAYS_SHOW, { preferAbove })
   const value = React.useMemo<TooltipContextValue>(
     () => ({ state, handlers, contentId }),
     [state, handlers, contentId]
diff --git a/packages/realtime-protocol/src/constants.ts b/packages/realtime-protocol/src/constants.ts
index 37074c5a807..1b91d82271e 100644
--- a/packages/realtime-protocol/src/constants.ts
+++ b/packages/realtime-protocol/src/constants.ts
@@ -1,9 +1,11 @@
 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',
+  UPDATE_ERROR_ENABLED: 'update-error-enabled',
   UPDATE_CANONICAL_MODE: 'update-canonical-mode',
   REPLACE_CANONICAL_MODES: 'replace-canonical-modes',
   TOGGLE_HANDLES: 'toggle-handles',
diff --git a/packages/realtime-protocol/src/schemas.ts b/packages/realtime-protocol/src/schemas.ts
index 3dd8da3bcc0..e6bd0e97d31 100644
--- a/packages/realtime-protocol/src/schemas.ts
+++ b/packages/realtime-protocol/src/schemas.ts
@@ -29,9 +29,11 @@ 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,
+    BLOCK_OPERATIONS.UPDATE_ERROR_ENABLED,
     BLOCK_OPERATIONS.UPDATE_CANONICAL_MODE,
     BLOCK_OPERATIONS.REPLACE_CANONICAL_MODES,
     BLOCK_OPERATIONS.TOGGLE_HANDLES,
@@ -41,6 +43,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(),
@@ -50,6 +53,7 @@ export const BlockOperationSchema = z.object({
     extent: z.enum(['parent']).nullable().optional(),
     enabled: z.boolean().optional(),
     advancedMode: z.boolean().optional(),
+    errorEnabled: z.boolean().optional(),
     horizontalHandles: z.boolean().optional(),
     canonicalId: z.string().optional(),
     canonicalMode: z.enum(['basic', 'advanced']).optional(),
diff --git a/packages/testing/src/factories/permission.factory.ts b/packages/testing/src/factories/permission.factory.ts
index 0ea5ea8c397..0c3b8226771 100644
--- a/packages/testing/src/factories/permission.factory.ts
+++ b/packages/testing/src/factories/permission.factory.ts
@@ -260,6 +260,7 @@ const BLOCK_OPERATIONS = {
   TOGGLE_ENABLED: 'toggle-enabled',
   UPDATE_PARENT: 'update-parent',
   UPDATE_ADVANCED_MODE: 'update-advanced-mode',
+  UPDATE_ERROR_ENABLED: 'update-error-enabled',
   UPDATE_CANONICAL_MODE: 'update-canonical-mode',
   TOGGLE_HANDLES: 'toggle-handles',
 } as const
diff --git a/packages/workflow-persistence/src/load.ts b/packages/workflow-persistence/src/load.ts
index 6d16e41427a..533fb99dcd4 100644
--- a/packages/workflow-persistence/src/load.ts
+++ b/packages/workflow-persistence/src/load.ts
@@ -1,7 +1,11 @@
 import { db, workflow, workflowBlocks, workflowEdges, workflowSubflows } from '@sim/db'
 import { createLogger } from '@sim/logger'
 import type { BlockState, Loop, Parallel } from '@sim/workflow-types/workflow'
-import { SUBFLOW_TYPES } from '@sim/workflow-types/workflow'
+import {
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  SUBFLOW_TYPES,
+} from '@sim/workflow-types/workflow'
 import { and, eq, getTableColumns, isNull, sql } from 'drizzle-orm'
 import type { Edge } from 'reactflow'
 import { clampParallelBatchSize } from './subflow-helpers'
@@ -82,6 +86,7 @@ export async function loadWorkflowFromNormalizedTablesRaw(
         enabled: block.enabled,
         horizontalHandles: block.horizontalHandles,
         advancedMode: block.advancedMode,
+        errorEnabled: blockData?.errorEnabled === true,
         triggerMode: block.triggerMode,
         height: Number(block.height),
         subBlocks: (block.subBlocks as BlockState['subBlocks']) || {},
@@ -98,8 +103,8 @@ export async function loadWorkflowFromNormalizedTablesRaw(
       id: edge.id,
       source: edge.sourceBlockId,
       target: edge.targetBlockId,
-      sourceHandle: edge.sourceHandle ?? undefined,
-      targetHandle: edge.targetHandle ?? undefined,
+      sourceHandle: normalizePositionedSourceHandleId(edge.sourceHandle ?? undefined),
+      targetHandle: normalizePositionedTargetHandleId(edge.targetHandle ?? undefined),
       type: 'default',
       data: {},
     }))
diff --git a/packages/workflow-persistence/src/save.ts b/packages/workflow-persistence/src/save.ts
index fefe1d354d6..0093f1f443c 100644
--- a/packages/workflow-persistence/src/save.ts
+++ b/packages/workflow-persistence/src/save.ts
@@ -2,7 +2,11 @@ import { db, workflowBlocks, workflowEdges, workflowSubflows } from '@sim/db'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import type { BlockState, WorkflowState } from '@sim/workflow-types/workflow'
-import { SUBFLOW_TYPES } from '@sim/workflow-types/workflow'
+import {
+  normalizePositionedSourceHandleId,
+  normalizePositionedTargetHandleId,
+  SUBFLOW_TYPES,
+} from '@sim/workflow-types/workflow'
 import type { InferInsertModel } from 'drizzle-orm'
 import { eq } from 'drizzle-orm'
 import { generateLoopBlocks, generateParallelBlocks } from './subflow-helpers'
@@ -43,7 +47,10 @@ export async function saveWorkflowToNormalizedTables(
         height: String(block.height || 0),
         subBlocks: block.subBlocks || {},
         outputs: block.outputs || {},
-        data: block.data || {},
+        data: {
+          ...(block.data || {}),
+          errorEnabled: block.errorEnabled ?? false,
+        },
         parentId: block.data?.parentId || null,
         extent: block.data?.extent || null,
         locked: block.locked ?? false,
@@ -58,8 +65,8 @@ export async function saveWorkflowToNormalizedTables(
         workflowId,
         sourceBlockId: edge.source,
         targetBlockId: edge.target,
-        sourceHandle: edge.sourceHandle || null,
-        targetHandle: edge.targetHandle || null,
+        sourceHandle: normalizePositionedSourceHandleId(edge.sourceHandle || null),
+        targetHandle: normalizePositionedTargetHandleId(edge.targetHandle || null),
       }))
 
       await tx.insert(workflowEdges).values(edgeInserts)
diff --git a/packages/workflow-renderer/package.json b/packages/workflow-renderer/package.json
index ec9d8e0ed30..0cd862d28af 100644
--- a/packages/workflow-renderer/package.json
+++ b/packages/workflow-renderer/package.json
@@ -28,6 +28,7 @@
   "peerDependencies": {
     "@sim/emcn": "workspace:*",
     "@sim/utils": "workspace:*",
+    "@sim/workflow-types": "workspace:*",
     "react": "^19",
     "reactflow": "^11.11.4",
     "remark-breaks": "^4.0.0",
@@ -37,6 +38,7 @@
     "@sim/emcn": "workspace:*",
     "@sim/tsconfig": "workspace:*",
     "@sim/utils": "workspace:*",
+    "@sim/workflow-types": "workspace:*",
     "@types/react": "^19",
     "react": "19.2.4",
     "reactflow": "^11.11.4",
diff --git a/packages/workflow-renderer/src/dimensions.ts b/packages/workflow-renderer/src/dimensions.ts
index 736e95b7727..3c0be2c4e05 100644
--- a/packages/workflow-renderer/src/dimensions.ts
+++ b/packages/workflow-renderer/src/dimensions.ts
@@ -9,15 +9,66 @@
 
 export const BLOCK_DIMENSIONS = {
   FIXED_WIDTH: 250,
+  NOTE_WIDTH: 320,
+  NOTE_EXPANDED_WIDTH: 520,
+  NOTE_EXPANDED_HEIGHT: 400,
   HEADER_HEIGHT: 40,
   MIN_HEIGHT: 100,
+  /**
+   * Shortest card the border renderer reliably paints. Below ~48px its
+   * animation frame yields no path and the card renders bodiless. Header-only
+   * cards must size their DOM host to this same value — a shorter host with
+   * `preserveAspectRatio='none'` vertically squashes the action-menu tab.
+   */
+  MIN_PAINTED_HEIGHT: 48,
   WORKFLOW_CONTENT_PADDING: 16,
-  WORKFLOW_ROW_HEIGHT: 29,
-  NOTE_CONTENT_PADDING: 14,
+  /** One rendered summary row (text-sm line box). */
+  WORKFLOW_ROW_HEIGHT: 20,
+  /** `gap-2` between sections inside the card's content column. */
+  WORKFLOW_CONTENT_GAP: 8,
+  /** The error-output row: a short gray bar sized to its 20px switch. */
+  WORKFLOW_ERROR_ROW_HEIGHT: 24,
+  /** Chips row: the 20px ChipTag itself — the gap to the next section is
+   * added by WORKFLOW_CONTENT_GAP, not baked in here. */
+  WORKFLOW_CHIPS_ROW_HEIGHT: 20,
+  /** Natural-language summary line height (text-sm with inline value chips). */
+  WORKFLOW_SENTENCE_LINE_HEIGHT: 24,
+  /** Footer divider above the error row: 1px border + 6px padding */
+  WORKFLOW_FOOTER_DIVIDER_HEIGHT: 7,
+  /** Total vertical spacing around an empty note's single text line. */
+  NOTE_CONTENT_PADDING: 10,
   NOTE_MIN_CONTENT_HEIGHT: 20,
-  NOTE_BASE_CONTENT_HEIGHT: 60,
+  /** Maximum inline content viewport before the Note begins scrolling. */
+  NOTE_CONTENT_VIEWPORT_HEIGHT: 200,
 } as const
 
+/** Keeps note DOM, React Flow bounds, and auto-layout on the same height. */
+export const getNoteBlockHeight = (isEmpty: boolean) =>
+  BLOCK_DIMENSIONS.HEADER_HEIGHT +
+  (isEmpty
+    ? BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING + BLOCK_DIMENSIONS.NOTE_MIN_CONTENT_HEIGHT
+    : BLOCK_DIMENSIONS.NOTE_CONTENT_VIEWPORT_HEIGHT)
+
+/** Clamps measured note content to its compact minimum and scrollable maximum. */
+export const clampNoteBlockHeight = (contentHeight: number) =>
+  BLOCK_DIMENSIONS.HEADER_HEIGHT +
+  Math.min(
+    BLOCK_DIMENSIONS.NOTE_CONTENT_VIEWPORT_HEIGHT,
+    Math.max(
+      BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING + BLOCK_DIMENSIONS.NOTE_MIN_CONTENT_HEIGHT,
+      contentHeight
+    )
+  )
+
+/** Gives Notes a stable first frame before the rendered text can be measured. */
+export const estimateNoteBlockHeight = (content: string) => {
+  if (content.trim().length === 0) return getNoteBlockHeight(true)
+  const lineCount = Math.max(1, content.split('\n').length)
+  return clampNoteBlockHeight(
+    BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING + lineCount * BLOCK_DIMENSIONS.NOTE_MIN_CONTENT_HEIGHT
+  )
+}
+
 export const CONTAINER_DIMENSIONS = {
   DEFAULT_WIDTH: 500,
   DEFAULT_HEIGHT: 300,
@@ -39,6 +90,8 @@ export const HANDLE_POSITIONS = {
   DEFAULT_Y_OFFSET: 20,
   /** Error handle offset from block bottom */
   ERROR_BOTTOM_OFFSET: 17,
+  /** Error knob center inset from the card's right edge. */
+  ERROR_RIGHT_OFFSET: 30,
   /**
    * Y of the first condition-row handle: 40px header + 1px divider +
    * 8px content padding + half of the 20px row
diff --git a/packages/workflow-renderer/src/edge/workflow-edge-view.tsx b/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
index 29c4c6e5ffc..0283ac09c36 100644
--- a/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
+++ b/packages/workflow-renderer/src/edge/workflow-edge-view.tsx
@@ -1,8 +1,29 @@
-import { useMemo } from 'react'
+import { useId, useMemo } from 'react'
 import { X } from '@sim/emcn/icons'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from 'reactflow'
 import type { EdgeDiffStatus, EdgeRunStatus } from '../types'
 
+const EXECUTION_PULSE_LENGTH = 0.32
+const EXECUTION_PULSE_CYCLE_LENGTH = 2.2
+const EXECUTION_PULSE_DURATION = '1100ms'
+
+const EXECUTION_PULSE_LAYERS = [
+  { id: 'tail', length: EXECUTION_PULSE_LENGTH, opacity: 0.22, strokeWidth: 6 },
+  { id: 'shoulder', length: 0.23, opacity: 0.32, strokeWidth: 3.5 },
+  { id: 'body', length: 0.15, opacity: 0.6, strokeWidth: 2.5 },
+  { id: 'core', length: 0.07, opacity: 1, strokeWidth: 2.5 },
+] as const
+
+function getExecutionPulseMotion(length: number) {
+  const centerOffset = (EXECUTION_PULSE_LENGTH - length) / 2
+
+  return {
+    dashArray: `${length} ${(EXECUTION_PULSE_CYCLE_LENGTH - length).toFixed(2)}`,
+    from: centerOffset === 0 ? '0' : `-${centerOffset.toFixed(3)}`,
+    to: `-${(EXECUTION_PULSE_CYCLE_LENGTH + centerOffset).toFixed(3)}`,
+  }
+}
+
 /**
  * Props for the pure workflow edge renderer.
  *
@@ -18,6 +39,15 @@ export interface WorkflowEdgeViewProps extends EdgeProps {
   runStatus: EdgeRunStatus
   /** Whether `runStatus` came from a preview run (drives success coloring). */
   isPreviewRun: boolean
+  /** Whether canvas execution is active, which suppresses per-edge success progression. */
+  isWorkflowRunning?: boolean
+  /** Whether the edge's target block is currently executing. */
+  isTargetActive?: boolean
+  /**
+   * Whether either endpoint block is selected on the canvas — brightens the
+   * edge alongside the selected node. Diff and error colors take priority.
+   */
+  isConnectedToSelection?: boolean
 }
 
 /**
@@ -26,9 +56,10 @@ export interface WorkflowEdgeViewProps extends EdgeProps {
  * @remarks
  * Edge coloring priority:
  * 1. Diff status (deleted/new) - for version comparison
- * 2. Execution status (success/error) - for run visualization
- * 3. Error edge default (red) - for untaken error paths
- * 4. Default edge color - normal workflow connections
+ * 2. Live execution path and errors
+ * 3. Execution result after the run completes
+ * 4. Selected endpoint outside execution
+ * 5. Default edge color
  */
 export function WorkflowEdgeView({
   id,
@@ -44,7 +75,12 @@ export function WorkflowEdgeView({
   diffStatus,
   runStatus,
   isPreviewRun,
+  isWorkflowRunning = false,
+  isTargetActive = false,
+  isConnectedToSelection = false,
 }: WorkflowEdgeViewProps) {
+  const pulseId = useId().replaceAll(':', '')
+  const pulseGlowId = `workflow-edge-pulse-glow-${pulseId}`
   const isHorizontal = sourcePosition === 'right' || sourcePosition === 'left'
 
   const [edgePath, labelX, labelY] = getSmoothStepPath({
@@ -62,6 +98,17 @@ export function WorkflowEdgeView({
 
   const dataSourceHandle = (data as { sourceHandle?: string } | undefined)?.sourceHandle
   const isErrorEdge = (sourceHandle ?? dataSourceHandle) === 'error'
+  const hasRunStatus = runStatus === 'success' || runStatus === 'error'
+  const isTraversing = isWorkflowRunning && hasRunStatus && isTargetActive && !diffStatus
+  const executionState = isWorkflowRunning
+    ? isTraversing
+      ? 'traversing'
+      : hasRunStatus
+        ? 'traversed'
+        : 'waiting'
+    : hasRunStatus
+      ? 'complete'
+      : 'idle'
 
   const edgeStyle = useMemo(() => {
     let color = 'var(--workflow-edge)'
@@ -72,38 +119,94 @@ export function WorkflowEdgeView({
       opacity = 0.7
     } else if (diffStatus === 'new') {
       color = 'var(--brand-accent)'
-    } else if (runStatus === 'success') {
-      // Use green for preview mode, default for canvas execution
-      color = isPreviewRun ? 'var(--brand-accent)' : 'var(--border-success)'
-    } else if (runStatus === 'error') {
-      color = 'var(--text-error)'
-    } else if (isErrorEdge) {
-      // Error edges that weren't taken stay red
-      color = 'var(--text-error)'
+    } else if (isWorkflowRunning) {
+      if (runStatus === 'error') {
+        color = 'var(--text-error)'
+      } else if (runStatus === 'success') {
+        color = 'var(--text-secondary)'
+      } else {
+        opacity = 0.52
+      }
+    } else {
+      if (runStatus === 'error' || isErrorEdge) {
+        color = 'var(--text-error)'
+      } else if (runStatus === 'success') {
+        color = isPreviewRun ? 'var(--brand-accent)' : 'var(--border-success)'
+      } else if (isConnectedToSelection) {
+        color = 'var(--text-secondary)'
+      }
     }
 
-    if (isSelected) {
+    if (isSelected && !isWorkflowRunning) {
       opacity = 0.5
     }
 
     return {
-      ...(style ?? {}),
-      strokeWidth: diffStatus
-        ? 3
-        : runStatus === 'success' || runStatus === 'error'
-          ? 2.5
-          : isSelected
-            ? 2.5
-            : 2,
-      stroke: color,
+      strokeWidth: diffStatus ? 2.5 : hasRunStatus ? 2 : 1.5,
       strokeDasharray: diffStatus === 'deleted' ? '10,5' : undefined,
       opacity,
+      ...(style ?? {}),
+      // Selection/status stroke must win over any default edge style.
+      stroke: color,
     }
-  }, [style, diffStatus, isSelected, isErrorEdge, runStatus, isPreviewRun])
+  }, [
+    style,
+    diffStatus,
+    isSelected,
+    isErrorEdge,
+    hasRunStatus,
+    runStatus,
+    isPreviewRun,
+    isWorkflowRunning,
+    isConnectedToSelection,
+  ])
 
   return (
     <>
-      <BaseEdge path={edgePath} style={edgeStyle} interactionWidth={30} />
+      <g data-workflow-edge-state={executionState}>
+        <BaseEdge path={edgePath} style={edgeStyle} interactionWidth={30} />
+        {isTraversing && (
+          <>
+            <defs>
+              <filter id={pulseGlowId} x='-30%' y='-30%' width='160%' height='160%'>
+                <feGaussianBlur stdDeviation='2.4' />
+              </filter>
+            </defs>
+            {EXECUTION_PULSE_LAYERS.map((layer) => {
+              const motion = getExecutionPulseMotion(layer.length)
+
+              return (
+                <path
+                  key={layer.id}
+                  data-workflow-edge-pulse-layer={layer.id}
+                  data-workflow-edge-pulse-glow={layer.id === 'tail' ? '' : undefined}
+                  data-workflow-edge-traversing={layer.id === 'core' ? '' : undefined}
+                  d={edgePath}
+                  fill='none'
+                  stroke='var(--white)'
+                  strokeWidth={layer.strokeWidth}
+                  strokeLinecap='round'
+                  pathLength={1}
+                  strokeDasharray={motion.dashArray}
+                  vectorEffect='non-scaling-stroke'
+                  filter={layer.id === 'tail' ? `url(#${pulseGlowId})` : undefined}
+                  opacity={layer.opacity}
+                  className='pointer-events-none motion-reduce:hidden'
+                >
+                  <animate
+                    attributeName='stroke-dashoffset'
+                    from={motion.from}
+                    to={motion.to}
+                    dur={EXECUTION_PULSE_DURATION}
+                    calcMode='linear'
+                    repeatCount='indefinite'
+                  />
+                </path>
+              )
+            })}
+          </>
+        )}
+      </g>
 
       {isSelected && (
         <EdgeLabelRenderer>
diff --git a/packages/workflow-renderer/src/index.ts b/packages/workflow-renderer/src/index.ts
index 0c6938dc112..af7115ee779 100644
--- a/packages/workflow-renderer/src/index.ts
+++ b/packages/workflow-renderer/src/index.ts
@@ -1,14 +1,55 @@
 export * from './dimensions'
 export { WorkflowEdgeView, type WorkflowEdgeViewProps } from './edge/workflow-edge-view'
-export { NoteBlockView, type NoteBlockViewProps } from './note/note-block-view'
+export { humanizeBlockName } from './lib/humanize-block-name'
+export {
+  NoteBlockView,
+  type NoteBlockViewProps,
+  type NoteContentEditorProps,
+} from './note/note-block-view'
+export {
+  DEFAULT_NOTE_COLOR,
+  getNoteColorOption,
+  isNoteColor,
+  NOTE_COLOR_OPTIONS,
+  type NoteColor,
+} from './note/note-colors'
 export {
   type SubflowNodeData,
   SubflowNodeView,
   type SubflowNodeViewProps,
+  SubflowStartView,
 } from './subflow/subflow-node-view'
 export type { BlockRunStatus, DiffStatus, EdgeDiffStatus, EdgeRunStatus } from './types'
+export {
+  CURSOR_SOURCE_HANDLE_ID,
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandleId,
+  getCursorSourceHandlePosition,
+  normalizeCursorSourceHandleId,
+} from './workflow-block/source-handle'
 export { SubBlockRowView, type SubBlockRowViewProps } from './workflow-block/sub-block-row-view'
 export {
+  CONNECTION_KNOB_PEAK_PX,
+  CURSOR_SWELL_LENGTH_PX,
+  getWorkflowBorderFrameDeltaSeconds,
+  isActionMenuSwellReady,
+  WorkflowBlockBorder,
+  type WorkflowBorderCursorHandle,
+  type WorkflowBorderPort,
+} from './workflow-block/workflow-block-border'
+export {
+  ERROR_SOURCE_HANDLE_POSITION,
+  getErrorBorderPort,
+  getErrorSourceHandleStyle,
+  getNearestBranchCursorHandleId,
+  getWorkflowTypeAccent,
+  getWorkflowTypeRole,
+  hasWorkflowTypeRole,
   WorkflowBlockView,
   type WorkflowBlockViewProps,
+  WorkflowTypeIcon,
+  type WorkflowTypeIconProps,
+  type WorkflowTypeRole,
+  WorkflowTypeTag,
+  type WorkflowTypeTagProps,
 } from './workflow-block/workflow-block-view'
diff --git a/packages/workflow-renderer/src/lib/humanize-block-name.ts b/packages/workflow-renderer/src/lib/humanize-block-name.ts
new file mode 100644
index 00000000000..31e83b6b269
--- /dev/null
+++ b/packages/workflow-renderer/src/lib/humanize-block-name.ts
@@ -0,0 +1,20 @@
+/**
+ * Humanizes a block's technical name for the card title: camelCase,
+ * snake_case, and kebab-case become spaced Title Case ("updatePosted" →
+ * "Update Posted", "did_it_post" → "Did It Post"). Existing capitals and
+ * acronym runs are preserved ("APICall" → "API Call"); names that are
+ * already natural language pass through unchanged.
+ */
+export function humanizeBlockName(name: string): string {
+  const spaced = name
+    .replace(/[_-]+/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!spaced) return name
+  return spaced
+    .split(' ')
+    .map((word) => (word ? word.charAt(0).toUpperCase() + word.slice(1) : word))
+    .join(' ')
+}
diff --git a/packages/workflow-renderer/src/lib/tile-icon-color.ts b/packages/workflow-renderer/src/lib/tile-icon-color.ts
index ce6ca930a69..1be70748163 100644
--- a/packages/workflow-renderer/src/lib/tile-icon-color.ts
+++ b/packages/workflow-renderer/src/lib/tile-icon-color.ts
@@ -36,8 +36,13 @@ function perceivedBrightness(color: string): number | null {
 /** Tiles brighter than this flip their icon foreground to near-black. */
 const LIGHT_TILE_THRESHOLD = 0.75
 
+/** Whether a provider tile needs dark foreground content for legibility. */
+export function isLightTileColor(bgColor: string | null | undefined): boolean {
+  const brightness = bgColor ? perceivedBrightness(bgColor) : null
+  return brightness !== null && brightness > LIGHT_TILE_THRESHOLD
+}
+
 /** `text-white` on dark/unknown tiles, `text-black` on clearly light tiles. */
 export function tileIconColorClass(bgColor: string | null | undefined): string {
-  const brightness = bgColor ? perceivedBrightness(bgColor) : null
-  return brightness !== null && brightness > LIGHT_TILE_THRESHOLD ? 'text-black' : 'text-white'
+  return isLightTileColor(bgColor) ? 'text-black' : 'text-white'
 }
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index 33a797c41d3..34776e17c75 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1,13 +1,56 @@
-import { memo, type ReactNode } from 'react'
+import {
+  memo,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import remarkBreaks from 'remark-breaks'
 import { Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
-import { cn, handleKeyboardActivation } from '@sim/emcn'
+import { Button, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
+import { ChevronsDownUp, Expand } from '@sim/emcn/icons'
 import { getEmbedInfo } from '@sim/utils/media-embed'
+import { BLOCK_DIMENSIONS, clampNoteBlockHeight, estimateNoteBlockHeight } from '../dimensions'
 import { OverflowSpan } from '../lib/overflow-span'
+import { useActionMenuSwell } from '../workflow-block/use-action-menu-swell'
+import {
+  WorkflowBlockBorder,
+  type WorkflowBorderPort,
+} from '../workflow-block/workflow-block-border'
+import { DEFAULT_NOTE_COLOR, getNoteColorOption, type NoteColor } from './note-colors'
 
 const EMBED_SCALE = 0.78
 const EMBED_INVERSE_SCALE = `${(1 / EMBED_SCALE) * 100}%`
+const ACTION_MENU_RIGHT_INSET_PX = 24
+const ACTION_MENU_AMPLITUDE = 7
+const EDIT_CLICK_TOLERANCE_PX = 4
+
+type NoteEditingField = 'title' | 'content' | null
+
+export interface NoteContentEditorProps {
+  value: string
+  selectionClassName: string
+  onChange: (content: string) => void
+  onBlur: () => void
+  onCancel: () => void
+}
+
+interface EditPointerStart {
+  field: Exclude<NoteEditingField, null>
+  x: number
+  y: number
+}
+
+interface NotePointerStart {
+  x: number
+  y: number
+}
 
 /**
  * Compact markdown renderer for note blocks with tight spacing
@@ -16,50 +59,48 @@ const NOTE_REMARK_PLUGINS = [remarkBreaks]
 
 const NOTE_COMPONENTS = {
   p: ({ children }: { children?: ReactNode }) => (
-    <p className='mb-1 break-words text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0'>
-      {children}
-    </p>
+    <p className='mb-1 break-words text-current text-sm leading-[1.25rem] last:mb-0'>{children}</p>
   ),
   h1: ({ children }: { children?: ReactNode }) => (
-    <h1 className='mt-3 mb-3 break-words text-[var(--text-primary)] text-lg first:mt-0'>
+    <h1 className='mt-3 mb-3 break-words font-semibold text-current text-lg first:mt-0'>
       {children}
     </h1>
   ),
   h2: ({ children }: { children?: ReactNode }) => (
-    <h2 className='mt-2.5 mb-2.5 break-words text-[var(--text-primary)] text-base first:mt-0'>
+    <h2 className='mt-2.5 mb-2.5 break-words font-semibold text-base text-current first:mt-0'>
       {children}
     </h2>
   ),
   h3: ({ children }: { children?: ReactNode }) => (
-    <h3 className='mt-2 mb-2 break-words text-[var(--text-primary)] text-sm first:mt-0'>
+    <h3 className='mt-2 mb-2 break-words font-semibold text-current text-sm first:mt-0'>
       {children}
     </h3>
   ),
   h4: ({ children }: { children?: ReactNode }) => (
-    <h4 className='mt-2 mb-2 break-words text-[var(--text-primary)] text-xs first:mt-0'>
+    <h4 className='mt-2 mb-2 break-words font-semibold text-current text-xs first:mt-0'>
       {children}
     </h4>
   ),
   ul: ({ children }: { children?: ReactNode }) => (
-    <ul className='mt-1 mb-1 list-disc space-y-1 break-words pl-6 text-[var(--text-primary)] text-sm'>
+    <ul className='mt-1 mb-1 list-disc space-y-1 break-words pl-6 text-current text-sm'>
       {children}
     </ul>
   ),
   ol: ({ children }: { children?: ReactNode }) => (
-    <ol className='mt-1 mb-1 list-decimal space-y-1 break-words pl-6 text-[var(--text-primary)] text-sm'>
+    <ol className='mt-1 mb-1 list-decimal space-y-1 break-words pl-6 text-current text-sm'>
       {children}
     </ol>
   ),
   li: ({ children }: { children?: ReactNode }) => <li className='break-words'>{children}</li>,
   inlineCode: ({ children }: { children?: ReactNode }) => (
-    <code className='whitespace-normal rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--caution)] text-xs'>
+    <code className='whitespace-normal rounded bg-black/10 px-1 py-0.5 font-mono text-current text-xs'>
       {children}
     </code>
   ),
   code: ({ children, className, ...props }: { children?: ReactNode; className?: string }) => (
     <code
       {...props}
-      className='block whitespace-pre-wrap break-words rounded bg-[var(--surface-5)] p-2 text-[var(--text-primary)] text-xs'
+      className='block whitespace-pre-wrap break-words rounded bg-black/15 p-2 text-current text-xs'
     >
       {children}
     </code>
@@ -73,7 +114,7 @@ const NOTE_COMPONENTS = {
             href={href}
             target='_blank'
             rel='noopener noreferrer'
-            className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
+            className='mb-1 block break-all font-medium text-current underline underline-offset-2 opacity-90 hover-hover:opacity-100'
           >
             {children}
           </a>
@@ -125,20 +166,20 @@ const NOTE_COMPONENTS = {
         href={href}
         target='_blank'
         rel='noopener noreferrer'
-        className='break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
+        className='break-all font-medium text-current underline underline-offset-2 opacity-90 hover-hover:opacity-100'
       >
         {children}
       </a>
     )
   },
   strong: ({ children }: { children?: ReactNode }) => (
-    <strong className='break-words font-semibold text-[var(--text-primary)]'>{children}</strong>
+    <strong className='break-words font-semibold text-current'>{children}</strong>
   ),
   em: ({ children }: { children?: ReactNode }) => (
-    <em className='break-words text-[var(--text-tertiary)]'>{children}</em>
+    <em className='break-words text-current opacity-80'>{children}</em>
   ),
   blockquote: ({ children }: { children?: ReactNode }) => (
-    <blockquote className='my-4 break-words border-[var(--border)] border-l-2 pl-4 text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
+    <blockquote className='my-4 break-words border-current/25 border-l-2 pl-4 text-current italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
       {children}
     </blockquote>
   ),
@@ -148,17 +189,17 @@ const NOTE_COMPONENTS = {
     </div>
   ),
   thead: ({ children }: { children?: ReactNode }) => (
-    <thead className='border-[var(--border)] border-b'>{children}</thead>
+    <thead className='border-current/20 border-b'>{children}</thead>
   ),
   tbody: ({ children }: { children?: ReactNode }) => <tbody>{children}</tbody>,
   tr: ({ children }: { children?: ReactNode }) => (
-    <tr className='border-[var(--border)] border-b last:border-b-0'>{children}</tr>
+    <tr className='border-current/20 border-b last:border-b-0'>{children}</tr>
   ),
   th: ({ children }: { children?: ReactNode }) => (
-    <th className='px-2 py-1 text-left text-[var(--text-primary)]'>{children}</th>
+    <th className='px-2 py-1 text-left font-semibold text-current'>{children}</th>
   ),
   td: ({ children }: { children?: ReactNode }) => (
-    <td className='px-2 py-1 text-[var(--text-secondary)]'>{children}</td>
+    <td className='px-2 py-1 text-current opacity-90'>{children}</td>
   ),
 }
 
@@ -179,64 +220,570 @@ export interface NoteBlockViewProps {
   name?: string
   /** Markdown content; an empty string renders the placeholder. */
   content: string
+  noteColor?: NoteColor
   isEnabled: boolean
+  isFocused: boolean
+  isExpanded?: boolean
+  canEdit?: boolean
   hasRing: boolean
   ringStyles: string
-  /** Selects this note in the editor panel. */
+  /** Notifies the host while keeping Note selection out of the side editor. */
   onSelect: () => void
+  /** Persists an inline title edit and reports whether validation succeeded. */
+  onNameChange?: (name: string) => boolean
+  /** Persists inline note content as the user types. */
+  onContentChange?: (content: string) => void
+  /** Publishes the measured, clamped canvas height to the editor container. */
+  onHeightChange?: (height: number) => void
+  onExpandedChange?: (expanded: boolean) => void
+  /** Renders a WYSIWYG markdown editor supplied by the host application. */
+  renderContentEditor?: (props: NoteContentEditorProps) => ReactNode
   /** Editor-only action bar; omit in read-only / preview contexts. */
   actionBar?: ReactNode
 }
 
 /**
- * Pure renderer for a note block: a draggable card with a title and a markdown
- * body (rich text + embeds). Carries no store, socket, or permission coupling.
+ * Pure renderer for a canvas Note card with a title and markdown body. Compact
+ * Notes remain draggable; expanded Notes provide stable inline editing without
+ * store, socket, or permission coupling.
  */
 export function NoteBlockView({
   name,
   content,
+  noteColor = DEFAULT_NOTE_COLOR,
   isEnabled,
+  isFocused,
+  isExpanded = false,
+  canEdit = false,
   hasRing,
   ringStyles,
   onSelect,
+  onNameChange,
+  onContentChange,
+  onHeightChange,
+  onExpandedChange,
+  renderContentEditor,
   actionBar,
 }: NoteBlockViewProps) {
-  const isEmpty = content.trim().length === 0
+  const colorOption = getNoteColorOption(noteColor)
+  const showActionMenu = Boolean(actionBar)
+  const noteLayoutRef = useRef<HTMLDivElement>(null)
+  const scrollRegionRef = useRef<HTMLElement>(null)
+  const contentMeasureRef = useRef<HTMLDivElement>(null)
+  const contentEditorRef = useRef<HTMLDivElement>(null)
+  const titleInputRef = useRef<HTMLInputElement>(null)
+  const contentInputRef = useRef<HTMLTextAreaElement>(null)
+  const editPointerStartRef = useRef<EditPointerStart>(null)
+  const notePointerStartRef = useRef<NotePointerStart>(null)
+  const expandedAnchorHeightRef = useRef(estimateNoteBlockHeight(content))
+  const [editingField, setEditingField] = useState<NoteEditingField>(null)
+  const [draftName, setDraftName] = useState(name ?? '')
+  const [draftContent, setDraftContent] = useState(content)
+  const [compactHeight, setCompactHeight] = useState(() => estimateNoteBlockHeight(content))
+  const [isHovered, setIsHovered] = useState(false)
+  const [canScrollUp, setCanScrollUp] = useState(false)
+  const [canScrollDown, setCanScrollDown] = useState(false)
+  const activeContent = editingField === 'content' ? draftContent : content
+  const isEmpty = activeContent.trim().length === 0
+  const hasVisualFocus = isFocused || isExpanded
+  const isInlineEditable = isExpanded && canEdit
+  const hasCustomContentEditor = Boolean(renderContentEditor)
+  const blockWidth = isExpanded ? BLOCK_DIMENSIONS.NOTE_EXPANDED_WIDTH : BLOCK_DIMENSIONS.NOTE_WIDTH
+  const blockHeight = isExpanded ? BLOCK_DIMENSIONS.NOTE_EXPANDED_HEIGHT : compactHeight
+  if (!isExpanded) expandedAnchorHeightRef.current = compactHeight
+  const layoutHeight = isExpanded ? expandedAnchorHeightRef.current : compactHeight
+  const isContentScrollable = canScrollUp || canScrollDown
+
+  useEffect(() => {
+    if (!isInlineEditable) setEditingField(null)
+  }, [isInlineEditable])
+
+  useEffect(() => {
+    if (!isExpanded || !onExpandedChange) return
+
+    const handleCanvasPointerDown = (event: PointerEvent) => {
+      if (event.button !== 0 || !(event.target instanceof Element)) return
+      if (noteLayoutRef.current?.contains(event.target)) return
+      if (!event.target.closest('.react-flow__pane, .react-flow__node')) return
+
+      onExpandedChange(false)
+    }
+
+    document.addEventListener('pointerdown', handleCanvasPointerDown, true)
+    return () => document.removeEventListener('pointerdown', handleCanvasPointerDown, true)
+  }, [isExpanded, onExpandedChange])
+
+  useEffect(() => {
+    if (editingField === 'title') {
+      const input = titleInputRef.current
+      input?.focus()
+      input?.setSelectionRange(input.value.length, input.value.length)
+      return
+    }
+    if (editingField === 'content') {
+      const input = contentInputRef.current
+      input?.focus()
+      input?.setSelectionRange(input.value.length, input.value.length)
+    }
+  }, [editingField])
+
+  function startEditing(
+    event: ReactMouseEvent<HTMLElement>,
+    field: Exclude<NoteEditingField, null>
+  ) {
+    event.stopPropagation()
+    if (!isInlineEditable) return
+
+    const pointerStart = editPointerStartRef.current
+    editPointerStartRef.current = null
+    const isKeyboardActivation = event.detail === 0
+    const isIntentionalClick =
+      pointerStart?.field === field &&
+      Math.abs(event.clientX - pointerStart.x) <= EDIT_CLICK_TOLERANCE_PX &&
+      Math.abs(event.clientY - pointerStart.y) <= EDIT_CLICK_TOLERANCE_PX
+    if (!isKeyboardActivation && !isIntentionalClick) return
+
+    if (field === 'title') setDraftName(name ?? '')
+    if (field === 'content') setDraftContent(content)
+    setEditingField(field)
+  }
+
+  function recordEditPointerStart(
+    event: ReactPointerEvent<HTMLElement>,
+    field: Exclude<NoteEditingField, null>
+  ) {
+    editPointerStartRef.current = {
+      field,
+      x: event.clientX,
+      y: event.clientY,
+    }
+  }
+
+  function recordNotePointerStart(event: ReactPointerEvent<HTMLDivElement>) {
+    if (!hasVisualFocus || isExpanded || !canEdit || event.button !== 0) return
+    notePointerStartRef.current = {
+      x: event.clientX,
+      y: event.clientY,
+    }
+  }
+
+  function handleNoteClick(event: ReactMouseEvent<HTMLDivElement>) {
+    const pointerStart = notePointerStartRef.current
+    notePointerStartRef.current = null
+
+    if (!hasVisualFocus) {
+      onSelect()
+      return
+    }
+
+    if (!isExpanded && canEdit && onExpandedChange) {
+      const isKeyboardActivation = event.detail === 0
+      const isIntentionalClick =
+        pointerStart !== null &&
+        Math.abs(event.clientX - pointerStart.x) <= EDIT_CLICK_TOLERANCE_PX &&
+        Math.abs(event.clientY - pointerStart.y) <= EDIT_CLICK_TOLERANCE_PX
+      if (isKeyboardActivation || isIntentionalClick) {
+        onExpandedChange(true)
+        return
+      }
+    }
+
+    onSelect()
+  }
+
+  function finishTitleEditing() {
+    const currentName = name ?? ''
+    const nextName = draftName.trim()
+    if (nextName !== currentName) {
+      const didSave = onNameChange?.(nextName) ?? false
+      if (!didSave) setDraftName(currentName)
+    }
+    setEditingField(null)
+  }
+
+  function cancelTitleEditing() {
+    setDraftName(name ?? '')
+    setEditingField(null)
+  }
+  const updateScrollFades = useCallback(() => {
+    const scrollRegion = scrollRegionRef.current
+    if (!scrollRegion) return
+    const maxScrollTop = Math.max(0, scrollRegion.scrollHeight - scrollRegion.clientHeight)
+    setCanScrollUp(scrollRegion.scrollTop > 1)
+    setCanScrollDown(scrollRegion.scrollTop < maxScrollTop - 1)
+  }, [])
+  const setScrollRegion = useCallback(
+    (node: HTMLElement | null) => {
+      scrollRegionRef.current = node
+      updateScrollFades()
+    },
+    [updateScrollFades]
+  )
+
+  const measureBlockHeight = useCallback(() => {
+    let contentHeight =
+      BLOCK_DIMENSIONS.NOTE_CONTENT_PADDING + BLOCK_DIMENSIONS.NOTE_MIN_CONTENT_HEIGHT
+
+    if (!isEmpty) {
+      if (editingField === 'content' && contentInputRef.current) {
+        const input = contentInputRef.current
+        const previousHeight = input.style.height
+        input.style.height = '0px'
+        const measuredHeight = input.scrollHeight
+        contentHeight =
+          measuredHeight > 0
+            ? measuredHeight
+            : estimateNoteBlockHeight(activeContent) - BLOCK_DIMENSIONS.HEADER_HEIGHT
+        input.style.height = previousHeight
+      } else if (editingField === 'content' && contentEditorRef.current) {
+        const measuredHeight = contentEditorRef.current.scrollHeight
+        contentHeight =
+          measuredHeight > 0
+            ? measuredHeight
+            : estimateNoteBlockHeight(activeContent) - BLOCK_DIMENSIONS.HEADER_HEIGHT
+      } else if (contentMeasureRef.current) {
+        const measuredHeight = contentMeasureRef.current.scrollHeight
+        contentHeight =
+          measuredHeight > 0
+            ? measuredHeight
+            : estimateNoteBlockHeight(activeContent) - BLOCK_DIMENSIONS.HEADER_HEIGHT
+      } else {
+        contentHeight = estimateNoteBlockHeight(activeContent) - BLOCK_DIMENSIONS.HEADER_HEIGHT
+      }
+    }
+
+    const nextCompactHeight = clampNoteBlockHeight(contentHeight)
+    setCompactHeight((currentHeight) =>
+      currentHeight === nextCompactHeight ? currentHeight : nextCompactHeight
+    )
+    onHeightChange?.(nextCompactHeight)
+  }, [activeContent, editingField, isEmpty, onHeightChange])
+
+  useLayoutEffect(() => {
+    measureBlockHeight()
+  }, [measureBlockHeight])
+
+  useEffect(() => {
+    if (editingField === 'content' || !contentMeasureRef.current) return
+    const observer = new ResizeObserver(measureBlockHeight)
+    observer.observe(contentMeasureRef.current)
+    return () => observer.disconnect()
+  }, [editingField, measureBlockHeight])
+
+  useEffect(() => {
+    if (!hasVisualFocus && scrollRegionRef.current) {
+      scrollRegionRef.current.scrollTop = 0
+    }
+    updateScrollFades()
+  }, [content, editingField, hasVisualFocus, updateScrollFades])
+
+  const {
+    rootRef: actionMenuRootRef,
+    hostRef: actionMenuHostRef,
+    width: actionMenuWidth,
+    swellOpen: actionMenuSwellOpen,
+    contentVisible: actionMenuContentVisible,
+    setReady: setActionMenuSwellReady,
+    onFocusCapture: handleActionMenuFocus,
+    onBlurCapture: handleActionMenuBlur,
+  } = useActionMenuSwell({
+    enabled: showActionMenu,
+    forceOpen: hasVisualFocus,
+    maxWidth: blockWidth - ACTION_MENU_RIGHT_INSET_PX * 2,
+  })
+  const borderPorts = useMemo<WorkflowBorderPort[]>(
+    () =>
+      showActionMenu
+        ? [
+            {
+              id: 'action-menu',
+              side: 'top',
+              position: { fromEnd: ACTION_MENU_RIGHT_INSET_PX + actionMenuWidth / 2 },
+              plateau: actionMenuWidth,
+              restAmplitude: actionMenuSwellOpen ? ACTION_MENU_AMPLITUDE : 0,
+              hoverAmplitude: ACTION_MENU_AMPLITUDE,
+              magnetizable: false,
+            },
+          ]
+        : [],
+    [actionMenuSwellOpen, actionMenuWidth, showActionMenu]
+  )
 
   return (
-    <div className='group relative'>
+    <div
+      ref={noteLayoutRef}
+      data-note-layout=''
+      className='relative w-[320px]'
+      style={{ height: layoutHeight }}
+    >
       <div
-        role='button'
-        tabIndex={0}
-        className={cn(
-          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
-        )}
-        onClick={onSelect}
-        onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
+        ref={actionMenuRootRef}
+        className='group -translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2'
+        data-action-menu-ready={actionMenuContentVisible ? '' : undefined}
+        data-node-selected={hasVisualFocus ? '' : undefined}
+        data-note-expanded={isExpanded ? '' : undefined}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
       >
-        {actionBar}
-
-        <div className='flex items-center justify-between border-[var(--border)] border-b p-2'>
-          <div className='flex min-w-0 flex-1 items-center'>
-            <OverflowSpan
-              value={name ?? ''}
-              className={cn('truncate text-md', !isEnabled && 'text-[var(--text-muted)]')}
+        {showActionMenu && (
+          <>
+            <div
+              aria-hidden='true'
+              data-workflow-action-bar-bridge=''
+              className='-top-[28px] pointer-events-auto absolute inset-x-0 z-10 h-[28px]'
             />
+            <div
+              ref={actionMenuHostRef}
+              onFocusCapture={handleActionMenuFocus}
+              onBlurCapture={handleActionMenuBlur}
+            >
+              {actionBar}
+            </div>
+          </>
+        )}
+        <div
+          data-note-card=''
+          role={isInlineEditable ? undefined : 'button'}
+          tabIndex={isInlineEditable ? -1 : 0}
+          className={cn(
+            'relative z-20 select-none rounded-2xl transition-[color,width,height] [transition-duration:150ms,280ms,280ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none',
+            isExpanded
+              ? 'nodrag w-[520px] cursor-default'
+              : [
+                  'note-drag-handle w-[320px] [&:active]:cursor-grabbing',
+                  hasVisualFocus ? 'cursor-text' : 'cursor-grab',
+                ],
+            colorOption.textClassName
+          )}
+          style={{ height: blockHeight }}
+          onPointerDown={recordNotePointerStart}
+          onClick={handleNoteClick}
+          onTransitionEnd={updateScrollFades}
+          onKeyDown={(event) => {
+            if (event.target === event.currentTarget) {
+              handleKeyboardActivation(event, () => {
+                if (hasVisualFocus && !isExpanded && canEdit && onExpandedChange) {
+                  onExpandedChange(true)
+                  return
+                }
+                onSelect()
+              })
+            }
+          }}
+        >
+          <WorkflowBlockBorder
+            ports={borderPorts}
+            cursorSwellEnabled={false}
+            hasRing={hasRing}
+            ringStyles={ringStyles}
+            isSelected={hasVisualFocus}
+            selectedSilhouetteColor={colorOption.selectedSilhouetteColor}
+            silhouetteColorOverride={
+              !hasVisualFocus && isHovered ? colorOption.hoverSilhouetteColor : undefined
+            }
+            bodyFill={colorOption.fill}
+            width={blockWidth}
+            initialHeight={blockHeight}
+            onActionMenuReadyChange={setActionMenuSwellReady}
+          />
+
+          <div className='relative z-10 flex h-10 items-center justify-between px-2'>
+            <div className='flex min-w-0 flex-1 items-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]'>
+              {editingField === 'title' ? (
+                <input
+                  ref={titleInputRef}
+                  aria-label='Note title'
+                  value={draftName}
+                  onChange={(event) => setDraftName(event.target.value)}
+                  onBlur={finishTitleEditing}
+                  onClick={(event) => event.stopPropagation()}
+                  onPointerDown={(event) => event.stopPropagation()}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault()
+                      finishTitleEditing()
+                    } else if (event.key === 'Escape') {
+                      event.preventDefault()
+                      cancelTitleEditing()
+                    }
+                  }}
+                  className={cn(
+                    'nodrag nopan nowheel h-7 w-full min-w-0 select-text border-none bg-transparent px-0 text-current text-md caret-current outline-none focus-visible:outline-none',
+                    colorOption.selectionClassName,
+                    !isEnabled && 'opacity-50'
+                  )}
+                />
+              ) : isInlineEditable ? (
+                <button
+                  type='button'
+                  aria-label='Edit note title'
+                  onPointerDown={(event) => recordEditPointerStart(event, 'title')}
+                  onClick={(event) => startEditing(event, 'title')}
+                  className={cn(
+                    'min-w-0 flex-1 cursor-text rounded-sm bg-transparent text-left outline-offset-1 focus-visible:outline-2 focus-visible:outline-current/50',
+                    !isEnabled && 'opacity-50'
+                  )}
+                >
+                  <OverflowSpan value={name ?? ''} className='truncate text-current text-md' />
+                </button>
+              ) : (
+                <OverflowSpan
+                  value={name ?? ''}
+                  className={cn('truncate text-current text-md', !isEnabled && 'opacity-50')}
+                />
+              )}
+            </div>
+            {canEdit && onExpandedChange && (
+              <Tooltip.Root preferAbove>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    aria-label={isExpanded ? 'Collapse note' : 'Expand note'}
+                    aria-pressed={isExpanded}
+                    onPointerDown={(event) => event.stopPropagation()}
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      onExpandedChange(!isExpanded)
+                    }}
+                    className='nodrag nopan nowheel pointer-events-none ml-1 size-[24px] shrink-0 rounded-md border-none bg-transparent p-0 text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
+                  >
+                    <span className='relative size-[14px]'>
+                      <Expand
+                        className={cn(
+                          'absolute inset-0 size-[14px] transition-[opacity,scale,filter] duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+                          isExpanded
+                            ? 'scale-[0.25] opacity-0 blur-[4px]'
+                            : 'scale-100 opacity-100 blur-0'
+                        )}
+                      />
+                      <ChevronsDownUp
+                        className={cn(
+                          'absolute inset-0 size-[14px] transition-[opacity,scale,filter] duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
+                          isExpanded
+                            ? 'scale-100 opacity-100 blur-0'
+                            : 'scale-[0.25] opacity-0 blur-[4px]'
+                        )}
+                      />
+                    </span>
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='right'>
+                  {isExpanded ? 'Collapse note' : 'Expand note'}
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
           </div>
-        </div>
 
-        <div className='relative overflow-hidden p-2'>
-          <div className='relative max-w-full break-all'>
-            {isEmpty ? (
-              <p className='text-[var(--text-placeholder)] text-sm'>Add note…</p>
+          <div
+            ref={setScrollRegion}
+            data-note-scroll-region=''
+            role='region'
+            aria-label={`${name || 'Note'} content`}
+            tabIndex={hasVisualFocus && !canEdit && !isEmpty ? 0 : -1}
+            onScroll={updateScrollFades}
+            className={cn(
+              'scrollbar-none relative z-10 h-[calc(100%_-_40px)] max-w-full overflow-x-hidden break-words px-2 pt-0 pb-0 text-current [contain:layout]',
+              isContentScrollable &&
+                editingField !== 'content' &&
+                'nowheel allow-scroll touch-pan-y',
+              !isEmpty && editingField !== 'content' && 'overflow-y-auto',
+              editingField === 'content' &&
+                (hasCustomContentEditor
+                  ? 'nowheel allow-scroll touch-pan-y overflow-y-auto'
+                  : 'overflow-hidden'),
+              editingField !== 'content' &&
+                canScrollUp &&
+                canScrollDown && [
+                  '[-webkit-mask-image:linear-gradient(to_bottom,transparent_0px,black_12px,black_calc(100%_-_12px),transparent_100%)]',
+                  '[mask-image:linear-gradient(to_bottom,transparent_0px,black_12px,black_calc(100%_-_12px),transparent_100%)]',
+                ],
+              editingField !== 'content' &&
+                canScrollUp &&
+                !canScrollDown && [
+                  '[-webkit-mask-image:linear-gradient(to_bottom,transparent_0px,black_12px)]',
+                  '[mask-image:linear-gradient(to_bottom,transparent_0px,black_12px)]',
+                ],
+              editingField !== 'content' &&
+                !canScrollUp &&
+                canScrollDown && [
+                  '[-webkit-mask-image:linear-gradient(to_bottom,black_calc(100%_-_12px),transparent_100%)]',
+                  '[mask-image:linear-gradient(to_bottom,black_calc(100%_-_12px),transparent_100%)]',
+                ],
+              !isEnabled && 'opacity-50'
+            )}
+          >
+            {editingField === 'content' && renderContentEditor ? (
+              <div
+                ref={contentEditorRef}
+                className='nodrag nopan nowheel min-h-full w-full'
+                onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+              >
+                {renderContentEditor({
+                  value: draftContent,
+                  selectionClassName: colorOption.selectionClassName,
+                  onChange: (nextContent) => {
+                    setDraftContent(nextContent)
+                    onContentChange?.(nextContent)
+                  },
+                  onBlur: () => setEditingField(null),
+                  onCancel: () => setEditingField(null),
+                })}
+              </div>
+            ) : editingField === 'content' ? (
+              <textarea
+                ref={contentInputRef}
+                aria-label='Note content'
+                placeholder='Add note…'
+                value={draftContent}
+                onChange={(event) => {
+                  const nextContent = event.target.value
+                  setDraftContent(nextContent)
+                  onContentChange?.(nextContent)
+                }}
+                onBlur={() => setEditingField(null)}
+                onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onKeyDown={(event) => {
+                  if (event.key === 'Escape' || (event.key === 'Enter' && event.metaKey)) {
+                    event.preventDefault()
+                    setEditingField(null)
+                  }
+                }}
+                className={cn(
+                  'nodrag nopan nowheel scrollbar-none h-full w-full select-text resize-none border-none bg-transparent px-0 pt-0.5 pb-2 text-current text-sm leading-[1.25rem] caret-current outline-none focus-visible:outline-none',
+                  colorOption.inputPlaceholderClassName,
+                  colorOption.selectionClassName
+                )}
+              />
             ) : (
-              <NoteMarkdown content={content} />
+              <>
+                {isInlineEditable && (
+                  <button
+                    type='button'
+                    aria-label='Edit note content'
+                    onPointerDown={(event) => recordEditPointerStart(event, 'content')}
+                    onClick={(event) => startEditing(event, 'content')}
+                    className='absolute inset-0 z-20 w-full cursor-text rounded-sm bg-transparent outline-offset-1 focus-visible:outline-2 focus-visible:outline-current/50'
+                  />
+                )}
+                <div
+                  ref={contentMeasureRef}
+                  className={cn(
+                    'relative max-w-full pt-0.5 pb-2',
+                    !isExpanded && 'pointer-events-none'
+                  )}
+                >
+                  {isEmpty ? (
+                    <p className={cn('text-sm', colorOption.placeholderClassName)}>Add note…</p>
+                  ) : (
+                    <NoteMarkdown content={content} />
+                  )}
+                </div>
+              </>
             )}
           </div>
         </div>
-        {hasRing && (
-          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
-        )}
       </div>
     </div>
   )
diff --git a/packages/workflow-renderer/src/note/note-colors.ts b/packages/workflow-renderer/src/note/note-colors.ts
new file mode 100644
index 00000000000..7347775b207
--- /dev/null
+++ b/packages/workflow-renderer/src/note/note-colors.ts
@@ -0,0 +1,50 @@
+export const NOTE_COLOR_OPTIONS = [
+  {
+    id: 'white',
+    label: 'White',
+    fill: '#FFFFFF',
+    hoverSilhouetteColor: undefined,
+    selectedSilhouetteColor: undefined,
+    textClassName: 'text-black/75 hover:text-[#171717]',
+    placeholderClassName: 'text-black/45',
+    inputPlaceholderClassName: 'placeholder:text-black/45',
+    selectionClassName: 'selection:bg-black/15',
+    swatchClassName: 'bg-white',
+  },
+  {
+    id: 'light-gray',
+    label: 'Light gray',
+    fill: '#E5E5E5',
+    hoverSilhouetteColor: '#D4D4D4',
+    selectedSilhouetteColor: undefined,
+    textClassName: 'text-black/75 hover:text-[#171717]',
+    placeholderClassName: 'text-black/45',
+    inputPlaceholderClassName: 'placeholder:text-black/45',
+    selectionClassName: 'selection:bg-black/15',
+    swatchClassName: 'bg-[#E5E5E5]',
+  },
+  {
+    id: 'carbon',
+    label: 'Graphite',
+    fill: '#525252',
+    hoverSilhouetteColor: undefined,
+    selectedSilhouetteColor: '#3F3F3F',
+    textClassName: 'text-white/75 hover:text-white',
+    placeholderClassName: 'text-white/55',
+    inputPlaceholderClassName: 'placeholder:text-white/55',
+    selectionClassName: 'selection:bg-white/25',
+    swatchClassName: 'bg-[#525252]',
+  },
+] as const
+
+export type NoteColor = (typeof NOTE_COLOR_OPTIONS)[number]['id']
+
+export const DEFAULT_NOTE_COLOR: NoteColor = 'carbon'
+
+export function isNoteColor(value: unknown): value is NoteColor {
+  return NOTE_COLOR_OPTIONS.some((option) => option.id === value)
+}
+
+export function getNoteColorOption(color: NoteColor) {
+  return NOTE_COLOR_OPTIONS.find((option) => option.id === color) ?? NOTE_COLOR_OPTIONS[2]
+}
diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
index 691a2c6e609..2d92c61f99b 100644
--- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
+++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
@@ -1,11 +1,29 @@
-import type { ReactNode } from 'react'
-import { Badge, cn, handleKeyboardActivation } from '@sim/emcn'
-import { Repeat, Split } from '@sim/emcn/icons'
-import { Handle, Position } from 'reactflow'
-import { HANDLE_POSITIONS } from '../dimensions'
+import { type ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { ChipTag, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
+import { Ban, Lock, Repeat, Split } from '@sim/emcn/icons'
+import {
+  Handle,
+  internalsSymbol,
+  Position,
+  useStoreApi as useReactFlowStoreApi,
+  useUpdateNodeInternals,
+} from 'reactflow'
+import { BLOCK_DIMENSIONS } from '../dimensions'
 import { OverflowSpan } from '../lib/overflow-span'
-import { tileIconColorClass } from '../lib/tile-icon-color'
-import type { BlockRunStatus, DiffStatus } from '../types'
+import type { DiffStatus } from '../types'
+import {
+  getCursorSourceHandleId,
+  getCursorSourceHandlePosition,
+} from '../workflow-block/source-handle'
+import { useActionMenuSwell } from '../workflow-block/use-action-menu-swell'
+import {
+  CONNECTION_KNOB_PEAK_PX,
+  CURSOR_SWELL_LENGTH_PX,
+  WorkflowBlockBorder,
+  type WorkflowBorderCursorHandle,
+  type WorkflowBorderPort,
+} from '../workflow-block/workflow-block-border'
+import { getWorkflowTypeAccent } from '../workflow-block/workflow-block-view'
 
 /** Data attached to loop/parallel container nodes. */
 export interface SubflowNodeData {
@@ -42,8 +60,12 @@ export interface SubflowNodeViewProps {
   isLocked: boolean
   /** Whether this subflow is the focused block in the editor panel. */
   isFocused: boolean
-  /** Resolved run-path outcome for the execution ring. */
-  runPathStatus?: BlockRunStatus
+  /** Whether execution controls are active for this subflow. */
+  isRunning?: boolean
+  /** Whether the parent workflow is executing. Holds every subflow action swell open. */
+  isWorkflowRunning?: boolean
+  /** Whether this subflow participates in the current execution handoff. */
+  isExecutionHighlighted?: boolean
   /** Diff state when comparing workflow versions. */
   diffStatus?: DiffStatus
   /** Depth in the parent container hierarchy (drives nesting styling). */
@@ -55,23 +77,134 @@ export interface SubflowNodeViewProps {
   actionBar?: ReactNode
 }
 
+const SUBFLOW_CORNER_RADIUS_PX = 16
+const START_WIDTH_PX = 58
+const START_HEIGHT_PX = 34
+const START_TOP_OFFSET_PX = 12
+const START_CORNER_RADIUS_PX = 8
+const START_CURSOR_SIDES = ['right'] as const
+/** Aligns the outer input/output ports with the centre of the inset Start card. */
+const SUBFLOW_CONNECTION_Y_PX =
+  BLOCK_DIMENSIONS.HEADER_HEIGHT + START_TOP_OFFSET_PX + START_HEIGHT_PX / 2
 const HANDLE_STYLE = {
-  top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
+  top: `${SUBFLOW_CONNECTION_Y_PX}px`,
   transform: 'translateY(-50%)',
 } as const
+const ACTION_MENU_RIGHT_INSET_PX = 24
+const ACTION_MENU_AMPLITUDE = 7
+const CURSOR_HANDLE_CROSS_PX = CONNECTION_KNOB_PEAK_PX * 2
 
-/** Reusable handle classes, matching the workflow-block handle styling. */
+interface SubflowCursorSourceHandle extends WorkflowBorderCursorHandle {
+  handleId: string
+}
+
+const getCursorHandleSize = (side: WorkflowBorderCursorHandle['edgeSide']) =>
+  side === 'top' || side === 'bottom'
+    ? { width: CURSOR_SWELL_LENGTH_PX, height: CURSOR_HANDLE_CROSS_PX }
+    : { width: CURSOR_HANDLE_CROSS_PX, height: CURSOR_SWELL_LENGTH_PX }
+
+/** Invisible React Flow handles aligned with the painted connection knobs. */
 const getHandleClasses = (position: 'left' | 'right') => {
-  const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-  const colorClasses = '!bg-[var(--workflow-edge)]'
+  const baseClasses =
+    '!z-20 !h-[38px] !w-[14px] !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
 
   const positionClasses = {
-    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
-    right:
-      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
+    left: '!left-[-7px]',
+    right: '!right-[-7px]',
   }
 
-  return cn(baseClasses, colorClasses, positionClasses[position])
+  return cn(baseClasses, positionClasses[position])
+}
+
+interface SubflowStateIndicatorProps {
+  label: string
+  Icon: typeof Ban
+}
+
+/** Compact disabled/locked marker aligned with the standard workflow-card header. */
+function SubflowStateIndicator({ label, Icon }: SubflowStateIndicatorProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <ChipTag
+          variant='workflow'
+          tone='neutral'
+          className='size-5 flex-shrink-0 justify-center p-0'
+          aria-label={label}
+        >
+          <Icon className='size-[12px] flex-shrink-0' />
+        </ChipTag>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        <span className='text-sm'>{label}</span>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
+interface SubflowStartViewProps {
+  parentId: string
+  kind: SubflowNodeData['kind']
+  isPreview?: boolean
+  isHighlighted?: boolean
+}
+
+/** Start control shared by editable and preview subflow containers. */
+export function SubflowStartView({
+  parentId,
+  kind,
+  isPreview = false,
+  isHighlighted = false,
+}: SubflowStartViewProps) {
+  const startHandleId = kind === 'loop' ? 'loop-start-source' : 'parallel-start-source'
+  const ports = useMemo<WorkflowBorderPort[]>(
+    () => [
+      {
+        id: startHandleId,
+        side: 'right',
+        position: 'center',
+        plateau: CURSOR_SWELL_LENGTH_PX,
+        color: isHighlighted ? 'var(--text-secondary)' : undefined,
+      },
+    ],
+    [isHighlighted, startHandleId]
+  )
+
+  return (
+    <div
+      className='absolute top-3 left-[16px] flex h-[34px] w-[58px] items-center justify-center rounded-lg'
+      style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
+      data-parent-id={parentId}
+      data-node-role={`${kind}-start`}
+      data-extent='parent'
+      data-connection-swell=''
+    >
+      <WorkflowBlockBorder
+        nodeId={parentId}
+        ports={ports}
+        cursorSwellEnabled={!isPreview}
+        cursorSwellSides={START_CURSOR_SIDES}
+        radius={START_CORNER_RADIUS_PX}
+        hasRing={false}
+        ringStyles=''
+        width={START_WIDTH_PX}
+        height={START_HEIGHT_PX}
+      />
+      <span className='relative z-10 font-medium text-[var(--text-primary)] text-sm'>Start</span>
+      <Handle
+        type='source'
+        position={Position.Right}
+        id={startHandleId}
+        className={getHandleClasses('right')}
+        style={{
+          top: '50%',
+          transform: 'translateY(-50%)',
+          pointerEvents: 'auto',
+        }}
+        data-parent-id={parentId}
+      />
+    </div>
+  )
 }
 
 /**
@@ -86,100 +219,290 @@ export function SubflowNodeView({
   isEnabled,
   isLocked,
   isFocused,
-  runPathStatus,
+  isRunning = false,
+  isWorkflowRunning = false,
+  isExecutionHighlighted = false,
   diffStatus,
   nestingLevel,
   canEditWorkflow,
   onSelect,
   actionBar,
 }: SubflowNodeViewProps) {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const reactFlowStore = useReactFlowStoreApi()
+  const cursorSourceHandleRef = useRef<HTMLDivElement>(null)
+  const cursorSourceHandleKeyRef = useRef<string | null>(null)
+  const [cursorSourceHandle, setCursorSourceHandle] = useState<SubflowCursorSourceHandle | null>(
+    null
+  )
   const isPreview = data?.isPreview || false
   const isPreviewSelected = data?.isPreviewSelected || false
-  const executionStatus = data.executionStatus
 
-  const startHandleId = data.kind === 'loop' ? 'loop-start-source' : 'parallel-start-source'
   const endHandleId = data.kind === 'loop' ? 'loop-end-source' : 'parallel-end-source'
   const BlockIcon = data.kind === 'loop' ? Repeat : Split
-  const blockIconBg = data.kind === 'loop' ? '#2FB3FF' : '#FEE12B'
   const blockName = data.name || (data.kind === 'loop' ? 'Loop' : 'Parallel')
+  const blockTypeLabel = data.kind === 'loop' ? 'Loop' : 'Parallel'
+  const blockTypeAccent = getWorkflowTypeAccent(data.kind)
+  const width = data.width ?? 500
+  const height = data.height ?? 300
+
+  const getConnectionNodeId = useCallback(
+    () => reactFlowStore.getState().connectionNodeId,
+    [reactFlowStore]
+  )
+
+  const onCursorHandleChange = useCallback((nextHandle: WorkflowBorderCursorHandle | null) => {
+    if (!nextHandle) {
+      if (cursorSourceHandleKeyRef.current === null) return
+      cursorSourceHandleKeyRef.current = null
+      setCursorSourceHandle(null)
+      return
+    }
+
+    const handleId = getCursorSourceHandleId(nextHandle.side)
+    const handleElement = cursorSourceHandleRef.current
+    if (handleElement) {
+      handleElement.style.left = `${nextHandle.x}px`
+      handleElement.style.top = `${nextHandle.y}px`
+    }
+
+    const nextKey = `${handleId}:${nextHandle.edgeSide}`
+    if (cursorSourceHandleKeyRef.current !== nextKey) {
+      cursorSourceHandleKeyRef.current = nextKey
+      setCursorSourceHandle({ ...nextHandle, handleId })
+    }
+  }, [])
+
+  /** Aligns React Flow's cached handle origin before a cursor-swell drag begins. */
+  const syncCursorSourceHandleBounds = useCallback(() => {
+    const handleElement = cursorSourceHandleRef.current
+    const nodeElement = handleElement?.closest<HTMLDivElement>('.react-flow__node') ?? null
+    if (!handleElement || !nodeElement) return
+
+    const state = reactFlowStore.getState()
+    const sourceBounds = state.nodeInternals.get(id)?.[internalsSymbol]?.handleBounds?.source
+    const handleId = handleElement.dataset.handleid
+    const handlePosition = handleElement.dataset.handlepos as Position | undefined
+    const zoom = state.transform[2]
+    if (!sourceBounds || !handleId || !handlePosition || zoom <= 0) return
+
+    const nodeBounds = nodeElement.getBoundingClientRect()
+    const handleBounds = handleElement.getBoundingClientRect()
+    const [originX, originY] = state.nodeOrigin
+    const nextBounds = {
+      id: handleId,
+      position: handlePosition,
+      x: (handleBounds.left - nodeBounds.left - nodeBounds.width * originX) / zoom,
+      y: (handleBounds.top - nodeBounds.top - nodeBounds.height * originY) / zoom,
+      width: handleElement.offsetWidth,
+      height: handleElement.offsetHeight,
+    }
+    const currentBounds = sourceBounds.find((bounds) => bounds.id === handleId)
+    if (currentBounds) {
+      Object.assign(currentBounds, nextBounds)
+      return
+    }
+    sourceBounds.push(nextBounds)
+  }, [id, reactFlowStore])
+
+  useLayoutEffect(() => {
+    updateNodeInternals(id)
+  }, [cursorSourceHandle?.handleId, cursorSourceHandle?.side, id, updateNodeInternals])
 
   const isSelected = !isPreview && selected
-  const hasRing =
-    isFocused ||
-    isSelected ||
-    isPreviewSelected ||
+  const isNodeSelected = Boolean(isFocused || isSelected || isPreviewSelected)
+  const usesSelectedVisuals = isNodeSelected || isExecutionHighlighted
+  const previewRunStatus = isPreview ? data.executionStatus : undefined
+  const hasStatusRing =
     diffStatus === 'new' ||
     diffStatus === 'edited' ||
-    !!runPathStatus
-
-  /**
-   * Ring color priority: selection (blue) → diff (green/orange) → run-path
-   * (green/red). Uses boxShadow (not outline) so child nodes rendered as
-   * viewport-level siblings by ReactFlow don't clip the parent's ring.
-   */
-  const getRingColor = (): string | undefined => {
-    if (!hasRing) return undefined
-    if (isFocused || isSelected || isPreviewSelected) return 'var(--brand-secondary)'
-    if (diffStatus === 'new') return 'var(--brand-accent)'
-    if (diffStatus === 'edited') return 'var(--warning)'
-    if (runPathStatus === 'success') {
-      return executionStatus ? 'var(--brand-accent)' : 'var(--border-success)'
+    previewRunStatus === 'success' ||
+    previewRunStatus === 'error'
+  const hasRing = isNodeSelected || hasStatusRing
+  const ringStyles = isNodeSelected
+    ? 'ring-[1.5px] ring-[var(--text-secondary)]'
+    : diffStatus === 'new'
+      ? 'ring-[1.5px] ring-[var(--brand-accent)]'
+      : diffStatus === 'edited'
+        ? 'ring-[1.5px] ring-[var(--warning)]'
+        : previewRunStatus === 'success'
+          ? 'ring-[1.5px] ring-[var(--brand-accent)]'
+          : previewRunStatus === 'error'
+            ? 'ring-[1.5px] ring-[var(--text-error)]'
+            : ''
+
+  const showActionMenu = Boolean(actionBar) && !isPreview
+  const {
+    rootRef: actionMenuRootRef,
+    hostRef: actionMenuHostRef,
+    width: actionMenuWidth,
+    swellOpen: actionMenuSwellOpen,
+    contentVisible: actionMenuContentVisible,
+    setReady: setActionMenuSwellReady,
+    onFocusCapture: handleActionMenuFocus,
+    onBlurCapture: handleActionMenuBlur,
+  } = useActionMenuSwell({
+    enabled: showActionMenu,
+    forceOpen: isExecutionHighlighted || isRunning || isWorkflowRunning,
+    suspendInteraction: isRunning || isWorkflowRunning,
+    suppressNestedNodeHover: true,
+  })
+
+  const borderPorts = useMemo<WorkflowBorderPort[]>(() => {
+    const ports: WorkflowBorderPort[] = [
+      {
+        id: 'target',
+        side: 'left',
+        position: SUBFLOW_CONNECTION_Y_PX,
+        plateau: CURSOR_SWELL_LENGTH_PX,
+      },
+      {
+        id: endHandleId,
+        side: 'right',
+        position: SUBFLOW_CONNECTION_Y_PX,
+        plateau: CURSOR_SWELL_LENGTH_PX,
+      },
+    ]
+
+    if (showActionMenu) {
+      ports.push({
+        id: 'action-menu',
+        side: 'top',
+        position: { fromEnd: ACTION_MENU_RIGHT_INSET_PX + actionMenuWidth / 2 },
+        plateau: actionMenuWidth,
+        restAmplitude: actionMenuSwellOpen ? ACTION_MENU_AMPLITUDE : 0,
+        hoverAmplitude: ACTION_MENU_AMPLITUDE,
+        magnetizable: false,
+      })
     }
-    if (runPathStatus === 'error') return 'var(--text-error)'
-    return undefined
-  }
-  const ringColor = getRingColor()
+
+    return ports
+  }, [actionMenuSwellOpen, actionMenuWidth, endHandleId, showActionMenu])
 
   return (
-    <div className='group pointer-events-none relative'>
+    <div
+      ref={actionMenuRootRef}
+      className='group pointer-events-none relative'
+      data-action-menu-ready={actionMenuContentVisible ? '' : undefined}
+      data-action-menu-open={actionMenuSwellOpen ? '' : undefined}
+      data-node-selected={usesSelectedVisuals ? '' : undefined}
+      data-execution-highlighted={isExecutionHighlighted ? '' : undefined}
+    >
+      {showActionMenu && (
+        <>
+          <div
+            aria-hidden='true'
+            data-workflow-action-bar-bridge=''
+            className='-top-[28px] pointer-events-auto absolute right-0 z-10 h-[28px] w-[240px]'
+          />
+          <div
+            ref={actionMenuHostRef}
+            onFocusCapture={handleActionMenuFocus}
+            onBlurCapture={handleActionMenuBlur}
+          >
+            {actionBar}
+          </div>
+        </>
+      )}
       <div
-        className='relative select-none rounded-lg border border-[var(--border-1)] transition-block-bg'
+        className='relative select-none rounded-2xl'
         style={{
-          width: data.width || 500,
-          height: data.height || 300,
+          width,
+          height,
           overflow: 'visible',
           pointerEvents: 'none',
-          ...(ringColor && {
-            boxShadow: `0 0 0 1.75px ${ringColor}`,
-          }),
         }}
         data-node-id={id}
         data-type='subflowNode'
         data-nesting-level={nestingLevel}
-        data-subflow-selected={isFocused || isSelected || isPreviewSelected}
+        data-subflow-selected={isNodeSelected}
       >
-        {!isPreview && actionBar}
+        <div
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-0 z-40 rounded-2xl opacity-0 ring-[1.5px] ring-[var(--text-secondary)] transition-opacity duration-100 [.subflow-node-drop-target_&]:opacity-100'
+          data-subflow-drop-target-outline=''
+        />
+
+        <WorkflowBlockBorder
+          nodeId={id}
+          getConnectionNodeId={getConnectionNodeId}
+          ports={borderPorts}
+          cursorSwellEnabled={!isPreview}
+          onCursorHandleChange={!isPreview ? onCursorHandleChange : undefined}
+          radius={SUBFLOW_CORNER_RADIUS_PX}
+          hasRing={hasRing || isExecutionHighlighted}
+          ringStyles={
+            isExecutionHighlighted ? 'ring-[1.5px] ring-[var(--text-secondary)]' : ringStyles
+          }
+          isSelected={usesSelectedVisuals}
+          bodyFill={data.kind === 'loop' ? 'var(--surface-3)' : undefined}
+          width={width}
+          height={height}
+          onActionMenuReadyChange={setActionMenuSwellReady}
+        />
+
+        {cursorSourceHandle && !isPreview && (
+          <Handle
+            ref={cursorSourceHandleRef}
+            type='source'
+            position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
+            id={cursorSourceHandle.handleId}
+            className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            style={{
+              right: 'auto',
+              bottom: 'auto',
+              left: cursorSourceHandle.x,
+              top: cursorSourceHandle.y,
+              transform: 'translate(-50%, -50%)',
+              pointerEvents: 'auto',
+              ...getCursorHandleSize(cursorSourceHandle.edgeSide),
+            }}
+            data-nodeid={id}
+            data-handleid={cursorSourceHandle.handleId}
+            data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
+            data-workflow-cursor-source-side={cursorSourceHandle.side}
+            isConnectableStart={true}
+            isConnectableEnd={false}
+            onPointerDownCapture={syncCursorSourceHandleBounds}
+          />
+        )}
 
-        {/* Header Section */}
         <div
           role='button'
           tabIndex={0}
           aria-label={`Select ${blockName}`}
           onClick={onSelect}
           onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
-          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2 [&:active]:cursor-grabbing'
+          className='workflow-drag-handle relative z-20 flex h-[40px] cursor-grab items-center justify-between px-2 [&:active]:cursor-grabbing'
           style={{ pointerEvents: 'auto' }}
+          data-subflow-header=''
         >
-          <div className='flex min-w-0 flex-1 items-center gap-2.5'>
-            <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center rounded-md'
-              style={{ backgroundColor: isEnabled ? blockIconBg : 'gray' }}
-            >
-              <BlockIcon
-                className={cn(
-                  'size-[16px]',
-                  isEnabled ? tileIconColorClass(blockIconBg) : 'text-[var(--text-icon)]'
-                )}
-              />
-            </div>
+          <div
+            className={cn(
+              'relative z-10 flex min-w-0 flex-1 items-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              !isEnabled && 'opacity-50'
+            )}
+          >
             <OverflowSpan
               value={blockName}
               className={cn('truncate text-md', !isEnabled && 'text-[var(--text-muted)]')}
             />
           </div>
-          <div className='flex items-center gap-1'>
-            {!isEnabled && <Badge variant='gray-secondary'>disabled</Badge>}
-            {isLocked && <Badge variant='gray-secondary'>locked</Badge>}
+          <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
+            {!isEnabled && <SubflowStateIndicator label='Disabled' Icon={Ban} />}
+            {isLocked && <SubflowStateIndicator label='Locked' Icon={Lock} />}
+            <ChipTag
+              variant={blockTypeAccent.variant}
+              tone={blockTypeAccent.tone}
+              className={cn(
+                'flex-shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+                !isEnabled && 'opacity-50'
+              )}
+              data-subflow-type-tag={data.kind}
+            >
+              <BlockIcon className='size-[14px] flex-shrink-0' />
+              {blockTypeLabel}
+            </ChipTag>
           </div>
         </div>
 
@@ -193,7 +516,7 @@ export function SubflowNodeView({
           role='button'
           tabIndex={isPreview ? -1 : 0}
           aria-label={`Select ${blockName}`}
-          className='workflow-drag-handle absolute inset-0 top-[44px] cursor-grab rounded-b-[8px] [&:active]:cursor-grabbing'
+          className='workflow-drag-handle absolute inset-0 top-[40px] z-10 cursor-grab rounded-b-2xl [&:active]:cursor-grabbing'
           style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
           onClick={onSelect}
           onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
@@ -209,39 +532,23 @@ export function SubflowNodeView({
         )}
 
         <div
-          className='relative h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
+          className='relative z-20 h-[calc(100%-40px)] pt-4 pr-[80px] pb-4 pl-4'
           data-dragarea='true'
           style={{ pointerEvents: 'none' }}
         >
-          {/* Subflow Start */}
-          <div
-            className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'
-            style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
-            data-parent-id={id}
-            data-node-role={`${data.kind}-start`}
-            data-extent='parent'
-          >
-            <span className='text-[var(--text-primary)] text-sm'>Start</span>
-
-            <Handle
-              type='source'
-              position={Position.Right}
-              id={startHandleId}
-              className={getHandleClasses('right')}
-              style={{
-                top: '50%',
-                transform: 'translateY(-50%)',
-                pointerEvents: 'auto',
-              }}
-              data-parent-id={id}
-            />
-          </div>
+          <SubflowStartView
+            parentId={id}
+            kind={data.kind}
+            isPreview={isPreview}
+            isHighlighted={isNodeSelected}
+          />
         </div>
 
         {/* Input handle on left middle */}
         <Handle
           type='target'
           position={Position.Left}
+          id='target'
           className={getHandleClasses('left')}
           style={{
             ...HANDLE_STYLE,
diff --git a/packages/workflow-renderer/src/workflow-block/source-handle.ts b/packages/workflow-renderer/src/workflow-block/source-handle.ts
new file mode 100644
index 00000000000..5238f6899a1
--- /dev/null
+++ b/packages/workflow-renderer/src/workflow-block/source-handle.ts
@@ -0,0 +1,53 @@
+import {
+  getPositionedSourceHandleId,
+  type PositionedSourceHandleSide,
+  type WorkflowCardSide,
+} from '@sim/workflow-types/workflow'
+import { Position } from 'reactflow'
+
+export const CURSOR_SOURCE_HANDLE_ID = 'source-cursor'
+const CURSOR_BRANCH_SOURCE_HANDLE_PREFIX = `${CURSOR_SOURCE_HANDLE_ID}-branch-`
+
+/** Returns the temporary React Flow handle ID under the cursor swell. */
+export function getCursorSourceHandleId(side: PositionedSourceHandleSide): string {
+  return `${CURSOR_SOURCE_HANDLE_ID}-${side}`
+}
+
+/** Keeps a branch output distinct while its temporary handle follows the cursor swell. */
+export function getCursorBranchSourceHandleId(branchHandleId: string): string {
+  return `${CURSOR_BRANCH_SOURCE_HANDLE_PREFIX}${branchHandleId}`
+}
+
+/** Uses the physical swell edge for the temporary preview's exit direction. */
+export function getCursorSourceHandlePosition(side: WorkflowCardSide): Position {
+  if (side === 'top') return Position.Top
+  if (side === 'bottom') return Position.Bottom
+  if (side === 'left') return Position.Left
+  return Position.Right
+}
+
+/**
+ * Converts a temporary cursor handle into its persistent anchor.
+ *
+ * Outputs always leave from the right. The swell lets a drag START on any
+ * edge — including the left, which is the input side — but the connection it
+ * creates is an output, so it anchors right regardless of where the gesture
+ * began. Loop and parallel containers retain their semantic end handles;
+ * regular cards use the canonical positioned right anchor.
+ */
+export function normalizeCursorSourceHandleId(
+  handleId: string | null | undefined,
+  blockType?: string
+): string | null | undefined {
+  if (handleId?.startsWith(CURSOR_BRANCH_SOURCE_HANDLE_PREFIX)) {
+    return handleId.slice(CURSOR_BRANCH_SOURCE_HANDLE_PREFIX.length)
+  }
+
+  const prefix = `${CURSOR_SOURCE_HANDLE_ID}-`
+  if (!handleId?.startsWith(prefix)) return handleId
+
+  if (blockType === 'loop') return 'loop-end-source'
+  if (blockType === 'parallel') return 'parallel-end-source'
+
+  return getPositionedSourceHandleId('right')
+}
diff --git a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
index 9fac04f93f7..5118e84b078 100644
--- a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
@@ -1,4 +1,5 @@
-import { cn } from '@sim/emcn'
+import type { ComponentType } from 'react'
+import { ChipTag, cn } from '@sim/emcn'
 import { OverflowSpan } from '../lib/overflow-span'
 
 /**
@@ -8,24 +9,99 @@ import { OverflowSpan } from '../lib/overflow-span'
  * strings, so this view carries no store, query, or registry coupling.
  */
 export interface SubBlockRowViewProps {
-  /** Subblock label, rendered capitalized on the left. */
+  /** Subblock label, rendered capitalized on the left (row variant). */
   title: string
   /** Resolved display value on the right; `undefined` hides the value span. */
   displayValue?: string
   /** Render the value in a monospace font (e.g. filter expressions). */
   isMonospace?: boolean
+  /**
+   * Leading icon for the `meta` variant; without one the variant falls back
+   * to the labeled `row` presentation.
+   */
+  icon?: ComponentType<{ className?: string }>
+  /**
+   * Presentation variant:
+   * - `row` (default): label/value summary line (hover drawer, fallbacks)
+   * - `meta`: icon + value line — the collapsed card's compact fact row
+   * - `statement-primary`: strong inline fragment (the operation)
+   * - `statement-muted`: muted inline fragment (the target / model)
+   * - `inline-value`: small value chip embedded in a summary sentence
+   * - `footer`: muted footer label (the error-port row)
+   */
+  variant?: 'row' | 'meta' | 'statement-primary' | 'statement-muted' | 'inline-value' | 'footer'
 }
 
 /**
- * Pure renderer for a collapsed block's subblock summary row: a capitalized
- * title and its resolved display value.
+ * Pure renderer for a collapsed block's subblock summary: a label/value row,
+ * an icon fact row, an inline statement fragment, or the footer error label.
  *
  * The fixed `h-5` row height is part of the handle-position contract —
  * `HANDLE_POSITIONS.CONDITION_ROW_HEIGHT` in dimensions.ts assumes a 20px row
  * plus the container's 8px gap, so condition/router source handles align with
  * their rows.
  */
-export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
+export function SubBlockRowView({
+  title,
+  displayValue,
+  isMonospace,
+  icon: Icon,
+  variant = 'row',
+}: SubBlockRowViewProps) {
+  if (variant === 'inline-value') {
+    return (
+      <ChipTag
+        variant='mono'
+        className='inline-flex max-w-[160px] translate-y-[-1px] bg-[var(--surface-2)] align-middle shadow-[inset_0_0_0_1px_var(--border-1)] dark:bg-[var(--surface-2)]'
+      >
+        <OverflowSpan
+          value={displayValue ?? title}
+          className={cn('min-w-0 truncate', isMonospace && 'font-mono')}
+        />
+      </ChipTag>
+    )
+  }
+
+  if (variant === 'statement-primary' || variant === 'statement-muted') {
+    return (
+      <OverflowSpan
+        value={displayValue ?? title}
+        className={cn(
+          'min-w-0 truncate text-sm',
+          variant === 'statement-primary'
+            ? 'font-medium text-[var(--text-primary)]'
+            : 'text-[var(--text-muted)]'
+        )}
+      />
+    )
+  }
+
+  if (variant === 'meta' && Icon) {
+    return (
+      <div className='flex min-w-0 items-center gap-2'>
+        <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <OverflowSpan
+          value={displayValue ?? '-'}
+          className={cn(
+            'min-w-0 flex-1 truncate text-left text-[var(--text-primary)] text-sm',
+            isMonospace && 'font-mono'
+          )}
+        />
+      </div>
+    )
+  }
+
+  if (variant === 'footer') {
+    return (
+      <div className='flex items-center'>
+        <OverflowSpan
+          value={title}
+          className='min-w-0 truncate text-[var(--text-muted)] text-sm capitalize'
+        />
+      </div>
+    )
+  }
+
   return (
     <div className='flex h-5 items-center gap-2'>
       <OverflowSpan
diff --git a/packages/workflow-renderer/src/workflow-block/use-action-menu-swell.ts b/packages/workflow-renderer/src/workflow-block/use-action-menu-swell.ts
new file mode 100644
index 00000000000..e328f153d31
--- /dev/null
+++ b/packages/workflow-renderer/src/workflow-block/use-action-menu-swell.ts
@@ -0,0 +1,193 @@
+import { type FocusEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+const ACTION_MENU_FALLBACK_WIDTH_PX = 132
+const ACTION_MENU_CLOSE_RETRACT_DELAY_MS = 40
+const ACTION_MENU_HOVER_LEAVE_DELAY_MS = 100
+const ACTION_MENU_HOVER_TOP_PAD_PX = 28
+
+interface UseActionMenuSwellProps {
+  enabled: boolean
+  forceOpen: boolean
+  maxWidth?: number
+  /** Ignore stale hover and focus while an external state, such as execution, owns the swell. */
+  suspendInteraction?: boolean
+  /** Give nested React Flow nodes exclusive hover ownership over their own action menus. */
+  suppressNestedNodeHover?: boolean
+}
+
+/**
+ * Keeps the action-menu silhouette, its measured icon row, and hover/focus
+ * state synchronized for every workflow node shape that uses the shared border.
+ */
+export function useActionMenuSwell({
+  enabled,
+  forceOpen,
+  maxWidth,
+  suspendInteraction = false,
+  suppressNestedNodeHover = false,
+}: UseActionMenuSwellProps) {
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const hostRef = useRef<HTMLDivElement>(null)
+  const hoverLeaveTimeoutRef = useRef<number | null>(null)
+  const hoverMoveRef = useRef<((event: PointerEvent) => void) | null>(null)
+  const [width, setWidth] = useState(ACTION_MENU_FALLBACK_WIDTH_PX)
+  const [isReady, setIsReady] = useState(false)
+  const keepOpen = isFocused || isHovered || forceOpen
+  const contentVisible = keepOpen && isReady
+  const [swellOpen, setSwellOpen] = useState(keepOpen)
+
+  useEffect(() => {
+    if (!suspendInteraction) return
+    setIsFocused(false)
+    setIsHovered(false)
+  }, [suspendInteraction])
+
+  useEffect(() => {
+    if (keepOpen) {
+      setSwellOpen(true)
+      return
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setSwellOpen(false)
+    }, ACTION_MENU_CLOSE_RETRACT_DELAY_MS)
+    return () => window.clearTimeout(timeoutId)
+  }, [keepOpen])
+
+  useEffect(() => {
+    if (!enabled || suspendInteraction) return
+
+    const clearHoverLeave = () => {
+      if (hoverLeaveTimeoutRef.current !== null) {
+        window.clearTimeout(hoverLeaveTimeoutRef.current)
+        hoverLeaveTimeoutRef.current = null
+      }
+      if (hoverMoveRef.current) {
+        window.removeEventListener('pointermove', hoverMoveRef.current)
+        hoverMoveRef.current = null
+      }
+    }
+
+    const root = rootRef.current
+    const nodeElement = root?.closest<HTMLElement>('.react-flow__node') ?? root
+    if (!nodeElement) return
+
+    const isOtherNodeTarget = (target: EventTarget | null) => {
+      if (!suppressNestedNodeHover || !(target instanceof Element)) return false
+      const hoveredNode = target.closest('.react-flow__node')
+      return Boolean(hoveredNode && hoveredNode !== nodeElement)
+    }
+
+    const isPointerOverActionMenu = (event: PointerEvent) => {
+      if (!root || isOtherNodeTarget(event.target)) return false
+      const rect = root.getBoundingClientRect()
+      return (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top - ACTION_MENU_HOVER_TOP_PAD_PX &&
+        event.clientY <= rect.bottom
+      )
+    }
+
+    const openHover = () => {
+      clearHoverLeave()
+      setIsHovered(true)
+      setSwellOpen(true)
+    }
+
+    const closeHoverImmediately = () => {
+      clearHoverLeave()
+      setIsHovered(false)
+      setSwellOpen(false)
+    }
+
+    const syncHoverOwner = (event: PointerEvent) => {
+      if (isOtherNodeTarget(event.target)) {
+        closeHoverImmediately()
+        return
+      }
+      openHover()
+    }
+
+    const scheduleHoverLeave = (event: PointerEvent) => {
+      if (isOtherNodeTarget(event.relatedTarget)) {
+        closeHoverImmediately()
+        return
+      }
+      if (hoverLeaveTimeoutRef.current !== null) {
+        window.clearTimeout(hoverLeaveTimeoutRef.current)
+      }
+      if (!hoverMoveRef.current) {
+        const onMove = (event: PointerEvent) => {
+          if (isOtherNodeTarget(event.target)) {
+            closeHoverImmediately()
+            return
+          }
+          if (isPointerOverActionMenu(event)) openHover()
+        }
+        hoverMoveRef.current = onMove
+        window.addEventListener('pointermove', onMove, { passive: true })
+      }
+      hoverLeaveTimeoutRef.current = window.setTimeout(() => {
+        hoverLeaveTimeoutRef.current = null
+        if (hoverMoveRef.current) {
+          window.removeEventListener('pointermove', hoverMoveRef.current)
+          hoverMoveRef.current = null
+        }
+        setIsHovered(false)
+      }, ACTION_MENU_HOVER_LEAVE_DELAY_MS)
+    }
+
+    nodeElement.addEventListener('pointerenter', openHover)
+    nodeElement.addEventListener('pointerleave', scheduleHoverLeave)
+    if (suppressNestedNodeHover) {
+      nodeElement.addEventListener('pointerover', syncHoverOwner)
+    }
+
+    return () => {
+      clearHoverLeave()
+      nodeElement.removeEventListener('pointerenter', openHover)
+      nodeElement.removeEventListener('pointerleave', scheduleHoverLeave)
+      nodeElement.removeEventListener('pointerover', syncHoverOwner)
+    }
+  }, [enabled, suppressNestedNodeHover, suspendInteraction])
+
+  useLayoutEffect(() => {
+    const actionMenu = hostRef.current?.querySelector<HTMLElement>(
+      '[data-workflow-action-bar-swell]'
+    )
+    if (!actionMenu) return
+
+    const updateWidth = () => {
+      const nextWidth = Math.min(maxWidth ?? Number.POSITIVE_INFINITY, actionMenu.offsetWidth)
+      if (nextWidth <= 0) return
+      setWidth((current) => (current === nextWidth ? current : nextWidth))
+    }
+    updateWidth()
+    const observer = new ResizeObserver(updateWidth)
+    observer.observe(actionMenu)
+    return () => observer.disconnect()
+  }, [enabled, maxWidth])
+
+  const onFocusCapture = () => {
+    if (!suspendInteraction) setIsFocused(true)
+  }
+  const onBlurCapture = (event: FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setIsFocused(false)
+    }
+  }
+
+  return {
+    rootRef,
+    hostRef,
+    width,
+    swellOpen,
+    contentVisible,
+    setReady: setIsReady,
+    onFocusCapture,
+    onBlurCapture,
+  }
+}
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
new file mode 100644
index 00000000000..ac172b2cca9
--- /dev/null
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-border.tsx
@@ -0,0 +1,1722 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import {
+  getHorizontalWorkflowHandleSide,
+  isPositionedSourceHandle,
+  type PositionedSourceHandleSide,
+  type WorkflowCardSide,
+} from '@sim/workflow-types/workflow'
+import { BLOCK_DIMENSIONS } from '../dimensions'
+
+const BORDER_PADDING_PX = 36
+const SAMPLE_SPACING_PX = 1
+/** Smallest arc-length step used to cross a floating-point segment seam. */
+const PERIMETER_CURSOR_EPSILON_PX = 0.0001
+/**
+ * How far every connection knob stands off the card edge. Edges anchor exactly
+ * this far out (the `-7px` handle outsets in workflow-block-view), so the two
+ * must stay equal or the line detaches from the knob.
+ */
+export const CONNECTION_KNOB_PEAK_PX = 7
+const CURSOR_PEAK_PX = CONNECTION_KNOB_PEAK_PX
+const PORT_FILL_STROKE_WIDTH_PX = 24
+/** The silhouette's outline. Half of it sits outside the filled shape. */
+const SILHOUETTE_STROKE_WIDTH_PX = 1.5
+/**
+ * Displacement below this reads as flat, so `bulgeContribution` zeroes it. The
+ * painted knob has to stop at the same place or the colour carries on down the
+ * straight wall as a thin leg past the shape it is filling.
+ */
+const BULGE_VISIBLE_THRESHOLD_PX = 0.25
+export const CURSOR_SWELL_LENGTH_PX = 38
+/** Shared swell proportions — plateau and shoulder as fractions of tab length. */
+const CONNECTION_PLATEAU_RATIO = 0.4
+const CONNECTION_SHOULDER_RATIO = 0.3
+/** Arc length the cursor swell occupies either side of its centre. */
+const CURSOR_HALF_FOOTPRINT_PX =
+  (CURSOR_SWELL_LENGTH_PX * CONNECTION_PLATEAU_RATIO) / 2 +
+  CURSOR_SWELL_LENGTH_PX * CONNECTION_SHOULDER_RATIO
+/**
+ * How far edge hover reaches into a card. Keeping this narrow preserves the
+ * title and body as an unambiguous grab surface while leaving the border easy
+ * to acquire.
+ */
+const CURSOR_EDGE_INSET_PX = 12
+/**
+ * Outside the card, activation matches the temporary handle's physical reach
+ * so the swell, cursor, and connection-start area stay in agreement.
+ */
+const CURSOR_EDGE_OUTSET_PX = 20
+const CURSOR_TRACKING_MARGIN_PX = 36
+const MAGNETIZE_DISTANCE_PX = 30
+/** Base peak of the action-menu tab, scaled by its own amplitude. */
+const ACTION_MENU_PEAK_PX = 4
+/**
+ * Action-menu swell proportions, calibrated on the canonical bar (164px /
+ * Condition & 5-icon cards). Shoulders stay a fixed 36px so every card shares
+ * the same taper angle, top radius, and concave fillet. The taper budget is
+ * also a fixed 56px (28px/side) subtracted from the measured bar width — not a
+ * width ratio — so shorter bars (Start, 4 icons) keep the same flat-edge→icon
+ * inset as Condition. Ratio-scaling that 56px with width pulled Start’s flat
+ * edge outward relative to the icons and read as extra dead gray on the left.
+ */
+const ACTION_MENU_TAPER_PX = 56
+const ACTION_MENU_SHOULDER_PX = 36
+const ACTION_MENU_CURVE_MID_X = 0.6402
+const ACTION_MENU_CURVE_MID_Y = 0.6995
+const ACTION_MENU_CURVE_TOP_X1 = 0.1998
+const ACTION_MENU_CURVE_TOP_X2 = 0.1978
+const ACTION_MENU_CURVE_BOTTOM_X1 = 0.8057
+const ACTION_MENU_CURVE_BOTTOM_Y1 = 0.9606
+const ACTION_MENU_CURVE_BOTTOM_X2 = 0.9257
+const ACTION_MENU_CURVE_BOTTOM_Y2 = 0.9967
+const SPRING_STIFFNESS = 300
+const SPRING_DAMPING = 32
+const ACTION_MENU_SPRING_STIFFNESS = 480
+const ACTION_MENU_SPRING_DAMPING = 38
+/**
+ * Must stay above the action row's own height as a fraction of the fully-open
+ * swell (24px of buttons in a 28px swell = 0.857). Below that the row is
+ * revealed while the swell is still shorter than it is, and because the row
+ * clips to the swell height the icons collide with the card's top edge for the
+ * remainder of the opening spring.
+ */
+const ACTION_MENU_CONTENT_READY_THRESHOLD = 0.9
+/** Quick deswell when the swell hands off to a hovered knob. */
+const CURSOR_SNAP_SPRING_STIFFNESS = 560
+const CURSOR_SNAP_SPRING_DAMPING = 42
+const MAX_PORT_AMPLITUDE = 7
+const MAX_SILHOUETTE_OUTSET_PX = ACTION_MENU_PEAK_PX * MAX_PORT_AMPLITUDE
+/**
+ * Amplitude below which the swell may cross a coloured knob's zone. At 0.2 the
+ * bump is under 1.5px — effectively gone — so the swell re-emerges on the far
+ * side already growing instead of waiting to die completely and restart from
+ * zero, which read as a long blank gap after passing a knob.
+ */
+const CURSOR_CROSSING_AMPLITUDE = 0.2
+const MAX_FRAME_DELTA_SECONDS = 1 / 30
+
+/**
+ * Returns a monotonic, capped animation step. Synchronous repaints can occur
+ * between requested frames, so a later callback may carry an older timestamp.
+ */
+export const getWorkflowBorderFrameDeltaSeconds = (
+  timestamp: number,
+  previousTimestamp: number
+) => {
+  if (!Number.isFinite(timestamp)) return 0
+  if (previousTimestamp === 0) return 1 / 60
+  const elapsed = (timestamp - previousTimestamp) / 1000
+  if (!Number.isFinite(elapsed)) return 0
+  return Math.min(MAX_FRAME_DELTA_SECONDS, Math.max(0, elapsed))
+}
+
+export const isActionMenuSwellReady = (target: number, value: number) =>
+  target === 1 && value >= ACTION_MENU_CONTENT_READY_THRESHOLD
+
+export interface WorkflowBorderPort {
+  id: string
+  side: WorkflowCardSide
+  position: number | 'center' | { fromEnd: number }
+  plateau: number
+  color?: string
+  restAmplitude?: number
+  hoverAmplitude?: number
+  magnetizable?: boolean
+  revealOnCardHover?: boolean
+}
+
+export interface WorkflowBorderCursorHandle {
+  side: PositionedSourceHandleSide
+  edgeSide: WorkflowCardSide
+  x: number
+  y: number
+}
+
+interface WorkflowBlockBorderProps {
+  nodeId?: string
+  getConnectionNodeId?: () => string | null
+  ports: WorkflowBorderPort[]
+  /** Enables the transient pointer-following swell used to start or target connections. */
+  cursorSwellEnabled?: boolean
+  /** Limits pointer-following swells to specific card sides. */
+  cursorSwellSides?: readonly WorkflowCardSide[]
+  radius?: number
+  hasRing: boolean
+  ringStyles: string
+  /** Paints the unified silhouette with the canonical selected-state color. */
+  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. */
+  bodyFill?: string
+  /** Explicit layout width for fixed-size hosts; omit to measure the host. */
+  width?: number
+  /** First-frame height used while an observed host has not reported its size yet. */
+  initialHeight?: number
+  /**
+   * Card height in layout px. Must match what the card actually renders — the
+   * silhouette is drawn from it, so an over-estimate paints a card taller than
+   * its content. Omit to measure the host instead (read-only surfaces).
+   */
+  height?: number
+  onCursorHandleChange?: (handle: WorkflowBorderCursorHandle | null) => void
+  onActionMenuReadyChange?: (ready: boolean) => void
+}
+
+interface PerimeterPoint {
+  s: number
+  x: number
+  y: number
+  nx: number
+  ny: number
+  tx: number
+  ty: number
+}
+
+const getPerimeterPointSide = (point: Pick<PerimeterPoint, 'nx' | 'ny'>): WorkflowCardSide =>
+  Math.abs(point.nx) > Math.abs(point.ny)
+    ? point.nx < 0
+      ? 'left'
+      : 'right'
+    : point.ny < 0
+      ? 'top'
+      : 'bottom'
+
+interface PerimeterSegment {
+  kind: 'line' | 'arc'
+  startS: number
+  length: number
+  radius?: number
+  pointAt: (distance: number) => Omit<PerimeterPoint, 's'>
+}
+
+interface PerimeterGeometry {
+  samples: PerimeterPoint[]
+  segments: PerimeterSegment[]
+  length: number
+}
+
+interface PortSample extends WorkflowBorderPort {
+  s: number
+}
+
+interface SpringValue {
+  value: number
+  velocity: number
+  target: number
+}
+
+interface BulgeFeature {
+  center: number
+  plateau: number
+  peak: number
+  shoulder: number
+  falloff?: 'action-menu'
+}
+
+interface ActiveInterval {
+  start: number
+  end: number
+}
+
+const isPrimaryConnectionPort = (portId: string) =>
+  portId === 'source' || portId === 'target' || isPositionedSourceHandle(portId)
+
+/**
+ * Every connection knob is the same swell, scaled by its own tab length —
+ * branch rows and the error output are the main port's shape at ~63%, not a
+ * different nub. The primary ports measure against the cursor footprint so a
+ * resting knob and the hover swell are interchangeable silhouettes.
+ */
+const getPortBulgeProfile = (port: WorkflowBorderPort) => {
+  if (port.id === 'action-menu') {
+    return {
+      plateau: Math.max(0, port.plateau - ACTION_MENU_TAPER_PX),
+      shoulder: ACTION_MENU_SHOULDER_PX,
+    }
+  }
+  const footprint = isPrimaryConnectionPort(port.id) ? CURSOR_SWELL_LENGTH_PX : port.plateau
+  return {
+    plateau: footprint * CONNECTION_PLATEAU_RATIO,
+    shoulder: footprint * CONNECTION_SHOULDER_RATIO,
+  }
+}
+
+/**
+ * Every connection knob protrudes the same distance — only its width scales.
+ * Edges anchor a fixed `CONNECTION_KNOB_PEAK_PX` outside the card, so a knob
+ * that peaked any lower would leave the line floating short of it.
+ *
+ * The action menu is not a connection knob: nothing anchors to it, and its own
+ * amplitude multiplies this base, so it keeps the shallower peak that sets the
+ * tab's height against the card.
+ */
+const getPortPeak = (port: WorkflowBorderPort) =>
+  port.id === 'action-menu' ? ACTION_MENU_PEAK_PX : CONNECTION_KNOB_PEAK_PX
+
+const smootherstep = (value: number) => {
+  const clamped = Math.min(1, Math.max(0, value))
+  return clamped * clamped * clamped * (clamped * (clamped * 6 - 15) + 10)
+}
+
+const cubicBezierCoordinate = (
+  t: number,
+  start: number,
+  firstControl: number,
+  secondControl: number,
+  end: number
+) => {
+  const inverse = 1 - t
+  return (
+    inverse * inverse * inverse * start +
+    3 * inverse * inverse * t * firstControl +
+    3 * inverse * t * t * secondControl +
+    t * t * t * end
+  )
+}
+
+const actionMenuCurveCoordinate = (parameter: number, axis: 'x' | 'y') => {
+  if (parameter <= 1) {
+    return axis === 'x'
+      ? cubicBezierCoordinate(
+          parameter,
+          0,
+          ACTION_MENU_CURVE_TOP_X1,
+          ACTION_MENU_CURVE_TOP_X2,
+          ACTION_MENU_CURVE_MID_X
+        )
+      : cubicBezierCoordinate(parameter, 0, 0, 0, ACTION_MENU_CURVE_MID_Y)
+  }
+  const t = parameter - 1
+  return axis === 'x'
+    ? cubicBezierCoordinate(
+        t,
+        ACTION_MENU_CURVE_MID_X,
+        ACTION_MENU_CURVE_BOTTOM_X1,
+        ACTION_MENU_CURVE_BOTTOM_X2,
+        1
+      )
+    : cubicBezierCoordinate(
+        t,
+        ACTION_MENU_CURVE_MID_Y,
+        ACTION_MENU_CURVE_BOTTOM_Y1,
+        ACTION_MENU_CURVE_BOTTOM_Y2,
+        1
+      )
+}
+
+const actionMenuFalloff = (value: number) => {
+  const clamped = Math.min(1, Math.max(0, value))
+  let lower = 0
+  let upper = 2
+  for (let index = 0; index < 12; index++) {
+    const midpoint = (lower + upper) / 2
+    const x = actionMenuCurveCoordinate(midpoint, 'x')
+    if (x < clamped) lower = midpoint
+    else upper = midpoint
+  }
+  return actionMenuCurveCoordinate((lower + upper) / 2, 'y')
+}
+
+const modulo = (value: number, length: number) => ((value % length) + length) % length
+
+const shortestArcDelta = (from: number, to: number, length: number) => {
+  const direct = modulo(to - from, length)
+  return direct > length / 2 ? direct - length : direct
+}
+
+const arcDistance = (a: number, b: number, length: number) =>
+  Math.abs(shortestArcDelta(a, b, length))
+
+const springStep = (
+  spring: SpringValue,
+  deltaSeconds: number,
+  stiffness = SPRING_STIFFNESS,
+  damping = SPRING_DAMPING,
+  bounds?: { min: number; max: number }
+) => {
+  const minimum = bounds?.min ?? Number.NEGATIVE_INFINITY
+  const maximum = bounds?.max ?? Number.POSITIVE_INFINITY
+  const target = Number.isFinite(spring.target)
+    ? Math.min(maximum, Math.max(minimum, spring.target))
+    : Math.min(maximum, Math.max(minimum, 0))
+  spring.target = target
+
+  if (!Number.isFinite(spring.value) || !Number.isFinite(spring.velocity)) {
+    spring.value = target
+    spring.velocity = 0
+    return
+  }
+
+  const safeDelta = Number.isFinite(deltaSeconds)
+    ? Math.min(MAX_FRAME_DELTA_SECONDS, Math.max(0, deltaSeconds))
+    : 0
+  const force = stiffness * (target - spring.value) - damping * spring.velocity
+  const nextVelocity = spring.velocity + force * safeDelta
+  const nextValue = spring.value + nextVelocity * safeDelta
+  if (!Number.isFinite(nextValue) || !Number.isFinite(nextVelocity)) {
+    spring.value = target
+    spring.velocity = 0
+    return
+  }
+
+  spring.value = Math.min(maximum, Math.max(minimum, nextValue))
+  spring.velocity =
+    (spring.value === minimum && nextVelocity < 0) || (spring.value === maximum && nextVelocity > 0)
+      ? 0
+      : nextVelocity
+}
+
+const springAtRest = (spring: SpringValue) =>
+  Math.abs(spring.target - spring.value) < 0.001 && Math.abs(spring.velocity) < 0.001
+
+const bulgeContribution = (
+  distance: number,
+  plateau: number,
+  peak: number,
+  shoulderOverride?: number,
+  falloff?: BulgeFeature['falloff']
+) => {
+  const plateauHalf = plateau / 2
+  if (distance <= plateauHalf) return peak
+  const shoulder = shoulderOverride ?? Math.max(8, plateau * 0.75)
+  const footprintHalf = plateauHalf + shoulder
+  if (distance >= footprintHalf) return 0
+  const progress = (distance - plateauHalf) / shoulder
+  const easedProgress =
+    falloff === 'action-menu' ? actionMenuFalloff(progress) : smootherstep(progress)
+  const contribution = peak * (1 - easedProgress)
+  return contribution < BULGE_VISIBLE_THRESHOLD_PX ? 0 : contribution
+}
+
+const buildRoundedRectPerimeter = (width: number, height: number, requestedRadius: number) => {
+  const radius = Math.min(requestedRadius, width / 2, height / 2)
+  const horizontal = Math.max(0, width - radius * 2)
+  const vertical = Math.max(0, height - radius * 2)
+  const quarterArc = (Math.PI * radius) / 2
+  const segments: PerimeterSegment[] = []
+  let s = 0
+
+  const addLine = (
+    length: number,
+    startX: number,
+    startY: number,
+    tx: number,
+    ty: number,
+    nx: number,
+    ny: number
+  ) => {
+    segments.push({
+      kind: 'line',
+      startS: s,
+      length,
+      pointAt: (distance) => ({
+        x: startX + tx * distance,
+        y: startY + ty * distance,
+        nx,
+        ny,
+        tx,
+        ty,
+      }),
+    })
+    s += length
+  }
+
+  const addArc = (centerX: number, centerY: number, startAngle: number) => {
+    segments.push({
+      kind: 'arc',
+      startS: s,
+      length: quarterArc,
+      radius,
+      pointAt: (distance) => {
+        const angle = startAngle + distance / radius
+        return {
+          x: centerX + Math.cos(angle) * radius,
+          y: centerY + Math.sin(angle) * radius,
+          nx: Math.cos(angle),
+          ny: Math.sin(angle),
+          tx: -Math.sin(angle),
+          ty: Math.cos(angle),
+        }
+      },
+    })
+    s += quarterArc
+  }
+
+  addLine(horizontal, radius, 0, 1, 0, 0, -1)
+  addArc(width - radius, radius, -Math.PI / 2)
+  addLine(vertical, width, radius, 0, 1, 1, 0)
+  addArc(width - radius, height - radius, 0)
+  addLine(horizontal, width - radius, height, -1, 0, 0, 1)
+  addArc(radius, height - radius, Math.PI / 2)
+  addLine(vertical, 0, height - radius, 0, -1, -1, 0)
+  addArc(radius, radius, Math.PI)
+
+  const samples: PerimeterPoint[] = []
+  for (const segment of segments) {
+    const count = Math.max(1, Math.ceil(segment.length / SAMPLE_SPACING_PX))
+    for (let index = 0; index < count; index++) {
+      const distance = (index / count) * segment.length
+      samples.push({ s: segment.startS + distance, ...segment.pointAt(distance) })
+    }
+  }
+  return { samples, segments, length: s }
+}
+
+const closestSample = (
+  samples: PerimeterPoint[],
+  x: number,
+  y: number,
+  predicate?: (sample: PerimeterPoint) => boolean
+) => {
+  let closest = samples[0]
+  let closestDistance = Number.POSITIVE_INFINITY
+  for (const sample of samples) {
+    if (predicate && !predicate(sample)) continue
+    const distance = (sample.x - x) ** 2 + (sample.y - y) ** 2
+    if (distance < closestDistance) {
+      closest = sample
+      closestDistance = distance
+    }
+  }
+  return { sample: closest, distance: Math.sqrt(closestDistance) }
+}
+
+const resolvePortSamples = (
+  ports: WorkflowBorderPort[],
+  samples: PerimeterPoint[],
+  width: number,
+  height: number
+): PortSample[] =>
+  ports.map((port) => {
+    const axisLength = port.side === 'left' || port.side === 'right' ? height : width
+    const coordinate =
+      port.position === 'center'
+        ? axisLength / 2
+        : typeof port.position === 'number'
+          ? port.position
+          : axisLength - port.position.fromEnd
+    const target =
+      port.side === 'left'
+        ? { x: 0, y: coordinate }
+        : port.side === 'right'
+          ? { x: width, y: coordinate }
+          : port.side === 'top'
+            ? { x: coordinate, y: 0 }
+            : { x: coordinate, y: height }
+    const normal =
+      port.side === 'left'
+        ? { nx: -1, ny: 0 }
+        : port.side === 'right'
+          ? { nx: 1, ny: 0 }
+          : port.side === 'top'
+            ? { nx: 0, ny: -1 }
+            : { nx: 0, ny: 1 }
+    const { sample } = closestSample(
+      samples,
+      target.x,
+      target.y,
+      (candidate) => candidate.nx === normal.nx && candidate.ny === normal.ny
+    )
+    return { ...port, s: sample.s }
+  })
+
+const pointAtArcLength = (geometry: PerimeterGeometry, arcLength: number) => {
+  const normalized = modulo(arcLength, geometry.length)
+  const segment =
+    geometry.segments.find(
+      (candidate) =>
+        normalized >= candidate.startS && normalized < candidate.startS + candidate.length
+    ) ?? geometry.segments[geometry.segments.length - 1]
+  return {
+    segment,
+    local: normalized - segment.startS,
+    point: segment.pointAt(normalized - segment.startS),
+  }
+}
+
+const buildActiveIntervals = (features: BulgeFeature[], perimeterLength: number) => {
+  const split: ActiveInterval[] = []
+  for (const feature of features) {
+    if (
+      !Number.isFinite(feature.center) ||
+      !Number.isFinite(feature.plateau) ||
+      !Number.isFinite(feature.peak) ||
+      !Number.isFinite(feature.shoulder) ||
+      feature.peak < 0.25
+    ) {
+      continue
+    }
+    const half = feature.plateau / 2 + feature.shoulder + 4
+    const start = feature.center - half
+    const end = feature.center + half
+    if (start < 0) {
+      split.push({ start: 0, end })
+      split.push({ start: perimeterLength + start, end: perimeterLength })
+    } else if (end > perimeterLength) {
+      split.push({ start, end: perimeterLength })
+      split.push({ start: 0, end: end - perimeterLength })
+    } else {
+      split.push({ start, end })
+    }
+  }
+  split.sort((a, b) => a.start - b.start)
+  const merged: ActiveInterval[] = []
+  for (const interval of split) {
+    const previous = merged[merged.length - 1]
+    if (previous && interval.start <= previous.end) {
+      previous.end = Math.max(previous.end, interval.end)
+    } else {
+      merged.push({ ...interval })
+    }
+  }
+  return merged
+}
+
+const findQuietStart = (intervals: ActiveInterval[], perimeterLength: number) => {
+  if (intervals.length === 0) return 0
+  let largestGap = -1
+  let start = 0
+  for (let index = 0; index < intervals.length; index++) {
+    const current = intervals[index]
+    const next = intervals[(index + 1) % intervals.length]
+    const nextStart = index === intervals.length - 1 ? next.start + perimeterLength : next.start
+    const gap = nextStart - current.end
+    if (gap > largestGap) {
+      largestGap = gap
+      start = modulo(current.end + gap / 2, perimeterLength)
+    }
+  }
+  return largestGap > 0 ? start : 0
+}
+
+const relativeIntervals = (features: BulgeFeature[], startS: number, perimeterLength: number) => {
+  const intervals = features
+    .filter(
+      (feature) =>
+        Number.isFinite(feature.center) &&
+        Number.isFinite(feature.plateau) &&
+        Number.isFinite(feature.peak) &&
+        Number.isFinite(feature.shoulder) &&
+        feature.peak >= 0.25
+    )
+    .map((feature) => {
+      const center = modulo(feature.center - startS, perimeterLength)
+      const half = feature.plateau / 2 + feature.shoulder + 4
+      return { start: center - half, end: center + half }
+    })
+    .filter((interval) => interval.end > 0 && interval.start < perimeterLength)
+    .map((interval) => ({
+      start: Math.max(0, interval.start),
+      end: Math.min(perimeterLength, interval.end),
+    }))
+    .sort((a, b) => a.start - b.start)
+  const merged: ActiveInterval[] = []
+  for (const interval of intervals) {
+    const previous = merged[merged.length - 1]
+    if (previous && interval.start <= previous.end) {
+      previous.end = Math.max(previous.end, interval.end)
+    } else {
+      merged.push({ ...interval })
+    }
+  }
+  return merged
+}
+
+const displacementAt = (
+  s: number,
+  features: BulgeFeature[],
+  perimeterLength: number,
+  maximum: number
+) => {
+  /*
+   * Union, not sum. Two overlapping bulges of the same height used to add
+   * where they crossed, throwing up a spike near twice their peak — the
+   * pointed mountain seen while the cursor swell slides into an existing
+   * knob. Taking the max lets them merge into one shape at a constant height.
+   */
+  let displacement = 0
+  for (const feature of features) {
+    const contribution = bulgeContribution(
+      arcDistance(s, feature.center, perimeterLength),
+      feature.plateau,
+      feature.peak,
+      feature.shoulder,
+      feature.falloff
+    )
+    if (Number.isFinite(contribution)) {
+      displacement = Math.max(displacement, contribution)
+    }
+  }
+  const safeMaximum = Number.isFinite(maximum)
+    ? Math.min(MAX_SILHOUETTE_OUTSET_PX, Math.max(0, maximum))
+    : 0
+  const clamped = Math.min(displacement, safeMaximum)
+  return clamped < BULGE_VISIBLE_THRESHOLD_PX ? 0 : clamped
+}
+
+/**
+ * Where a bulge stops being drawn, by inverting the shoulder's easing at the
+ * visibility threshold. The mathematical footprint (`plateau/2 + shoulder`)
+ * overshoots this, because the tail is cut off once it flattens out.
+ */
+const visibleBulgeHalf = (plateau: number, shoulder: number, peak: number) => {
+  const plateauHalf = plateau / 2
+  if (peak <= BULGE_VISIBLE_THRESHOLD_PX || shoulder <= 0) return plateauHalf
+  const target = 1 - BULGE_VISIBLE_THRESHOLD_PX / peak
+  let low = 0
+  let high = 1
+  for (let step = 0; step < 24; step++) {
+    const mid = (low + high) / 2
+    if (smootherstep(mid) < target) low = mid
+    else high = mid
+  }
+  return plateauHalf + high * shoulder
+}
+
+const appendExactInterval = (
+  commands: string[],
+  geometry: PerimeterGeometry,
+  startS: number,
+  from: number,
+  to: number
+) => {
+  let cursor = from
+  while (cursor < to - PERIMETER_CURSOR_EPSILON_PX) {
+    const located = pointAtArcLength(geometry, startS + cursor)
+    const available = located.segment.length - located.local
+    const step = Math.min(to - cursor, available)
+    if (!Number.isFinite(step) || step <= 0) break
+    const nextCursor = cursor + step
+    if (nextCursor <= cursor) {
+      cursor = Math.min(to, cursor + PERIMETER_CURSOR_EPSILON_PX)
+      continue
+    }
+    const end = located.segment.pointAt(located.local + step)
+    commands.push(
+      located.segment.kind === 'line'
+        ? `L${end.x.toFixed(2)} ${end.y.toFixed(2)}`
+        : `A${located.segment.radius} ${located.segment.radius} 0 0 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`
+    )
+    cursor = nextCursor
+  }
+}
+
+const appendActiveInterval = (
+  commands: string[],
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number,
+  startS: number,
+  interval: ActiveInterval
+) => {
+  const length = interval.end - interval.start
+  const count = Math.max(2, Math.ceil(length / SAMPLE_SPACING_PX))
+  const points = Array.from({ length: count + 1 }, (_, index) => {
+    const relative = interval.start + (index / count) * length
+    const located = pointAtArcLength(geometry, startS + relative)
+    const displacement = displacementAt(
+      modulo(startS + relative, geometry.length),
+      features,
+      geometry.length,
+      maximum
+    )
+    return {
+      x: located.point.x + located.point.nx * displacement,
+      y: located.point.y + located.point.ny * displacement,
+      tx: located.point.tx,
+      ty: located.point.ty,
+    }
+  })
+  for (let index = 0; index < points.length - 1; index++) {
+    const previous = points[Math.max(0, index - 1)]
+    const current = points[index]
+    const next = points[index + 1]
+    const after = points[Math.min(points.length - 1, index + 2)]
+    const chord = Math.hypot(next.x - current.x, next.y - current.y)
+    const control1 =
+      index === 0
+        ? { x: current.x + (current.tx * chord) / 3, y: current.y + (current.ty * chord) / 3 }
+        : {
+            x: current.x + (next.x - previous.x) / 6,
+            y: current.y + (next.y - previous.y) / 6,
+          }
+    const control2 =
+      index === points.length - 2
+        ? { x: next.x - (next.tx * chord) / 3, y: next.y - (next.ty * chord) / 3 }
+        : {
+            x: next.x - (after.x - current.x) / 6,
+            y: next.y - (after.y - current.y) / 6,
+          }
+    commands.push(
+      `C${control1.x.toFixed(2)} ${control1.y.toFixed(2)} ${control2.x.toFixed(2)} ${control2.y.toFixed(2)} ${next.x.toFixed(2)} ${next.y.toFixed(2)}`
+    )
+  }
+}
+
+/**
+ * An open path over one span of the outline, sampled and displaced exactly like
+ * the silhouette is.
+ *
+ * A coloured knob used to be a dash on the full perimeter, offset by the port's
+ * resting arc position. But displacing the outline makes it *longer* than the
+ * resting perimeter, and the extra length sits entirely at the bulges — so
+ * normalising with `pathLength` spread that error evenly and the band drifted
+ * off its own knob, leaving a crescent of base colour showing inside it. Giving
+ * the knob its own path removes the arc-length bookkeeping altogether: the
+ * colour is drawn on the same points the silhouette was.
+ */
+const buildSpanPath = (
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number,
+  fromS: number,
+  toS: number
+) => {
+  const length = toS - fromS
+  if (length <= 0) return ''
+  const located = pointAtArcLength(geometry, fromS)
+  const displacement = displacementAt(
+    modulo(fromS, geometry.length),
+    features,
+    geometry.length,
+    maximum
+  )
+  const originX = located.point.x + located.point.nx * displacement
+  const originY = located.point.y + located.point.ny * displacement
+  const commands = [`M${originX.toFixed(2)} ${originY.toFixed(2)}`]
+  appendActiveInterval(commands, geometry, features, maximum, fromS, { start: 0, end: length })
+  return commands.join(' ')
+}
+
+const buildPiecewisePath = (
+  geometry: PerimeterGeometry,
+  features: BulgeFeature[],
+  maximum: number
+) => {
+  const circularIntervals = buildActiveIntervals(features, geometry.length)
+  const startS = findQuietStart(circularIntervals, geometry.length)
+  const intervals = relativeIntervals(features, startS, geometry.length)
+  const start = pointAtArcLength(geometry, startS).point
+  const commands = [`M${start.x.toFixed(2)} ${start.y.toFixed(2)}`]
+  let cursor = 0
+  for (const interval of intervals) {
+    appendExactInterval(commands, geometry, startS, cursor, interval.start)
+    appendActiveInterval(commands, geometry, features, maximum, startS, interval)
+    cursor = interval.end
+  }
+  appendExactInterval(commands, geometry, startS, cursor, geometry.length)
+  commands.push('Z')
+  return { d: commands.join(' '), startS }
+}
+
+const resolveRing = (ringStyles: string) => {
+  const color = ringStyles.includes('--border-success')
+    ? 'var(--border-success)'
+    : ringStyles.includes('--text-secondary')
+      ? 'var(--text-secondary)'
+      : ringStyles.includes('--warning')
+        ? 'var(--warning)'
+        : ringStyles.includes('--text-error')
+          ? 'var(--text-error)'
+          : ringStyles.includes('--brand-accent')
+            ? 'var(--brand-accent)'
+            : 'var(--border-1)'
+  return {
+    color,
+    width: ringStyles.includes('3.5px') ? 7 : 4.5,
+    pulse: ringStyles.includes('animate-ring-pulse'),
+    solid: ringStyles.includes('--text-secondary'),
+  }
+}
+
+export function WorkflowBlockBorder({
+  nodeId,
+  getConnectionNodeId,
+  ports,
+  cursorSwellEnabled = true,
+  cursorSwellSides,
+  radius = 16,
+  hasRing,
+  ringStyles,
+  isSelected = false,
+  selectedSilhouetteColor,
+  staticActionMenuSwell = false,
+  silhouetteColorOverride,
+  bodyFill = 'var(--surface-2)',
+  width,
+  initialHeight,
+  height,
+  onCursorHandleChange,
+  onActionMenuReadyChange,
+}: WorkflowBlockBorderProps) {
+  const clipId = `workflow-border-${useId().replaceAll(':', '')}`
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [size, setSize] = useState({
+    width: width ?? 250,
+    height: height ?? initialHeight ?? 100,
+  })
+  const [renderedPath, setRenderedPath] = useState<{
+    d: string
+    startS: number
+    knobs: Array<{ id: string; color: string; d: string }>
+    knobKey: string
+    /** Open span over the action-menu swell, repainted over the knobs. */
+    overlay: string
+  }>({ d: '', startS: 0, knobs: [], knobKey: '', overlay: '' })
+  /**
+   * Render-visible copy of the resolved ports and perimeter length. The
+   * animation loop reads geometry from `geometryRef`, but the colored port
+   * segments are painted during render — reading the ref there would strand
+   * color changes on blocks whose path never moves (a neighbour highlighting
+   * because its edge got selected), since `setRenderedPath` bails on an
+   * unchanged path and no re-render would follow.
+   */
+  const frameRef = useRef<number | null>(null)
+  const lastFrameRef = useRef(0)
+  const hoveredPortRef = useRef<string | null>(null)
+  const draggedPortRef = useRef<string | null>(null)
+  /** Whether the pointer is on an edge at all; the frame decides the rest. */
+  const cursorHoverAllowedRef = useRef(false)
+  /** True while the swell is deswelling at a zone boundary to cross behind. */
+  const zoneCrossingRef = useRef(false)
+  const hoverSpringRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const actionMenuSpringRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const cursorAmplitudeRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const cursorSRef = useRef<SpringValue>({ value: 0, velocity: 0, target: 0 })
+  const startAnimationRef = useRef<() => void>(() => {})
+  /** Synchronous single-frame repaint, for geometry changes that must not lag. */
+  const renderNowRef = useRef<() => void>(() => {})
+  const updatePointerTargetRef = useRef<(x: number, y: number) => void>(() => {})
+  const resetPointerTrackingRef = useRef<() => void>(() => {})
+  const onCursorHandleChangeRef = useRef(onCursorHandleChange)
+  const onActionMenuReadyChangeRef = useRef(onActionMenuReadyChange)
+  const actionMenuReadyRef = useRef(false)
+  const sizeRef = useRef(size)
+  const geometryRef = useRef<
+    PerimeterGeometry & {
+      ports: PortSample[]
+    }
+  >({ samples: [], segments: [], ports: [], length: 1 })
+  sizeRef.current = size
+  onCursorHandleChangeRef.current = onCursorHandleChange
+  onActionMenuReadyChangeRef.current = onActionMenuReadyChange
+
+  useLayoutEffect(() => {
+    if (height !== undefined) {
+      if (!Number.isFinite(height) || height <= 0) return
+      const nextWidth = width ?? 250
+      setSize((current) =>
+        current.width === nextWidth && Math.abs(current.height - height) < 0.5
+          ? current
+          : { width: nextWidth, height }
+      )
+      return
+    }
+    const host = svgRef.current?.parentElement
+    if (!host) return
+    const update = () => {
+      /* offsetWidth/Height, not getBoundingClientRect: the card sits inside
+         the canvas' zoom transform and a scaled rect would drift the geometry. */
+      const width = host.offsetWidth
+      /* Clamped: below MIN_PAINTED_HEIGHT the perimeter has no straight run
+         left on the vertical edges and the action-menu tab collapses into the
+         corner arcs. The host carries the same floor; this keeps the geometry
+         correct even if a caller sizes one some other way. */
+      const observedHeight = host.offsetHeight > 0 ? host.offsetHeight : initialHeight
+      if (observedHeight === undefined) return
+      const nextHeight = Math.max(observedHeight, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT)
+      if (Number.isFinite(width) && Number.isFinite(nextHeight) && width > 0 && nextHeight > 0) {
+        setSize((current) =>
+          current.width === width && current.height === nextHeight
+            ? current
+            : { width, height: nextHeight }
+        )
+      }
+    }
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(host)
+    return () => observer.disconnect()
+  }, [height, initialHeight, width])
+
+  useLayoutEffect(() => {
+    const perimeter = buildRoundedRectPerimeter(size.width, size.height, radius)
+    const resolvedPorts = resolvePortSamples(ports, perimeter.samples, size.width, size.height)
+    geometryRef.current = {
+      samples: perimeter.samples,
+      segments: perimeter.segments,
+      ports: resolvedPorts,
+      length: perimeter.length,
+    }
+    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, staticActionMenuSwell])
+
+  useLayoutEffect(() => {
+    const svg = svgRef.current
+    const host = svg?.parentElement
+    if (!svg || !host) return
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    /*
+     * One frame in flight at a time, tracked in frameRef. If a frame dies —
+     * an exception, or a stale handle left by an HMR remount — frameRef must
+     * be released, or startAnimation() treats the dead frame as pending and
+     * the card never paints again. The wrapper guarantees the loop can always
+     * restart from the next pointer event.
+     */
+    const scheduleFrame = () => {
+      if (frameRef.current === null) {
+        frameRef.current = requestAnimationFrame(render)
+      }
+    }
+
+    const render = (timestamp: number) => {
+      frameRef.current = null
+      try {
+        renderFrame(timestamp)
+      } catch (error) {
+        frameRef.current = null
+        lastFrameRef.current = 0
+        throw error
+      }
+    }
+
+    const renderFrame = (timestamp: number) => {
+      const geometry = geometryRef.current
+      if (geometry.samples.length === 0) {
+        onCursorHandleChangeRef.current?.(null)
+        frameRef.current = null
+        return
+      }
+      const deltaSeconds = getWorkflowBorderFrameDeltaSeconds(timestamp, lastFrameRef.current)
+      if (Number.isFinite(timestamp) && timestamp > lastFrameRef.current) {
+        lastFrameRef.current = timestamp
+      }
+
+      const hoverSpring = hoverSpringRef.current
+      const actionMenuSpring = actionMenuSpringRef.current
+      const cursorAmplitude = cursorAmplitudeRef.current
+      const cursorS = cursorSRef.current
+      const actionMenuPort = geometry.ports.find((port) => port.id === 'action-menu')
+      actionMenuSpring.target = (actionMenuPort?.restAmplitude ?? 0) > 0 ? 1 : 0
+      /*
+       * Two different colours must never share one silhouette. The swell is the
+       * base colour, a connected or error knob is painted over it — a merged
+       * shape would be part knob colour and part gray, reading as the colours
+       * bleeding into each other. Same-colour knobs are exempt: gray merging
+       * into gray is the gooey join, not a blend.
+       *
+       * Fading alone cannot guarantee that — the amplitude spring takes real
+       * time to decay, and during those frames the still-visible swell keeps
+       * travelling and sweeps straight across the knob. So the exclusion is
+       * structural: while the swell is meaningfully visible its position is
+       * pinned at the zone boundary (bulges touching, never overlapping), it
+       * deswells there on the snap spring, and once it drops under the crossing
+       * amplitude it steps to the boundary on the pointer's side and grows
+       * back — a continuous pass-behind, not a die-and-restart.
+       */
+      const coloredZoneFor = (arc: number, slack = 0) => {
+        for (const port of geometry.ports) {
+          if (!port.color || port.magnetizable === false) continue
+          const profile = getPortBulgeProfile(port)
+          const clearance = profile.plateau / 2 + profile.shoulder + CURSOR_HALF_FOOTPRINT_PX
+          if (arcDistance(arc, port.s, geometry.length) < clearance + slack) {
+            return { port, clearance }
+          }
+        }
+        return null
+      }
+      const targetZone = coloredZoneFor(cursorS.target)
+      /*
+       * Hovering ANY resting knob hands the interaction over to it — the knob
+       * takes its hover size while the swell deswells away, regardless of
+       * colour. Same-colour merging still happens in transit (the swell can
+       * slide across a gray knob gooily), but a direct hover always snaps:
+       * for knobs narrower than the swell, merging instead lets the swell
+       * swallow the knob it is supposed to be handing off to. hoveredPortRef
+       * only ever holds magnetizable ports, so the action menu never triggers
+       * this.
+       */
+      const snappingToKnob = hoveredPortRef.current !== null
+      /*
+       * The crossing latch, not a live threshold test: a threshold alone
+       * oscillates — the instant amplitude dips below it the target flips back
+       * to 1 and pumps it up again, and the swell hangs at the boundary
+       * forever. Latched at the pin, released only by completing the crossing
+       * or by the swell moving clear of the zone.
+       */
+      if (zoneCrossingRef.current && coloredZoneFor(cursorS.value, 1) === null) {
+        zoneCrossingRef.current = false
+      }
+      const handingOff = Boolean(targetZone) || snappingToKnob || zoneCrossingRef.current
+      cursorAmplitude.target = cursorHoverAllowedRef.current && !handingOff ? 1 : 0
+      if (reducedMotion) {
+        hoverSpring.value = hoverSpring.target
+        hoverSpring.velocity = 0
+        actionMenuSpring.value = actionMenuSpring.target
+        actionMenuSpring.velocity = 0
+        cursorAmplitude.value = cursorAmplitude.target
+        cursorAmplitude.velocity = 0
+        cursorS.value = cursorS.target
+        cursorS.velocity = 0
+      } else {
+        springStep(hoverSpring, deltaSeconds, SPRING_STIFFNESS, SPRING_DAMPING, {
+          min: 0,
+          max: 1,
+        })
+        springStep(
+          actionMenuSpring,
+          deltaSeconds,
+          ACTION_MENU_SPRING_STIFFNESS,
+          ACTION_MENU_SPRING_DAMPING,
+          { min: 0, max: 1 }
+        )
+        /* Hand-offs to a knob deswell on the stiffer snap spring — quick but
+           still a motion, neither a blink nor a loitering blob. */
+        springStep(
+          cursorAmplitude,
+          deltaSeconds,
+          handingOff ? CURSOR_SNAP_SPRING_STIFFNESS : SPRING_STIFFNESS,
+          handingOff ? CURSOR_SNAP_SPRING_DAMPING : SPRING_DAMPING,
+          { min: 0, max: 1 }
+        )
+        if (cursorAmplitude.target === 0 && cursorAmplitude.value < 0.005) {
+          cursorAmplitude.value = 0
+          cursorAmplitude.velocity = 0
+        }
+        const delta = shortestArcDelta(cursorS.value, cursorS.target, geometry.length)
+        const unwrappedTarget = cursorS.value + delta
+        const originalTarget = cursorS.target
+        cursorS.target = unwrappedTarget
+        springStep(cursorS, deltaSeconds)
+        cursorS.value = modulo(cursorS.value, geometry.length)
+        cursorS.target = originalTarget
+      }
+
+      const actionMenuReady = isActionMenuSwellReady(
+        actionMenuSpring.target,
+        actionMenuSpring.value
+      )
+      if (actionMenuReady !== actionMenuReadyRef.current) {
+        actionMenuReadyRef.current = actionMenuReady
+        onActionMenuReadyChangeRef.current?.(actionMenuReady)
+      }
+
+      const valueZone = coloredZoneFor(cursorS.value)
+      if (valueZone) {
+        if (cursorAmplitude.value <= CURSOR_CROSSING_AMPLITUDE && !targetZone) {
+          /* Faint enough to cross: step out at the boundary on the pointer's
+             side, keeping the residual amplitude so growth resumes at once. */
+          const toTarget = shortestArcDelta(valueZone.port.s, cursorS.target, geometry.length)
+          const side = toTarget !== 0 ? Math.sign(toTarget) : -1
+          cursorS.value = modulo(valueZone.port.s + side * valueZone.clearance, geometry.length)
+          cursorS.velocity = 0
+          zoneCrossingRef.current = false
+        } else if (cursorAmplitude.value > 0.005) {
+          /* Still visible: pinned at the boundary on its current side. */
+          const offset = shortestArcDelta(valueZone.port.s, cursorS.value, geometry.length)
+          const side = offset !== 0 ? Math.sign(offset) : -1
+          cursorS.value = modulo(valueZone.port.s + side * valueZone.clearance, geometry.length)
+          cursorS.velocity = 0
+          if (!targetZone) zoneCrossingRef.current = true
+        }
+      }
+
+      const activePortId = draggedPortRef.current ?? hoveredPortRef.current
+      if (cursorAmplitude.value * CURSOR_PEAK_PX >= BULGE_VISIBLE_THRESHOLD_PX && !handingOff) {
+        const { point } = pointAtArcLength(geometry, cursorS.value)
+        const edgeSide = getPerimeterPointSide(point)
+        const side =
+          edgeSide === 'left' || edgeSide === 'right'
+            ? edgeSide
+            : getHorizontalWorkflowHandleSide(point.x, sizeRef.current.width)
+        onCursorHandleChangeRef.current?.({
+          side,
+          edgeSide,
+          x: point.x + point.nx * CONNECTION_KNOB_PEAK_PX,
+          y: point.y + point.ny * CONNECTION_KNOB_PEAK_PX,
+        })
+      } else {
+        onCursorHandleChangeRef.current?.(null)
+      }
+      const maxPortPeak = geometry.ports.reduce(
+        (current, port) =>
+          Math.max(
+            current,
+            getPortPeak(port) *
+              Math.min(
+                MAX_PORT_AMPLITUDE,
+                Math.max(
+                  0,
+                  Number.isFinite(port.hoverAmplitude) ? (port.hoverAmplitude ?? 1.15) : 1.15
+                )
+              )
+          ),
+        CURSOR_PEAK_PX
+      )
+      const maxPeak = Math.min(
+        MAX_SILHOUETTE_OUTSET_PX,
+        Math.max(maxPortPeak, CURSOR_PEAK_PX * cursorAmplitude.value)
+      )
+      const features: BulgeFeature[] = geometry.ports.map((port) => {
+        const profile = getPortBulgeProfile(port)
+        const rest = Math.min(
+          MAX_PORT_AMPLITUDE,
+          Math.max(0, Number.isFinite(port.restAmplitude) ? (port.restAmplitude ?? 1) : 1)
+        )
+        const hover = Math.min(
+          MAX_PORT_AMPLITUDE,
+          Math.max(0, Number.isFinite(port.hoverAmplitude) ? (port.hoverAmplitude ?? 1.15) : 1.15)
+        )
+        const multiplier =
+          port.id === 'action-menu'
+            ? hover * actionMenuSpring.value
+            : Math.max(
+                port.revealOnCardHover ? rest + (hover - rest) * hoverSpring.value : rest,
+                port.id === activePortId ? hover : 0
+              )
+        return {
+          center: port.s,
+          plateau: profile.plateau,
+          peak: getPortPeak(port) * multiplier,
+          shoulder: profile.shoulder,
+          falloff: port.id === 'action-menu' ? 'action-menu' : undefined,
+        }
+      })
+      if (cursorAmplitude.value >= 0.005) {
+        features.push({
+          center: cursorS.value,
+          plateau: CURSOR_SWELL_LENGTH_PX * CONNECTION_PLATEAU_RATIO,
+          peak: CURSOR_PEAK_PX * cursorAmplitude.value,
+          shoulder: CURSOR_SWELL_LENGTH_PX * CONNECTION_SHOULDER_RATIO,
+        })
+      }
+      const nextPath = buildPiecewisePath(
+        {
+          samples: geometry.samples,
+          segments: geometry.segments,
+          length: geometry.length,
+        },
+        features,
+        maxPeak
+      )
+      const perimeter = {
+        samples: geometry.samples,
+        segments: geometry.segments,
+        length: geometry.length,
+      }
+      const actionFeature = features.find((feature) => feature.falloff === 'action-menu')
+      const actionSwellUp = actionFeature !== undefined && actionFeature.peak > 0.5
+      const actionHalf = actionFeature ? actionFeature.plateau / 2 + actionFeature.shoulder : 0
+      const nextKnobs = geometry.ports
+        .map((port, index) => ({ port, feature: features[index] }))
+        .filter(({ port, feature }) => Boolean(port.color) && feature !== undefined)
+        /*
+         * A knob under the open action swell is simply not painted: the swell
+         * is a lid, and paint that survives beneath it either bleeds through
+         * mid-animation or reads as the knob changing colour behind the menu.
+         * The connection anchor (the invisible handle) stays put, so the edge
+         * still terminates at the card edge — the line just disappears under
+         * the swell. The knob returns the moment the swell closes.
+         */
+        .filter(
+          ({ port }) =>
+            !actionSwellUp ||
+            !actionFeature ||
+            arcDistance(port.s, actionFeature.center, geometry.length) > actionHalf
+        )
+        .map(({ port, feature }) => {
+          const half = visibleBulgeHalf(feature.plateau, feature.shoulder, feature.peak)
+          /*
+           * Colour follows only this knob's own bulge. Feeding the full feature
+           * list (including the action-menu swell) re-displaced the dark stroke
+           * up onto the ActionBar peak, so the knob looked anchored to the menu
+           * instead of the card edge and covered the icons.
+           */
+          return {
+            id: port.id,
+            color: port.color as string,
+            d: buildSpanPath(perimeter, [feature], feature.peak, port.s - half, port.s + half),
+          }
+        })
+      /*
+       * The action-menu swell must sit OVER any knob or line beneath it: a
+       * top-centre connection stays anchored to the card edge, and the opening
+       * swell slides across and hides it. The knobs paint at their resting
+       * positions above, so the swell's region is repainted after them in the
+       * silhouette colour — an opaque lid, matching the outline the swell
+       * already drew.
+       */
+      const nextOverlay =
+        actionSwellUp && actionFeature
+          ? buildSpanPath(
+              perimeter,
+              features,
+              maxPeak,
+              actionFeature.center - actionHalf,
+              actionFeature.center + actionHalf
+            )
+          : ''
+      const nextKnobKey = `${nextKnobs.map((knob) => `${knob.id}:${knob.color}:${knob.d}`).join('|')}~${nextOverlay}`
+      setRenderedPath((current) =>
+        current.d === nextPath.d && current.knobKey === nextKnobKey
+          ? current
+          : { ...nextPath, knobs: nextKnobs, knobKey: nextKnobKey, overlay: nextOverlay }
+      )
+
+      const moving =
+        !springAtRest(hoverSpring) ||
+        !springAtRest(actionMenuSpring) ||
+        !springAtRest(cursorAmplitude) ||
+        !springAtRest(cursorS)
+      if (moving) {
+        scheduleFrame()
+      } else {
+        frameRef.current = null
+        lastFrameRef.current = 0
+      }
+    }
+
+    const startAnimation = () => {
+      if (frameRef.current === null) {
+        lastFrameRef.current = 0
+        scheduleFrame()
+      }
+    }
+    startAnimationRef.current = startAnimation
+    renderNowRef.current = () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current)
+        frameRef.current = null
+      }
+      render(performance.now())
+    }
+
+    let trackingPointer = false
+    let leaveConfirmFrame: number | null = null
+    const lastPointerRef = { x: 0, y: 0 }
+    // Include the action-tab / top bridge siblings so opening the action menu
+    // does not look like a leave and kill the cursor-follow connection swell.
+    const trackingRoot = (host.closest('.react-flow__node') as HTMLElement | null) ?? host
+
+    const stopPointerTracking = () => {
+      // Keep the cursor source handle mounted while a connection drag is active;
+      // clearing it on leave unmounts the Handle and kills the drag.
+      if (draggedPortRef.current) return
+      if (leaveConfirmFrame !== null) {
+        cancelAnimationFrame(leaveConfirmFrame)
+        leaveConfirmFrame = null
+      }
+      hoveredPortRef.current = null
+      hoverSpringRef.current.target = 0
+      cursorHoverAllowedRef.current = false
+      cursorAmplitudeRef.current.target = 0
+      cursorAmplitudeRef.current.velocity = 0
+      if (trackingPointer) {
+        window.removeEventListener('pointermove', onTrackedPointerMove)
+        trackingPointer = false
+      }
+      startAnimation()
+    }
+
+    const beginPointerTracking = () => {
+      if (leaveConfirmFrame !== null) {
+        cancelAnimationFrame(leaveConfirmFrame)
+        leaveConfirmFrame = null
+      }
+      if (trackingPointer) return
+      trackingPointer = true
+      window.addEventListener('pointermove', onTrackedPointerMove)
+    }
+
+    const isWithinTrackingBounds = (clientX: number, clientY: number) => {
+      const rect = host.getBoundingClientRect()
+      return (
+        clientX >= rect.left - CURSOR_TRACKING_MARGIN_PX &&
+        clientX <= rect.right + CURSOR_TRACKING_MARGIN_PX &&
+        clientY >= rect.top - CURSOR_TRACKING_MARGIN_PX &&
+        clientY <= rect.bottom + CURSOR_TRACKING_MARGIN_PX
+      )
+    }
+
+    const isPointerOverTrackingRoot = (clientX: number, clientY: number) => {
+      if (isWithinTrackingBounds(clientX, clientY)) return true
+      const top = document.elementFromPoint(clientX, clientY)
+      return Boolean(top && trackingRoot.contains(top))
+    }
+
+    const updatePointerTarget = (clientX: number, clientY: number) => {
+      if (draggedPortRef.current) return
+      if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return
+      lastPointerRef.x = clientX
+      lastPointerRef.y = clientY
+      const { width: layoutWidth, height: layoutHeight } = sizeRef.current
+      if (layoutWidth <= 0 || layoutHeight <= 0) return
+      if (!isWithinTrackingBounds(clientX, clientY)) {
+        // Still over the node chrome (action tab / bridge) — keep listening so
+        // returning to an edge immediately restores the swell.
+        if (isPointerOverTrackingRoot(clientX, clientY)) {
+          cursorHoverAllowedRef.current = false
+          cursorAmplitudeRef.current.target = 0
+          startAnimation()
+          return
+        }
+        stopPointerTracking()
+        return
+      }
+      const rect = host.getBoundingClientRect()
+      const geometry = geometryRef.current
+      const scaleX = rect.width / layoutWidth
+      const scaleY = rect.height / layoutHeight
+      if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY) || scaleX <= 0 || scaleY <= 0) {
+        cursorHoverAllowedRef.current = false
+        cursorAmplitudeRef.current.target = 0
+        startAnimation()
+        return
+      }
+      const scale = Math.min(scaleX, scaleY)
+      const localX = (clientX - rect.left) / scaleX
+      const localY = (clientY - rect.top) / scaleY
+      if (!Number.isFinite(localX) || !Number.isFinite(localY) || !Number.isFinite(scale)) {
+        cursorHoverAllowedRef.current = false
+        cursorAmplitudeRef.current.target = 0
+        startAnimation()
+        return
+      }
+      const nearest = closestSample(geometry.samples, localX, localY)
+      const cursorSideAllowed =
+        cursorSwellSides === undefined ||
+        cursorSwellSides.includes(getPerimeterPointSide(nearest.sample))
+      const nearestPort = geometry.ports
+        .filter((port) => port.magnetizable !== false)
+        .map((port) => ({
+          port,
+          distance: arcDistance(nearest.sample.s, port.s, geometry.length),
+        }))
+        .sort((a, b) => a.distance - b.distance)[0]
+      const outwardDistance =
+        (localX - nearest.sample.x) * nearest.sample.nx +
+        (localY - nearest.sample.y) * nearest.sample.ny
+      const edgeDepth = outwardDistance > 0 ? CURSOR_EDGE_OUTSET_PX : CURSOR_EDGE_INSET_PX
+      const inEdgeZone = nearest.distance * scale <= edgeDepth
+      /*
+       * Magnetize toward ANY nearby port, connected knobs included. The cursor
+       * swell then slides into the existing knob and the two bulges coincide,
+       * reading as one shape, instead of the swell blinking out as it nears.
+       */
+      const magnetized =
+        inEdgeZone &&
+        cursorSideAllowed &&
+        nearestPort !== undefined &&
+        nearestPort.distance * scale <= MAGNETIZE_DISTANCE_PX
+      const hitElement = document.elementFromPoint(clientX, clientY)
+      const pointerOverActionControl =
+        hitElement instanceof Element &&
+        Boolean(
+          hitElement.closest('[data-workflow-action-bar-swell], [data-workflow-action-bar-bridge]')
+        )
+      /*
+       * The action bar blocks connection interaction only where its DOM is
+       * actually hit. Its broad SVG shoulders are visual chrome and must not
+       * consume the usable top-left/top-right card edge beneath them.
+       */
+      const cursorDisplacementVisible = inEdgeZone && cursorSideAllowed && !pointerOverActionControl
+      cursorSRef.current.target =
+        magnetized && !nearestPort.port.color ? nearestPort.port.s : nearest.sample.s
+      /*
+       * Whether an edge hover is allowed at all. Whether the swell is actually
+       * drawn is decided per frame in the render loop, against where the swell
+       * has sprung to rather than where the pointer is — see there for why.
+       */
+      cursorHoverAllowedRef.current = cursorDisplacementVisible
+      cursorAmplitudeRef.current.target = cursorDisplacementVisible ? 1 : 0
+      if (pointerOverActionControl) {
+        cursorAmplitudeRef.current.value = 0
+        cursorAmplitudeRef.current.velocity = 0
+      }
+      hoveredPortRef.current = magnetized ? nearestPort.port.id : null
+      startAnimation()
+    }
+
+    const onTrackedPointerMove = (event: PointerEvent) => {
+      updatePointerTarget(event.clientX, event.clientY)
+    }
+
+    const onPointerEnter = (event: PointerEvent) => {
+      hoverSpringRef.current.target = 1
+      beginPointerTracking()
+      updatePointerTarget(event.clientX, event.clientY)
+      startAnimation()
+    }
+
+    const onPointerLeave = (event: PointerEvent) => {
+      const next = event.relatedTarget
+      if (next instanceof Node && trackingRoot.contains(next)) return
+      // DOM churn from the action tab / updateNodeInternals often yields a null
+      // relatedTarget while the pointer is still over the card. Confirm on the
+      // next frame before tearing the swell down.
+      if (leaveConfirmFrame !== null) cancelAnimationFrame(leaveConfirmFrame)
+      leaveConfirmFrame = requestAnimationFrame(() => {
+        leaveConfirmFrame = null
+        if (draggedPortRef.current) return
+        if (isPointerOverTrackingRoot(lastPointerRef.x, lastPointerRef.y)) {
+          beginPointerTracking()
+          updatePointerTarget(lastPointerRef.x, lastPointerRef.y)
+          return
+        }
+        stopPointerTracking()
+      })
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Element)) return
+      const handle = target.closest<HTMLElement>('[data-handleid]')
+      if (!handle) return
+      draggedPortRef.current = handle.dataset.handleid ?? null
+      startAnimation()
+    }
+
+    const onPointerUp = (event: PointerEvent) => {
+      draggedPortRef.current = null
+      if (!isPointerOverTrackingRoot(event.clientX, event.clientY)) {
+        stopPointerTracking()
+        return
+      }
+      beginPointerTracking()
+      updatePointerTarget(event.clientX, event.clientY)
+    }
+
+    updatePointerTargetRef.current = updatePointerTarget
+    resetPointerTrackingRef.current = stopPointerTracking
+    if (cursorSwellEnabled) {
+      trackingRoot.addEventListener('pointerenter', onPointerEnter)
+      trackingRoot.addEventListener('pointerleave', onPointerLeave)
+      trackingRoot.addEventListener('pointerdown', onPointerDown, true)
+      window.addEventListener('pointerup', onPointerUp)
+      if (trackingRoot.matches(':hover')) {
+        hoverSpringRef.current.target = 1
+        beginPointerTracking()
+      }
+    } else {
+      hoveredPortRef.current = null
+      draggedPortRef.current = null
+      hoverSpringRef.current = { value: 0, velocity: 0, target: 0 }
+      cursorHoverAllowedRef.current = false
+      cursorAmplitudeRef.current = { value: 0, velocity: 0, target: 0 }
+      cursorSRef.current.velocity = 0
+      cursorSRef.current.value = cursorSRef.current.target
+    }
+    /*
+     * First paint is synchronous, inside this layout effect, so a card never
+     * commits a frame without its border. Deferring to the animation frame
+     * painted the content one frame before the silhouette — every mount
+     * flashed a bodiless card, and a suspended tab never painted one at all.
+     */
+    render(performance.now())
+
+    return () => {
+      startAnimationRef.current = () => {}
+      renderNowRef.current = () => {}
+      updatePointerTargetRef.current = () => {}
+      resetPointerTrackingRef.current = () => {}
+      onCursorHandleChangeRef.current?.(null)
+      if (leaveConfirmFrame !== null) cancelAnimationFrame(leaveConfirmFrame)
+      trackingRoot.removeEventListener('pointerenter', onPointerEnter)
+      trackingRoot.removeEventListener('pointerleave', onPointerLeave)
+      trackingRoot.removeEventListener('pointerdown', onPointerDown, true)
+      window.removeEventListener('pointermove', onTrackedPointerMove)
+      window.removeEventListener('pointerup', onPointerUp)
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current)
+      frameRef.current = null
+    }
+  }, [cursorSwellEnabled, cursorSwellSides])
+
+  useEffect(() => {
+    if (!cursorSwellEnabled) {
+      resetPointerTrackingRef.current()
+      return
+    }
+
+    /*
+     * A connection drag captures the pointer on the origin card's handle, so
+     * this card sees no pointerenter. Window pointermove still fires; feeding
+     * it into the same tracker gives the dragged line a live edge swell to aim
+     * at, and magnetization highlights the knob it would land on.
+     *
+     * Every card on the canvas listens during a drag, so the cost discipline
+     * matters: moves are coalesced to one evaluation per frame, that
+     * evaluation is a single rect test, and a card the pointer is nowhere
+     * near does nothing at all. Only the transition out of range pays for one
+     * reset. Without this, a 50-card canvas ran a DOM hit-test and scheduled
+     * a render on every card for every pointermove of the drag.
+     */
+    let engaged = false
+    let framePending = false
+    let foreignFrameId: number | null = null
+    let pointerX = 0
+    let pointerY = 0
+    const evaluate = () => {
+      framePending = false
+      foreignFrameId = null
+      const el = svgRef.current?.parentElement
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      const margin = CURSOR_TRACKING_MARGIN_PX
+      const inRange =
+        pointerX >= rect.left - margin &&
+        pointerX <= rect.right + margin &&
+        pointerY >= rect.top - margin &&
+        pointerY <= rect.bottom + margin
+      if (inRange) {
+        engaged = true
+        updatePointerTargetRef.current(pointerX, pointerY)
+      } else if (engaged) {
+        engaged = false
+        resetPointerTrackingRef.current()
+      }
+    }
+    const onForeignMove = (event: PointerEvent) => {
+      const connectionNodeId = getConnectionNodeId?.()
+      if (!nodeId || connectionNodeId == null || connectionNodeId === nodeId) return
+      pointerX = event.clientX
+      pointerY = event.clientY
+      if (!framePending) {
+        framePending = true
+        foreignFrameId = requestAnimationFrame(evaluate)
+      }
+    }
+
+    window.addEventListener('pointermove', onForeignMove)
+
+    return () => {
+      window.removeEventListener('pointermove', onForeignMove)
+      if (foreignFrameId !== null) {
+        cancelAnimationFrame(foreignFrameId)
+      }
+      resetPointerTrackingRef.current()
+    }
+  }, [cursorSwellEnabled, getConnectionNodeId, nodeId])
+
+  const ring = resolveRing(ringStyles)
+  const { d: path } = renderedPath
+  const silhouetteColor =
+    silhouetteColorOverride ??
+    (isSelected
+      ? (selectedSilhouetteColor ?? 'var(--text-secondary)')
+      : hasRing && ring.solid
+        ? ring.color
+        : 'var(--border-1)')
+
+  return (
+    <svg
+      ref={svgRef}
+      viewBox={`${-BORDER_PADDING_PX} ${-BORDER_PADDING_PX} ${size.width + BORDER_PADDING_PX * 2} ${size.height + BORDER_PADDING_PX * 2}`}
+      preserveAspectRatio='none'
+      className='pointer-events-none absolute z-0 overflow-visible'
+      style={{
+        top: -BORDER_PADDING_PX,
+        left: -BORDER_PADDING_PX,
+        width: `calc(100% + ${BORDER_PADDING_PX * 2}px)`,
+        height: `calc(100% + ${BORDER_PADDING_PX * 2}px)`,
+      }}
+      aria-hidden='true'
+      focusable='false'
+    >
+      {path && (
+        <defs>
+          <clipPath id={clipId}>
+            <path d={path} />
+          </clipPath>
+        </defs>
+      )}
+      {hasRing && !isSelected && !ring.solid && path && (
+        <path
+          d={path}
+          fill='none'
+          stroke={ring.color}
+          strokeWidth={ring.width}
+          className={ring.pulse ? 'animate-ring-pulse' : undefined}
+        />
+      )}
+      {path && (
+        <>
+          <path
+            d={path}
+            fill={silhouetteColor}
+            stroke={silhouetteColor}
+            strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+          />
+          {/*
+           * The knob's share of the silhouette outline, recoloured. Half the
+           * outline's width falls outside the filled shape, and the body fill
+           * below is clipped to that shape — so without this a hairline of the
+           * silhouette colour survives all the way around each coloured knob,
+           * reading as a light halo bleeding into it.
+           */}
+          {renderedPath.knobs.map((knob) => (
+            <path
+              key={`${knob.id}-outline`}
+              d={knob.d}
+              fill='none'
+              stroke={knob.color}
+              strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+            />
+          ))}
+          <g clipPath={`url(#${clipId})`}>
+            {renderedPath.knobs.map((knob) => (
+              <path
+                key={knob.id}
+                d={knob.d}
+                fill='none'
+                stroke={knob.color}
+                strokeWidth={PORT_FILL_STROKE_WIDTH_PX}
+              />
+            ))}
+          </g>
+          {renderedPath.overlay && (
+            <>
+              <path d={`${renderedPath.overlay} Z`} fill={silhouetteColor} />
+              <path
+                d={renderedPath.overlay}
+                fill='none'
+                stroke={silhouetteColor}
+                strokeWidth={SILHOUETTE_STROKE_WIDTH_PX}
+              />
+            </>
+          )}
+          <rect
+            x='0.75'
+            y='0.75'
+            width={Math.max(0, size.width - 1.5)}
+            height={Math.max(0, size.height - 1.5)}
+            rx={Math.max(0, radius - 0.75)}
+            fill={bodyFill}
+          />
+        </>
+      )}
+      {path && (
+        <path
+          d={path}
+          fill='none'
+          stroke='transparent'
+          strokeWidth={CURSOR_TRACKING_MARGIN_PX * 2}
+          pointerEvents='stroke'
+        />
+      )}
+    </svg>
+  )
+}
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index 931f7135f0f..aef4ac58d17 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -1,38 +1,371 @@
-import type { ComponentType, ReactNode, Ref } from 'react'
-import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
-import { Handle, Position } from 'reactflow'
-import { HANDLE_POSITIONS } from '../dimensions'
+import {
+  type ComponentType,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { Badge, ChipTag, cn, handleKeyboardActivation, Switch, Tooltip } from '@sim/emcn'
+import {
+  getPositionedSourceHandleId,
+  getPositionedTargetHandleId,
+  POSITIONED_SOURCE_HANDLE_SIDES,
+  type PositionedSourceHandleSide,
+} from '@sim/workflow-types/workflow'
+import { CircleOff, Lock } from 'lucide-react'
+import {
+  Handle,
+  internalsSymbol,
+  Position,
+  useStoreApi as useReactFlowStoreApi,
+  useUpdateNodeInternals,
+} from 'reactflow'
+import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '../dimensions'
+import { humanizeBlockName } from '../lib/humanize-block-name'
 import { OverflowSpan } from '../lib/overflow-span'
-import { tileIconColorClass } from '../lib/tile-icon-color'
+import { isLightTileColor } from '../lib/tile-icon-color'
 import type { BlockRunStatus } from '../types'
+import {
+  getCursorBranchSourceHandleId,
+  getCursorSourceHandleId,
+  getCursorSourceHandlePosition,
+} from './source-handle'
 import { SubBlockRowView } from './sub-block-row-view'
+import { useActionMenuSwell } from './use-action-menu-swell'
+import {
+  CONNECTION_KNOB_PEAK_PX,
+  CURSOR_SWELL_LENGTH_PX,
+  WorkflowBlockBorder,
+  type WorkflowBorderCursorHandle,
+  type WorkflowBorderPort,
+} from './workflow-block-border'
+
+const getHandleStyle = (position: 'horizontal' | 'vertical') => {
+  if (position === 'horizontal') {
+    return { top: '50%', transform: 'translateY(-50%)' }
+  }
+  return { left: '50%', transform: 'translateX(-50%)' }
+}
+
+/** Radial hit depth stays on the painted knob instead of covering card content. */
+const HANDLE_HIT_CROSS_PX = CONNECTION_KNOB_PEAK_PX * 2
+/** Along-edge hit span matches the primary connection knob's painted footprint. */
+const MAIN_HANDLE_HIT_LENGTH_PX = 38
+/** Card bottom → error-row centre: half the content padding + half the row. */
+const TAB_LENGTH_PX = 36
+const TAB_LENGTH_SMALL_PX = 24
+const TAB_LENGTH_MIN_PX = 16
+const TAB_LENGTH_HEADER_ONLY_PX = 10
+/** The error knob is deliberately the shortest of the connection knobs — it is
+ *  a secondary output, and a full-length tab crowds the card's bottom corner. */
+const TAB_HEIGHT_RATIO = 0.5
+const CARD_CORNER_RADIUS_PX = 16
+const CORNER_SLACK_PX = 4
+const ACTION_MENU_RIGHT_INSET_PX = 24
+const ACTION_MENU_MAX_WIDTH_PX = BLOCK_DIMENSIONS.FIXED_WIDTH - ACTION_MENU_RIGHT_INSET_PX * 2
+const ACTION_MENU_AMPLITUDE = 7
+/** Compile-time pin: the `-7px` handle outsets below must track the knob peak. */
+const HANDLE_OUTSET_PX: typeof CONNECTION_KNOB_PEAK_PX = 7
+
+interface BranchCursorRow {
+  id: string
+}
+
+interface WorkflowCursorSourceHandle extends WorkflowBorderCursorHandle {
+  handleId: string
+}
+
+/** Resolves a moving branch-card swell to the nearest visible branch row. */
+export function getNearestBranchCursorHandleId(
+  rows: BranchCursorRow[],
+  cursorY: number,
+  firstRowY: number,
+  handlePrefix: 'condition' | 'router'
+): string | null {
+  if (rows.length === 0) return null
+
+  const nearestIndex = Math.min(
+    rows.length - 1,
+    Math.max(0, Math.round((cursorY - firstRowY) / HANDLE_POSITIONS.CONDITION_ROW_HEIGHT))
+  )
+  return getCursorBranchSourceHandleId(`${handlePrefix}-${rows[nearestIndex].id}`)
+}
+
+const WORKFLOW_ROLE_ACCENTS = {
+  agentic: { variant: 'workflow', tone: 'inverse' },
+  interface: { variant: 'workflow', tone: 'blue' },
+  logic: { variant: 'workflow', tone: 'orange' },
+  state: { variant: 'workflow', tone: 'yellow' },
+  flow: { variant: 'workflow', tone: 'ash' },
+  records: { variant: 'workflow', tone: 'green' },
+  neutral: { variant: 'workflow', tone: 'neutral' },
+  generative: { variant: 'workflow', tone: 'purple' },
+  knowledge: { variant: 'workflow', tone: 'content' },
+} as const
+
+export type WorkflowTypeRole = keyof typeof WORKFLOW_ROLE_ACCENTS
+
+const WORKFLOW_TYPE_ROLES = {
+  a2a: 'neutral',
+  agent: 'agentic',
+  api: 'interface',
+  condition: 'logic',
+  credential: 'state',
+  deployments: 'neutral',
+  enrichment: 'knowledge',
+  evaluator: 'logic',
+  file: 'knowledge',
+  file_v2: 'knowledge',
+  file_v3: 'knowledge',
+  file_v4: 'knowledge',
+  file_v5: 'knowledge',
+  function: 'logic',
+  generic_webhook: 'interface',
+  guardrails: 'logic',
+  human_in_the_loop: 'state',
+  image_generator: 'generative',
+  image_generator_v2: 'generative',
+  imap: 'interface',
+  knowledge: 'knowledge',
+  logs: 'records',
+  logs_v2: 'records',
+  loop: 'flow',
+  mcp: 'interface',
+  memory: 'state',
+  mothership: 'agentic',
+  note: 'neutral',
+  parallel: 'flow',
+  pi: 'agentic',
+  response: 'interface',
+  router: 'flow',
+  router_v2: 'flow',
+  rss: 'knowledge',
+  schedule: 'flow',
+  search: 'knowledge',
+  sim_workspace_event: 'interface',
+  start_trigger: 'flow',
+  starter: 'neutral',
+  stt: 'generative',
+  stt_v2: 'generative',
+  table: 'records',
+  table_v2: 'records',
+  thinking: 'agentic',
+  translate: 'generative',
+  tts: 'generative',
+  variables: 'state',
+  video_generator: 'generative',
+  video_generator_v2: 'generative',
+  video_generator_v3: 'generative',
+  vision: 'generative',
+  vision_v2: 'generative',
+  wait: 'flow',
+  webhook_request: 'interface',
+  workflow: 'interface',
+  workflow_input: 'interface',
+} as const satisfies Record<string, WorkflowTypeRole>
+
+const DEFAULT_WORKFLOW_TYPE_ROLE: WorkflowTypeRole = 'neutral'
+
+export const hasWorkflowTypeRole = (type: string): type is keyof typeof WORKFLOW_TYPE_ROLES =>
+  Object.hasOwn(WORKFLOW_TYPE_ROLES, type)
+
+export const getWorkflowTypeRole = (type: string): WorkflowTypeRole =>
+  WORKFLOW_TYPE_ROLES[type as keyof typeof WORKFLOW_TYPE_ROLES] ?? DEFAULT_WORKFLOW_TYPE_ROLE
+
+export const getWorkflowTypeAccent = (type: string) =>
+  WORKFLOW_ROLE_ACCENTS[getWorkflowTypeRole(type)]
+
+export interface WorkflowTypeIconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+  type: string
+  Icon: ComponentType<{ className?: string }>
+}
+
+/** Shared compact core-block icon used by workflow discovery surfaces. */
+export function WorkflowTypeIcon({ type, Icon, className, ...props }: WorkflowTypeIconProps) {
+  const typeAccent = getWorkflowTypeAccent(type)
+
+  return (
+    <ChipTag
+      variant={typeAccent.variant}
+      tone={typeAccent.tone}
+      className={cn('size-[16px] flex-shrink-0 justify-center p-0', className)}
+      data-workflow-type-icon={type}
+      {...props}
+    >
+      <Icon className='size-[10px] transition-transform duration-100 group-hover:scale-110' />
+    </ChipTag>
+  )
+}
+
+export interface WorkflowTypeTagProps {
+  type: string
+  typeLabel?: string
+  blockName: string
+  Icon: ComponentType<{ className?: string }>
+  iconBgColor: string
+  isIntegration?: boolean
+  isEnabled?: boolean
+}
+
+/** Shared provider/type tag used by editable and read-only workflow canvases. */
+export function WorkflowTypeTag({
+  type,
+  typeLabel,
+  blockName,
+  Icon,
+  iconBgColor,
+  isIntegration = false,
+  isEnabled = true,
+}: WorkflowTypeTagProps) {
+  const typeAccent = getWorkflowTypeAccent(type)
+  const label = typeLabel && typeLabel !== blockName ? typeLabel : null
+  const sharedClassName = cn(
+    'flex-shrink-0 justify-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+    !label && 'size-5 p-0',
+    !isEnabled && 'opacity-50'
+  )
+
+  if (isIntegration) {
+    return (
+      <ChipTag
+        variant='brand'
+        brandColor={iconBgColor}
+        brandForeground={isLightTileColor(iconBgColor) ? 'dark' : 'light'}
+        className={sharedClassName}
+        data-workflow-type-accent={type}
+        data-workflow-brand-tag=''
+      >
+        <Icon className='size-[14px] flex-shrink-0' />
+        {label}
+      </ChipTag>
+    )
+  }
+
+  return (
+    <ChipTag
+      variant={typeAccent.variant}
+      tone={typeAccent.tone}
+      className={sharedClassName}
+      data-workflow-type-accent={type}
+    >
+      <Icon className='size-[14px] flex-shrink-0' />
+      {label}
+    </ChipTag>
+  )
+}
+
+interface BlockStateIndicatorProps {
+  label: string
+  Icon: ComponentType<{ className?: string }>
+}
+
+function BlockStateIndicator({ label, Icon }: BlockStateIndicatorProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <ChipTag
+          variant='workflow'
+          tone='neutral'
+          className='size-5 flex-shrink-0 justify-center p-0'
+          aria-label={label}
+        >
+          <Icon className='size-[12px] flex-shrink-0' />
+        </ChipTag>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        <span className='text-sm'>{label}</span>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
+const clampTabLength = (length: number) =>
+  Math.min(TAB_LENGTH_PX, Math.max(TAB_LENGTH_MIN_PX, Math.round(length)))
 
 /**
- * Reusable styles and positioning for Handle components.
+ * The outsets below are the anchor every edge terminates at, and they must
+ * equal the height each knob is painted at — otherwise the line stops short of
+ * the knob (or overshoots past it). Tailwind only scans literal class strings,
+ * so the value is spelled out here and pinned to the renderer's constant by the
+ * assertion above.
  */
-const getHandleClasses = (position: 'left' | 'right' | 'top' | 'bottom', isError = false) => {
-  const baseClasses = '!z-[0] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-  const colorClasses = isError ? '!bg-[var(--text-error)]' : '!bg-[var(--workflow-edge)]'
-
-  const positionClasses = {
-    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
-    right:
-      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
-    top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover-hover:!top-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-t-full',
-    bottom:
-      '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover-hover:!bottom-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-b-full',
-  }
+const getInvisibleHandleClasses = (side: 'left' | 'right' | 'top' | 'bottom') => {
+  const offsetClasses = {
+    right: '!right-[-7px]',
+    left: '!left-[-7px]',
+    top: '!top-[-7px]',
+    bottom: '!bottom-[-7px]',
+  } as const
+  return cn(
+    '!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0',
+    offsetClasses[side]
+  )
+}
 
-  return cn(baseClasses, colorClasses, positionClasses[position])
+/**
+ * Hit area for a connection port. It follows the painted knob instead of the
+ * broader edge-hover swell, keeping nearby card content draggable. Main ports
+ * use the primary knob footprint; branch ports can fill their row lane so
+ * adjacent targets meet without overlapping while the painted knobs stay
+ * visually compact.
+ */
+const invisibleHandleSize = (
+  side: 'left' | 'right' | 'top' | 'bottom',
+  length: number,
+  minLength = 0
+) => {
+  const span = Math.max(length, minLength)
+  return side === 'top' || side === 'bottom'
+    ? { width: span, height: HANDLE_HIT_CROSS_PX }
+    : { width: HANDLE_HIT_CROSS_PX, height: span }
 }
 
-const getHandleStyle = (position: 'horizontal' | 'vertical') => {
-  if (position === 'horizontal') {
-    return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
+const getReactFlowPosition = (side: PositionedSourceHandleSide) => {
+  return side === 'left' ? Position.Left : Position.Right
+}
+
+const getCenteredSideHandleStyle = (side: PositionedSourceHandleSide): CSSProperties => {
+  const style: CSSProperties = {
+    right: 'auto',
+    bottom: 'auto',
+    width: 1,
+    height: 1,
   }
-  return { left: '50%', transform: 'translateX(-50%)' }
+  if (side === 'right') {
+    return { ...style, top: '50%', left: '100%', transform: 'translate(-50%, -50%)' }
+  }
+  return { ...style, top: '50%', left: 0, transform: 'translate(-50%, -50%)' }
 }
 
+/** Error is the only persisted source that leaves from a vertical card edge. */
+export const ERROR_SOURCE_HANDLE_POSITION = Position.Bottom
+
+/** Keeps the Error hit target centered on the painted bottom-right knob. */
+export const getErrorSourceHandleStyle = (): CSSProperties => ({
+  right: 'auto',
+  top: 'auto',
+  bottom: -HANDLE_OUTSET_PX,
+  left: `calc(100% - ${HANDLE_POSITIONS.ERROR_RIGHT_OFFSET}px)`,
+  width: TAB_LENGTH_SMALL_PX,
+  height: HANDLE_HIT_CROSS_PX,
+  transform: 'translateX(-50%)',
+})
+
+/** Builds the fixed Error knob painted into the card's bottom edge. */
+export const getErrorBorderPort = (color?: string): WorkflowBorderPort => ({
+  id: 'error',
+  side: 'bottom',
+  position: { fromEnd: HANDLE_POSITIONS.ERROR_RIGHT_OFFSET },
+  plateau: TAB_LENGTH_SMALL_PX,
+  color,
+})
+
 /**
  * Props for the pure workflow-block renderer.
  *
@@ -55,13 +388,27 @@ export interface WorkflowBlockViewProps {
   ringStyles: string
   /** Resolved run-path outcome, drives the muted-name styling. */
   runPathStatus?: BlockRunStatus
+  /** Whether execution controls are active for this block. */
+  isRunning?: boolean
+  /** Whether the parent workflow is executing. Holds every block's action swell open. */
+  isWorkflowRunning?: boolean
+  /** Whether this block participates in the current execution handoff. */
+  isExecutionHighlighted?: boolean
   /** Block icon component and its background color. */
   Icon: ComponentType<{ className?: string }>
   iconBgColor: string
+  /** Whether the header tag should use the provider's integration colour. */
+  isIntegration?: boolean
 
   /** Handle orientation and topology, resolved by the container. */
   horizontalHandles: boolean
   shouldShowDefaultHandles: boolean
+  /**
+   * Deterministic card height in px, used to scale the side connection tabs
+   * so a short card never wears a tab nearly as tall as itself. Omit to keep
+   * the full-size tabs (read-only contexts without computed dimensions).
+   */
+  blockHeight?: number
   hasContentBelowHeader: boolean
   conditionRows: { id: string; title: string; value: string }[]
   routerRows: { id: string; value: string }[]
@@ -113,6 +460,42 @@ export interface WorkflowBlockViewProps {
    * conditionRows/routerRows.
    */
   rows: ReactNode
+  /**
+   * Inline statement fragments rendered as one line above the rows (operation
+   * · target). Built by the container; standard blocks only — condition/router
+   * blocks render their branch rows instead.
+   */
+  chips?: ReactNode
+  /**
+   * Block-kind label (e.g. "Table", "Agent") shown as a ChipTag on the header
+   * right. Hidden when it matches the block name to avoid duplication.
+   */
+  typeLabel?: string
+  /**
+   * Natural-language summary of what the block does, with inline value
+   * chips. When present it replaces the statement line and field rows;
+   * the error footer stays.
+   */
+  sentence?: ReactNode
+  /**
+   * Whether a persisted legacy error route is wired from this block. Used
+   * only to retain a non-interactive edge anchor for existing workflows.
+   */
+  hasErrorConnection?: boolean
+  /** Whether this block's error output is switched on. */
+  errorOutputEnabled?: boolean
+  /** Toggles the error output from the card's error row. */
+  onToggleErrorOutput?: (enabled: boolean) => void
+  /**
+   * Handle ids whose connected edge is currently highlighted (an endpoint
+   * block is selected) — their tabs darken to match the edge color so the
+   * line and its port read as one piece.
+   */
+  highlightedHandles?: ReadonlySet<string>
+  /** Side-specific source handles currently used by persisted edges. */
+  connectedSourceHandles?: ReadonlySet<string>
+  /** Side-specific target handles currently used by persisted edges. */
+  connectedTargetHandles?: ReadonlySet<string>
 }
 
 /**
@@ -130,10 +513,14 @@ export function WorkflowBlockView({
   hasRing,
   ringStyles,
   runPathStatus,
+  isRunning = false,
+  isWorkflowRunning = false,
+  isExecutionHighlighted = false,
   Icon,
   iconBgColor,
-  horizontalHandles,
+  isIntegration = false,
   shouldShowDefaultHandles,
+  blockHeight,
   hasContentBelowHeader,
   conditionRows,
   routerRows,
@@ -165,9 +552,322 @@ export function WorkflowBlockView({
   contentRef,
   actionBar,
   rows,
+  chips,
+  typeLabel,
+  sentence,
+  hasErrorConnection = false,
+  errorOutputEnabled = false,
+  onToggleErrorOutput,
+  highlightedHandles,
+  connectedSourceHandles,
+  connectedTargetHandles,
 }: WorkflowBlockViewProps) {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const reactFlowStore = useReactFlowStoreApi()
+  const getConnectionNodeId = useCallback(
+    () => reactFlowStore.getState().connectionNodeId,
+    [reactFlowStore]
+  )
+  const supportsPositionedHandles =
+    type !== 'condition' && type !== 'router_v2' && type !== 'response'
+  const supportsCursorHandle = type !== 'response'
+  const cursorSourceHandleRef = useRef<HTMLDivElement>(null)
+  const cursorSourceHandleKeyRef = useRef<string | null>(null)
+  const [cursorSourceHandle, setCursorSourceHandle] = useState<WorkflowCursorSourceHandle | null>(
+    null
+  )
+  const onCursorHandleChange = useCallback(
+    (nextHandle: WorkflowBorderCursorHandle | null) => {
+      if (!supportsCursorHandle) return
+      if (!nextHandle) {
+        if (cursorSourceHandleKeyRef.current === null) return
+        cursorSourceHandleKeyRef.current = null
+        setCursorSourceHandle(null)
+        return
+      }
+
+      const handleId =
+        type === 'condition'
+          ? getNearestBranchCursorHandleId(
+              conditionRows,
+              nextHandle.y,
+              HANDLE_POSITIONS.CONDITION_START_Y,
+              'condition'
+            )
+          : type === 'router_v2'
+            ? getNearestBranchCursorHandleId(
+                routerRows,
+                nextHandle.y,
+                HANDLE_POSITIONS.CONDITION_START_Y + HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+                'router'
+              )
+            : getCursorSourceHandleId(nextHandle.side)
+      if (!handleId) return
+
+      const handleElement = cursorSourceHandleRef.current
+      if (handleElement) {
+        handleElement.style.left = `${nextHandle.x}px`
+        handleElement.style.top = `${nextHandle.y}px`
+      }
+      const nextKey = `${handleId}:${nextHandle.edgeSide}`
+      if (cursorSourceHandleKeyRef.current !== nextKey) {
+        cursorSourceHandleKeyRef.current = nextKey
+        setCursorSourceHandle({ ...nextHandle, handleId })
+      }
+    },
+    [conditionRows, routerRows, supportsCursorHandle, type]
+  )
+  /**
+   * Keeps React Flow's cached origin aligned with the transient DOM handle
+   * without remeasuring the node or publishing a canvas-wide store update.
+   */
+  const syncCursorSourceHandleBounds = useCallback(() => {
+    const handleElement = cursorSourceHandleRef.current
+    const nodeElement = handleElement?.closest<HTMLDivElement>('.react-flow__node') ?? null
+    if (!handleElement || !nodeElement) return
+
+    const state = reactFlowStore.getState()
+    const sourceBounds = state.nodeInternals.get(id)?.[internalsSymbol]?.handleBounds?.source
+    const handleId = handleElement.dataset.handleid
+    const handlePosition = handleElement.dataset.handlepos as Position | undefined
+    const zoom = state.transform[2]
+    if (!sourceBounds || !handleId || !handlePosition || zoom <= 0) return
+
+    const nodeBounds = nodeElement.getBoundingClientRect()
+    const handleBounds = handleElement.getBoundingClientRect()
+    const [originX, originY] = state.nodeOrigin
+    const nextBounds = {
+      id: handleId,
+      position: handlePosition,
+      x: (handleBounds.left - nodeBounds.left - nodeBounds.width * originX) / zoom,
+      y: (handleBounds.top - nodeBounds.top - nodeBounds.height * originY) / zoom,
+      width: handleElement.offsetWidth,
+      height: handleElement.offsetHeight,
+    }
+    const currentBounds = sourceBounds.find((bounds) => bounds.id === handleId)
+    if (currentBounds) {
+      Object.assign(currentBounds, nextBounds)
+      return
+    }
+    sourceBounds.push(nextBounds)
+  }, [id, reactFlowStore])
+  const isNodeSelected = hasRing && ringStyles.includes('--text-secondary')
+  const usesSelectedVisuals = isNodeSelected || isExecutionHighlighted
+  const showActionMenu = Boolean(actionBar)
+  const {
+    rootRef: actionMenuRootRef,
+    hostRef: actionMenuHostRef,
+    width: actionMenuWidth,
+    swellOpen: actionMenuSwellOpen,
+    contentVisible: actionMenuContentVisible,
+    setReady: setActionMenuSwellReady,
+    onFocusCapture: handleActionMenuFocus,
+    onBlurCapture: handleActionMenuBlur,
+  } = useActionMenuSwell({
+    enabled: showActionMenu,
+    forceOpen: Boolean(usesSelectedVisuals || isRunning || isWorkflowRunning),
+    maxWidth: ACTION_MENU_MAX_WIDTH_PX,
+    suspendInteraction: isRunning || isWorkflowRunning,
+  })
+  /* Blocks that can emit an error always carry the row; `response` terminates
+     the flow and has no error branch. */
+  const showErrorRow = shouldShowDefaultHandles && type !== 'response'
+  /*
+   * The error output is a real, draggable source whenever the toggle is on (a
+   * connection forces the toggle on, so connected cards always have it). It
+   * doubles as the edge anchor for existing error connections.
+   */
+  const rendersErrorHandle = showErrorRow && (errorOutputEnabled || hasErrorConnection)
+  useEffect(() => {
+    if (supportsCursorHandle) return
+    cursorSourceHandleKeyRef.current = null
+    setCursorSourceHandle(null)
+  }, [supportsCursorHandle])
+  useLayoutEffect(() => {
+    updateNodeInternals(id)
+  }, [
+    cursorSourceHandle?.handleId,
+    cursorSourceHandle?.side,
+    id,
+    /* The error handle mounts with the toggle; without a refresh React Flow
+       keeps stale handleBounds and drops the edge (error 008) until something
+       else re-measures the node. */
+    rendersErrorHandle,
+    updateNodeInternals,
+  ])
+  const tabFill = (handleId: string) =>
+    highlightedHandles?.has(handleId) ? 'var(--text-secondary)' : undefined
+
+  /* Side tabs scale with the card: half the card height, clamped to 16-36px,
+     so both default ports on a two-port card stay identical while a
+     header-only card gets a proportionally short tab. A second cap keeps the
+     bulge junctions on the straight border segment, clear of the rounded
+     corners where the outline curves away from the tab's wall. Header-only
+     trigger cards do not always expose a computed height, so their fallback
+     stays at the minimum. */
+  const sideTabLength = !hasContentBelowHeader
+    ? TAB_LENGTH_HEADER_ONLY_PX
+    : blockHeight && blockHeight > 0
+      ? clampTabLength(
+          Math.min(
+            blockHeight * TAB_HEIGHT_RATIO,
+            blockHeight - 2 * (CARD_CORNER_RADIUS_PX - CORNER_SLACK_PX)
+          )
+        )
+      : TAB_LENGTH_MIN_PX
+  const mainTabLength = (side: 'left' | 'right' | 'top' | 'bottom') =>
+    side === 'top' || side === 'bottom' ? TAB_LENGTH_PX : sideTabLength
+
+  /* Per-row branch ports shrink as rows multiply (24px for two rows, -2px per
+     extra row, floored at 16px) so a long stack keeps air between the bumps
+     within the fixed 29px row pitch. */
+  const branchRowCount = type === 'condition' ? conditionRows.length : routerRows.length
+  const rowTabLength = clampTabLength(
+    branchRowCount <= 2 ? TAB_LENGTH_SMALL_PX : TAB_LENGTH_SMALL_PX - (branchRowCount - 2) * 2
+  )
+  const defaultTargetSide: PositionedSourceHandleSide = 'left'
+  const defaultSourceSide: PositionedSourceHandleSide = 'right'
+  const borderPorts = useMemo<WorkflowBorderPort[]>(() => {
+    const ports: WorkflowBorderPort[] = []
+    if (shouldShowDefaultHandles) {
+      ports.push({
+        id: 'target',
+        side: defaultTargetSide,
+        position: 'center',
+        plateau: mainTabLength(defaultTargetSide),
+        color:
+          tabFill('target') ??
+          tabFill(getPositionedSourceHandleId(defaultTargetSide)) ??
+          tabFill(getPositionedTargetHandleId(defaultTargetSide)),
+      })
+    }
+    if (type === 'condition') {
+      conditionRows.forEach((condition, index) => {
+        ports.push({
+          id: `condition-${condition.id}`,
+          side: 'right',
+          position:
+            HANDLE_POSITIONS.CONDITION_START_Y + index * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+          plateau: rowTabLength,
+          color: tabFill(`condition-${condition.id}`),
+        })
+      })
+    } else if (type === 'router_v2') {
+      routerRows.forEach((route, index) => {
+        ports.push({
+          id: `router-${route.id}`,
+          side: 'right',
+          position:
+            HANDLE_POSITIONS.CONDITION_START_Y +
+            (index + 1) * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT,
+          plateau: rowTabLength,
+          color: tabFill(`router-${route.id}`),
+        })
+      })
+    } else if (type !== 'response') {
+      ports.push({
+        id: 'source',
+        side: defaultSourceSide,
+        position: 'center',
+        plateau: mainTabLength(defaultSourceSide),
+        color:
+          tabFill('source') ??
+          tabFill(getPositionedSourceHandleId(defaultSourceSide)) ??
+          tabFill(getPositionedTargetHandleId(defaultSourceSide)),
+      })
+    }
+    if (supportsPositionedHandles) {
+      for (const side of POSITIONED_SOURCE_HANDLE_SIDES) {
+        const handleId = getPositionedSourceHandleId(side)
+        const sharesDefaultPort =
+          side === defaultSourceSide || (shouldShowDefaultHandles && side === defaultTargetSide)
+        if (!connectedSourceHandles?.has(handleId) || sharesDefaultPort) continue
+        ports.push({
+          id: handleId,
+          side,
+          position: 'center',
+          plateau: mainTabLength(side),
+          color: tabFill(handleId) ?? tabFill(getPositionedTargetHandleId(side)),
+        })
+      }
+    }
+    for (const side of POSITIONED_SOURCE_HANDLE_SIDES) {
+      const handleId = getPositionedTargetHandleId(side)
+      const sharesDefaultPort =
+        (shouldShowDefaultHandles && side === defaultTargetSide) ||
+        side === defaultSourceSide ||
+        connectedSourceHandles?.has(getPositionedSourceHandleId(side))
+      if (!connectedTargetHandles?.has(handleId) || sharesDefaultPort) continue
+      ports.push({
+        id: handleId,
+        side,
+        position: 'center',
+        plateau: mainTabLength(side),
+        color: tabFill(handleId),
+      })
+    }
+    if (showErrorRow && errorOutputEnabled) {
+      ports.push(getErrorBorderPort(tabFill('error')))
+    }
+    if (showActionMenu) {
+      ports.push({
+        id: 'action-menu',
+        side: 'top',
+        position: { fromEnd: ACTION_MENU_RIGHT_INSET_PX + actionMenuWidth / 2 },
+        plateau: actionMenuWidth,
+        restAmplitude: actionMenuSwellOpen ? ACTION_MENU_AMPLITUDE : 0,
+        hoverAmplitude: ACTION_MENU_AMPLITUDE,
+        magnetizable: false,
+      })
+    }
+    return ports
+  }, [
+    conditionRows,
+    connectedSourceHandles,
+    connectedTargetHandles,
+    actionMenuSwellOpen,
+    actionMenuWidth,
+    defaultSourceSide,
+    defaultTargetSide,
+    highlightedHandles,
+    routerRows,
+    rowTabLength,
+    shouldShowDefaultHandles,
+    showActionMenu,
+    showErrorRow,
+    errorOutputEnabled,
+    sideTabLength,
+    supportsPositionedHandles,
+    type,
+  ])
+
   return (
-    <div className='group relative'>
+    <div
+      ref={actionMenuRootRef}
+      className='group relative'
+      data-action-menu-ready={actionMenuContentVisible ? '' : undefined}
+      /* Single source of truth for "the swell is painted in the selection
+         color" — the action bar keys its icon treatment off this instead of
+         React Flow's raw `selected`. */
+      data-node-selected={usesSelectedVisuals ? '' : undefined}
+      data-execution-highlighted={isExecutionHighlighted ? '' : undefined}
+    >
+      {showActionMenu && (
+        <>
+          <div
+            aria-hidden='true'
+            data-workflow-action-bar-bridge=''
+            className='-top-[28px] pointer-events-auto absolute inset-x-0 z-10 h-[28px]'
+          />
+          <div
+            ref={actionMenuHostRef}
+            onFocusCapture={handleActionMenuFocus}
+            onBlurCapture={handleActionMenuBlur}
+          >
+            {actionBar}
+          </div>
+        </>
+      )}
       <div
         ref={contentRef}
         role='button'
@@ -175,24 +875,75 @@ export function WorkflowBlockView({
         onClick={onSelect}
         onKeyDown={(event) => handleKeyboardActivation(event, onSelect)}
         className={cn(
-          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-2xl [&:active]:cursor-grabbing'
         )}
+        /* Never let the host fall below the shortest silhouette the border can
+           paint. `blockHeight` arrives from the deterministic-dimensions pass
+           and is already floored at MIN_PAINTED_HEIGHT, but it is absent on the
+           first frames — and with no floor the host collapses to its natural
+           content height (~25px for a header-only trigger). The border builds
+           its perimeter from `host.offsetHeight`, so that window paints a
+           sub-floor card: the action-menu tab is squashed and its icon row
+           spills onto the card. */
+        style={{ minHeight: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }}
       >
+        <WorkflowBlockBorder
+          nodeId={id}
+          getConnectionNodeId={getConnectionNodeId}
+          ports={borderPorts}
+          hasRing={hasRing || isExecutionHighlighted}
+          ringStyles={
+            isExecutionHighlighted ? 'ring-[1.5px] ring-[var(--text-secondary)]' : ringStyles
+          }
+          isSelected={usesSelectedVisuals}
+          height={blockHeight}
+          onCursorHandleChange={supportsCursorHandle ? onCursorHandleChange : undefined}
+          onActionMenuReadyChange={setActionMenuSwellReady}
+        />
+        {cursorSourceHandle && (
+          <Handle
+            ref={cursorSourceHandleRef}
+            type='source'
+            position={getCursorSourceHandlePosition(cursorSourceHandle.edgeSide)}
+            id={cursorSourceHandle.handleId}
+            className='!z-50 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            style={{
+              right: 'auto',
+              bottom: 'auto',
+              left: cursorSourceHandle.x,
+              top: cursorSourceHandle.y,
+              transform: 'translate(-50%, -50%)',
+              ...invisibleHandleSize(cursorSourceHandle.edgeSide, CURSOR_SWELL_LENGTH_PX),
+            }}
+            data-nodeid={id}
+            data-handleid={cursorSourceHandle.handleId}
+            data-workflow-cursor-edge={cursorSourceHandle.edgeSide}
+            data-workflow-cursor-source-side={cursorSourceHandle.side}
+            isConnectableStart={true}
+            isConnectableEnd={false}
+            onPointerDownCapture={syncCursorSourceHandleBounds}
+            isValidConnection={(connection) => {
+              if (connection.target === id) return false
+              return !wouldCreateConnectionCycle(connection.source!, connection.target!)
+            }}
+          />
+        )}
         {isPending && (
           <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-amber-500 px-2 py-0.5 text-white text-xs'>
             Next Step
           </div>
         )}
 
-        {actionBar}
-
         {shouldShowDefaultHandles && (
           <Handle
             type='target'
-            position={horizontalHandles ? Position.Left : Position.Top}
+            position={Position.Left}
             id='target'
-            className={getHandleClasses(horizontalHandles ? 'left' : 'top')}
-            style={getHandleStyle(horizontalHandles ? 'horizontal' : 'vertical')}
+            className={getInvisibleHandleClasses('left')}
+            style={{
+              ...getHandleStyle('horizontal'),
+              ...invisibleHandleSize('left', mainTabLength('left'), MAIN_HANDLE_HIT_LENGTH_PX),
+            }}
             data-nodeid={id}
             data-handleid='target'
             isConnectableStart={false}
@@ -206,26 +957,28 @@ export function WorkflowBlockView({
 
         <div
           className={cn(
-            'flex items-center justify-between p-2',
-            hasContentBelowHeader && 'border-[var(--border-1)] border-b'
+            'flex items-center justify-between px-2',
+            hasContentBelowHeader && 'h-[40px]'
           )}
+          /* Header-only cards stretch the header to the full card so its
+             `items-center` centres the title and type tag. Floored for the
+             same reason the host is: without it the row collapses to its
+             natural height on the frames before `blockHeight` arrives and the
+             content pins to the top of the card. */
+          style={
+            !hasContentBelowHeader
+              ? { height: Math.max(blockHeight ?? 0, BLOCK_DIMENSIONS.MIN_PAINTED_HEIGHT) }
+              : undefined
+          }
         >
-          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
-            <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
-              style={{
-                background: isEnabled ? iconBgColor : 'gray',
-              }}
-            >
-              <Icon
-                className={cn(
-                  'size-[16px]',
-                  isEnabled ? tileIconColorClass(iconBgColor) : 'text-[var(--text-icon)]'
-                )}
-              />
-            </div>
+          <div
+            className={cn(
+              'relative z-10 flex min-w-0 flex-1 items-center transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              !isEnabled && 'opacity-50'
+            )}
+          >
             <OverflowSpan
-              value={name}
+              value={humanizeBlockName(name)}
               className={cn(
                 'truncate text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
@@ -233,6 +986,17 @@ export function WorkflowBlockView({
             />
           </div>
           <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
+            {!isEnabled && <BlockStateIndicator label='Disabled' Icon={CircleOff} />}
+            {isLocked && <BlockStateIndicator label='Locked' Icon={Lock} />}
+            <WorkflowTypeTag
+              type={type}
+              typeLabel={typeLabel}
+              blockName={name}
+              Icon={Icon}
+              iconBgColor={iconBgColor}
+              isIntegration={isIntegration}
+              isEnabled={isEnabled}
+            />
             {sunsetStatus && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -294,9 +1058,6 @@ export function WorkflowBlockView({
                   </Tooltip.Content>
                 </Tooltip.Root>
               )}
-            {!isEnabled && !isLocked && <Badge variant='gray-secondary'>disabled</Badge>}
-            {isLocked && <Badge variant='gray-secondary'>locked</Badge>}
-
             {type === 'schedule' && shouldShowScheduleBadge && scheduleIsDisabled && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -372,7 +1133,12 @@ export function WorkflowBlockView({
         </div>
 
         {hasContentBelowHeader && (
-          <div className='flex flex-col gap-2 p-2'>
+          <div
+            className={cn(
+              'relative z-10 flex flex-col gap-2 p-2 transition-opacity duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
+              !isEnabled && 'opacity-50'
+            )}
+          >
             {type === 'condition' ? (
               conditionRows.map((cond) => (
                 <SubBlockRowView key={cond.id} title={cond.title} displayValue={cond.value} />
@@ -388,10 +1154,36 @@ export function WorkflowBlockView({
                   />
                 ))}
               </>
+            ) : sentence ? (
+              <p className='min-w-0 break-words text-[var(--text-muted)] text-sm leading-6'>
+                {sentence}
+              </p>
             ) : (
-              rows
+              <>
+                {chips && (
+                  <div className='flex min-w-0 items-center gap-1.5 overflow-hidden'>{chips}</div>
+                )}
+                {rows}
+              </>
+            )}
+            {showErrorRow && (
+              <div
+                className='flex h-[24px] shrink-0 items-center justify-between rounded-[6px] bg-[var(--surface-5)] pr-1 pl-2 dark:bg-[var(--surface-4)]'
+                /* The card is a drag handle and the row holds a control, so the
+                   pointer must not start a node drag here. */
+                onPointerDown={(event) => event.stopPropagation()}
+                onClick={(event) => event.stopPropagation()}
+              >
+                <span className='text-[var(--text-muted)] text-caption'>On error</span>
+                <Switch
+                  checked={errorOutputEnabled}
+                  onCheckedChange={(next) => onToggleErrorOutput?.(next)}
+                  aria-label='On error branch'
+                  disabled={!onToggleErrorOutput}
+                  className='scale-[0.72]'
+                />
+              </div>
             )}
-            {shouldShowDefaultHandles && <SubBlockRowView title='error' />}
           </div>
         )}
 
@@ -407,8 +1199,16 @@ export function WorkflowBlockView({
                   type='source'
                   position={Position.Right}
                   id={`condition-${cond.id}`}
-                  className={getHandleClasses('right')}
-                  style={{ top: `${topOffset}px`, transform: 'translateY(-50%)' }}
+                  className={getInvisibleHandleClasses('right')}
+                  style={{
+                    top: `${topOffset}px`,
+                    transform: 'translateY(-50%)',
+                    ...invisibleHandleSize(
+                      'right',
+                      rowTabLength,
+                      HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+                    ),
+                  }}
                   data-nodeid={id}
                   data-handleid={`condition-${cond.id}`}
                   isConnectableStart={true}
@@ -420,26 +1220,6 @@ export function WorkflowBlockView({
                 />
               )
             })}
-            <Handle
-              type='source'
-              position={Position.Right}
-              id='error'
-              className={getHandleClasses('right', true)}
-              style={{
-                right: '-7px',
-                top: 'auto',
-                bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                transform: 'translateY(50%)',
-              }}
-              data-nodeid={id}
-              data-handleid='error'
-              isConnectableStart={true}
-              isConnectableEnd={false}
-              isValidConnection={(connection) => {
-                if (connection.target === id) return false
-                return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-              }}
-            />
           </>
         )}
 
@@ -456,8 +1236,16 @@ export function WorkflowBlockView({
                   type='source'
                   position={Position.Right}
                   id={`router-${route.id}`}
-                  className={getHandleClasses('right')}
-                  style={{ top: `${topOffset}px`, transform: 'translateY(-50%)' }}
+                  className={getInvisibleHandleClasses('right')}
+                  style={{
+                    top: `${topOffset}px`,
+                    transform: 'translateY(-50%)',
+                    ...invisibleHandleSize(
+                      'right',
+                      rowTabLength,
+                      HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+                    ),
+                  }}
                   data-nodeid={id}
                   data-handleid={`router-${route.id}`}
                   isConnectableStart={true}
@@ -469,26 +1257,6 @@ export function WorkflowBlockView({
                 />
               )
             })}
-            <Handle
-              type='source'
-              position={Position.Right}
-              id='error'
-              className={getHandleClasses('right', true)}
-              style={{
-                right: '-7px',
-                top: 'auto',
-                bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                transform: 'translateY(50%)',
-              }}
-              data-nodeid={id}
-              data-handleid='error'
-              isConnectableStart={true}
-              isConnectableEnd={false}
-              isValidConnection={(connection) => {
-                if (connection.target === id) return false
-                return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-              }}
-            />
           </>
         )}
 
@@ -496,10 +1264,13 @@ export function WorkflowBlockView({
           <>
             <Handle
               type='source'
-              position={horizontalHandles ? Position.Right : Position.Bottom}
+              position={Position.Right}
               id='source'
-              className={getHandleClasses(horizontalHandles ? 'right' : 'bottom')}
-              style={getHandleStyle(horizontalHandles ? 'horizontal' : 'vertical')}
+              className={getInvisibleHandleClasses('right')}
+              style={{
+                ...getHandleStyle('horizontal'),
+                ...invisibleHandleSize('right', mainTabLength('right'), MAIN_HANDLE_HIT_LENGTH_PX),
+              }}
               data-nodeid={id}
               data-handleid='source'
               isConnectableStart={true}
@@ -509,33 +1280,62 @@ export function WorkflowBlockView({
                 return !wouldCreateConnectionCycle(connection.source!, connection.target!)
               }}
             />
+            {/*
+              Anchor for outgoing edges created by the cursor swell. Only the
+              right side exists: an output always leaves from the right, so
+              `normalizeCursorSourceHandleId` resolves every drag here no
+              matter which edge it started on. Mounting a left twin would
+              advertise an output on the input port.
+            */}
+            <Handle
+              type='source'
+              position={getReactFlowPosition('right')}
+              id={getPositionedSourceHandleId('right')}
+              className='!pointer-events-none !z-0 !rounded-none !border-none !bg-transparent !opacity-0'
+              style={getCenteredSideHandleStyle('right')}
+              data-nodeid={id}
+              data-handleid={getPositionedSourceHandleId('right')}
+              isConnectable={false}
+              aria-hidden='true'
+            />
+          </>
+        )}
 
-            {shouldShowDefaultHandles && (
+        {shouldShowDefaultHandles &&
+          POSITIONED_SOURCE_HANDLE_SIDES.map((side) => {
+            const handleId = getPositionedTargetHandleId(side)
+            return (
               <Handle
-                type='source'
-                position={Position.Right}
-                id='error'
-                className={getHandleClasses('right', true)}
-                style={{
-                  right: '-7px',
-                  top: 'auto',
-                  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
-                  transform: 'translateY(50%)',
-                }}
+                key={handleId}
+                type='target'
+                position={getReactFlowPosition(side)}
+                id={handleId}
+                className='!pointer-events-none !z-0 !rounded-none !border-none !bg-transparent !opacity-0'
+                style={getCenteredSideHandleStyle(side)}
                 data-nodeid={id}
-                data-handleid='error'
-                isConnectableStart={true}
-                isConnectableEnd={false}
-                isValidConnection={(connection) => {
-                  if (connection.target === id) return false
-                  return !wouldCreateConnectionCycle(connection.source!, connection.target!)
-                }}
+                data-handleid={handleId}
+                isConnectable={false}
+                aria-hidden='true'
               />
-            )}
-          </>
-        )}
-        {hasRing && (
-          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
+            )
+          })}
+
+        {rendersErrorHandle && (
+          <Handle
+            type='source'
+            position={ERROR_SOURCE_HANDLE_POSITION}
+            id='error'
+            className='!z-20 !cursor-crosshair !rounded-none !border-none !bg-transparent !opacity-0'
+            style={getErrorSourceHandleStyle()}
+            data-nodeid={id}
+            data-handleid='error'
+            isConnectableStart={true}
+            isConnectableEnd={false}
+            isValidConnection={(connection) => {
+              if (connection.target === id) return false
+              return !wouldCreateConnectionCycle(connection.source!, connection.target!)
+            }}
+          />
         )}
       </div>
     </div>
diff --git a/packages/workflow-types/src/workflow.ts b/packages/workflow-types/src/workflow.ts
index c4aa764aecf..f23a2f75e84 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
@@ -56,6 +57,8 @@ export interface BlockData {
   batchSize?: number
   type?: string
   canonicalModes?: Record<string, 'basic' | 'advanced'>
+  /** Persisted mirror of {@link BlockState.errorEnabled}. */
+  errorEnabled?: boolean
 }
 
 export interface BlockLayoutState {
@@ -72,6 +75,12 @@ export interface BlockState {
   outputs: Record<string, OutputFieldDefinition>
   enabled: boolean
   horizontalHandles?: boolean
+  /**
+   * Whether this block exposes its error output. Drives the red error port;
+   * the error row itself is always shown for blocks that support one. Off by
+   * default.
+   */
+  errorEnabled?: boolean
   height?: number
   advancedMode?: boolean
   triggerMode?: boolean
@@ -212,14 +221,117 @@ export interface WorkflowEdgeHandles extends WorkflowEdgeEndpoints {
   targetHandle?: string | null
 }
 
-// Falsy-coalesce (not nullish-coalesce): persistence normalizes a missing
-// handle to `null` via `edge.sourceHandle || null` (see
-// apps/realtime/src/database/operations.ts), which also maps `''` to
-// `null`. Comparing with `??` would treat `''` and `null` as distinct
-// handles pre-insert while both are written as the same `null` value,
-// letting a `sourceHandle: ''` edge slip past the duplicate check.
-function normalizeWorkflowEdgeHandle(handle: string | null | undefined): string | null {
-  return handle || null
+export const WORKFLOW_CARD_SIDES = ['top', 'right', 'bottom', 'left'] as const
+export type WorkflowCardSide = (typeof WORKFLOW_CARD_SIDES)[number]
+
+export const POSITIONED_SOURCE_HANDLE_SIDES = ['left', 'right'] as const
+export type PositionedSourceHandleSide = (typeof POSITIONED_SOURCE_HANDLE_SIDES)[number]
+export type PositionedSourceHandleId = `source-${PositionedSourceHandleSide}`
+type LegacyPositionedSourceHandleId = `source-${WorkflowCardSide}`
+
+const POSITIONED_SOURCE_HANDLE_IDS = new Set<string>(
+  WORKFLOW_CARD_SIDES.map((side) => `source-${side}`)
+)
+
+/** Returns the persistent source-handle ID for a card side. */
+export function getPositionedSourceHandleId(
+  side: PositionedSourceHandleSide
+): PositionedSourceHandleId {
+  return `source-${side}`
+}
+
+/** Identifies source handles that encode a visual card side. */
+export function isPositionedSourceHandle(
+  handle: string | null | undefined
+): handle is LegacyPositionedSourceHandleId {
+  return typeof handle === 'string' && POSITIONED_SOURCE_HANDLE_IDS.has(handle)
+}
+
+export type PositionedTargetHandleId = `target-${PositionedSourceHandleSide}`
+type LegacyPositionedTargetHandleId = `target-${WorkflowCardSide}`
+
+const POSITIONED_TARGET_HANDLE_IDS = new Set<string>(
+  WORKFLOW_CARD_SIDES.map((side) => `target-${side}`)
+)
+
+/** Returns the persistent target-handle ID for a card side. */
+export function getPositionedTargetHandleId(
+  side: PositionedSourceHandleSide
+): PositionedTargetHandleId {
+  return `target-${side}`
+}
+
+/** Identifies target handles that encode a visual card side. */
+export function isPositionedTargetHandle(
+  handle: string | null | undefined
+): handle is LegacyPositionedTargetHandleId {
+  return typeof handle === 'string' && POSITIONED_TARGET_HANDLE_IDS.has(handle)
+}
+
+/** Returns the card side encoded by a positioned source handle. */
+export function getPositionedSourceHandleSide(
+  handle: string | null | undefined
+): PositionedSourceHandleSide | null {
+  if (!isPositionedSourceHandle(handle)) return null
+  return handle === 'source-left' ? 'left' : 'right'
+}
+
+/**
+ * Collapses every non-right source anchor onto the canonical right-side anchor.
+ *
+ * Outputs leave a card from the right, always. Left is the input side, so an
+ * output anchored there would draw an outgoing line out of the input port and
+ * read as a second input. Legacy vertical anchors collapse for the same reason:
+ * top and bottom are not connection sides.
+ */
+export function normalizePositionedSourceHandleId<T extends string | null | undefined>(
+  handle: T
+): T | PositionedSourceHandleId {
+  return handle === 'source-top' || handle === 'source-bottom' || handle === 'source-left'
+    ? getPositionedSourceHandleId('right')
+    : handle
+}
+
+/** Collapses legacy vertical target anchors onto the canonical left-side anchor. */
+export function normalizePositionedTargetHandleId<T extends string | null | undefined>(
+  handle: T
+): T | PositionedTargetHandleId {
+  return handle === 'target-top' || handle === 'target-bottom'
+    ? getPositionedTargetHandleId('left')
+    : handle
+}
+
+/** Resolves a top/bottom pointer into the card's left or right connection half. */
+export function getHorizontalWorkflowHandleSide(
+  pointerX: number,
+  cardWidth: number
+): PositionedSourceHandleSide {
+  if (!Number.isFinite(pointerX) || !Number.isFinite(cardWidth) || cardWidth <= 0) return 'right'
+  return pointerX < cardWidth / 2 ? 'left' : 'right'
+}
+
+/**
+ * Returns the canonical persisted source handle used for edge identity.
+ *
+ * Falsy-coalescing mirrors persistence, where an empty handle is stored as
+ * `null`, while positioned legacy outputs collapse onto the right-side port.
+ */
+export function normalizeWorkflowEdgeSourceHandle(
+  handle: string | null | undefined
+): string | null {
+  return normalizePositionedSourceHandleId(handle || null)
+}
+
+/**
+ * Returns the canonical persisted target handle used for edge identity.
+ *
+ * Falsy-coalescing mirrors persistence, where an empty handle is stored as
+ * `null`, while legacy vertical inputs collapse onto the left-side port.
+ */
+export function normalizeWorkflowEdgeTargetHandle(
+  handle: string | null | undefined
+): string | null {
+  return normalizePositionedTargetHandleId(handle || null)
 }
 
 function isDuplicateWorkflowEdge(
@@ -228,11 +340,11 @@ function isDuplicateWorkflowEdge(
 ): boolean {
   return (
     edge.source === existing.source &&
-    normalizeWorkflowEdgeHandle(edge.sourceHandle) ===
-      normalizeWorkflowEdgeHandle(existing.sourceHandle) &&
+    normalizeWorkflowEdgeSourceHandle(edge.sourceHandle) ===
+      normalizeWorkflowEdgeSourceHandle(existing.sourceHandle) &&
     edge.target === existing.target &&
-    normalizeWorkflowEdgeHandle(edge.targetHandle) ===
-      normalizeWorkflowEdgeHandle(existing.targetHandle)
+    normalizeWorkflowEdgeTargetHandle(edge.targetHandle) ===
+      normalizeWorkflowEdgeTargetHandle(existing.targetHandle)
   )
 }