update styling + move predeploy checks earlier for first time deploys

Author: waleedlatif1

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

@@ -1,7 +1,10 @@
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { runPreDeployChecks } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/use-predeploy-checks'
 import { useNotificationStore } from '@/stores/notifications'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { mergeSubblockState } from '@/stores/workflows/utils'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('useDeployment')
 
@@ -35,6 +38,24 @@ export function useDeployment({
       return { success: true, shouldOpenModal: true }
     }
 
+    const { blocks, edges, loops, parallels } = useWorkflowStore.getState()
+    const liveBlocks = mergeSubblockState(blocks, workflowId)
+    const checkResult = runPreDeployChecks({
+      blocks: liveBlocks,
+      edges,
+      loops,
+      parallels,
+      workflowId,
+    })
+    if (!checkResult.passed) {
+      addNotification({
+        level: 'error',
+        message: checkResult.error || 'Pre-deploy validation failed',
+        workflowId,
+      })
+      return { success: false, shouldOpenModal: false }
+    }
+
     setIsDeploying(true)
     try {
       const response = await fetch(`/api/workflows/${workflowId}/deploy`, {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx

@@ -90,11 +90,6 @@ export function ParameterWithLabel({
         <Label className='flex items-baseline gap-[6px] whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
           {title}
           {isRequired && visibility === 'user-only' && <span className='ml-0.5'>*</span>}
-          {visibility !== 'user-only' && (
-            <span className='-ml-[3px] font-normal text-[12px] text-[var(--text-tertiary)]'>
-              (optional)
-            </span>
-          )}
         </Label>
         <div className='flex min-w-0 flex-1 items-center justify-end gap-[6px]'>
           {showWand &&

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/sub-block-renderer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 import type { SubBlockConfig as BlockSubBlockConfig } from '@/blocks/types'
@@ -77,21 +77,10 @@ export function ToolSubBlockRenderer({
     }
   }, [storeValue, toolIndex, effectiveParamId, onParamChange])
 
-  // Determine if the parameter is optional for the user (LLM can fill it)
+  // Suppress SubBlock's "*" required indicator when the LLM can fill the param
   const visibility = subBlock.paramVisibility ?? 'user-or-llm'
   const isOptionalForUser = visibility !== 'user-only'
 
-  const labelSuffix = useMemo(
-    () =>
-      isOptionalForUser ? (
-        <span className='-ml-[3px] font-normal text-[12px] text-[var(--text-tertiary)]'>
-          (optional)
-        </span>
-      ) : null,
-    [isOptionalForUser]
-  )
-
-  // Suppress SubBlock's "*" required indicator for optional-for-user params
   const config = {
     ...subBlock,
     id: syntheticId,
@@ -105,7 +94,6 @@ export function ToolSubBlockRenderer({
       isPreview={false}
       disabled={disabled}
       canonicalToggle={canonicalToggle}
-      labelSuffix={labelSuffix}
       dependencyContext={toolParams}
     />
   )

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

@@ -1067,7 +1067,7 @@ export const ToolInput = memo(function ToolInput({
         <ShortInput
           blockId={blockId}
           subBlockId={uniqueSubBlockId}
-          placeholder={param.description}
+          placeholder={param.description || `Enter ${formatParameterLabel(param.id).toLowerCase()}`}
           password={isPasswordParameter(param.id)}
           config={{
             id: uniqueSubBlockId,
@@ -1747,7 +1747,7 @@ export const ToolInput = memo(function ToolInput({
                   {requiresOAuth && oauthConfig && (
                     <div className='relative min-w-0 space-y-[6px]'>
                       <div className='font-medium text-[13px] text-[var(--text-primary)]'>
-                        Account
+                        Account <span className='ml-0.5'>*</span>
                       </div>
                       <div className='w-full min-w-0'>
                         <ToolCredentialSelector