fix(workflows): harden the version diff after review

Comparison: keep basic/advanced mode changes visible, include a tool's
permission, server and implementation fields in list diffs, include input field
defaults, read checkbox records as records, show whitespace-only edits, cap word
and line diffing so a pathological prompt cannot stall the pane, slot deleted
branches back at their old position, never reuse a ghost edge id, and mask
secret-looking keys at any depth (including key/value table rows) with a
name-based fallback when a block definition is unknown.

Change list: memoized cards that only re-render when their own selection
changes, nested cards for blocks inside an added or removed container, a
shared sign map, muted tokens that exist, hover and focus treatment, scroll
edge fades, and a shared skeleton for both hosts.

Fork preview: the before side is the target draft the sync overwrites, read
in one snapshot and scoped to the target workspace; variables and their
assignments are re-keyed by unique name; a create reports no target id; the
change rows are a discriminated union; the query key sits under the fork diff
keys so a sync invalidates it; a direction switch closes the preview.

Author: mzxchandra

apps/sim/app/api/workspaces/[id]/fork/workflow-diff/route.test.ts

@@ -19,7 +19,6 @@ import { OrchestrationError } from '@/lib/core/orchestration/types'
 const mocks = vi.hoisted(() => ({
   loadSourceDeployedStates: vi.fn(),
   loadTargetDraftState: vi.fn(),
-  readDeployedState: vi.fn(),
   loadForkBlockMap: vi.fn(),
   computeForkPromotePlan: vi.fn(),
 }))
