@@ -6,6 +6,7 @@ import {
 } from '@sim/workflow-renderer'
 import { type EdgeProps, useStore } from '@xyflow/react'
 import { useShallow } from 'zustand/react/shallow'
+import type { EdgeDiffStatus as PreviewEdgeDiffStatus } from '@/lib/workflows/comparison'
 import {
   isEdgeConnectedToEditor,
   isEdgeHighlighted,
@@ -72,7 +73,12 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
   )?.executionStatus
   const runStatus = previewExecutionStatus || lastRunEdges.get(id)
 
+  /** A preview comparing two versions hands the edge its status directly. */
+  const previewDiffStatus = (data as { diffStatus?: PreviewEdgeDiffStatus } | undefined)?.diffStatus
+
   const diffStatus = useMemo((): EdgeDiffStatus => {
+    if (previewDiffStatus === 'added') return 'new'
+    if (previewDiffStatus === 'removed') return 'ghost'
     if (data?.isDeleted) return 'deleted'
     if (!diffAnalysis?.edge_diff || !isDiffReady) return null
 
@@ -88,6 +94,7 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
     }
     return null
   }, [
+    previewDiffStatus,
     data?.isDeleted,
     diffAnalysis,
     isDiffReady,
 
@@ -1,7 +1,7 @@
 'use client'
 
 import { type CSSProperties, memo, useMemo } from 'react'
-import { OverflowText } from '@sim/emcn'
+import { cn, OverflowText } from '@sim/emcn'
 import {
   CanvasSentenceView,
   HANDLE_POSITIONS,
@@ -19,6 +19,7 @@ import {
 } from '@/lib/workflows/blocks/canvas-sentence'
 import { resolveSelectedTriggerId } from '@/lib/workflows/blocks/canvas-trigger-sentence'
 import { resolveCanvasCodePreview } from '@/lib/workflows/blocks/code-preview'
+import type { BlockDiffStatus } from '@/lib/workflows/comparison'
 import {
   getDisplayValue,
   hasDisplayableRowValue,
@@ -38,6 +39,7 @@ import {
   isSubBlockVisibleForMode,
   isToolInputOnlySubBlock,
 } from '@/lib/workflows/subblocks/visibility'
+import { DiffStatusLabel } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/diff-label/diff-label'
 import { getBlock } from '@/blocks'
 import { hasBlockAccent } from '@/blocks/accent'
 import { SELECTOR_TYPES_HYDRATION_REQUIRED, type SubBlockConfig } from '@/blocks/types'
@@ -98,6 +100,16 @@ interface WorkflowPreviewBlockData extends Record<string, unknown> {
   hasErrorConnection?: boolean
   /** Skips expensive subblock computations for thumbnails/template previews */
   lightweight?: boolean
+  /** Comparison status when previewing a version diff */
+  diffStatus?: BlockDiffStatus
+  /** Sub-block ids the comparison reported as changed on this block */
+  changedFields?: string[]
+}
+
+/** A removed card fades instead of ringing, so only the live statuses have a ring. */
+const DIFF_RING_CLASS: Record<Exclude<BlockDiffStatus, 'removed'>, string> = {
+  added: 'ring-[var(--brand-accent)]',
+  modified: 'ring-[var(--warning)]',
 }
 
 /**
@@ -118,6 +130,8 @@ interface SubBlockRowProps {
   rawValue?: unknown
   workflowMap: Record<string, WorkflowMetadata>
   workflowLabelsReady: boolean
+  /** The comparison reported this field as changed; tint the row */
+  changed?: boolean
 }
 
 /**
@@ -198,6 +212,7 @@ const SubBlockRow = memo(function SubBlockRow({
   rawValue,
   workflowMap,
   workflowLabelsReady,
+  changed = false,
 }: SubBlockRowProps) {
   const displayValue = resolvePreviewDisplayValue(
     value,
@@ -208,7 +223,12 @@ const SubBlockRow = memo(function SubBlockRow({
   )
 
   return (
-    <div className='flex h-5 items-center gap-2'>
+    <div
+      className={cn(
+        'flex h-5 items-center gap-2',
+        changed && '-mx-1 rounded-sm bg-[color-mix(in_srgb,var(--warning)_14%,transparent)] px-1'
+      )}
+    >
       <OverflowText label={title} className='text-[var(--text-tertiary)] text-sm capitalize' />
       {displayValue !== undefined && (
         <OverflowText
@@ -242,7 +262,10 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
     errorEnabled = false,
     hasErrorConnection = false,
     lightweight = false,
+    diffStatus,
+    changedFields,
   } = data
+  const changedFieldSet = useMemo(() => new Set(changedFields ?? []), [changedFields])
 
   const blockConfig = getBlock(type)
   const effectiveTrigger = isTrigger || type === 'starter'
@@ -486,13 +509,32 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
 
   const hasError = executionStatus === 'error'
   const hasSuccess = executionStatus === 'success'
+  const isRemoved = diffStatus === 'removed'
 
   return (
-    <div className='relative w-[250px] select-none rounded-2xl border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]'>
+    <div
+      className={cn(
+        'relative w-[250px] select-none rounded-2xl border-[1.5px] border-[var(--border-1)] bg-[var(--surface-2)]',
+        /* Ghost: the same card, just faded, so the eye reads "used to be here" not "broken". */
+        isRemoved &&
+          'border-[var(--border)] bg-[var(--surface-1)] [&>[data-ghost-content]]:opacity-45'
+      )}
+    >
+      {/* Comparison label above the card */}
+      {diffStatus && <DiffStatusLabel status={diffStatus} count={changedFieldSet.size} />}
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
         <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--text-secondary)]' />
       )}
