fix(forks): offer "View changes" only on workflows the sync changes

- Sync details load each replaced target's draft and diff it against the
  projected source, using the same projection and "has changes" rule as the
  per-workflow preview, so a row and its preview never disagree. Rows the sync
  would not change read "No changes" and offer no comparison.
- Preview buttons wait until the list matches the selected direction.
- Mask JSON-encoded secrets in text and scalar fields, and say "A masked
  value changed" when masking hides the only difference.
- Show role changes on agent messages, highlight a router's changed Context
  on the canvas, and keep ghost edges under live ones into containers.
- Added or removed loops and parallels list their iteration settings.
- Size ghost containers the way the preview draws them.
- "Order changed" only when items moved; CRLF and CR read as line breaks;
  collapsing unchanged lines closes every fold; selecting a nested block
  opens its container card; the version pickers have distinct names.
- Drop redundant mock resets flagged by check:test-patterns.

Author: mzxchandra

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

@@ -62,7 +62,6 @@ function request(query: Record<string, string>) {
 
 describe('fork workflow-diff route', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
     mockGetSession.mockResolvedValue({ user: { id: 'user-1' }, session: { id: 'session-1' } })
     mockAuthorizeWorkspaceOperation.mockResolvedValue(undefined)
     workspaceForkingLineageMockFns.mockResolveForkEdge.mockResolvedValue({

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

@@ -23,6 +23,12 @@ export type CompareSide = { kind: 'draft' } | { kind: 'version'; version: number
 
 const DRAFT_OPTION_VALUE = 'draft'
 
+/** The visible label of the selected option, so each picker's accessible name says what it holds. */
+function optionLabel(options: ChipDropdownOption[], value: string): string {
+  const label = options.find((option) => option.value === value)?.label
+  return typeof label === 'string' ? label : ''
+}
+
 function sideToValue(side: CompareSide): string {
   return side.kind === 'draft' ? DRAFT_OPTION_VALUE : String(side.version)
 }
@@ -113,13 +119,15 @@ export function CompareVersionsModal({
             value={sideToValue(base)}
             onChange={(value) => setBase(valueToSide(value))}
             align='start'
+            aria-label={`Compare from ${optionLabel(options, sideToValue(base))}`}
           />
           <ArrowRight className='size-[12px] shrink-0 text-[var(--text-icon)]' />
           <ChipDropdown
             options={options}
             value={sideToValue(target)}
             onChange={(value) => setTarget(valueToSide(value))}
             align='start'
+            aria-label={`Compare to ${optionLabel(options, sideToValue(target))}`}
           />
         </div>
       </ChipModalHeader>

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

@@ -632,6 +632,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockNode>
                 value={lightweight ? undefined : getDisplayValue(rawValues.context)}
                 workflowMap={workflowMap}
                 workflowLabelsReady={workflowLabelsReady}
+                changed={changedFieldSet.has('context')}
               />
               {routerRows.map((route, index) => (
                 <SubBlockRow

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

@@ -585,7 +585,17 @@ export function PreviewWorkflow({
      * whose handle matches no mounted handle, so without this the preview
      * renders the cards with no lines between them.
      */
-    return normalizeWorkflowEdgeHandles(workflowState.edges).map((edge) => {
+    /*
+     * Ghosts go first: edges sharing a z-index paint in array order, and a
+     * Loop/Parallel target gives its live and removed edges the same one, so
+     * order is what keeps a ghost under the live line into that container.
+     */
+    const ordered = normalizeWorkflowEdgeHandles(workflowState.edges)
+    const edgesInPaintOrder = [
+      ...ordered.filter((edge) => edgeDiffStatus?.[edge.id] === 'removed'),
+      ...ordered.filter((edge) => edgeDiffStatus?.[edge.id] !== 'removed'),
+    ]
+    return edgesInPaintOrder.map((edge) => {
       const status = getEdgeExecutionStatus(edge)
       const isErrorEdge = edge.sourceHandle === 'error'
       const isGhost = edgeDiffStatus?.[edge.id] === 'removed'

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

@@ -29,7 +29,7 @@ import {
   splitEnvironmentBindings,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/utils'
 import { BlockTile } from '@/blocks/block-tile'
-import type { BlockState } from '@/stores/workflows/workflow/types'
+import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
 
 const STATUS_BADGE_VARIANT: Record<BlockDiffStatus, 'green' | 'amber' | 'red'> = {
   added: 'green',
@@ -42,6 +42,11 @@ interface ChangeListProps {
   /** The two sides, so cards can show an added or removed block's fields and detect moves */
   baseBlocks: Record<string, BlockState>
   targetBlocks: Record<string, BlockState>
+  /** Each side's loop and parallel configs, so an added or removed container shows what it runs */
+  containers: {
+    base: Pick<WorkflowState, 'loops' | 'parallels'>
+    target: Pick<WorkflowState, 'loops' | 'parallels'>
+  }
   selectedBlockId: string | null
   onSelectBlock: Dispatch<SetStateAction<string | null>>
   /**
@@ -67,13 +72,14 @@ export function ChangeList({
   summary,
   baseBlocks,
   targetBlocks,
+  containers,
   selectedBlockId,
   onSelectBlock,
   environmentBindings = false,
 }: ChangeListProps) {
   const entries = useMemo(
-    () => listBlockChanges(summary, baseBlocks, targetBlocks),
-    [summary, baseBlocks, targetBlocks]
+    () => listBlockChanges(summary, baseBlocks, targetBlocks, containers),
+    [summary, baseBlocks, targetBlocks, containers]
   )
   const blocks = useMemo(() => ({ ...baseBlocks, ...targetBlocks }), [baseBlocks, targetBlocks])
   const cardRefs = useRef<Map<string, HTMLDivElement>>(null)
@@ -224,7 +230,13 @@ const BlockCard = memo(function BlockCard({
   nested = false,
 }: BlockCardProps) {
   const [collapsed, setCollapsed] = useState(false)
+  const [seenSelection, setSeenSelection] = useState(selectedBlockId)
   const selected = selectedBlockId === entry.id
+  /* Selecting a block nested in this card on the canvas opens the card so its row can show. */
+  if (seenSelection !== selectedBlockId) {
+    setSeenSelection(selectedBlockId)
+    if (selectedBlockId !== null && !selected) setCollapsed(false)
+  }
   const block = blocks[entry.id]
   const setCardRef = useCallback(
     (node: HTMLDivElement | null) => registerCard(entry.id, node),
@@ -235,9 +247,7 @@ const BlockCard = memo(function BlockCard({
     const fields =
       entry.status === 'modified'
         ? entry.changes
-        : block
-          ? listOneSidedFields(block, entry.status)
-          : []
+        : [...entry.changes, ...(block ? listOneSidedFields(block, entry.status) : [])]
     return environmentBindings
       ? splitEnvironmentBindings(entry.type, fields)
       : { logic: fields, bindings: [] }

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

@@ -44,6 +44,20 @@ export function FieldChangeRow({ blockType, field, oldValue, newValue }: FieldCh
     : (ENGINE_FIELD_LABELS[field] ?? resolveFieldLabel(blockType, field))
   /* A field its definition never titled comes back as the raw id; humanize it. */
   const label = resolvedLabel === field ? formatParameterLabel(field) : resolvedLabel
+  const textual = kind === 'text' || kind === 'json'
+  const scalar = kind === 'scalar' || kind === 'toggle'
+  const oldText = textual
+    ? toDiffText(oldValue)
+    : scalar
+      ? formatScalar(blockType, field, oldValue)
+      : ''
+  const newText = textual
+    ? toDiffText(newValue)
+    : scalar
+      ? formatScalar(blockType, field, newValue)
+      : ''
+  /* The summary saw a change the masked text cannot show, so the change is inside a secret. */
+  const maskedOnly = (textual || (scalar && !oneSided)) && oldText === newText
 
   return (
     <div className='flex flex-col gap-1.5'>
@@ -53,9 +67,10 @@ export function FieldChangeRow({ blockType, field, oldValue, newValue }: FieldCh
           {isBlankValue(oldValue) ? 'Set' : isBlankValue(newValue) ? 'Cleared' : 'Value changed'}
         </span>
       )}
-      {(kind === 'text' || kind === 'json') && (
-        <TextDiff oldText={toDiffText(oldValue)} newText={toDiffText(newValue)} />
+      {maskedOnly && (
+        <span className='text-[var(--text-secondary)] text-small'>A masked value changed</span>
       )}
+      {textual && !maskedOnly && <TextDiff oldText={oldText} newText={newText} />}
       {kind === 'messages' && <MessagesDiff oldValue={oldValue} newValue={newValue} />}
       {kind === 'list' && (
         <KeyedListDiff
@@ -65,22 +80,17 @@ export function FieldChangeRow({ blockType, field, oldValue, newValue }: FieldCh
           newValue={newValue}
         />
       )}
-      {(kind === 'scalar' || kind === 'toggle') &&
+      {scalar &&
+        !maskedOnly &&
         (oneSided ? (
           <ValueChip
             tone={isBlankValue(oldValue) ? 'added' : 'removed'}
             text={formatScalar(blockType, field, isBlankValue(oldValue) ? newValue : oldValue)}
           />
         ) : wordDiff ? (
-          <InlineDiff
-            oldText={formatScalar(blockType, field, oldValue)}
-            newText={formatScalar(blockType, field, newValue)}
-          />
+          <InlineDiff oldText={oldText} newText={newText} />
         ) : (
-          <OldNewPair
-            oldText={formatScalar(blockType, field, oldValue)}
-            newText={formatScalar(blockType, field, newValue)}
-          />
+          <OldNewPair oldText={oldText} newText={newText} />
         ))}
     </div>
   )
@@ -112,7 +122,10 @@ function MessagesDiff({ oldValue, newValue }: MessagesDiffProps) {
       {slots.map((slot) => (
         <div key={slot.index} className='flex flex-col gap-1'>
           <span className='text-[var(--text-muted)] text-caption capitalize'>
-            {slot.next?.role ?? slot.old?.role} message
+            {slot.old && slot.next && slot.old.role !== slot.next.role
+              ? `${slot.old.role} → ${slot.next.role}`
+              : (slot.next?.role ?? slot.old?.role)}{' '}
+            message
             {!slot.old && ' (added)'}
             {!slot.next && ' (removed)'}
           </span>

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

@@ -9,6 +9,7 @@ import { TextDiff } from '@/app/workspace/[workspaceId]/w/components/workflow-di
 import {
   describeListItems,
   isPositionalListField,
+  listOrderChanged,
   pairListItems,
   toItemList,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/utils'
@@ -29,11 +30,14 @@ export function KeyedListDiff({ blockType, field, oldValue, newValue }: KeyedLis
   const oldItems = describeListItems(blockType, field, toItemList(oldValue) ?? [])
   const newItems = describeListItems(blockType, field, toItemList(newValue) ?? [])
   const rows = pairListItems(oldItems, newItems, isPositionalListField(blockType, field))
+  const reordered = rows.length === 0 && listOrderChanged(oldItems, newItems)
 
   return (
     <div className='flex flex-col gap-1.5'>
       {rows.length === 0 && (
-        <span className='text-[var(--text-tertiary)] text-small'>Order changed</span>
+        <span className='text-[var(--text-tertiary)] text-small'>
+          {reordered ? 'Order changed' : 'Same items, stored differently'}
+        </span>
       )}
       {rows.map((row, index) => (
         <div key={`${row.kind}-${row.label}-${index}`} className='flex items-start gap-2'>

apps/sim/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/text-diff-lines.test.ts

@@ -160,4 +160,16 @@ describe('buildDiffRows', () => {
     expect(lines.map((line) => line.kind)).toEqual(['removed', 'added'])
     expect(lines.every((line) => line.parts === undefined)).toBe(true)
   })
+  it('reads CRLF and bare CR endings as line breaks', () => {
+    const rows = buildDiffRows('a\r\nb\rc', 'a\nb\nd')
+
+    expect(
+      rows.map((row) => (row.type === 'line' ? [row.line.kind, row.line.text] : row.type))
+    ).toEqual([
+      ['context', 'a'],
+      ['context', 'b'],
+      ['removed', 'c'],
+      ['added', 'd'],
+    ])
+  })
 })

apps/sim/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/text-diff-lines.ts

@@ -96,6 +96,10 @@ export function markWordChanges(lines: DiffLine[]): DiffLine[] {
   return out
 }
 
+function normalizeLineEndings(value: string): string {
+  return value.replace(/\r\n?/g, '\n')
+}
+
 export function splitLines(value: string): string[] {
   const lines = value.split('\n')
   if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
@@ -158,7 +162,10 @@ export function capOneSided(lines: DiffLine[]): DiffRow[] {
  * the one-sided cap, or a single summary row when the bodies are too long to
  * diff inline.
  */
-export function buildDiffRows(oldText: string, newText: string): DiffRow[] {
+export function buildDiffRows(rawOld: string, rawNew: string): DiffRow[] {
+  /* Stored text may carry CRLF or bare CR endings; diff them as the lines they display as. */
+  const oldText = normalizeLineEndings(rawOld)
+  const newText = normalizeLineEndings(rawNew)
   const oldLines = splitLines(oldText).length
   const newLines = splitLines(newText).length
   if (oldLines + newLines > MAX_DIFF_LINES) return [{ type: 'oversized', oldLines, newLines }]

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

@@ -73,7 +73,11 @@ export function TextDiff({ oldText, newText }: TextDiffProps) {
       {foldCount > MANY_FOLDS && (
         <button
           type='button'
-          onClick={() => setExpandedAll((value) => !value)}
+          onClick={() => {
+            /* One switch for every fold: collapsing must also close folds opened one by one. */
+            setExpanded(new Set())
+            setExpandedAll((value) => !value)
+          }}
           className='flex w-full items-center justify-between border-[var(--border)] border-b bg-[var(--surface-2)] px-2 py-0.5 text-left font-sans text-[var(--text-tertiary)] text-caption transition-colors hover-hover:text-[var(--text-secondary)] focus-visible:bg-[var(--surface-4)] focus-visible:outline-none'
         >
           <span>