feat(custom-blocks): read-only detail for non-managers + fill image icon

- Add the source workspaceId to the block wire type and gate the detail
  view on it: a viewer who isn't an admin of the block's source workspace
  gets a read-only view — no Save/Discard, no Delete, all fields disabled.
  Matches the server authz (edit/delete require source-workspace admin),
  so the UI no longer dangles buttons that 403.
- SettingsResourceRow: add an opt-in `iconFill` so uploaded image icons
  fill the tile edge-to-edge instead of clamping to 20px; glyph svgs still
  normalize to 20px. Custom blocks list opts in.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017ddpeoz81CSqYQ73Dzf7yo

Author: TheodoreSpeaks

apps/sim/app/api/custom-blocks/route.ts

@@ -29,6 +29,7 @@ function toWire(block: CustomBlockWithInputs) {
     organizationId: block.organizationId,
     workflowId: block.workflowId,
     workflowName: block.workflowName,
+    workspaceId: block.workspaceId,
     workspaceName: block.workspaceName,
     type: block.type,
     name: block.name,

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
 
 /**
  * The canonical settings "resource row": a rounded-bordered icon tile, a
@@ -11,8 +12,14 @@ import type { ReactNode } from 'react'
  * contains to 20px, so callers pass their raw icon node without pre-sizing it.
  */
 interface SettingsResourceRowProps {
-  /** Icon node centered in the tile; any `<svg>`/`<img>` is normalized to 20px. */
+  /** Icon node centered in the tile; a `<svg>` is normalized to 20px, an `<img>` to 20px (or the full tile when `iconFill`). */
   icon: ReactNode
+  /**
+   * Let an image icon fill the tile edge-to-edge instead of clamping to 20px.
+   * Use for uploaded image/logo icons (e.g. custom blocks); glyph `<svg>`s still
+   * normalize to 20px so a fallback icon doesn't balloon.
+   */
+  iconFill?: boolean
   /** Primary line — truncates. */
   title: ReactNode
   /** Secondary muted line — truncates. */
@@ -21,19 +28,22 @@ interface SettingsResourceRowProps {
   trailing?: ReactNode
 }
 
-const TILE_CLASS =
-  'flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--bg)] [&_img]:size-5 [&_svg]:size-5'
+const TILE_BASE =
+  'flex size-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--bg)] [&_svg]:size-5'
 
 export function SettingsResourceRow({
   icon,
+  iconFill = false,
   title,
   description,
   trailing,
 }: SettingsResourceRowProps) {
   return (
     <div className='flex items-center justify-between gap-2.5'>
       <div className='flex min-w-0 items-center gap-2.5'>
-        <div className={TILE_CLASS}>{icon}</div>
+        <div className={cn(TILE_BASE, iconFill ? '[&_img]:size-full' : '[&_img]:size-5')}>
+          {icon}
+        </div>
         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
           <span className='truncate text-[var(--text-body)] text-sm'>{title}</span>
           {description != null && (

apps/sim/ee/custom-blocks/components/custom-block-detail.tsx

@@ -82,8 +82,15 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
   const update = useUpdateCustomBlock(workspaceId)
   const remove = useDeleteCustomBlock(workspaceId)
 
-  // Source picker (create only). Editing a block never re-points its source.
-  const { data: workspaces = [] } = useWorkspacesQuery(isCreate)
+  // Needed in both modes: the source picker (create) and the manage gate (edit).
+  const { data: workspaces = [] } = useWorkspacesQuery()
+
+  // A block is manageable only by an admin of its SOURCE workspace — the same authz
+  // the publish/update/delete routes enforce. Everyone else gets a read-only view
+  // (no Save/Discard, no Delete, disabled fields). Create is always manageable: the
+  // list gates the entry on workspace-admin and the picker only offers admin workspaces.
+  const canManageBlock =
+    isCreate || workspaces.some((w) => w.id === existing?.workspaceId && w.permissions === 'admin')
   // Custom blocks are org-scoped and the settings list only shows the current org's
   // blocks, so a block published to another org's workspace would silently never
   // appear here. Restrict the picker to workspaces in the current workspace's org.
@@ -387,14 +394,16 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
         title={existing?.name || 'New block'}
         description='Publish a deployed workflow as a reusable, org-wide block.'
         actions={[
-          ...saveDiscardActions({
-            dirty,
-            saving,
-            onSave: handleSave,
-            onDiscard: handleDiscard,
-            saveDisabled,
-          }),
-          ...(existing
+          ...(canManageBlock
+            ? saveDiscardActions({
+                dirty,
+                saving,
+                onSave: handleSave,
+                onDiscard: handleDiscard,
+                saveDisabled,
+              })
+            : []),
+          ...(existing && canManageBlock
             ? [
                 {
                   text: remove.isPending ? 'Deleting...' : 'Delete',
@@ -467,11 +476,11 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
 
           <SettingRow label='Icon' labelTooltip='Square image (PNG, JPEG, or SVG). Optional.'>
             <div className='flex items-center gap-4'>
-              <DropZone onDrop={iconUpload.handleFileDrop}>
+              <DropZone onDrop={canManageBlock ? iconUpload.handleFileDrop : () => {}}>
                 <button
                   type='button'
                   onClick={iconUpload.handleThumbnailClick}
-                  disabled={iconUpload.isUploading}
+                  disabled={iconUpload.isUploading || !canManageBlock}
                   className='group relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
                 >
                   {iconUpload.isUploading ? (
@@ -489,7 +498,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
                   variant='outline'
                   size='sm'
                   onClick={iconUpload.handleThumbnailClick}
-                  disabled={iconUpload.isUploading}
+                  disabled={iconUpload.isUploading || !canManageBlock}
                   className='text-[13px]'
                 >
                   {iconUrl ? 'Change' : 'Upload'}
@@ -500,7 +509,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
                     variant='ghost'
                     size='sm'
                     onClick={iconUpload.handleRemove}
-                    disabled={iconUpload.isUploading}
+                    disabled={iconUpload.isUploading || !canManageBlock}
                     className='text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                   >
                     <X className='size-[14px]' />
@@ -523,6 +532,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
               onChange={(e) => setName(e.target.value)}
               placeholder='Invoice Parser'
               maxLength={60}
+              disabled={!canManageBlock}
             />
           </SettingRow>
 
@@ -533,6 +543,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
               placeholder='What this block does'
               rows={2}
               maxLength={280}
+              disabled={!canManageBlock}
             />
           </SettingRow>
 
@@ -600,6 +611,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
                                 onChange={(e) => setPlaceholder(i.id, e.target.value)}
                                 placeholder='Shown in the empty field'
                                 maxLength={200}
+                                disabled={!canManageBlock}
                               />
                             </div>
                           </div>
@@ -623,7 +635,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
               className='w-full'
               dropdownWidth='trigger'
               maxHeight={280}
-              disabled={deployed.isLoading || outputGroups.length === 0}
+              disabled={deployed.isLoading || outputGroups.length === 0 || !canManageBlock}
               emptyMessage={deployed.isLoading ? 'Loading workflow…' : 'No outputs found.'}
               options={[]}
               groups={outputGroups}
@@ -655,6 +667,7 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
                         placeholder='name'
                         className='w-[140px]'
                         maxLength={60}
+                        disabled={!canManageBlock}
                       />
                     </div>
                   )

apps/sim/ee/custom-blocks/components/custom-blocks.tsx

@@ -111,6 +111,7 @@ export function CustomBlocks() {
                 >
                   <SettingsResourceRow
                     icon={<Icon />}
+                    iconFill
                     title={cb.name}
                     description={cb.description || undefined}
                     trailing={

apps/sim/lib/api/contracts/custom-blocks.ts

@@ -39,6 +39,8 @@ export const customBlockSchema = z.object({
   workflowId: z.string(),
   /** Name of the bound source workflow (for display; the source can't be changed). */
   workflowName: z.string(),
+  /** Source workflow's home workspace id — used client-side to gate manage affordances. */
+  workspaceId: z.string().nullable(),
   /** Name of the source workflow's home workspace (display only). */
   workspaceName: z.string().nullable(),
   type: z.string(),

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

@@ -34,6 +34,8 @@ export interface CustomBlockWithInputs {
   organizationId: string
   workflowId: string
   workflowName: string
+  /** Source workflow's home workspace id — used client-side to gate manage affordances. */
+  workspaceId: string | null
   workspaceName: string | null
   type: string
   name: string
@@ -162,18 +164,24 @@ export async function listCustomBlocksWithInputs(
   organizationId: string
 ): Promise<CustomBlockWithInputs[]> {
   const rows = await db
-    .select({ block: customBlock, workflowName: workflow.name, workspaceName: workspace.name })
+    .select({
+      block: customBlock,
+      workflowName: workflow.name,
+      workspaceId: workflow.workspaceId,
+      workspaceName: workspace.name,
+    })
     .from(customBlock)
     .innerJoin(workflow, eq(workflow.id, customBlock.workflowId))
     .leftJoin(workspace, eq(workspace.id, workflow.workspaceId))
     .where(eq(customBlock.organizationId, organizationId))
 
   return Promise.all(
-    rows.map(async ({ block: row, workflowName, workspaceName }) => ({
+    rows.map(async ({ block: row, workflowName, workspaceId, workspaceName }) => ({
       id: row.id,
       organizationId: row.organizationId,
       workflowId: row.workflowId,
       workflowName,
+      workspaceId,
       workspaceName,
       type: row.type,
       name: row.name,