+      {/* Comparison ring overlay */}
+      {!isPreviewSelected && diffStatus && diffStatus !== 'removed' && (
+        <div
+          className={cn(
+            'pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px]',
+            DIFF_RING_CLASS[diffStatus]
+          )}
+        />
+      )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
         <div className='pointer-events-none absolute inset-0 z-40 rounded-2xl ring-[1.5px] ring-[var(--brand-accent)]' />
@@ -514,7 +556,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
       )}
 
       {/* Header - matches WorkflowBlock structure */}
-      <div className='flex h-[40px] items-center justify-between px-2'>
+      <div data-ghost-content='' className='flex h-[40px] items-center justify-between px-2'>
         <div className='relative z-10 flex min-w-0 flex-1 items-center'>
           <OverflowText
             label={humanizeBlockName(canvasPresentation.title)}
@@ -535,7 +577,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
 
       {/* Content area with subblocks */}
       {hasContentBelowHeader && (
-        <div className='flex flex-col gap-2 p-2'>
+        <div data-ghost-content='' className='flex flex-col gap-2 p-2'>
           {type === 'condition' ? (
             conditionRows.map((cond) => (
               <SubBlockRow
@@ -544,6 +586,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
                 value={lightweight ? undefined : getDisplayValue(cond.value)}
                 workflowMap={workflowMap}
                 workflowLabelsReady={workflowLabelsReady}
+                changed={changedFieldSet.has('conditions')}
               />
             ))
           ) : sentenceSegments ? (
@@ -564,14 +607,21 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
                    back as the `-` sentinel. That reads as noise mid-sentence, so
                    hand the slot back and let its noun stand in instead. */
                 if (!displayValue || displayValue === '-') return null
-                return (
+                const chip = (
                   <SubBlockRowView
                     title={subBlock.title ?? subBlock.id}
                     displayValue={displayValue}
                     codePreview={resolveCanvasCodePreview(subBlock, rawValue, rawValues)}
                     variant='inline-value'
                   />
                 )
+                if (!changedFieldSet.has(subBlockId)) return chip
+                /* The chip, not the sentence, is what changed. */
+                return (
+                  <span className='rounded-sm bg-[color-mix(in_srgb,var(--warning)_18%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--warning)_45%,transparent)]'>
+                    {chip}
+                  </span>
+                )
               }}
             />
           ) : type === 'router_v2' ? (
@@ -590,6 +640,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
                   value={lightweight ? undefined : getDisplayValue(route.value)}
                   workflowMap={workflowMap}
                   workflowLabelsReady={workflowLabelsReady}
+                  changed={changedFieldSet.has('routes')}
                 />
               ))}
             </>
@@ -610,6 +661,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
                   rawValue={rawValue}
                   workflowMap={workflowMap}
                   workflowLabelsReady={workflowLabelsReady}
+                  changed={changedFieldSet.has(subBlock.id)}
                 />
               )
             })
@@ -693,6 +745,13 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
  * @param nextProps - Next render props
  * @returns True if render should be skipped (props are equal)
  */
