fix(workflows): preserve scoped fields and snapshot ports

Author: icecrasher321

apps/docs/openapi-v2-workflows.json

@@ -9447,9 +9447,14 @@
                               }
                             ],
                             "description": "Target version value."
+                          },
+                          "scope": {
+                            "type": "string",
+                            "enum": ["block", "subblock"],
+                            "description": "Whether the field is a block setting or a subblock input."
                           }
                         },
-                        "required": ["field", "oldValue", "newValue"],
+                        "required": ["field", "oldValue", "newValue", "scope"],
                         "additionalProperties": false
                       },
                       "description": "Changed field values."

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

@@ -423,9 +423,9 @@ function WorkflowPreviewBlockInner({ id, data }: NodeProps<WorkflowPreviewBlockN
     triggerMode: isTrigger,
     errorEnabled,
     subBlocks: {
-      conditions: { value: rawValues.conditions },
-      routes: { value: rawValues.routes },
-      context: { value: rawValues.context },
+      conditions: { value: extractValue(subBlockValues?.conditions) },
+      routes: { value: extractValue(subBlockValues?.routes) },
+      context: { value: extractValue(subBlockValues?.context) },
     },
   }
   const ports = getCanvasPorts(portBlock, hasErrorConnection)
@@ -648,9 +648,6 @@ function shouldSkipPreviewBlockRender(
     return false
   }
 
