fix(deploy): resolve subblock values to their configuration on both sides of change detection

Focusing a deployed trigger block flipped the deploy button from Live to
Update for a change the user never made, and redeploying could not clear it.

Deploy materializes every declared `defaultValue` into `webhook.providerConfig`
(`getConfigValue`). Opening a trigger block's panel reads that derived artifact
back into live state through a non-persisting `setValue`, so the block gains
keys the DB draft — which deploy snapshots — does not have. The comparison then
reported a difference for a field nobody set. Because deploy snapshots the
draft, the next deployment lacked the keys too: a fixpoint.

Measured on production: 89 of 89 recent `generic_webhook` deployments were
missing `acceptOtherMethods`, and 1,046 of 2,139 active webhooks carry at least
one `providerConfig` key their block has no entry for.

This is the tenth instance of one failure mode — 3c29476, 41b6804,
066e18a, 4f722c6, 5ece9f9, ff23546, 01577a1, 3cc9b1a and
8806508 are all the same shape: two pipelines spelled one configuration
differently, found in production, patched with a per-field exception.

The fix resolves each subblock to the configuration it represents, from the
CURRENT block definition, applied to both sides: absent, `null` and (where a
default is declared) `''` all mean "unset", as does a value equal to that
default. Adding a defaulted field to a block definition is therefore a no-op for
already-deployed workflows rather than a retroactive diff.

Comparison-time only, deliberately. Writing defaults into storage answers the
same question but cannot be rolled back, and would destroy the "key absent means
this state predates the field" signal the subblock-rename migrations rely on.
`value()` is not consulted — those thunks are generators, so resolving one makes
a state unequal to itself.

Also fixed here, both found while validating the above:

- `deployment-status.ts` compared the RAW version jsonb while the client's
  `/deployed` endpoint compares a materialized one, so the server and the client
  answered "needs redeploy" differently for the same workflow. Both now go
  through `materializeDeploymentState`, and `checkNeedsRedeployment` owns both
  loads so mismatched operands are unrepresentable.

- The deploy button never read `isChangeDetectionSettling` — it only reached the
  tooltip — and change detection returns false while loading, so every page load
  rendered Live then Update, and every window focus rendered Update, Live,
  Update. Replaced with an explicit status seeded from the server's
  `needsRedeployment`, which the component already fetched and discarded.

Comparison got faster: 1.282ms -> 1.101ms per diff on a 55-block workflow,
because the always-equal `.properties` comparison is gone.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: icecrasher321

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

@@ -5,7 +5,9 @@ import { Chip, Tooltip, toast } from '@sim/emcn'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
+  resolveDeployButtonStatus,
   useChangeDetection,
+  useChangeDetectionCanary,
   useDeployment,
   useDeployReadiness,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks'
@@ -40,13 +42,42 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
   const deployedState = isDeployedStateEnabled ? (deployedStateData ?? null) : null
   const deployReadiness = useDeployReadiness(activeWorkflowId)
 
