fix(config): re-evaluate option lists when the host shape lands after mount

A host context served by an app version that predates the deployment field
leaves the browser on the env fallback until a refetch carries the shape. Block
option builders read the shape outside React, so the sub-block combobox now
subscribes to it and keys its option memo on it; the reader hands out one
stable fallback object per document so that dependency only changes when the
shape does. The host-provider test now renders without query data first and
then lets a refetch land, so the effect path that follows a later host context
is exercised rather than the initial seed twice.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/providers/workspace-host-provider.test.tsx

@@ -114,15 +114,18 @@ describe('WorkspaceHostProvider', () => {
     expect(getDeploymentShape()).toBe(HOST_CONTEXT.deployment)
   })
 
-  it('follows the refetched host context over the initial one', () => {
+  it('follows a host context that arrives after mount over the initial seed', () => {
+    renderProvider(HOST_CONTEXT)
+    expect(textOf('context')).toBe('true')
+    expect(getDeploymentShape().billingEnabled).toBe(true)
+
     mockUseWorkspaceHostContextQuery.mockReturnValue({
       data: {
         ...HOST_CONTEXT,
         deployment: { ...HOST_CONTEXT.deployment!, billingEnabled: false },
       },
       error: null,
     })
-
     renderProvider(HOST_CONTEXT)
 
     expect(textOf('context')).toBe('false')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Combobox, type ComboboxOption, cn } from '@sim/emcn'
 import { Plus } from '@sim/emcn/icons'
 import { useReactFlow } from '@xyflow/react'
+import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import type { SelectorKey } from '@/lib/selectors/manifest'
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { getDependsOnFields } from '@/lib/workflows/subblocks/dependencies'
@@ -127,6 +128,13 @@ export const ComboBox = memo(function ComboBox({
       : undefined
   )
 
+  /**
+   * Option builders such as the model list and the Function block's languages read the
+   * deployment shape outside React, so the list is keyed on the subscribed shape as well:
+   * a host context that lands after mount (an app version rolling out the field) must
+   * re-evaluate them rather than leave the env fallback's list in place.
+   */
+  const deploymentShape = useDeploymentShape()
   const staticOptions = useMemo(() => {
     const opts =
       typeof options === 'function'
@@ -138,7 +146,7 @@ export const ComboBox = memo(function ComboBox({
     }
 
     return opts
-  }, [options, blockValues, subBlockId, isModelUsable])
+  }, [options, blockValues, subBlockId, isModelUsable, deploymentShape])
 
   const [selectorSearch, setSelectorSearch] = useState('')
   const debouncedSelectorSearch = useDebounce(selectorSearch.trim(), SEARCH_DEBOUNCE_MS)

apps/sim/lib/core/config/deployment-shape.ts

@@ -61,6 +61,18 @@ const useDeploymentShapeStore = create<DeploymentShapeState>()(
   )
 )
 
+/**
+ * The browser's env fallback, built once per document. The env constants it packages are
+ * themselves frozen at module init, so caching changes nothing semantically, and it gives
+ * {@link useDeploymentShape} a stable reference that memo dependencies can key on.
+ */
+let browserEnvFallback: DeploymentShape | null = null
+
+function browserFallbackShape(): DeploymentShape {
+  browserEnvFallback ??= resolveDeploymentShape()
+  return browserEnvFallback
+}
+
 /**
  * The shape this runtime's own configuration resolves to. On the server that is the
  * deployment's truth, and what the workspace host context projects. In the browser it
@@ -117,8 +129,9 @@ export function seedDeploymentShape(shape: DeploymentShape | undefined): void {
   seed(shape)
 }
 
-/** Drops the seeded shape. For tests; the app never unseeds on purpose. */
+/** Drops the seeded shape and the cached fallback. For tests; the app never unseeds on purpose. */
 export function resetDeploymentShape(): void {
+  browserEnvFallback = null
   useDeploymentShapeStore.getState().reset()
 }
 
@@ -130,11 +143,16 @@ export function resetDeploymentShape(): void {
  */
 export function getDeploymentShape(): DeploymentShape {
   if (typeof window === 'undefined') return resolveDeploymentShape()
-  return useDeploymentShapeStore.getState().seeded ?? resolveDeploymentShape()
+  return useDeploymentShapeStore.getState().seeded ?? browserFallbackShape()
 }
 
-/** {@link getDeploymentShape} for components, subscribed to the seeded value. */
+/**
+ * {@link getDeploymentShape} for components, subscribed to the seeded value. Returns the
+ * same object until the shape actually changes, so it is safe as a memo dependency for
+ * option lists and other derived values that read the shape outside React.
+ */
 export function useDeploymentShape(): DeploymentShape {
   const seeded = useDeploymentShapeStore((state) => state.seeded)
-  return seeded ?? resolveDeploymentShape()
+  if (seeded) return seeded
+  return typeof window === 'undefined' ? resolveDeploymentShape() : browserFallbackShape()
 }