improvement(workflow): scope the editor by props instead of the URL

apps/sim/app/workspace/[workspaceId]/components/custom-tool-editor/use-custom-tool-generation.ts

@@ -121,18 +121,21 @@ try {
 }
 
 interface UseSchemaGenerationParams {
+  workspaceId: string
   jsonSchema: string
   setJsonSchema: (updater: (prev: string) => string) => void
   replaceJsonSchema: (value: string) => void
 }
 
 /** Wand-driven generation for a custom tool's JSON schema. */
 export function useSchemaGeneration({
+  workspaceId,
   jsonSchema,
   setJsonSchema,
   replaceJsonSchema,
 }: UseSchemaGenerationParams) {
   return useWand({
+    workspaceId,
     wandConfig: {
       enabled: true,
       maintainHistory: true,
@@ -148,6 +151,7 @@ export function useSchemaGeneration({
 }
 
 interface UseCodeGenerationParams {
+  workspaceId: string
   functionCode: string
   schemaParameters: SchemaParameter[]
   setFunctionCode: (updater: (prev: string) => string) => void
@@ -156,6 +160,7 @@ interface UseCodeGenerationParams {
 
 /** Wand-driven generation for a custom tool's function body, aware of the schema's parameters. */
 export function useCodeGeneration({
+  workspaceId,
   functionCode,
   schemaParameters,
   setFunctionCode,
@@ -178,6 +183,7 @@ export function useCodeGeneration({
   }, [schemaParameters])
 
   return useWand({
+    workspaceId,
     wandConfig: {
       enabled: true,
       maintainHistory: true,

apps/sim/app/workspace/[workspaceId]/components/resource/resource-navigation.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { createContext, useCallback, useContext, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface ResourceNavigation {
+  /** Handles workspace destinations within a containing resource pane. */
+  navigate: (href: string, replace?: boolean) => void
+}
+
+/** Provided by a containing resource pane; absent on the routed pages. */
+const ResourceNavigationContext = createContext<ResourceNavigation | null>(null)
+
+/** Navigates the route, or the containing resource pane when one provides navigation. */
+export function useResourceRouter() {
+  const router = useRouter()
+  const navigation = useContext(ResourceNavigationContext)
+  const push = useCallback(
+    (href: string) => {
+      if (navigation) navigation.navigate(href)
+      else router.push(href)
+    },
+    [navigation, router]
+  )
+  const replace = useCallback(
+    (href: string) => {
+      if (navigation) navigation.navigate(href, true)
+      else router.replace(href)
+    },
+    [navigation, router]
+  )
+  return useMemo(() => ({ ...router, push, replace }), [router, push, replace])
+}

apps/sim/app/workspace/[workspaceId]/providers/workflow-scope-provider.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
+
+interface WorkflowScope {
+  workspaceId: string
+  /** Null in read-only previews, which render editor sub-blocks outside an open workflow. */
+  workflowId: string | null
+}
+
+const WorkflowScopeContext = createContext<WorkflowScope | null>(null)
+
+interface WorkflowScopeProviderProps extends WorkflowScope {
+  children: ReactNode
+}
+
+/**
+ * Supplies the workspace and workflow ids to the editor tree, so the editor
+ * works wherever it is mounted instead of reading them from the route.
+ */
+export function WorkflowScopeProvider({
+  workspaceId,
+  workflowId,
+  children,
+}: WorkflowScopeProviderProps) {
+  if (!workspaceId) {
+    throw new Error('WorkflowScopeProvider requires a workspaceId')
+  }
+  const value = useMemo(() => ({ workspaceId, workflowId }), [workspaceId, workflowId])
+  return <WorkflowScopeContext.Provider value={value}>{children}</WorkflowScopeContext.Provider>
+}
+
+/** Returns the enclosing scope, or null outside a WorkflowScopeProvider. */
+export function useOptionalWorkflowScope(): WorkflowScope | null {
+  return useContext(WorkflowScopeContext)
+}
+
+/**
+ * Returns the editor's workspace and workflow ids. `workflowId` is null in previews.
+ * Throws outside a WorkflowScopeProvider.
+ */
+export function useWorkflowScope(): WorkflowScope {
+  const scope = useOptionalWorkflowScope()
+  if (!scope) {
+    throw new Error('useWorkflowScope must be used within a WorkflowScopeProvider')
+  }
+  return scope
+}
+
+/** For editor-only components: throws in a preview scope, which has no workflow. */
+export function useScopedWorkflowId(): string {
+  const { workflowId } = useWorkflowScope()
+  if (!workflowId) {
+    throw new Error('useScopedWorkflowId must be used within an editor workflow scope')
+  }
+  return workflowId
+}

apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/components/custom-tool-detail/custom-tool-detail.tsx

@@ -88,6 +88,7 @@ export function CustomToolDetail({
   const identity = useMemo(() => extractSchemaIdentity(jsonSchema), [jsonSchema])
 
   const schemaGeneration = useSchemaGeneration({
+    workspaceId,
     jsonSchema,
     setJsonSchema: (updater) => {
       setJsonSchema(updater)
@@ -100,6 +101,7 @@ export function CustomToolDetail({
   })
 
   const codeGeneration = useCodeGeneration({
+    workspaceId,
     functionCode,
     schemaParameters,
     setFunctionCode: (updater) => {

apps/sim/app/workspace/[workspaceId]/skills/components/skill-modal/skill-modal.tsx

@@ -14,7 +14,6 @@ import {
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import dynamic from 'next/dynamic'
-import { useParams } from 'next/navigation'
 import {
   SKILL_CONTENT_PLACEHOLDER,
   SKILL_DESCRIPTION_MAX_LENGTH,
@@ -43,6 +42,7 @@ const RichMarkdownField = dynamic(
 )
 
 interface SkillModalProps {
+  workspaceId: string
   open: boolean
   onOpenChange: (open: boolean) => void
   onSave: () => void
@@ -63,10 +63,13 @@ const CREATE_TABS = [
   { value: 'import', label: 'Import' },
 ] as const
 
-export function SkillModal({ open, onOpenChange, onSave, initialValues }: SkillModalProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-
+export function SkillModal({
+  workspaceId,
+  open,
+  onOpenChange,
+  onSave,
+  initialValues,
+}: SkillModalProps) {
   const createSkill = useCreateSkill()
   const updateSkill = useUpdateSkill()
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx

@@ -5,8 +5,9 @@ import { Button, cn, handleKeyboardActivation, Library } from '@sim/emcn'
 import { Search } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import Image from 'next/image'
-import { useParams, useRouter } from 'next/navigation'
 import { AgentIcon } from '@/components/icons'
+import { useResourceRouter } from '@/app/workspace/[workspaceId]/components/resource/resource-navigation'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 
@@ -50,13 +51,11 @@ const commands: CommandItem[] = [
  * Centered on the screen for empty workflows
  */
 export function CommandList() {
-  const params = useParams()
-  const router = useRouter()
+  const { workspaceId } = useWorkflowScope()
+  const router = useResourceRouter()
   const openSearchModal = useSearchModalStore((s) => s.open)
   const preventZoomRef = usePreventZoom()
 
-  const workspaceId = params.workspaceId as string | undefined
-
   /**
    * Handle click on a command row.
    *
@@ -79,10 +78,6 @@ export function CommandList() {
             return
           }
           case 'Logs': {
-            if (!workspaceId) {
-              logger.warn('No workspace ID found, cannot navigate to logs from command list')
-              return
-            }
             router.push(`/workspace/${workspaceId}/logs`)
             return
           }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx

@@ -14,9 +14,12 @@ import { X } from '@sim/emcn/icons'
 import { WorkflowBlockBorder, type WorkflowBorderPort } from '@sim/workflow-renderer'
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
 import { Command } from 'cmdk'
-import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
+import {
+  useScopedWorkflowId,
+  useWorkflowScope,
+} from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import {
   CommandFadedList,
   CommandSearch,
@@ -150,9 +153,8 @@ function isRecentSelection(value: unknown): value is RecentSelection {
  * temporary edge reads as connected to the block that will replace it.
  */
 export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockSelectorNode>) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
-  const currentWorkflowId = params.workflowId as string | undefined
+  const { workspaceId } = useWorkflowScope()
+  const currentWorkflowId = useScopedWorkflowId()
   const posthog = usePostHog()
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/use-note-image-upload.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback } from 'react'
-import { useParams } from 'next/navigation'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { useUploadWorkspaceFile } from '@/hooks/queries/workspace-files'
 
 /**
@@ -19,8 +19,7 @@ import { useUploadWorkspaceFile } from '@/hooks/queries/workspace-files'
  * flow and the canvas context menu's "Add image".
  */
 export function useNoteImageUpload(): (file: File) => Promise<{ url: string; alt: string } | null> {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
+  const { workspaceId } = useWorkflowScope()
   const uploadFile = useUploadWorkspaceFile()
 
   return useCallback(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx

@@ -16,11 +16,11 @@ import {
   Label,
 } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
-import { useParams } from 'next/navigation'
 import { getMeaningfulWorkflowDescription } from '@/lib/mcp/workflow-tool-schema'
 import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import type { InputFormatField } from '@/lib/workflows/types'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { useDeploymentInfo, useUpdatePublicApi } from '@/hooks/queries/deployments'
 import { useUpdateWorkflow, useWorkflowMap } from '@/hooks/queries/workflows'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -37,7 +37,7 @@ interface ApiInfoModalProps {
 }
 
 export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalProps) {
-  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const { workspaceId } = useWorkflowScope()
   const blocks = useWorkflowStore((state) => state.blocks)
   const setValue = useSubBlockStore((state) => state.setValue)
   const subBlockValues = useSubBlockStore(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx

@@ -13,7 +13,7 @@ import {
   cn,
 } from '@sim/emcn'
 import dynamic from 'next/dynamic'
-import { useParams } from 'next/navigation'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import {
   useGenerateVersionDescription,
   useUpdateDeploymentVersion,
@@ -50,8 +50,7 @@ export function VersionDescriptionModal({
   versionName,
   currentDescription,
 }: VersionDescriptionModalProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
+  const { workspaceId } = useWorkflowScope()
 
   const initialDescriptionRef = useRef(currentDescription || '')
   const [description, setDescription] = useState(initialDescriptionRef.current)

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

@@ -13,7 +13,6 @@ import {
   Textarea,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
-import { useParams } from 'next/navigation'
 import { ApiClientError } from '@/lib/api/client/errors'
 import {
   extractDescriptionOverrides,
@@ -23,6 +22,7 @@ import {
   sanitizeToolName,
 } from '@/lib/mcp/workflow-tool-schema'
 import type { InputFormatField } from '@/lib/workflows/types'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { CreateWorkflowMcpServerModal } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components/create-workflow-mcp-server-modal'
 import {
   useAddWorkflowMcpTool,
@@ -132,8 +132,7 @@ export function McpDeploy({
   onSaveDisabledReasonChange,
   onActiveServerChange,
 }: McpDeployProps) {
-  const params = useParams()
-  const workspaceId = params.workspaceId as string
+  const { workspaceId } = useWorkflowScope()
   const [showCreateModal, setShowCreateModal] = useState(false)
 
   const { data: servers = [], isLoading: isLoadingServers } = useWorkflowMcpServers(workspaceId)

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

@@ -18,10 +18,10 @@ import {
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
-import { useParams } from 'next/navigation'
 import type { DeploymentOperationSummary } from '@/lib/api/contracts/deployments'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { CreateApiKeyModal } from '@/app/workspace/[workspaceId]/settings/components/api-keys/components'
 import {
@@ -104,8 +104,7 @@ export function DeployModal({
   /* A snapshot that is expected but absent reads as loading everywhere. */
   const isLoadingDeployedState = isAwaitingSnapshot
   const queryClient = useQueryClient()
-  const params = useParams()
-  const workspaceId = params?.workspaceId as string
+  const { workspaceId } = useWorkflowScope()
   const { navigateToSettings } = useSettingsNavigation()
   const isDeployed = isDeployedProp
   const { data: workflowMap = {} } = useWorkflowMap(workspaceId)

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

@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { Chip, Tooltip, toast } from '@sim/emcn'
 import { useQueryClient } from '@tanstack/react-query'
-import { useParams } from 'next/navigation'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { useWorkflowScope } from '@/app/workspace/[workspaceId]/providers/workflow-scope-provider'
 import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
   useDeployment,
@@ -26,8 +26,7 @@ interface DeployProps {
 
 export function Deploy({ activeWorkflowId, userPermissions, disabled = false }: DeployProps) {
   const queryClient = useQueryClient()
-  const params = useParams()
-  const workspaceId = params.workspaceId as string | undefined
+  const { workspaceId } = useWorkflowScope()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
   const isRegistryLoading = hydrationPhase === 'idle' || hydrationPhase === 'state-loading'