fix(inputs): canonical params + manual validations + params resolution cleanups

.claude/commands/add-integration.md

@@ -206,10 +206,15 @@ export const {Service}Block: BlockConfig = {
 }
 ```
 
-**Critical:**
-- `canonicalParamId` must NOT match any other subblock's `id`, must be unique per block, and should only be used to link basic/advanced alternatives for the same parameter.
-- `mode` only controls UI visibility, NOT serialization. Without `canonicalParamId`, both basic and advanced field values would be sent.
-- Every subblock `id` must be unique within the block. Duplicate IDs cause conflicts even with different conditions.
+**Critical Canonical Param Rules:**
+- `canonicalParamId` must NOT match any subblock's `id` in the block
+- `canonicalParamId` must be unique per operation/condition context
+- Only use `canonicalParamId` to link basic/advanced alternatives for the same logical parameter
+- `mode` only controls UI visibility, NOT serialization. Without `canonicalParamId`, both basic and advanced field values would be sent
+- Every subblock `id` must be unique within the block. Duplicate IDs cause conflicts even with different conditions
+- **Required consistency:** If one subblock in a canonical group has `required: true`, ALL subblocks in that group must have `required: true` (prevents bypassing validation by switching modes)
+- **Inputs section:** Must list canonical param IDs (e.g., `fileId`), NOT raw subblock IDs (e.g., `fileSelector`, `manualFileId`)
+- **Params function:** Must use canonical param IDs, NOT raw subblock IDs (raw IDs are deleted after canonical transformation)
 
 ## Step 4: Add Icon
 

.claude/rules/sim-integrations.md

@@ -157,6 +157,36 @@ dependsOn: { all: ['authMethod'], any: ['credential', 'botToken'] }
 - `'both'` - Show in both modes (default)
 - `'trigger'` - Only when block is used as trigger
 
+### `canonicalParamId` - Link basic/advanced alternatives
+
+Use to map multiple UI inputs to a single logical parameter:
+
+```typescript
+// Basic mode: Visual selector
+{
+  id: 'fileSelector',
+  type: 'file-selector',
+  mode: 'basic',
+  canonicalParamId: 'fileId',
+  required: true,
+},
+// Advanced mode: Manual input
+{
+  id: 'manualFileId',
+  type: 'short-input',
+  mode: 'advanced',
+  canonicalParamId: 'fileId',
+  required: true,
+},
+```
+
+**Critical Rules:**
+- `canonicalParamId` must NOT match any subblock's `id`
+- `canonicalParamId` must be unique per operation/condition context
+- **Required consistency:** All subblocks in a canonical group must have the same `required` status
+- **Inputs section:** Must list canonical param IDs (e.g., `fileId`), NOT raw subblock IDs
+- **Params function:** Must use canonical param IDs (raw IDs are deleted after canonical transformation)
+
 **Register in `blocks/registry.ts`:**
 
 ```typescript

.cursor/rules/sim-integrations.mdc

@@ -155,6 +155,36 @@ dependsOn: { all: ['authMethod'], any: ['credential', 'botToken'] }
 - `'both'` - Show in both modes (default)
 - `'trigger'` - Only when block is used as trigger
 