+/** Same changed-field list, by identity first so the common unchanged case costs nothing. */
+function sameFields(prev: string[] | undefined, next: string[] | undefined): boolean {
+  if (prev === next) return true
+  if (!prev || !next || prev.length !== next.length) return false
+  return prev.every((field, index) => field === next[index])
+}
+
 function shouldSkipPreviewBlockRender(
   prevProps: NodeProps<WorkflowPreviewBlockNode>,
   nextProps: NodeProps<WorkflowPreviewBlockNode>
@@ -707,7 +766,9 @@ function shouldSkipPreviewBlockRender(
     prevProps.data.executionStatus !== nextProps.data.executionStatus ||
     prevProps.data.errorEnabled !== nextProps.data.errorEnabled ||
     prevProps.data.hasErrorConnection !== nextProps.data.hasErrorConnection ||
-    prevProps.data.lightweight !== nextProps.data.lightweight
+    prevProps.data.lightweight !== nextProps.data.lightweight ||
+    prevProps.data.diffStatus !== nextProps.data.diffStatus ||
+    !sameFields(prevProps.data.changedFields, nextProps.data.changedFields)
   ) {
     return false
   }
 
@@ -0,0 +1,40 @@
+'use client'
+
+import { cn } from '@sim/emcn'
+import type { BlockDiffStatus } from '@/lib/workflows/comparison'
+
+const DIFF_LABEL: Record<BlockDiffStatus, string> = {
+  added: 'Added',
+  modified: 'Modified',
+  removed: 'Removed',
+}
+
+const DIFF_LABEL_CLASS: Record<BlockDiffStatus, string> = {
+  added: 'bg-[var(--brand-accent)] text-white',
+  modified: 'bg-[var(--warning)] text-white',
+  removed: 'bg-[var(--surface-7)] text-[var(--text-secondary)]',
+}
+
+interface DiffStatusLabelProps {
+  status: BlockDiffStatus
+  /** How many fields changed on a modified block; shown after the label when known */
+  count?: number
+}
+
+/**
+ * The comparison label floating above a canvas card or container: the same
+ * chrome wherever it appears so a block and a loop read as one system.
+ */
+export function DiffStatusLabel({ status, count }: DiffStatusLabelProps) {
+  return (
+    <div
+      className={cn(
+        '-top-[22px] pointer-events-none absolute left-2 z-40 rounded-sm px-1.5 py-0.5 font-medium text-xs leading-[14px]',
+        DIFF_LABEL_CLASS[status]
+      )}
+    >
+      {DIFF_LABEL[status]}
+      {status === 'modified' && count ? ` · ${count}` : null}
+    </div>
+  )
+}
@@ -3,6 +3,8 @@
 import { memo } from 'react'
 import { SubflowNodeView } from '@sim/workflow-renderer'
 import type { Node, NodeProps } from '@xyflow/react'
+import type { BlockDiffStatus } from '@/lib/workflows/comparison'
+import { DiffStatusLabel } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/diff-label/diff-label'
 
 /** Execution status for subflows in preview mode */
 type ExecutionStatus = 'success' | 'error' | 'not-executed'
@@ -19,6 +21,8 @@ interface WorkflowPreviewSubflowData extends Record<string, unknown> {
   isPreviewSelected?: boolean
   /** Execution status for highlighting the subflow container */
   executionStatus?: ExecutionStatus
+  /** Comparison status when previewing a version diff */
+  diffStatus?: BlockDiffStatus
   /** Skips expensive computations for thumbnails/template previews (unused in subflow, for consistency) */
   lightweight?: boolean
 }
@@ -31,19 +35,30 @@ interface WorkflowPreviewSubflowData extends Record<string, unknown> {
 type WorkflowPreviewSubflowNode = Node<WorkflowPreviewSubflowData, 'subflowNode'>
 
 function WorkflowPreviewSubflowInner({ data, id }: NodeProps<WorkflowPreviewSubflowNode>) {
-  return (
+  const view = (
     <SubflowNodeView
       id={id}
       data={{ ...data, isPreview: true }}
       selected={false}
       isEnabled={data.enabled ?? true}
       isLocked={false}
       isFocused={false}
+      diffStatus={
+        data.diffStatus === 'added' ? 'new' : data.diffStatus === 'modified' ? 'edited' : undefined
+      }
       nestingLevel={0}
       canEditWorkflow={false}
       onSelect={() => undefined}
     />
   )
+  if (data.diffStatus !== 'removed') return view
+  /* A removed container fades like a removed card; its children ghost themselves. */
+  return (
+    <div className='relative opacity-45'>
+      <DiffStatusLabel status='removed' />
+      {view}
+    </div>
+  )
 }
 
 export const PreviewSubflow = memo(WorkflowPreviewSubflowInner)