@@ -31,7 +30,6 @@ vi.mock('@/ee/workspace-forking/lib/lineage/lineage', () => workspaceForkingLine
 vi.mock('@/ee/workspace-forking/lib/copy/deploy-bridge', () => ({
   loadSourceDeployedStates: mocks.loadSourceDeployedStates,
   loadTargetDraftState: mocks.loadTargetDraftState,
-  readDeployedState: mocks.readDeployedState,
 }))
 vi.mock('@/ee/workspace-forking/lib/mapping/block-map-store', () => ({
   loadForkBlockMap: mocks.loadForkBlockMap,
@@ -113,6 +111,18 @@ describe('fork workflow-diff route', () => {
     expect(mocks.loadSourceDeployedStates).not.toHaveBeenCalled()
   })
 
+  it('rejects workspaces that are not a direct fork edge without reading state', async () => {
+    workspaceForkingLineageMockFns.mockResolveForkEdge.mockResolvedValue(null)
+
+    const response = await GET(
+      request({ otherWorkspaceId: 'parent', direction: 'push', sourceWorkflowId: 'wf-src' }),
+      routeContext
+    )
+
+    expect(response.status).toBe(400)
+    expect(mocks.loadSourceDeployedStates).not.toHaveBeenCalled()
+  })
+
   it('maps a workflow outside the sync plan to 404', async () => {
     const response = await GET(
       request({ otherWorkspaceId: 'parent', direction: 'push', sourceWorkflowId: 'foreign' }),
@@ -130,7 +140,7 @@ describe('fork workflow-diff route', () => {
 
     expect(response.status).toBe(200)
     await expect(response.json()).resolves.toEqual({
-      targetWorkflowId: 'wf-tgt',
+      targetWorkflowId: null,
       before: null,
       after: emptyState,
       beforeLabel: 'Ask Biz (current)',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/compare-versions-modal.tsx

@@ -7,13 +7,13 @@ import {
   ChipModal,
   ChipModalBody,
   ChipModalHeader,
-  Skeleton,
 } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import { formatVersionLabel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/format-version-label'
 import { useDraftWorkflowState } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-draft-workflow-state'
 import {
-  CHANGE_LIST_WIDTH_CLASS,
+  WorkflowDiffSkeleton,
   WorkflowDiffView,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-diff'
 import { useDeploymentVersionState } from '@/hooks/queries/workflows'
@@ -103,7 +103,7 @@ export function CompareVersionsModal({
       srTitle='Compare versions'
       aria-describedby={descriptionId}
       size='full'
-      className='h-[92vh] [&>div]:h-full'
+      className='h-[84vh] [&>div]:h-full'
     >
       <ChipModalHeader onClose={() => onOpenChange(false)}>
         <div className='flex items-center gap-2'>
@@ -114,7 +114,7 @@ export function CompareVersionsModal({
             onChange={(value) => setBase(valueToSide(value))}
             align='start'
           />
-          <span className='text-[var(--text-muted)]'>→</span>
+          <ArrowRight className='size-[12px] shrink-0 text-[var(--text-icon)]' />
           <ChipDropdown
             options={options}
             value={sideToValue(target)}
@@ -132,12 +132,7 @@ export function CompareVersionsModal({
             {loadError.message || 'Could not load one of the versions.'}
           </div>
         ) : isLoading || !baseState || !targetState ? (
-          <div className='flex h-full gap-0'>
-            <Skeleton className='h-full flex-1 rounded-none' />
-            <Skeleton
-              className={`h-full ${CHANGE_LIST_WIDTH_CLASS} rounded-none border-[var(--border)] border-l`}
-            />
-          </div>
+          <WorkflowDiffSkeleton />
         ) : (
           <WorkflowDiffView baseState={baseState} targetState={targetState} />
         )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -22,8 +22,8 @@ import { Preview, PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/compon
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import { resolveComparePair } from './compare-pair'
-import { type CompareSide, CompareVersionsModal, Versions } from './components'
+import { type ComparePair, resolveComparePair } from './compare-pair'
+import { CompareVersionsModal, Versions } from './components'
 import { formatVersionLabel } from './format-version-label'
 
 const logger = createLogger('GeneralDeploy')
@@ -65,21 +65,9 @@ export function GeneralDeploy({
   onLoadDeploymentBlocked,
 }: GeneralDeployProps) {
   const expandedPreviewDescriptionId = useId()
-  const [comparePair, setComparePair] = useState<{ base: CompareSide; target: CompareSide } | null>(
-    null
-  )
+  const [comparePair, setComparePair] = useState<ComparePair | null>(null)
   const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
   const [showActiveDespiteSelection, setShowActiveDespiteSelection] = useState(false)
-  const activeVersion = versions.find((v) => v.isActive)?.version ?? null
-
-  /**
-   * Opens a comparison with the older version on the left. Comparing the live
-   * version (or any version when nothing is live) shows it against the draft,
-   * which is what a redeploy would ship.
-   */
-  const handleCompareVersion = (version: number) => {
-    setComparePair(resolveComparePair(version, activeVersion))
-  }
   const previewMode: PreviewMode =
     selectedVersion !== null && !showActiveDespiteSelection ? 'selected' : 'active'
   const [showLoadDialog, setShowLoadDialog] = useState(false)
@@ -93,6 +81,12 @@ export function GeneralDeploy({
     workflowId: string
     version: number
   } | null>(null)
+  const activeVersion = versions.find((v) => v.isActive)?.version ?? null
+
+  /** See resolveComparePair for which two sides a version opens against. */
+  const handleCompareVersion = (version: number) => {
+    setComparePair(resolveComparePair(version, activeVersion))
+  }
 
   const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
   const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote?.version)
@@ -225,7 +219,7 @@ export function GeneralDeploy({
                 <button
                   type='button'
                   onClick={() => handleCompareVersion(activeVersion)}
-                  className='text-[var(--warning)] text-caption underline-offset-2 hover-hover:underline focus-visible:underline focus-visible:outline-none'
+                  className='text-[var(--text-primary)] text-small underline-offset-2 hover-hover:underline focus-visible:underline focus-visible:outline-none'
                 >
                   View changes
                 </button>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-draft-workflow-state.ts

@@ -12,7 +12,7 @@ import type { WorkflowState } from '@/stores/workflows/workflow/types'
  * cleanly against any of them.
  *
  * The merge walks every block on every store change, so a consumer that has
- * nothing to compare against yet passes `enabled: false` and gets null
+ * nothing to compare against yet passes `false` as `enabled` and gets null
  * without paying for it.
  */
 export function useDraftWorkflowState(

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx

@@ -738,20 +738,20 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
   )
 }
 
-/**
- * Custom comparison function for React.memo optimization.
- * Uses fast-path primitive comparison before shallow comparing subBlockValues.
- * @param prevProps - Previous render props
- * @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])
 }
 
+/**
+ * Custom comparison function for React.memo optimization.
+ * Uses fast-path primitive comparison before shallow comparing subBlockValues.
+ * @param prevProps - Previous render props
+ * @param nextProps - Next render props
+ * @returns True if render should be skipped (props are equal)
+ */
 function shouldSkipPreviewBlockRender(
   prevProps: NodeProps<WorkflowPreviewBlockNode>,
   nextProps: NodeProps<WorkflowPreviewBlockNode>

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { memo } from 'react'
+import { cn } from '@sim/emcn'
 import { SubflowNodeView } from '@sim/workflow-renderer'
 import type { Node, NodeProps } from '@xyflow/react'
 import type { BlockDiffStatus } from '@/lib/workflows/comparison'
@@ -51,12 +52,12 @@ function WorkflowPreviewSubflowInner({ data, id }: NodeProps<WorkflowPreviewSubf
       onSelect={() => undefined}
     />
   )
-  if (data.diffStatus !== 'removed') return view
-  /* A removed container fades like a removed card; its children ghost themselves. */
+  if (!data.diffStatus) return view
+  /* Same label as a card; a removed container fades like a removed card, its children ghost themselves. */
   return (
-    <div className='relative opacity-45'>
-      <DiffStatusLabel status='removed' />
-      {view}
+    <div className='relative'>
+      <DiffStatusLabel status={data.diffStatus} />
+      <div className={cn(data.diffStatus === 'removed' && 'opacity-45')}>{view}</div>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/binding-change-row.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { OverflowText } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
 import { resolveFieldLabel } from '@/lib/workflows/comparison/resolve-values'
 import {
@@ -28,7 +29,7 @@ export function BindingChangeRow({ blockType, field, oldValue, newValue }: Bindi
 
   return (
     <div className='flex min-w-0 items-center gap-2 text-caption'>
-      <span className='w-[112px] shrink-0 truncate text-[var(--text-tertiary)]'>{label}</span>
+      <OverflowText label={label} className='w-[112px] shrink-0 text-[var(--text-tertiary)]' />
       {kind === 'secret' ? (
         <span className='text-[var(--text-muted)]'>Differs between workspaces</span>
       ) : (