+### `canonicalParamId` - Link basic/advanced alternatives
+
+Use to map multiple UI inputs to a single logical parameter:
+
+```typescript
+// Basic mode: Visual selector
+{
+  id: 'fileSelector',
+  type: 'file-selector',
+  mode: 'basic',
+  canonicalParamId: 'fileId',
+  required: true,
+},
+// Advanced mode: Manual input
+{
+  id: 'manualFileId',
+  type: 'short-input',
+  mode: 'advanced',
+  canonicalParamId: 'fileId',
+  required: true,
+},
+```
+
+**Critical Rules:**
+- `canonicalParamId` must NOT match any subblock's `id`
+- `canonicalParamId` must be unique per operation/condition context
+- **Required consistency:** All subblocks in a canonical group must have the same `required` status
+- **Inputs section:** Must list canonical param IDs (e.g., `fileId`), NOT raw subblock IDs
+- **Params function:** Must use canonical param IDs (raw IDs are deleted after canonical transformation)
+
 **Register in `blocks/registry.ts`:**
 
 ```typescript

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

@@ -34,6 +34,103 @@ interface UploadedFile {
   type: string
 }
 
+interface SingleFileSelectorProps {
+  file: UploadedFile
+  options: Array<{ label: string; value: string; disabled?: boolean }>
+  selectedValue: string
+  inputValue: string
+  onInputChange: (value: string) => void
+  onClear: (e: React.MouseEvent) => void
+  onOpenChange: (open: boolean) => void
+  disabled: boolean
+  isLoading: boolean
+  formatFileSize: (bytes: number) => string
+  truncateMiddle: (text: string, start?: number, end?: number) => string
+  isDeleting: boolean
+}
+
+/**
+ * Single file selector component that shows the selected file with both
+ * a clear button (X) and a chevron to change the selection.
+ * Follows the same pattern as SelectorCombobox for consistency.
+ */
+function SingleFileSelector({
+  file,
+  options,
+  selectedValue,
+  inputValue,
+  onInputChange,
+  onClear,
+  onOpenChange,
+  disabled,
+  isLoading,
+  formatFileSize,
+  truncateMiddle,
+  isDeleting,
+}: SingleFileSelectorProps) {
+  const displayLabel = `${truncateMiddle(file.name, 20, 12)} (${formatFileSize(file.size)})`
+  const [localInputValue, setLocalInputValue] = useState(displayLabel)
+  const [isEditing, setIsEditing] = useState(false)
+
+  // Sync display label when file changes
+  useEffect(() => {
+    if (!isEditing) {
+      setLocalInputValue(displayLabel)
+    }
+  }, [displayLabel, isEditing])
+
+  return (
+    <div className='relative w-full'>
+      <Combobox
+        options={options}
+        value={localInputValue}
+        selectedValue={selectedValue}
+        onChange={(newValue) => {
+          // Check if user selected an option
+          const matched = options.find((opt) => opt.value === newValue || opt.label === newValue)
+          if (matched) {
+            setIsEditing(false)
+            setLocalInputValue(displayLabel)
+            onInputChange(matched.value)
+            return
+          }
+          // User is typing to search
+          setIsEditing(true)
+          setLocalInputValue(newValue)
+        }}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsEditing(false)
+            setLocalInputValue(displayLabel)
+          }
+          onOpenChange(open)
+        }}
+        placeholder={isLoading ? 'Loading files...' : 'Select or upload file'}
+        disabled={disabled || isDeleting}
+        editable={true}
+        filterOptions={isEditing}
+        isLoading={isLoading}
+        inputProps={{
+          className: 'pr-[60px]',
+        }}
+      />
+      <Button
+        type='button'
+        variant='ghost'
+        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 h-6 w-6 p-0'
+        onClick={onClear}
+        disabled={isDeleting}
+      >
+        {isDeleting ? (
+          <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+        ) : (
+          <X className='h-4 w-4 opacity-50 hover:opacity-100' />
+        )}
+      </Button>
+    </div>
+  )
+}
+
 interface UploadingFile {
   id: string
   name: string
@@ -500,6 +597,7 @@ export function FileUpload({
   const hasFiles = filesArray.length > 0
   const isUploading = uploadingFiles.length > 0
 
+  // Options for multiple file mode (filters out already selected files)
   const comboboxOptions = useMemo(
     () => [
       { label: 'Upload New File', value: '__upload_new__' },
@@ -516,10 +614,43 @@ export function FileUpload({
     [availableWorkspaceFiles, acceptedTypes]
   )
 
+  // Options for single file mode (includes all files, selected one will be highlighted)
+  const singleFileOptions = useMemo(
+    () => [
+      { label: 'Upload New File', value: '__upload_new__' },
+      ...workspaceFiles.map((file) => {
+        const isAccepted =
+          !acceptedTypes || acceptedTypes === '*' || isFileTypeAccepted(file.type, acceptedTypes)
+        return {
+          label: file.name,
+          value: file.id,
+          disabled: !isAccepted,
+        }
+      }),
+    ],
+    [workspaceFiles, acceptedTypes]
+  )
+
+  // Find the selected file's workspace ID for highlighting in single file mode
+  const selectedFileId = useMemo(() => {
+    if (!hasFiles || multiple) return ''
+    const currentFile = filesArray[0]
+    if (!currentFile) return ''
+    // Match by key or path
+    const matchedWorkspaceFile = workspaceFiles.find(
+      (wf) =>
+        wf.key === currentFile.key ||
+        wf.name === currentFile.name ||
+        currentFile.path?.includes(wf.key)
+    )
+    return matchedWorkspaceFile?.id || ''
+  }, [filesArray, workspaceFiles, hasFiles, multiple])
+
   const handleComboboxChange = (value: string) => {
     setInputValue(value)
 
-    const selectedFile = availableWorkspaceFiles.find((file) => file.id === value)
+    // Look in full workspaceFiles list (not filtered) to allow re-selecting same file in single mode
+    const selectedFile = workspaceFiles.find((file) => file.id === value)
     const isAcceptedType =
       selectedFile &&
       (!acceptedTypes ||
@@ -559,16 +690,17 @@ export function FileUpload({
       {/* Error message */}
       {uploadError && <div className='mb-2 text-red-600 text-sm'>{uploadError}</div>}
 
-      {/* File list with consistent spacing */}
-      {(hasFiles || isUploading) && (
+      {/* File list with consistent spacing - only show for multiple mode or when uploading */}
+      {((hasFiles && multiple) || isUploading) && (
         <div className={cn('space-y-2', multiple && 'mb-2')}>
-          {/* Only show files that aren't currently uploading */}
-          {filesArray.map((file) => {
-            const isCurrentlyUploading = uploadingFiles.some(
-              (uploadingFile) => uploadingFile.name === file.name
-            )
-            return !isCurrentlyUploading && renderFileItem(file)
-          })}
+          {/* Only show files that aren't currently uploading (for multiple mode only) */}
+          {multiple &&
+            filesArray.map((file) => {
+              const isCurrentlyUploading = uploadingFiles.some(
+                (uploadingFile) => uploadingFile.name === file.name
+              )
+              return !isCurrentlyUploading && renderFileItem(file)
+            })}
           {isUploading && (
             <>
               {uploadingFiles.map(renderUploadingItem)}
@@ -604,6 +736,26 @@ export function FileUpload({
         />
       )}
 
+      {/* Single file mode with file selected: show combobox-style UI with X and chevron */}
+      {hasFiles && !multiple && !isUploading && (
+        <SingleFileSelector
+          file={filesArray[0]}
+          options={singleFileOptions}
+          selectedValue={selectedFileId}
+          inputValue={inputValue}
+          onInputChange={handleComboboxChange}
+          onClear={(e) => handleRemoveFile(filesArray[0], e)}
+          onOpenChange={(open) => {
+            if (open) void loadWorkspaceFiles()
+          }}
+          disabled={disabled}
+          isLoading={loadingWorkspaceFiles}
+          formatFileSize={formatFileSize}
+          truncateMiddle={truncateMiddle}
+          isDeleting={deletingFiles[filesArray[0]?.path || '']}
+        />
+      )}
+
       {/* Show dropdown selector if no files and not uploading */}
       {!hasFiles && !isUploading && (
         <Combobox