-  const { changeDetected, isChangeDetectionSettling } = useChangeDetection({
+  /*
+   * `isLoading` (no snapshot yet), NOT `isFetching`. A background refetch — which
+   * `refetchOnWindowFocus` fires on every focus — still has the cached snapshot
+   * to compare against, so treating it as loading blanked the answer and pushed
+   * an already-correct "Update" back through "Live" and out again.
+   */
+  const { changeDetected, changedFields, isChangeDetectionSettling } = useChangeDetection({
     workflowId: activeWorkflowId,
     deployedState,
-    isLoadingDeployedState: isLoadingDeployedState || isFetchingDeployedState,
+    isLoadingDeployedState,
   })
   const isDeploymentSettling = isChangeDetectionSettling || deployReadiness.isSyncing
 
+  const serverNeedsRedeployment = isDeployedStateEnabled
+    ? deploymentInfo?.needsRedeployment
+    : undefined
+
+  const buttonStatus = resolveDeployButtonStatus({
+    workflowId: activeWorkflowId,
+    isDeployed,
+    isAwaitingFirstDeployedState: isLoadingDeployedState,
+    clientChangeDetected: changeDetected,
+    hasDeployedState: deployedState !== null,
+    serverNeedsRedeployment,
+  })
+  const changeDetectedForModal = buttonStatus === 'changed'
+
+  useChangeDetectionCanary({
+    workflowId: activeWorkflowId,
+    clientChangeDetected: changeDetected,
+    clientChangedFields: changedFields,
+    serverNeedsRedeployment,
+    isSettling: isDeploymentSettling || deployedState === null,
+    isSettled: deployReadiness.status === 'ready',
+  })
+
   const { isDeploying, handleDeployClick } = useDeployment({
     workflowId: activeWorkflowId,
     isDeployed,
@@ -110,23 +141,28 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
     if (deployReadiness.isBlocked && !isDeployed) {
       return deployReadiness.tooltip
     }
-    if (changeDetected) {
+    if (buttonStatus === 'changed') {
       return 'Update deployment'
     }
-    if (isDeployed) {
+    if (buttonStatus === 'live') {
       return 'Active deployment'
     }
     return 'Deploy workflow'
   }
 
   const getButtonLabel = () => {
-    if (changeDetected) {
-      return 'Update'
-    }
-    if (isDeployed) {
-      return 'Live'
+    switch (buttonStatus) {
+      case 'changed':
+        return 'Update'
+      case 'live':
+        return 'Live'
+      /*
+       * Only reachable before we know the workflow is deployed, so "Deploy" is
+       * the answer rather than a guess we would have to take back.
+       */
+      default:
+        return 'Deploy'
     }
-    return 'Deploy'
   }
 
   return (
@@ -151,7 +187,7 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
         onOpenChange={setIsModalOpen}
         workflowId={activeWorkflowId}
         isDeployed={isDeployed}
-        needsRedeployment={changeDetected}
+        needsRedeployment={changeDetectedForModal}
         deployedState={deployedState}
         isLoadingDeployedState={isLoadingDeployedState || isFetchingDeployedState}
         deployReadiness={deployReadiness}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/index.ts

@@ -1,4 +1,7 @@
 export { useChangeDetection } from './use-change-detection'
+export { useChangeDetectionCanary } from './use-change-detection-canary'
+export type { DeployButtonStatus } from './use-deploy-button-status'
+export { resolveDeployButtonStatus } from './use-deploy-button-status'
 export type { DeployReadiness } from './use-deploy-readiness'
 export { getDeployReadinessState, useDeployReadiness } from './use-deploy-readiness'
 export { useDeployment } from './use-deployment'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-change-detection-canary.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react'
+import { createLogger } from '@sim/logger'
+
+const logger = createLogger('ChangeDetectionCanary')
+
+interface UseChangeDetectionCanaryProps {
+  workflowId: string | null
+  /** The client's in-memory answer, from `useChangeDetection`. */
+  clientChangeDetected: boolean
+  /** The fields the client's answer rests on, for attribution. */
+  clientChangedFields: string[]
+  /** The server's answer, already fetched by `useDeploymentInfo`. */
+  serverNeedsRedeployment: boolean | undefined
+  /** True while either operand is still loading — a disagreement means nothing yet. */
+  isSettling: boolean
+  /** True only when the operation queue is drained and no diff/reconcile is pending. */
+  isSettled: boolean
+}
+
+/**
+ * Reports when the client and the server disagree about whether a workflow needs
+ * redeploying.
+ *
+ * The two answers are computed from the same comparison over operands that are
+ * supposed to be equivalent: the server diffs the durable draft against the
+ * active deployment version, and the client diffs its merged in-memory state
+ * against the same version. Once the operation queue has drained they must
+ * agree, so a disagreement is a divergence between the client's state and what
+ * was actually persisted — the signature of every phantom "Update" this codebase
+ * has shipped.
+ *
+ * Costs nothing: `useDeploymentInfo` already fetches the server's answer for the
+ * `isDeployed` flag, and the client's answer is already computed for the button.
+ * Discarding both is why ten instances of this bug class were found by users
+ * rather than by us.
+ */
+export function useChangeDetectionCanary({
+  workflowId,
+  clientChangeDetected,
+  clientChangedFields,
+  serverNeedsRedeployment,
+  isSettling,
+  isSettled,
+}: UseChangeDetectionCanaryProps): void {
+  /** Reported once per (workflow, verdict pair) so a steady disagreement logs once. */
+  const reportedRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!workflowId || isSettling || !isSettled || serverNeedsRedeployment === undefined) {
+      return
+    }
+
+    if (serverNeedsRedeployment === clientChangeDetected) {
+      reportedRef.current = null
+      return
+    }
+
+    const signature = `${workflowId}:${serverNeedsRedeployment}:${clientChangeDetected}`
+    if (reportedRef.current === signature) return
+    reportedRef.current = signature
+
+    logger.warn('Change detection disagrees with the server', {
+      workflowId,
+      serverNeedsRedeployment,
+      clientChangeDetected,
+      /*
+       * Only populated when the CLIENT sees changes. The inverse case — the
+       * server sees changes the client does not — reports an empty list, and
+       * that asymmetry is itself the diagnosis: the client's merged state
+       * matches the deployment while the persisted draft does not.
+       */
+      clientChangedFields,
+    })
+  }, [
+    workflowId,
+    clientChangeDetected,
+    clientChangedFields,
+    serverNeedsRedeployment,
+    isSettling,
+    isSettled,
+  ])
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-change-detection.ts

@@ -1,28 +1,43 @@
 import { useMemo } from 'react'
 import { mergeSubblockStateWithValues } from '@sim/workflow-persistence/subblocks'
-import { hasWorkflowChanged } from '@/lib/workflows/comparison'
+import { generateWorkflowDiffSummary } from '@/lib/workflows/comparison'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
+/** Stable identity so an unchanged workflow does not hand consumers a fresh array. */
+const EMPTY_FIELDS: string[] = []
+
 interface UseChangeDetectionProps {
   workflowId: string | null
   deployedState: WorkflowState | null
   isLoadingDeployedState: boolean
 }
 
+interface UseChangeDetectionResult {
+  changeDetected: boolean
+  /**
+   * The field names behind `changeDetected`, for diagnostics only — never for
+   * rendering. Free: `hasWorkflowChanged` is `generateWorkflowDiffSummary(…).hasChanges`,
+   * so the summary is computed either way and throwing it away only hid which
+   * fields drove a redeploy prompt.
+   */
+  changedFields: string[]
+  isChangeDetectionSettling: boolean
+}
+
 /**
  * Detects meaningful changes between current workflow state and deployed state.
- * Performs comparison entirely on the client using hasWorkflowChanged — no API
- * calls needed. The deployed state snapshot is fetched once via React Query and
- * refreshed after deploy/undeploy/version-activate mutations.
+ * Performs comparison entirely on the client using generateWorkflowDiffSummary —
+ * no API calls needed. The deployed state snapshot is fetched once via React Query
+ * and refreshed after deploy/undeploy/version-activate mutations.
  */
 export function useChangeDetection({
   workflowId,
   deployedState,
   isLoadingDeployedState,
-}: UseChangeDetectionProps) {
+}: UseChangeDetectionProps): UseChangeDetectionResult {
   const blocks = useWorkflowStore((state) => state.blocks)
   const edges = useWorkflowStore((state) => state.edges)
   const loops = useWorkflowStore((state) => state.loops)
@@ -65,13 +80,35 @@ export function useChangeDetection({
     workflowVariables,
   ])
 
-  const changeDetected = useMemo(() => {
-    if (!currentState || !deployedState || isLoadingDeployedState) return false
-    return hasWorkflowChanged(currentState, deployedState)
+  const { changeDetected, changedFields } = useMemo(() => {
+    if (!currentState || !deployedState || isLoadingDeployedState) {
+      return { changeDetected: false, changedFields: EMPTY_FIELDS }
+    }
+
+    const summary = generateWorkflowDiffSummary(currentState, deployedState)
+    if (!summary.hasChanges) {
+      return { changeDetected: false, changedFields: EMPTY_FIELDS }
+    }
+
+    const fields = new Set<string>()
+    for (const block of summary.modifiedBlocks) {
+      for (const change of block.changes) {
+        fields.add(`${block.type}.${change.field}`)
+      }
+    }
+    for (const block of summary.addedBlocks) fields.add(`+block:${block.type}`)
+    for (const block of summary.removedBlocks) fields.add(`-block:${block.type}`)
+    if (summary.edgeChanges.added > 0 || summary.edgeChanges.removed > 0) fields.add('edges')
+    if (summary.loopChanges.modified > 0) fields.add('loops')
+    if (summary.parallelChanges.modified > 0) fields.add('parallels')
+    if (summary.variableChanges.modified > 0) fields.add('variables')
+
+    return { changeDetected: true, changedFields: [...fields] }
   }, [currentState, deployedState, isLoadingDeployedState])
 
   return {
     changeDetected,
+    changedFields,
     isChangeDetectionSettling: Boolean(workflowId && isLoadingDeployedState),
   }
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-deploy-button-status.test.ts

@@ -0,0 +1,116 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  type DeployButtonStatus,
+  resolveDeployButtonStatus,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-deploy-button-status'
+
+type Input = Parameters<typeof resolveDeployButtonStatus>[0]
+
+const base: Input = {
+  workflowId: 'wf-1',
+  isDeployed: false,
+  isAwaitingFirstDeployedState: false,
+  clientChangeDetected: false,
+  hasDeployedState: false,
+  serverNeedsRedeployment: undefined,
+}
+
+/** Replays a render sequence and returns the labels actually committed, deduped. */
+function committed(sequence: Array<Partial<Input>>): DeployButtonStatus[] {
+  const seen: DeployButtonStatus[] = []
+  for (const step of sequence) {
+    const status = resolveDeployButtonStatus({ ...base, ...step })
+    if (seen[seen.length - 1] !== status) seen.push(status)
+  }
+  return seen
+}
+
+describe('resolveDeployButtonStatus', () => {
+  /**
+   * The regression this exists for. The old label read `changeDetected`, which
+   * is forced false while the deployed snapshot loads, so a changed workflow
+   * rendered "Live" on the way to "Update".
+   */
+  it('never passes through live when loading a workflow that has changes', () => {
+    const statuses = committed([
+      // 1. Nothing loaded.
+      {},
+      // 2. deploymentInfo lands — isDeployed and needsRedeployment arrive together.
+      { isDeployed: true, serverNeedsRedeployment: true, isAwaitingFirstDeployedState: true },
+      // 3. The deployed snapshot lands; the client diff agrees.
+      {
+        isDeployed: true,
+        serverNeedsRedeployment: true,
+        hasDeployedState: true,
+        clientChangeDetected: true,
+      },
+    ])
+
+    expect(statuses).toEqual(['undeployed', 'changed'])
+    expect(statuses).not.toContain('live')
+  })
+
+  it('settles straight to live for a deployed workflow with no changes', () => {
+    const statuses = committed([
+      {},
+      { isDeployed: true, serverNeedsRedeployment: false, isAwaitingFirstDeployedState: true },
+      { isDeployed: true, serverNeedsRedeployment: false, hasDeployedState: true },
+    ])
+
+    expect(statuses).toEqual(['undeployed', 'live'])
+    expect(statuses).not.toContain('changed')
+  })
+
+  /**
+   * `refetchOnWindowFocus` is on for both queries, so this fires on every focus.
+   * A refetch keeps the cached snapshot, so the answer must not move.
+   */
+  it('holds its answer across a background refetch', () => {
+    const settled: Partial<Input> = {
+      isDeployed: true,
+      serverNeedsRedeployment: true,
+      hasDeployedState: true,
+      clientChangeDetected: true,
+    }
+
+    const statuses = committed([
+      settled,
+      // Refetching: data is still cached, so `isAwaitingFirstDeployedState` stays false.
+      settled,
+      settled,
+    ])
+
+    expect(statuses).toEqual(['changed'])
+  })
+
+  it('prefers the client diff over the server seed once a snapshot exists', () => {
+    // Unsaved edits: the server still describes the persisted draft.
+    const status = resolveDeployButtonStatus({
+      ...base,
+      isDeployed: true,
+      serverNeedsRedeployment: false,
+      hasDeployedState: true,
+      clientChangeDetected: true,
+    })
+
+    expect(status).toBe('changed')
+  })
+
+  it('reports undeployed without a workflow', () => {
+    expect(resolveDeployButtonStatus({ ...base, workflowId: null })).toBe('undeployed')
+  })
+
+  it('falls back to unknown only when deployed with no verdict from either side', () => {
+    const status = resolveDeployButtonStatus({
+      ...base,
+      isDeployed: true,
+      isAwaitingFirstDeployedState: true,
+      serverNeedsRedeployment: undefined,
+    })
+
+    expect(status).toBe('unknown')
+  })
+})