From 84691fc8734b97fe9f56240200124ca04d571e40 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Mon, 19 Jan 2026 23:52:07 -0800
Subject: [PATCH] improvement(modal): fixed popover issue in custom tools
 modal, removed the ability to update if no changes made (#2897)

* improvement(modal): fixed popover issue in custom tools modal, removed the ability to update if no changes made

* improvement(modal): fixed popover issue in custom tools modal, removed the ability to update if no changes made

* popover fixes, color picker keyboard nav, code simplification

* color standardization

* fix color picker

* set discard alert state when closing modal
---
 .../base-tags-modal/base-tags-modal.tsx       |   4 +-
 .../components/general/general.tsx            |   2 +-
 .../components/deploy-modal/deploy-modal.tsx  |   5 +-
 .../components/code-editor/code-editor.tsx    |   6 +-
 .../custom-tool-modal/custom-tool-modal.tsx   | 232 ++++++++----------
 .../access-control/access-control.tsx         |   2 +-
 .../create-api-key-modal.tsx                  |   4 +-
 .../settings-modal/components/byok/byok.tsx   |   4 +-
 .../components/copilot/copilot.tsx            |   4 +-
 .../components/environment/environment.tsx    |   2 +-
 .../components/general/general.tsx            |   2 +-
 .../components/team-seats/team-seats.tsx      |   2 +-
 .../components/context-menu/context-menu.tsx  |  18 +-
 .../workspace-header/workspace-header.tsx     |   1 +
 .../emcn/components/popover/popover.tsx       |   7 +
 15 files changed, 142 insertions(+), 153 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 80dafafcf..282a85622 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -462,7 +462,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
           <ModalBody>
             <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
+              <p className='text-[12px] text-[var(--text-secondary)]'>
                 {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
                 definition.
@@ -470,7 +470,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
               {selectedTagUsage?.documentCount === 0 ? (
                 <div className='rounded-[6px] border p-[16px] text-center'>
-                  <p className='text-[12px] text-[var(--text-tertiary)]'>
+                  <p className='text-[12px] text-[var(--text-secondary)]'>
                     This tag definition is not being used by any documents. You can safely delete it
                     to free up the tag slot.
                   </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index 218e032f1..28e66c2c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -283,7 +283,7 @@ export function GeneralDeploy({
         <ModalContent size='sm'>
           <ModalHeader>Promote to live</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to promote{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {versionToPromoteInfo?.name || `v${versionToPromote}`}
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 fdaaefb54..09138be70 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
@@ -591,12 +591,11 @@ export function DeployModal({
           )}
           {activeTab === 'api' && (
             <ModalFooter className='items-center justify-between'>
-              <div>
+              <div />
+              <div className='flex items-center gap-2'>
                 <Button variant='default' onClick={() => setIsApiInfoModalOpen(true)}>
                   Edit API Info
                 </Button>
-              </div>
-              <div className='flex items-center gap-2'>
                 <Button
                   variant='tertiary'
                   onClick={() => setIsCreateKeyModalOpen(true)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index b610c7f9f..73b9603e2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -42,7 +42,7 @@ export function CodeEditor({
   placeholder = '',
   className = '',
   gutterClassName = '',
-  minHeight = '360px',
+  minHeight,
   highlightVariables = true,
   onKeyDown,
   disabled = false,
@@ -186,7 +186,7 @@ export function CodeEditor({
   }
 
   return (
-    <Code.Container className={className} style={{ minHeight }}>
+    <Code.Container className={className} style={minHeight ? { minHeight } : undefined}>
       {showWandButton && onWandClick && (
         <Button
           variant='ghost'
@@ -220,7 +220,7 @@ export function CodeEditor({
           disabled={disabled}
           {...getCodeEditorProps({ disabled })}
           className={cn(getCodeEditorProps({ disabled }).className, 'h-full')}
-          style={{ minHeight }}
+          style={minHeight ? { minHeight } : undefined}
           textareaClassName={cn(
             getCodeEditorProps({ disabled }).textareaClassName,
             '!block !h-full !min-h-full'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index 59518e330..85ca3447c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -87,15 +87,16 @@ export function CustomToolModal({
   const [codeError, setCodeError] = useState<string | null>(null)
   const [isEditing, setIsEditing] = useState(false)
   const [toolId, setToolId] = useState<string | undefined>(undefined)
+  const [initialJsonSchema, setInitialJsonSchema] = useState('')
+  const [initialFunctionCode, setInitialFunctionCode] = useState('')
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [showDiscardAlert, setShowDiscardAlert] = useState(false)
   const [isSchemaPromptActive, setIsSchemaPromptActive] = useState(false)
   const [schemaPromptInput, setSchemaPromptInput] = useState('')
-  const [schemaPromptSummary, setSchemaPromptSummary] = useState<string | null>(null)
   const schemaPromptInputRef = useRef<HTMLInputElement | null>(null)
 
   const [isCodePromptActive, setIsCodePromptActive] = useState(false)
   const [codePromptInput, setCodePromptInput] = useState('')
-  const [codePromptSummary, setCodePromptSummary] = useState<string | null>(null)
   const codePromptInputRef = useRef<HTMLInputElement | null>(null)
 
   const schemaGeneration = useWand({
@@ -174,6 +175,9 @@ Example 2:
       generationType: 'custom-tool-schema',
     },
     currentValue: jsonSchema,
+    onStreamStart: () => {
+      setJsonSchema('')
+    },
     onGeneratedContent: (content) => {
       setJsonSchema(content)
       setSchemaError(null)
@@ -237,6 +241,9 @@ try {
       generationType: 'javascript-function-body',
     },
     currentValue: functionCode,
+    onStreamStart: () => {
+      setFunctionCode('')
+    },
     onGeneratedContent: (content) => {
       handleFunctionCodeChange(content)
       setCodeError(null)
@@ -272,12 +279,15 @@ try {
 
     if (initialValues) {
       try {
-        setJsonSchema(
+        const schemaValue =
           typeof initialValues.schema === 'string'
             ? initialValues.schema
             : JSON.stringify(initialValues.schema, null, 2)
-        )
-        setFunctionCode(initialValues.code || '')
+        const codeValue = initialValues.code || ''
+        setJsonSchema(schemaValue)
+        setFunctionCode(codeValue)
+        setInitialJsonSchema(schemaValue)
+        setInitialFunctionCode(codeValue)
         setIsEditing(true)
         setToolId(initialValues.id)
       } catch (error) {
@@ -304,17 +314,18 @@ try {
   const resetForm = () => {
     setJsonSchema('')
     setFunctionCode('')
+    setInitialJsonSchema('')
+    setInitialFunctionCode('')
     setSchemaError(null)
     setCodeError(null)
     setActiveSection('schema')
     setIsEditing(false)
     setToolId(undefined)
-    setSchemaPromptSummary(null)
-    setCodePromptSummary(null)
     setIsSchemaPromptActive(false)
     setIsCodePromptActive(false)
     setSchemaPromptInput('')
     setCodePromptInput('')
+    setShowDiscardAlert(false)
     schemaGeneration.closePrompt()
     schemaGeneration.hidePromptInline()
     codeGeneration.closePrompt()
@@ -328,31 +339,37 @@ try {
     onOpenChange(false)
   }
 
-  const validateJsonSchema = (schema: string): boolean => {
-    if (!schema) return false
+  const validateSchema = (schema: string): { isValid: boolean; error: string | null } => {
+    if (!schema) return { isValid: false, error: null }
 
     try {
       const parsed = JSON.parse(schema)
 
       if (!parsed.type || parsed.type !== 'function') {
-        return false
+        return { isValid: false, error: 'Missing "type": "function"' }
       }
-
       if (!parsed.function || !parsed.function.name) {
-        return false
+        return { isValid: false, error: 'Missing function.name field' }
       }
-
       if (!parsed.function.parameters) {
-        return false
+        return { isValid: false, error: 'Missing function.parameters object' }
+      }
+      if (!parsed.function.parameters.type) {
+        return { isValid: false, error: 'Missing parameters.type field' }
+      }
+      if (parsed.function.parameters.properties === undefined) {
+        return { isValid: false, error: 'Missing parameters.properties field' }
+      }
+      if (
+        typeof parsed.function.parameters.properties !== 'object' ||
+        parsed.function.parameters.properties === null
+      ) {
+        return { isValid: false, error: 'parameters.properties must be an object' }
       }
 
-      if (!parsed.function.parameters.type || parsed.function.parameters.properties === undefined) {
-        return false
-      }
-
-      return true
-    } catch (_error) {
-      return false
+      return { isValid: true, error: null }
+    } catch {
+      return { isValid: false, error: 'Invalid JSON format' }
     }
   }
 
@@ -374,7 +391,32 @@ try {
     }
   }, [jsonSchema])
 
-  const isSchemaValid = useMemo(() => validateJsonSchema(jsonSchema), [jsonSchema])
+  const isSchemaValid = useMemo(() => validateSchema(jsonSchema).isValid, [jsonSchema])
+
+  const hasChanges = useMemo(() => {
+    if (!isEditing) return true
+    return jsonSchema !== initialJsonSchema || functionCode !== initialFunctionCode
+  }, [isEditing, jsonSchema, initialJsonSchema, functionCode, initialFunctionCode])
+
+  const hasUnsavedChanges = useMemo(() => {
+    if (isEditing) {
+      return jsonSchema !== initialJsonSchema || functionCode !== initialFunctionCode
+    }
+    return jsonSchema.trim().length > 0 || functionCode.trim().length > 0
+  }, [isEditing, jsonSchema, initialJsonSchema, functionCode, initialFunctionCode])
+
+  const handleCloseAttempt = () => {
+    if (hasUnsavedChanges && !schemaGeneration.isStreaming && !codeGeneration.isStreaming) {
+      setShowDiscardAlert(true)
+    } else {
+      handleClose()
+    }
+  }
+
+  const handleConfirmDiscard = () => {
+    setShowDiscardAlert(false)
+    handleClose()
+  }
 
   const handleSave = async () => {
     try {
@@ -384,43 +426,9 @@ try {
         return
       }
 
-      const parsed = JSON.parse(jsonSchema)
-
-      if (!parsed.type || parsed.type !== 'function') {
-        setSchemaError('Schema must have a "type" field set to "function"')
-        setActiveSection('schema')
-        return
-      }
-
-      if (!parsed.function || !parsed.function.name) {
-        setSchemaError('Schema must have a "function" object with a "name" field')
-        setActiveSection('schema')
-        return
-      }
-
-      if (!parsed.function.parameters) {
-        setSchemaError('Missing function.parameters object')
-        setActiveSection('schema')
-        return
-      }
-
-      if (!parsed.function.parameters.type) {
-        setSchemaError('Missing parameters.type field')
-        setActiveSection('schema')
-        return
-      }
-
-      if (parsed.function.parameters.properties === undefined) {
-        setSchemaError('Missing parameters.properties field')
-        setActiveSection('schema')
-        return
-      }
-
-      if (
-        typeof parsed.function.parameters.properties !== 'object' ||
-        parsed.function.parameters.properties === null
-      ) {
-        setSchemaError('parameters.properties must be an object')
+      const { isValid, error } = validateSchema(jsonSchema)
+      if (!isValid) {
+        setSchemaError(error)
         setActiveSection('schema')
         return
       }
@@ -483,17 +491,9 @@ try {
       }
 
       onSave(customTool)
-
-      setSchemaPromptSummary(null)
-      setCodePromptSummary(null)
-
       handleClose()
     } catch (error) {
       logger.error('Error saving custom tool:', { error })
-
-      setSchemaPromptSummary(null)
-      setCodePromptSummary(null)
-
       const errorMessage = error instanceof Error ? error.message : 'Failed to save custom tool'
 
       if (errorMessage.includes('Cannot change function name')) {
@@ -512,46 +512,8 @@ try {
     setJsonSchema(value)
 
     if (value.trim()) {
-      try {
-        const parsed = JSON.parse(value)
-
-        if (!parsed.type || parsed.type !== 'function') {
-          setSchemaError('Missing "type": "function"')
-          return
-        }
-
-        if (!parsed.function || !parsed.function.name) {
-          setSchemaError('Missing function.name field')
-          return
-        }
-
-        if (!parsed.function.parameters) {
-          setSchemaError('Missing function.parameters object')
-          return
-        }
-
-        if (!parsed.function.parameters.type) {
-          setSchemaError('Missing parameters.type field')
-          return
-        }
-
-        if (parsed.function.parameters.properties === undefined) {
-          setSchemaError('Missing parameters.properties field')
-          return
-        }
-
-        if (
-          typeof parsed.function.parameters.properties !== 'object' ||
-          parsed.function.parameters.properties === null
-        ) {
-          setSchemaError('parameters.properties must be an object')
-          return
-        }
-
-        setSchemaError(null)
-      } catch {
-        setSchemaError('Invalid JSON format')
-      }
+      const { error } = validateSchema(value)
+      setSchemaError(error)
     } else {
       setSchemaError(null)
     }
@@ -709,12 +671,12 @@ try {
           e.preventDefault()
           e.stopPropagation()
           setSchemaParamSelectedIndex((prev) => Math.min(prev + 1, schemaParameters.length - 1))
-          break
+          return
         case 'ArrowUp':
           e.preventDefault()
           e.stopPropagation()
           setSchemaParamSelectedIndex((prev) => Math.max(prev - 1, 0))
-          break
+          return
         case 'Enter':
           e.preventDefault()
           e.stopPropagation()
@@ -722,14 +684,17 @@ try {
             const selectedParam = schemaParameters[schemaParamSelectedIndex]
             handleSchemaParamSelect(selectedParam.name)
           }
-          break
+          return
         case 'Escape':
           e.preventDefault()
           e.stopPropagation()
           setShowSchemaParams(false)
-          break
+          return
+        case ' ':
+        case 'Tab':
+          setShowSchemaParams(false)
+          return
       }
-      return
     }
 
     if (showEnvVars || showTags) {
@@ -743,7 +708,7 @@ try {
   const handleSchemaWandClick = () => {
     if (schemaGeneration.isLoading || schemaGeneration.isStreaming) return
     setIsSchemaPromptActive(true)
-    setSchemaPromptInput(schemaPromptSummary ?? '')
+    setSchemaPromptInput('')
     setTimeout(() => {
       schemaPromptInputRef.current?.focus()
     }, 0)
@@ -762,7 +727,6 @@ try {
   const handleSchemaPromptSubmit = () => {
     const trimmedPrompt = schemaPromptInput.trim()
     if (!trimmedPrompt || schemaGeneration.isLoading || schemaGeneration.isStreaming) return
-    setSchemaPromptSummary(trimmedPrompt)
     schemaGeneration.generateStream({ prompt: trimmedPrompt })
     setSchemaPromptInput('')
     setIsSchemaPromptActive(false)
@@ -782,7 +746,7 @@ try {
   const handleCodeWandClick = () => {
     if (codeGeneration.isLoading || codeGeneration.isStreaming) return
     setIsCodePromptActive(true)
-    setCodePromptInput(codePromptSummary ?? '')
+    setCodePromptInput('')
     setTimeout(() => {
       codePromptInputRef.current?.focus()
     }, 0)
@@ -801,7 +765,6 @@ try {
   const handleCodePromptSubmit = () => {
     const trimmedPrompt = codePromptInput.trim()
     if (!trimmedPrompt || codeGeneration.isLoading || codeGeneration.isStreaming) return
-    setCodePromptSummary(trimmedPrompt)
     codeGeneration.generateStream({ prompt: trimmedPrompt })
     setCodePromptInput('')
     setIsCodePromptActive(false)
@@ -846,19 +809,8 @@ try {
 
   return (
     <>
-      <Modal open={open} onOpenChange={handleClose}>
-        <ModalContent
-          size='xl'
-          onKeyDown={(e) => {
-            if (e.key === 'Escape' && (showEnvVars || showTags || showSchemaParams)) {
-              e.preventDefault()
-              e.stopPropagation()
-              setShowEnvVars(false)
-              setShowTags(false)
-              setShowSchemaParams(false)
-            }
-          }}
-        >
+      <Modal open={open} onOpenChange={handleCloseAttempt}>
+        <ModalContent size='xl'>
           <ModalHeader>{isEditing ? 'Edit Agent Tool' : 'Create Agent Tool'}</ModalHeader>
 
           <ModalTabs
@@ -1211,7 +1163,7 @@ try {
                 <Button
                   variant='tertiary'
                   onClick={handleSave}
-                  disabled={!isSchemaValid || !!schemaError}
+                  disabled={!isSchemaValid || !!schemaError || !hasChanges}
                 >
                   {isEditing ? 'Update Tool' : 'Save Tool'}
                 </Button>
@@ -1248,6 +1200,26 @@ try {
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      <Modal open={showDiscardAlert} onOpenChange={setShowDiscardAlert}>
+        <ModalContent size='sm'>
+          <ModalHeader>Unsaved Changes</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
+              You have unsaved changes to this tool. Are you sure you want to discard your changes
+              and close the editor?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDiscardAlert(false)}>
+              Keep Editing
+            </Button>
+            <Button variant='destructive' onClick={handleConfirmDiscard}>
+              Discard Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
index 067db3cc9..9b3fd8a02 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx
@@ -1072,7 +1072,7 @@ export function AccessControl() {
           <ModalContent size='sm'>
             <ModalHeader>Unsaved Changes</ModalHeader>
             <ModalBody>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
+              <p className='text-[12px] text-[var(--text-secondary)]'>
                 You have unsaved changes. Do you want to save them before closing?
               </p>
             </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 14fec1b65..439280bf2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -115,7 +115,7 @@ export function CreateApiKeyModal({
         <ModalContent size='sm'>
           <ModalHeader>Create new API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               {keyType === 'workspace'
                 ? "This key will have access to all workflows in this workspace. Make sure to copy it after creation as you won't be able to see it again."
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
@@ -218,7 +218,7 @@ export function CreateApiKeyModal({
         <ModalContent size='sm'>
           <ModalHeader>Your API key has been created</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This is the only time you will see your API key.{' '}
               <span className='font-semibold text-[var(--text-primary)]'>
                 Copy it now and store it securely.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
index 449c3bb44..b8304402b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
@@ -222,7 +222,7 @@ export function BYOK() {
             )}
           </ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This key will be used for all {PROVIDERS.find((p) => p.id === editingProvider)?.name}{' '}
               requests in this workspace. Your key is encrypted and stored securely.
             </p>
@@ -308,7 +308,7 @@ export function BYOK() {
         <ModalContent size='sm'>
           <ModalHeader>Delete API Key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete the{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {PROVIDERS.find((p) => p.id === deleteConfirmProvider)?.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
index e2d85bca6..5d160762b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
@@ -214,7 +214,7 @@ export function Copilot() {
         <ModalContent size='sm'>
           <ModalHeader>Create new API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This key will allow access to Copilot features. Make sure to copy it after creation as
               you won't be able to see it again.
             </p>
@@ -276,7 +276,7 @@ export function Copilot() {
         <ModalContent size='sm'>
           <ModalHeader>Your API key has been created</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This is the only time you will see your API key.{' '}
               <span className='font-semibold text-[var(--text-primary)]'>
                 Copy it now and store it securely.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
index 7f22ca396..026d646ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
@@ -824,7 +824,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
         <ModalContent size='sm'>
           <ModalHeader>Unsaved Changes</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               {hasConflicts || hasInvalidKeys
                 ? `You have unsaved changes, but ${hasConflicts ? 'conflicts must be resolved' : 'invalid variable names must be fixed'} before saving. You can discard your changes to close the modal.`
                 : 'You have unsaved changes. Do you want to save them before closing?'}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
index 6fbda0207..7ab1d0737 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
@@ -603,7 +603,7 @@ export function General({ onOpenChange }: GeneralProps) {
         <ModalContent size='sm'>
           <ModalHeader>Reset Password</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               A password reset link will be sent to{' '}
               <span className='font-medium text-[var(--text-primary)]'>{profile?.email}</span>.
               Click the link in the email to create a new password.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
index 82418420e..af4a52f9d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
@@ -64,7 +64,7 @@ export function TeamSeats({
       <ModalContent size='sm'>
         <ModalHeader>{title}</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-muted)]'>{description}</p>
+          <p className='text-[12px] text-[var(--text-secondary)]'>{description}</p>
 
           <div className='mt-[16px] flex flex-col gap-[4px]'>
             <Label htmlFor='seats' className='text-[12px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index b03138de5..efb3e7eb0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -25,9 +25,11 @@ const GRID_COLUMNS = 6
 function ColorGrid({
   hexInput,
   setHexInput,
+  onColorChange,
 }: {
   hexInput: string
   setHexInput: (color: string) => void
+  onColorChange?: (color: string) => void
 }) {
   const { isInFolder } = usePopoverContext()
   const [focusedIndex, setFocusedIndex] = useState(-1)
@@ -72,7 +74,9 @@ function ColorGrid({
         case 'Enter':
         case ' ':
           e.preventDefault()
+          e.stopPropagation()
           setHexInput(WORKFLOW_COLORS[index].color)
+          onColorChange?.(WORKFLOW_COLORS[index].color)
           return
         default:
           return
@@ -83,7 +87,7 @@ function ColorGrid({
         buttonRefs.current[newIndex]?.focus()
       }
     },
-    [setHexInput]
+    [setHexInput, onColorChange]
   )
 
   return (
@@ -105,8 +109,10 @@ function ColorGrid({
           onKeyDown={(e) => handleKeyDown(e, index)}
           onFocus={() => setFocusedIndex(index)}
           className={cn(
-            'h-[20px] w-[20px] rounded-[4px] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-1 focus:ring-offset-[#1b1b1b]',
-            hexInput.toLowerCase() === color.toLowerCase() && 'ring-1 ring-white'
+            'h-[20px] w-[20px] rounded-[4px] outline-none ring-white ring-offset-0',
+            (focusedIndex === index ||
+              (focusedIndex === -1 && hexInput.toLowerCase() === color.toLowerCase())) &&
+              'ring-[1.5px]'
           )}
           style={{ backgroundColor: color }}
         />
@@ -450,7 +456,11 @@ export function ContextMenu({
           >
             <div className='flex w-[140px] flex-col gap-[8px] p-[2px]'>
               {/* Preset colors with keyboard navigation */}
-              <ColorGrid hexInput={hexInput} setHexInput={setHexInput} />
+              <ColorGrid
+                hexInput={hexInput}
+                setHexInput={setHexInput}
+                onColorChange={onColorChange}
+              />
 
               {/* Hex input */}
               <div className='flex items-center gap-[4px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 5c7dbbdad..2896e18d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -459,6 +459,7 @@ export function WorkspaceHeader({
                               value={editingName}
                               onChange={(e) => setEditingName(e.target.value)}
                               onKeyDown={async (e) => {
+                                e.stopPropagation()
                                 if (e.key === 'Enter') {
                                   e.preventDefault()
                                   setIsListRenaming(true)
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 764c1f5ae..8c455bae6 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -460,6 +460,13 @@ const PopoverContent = React.forwardRef<
         const content = contentRef.current
         if (!content) return
 
+        const activeElement = document.activeElement
+        const isInputFocused =
+          activeElement instanceof HTMLInputElement ||
+          activeElement instanceof HTMLTextAreaElement ||
+          activeElement?.getAttribute('contenteditable') === 'true'
+        if (isInputFocused) return
+
         const items = content.querySelectorAll<HTMLElement>(
           '[role="menuitem"]:not([aria-disabled="true"])'
         )