feat(workflows): version diff view with a field-level change list

Side-by-side view of two workflow states: the overlaid canvas on the left and a
change list on the right, sharing selection. Each touched block is a collapsible
card with the app's block tile; modified blocks show field rows as folded line
diffs with word marks, item-by-item list diffs for tools, conditions, routes and
input fields, old to new pairs for scalars, and only the fact for secrets. Added
and removed blocks show every field diffed against nothing, with long one-sided
bodies capped behind one expander. Fork comparisons group credentials, picked
resources and trigger paths into a muted environment bindings section.

Author: mzxchandra

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

@@ -0,0 +1,47 @@
+'use client'
+
+import { ArrowRight } from '@sim/emcn/icons'
+import { resolveFieldLabel } from '@/lib/workflows/comparison/resolve-values'
+import {
+  classifyChange,
+  formatScalar,
+} from '@/app/workspace/[workspaceId]/w/components/workflow-diff/utils'
+import { formatParameterLabel } from '@/tools/params'
+
+interface BindingChangeRowProps {
+  blockType: string
+  field: string
+  oldValue: unknown
+  newValue: unknown
+}
+
+/**
+ * A workspace-bound field that differs between the two sides. Muted on purpose:
+ * the sync's Mappings and Trigger URLs sections decide what these become, so
+ * the row only records that they differ, and by what, never as a red or green
+ * change competing with the logic rows above it.
+ */
+export function BindingChangeRow({ blockType, field, oldValue, newValue }: BindingChangeRowProps) {
+  const resolved = resolveFieldLabel(blockType, field)
+  const label = resolved === field ? formatParameterLabel(field) : resolved
+  const kind = classifyChange(blockType, field, oldValue, newValue)
+
+  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>
+      {kind === 'secret' ? (
+        <span className='text-[var(--text-muted)]'>Differs between workspaces</span>
+      ) : (
+        <>
+          <span className='min-w-0 truncate text-[var(--text-muted)]'>
+            {formatScalar(blockType, field, oldValue)}
+          </span>
+          <ArrowRight className='size-[12px] shrink-0 text-[var(--text-icon)]' />
+          <span className='min-w-0 truncate text-[var(--text-tertiary)]'>
+            {formatScalar(blockType, field, newValue)}
+          </span>
+        </>
+      )}
+    </div>
+  )
+}