fix(mcp): route object params to JSON editor, keep invalid drafts out of tool args

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import { Combobox, FieldDivider, Label, Slider, Switch } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
@@ -42,6 +42,27 @@ function requiresJsonValue(paramSchema: any): boolean {
   )
 }
 
+/**
+ * Stable signature of an entire tool schema, for detecting whether the effective
+ * param shape has changed (independent of object identity). Signs the whole schema
+ * rather than cherry-picking fields (e.g. just `properties`) so a refresh that only
+ * changes `required`, or any other schema-level field, isn't silently missed.
+ */
+function schemaSignature(schema: unknown): string {
+  return schema ? JSON.stringify(schema) : ''
+}
+
+/**
+ * True when text looks like an attempted JSON array/object literal (starts with `[`
+ * or `{`), as opposed to plain freeform text. Used to tell an in-progress, incomplete
+ * JSON literal (which must not persist until valid — see `requiresJsonValue`) apart
+ * from the comma-separated/plain-text shorthand array params also accept.
+ */
+function looksLikeJsonLiteral(text: string): boolean {
+  const trimmed = text.trim()
+  return trimmed.startsWith('[') || trimmed.startsWith('{')
+}
+
 interface McpDynamicArgsProps {
   blockId: string
   subBlockId: string
@@ -97,6 +118,58 @@ export function McpDynamicArgs({
   const selectedToolConfig = mcpTools.find((tool) => tool.id === selectedTool)
   const toolSchema = cachedSchema || selectedToolConfig?.inputSchema
 
+  /**
+   * Draft text for JSON-value params (object/array/non-primitive-enum) whose current
+   * edit isn't valid JSON yet, paired with a signature of the persisted value it was
+   * typed against. Keeping this out of toolArgs means the stored argument is always
+   * either the last valid parsed value or untouched — never malformed text that could
+   * reach tool execution. A draft is only displayed while its baseline still matches
+   * the live persisted value, so an external change to that value (undo/redo, a diff
+   * baseline switch, a collaborator's edit) can't be shadowed by stale draft text.
+   * Drafts also reset wholesale on either of two independent triggers:
+   *  - the selected tool or the cached `_toolSchema` snapshot changes (this pair
+   *    always drives `toolSchema` whenever a cached snapshot exists) — the live
+   *    schema tracker is also re-baselined to the new tool's current signature
+   *    here (even if still empty), so a tool switch never leaves the *previous*
+   *    tool's signature behind to be misread as a "refresh" once the new tool's
+   *    schema loads a moment later, or
+   *  - for the *same* tool, the live discovered schema's signature changes to a
+   *    different non-empty value than the last non-empty value actually observed
+   *    — a genuine re-discovery/refresh. Comparing against the last known
+   *    non-empty value (rather than merely the previous render's value) means a
+   *    schema that transiently disappears and reappears — e.g. `mcpTools`
+   *    refetching — still resets drafts if it comes back different, while a
+   *    plain empty → non-empty transition (the initial async load) does not,
+   *    since there is no prior non-empty value for this tool to compare against.
+   */
+  const [invalidJsonDrafts, setInvalidJsonDrafts] = useState<
+    Record<string, { text: string; baseline: string }>
+  >({})
+  const toolAndCachedSchemaKey = `${selectedTool ?? ''}|${schemaSignature(cachedSchema)}`
+  const liveSchemaSignature = schemaSignature(selectedToolConfig?.inputSchema)
+  const [prevToolAndCachedSchemaKey, setPrevToolAndCachedSchemaKey] =
+    useState(toolAndCachedSchemaKey)
+  const [lastNonEmptyLiveSchemaSignature, setLastNonEmptyLiveSchemaSignature] =
+    useState(liveSchemaSignature)
+  if (prevToolAndCachedSchemaKey !== toolAndCachedSchemaKey) {
+    setInvalidJsonDrafts({})
+    setPrevToolAndCachedSchemaKey(toolAndCachedSchemaKey)
+    setLastNonEmptyLiveSchemaSignature(liveSchemaSignature)
+  } else {
+    const nextLastNonEmptyLiveSchemaSignature =
+      liveSchemaSignature !== '' ? liveSchemaSignature : lastNonEmptyLiveSchemaSignature
+    if (nextLastNonEmptyLiveSchemaSignature !== lastNonEmptyLiveSchemaSignature) {
+      const isGenuineLiveRefresh =
+        liveSchemaSignature !== '' &&
+        lastNonEmptyLiveSchemaSignature !== '' &&
+        liveSchemaSignature !== lastNonEmptyLiveSchemaSignature
+      if (isGenuineLiveRefresh) {
+        setInvalidJsonDrafts({})
+      }
+      setLastNonEmptyLiveSchemaSignature(nextLastNonEmptyLiveSchemaSignature)
+    }
+  }
+
   const currentArgs = useCallback(() => {
     if (isPreview && previewValue) {
       if (typeof previewValue === 'string') {
@@ -158,7 +231,7 @@ export function McpDynamicArgs({
       if (paramSchema.maxLength && paramSchema.maxLength > 100) return 'long-input'
       return 'short-input'
     }
-    if (paramSchema.type === 'array') return 'long-input'
+    if (paramSchema.type === 'array' || paramSchema.type === 'object') return 'long-input'
     return 'short-input'
   }
 
@@ -270,8 +343,17 @@ export function McpDynamicArgs({
 
       case 'long-input': {
         const config = createParamConfig(paramName, paramSchema, 'long-input')
+        const needsJsonValue = requiresJsonValue(paramSchema)
+        const valueSignature = JSON.stringify(value ?? null)
+        const draft = invalidJsonDrafts[paramName]
+        const activeDraft =
+          needsJsonValue && draft && draft.baseline === valueSignature ? draft.text : undefined
         const displayValue =
-          typeof value === 'string' || value == null ? value || '' : JSON.stringify(value)
+          activeDraft !== undefined
+            ? activeDraft
+            : typeof value === 'string' || value == null
+              ? value || ''
+              : JSON.stringify(value)
         return (
           <LongInput
             key={`${paramName}-long`}
@@ -282,14 +364,34 @@ export function McpDynamicArgs({
             rows={4}
             value={displayValue}
             onChange={(newValue) => {
-              if (!requiresJsonValue(paramSchema)) {
+              if (!needsJsonValue) {
                 updateParameter(paramName, newValue)
                 return
               }
+              const clearDraft = () =>
+                setInvalidJsonDrafts((prev) => {
+                  if (!(paramName in prev)) return prev
+                  const { [paramName]: _removed, ...rest } = prev
+                  return rest
+                })
+              if (newValue === '') {
+                updateParameter(paramName, '')
+                clearDraft()
+                return
+              }
               try {
                 updateParameter(paramName, JSON.parse(newValue))
+                clearDraft()
               } catch {
-                updateParameter(paramName, newValue)
+                if (paramSchema.type === 'array' && !looksLikeJsonLiteral(newValue)) {
+                  updateParameter(paramName, newValue)
+                  clearDraft()
+                  return
+                }
+                setInvalidJsonDrafts((prev) => ({
+                  ...prev,
+                  [paramName]: { text: newValue, baseline: valueSignature },
+                }))
               }
             }}
             isPreview={isPreview}