From a2c794a77edea9307896e83e2e08bdbbb16fbd4f Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 19 Jan 2026 15:45:30 -0800
Subject: [PATCH] added ability to edit parameter and workflow descriptions

---
 apps/sim/app/api/v1/workflows/[id]/route.ts   |  50 +---
 .../deploy-modal/components/api/api.tsx       |  33 ---
 .../general/components/api-info-modal.tsx     | 262 ++++++++++++++++++
 .../components/deploy-modal/deploy-modal.tsx  |  21 +-
 apps/sim/lib/workflows/input-format.ts        |   7 +-
 5 files changed, 289 insertions(+), 84 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx

diff --git a/apps/sim/app/api/v1/workflows/[id]/route.ts b/apps/sim/app/api/v1/workflows/[id]/route.ts
index 8d6c39cee..c836e936b 100644
--- a/apps/sim/app/api/v1/workflows/[id]/route.ts
+++ b/apps/sim/app/api/v1/workflows/[id]/route.ts
@@ -3,7 +3,7 @@ import { permissions, workflow, workflowBlocks } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { and, eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
-import { isValidStartBlockType } from '@/lib/workflows/triggers/start-block-types'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { createApiResponse, getUserLimits } from '@/app/api/v1/logs/meta'
 import { checkRateLimit, createRateLimitResponse } from '@/app/api/v1/middleware'
 
@@ -11,46 +11,6 @@ const logger = createLogger('V1WorkflowDetailsAPI')
 
 export const revalidate = 0
 
-interface InputField {
-  name: string
-  type: string
-  description?: string
-}
-
-/**
- * Extracts input fields from workflow blocks.
- * Finds the starter/trigger block and extracts its inputFormat configuration.
- */
-function extractInputFields(blocks: Array<{ type: string; subBlocks: unknown }>): InputField[] {
-  const starterBlock = blocks.find((block) => isValidStartBlockType(block.type))
-
-  if (!starterBlock) {
-    return []
-  }
-
-  const subBlocks = starterBlock.subBlocks as Record<string, { value?: unknown }> | undefined
-  const inputFormat = subBlocks?.inputFormat?.value
-
-  if (!Array.isArray(inputFormat)) {
-    return []
-  }
-
-  return inputFormat
-    .filter(
-      (field: unknown): field is { name: string; type?: string; description?: string } =>
-        typeof field === 'object' &&
-        field !== null &&
-        'name' in field &&
-        typeof (field as { name: unknown }).name === 'string' &&
-        (field as { name: string }).name.trim() !== ''
-    )
-    .map((field) => ({
-      name: field.name,
-      type: field.type || 'string',
-      ...(field.description && { description: field.description }),
-    }))
-}
-
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const requestId = crypto.randomUUID().slice(0, 8)
 
@@ -98,15 +58,19 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
       return NextResponse.json({ error: 'Workflow not found' }, { status: 404 })
     }
 
-    const blocks = await db
+    const blockRows = await db
       .select({
+        id: workflowBlocks.id,
         type: workflowBlocks.type,
         subBlocks: workflowBlocks.subBlocks,
       })
       .from(workflowBlocks)
       .where(eq(workflowBlocks.workflowId, id))
 
