fix: prevent copilot keyboard shortcuts from triggering when panel is inactive

The OptionsSelector component was capturing keyboard events (1-9 number keys and Enter)
globally on the document, causing accidental option selections when users were
interacting with other parts of the application.

This fix adds a check to only handle keyboard shortcuts when the copilot panel
is the active tab, preventing the shortcuts from interfering with other workflows.

Co-authored-by: Emir Karabeg <emir-karabeg@users.noreply.github.com>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -23,7 +23,7 @@ import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/compo
 import { getDisplayValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block'
 import { getBlock } from '@/blocks/registry'
 import type { CopilotToolCall } from '@/stores/panel'
-import { useCopilotStore } from '@/stores/panel'
+import { useCopilotStore, usePanelStore } from '@/stores/panel'
 import type { SubAgentContentBlock } from '@/stores/panel/copilot/types'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -341,16 +341,20 @@ export function OptionsSelector({
   const [hoveredIndex, setHoveredIndex] = useState(-1)
   const [chosenKey, setChosenKey] = useState<string | null>(selectedOptionKey)
   const containerRef = useRef<HTMLDivElement>(null)
+  const activeTab = usePanelStore((s) => s.activeTab)
 
   const isLocked = chosenKey !== null
 
-  // Handle keyboard navigation - only for the active options selector
+  // Handle keyboard navigation - only for the active options selector when copilot is active
   useEffect(() => {
     if (isInteractionDisabled || !enableKeyboardNav || isLocked) return
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.defaultPrevented) return
 
+      // Only handle keyboard shortcuts when the copilot panel is active
+      if (activeTab !== 'copilot') return
+
       const activeElement = document.activeElement
       const isInputFocused =
         activeElement?.tagName === 'INPUT' ||
@@ -387,7 +391,7 @@ export function OptionsSelector({
 
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [isInteractionDisabled, enableKeyboardNav, isLocked, sortedOptions, hoveredIndex, onSelect])
+  }, [isInteractionDisabled, enableKeyboardNav, isLocked, sortedOptions, hoveredIndex, onSelect, activeTab])
 
   if (sortedOptions.length === 0) return null
 

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

@@ -239,7 +239,12 @@ export const ComboBox = memo(function ComboBox({
    */
   const defaultOptionValue = useMemo(() => {
     if (defaultValue !== undefined) {
-      return defaultValue
+      // Validate that the default value exists in the available (filtered) options
+      const defaultInOptions = evaluatedOptions.find((opt) => getOptionValue(opt) === defaultValue)
+      if (defaultInOptions) {
+        return defaultValue
+      }
+      // Default not available (e.g. provider disabled) — fall through to other fallbacks
     }
 
     // For model field, default to claude-sonnet-4-5 if available

apps/sim/blocks/blocks/agent.ts

@@ -2,11 +2,10 @@ import { createLogger } from '@sim/logger'
 import { AgentIcon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
 import { AuthMode } from '@/blocks/types'
-import { getApiKeyCondition } from '@/blocks/utils'
+import { getApiKeyCondition, getModelOptions } from '@/blocks/utils'
 import {
   getBaseModelProviders,
   getMaxTemperature,
-  getProviderIcon,
   getReasoningEffortValuesForModel,
   getThinkingLevelsForModel,
   getVerbosityValuesForModel,
@@ -18,7 +17,6 @@ import {
   providers,
   supportsTemperature,
 } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers'
 import type { ToolResponse } from '@/tools/types'
 
 const logger = createLogger('AgentBlock')
@@ -121,21 +119,7 @@ Return ONLY the JSON array.`,
       placeholder: 'Type or select a model...',
       required: true,
       defaultValue: 'claude-sonnet-4-5',
-      options: () => {
+      options: getModelOptions,
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
     },
     {
       id: 'vertexCredential',

apps/sim/blocks/blocks/evaluator.ts

@@ -1,10 +1,13 @@
 import { createLogger } from '@sim/logger'
 import { ChartBarIcon } from '@/components/icons'
 import type { BlockConfig, ParamType } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ProviderId } from '@/providers/types'
-import { getBaseModelProviders, getProviderIcon } from '@/providers/utils'
+import { getBaseModelProviders } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers/store'
 import type { ToolResponse } from '@/tools/types'
 
 const logger = createLogger('EvaluatorBlock')
@@ -175,21 +178,7 @@ export const EvaluatorBlock: BlockConfig<EvaluatorResponse> = {
       placeholder: 'Type or select a model...',
       required: true,
       defaultValue: 'claude-sonnet-4-5',
-      options: () => {
+      options: getModelOptions,
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
     },
     ...getProviderCredentialSubBlocks(),
     {

apps/sim/blocks/blocks/guardrails.ts

@@ -1,8 +1,10 @@
 import { ShieldCheckIcon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
-import { getProviderIcon } from '@/providers/utils'
+  getModelOptions,
-import { useProvidersStore } from '@/stores/providers/store'
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ToolResponse } from '@/tools/types'
 
 export interface GuardrailsResponse extends ToolResponse {
@@ -111,21 +113,7 @@ Return ONLY the regex pattern - no explanations, no quotes, no forward slashes,
       type: 'combobox',
       placeholder: 'Type or select a model...',
       required: true,
-      options: () => {
+      options: getModelOptions,
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
       condition: {
         field: 'validationType',
         value: ['hallucination'],

apps/sim/blocks/blocks/router.ts

@@ -1,9 +1,12 @@
 import { ConnectIcon } from '@/components/icons'
 import { AuthMode, type BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ProviderId } from '@/providers/types'
-import { getBaseModelProviders, getProviderIcon } from '@/providers/utils'
+import { getBaseModelProviders } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers'
 import type { ToolResponse } from '@/tools/types'
 
 interface RouterResponse extends ToolResponse {
@@ -134,25 +137,6 @@ Respond with a JSON object containing:
 - reasoning: A brief explanation (1-2 sentences) of why you chose this route`
 }
 
-/**
- * Helper to get model options for both router versions.
- */
-const getModelOptions = () => {
-  const providersState = useProvidersStore.getState()
-  const baseModels = providersState.providers.base.models
-  const ollamaModels = providersState.providers.ollama.models
-  const vllmModels = providersState.providers.vllm.models
-  const openrouterModels = providersState.providers.openrouter.models
-  const allModels = Array.from(
-    new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-  )
-
-  return allModels.map((model) => {
-    const icon = getProviderIcon(model)
-    return { label: model, id: model, ...(icon && { icon }) }
-  })
-}
-
 /**
  * Legacy Router Block (block-based routing).
  * Hidden from toolbar but still supported for existing workflows.

apps/sim/blocks/blocks/translate.ts

@@ -1,8 +1,10 @@
 import { TranslateIcon } from '@/components/icons'
 import { AuthMode, type BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
-import { getProviderIcon } from '@/providers/utils'
+  getModelOptions,
-import { useProvidersStore } from '@/stores/providers/store'
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 
 const getTranslationPrompt = (targetLanguage: string) =>
   `Translate the following text into ${targetLanguage || 'English'}. Output ONLY the translated text with no additional commentary, explanations, or notes.`
@@ -38,18 +40,7 @@ export const TranslateBlock: BlockConfig = {
       type: 'combobox',
       placeholder: 'Type or select a model...',
       required: true,
-      options: () => {
+      options: getModelOptions,
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(new Set([...baseModels, ...ollamaModels, ...openrouterModels]))
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
     },
     ...getProviderCredentialSubBlocks(),
     {

apps/sim/blocks/utils.ts

@@ -1,8 +1,32 @@
 import { isHosted } from '@/lib/core/config/feature-flags'
 import type { BlockOutput, OutputFieldDefinition, SubBlockConfig } from '@/blocks/types'
-import { getHostedModels, getProviderFromModel, providers } from '@/providers/utils'
+import {
+  getHostedModels,
+  getProviderFromModel,
+  getProviderIcon,
+  providers,
+} from '@/providers/utils'
 import { useProvidersStore } from '@/stores/providers/store'
 
+/**
+ * Returns model options for combobox subblocks, combining all provider sources.
+ */
+export function getModelOptions() {
+  const providersState = useProvidersStore.getState()
+  const baseModels = providersState.providers.base.models
+  const ollamaModels = providersState.providers.ollama.models
+  const vllmModels = providersState.providers.vllm.models
+  const openrouterModels = providersState.providers.openrouter.models
+  const allModels = Array.from(
+    new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
+  )
+
+  return allModels.map((model) => {
+    const icon = getProviderIcon(model)
+    return { label: model, id: model, ...(icon && { icon }) }
+  })
+}
+
 /**
  * Checks if a field is included in the dependsOn config.
  * Handles both simple array format and object format with all/any fields.

apps/sim/providers/vertex/index.ts

@@ -30,8 +30,8 @@ export const vertexProvider: ProviderConfig = {
   executeRequest: async (
     request: ProviderRequest
   ): Promise<ProviderResponse | StreamingExecution> => {
-    const vertexProject = env.VERTEX_PROJECT || request.vertexProject
+    const vertexProject = request.vertexProject || env.VERTEX_PROJECT
-    const vertexLocation = env.VERTEX_LOCATION || request.vertexLocation || 'us-central1'
+    const vertexLocation = request.vertexLocation || env.VERTEX_LOCATION || 'us-central1'
 
     if (!vertexProject) {
       throw new Error(