diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index bacca64af3b..9ea1131717c 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -46,6 +46,7 @@ import {
isIterationType,
parseTime,
} from '@/app/workspace/[workspaceId]/logs/components/log-details/utils'
+import { isCustomBlockType } from '@/blocks/custom/build-config'
import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
const DEFAULT_TREE_PANE_WIDTH = 240
@@ -667,7 +668,10 @@ const TraceDetailPane = memo(function TraceDetailPane({ span }: { span: TraceSpa
const endedAt = parseTime(span.endTime)
const metaEntries: { label: string; value: string }[] = []
- metaEntries.push({ label: 'Type', value: span.type })
+ metaEntries.push({
+ label: 'Type',
+ value: isCustomBlockType(span.type) ? 'custom block' : span.type,
+ })
metaEntries.push({ label: 'Duration', value: formatDuration(duration, { precision: 2 }) || '—' })
if (span.provider) metaEntries.push({ label: 'Provider', value: span.provider })
if (span.model) metaEntries.push({ label: 'Model', value: span.model })
diff --git a/apps/sim/app/workspace/[workspaceId]/providers/custom-blocks-loader.tsx b/apps/sim/app/workspace/[workspaceId]/providers/custom-blocks-loader.tsx
new file mode 100644
index 00000000000..7d781602434
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/providers/custom-blocks-loader.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useParams } from 'next/navigation'
+import { buildCustomBlockConfig } from '@/blocks/custom/build-config'
+import { hydrateClientCustomBlocks } from '@/blocks/custom/client-overlay'
+import { getCustomBlockIcon } from '@/blocks/custom/custom-block-icon'
+import { useCustomBlocks } from '@/hooks/queries/custom-blocks'
+
+/**
+ * Hydrates the client custom-block registry overlay from the active workspace's
+ * org custom blocks. Mounted once in the workspace layout so every surface that
+ * resolves blocks synchronously — the canvas, the block palette, copilot mentions,
+ * and the Access Control "Blocks" list — sees custom blocks. Re-hydrates on
+ * workspace switch (the query key changes) and on any publish/edit/unpublish.
+ */
+export function CustomBlocksLoader() {
+ const params = useParams()
+ const workspaceId = params?.workspaceId as string | undefined
+ const { data } = useCustomBlocks(workspaceId)
+
+ 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) =>
+ buildCustomBlockConfig(
+ {
+ type: block.type,
+ name: block.name,
+ description: block.description,
+ workflowId: block.workflowId,
+ exposedOutputs: block.exposedOutputs,
+ },
+ block.inputFields,
+ {
+ icon: getCustomBlockIcon(block.iconUrl),
+ bgColor: block.iconUrl ? 'transparent' : undefined,
+ }
+ )
+ )
+ )
+ }, [data])
+
+ return null
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/block.tsx
new file mode 100644
index 00000000000..0864b26696e
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/block.tsx
@@ -0,0 +1,403 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+ Button,
+ ChipCombobox,
+ ChipInput,
+ ChipTextarea,
+ type ComboboxOptionGroup,
+ Loader,
+ toast,
+} from '@sim/emcn'
+import { getErrorMessage } from '@sim/utils/errors'
+import { Image as ImageIcon, X } from 'lucide-react'
+import {
+ type FlattenOutputsBlockInput,
+ type FlattenOutputsEdgeInput,
+ flattenWorkflowOutputs,
+} from '@/lib/workflows/blocks/flatten-outputs'
+import { DropZone } from '@/app/workspace/[workspaceId]/components/drop-zone'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
+import type { CustomBlockOutput } from '@/blocks/custom/build-config'
+import { SettingRow } from '@/ee/components/setting-row'
+import {
+ useCustomBlocks,
+ useDeleteCustomBlock,
+ usePublishCustomBlock,
+ useUpdateCustomBlock,
+} from '@/hooks/queries/custom-blocks'
+import { useWorkflowState } from '@/hooks/queries/workflows'
+
+const OUTPUT_SEP = '::'
+const ICON_ACCEPT = 'image/png,image/jpeg,image/jpg,image/svg+xml,image/webp'
+
+const encodeOutput = (blockId: string, path: string) => `${blockId}${OUTPUT_SEP}${path}`
+const decodeOutput = (value: string) => {
+ const i = value.indexOf(OUTPUT_SEP)
+ return i === -1
+ ? { blockId: '', path: value }
+ : { blockId: value.slice(0, i), path: value.slice(i + OUTPUT_SEP.length) }
+}
+
+/** Derive a unique, friendly output name from a dot-path, avoiding collisions. */
+function deriveOutputName(path: string, taken: Set
): string {
+ const base = (path.split('.').pop() || path).replace(/[^a-zA-Z0-9_]/g, '_')
+ let name = base
+ let n = 2
+ while (taken.has(name)) name = `${base}_${n++}`
+ taken.add(name)
+ return name
+}
+
+interface BlockDeployProps {
+ workflowId: string | null
+ workspaceId: string
+ isDeployed: boolean
+ canAdmin: boolean
+ /** Lifted state so the modal footer (shared with the other tabs) owns the actions. */
+ onSubmittingChange?: (submitting: boolean) => void
+ onCanSaveChange?: (canSave: boolean) => void
+ onExistingChange?: (existing: boolean) => void
+}
+
+export function BlockDeploy({
+ workflowId,
+ workspaceId,
+ isDeployed,
+ canAdmin,
+ onSubmittingChange,
+ onCanSaveChange,
+ onExistingChange,
+}: BlockDeployProps) {
+ const { data: customBlocks = [] } = useCustomBlocks(workspaceId)
+ const existing = useMemo(
+ () => customBlocks.find((b) => b.workflowId === workflowId) ?? null,
+ [customBlocks, workflowId]
+ )
+
+ const publish = usePublishCustomBlock(workspaceId)
+ const update = useUpdateCustomBlock(workspaceId)
+ const remove = useDeleteCustomBlock(workspaceId)
+
+ const [name, setName] = useState(existing?.name ?? '')
+ const [description, setDescription] = useState(existing?.description ?? '')
+ /** Curated outputs (with editable names); empty = expose the whole result. */
+ const [outputs, setOutputs] = useState(() => existing?.exposedOutputs ?? [])
+ const [error, setError] = useState(null)
+
+ // `existing` arrives async from useCustomBlocks; the useState seeds above only run
+ // on first render. Reseed when the resolved block identity changes (nothing →
+ // loaded, or unpublish → nothing) so the form reflects real data instead of
+ // staying empty and offering a duplicate publish. Keyed on the id (stable across
+ // refetches) so it never clobbers in-progress edits.
+ const existingId = existing?.id ?? null
+ const prevExistingIdRef = useRef(existingId)
+ if (prevExistingIdRef.current !== existingId) {
+ prevExistingIdRef.current = existingId
+ setName(existing?.name ?? '')
+ setDescription(existing?.description ?? '')
+ setOutputs(existing?.exposedOutputs ?? [])
+ }
+
+ const iconUpload = useProfilePictureUpload({
+ currentImage: existing?.iconUrl ?? null,
+ onError: (e) => setError(e),
+ context: 'workspace-logos',
+ workspaceId,
+ })
+
+ const workflowState = useWorkflowState(workflowId ?? undefined)
+ const { outputGroups, labelByKey } = useMemo(() => {
+ const state = workflowState.data as
+ | { blocks?: Record; edges?: FlattenOutputsEdgeInput[] }
+ | null
+ | undefined
+ const labels = new Map()
+ if (!state?.blocks) return { outputGroups: [] as ComboboxOptionGroup[], labelByKey: labels }
+ const flat = flattenWorkflowOutputs(Object.values(state.blocks), state.edges ?? [])
+ const byBlock = new Map<
+ string,
+ { blockName: string; items: { label: string; value: string }[] }
+ >()
+ for (const f of flat) {
+ const key = encodeOutput(f.blockId, f.path)
+ labels.set(key, `${f.blockName} › ${f.path}`)
+ const group = byBlock.get(f.blockId) ?? { blockName: f.blockName, items: [] }
+ group.items.push({ label: f.path, value: key })
+ byBlock.set(f.blockId, group)
+ }
+ const groups = Array.from(byBlock.values()).map((g) => ({
+ section: g.blockName,
+ items: g.items,
+ }))
+ return { outputGroups: groups, labelByKey: labels }
+ }, [workflowState.data])
+
+ /** Curated outputs that still resolve to a block in the (loaded) workflow. An
+ * output whose block was deleted no longer appears here, so it is neither shown
+ * nor saved. While the workflow is still loading we keep every stored output to
+ * avoid dropping valid ones before their blocks are known. */
+ const outputsLoaded = Boolean(workflowState.data) && !workflowState.isLoading
+ const visibleOutputs = useMemo(
+ () =>
+ outputsLoaded
+ ? outputs.filter((o) => labelByKey.has(encodeOutput(o.blockId, o.path)))
+ : outputs,
+ [outputs, outputsLoaded, labelByKey]
+ )
+
+ const selectedOutputKeys = useMemo(
+ () => visibleOutputs.map((o) => encodeOutput(o.blockId, o.path)),
+ [visibleOutputs]
+ )
+
+ /** Reconcile the picker's selection: keep existing rows (and their names), add
+ * new picks with a derived default name, drop removed ones. */
+ function handleOutputsChange(nextKeys: string[]) {
+ const byKey = new Map(outputs.map((o) => [encodeOutput(o.blockId, o.path), o]))
+ const taken = new Set(outputs.map((o) => o.name))
+ setOutputs(
+ nextKeys.map((key) => {
+ const existingOutput = byKey.get(key)
+ if (existingOutput) return existingOutput
+ const { blockId, path } = decodeOutput(key)
+ return { blockId, path, name: deriveOutputName(path, taken) }
+ })
+ )
+ }
+
+ function setOutputName(key: string, value: string) {
+ setOutputs((prev) =>
+ prev.map((o) => (encodeOutput(o.blockId, o.path) === key ? { ...o, name: value } : o))
+ )
+ }
+
+ const iconUrl = iconUpload.previewUrl
+ const isBusy = publish.isPending || update.isPending || remove.isPending
+
+ // Only enable "Update" when something actually changed (clear feedback on what
+ // needs saving); publishing a new block just needs a name.
+ const dirty = existing
+ ? name.trim() !== existing.name ||
+ description.trim() !== (existing.description ?? '') ||
+ (iconUrl || null) !== (existing.iconUrl ?? null) ||
+ JSON.stringify(visibleOutputs) !== JSON.stringify(existing.exposedOutputs)
+ : true
+
+ const canSave = canAdmin && name.trim().length > 0 && !isBusy && !iconUpload.isUploading && dirty
+
+ useEffect(() => onCanSaveChange?.(canSave), [canSave, onCanSaveChange])
+ useEffect(
+ () => onSubmittingChange?.(publish.isPending || update.isPending),
+ [publish.isPending, update.isPending, onSubmittingChange]
+ )
+ useEffect(() => onExistingChange?.(Boolean(existing)), [existing, onExistingChange])
+
+ async function handleSubmit() {
+ setError(null)
+ const exposedOutputs = visibleOutputs.map((o) => ({ ...o, name: o.name.trim() }))
+ if (exposedOutputs.some((o) => !o.name)) {
+ setError('Every exposed output needs a name')
+ return
+ }
+ if (new Set(exposedOutputs.map((o) => o.name)).size !== exposedOutputs.length) {
+ setError('Output names must be unique')
+ return
+ }
+ try {
+ if (existing) {
+ const iconChanged = (iconUrl || null) !== (existing.iconUrl ?? null)
+ await update.mutateAsync({
+ id: existing.id,
+ name: name.trim(),
+ description: description.trim(),
+ exposedOutputs,
+ ...(iconChanged ? { iconUrl: iconUrl || null } : {}),
+ })
+ toast.success('Block updated')
+ } else {
+ if (!workflowId) return
+ await publish.mutateAsync({
+ workspaceId,
+ workflowId,
+ name: name.trim(),
+ description: description.trim(),
+ exposedOutputs,
+ ...(iconUrl ? { iconUrl } : {}),
+ })
+ toast.success('Published as block')
+ }
+ } catch (e) {
+ setError(getErrorMessage(e, 'Failed to save block'))
+ }
+ }
+
+ async function handleUnpublish() {
+ if (!existing) return
+ setError(null)
+ try {
+ await remove.mutateAsync(existing.id)
+ setName('')
+ setDescription('')
+ setOutputs([])
+ iconUpload.handleRemove()
+ toast.success('Block unpublished')
+ } catch (e) {
+ setError(getErrorMessage(e, 'Failed to unpublish block'))
+ }
+ }
+
+ if (!isDeployed && !existing) {
+ return (
+
+ Deploy this workflow first to publish it as a block.
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/index.ts
new file mode 100644
index 00000000000..e006fe1c3d4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/block/index.ts
@@ -0,0 +1 @@
+export { BlockDeploy } from './block'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/index.ts
index 630f2b53a5a..b082d9329a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/index.ts
@@ -1,4 +1,5 @@
export { ApiDeploy } from './api'
+export { BlockDeploy } from './block'
export { ChatDeploy, type ExistingChat } from './chat'
export { DeployUpgradeGate } from './deploy-upgrade-gate'
export { GeneralDeploy } from './general'
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 8bd6cba84e7..8174e78499a 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
@@ -36,6 +36,7 @@ import type { DeployReadiness } from '@/app/workspace/[workspaceId]/w/[workflowI
import { runPreDeployChecks } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-predeploy-checks'
import { normalizeName, startsWithUuid } from '@/executor/constants'
import { useApiKeys } from '@/hooks/queries/api-keys'
+import { useCanPublishCustomBlock } from '@/hooks/queries/custom-blocks'
import {
invalidateDeploymentQueries,
useActivateDeploymentVersion,
@@ -56,6 +57,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
import type { WorkflowState } from '@/stores/workflows/workflow/types'
import {
ApiDeploy,
+ BlockDeploy,
ChatDeploy,
DeployUpgradeGate,
type ExistingChat,
@@ -101,9 +103,9 @@ interface WorkflowDeploymentInfoUI {
isPublicApi: boolean
}
-type TabView = 'general' | 'api' | 'chat' | 'mcp'
+type TabView = 'general' | 'api' | 'chat' | 'mcp' | 'block'
-const DEPLOY_MODAL_TABS = new Set(['general', 'api', 'chat', 'mcp'])
+const DEPLOY_MODAL_TABS = new Set(['general', 'api', 'chat', 'mcp', 'block'])
function isDeployModalTab(value: unknown): value is TabView {
return typeof value === 'string' && DEPLOY_MODAL_TABS.has(value as TabView)
@@ -143,6 +145,10 @@ export function DeployModal({
const [mcpToolSaveDisabledReason, setMcpToolSaveDisabledReason] = useState(null)
const [mcpActiveServerId, setMcpActiveServerId] = useState(null)
+ const [blockSubmitting, setBlockSubmitting] = useState(false)
+ const [blockCanSave, setBlockCanSave] = useState(false)
+ const [blockExists, setBlockExists] = useState(false)
+
const [chatSuccess, setChatSuccess] = useState(false)
const chatSuccessTimeoutRef = useRef | null>(null)
const deployActionIdRef = useRef(0)
@@ -196,6 +202,8 @@ export function DeployModal({
const { data: mcpServers = [] } = useWorkflowMcpServers(workflowWorkspaceId || '')
const hasMcpServers = mcpServers.length > 0
+ const { data: canPublishBlock = false } = useCanPublishCustomBlock(workspaceId)
+
const deployMutation = useDeployWorkflow()
const undeployMutation = useUndeployWorkflow()
const activateVersionMutation = useActivateDeploymentVersion()
@@ -513,6 +521,17 @@ export function DeployModal({
form?.requestSubmit()
}
+ const handleBlockFormSubmit = () => {
+ const form = document.getElementById('block-deploy-form') as HTMLFormElement
+ form?.requestSubmit()
+ }
+
+ const handleBlockUnpublish = () => {
+ const form = document.getElementById('block-deploy-form') as HTMLFormElement
+ const trigger = form?.querySelector('[data-unpublish-trigger]') as HTMLButtonElement | null
+ trigger?.click()
+ }
+
const isSubmitting = deployMutation.isPending || isFinalizingDeploy
const isUndeploying = undeployMutation.isPending
@@ -538,6 +557,7 @@ export function DeployModal({
{!permissionConfig.hideDeployChatbot && (
Chat
)}
+ {canPublishBlock && Block}
@@ -628,6 +648,20 @@ export function DeployModal({
)}
+
+ {canPublishBlock && (
+
+
+
+ )}
@@ -698,6 +732,37 @@ export function DeployModal({
)}
+ {activeTab === 'block' && (
+