-    const inputs = extractInputFields(blocks)
+    const blocksRecord = Object.fromEntries(
+      blockRows.map((block) => [block.id, { type: block.type, subBlocks: block.subBlocks }])
+    )
+    const inputs = extractInputFieldsFromBlocks(blocksRecord)
 
     const response = {
       id: workflowData.id,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index 97ddbbd77..eff1cff3a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -452,39 +452,6 @@ console.log(limits);`
         </div>
       )}
 
-      {/* <div>
-        <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
-            URL
-          </Label>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={() => handleCopy('endpoint', info.endpoint)}
-                aria-label='Copy endpoint'
-                className='!p-1.5 -my-1.5'
-              >
-                {copied.endpoint ? (
-                  <Check className='h-3 w-3' />
-                ) : (
-                  <Clipboard className='h-3 w-3' />
-                )}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>
-              <span>{copied.endpoint ? 'Copied' : 'Copy'}</span>
-            </Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-        <Code.Viewer
-          code={info.endpoint}
-          language='javascript'
-          wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
-        />
-      </div> */}
-
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
           <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
new file mode 100644
index 000000000..6935d24a4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -0,0 +1,262 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Badge,
+  Button,
+  Input,
+  Label,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Textarea,
+} from '@/components/emcn'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
+import { isValidStartBlockType } from '@/lib/workflows/triggers/start-block-types'
+import type { InputFormatField } from '@/lib/workflows/types'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+
+type NormalizedField = InputFormatField & { name: string }
+
+interface ApiInfoModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  workflowId: string
+}
+
+export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalProps) {
+  const blocks = useWorkflowStore((state) => state.blocks)
+  const setValue = useSubBlockStore((state) => state.setValue)
+  const subBlockValues = useSubBlockStore((state) =>
+    workflowId ? (state.workflowValues[workflowId] ?? {}) : {}
+  )
+
+  const workflowMetadata = useWorkflowRegistry((state) =>
+    workflowId ? state.workflows[workflowId] : undefined
+  )
+  const updateWorkflow = useWorkflowRegistry((state) => state.updateWorkflow)
+
+  const [description, setDescription] = useState('')
+  const [paramDescriptions, setParamDescriptions] = useState<Record<string, string>>({})
+  const [isSaving, setIsSaving] = useState(false)
+  const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
+
+  const initialDescriptionRef = useRef('')
+  const initialParamDescriptionsRef = useRef<Record<string, string>>({})
+
+  const starterBlockId = useMemo(() => {
+    for (const [blockId, block] of Object.entries(blocks)) {
+      if (!block || typeof block !== 'object') continue
+      const blockType = (block as { type?: string }).type
+      if (blockType && isValidStartBlockType(blockType)) {
+        return blockId
+      }
+    }
+    return null
+  }, [blocks])
+
+  const inputFormat = useMemo((): NormalizedField[] => {
+    if (!starterBlockId) return []
+
+    const storeValue = subBlockValues[starterBlockId]?.inputFormat
+    const normalized = normalizeInputFormatValue(storeValue) as NormalizedField[]
+    if (normalized.length > 0) return normalized
+
+    const startBlock = blocks[starterBlockId]
+    const blockValue = startBlock?.subBlocks?.inputFormat?.value
+    return normalizeInputFormatValue(blockValue) as NormalizedField[]
+  }, [starterBlockId, subBlockValues, blocks])
+
+  useEffect(() => {
+    if (open) {
+      const normalizedDesc = workflowMetadata?.description?.toLowerCase().trim()
+      const isDefaultDescription =
+        !workflowMetadata?.description ||
+        workflowMetadata.description === workflowMetadata.name ||
+        normalizedDesc === 'new workflow' ||
+        normalizedDesc === 'your first workflow - start building here!'
+
+      const initialDescription = isDefaultDescription ? '' : workflowMetadata?.description || ''
+      setDescription(initialDescription)
+      initialDescriptionRef.current = initialDescription
+
+      const descriptions: Record<string, string> = {}
+      for (const field of inputFormat) {
+        if (field.description) {
+          descriptions[field.name] = field.description
+        }
+      }
+      setParamDescriptions(descriptions)
+      initialParamDescriptionsRef.current = { ...descriptions }
+    }
+  }, [open, workflowMetadata, inputFormat])
+
+  const hasChanges = useMemo(() => {
+    if (description !== initialDescriptionRef.current) return true
+
+    const currentKeys = Object.keys(paramDescriptions)
+    const initialKeys = Object.keys(initialParamDescriptionsRef.current)
+
+    if (currentKeys.length !== initialKeys.length) return true
+
+    for (const key of currentKeys) {
+      const currentValue = paramDescriptions[key] || ''
+      const initialValue = initialParamDescriptionsRef.current[key] || ''
+      if (currentValue !== initialValue) return true
+    }
+
+    return false
+  }, [description, paramDescriptions])
+
+  const handleParamDescriptionChange = (fieldName: string, value: string) => {
+    setParamDescriptions((prev) => ({
+      ...prev,
+      [fieldName]: value,
+    }))
+  }
+
+  const handleCloseAttempt = useCallback(() => {
+    if (hasChanges && !isSaving) {
+      setShowUnsavedChangesAlert(true)
+    } else {
+      onOpenChange(false)
+    }
+  }, [hasChanges, isSaving, onOpenChange])
+
+  const handleDiscardChanges = useCallback(() => {
+    setShowUnsavedChangesAlert(false)
+    setDescription(initialDescriptionRef.current)
+    setParamDescriptions({ ...initialParamDescriptionsRef.current })
+    onOpenChange(false)
+  }, [onOpenChange])
+
+  const handleSave = useCallback(async () => {
+    if (!workflowId) return
+
+    setIsSaving(true)
+    try {
+      if (description.trim() !== (workflowMetadata?.description || '')) {
+        updateWorkflow(workflowId, { description: description.trim() || 'New workflow' })
+      }
+
+      if (starterBlockId) {
+        const currentValue = subBlockValues[starterBlockId]?.inputFormat || inputFormat
+        const updatedValue = (currentValue as NormalizedField[]).map((field) => ({
+          ...field,
+          description: paramDescriptions[field.name]?.trim() || undefined,
+        }))
+        setValue(starterBlockId, 'inputFormat', updatedValue)
+      }
+
+      onOpenChange(false)
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    workflowId,
+    description,
+    workflowMetadata,
+    updateWorkflow,
+    starterBlockId,
+    subBlockValues,
+    inputFormat,
+    paramDescriptions,
+    setValue,
+    onOpenChange,
+  ])
+
+  return (
+    <>
+      <Modal open={open} onOpenChange={(openState) => !openState && handleCloseAttempt()}>
+        <ModalContent className='max-w-[480px]'>
+          <ModalHeader>
+            <span>Edit API Info</span>
+          </ModalHeader>
+          <ModalBody className='space-y-[12px]'>
+            <div>
+              <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                Description
+              </Label>
+              <Textarea
+                placeholder='Describe what this workflow API does...'
+                className='min-h-[80px] resize-none'
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+            </div>
+
+            {inputFormat.length > 0 && (
+              <div>
+                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                  Parameters ({inputFormat.length})
+                </Label>
+                <div className='flex flex-col gap-[8px]'>
+                  {inputFormat.map((field) => (
+                    <div
+                      key={field.name}
+                      className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                    >
+                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
+                        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                            {field.name}
+                          </span>
+                          <Badge size='sm'>{field.type || 'string'}</Badge>
+                        </div>
+                      </div>
+                      <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+                        <div className='flex flex-col gap-[6px]'>
+                          <Label className='text-[13px]'>Description</Label>
+                          <Input
+                            value={paramDescriptions[field.name] || ''}
+                            onChange={(e) =>
+                              handleParamDescriptionChange(field.name, e.target.value)
+                            }
+                            placeholder={`Enter description for ${field.name}`}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={handleCloseAttempt} disabled={isSaving}>
+              Cancel
+            </Button>
+            <Button variant='tertiary' onClick={handleSave} disabled={isSaving || !hasChanges}>
+              {isSaving ? 'Saving...' : 'Save'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showUnsavedChangesAlert} onOpenChange={setShowUnsavedChangesAlert}>
+        <ModalContent className='max-w-[400px]'>
+          <ModalHeader>
+            <span>Unsaved Changes</span>
+          </ModalHeader>
+          <ModalBody>
+            <p className='text-[14px] text-[var(--text-secondary)]'>
+              You have unsaved changes. Are you sure you want to discard them?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowUnsavedChangesAlert(false)}>
+              Keep Editing
+            </Button>
+            <Button variant='destructive' onClick={handleDiscardChanges}>
+              Discard Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index d03cc7210..fdaaefb54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -43,6 +43,7 @@ import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { A2aDeploy } from './components/a2a/a2a'
 import { ApiDeploy } from './components/api/api'
 import { ChatDeploy, type ExistingChat } from './components/chat/chat'
+import { ApiInfoModal } from './components/general/components/api-info-modal'
 import { GeneralDeploy } from './components/general/general'
 import { McpDeploy } from './components/mcp/mcp'
 import { TemplateDeploy } from './components/template/template'
@@ -110,6 +111,7 @@ export function DeployModal({
   const [chatSuccess, setChatSuccess] = useState(false)
 
   const [isCreateKeyModalOpen, setIsCreateKeyModalOpen] = useState(false)
+  const [isApiInfoModalOpen, setIsApiInfoModalOpen] = useState(false)
   const userPermissions = useUserPermissionsContext()
   const canManageWorkspaceKeys = userPermissions.canAdmin
   const { config: permissionConfig } = usePermissionConfig()
@@ -389,11 +391,6 @@ export function DeployModal({
     form?.requestSubmit()
   }, [])
 
-  const handleA2aFormSubmit = useCallback(() => {
-    const form = document.getElementById('a2a-deploy-form') as HTMLFormElement
-    form?.requestSubmit()
-  }, [])
-
   const handleA2aPublish = useCallback(() => {
     const form = document.getElementById('a2a-deploy-form')
     const publishTrigger = form?.querySelector('[data-a2a-publish-trigger]') as HTMLButtonElement
@@ -594,7 +591,11 @@ export function DeployModal({
           )}
           {activeTab === 'api' && (
             <ModalFooter className='items-center justify-between'>
-              <div />
+              <div>
+                <Button variant='default' onClick={() => setIsApiInfoModalOpen(true)}>
+                  Edit API Info
+                </Button>
+              </div>
               <div className='flex items-center gap-2'>
                 <Button
                   variant='tertiary'
@@ -880,6 +881,14 @@ export function DeployModal({
         canManageWorkspaceKeys={canManageWorkspaceKeys}
         defaultKeyType={defaultKeyType}
       />
+
+      {workflowId && (
+        <ApiInfoModal
+          open={isApiInfoModalOpen}
+          onOpenChange={setIsApiInfoModalOpen}
+          workflowId={workflowId}
+        />
+      )}
     </>
   )
 }
diff --git a/apps/sim/lib/workflows/input-format.ts b/apps/sim/lib/workflows/input-format.ts
index d4c8b242f..4c77c1d41 100644
--- a/apps/sim/lib/workflows/input-format.ts
+++ b/apps/sim/lib/workflows/input-format.ts
@@ -7,6 +7,7 @@ import type { InputFormatField } from '@/lib/workflows/types'
 export interface WorkflowInputField {
   name: string
   type: string
+  description?: string
 }
 
 /**
@@ -37,7 +38,7 @@ export function extractInputFieldsFromBlocks(
   if (Array.isArray(inputFormat)) {
     return inputFormat
       .filter(
-        (field: unknown): field is { name: string; type?: string } =>
+        (field: unknown): field is { name: string; type?: string; description?: string } =>
           typeof field === 'object' &&
           field !== null &&
           'name' in field &&
@@ -47,6 +48,7 @@ export function extractInputFieldsFromBlocks(
       .map((field) => ({
         name: field.name,
         type: field.type || 'string',
+        ...(field.description && { description: field.description }),
       }))
   }
 
@@ -57,7 +59,7 @@ export function extractInputFieldsFromBlocks(
   if (Array.isArray(legacyFormat)) {
     return legacyFormat
       .filter(
-        (field: unknown): field is { name: string; type?: string } =>
+        (field: unknown): field is { name: string; type?: string; description?: string } =>
           typeof field === 'object' &&
           field !== null &&
           'name' in field &&
@@ -67,6 +69,7 @@ export function extractInputFieldsFromBlocks(
       .map((field) => ({
         name: field.name,
         type: field.type || 'string',
+        ...(field.description && { description: field.description }),
       }))
   }