-  /** Skip subBlockValues comparison in lightweight mode */
-  if (nextProps.data.lightweight) return true
-
   if (
     prevProps.data.workflowMap !== nextProps.data.workflowMap ||
     prevProps.data.workflowLabelsReady !== nextProps.data.workflowLabelsReady

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

@@ -36,7 +36,6 @@ import { FieldChangeRow } from '@/app/workspace/[workspaceId]/w/components/workf
 import {
   type BlockChangeEntry,
   listBlockChanges,
-  listOneSidedFields,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/utils'
 import { BlockTile } from '@/blocks/block-tile'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
@@ -60,12 +59,15 @@ function connectionLabel(edge: EdgeChange, blocks: Record<string, BlockState>):
     const block = blocks[edge[type]]
     const handle = type === 'source' ? edge.sourceHandle : edge.targetHandle
     const defaultHandle = type === 'source' ? WORKFLOW_SOURCE_HANDLE_ID : WORKFLOW_TARGET_HANDLE_ID
-    const name = humanizeBlockName(type === 'source' ? edge.sourceName : edge.targetName)
+    const name = humanizeBlockName(block?.name || block?.type || 'Unavailable block')
     if (!handle || handle === defaultHandle) return name
     const ports = block ? getCanvasPorts(block, true).filter((port) => port.type === type) : []
     const index = ports.findIndex((port) => port.handleId === handle)
     const title = ports[index]?.title
-    const label = title === 'else if' ? `else if ${index}` : (title ?? handle)
+    const label =
+      title === 'else if'
+        ? `else if ${index}`
+        : (title ?? (type === 'source' ? 'Unavailable output' : 'Unavailable input'))
     return `${name} (${label})`
   }
   return `${endpointLabel('source')} → ${endpointLabel('target')}`
@@ -95,7 +97,6 @@ export function ChangeList({
     () => listBlockChanges(summary, baseBlocks, targetBlocks, containers),
     [summary, baseBlocks, targetBlocks, containers]
   )
-  const blocks = useMemo(() => ({ ...baseBlocks, ...targetBlocks }), [baseBlocks, targetBlocks])
   const cardRefs = useRef<Map<string, HTMLDivElement>>(null)
   cardRefs.current ??= new Map()
 
@@ -136,7 +137,6 @@ export function ChangeList({
             <BlockCard
               key={entry.id}
               entry={entry}
-              blocks={blocks}
               selectedBlockId={containsSelection(entry, selectedBlockId) ? selectedBlockId : null}
               onToggleSelected={toggleSelected}
               registerCard={registerCard}
@@ -201,7 +201,6 @@ function Section({ title, children }: SectionProps) {
 
 interface BlockCardProps {
   entry: BlockChangeEntry
-  blocks: Record<string, BlockState>
   /** The selected block id when it is this card or one nested inside it, else null */
   selectedBlockId: string | null
   onToggleSelected: (id: string) => void
@@ -217,7 +216,6 @@ interface BlockCardProps {
  */
 const BlockCard = memo(function BlockCard({
   entry,
-  blocks,
   selectedBlockId,
   onToggleSelected,
   registerCard,
@@ -230,15 +228,11 @@ const BlockCard = memo(function BlockCard({
     setSeenSelection(selectedBlockId)
     if (selectedBlockId !== null && !selected) setCollapsed(false)
   }
-  const block = blocks[entry.id]
   const setCardRef = useCallback(
     (node: HTMLDivElement | null) => registerCard(entry.id, node),
     [registerCard, entry.id]
   )
-  const fields =
-    entry.status === 'modified'
-      ? entry.changes
-      : [...entry.changes, ...(block ? listOneSidedFields(block, entry.status) : [])]
+  const fields = entry.changes
   const hasBody =
     fields.length > 0 ||
     entry.children.length > 0 ||
@@ -254,6 +248,7 @@ const BlockCard = memo(function BlockCard({
     <div ref={setCardRef}>
       <CollapsibleCard
         collapsed={!hasBody || collapsed}
+        selected={selected}
         onToggleCollapse={toggle}
         title={
           <span className='flex min-w-0 items-center gap-2'>
@@ -294,8 +289,9 @@ const BlockCard = memo(function BlockCard({
 
           {fields.map((change) => (
             <FieldChangeRow
-              key={change.field}
+              key={`${change.scope}:${change.field}`}
               blockType={entry.type}
+              scope={change.scope}
               field={change.field}
               oldValue={change.oldValue}
               newValue={change.newValue}
@@ -309,7 +305,6 @@ const BlockCard = memo(function BlockCard({
                   <BlockCard
                     key={child.id}
                     entry={child}
-                    blocks={blocks}
                     selectedBlockId={
                       containsSelection(child, selectedBlockId) ? selectedBlockId : null
                     }

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

@@ -2,18 +2,19 @@
 
 import { ChipModalField, ChipTag, cn } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
-import { isContainerType } from '@/lib/workflows/autolayout'
 import { formatValueForDisplay, resolveFieldLabel } from '@/lib/workflows/comparison/resolve-values'
 import { StructuredValueDiff } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/structured-value-diff'
 import {
   InlineDiff,
   TextDiff,
 } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/text-diff'
-import { getStructuredValuePresentation } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/value-presentation'
+import {
+  getStructuredValuePresentation,
+  mappingPresentation,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/value-presentation'
 import {
   classifyChange,
   containerFieldLabel,
-  ENGINE_FIELD_LABELS,
   findSubBlockConfig,
   formatScalar,
   isBlankValue,
@@ -24,6 +25,7 @@ import { formatParameterLabel } from '@/tools/params'
 
 interface FieldChangeRowProps {
   blockType: string
+  scope: 'block' | 'subblock' | 'container'
   field: string
   oldValue: unknown
   newValue: unknown
@@ -36,27 +38,46 @@ interface FieldChangeRowProps {
  * empty (a block that exists on one side only, or a value first set or
  * cleared) shows that one side alone, in that side's colour.
  */
-export function FieldChangeRow({ blockType, field, oldValue, newValue }: FieldChangeRowProps) {
-  const config = findSubBlockConfig(blockType, field)
-  const kind = classifyChange(blockType, field, oldValue, newValue)
-  const before =
-    kind === 'structured' ? getStructuredValuePresentation(config, field, oldValue) : null
-  const after =
-    kind === 'structured' ? getStructuredValuePresentation(config, field, newValue) : null
+export function FieldChangeRow({
+  blockType,
+  scope,
+  field,
+  oldValue,
+  newValue,
+}: FieldChangeRowProps) {
+  const valueBlockType = scope === 'subblock' ? blockType : undefined
+  const config = findSubBlockConfig(valueBlockType, field)
+  const kind = classifyChange(valueBlockType, field, oldValue, newValue)
+  const structuredSettings = scope === 'block' && kind === 'json'
+  const present = (value: unknown) =>
+    structuredSettings
+      ? mappingPresentation(value)
+      : kind === 'structured'
+        ? getStructuredValuePresentation(config, field, value)
+        : null
+  const before = present(oldValue)
+  const after = present(newValue)
   const oneSided = isBlankValue(oldValue) !== isBlankValue(newValue)
   const wordDiff = kind === 'scalar' && isSentenceLike(oldValue) && isSentenceLike(newValue)
-  const resolvedLabel = isContainerType(blockType)
-    ? containerFieldLabel(field)
-    : (ENGINE_FIELD_LABELS[field] ?? resolveFieldLabel(blockType, field))
+  const resolvedLabel =
+    scope === 'container' ? containerFieldLabel(field) : resolveFieldLabel(blockType, field, scope)
   const label = resolvedLabel === field ? formatParameterLabel(field) : resolvedLabel
-  const textual = kind === 'text' || kind === 'json'
+  const textual = !structuredSettings && (kind === 'text' || kind === 'json')
   const scalar = kind === 'scalar' || kind === 'toggle'
   const text = (value: unknown) => {
-    const formatted = toDiffText(value, blockType, field)
+    const formatted = toDiffText(value, valueBlockType, field)
     return kind === 'json' && typeof value === 'string' ? JSON.stringify(formatted) : formatted
   }
-  let oldText = textual ? text(oldValue) : scalar ? formatScalar(blockType, field, oldValue) : ''
-  let newText = textual ? text(newValue) : scalar ? formatScalar(blockType, field, newValue) : ''
+  let oldText = textual
+    ? text(oldValue)
+    : scalar
+      ? formatScalar(valueBlockType, field, oldValue)
+      : ''
+  let newText = textual
+    ? text(newValue)
+    : scalar
+      ? formatScalar(valueBlockType, field, newValue)
+      : ''
   if (
     scalar &&
     (config?.type === 'dropdown' || config?.type === 'combobox') &&
@@ -99,7 +120,7 @@ export function FieldChangeRow({ blockType, field, oldValue, newValue }: FieldCh
         (oneSided ? (
           <ValueChip
             tone={isBlankValue(oldValue) ? 'added' : 'removed'}
-            text={formatScalar(blockType, field, isBlankValue(oldValue) ? newValue : oldValue)}
+            text={formatScalar(valueBlockType, field, isBlankValue(oldValue) ? newValue : oldValue)}
           />
         ) : wordDiff ? (
           <InlineDiff oldText={oldText} newText={newText} />

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

@@ -1,31 +1,63 @@
 import { describe, expect, it } from 'vitest'
+import { diffOrderedRows } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/ordered-row-diff'
 import { getStructuredValuePresentation } from '@/app/workspace/[workspaceId]/w/components/workflow-diff/components/change-list/value-presentation'
 
 describe('structured workflow value presentation', () => {
-  it('preserves duplicate header rows and order while ignoring editor row IDs and blank starter rows', () => {
-    const config = { id: 'headers', type: 'table' as const, columns: ['Key', 'Value'] }
+  it.each([false, true])(
+    'preserves header order and ignores editor metadata (encoded: %s)',
+    (encoded) => {
+      const stored = (value: unknown) => (encoded ? JSON.stringify(value) : value)
+      const config = { id: 'headers', type: 'table' as const, columns: ['Key', 'Value'] }
+      const source = [
+        { id: 'first', cells: { Key: 'X-Mode', Value: 'first' } },
+        { id: 'second', cells: { Key: 'X-Mode', Value: 'last' } },
+        { id: 'blank', cells: { Key: '', Value: '' } },
+        { id: 'empty-value', cells: { Key: 'X-Empty', Value: '' } },
+      ]
+      const result = getStructuredValuePresentation(config, 'headers', stored(source))!
+      expect(result.columns).toEqual(['Key', 'Value'])
+      expect(result.rows.map((row) => row.cells)).toEqual([
+        { Key: 'X-Mode', Value: 'first' },
+        { Key: 'X-Mode', Value: 'last' },
+        { Key: 'X-Empty', Value: '' },
+      ])
+      const recreated = source.map((row, index) => ({ ...row, id: `recreated-${index}` }))
+      expect(
+        getStructuredValuePresentation(config, 'headers', stored(recreated))?.rows.map(
+          (row) => row.key
+        )
+      ).toEqual(result.rows.map((row) => row.key))
+      expect(
+        getStructuredValuePresentation(config, 'headers', stored([...source].reverse()))?.rows.map(
+          (row) => row.key
+        )
+      ).not.toEqual(result.rows.map((row) => row.key))
+    }
+  )
+
+  it('keeps surviving router rows unchanged when a preceding route is removed', () => {
+    const config = { id: 'routes', type: 'router-input' as const }
     const source = [
-      { id: 'first', cells: { Key: 'X-Mode', Value: 'first' } },
-      { id: 'second', cells: { Key: 'X-Mode', Value: 'last' } },
-      { id: 'blank', cells: { Key: '', Value: '' } },
-      { id: 'empty-value', cells: { Key: 'X-Empty', Value: '' } },
+      { id: 'a', value: 'first' },
+      { id: 'b', value: 'second' },
+      { id: 'c', value: 'third' },
     ]
-    const result = getStructuredValuePresentation(config, 'headers', source)!
-    expect(result.columns).toEqual(['Key', 'Value'])
-    expect(result.rows.map((row) => row.cells)).toEqual([
-      { Key: 'X-Mode', Value: 'first' },
-      { Key: 'X-Mode', Value: 'last' },
-      { Key: 'X-Empty', Value: '' },
+    const before = getStructuredValuePresentation(config, 'routes', source)!
+    const after = getStructuredValuePresentation(config, 'routes', source.slice(1))!
+    expect(diffOrderedRows(before.rows, after.rows).map(({ kind }) => kind)).toEqual([
+      'removed',
+      'context',
+      'context',
+    ])
+    const changed = getStructuredValuePresentation(config, 'routes', [
+      { ...source[1], value: 'edited' },
+      source[2],
+    ])!
+    expect(diffOrderedRows(after.rows, changed.rows).map(({ kind }) => kind)).toEqual([
+      'removed',
+      'added',
+      'context',
     ])
-    const recreated = source.map((row, index) => ({ ...row, id: `recreated-${index}` }))
-    expect(
-      getStructuredValuePresentation(config, 'headers', recreated)?.rows.map((row) => row.key)
-    ).toEqual(result.rows.map((row) => row.key))
-    expect(
-      getStructuredValuePresentation(config, 'headers', [...source].reverse())?.rows.map(
-        (row) => row.key
-      )
-    ).not.toEqual(result.rows.map((row) => row.key))
   })
 
   it('keeps secret-only edits distinct before the renderer masks cells', () => {

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

@@ -114,7 +114,11 @@ function branchPresentation(value: unknown, config: SubBlockConfig): StructuredV
       Branch: titles[index],
       ...(Object.hasOwn(entry, 'value') ? { [description]: entry.value } : {}),
     }
-    return row(entry, withDetails(cells, entry, ['value'], ['id', 'title']), titles[index])
+    return row(
+      entry,
+      withDetails(cells, entry, ['value'], ['id', 'title']),
+      condition ? titles[index] : undefined
+    )
   })
   return { columns: columnsFor(rows, ['Branch', description]), rows }
 }
@@ -153,7 +157,8 @@ function checkboxPresentation(value: unknown, config: SubBlockConfig): Structure
   return { columns: ['Option', 'Selected'], rows }
 }
 
-function mappingPresentation(value: unknown): StructuredValuePresentation {
+/** Named values use the same ordered field rows for subblock mappings and block settings. */
+export function mappingPresentation(value: unknown): StructuredValuePresentation {
   if (!isRecordLike(value) || Object.keys(value).length === 0) return valuePresentation(value)
   return {
     columns: ['Field', 'Value'],