fix(custom-block): keep disabled blocks resolvable so placed instances fail loudly instead of vanishing

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/providers/custom-blocks-loader.tsx

@@ -27,28 +27,27 @@ export function CustomBlocksLoader() {
 
   useEffect(() => {
     hydrateClientCustomBlocks(
-      // Only enabled blocks are resolvable/executable server-side, so the client
-      // overlay (toolbar, canvas, palette) must exclude disabled ones too — else
-      // the block is offered but every run fails.
-      (data ?? [])
-        .filter((block) => block.enabled)
-        .map((block) => {
-          const effectiveIcon = block.iconUrl || fallbackIconUrl
-          return buildCustomBlockConfig(
-            {
-              type: block.type,
-              name: block.name,
-              description: block.description,
-              workflowId: block.workflowId,
-              exposedOutputs: block.exposedOutputs,
-            },
-            block.inputFields,
-            {
-              icon: getCustomBlockIcon(block.iconUrl, fallbackIconUrl),
-              bgColor: effectiveIcon ? 'transparent' : undefined,
-            }
-          )
-        })
+      // Disabled blocks stay resolvable (so a still-placed instance renders on the
+      // canvas and survives serialization instead of vanishing) but are hidden from
+      // the palette so no new instance can be placed; a run fails loudly server-side.
+      (data ?? []).map((block) => {
+        const effectiveIcon = block.iconUrl || fallbackIconUrl
+        return buildCustomBlockConfig(
+          {
+            type: block.type,
+            name: block.name,
+            description: block.description,
+            workflowId: block.workflowId,
+            exposedOutputs: block.exposedOutputs,
+          },
+          block.inputFields,
+          {
+            icon: getCustomBlockIcon(block.iconUrl, fallbackIconUrl),
+            bgColor: effectiveIcon ? 'transparent' : undefined,
+            hideFromToolbar: !block.enabled,
+          }
+        )
+      })
     )
   }, [data, fallbackIconUrl])
 

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

@@ -459,9 +459,9 @@ export const Toolbar = memo(
     const allBlocks = getBlocks()
     const allTools = getTools()
 
-    // Published custom blocks are their own section. Exclude disabled blocks (the
-    // server overlay drops them, so placing one would fail at run) and the block
-    // bound to the CURRENT workflow — adding a workflow's own block would recurse.
+    // Published custom blocks are their own section. Exclude disabled blocks (still
+    // resolvable so placed instances survive, but not offered for new placement) and
+    // the block bound to the CURRENT workflow — adding a workflow's own block recurses.
     const allCustomBlocks = useMemo(() => {
       if (!customBlocksData?.length) return []
       return customBlocksData

apps/sim/blocks/custom/build-config.test.ts

@@ -54,6 +54,13 @@ describe('buildCustomBlockConfig', () => {
     expect(config.tools.config?.tool({})).toBe('workflow_executor')
   })
 
+  it('hides a disabled block from the toolbar while keeping it resolvable', () => {
+    expect(buildCustomBlockConfig(row, fields, { icon }).hideFromToolbar).toBeUndefined()
+    expect(
+      buildCustomBlockConfig(row, fields, { icon, hideFromToolbar: true }).hideFromToolbar
+    ).toBe(true)
+  })
+
   it('bakes the bound workflowId as a hidden sub-block', () => {
     const config = buildCustomBlockConfig(row, fields, { icon })
     const wf = findSub(config, 'workflowId')

apps/sim/blocks/custom/build-config.ts

@@ -98,7 +98,7 @@ function subBlockTypeForField(fieldType: string): SubBlockType {
 export function buildCustomBlockConfig(
   row: CustomBlockRow,
   inputFields: WorkflowInputField[],
-  opts: { icon: BlockIcon; bgColor?: string }
+  opts: { icon: BlockIcon; bgColor?: string; hideFromToolbar?: boolean }
 ): BlockConfig {
   const fieldSubBlocks: SubBlockConfig[] = inputFields.map((field) => {
     const type = subBlockTypeForField(field.type)
@@ -125,6 +125,11 @@ export function buildCustomBlockConfig(
       'workflow is baked in — no workflow id or input mapping to configure.',
     bgColor: opts.bgColor ?? CUSTOM_BLOCK_TILE_COLOR,
     icon: opts.icon,
+    // A disabled block stays resolvable (so a still-placed instance survives
+    // serialization and fails loudly at run via `getCustomBlockAuthority`, instead
+    // of silently vanishing from the graph) but is hidden from the palette so no
+    // new instance can be placed.
+    hideFromToolbar: opts.hideFromToolbar,
     subBlocks: [
       {
         id: 'workflowId',

apps/sim/blocks/custom/server-overlay.ts

@@ -5,7 +5,11 @@ import { registerBlockOverlayResolver } from '@/blocks/custom/overlay'
 import type { BlockConfig, BlockIcon } from '@/blocks/types'
 
 /** A row for the overlay, optionally carrying live-derived Start input fields. */
-type CustomBlockOverlayRow = CustomBlockRow & { inputFields?: WorkflowInputField[] }
+type CustomBlockOverlayRow = CustomBlockRow & {
+  inputFields?: WorkflowInputField[]
+  /** When `false`, the block resolves but is hidden from the palette (disabled). */
+  enabled?: boolean
+}
 
 /**
  * Server-side custom-block overlay. Resolves `custom_block_*` types during
@@ -43,7 +47,10 @@ export function withCustomBlockOverlay<T>(
   for (const row of rows) {
     map.set(
       row.type,
-      buildCustomBlockConfig(row, row.inputFields ?? [], { icon: PLACEHOLDER_ICON })
+      buildCustomBlockConfig(row, row.inputFields ?? [], {
+        icon: PLACEHOLDER_ICON,
+        hideFromToolbar: row.enabled === false,
+      })
     )
   }
   return store.run(map, fn)

apps/sim/lib/workflows/custom-blocks/operations.ts

@@ -86,23 +86,28 @@ function applyInputPlaceholders(
 }
 
 /**
- * The org's custom blocks as bare `CustomBlockRow`s for the server overlay
- * (`withCustomBlockOverlay`). Only enabled rows — a disabled block must not resolve
- * for execution. No input fields: the server's `inputMapping` is schema-agnostic
- * and the handler's remap filters every value against the child's live deployed
- * Start, so execution never needs to load each block's deployment here.
+ * The org's custom blocks for the server overlay (`withCustomBlockOverlay`).
+ * Includes DISABLED rows (carrying `enabled`) so a still-placed disabled block
+ * stays resolvable — it survives serialization and fails loudly at run via
+ * `getCustomBlockAuthority` instead of being silently dropped from the graph; the
+ * overlay marks it `hideFromToolbar` so no new instance can be placed. No input
+ * fields: the server's `inputMapping` is schema-agnostic and the handler's remap
+ * filters every value against the child's live deployed Start.
  */
-export async function getCustomBlockRowsForOrg(organizationId: string): Promise<CustomBlockRow[]> {
+export async function getCustomBlockRowsForOrg(
+  organizationId: string
+): Promise<Array<CustomBlockRow & { enabled: boolean }>> {
   const rows = await db
     .select({
       type: customBlock.type,
       name: customBlock.name,
       description: customBlock.description,
       workflowId: customBlock.workflowId,
       outputs: customBlock.outputs,
+      enabled: customBlock.enabled,
     })
     .from(customBlock)
-    .where(and(eq(customBlock.organizationId, organizationId), eq(customBlock.enabled, true)))
+    .where(eq(customBlock.organizationId, organizationId))
 
   return rows.map(({ outputs, ...r }) => ({ ...r, exposedOutputs: outputs ?? [] }))
 }