Allow imports from utils for atoms

Author: j-sanaa

packages/agentflow/.eslintrc.js

@@ -119,8 +119,8 @@ module.exports = {
                     {
                         target: './src/atoms',
                         from: './src/core',
-                        except: ['./types', './theme'],
-                        message: 'Atoms can only import from core/types and core/theme, not utilities or business logic.'
+                        except: ['./types', './theme', './utils'],
+                        message: 'Atoms can only import from core/types, core/theme, and core/utils.'
                     },
                     // core/ cannot import from anything (leaf node)
                     {

packages/agentflow/ARCHITECTURE.md

@@ -42,7 +42,7 @@ atoms/
 -   No API calls
 -   Stateless or minimal local state
 -   Imported by features, never the reverse
--   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions and design tokens from `core/theme`)
+-   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions, design tokens from `core/theme`, and utilities from `core/utils`)
 
 **Goal:** 100% visual consistency.
 

packages/agentflow/src/features/node-editor/AsyncInput.test.tsx

@@ -20,7 +20,7 @@ jest.mock('@tabler/icons-react', () => ({
 }))
 
 jest.mock('./CreateCredentialDialog', () => ({
-    CreateCredentialDialog: ({ open, onCreated, onClose }: any) =>
+    CreateCredentialDialog: ({ open, onCreated, onClose }: { open: boolean; onCreated: (id: string) => void; onClose: () => void }) =>
         open ? (
             <div data-testid='create-credential-dialog'>
                 <button onClick={() => onCreated('new-cred-id')}>Create</button>

packages/agentflow/src/features/node-editor/CreateCredentialDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
     Alert,
@@ -46,10 +46,10 @@ export function CreateCredentialDialog({ open, credentialNames, onClose, onCreat
     const [submitting, setSubmitting] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
-    // Stabilize credentialNames so the effect doesn't re-fire on every render
-    // when the parent passes an inline array (e.g. credentialNames={['openAIApi']}).
+    // Stable string key for credentialNames — a new array reference on every render
+    // (e.g. inline credentialNames={['openAIApi']}) would otherwise restart the effect.
+    // Using the joined string as the dependency ensures value-based comparison.
     const credentialNamesKey = credentialNames.join('\0')
-    const stableCredentialNames = useMemo(() => credentialNames, [credentialNamesKey])
 
     const selectSchema = useCallback((schema: ComponentCredentialSchema) => {
         setSelectedSchema(schema)
@@ -77,18 +77,18 @@ export function CreateCredentialDialog({ open, credentialNames, onClose, onCreat
             setCredentialName('')
             setFormValues({})
 
+            // Reconstruct names from the stable key to avoid depending on the array reference
+            const names = credentialNamesKey.split('\0')
+
             try {
-                if (stableCredentialNames.length === 1) {
-                    const schema = await credentialsApi.getComponentCredentialSchema(stableCredentialNames[0])
+                if (names.length === 1) {
+                    const schema = await credentialsApi.getComponentCredentialSchema(names[0])
                     if (!cancelled) {
                         setSchemas([schema])
                         selectSchema(schema)
                     }
                 } else {
-                    // Fetch each schema individually
-                    const results = await Promise.all(
-                        stableCredentialNames.map((name) => credentialsApi.getComponentCredentialSchema(name))
-                    )
+                    const results = await Promise.all(names.map((name) => credentialsApi.getComponentCredentialSchema(name)))
                     if (!cancelled) {
                         setSchemas(results)
                     }
@@ -109,7 +109,7 @@ export function CreateCredentialDialog({ open, credentialNames, onClose, onCreat
         return () => {
             cancelled = true
         }
-    }, [open, stableCredentialNames, credentialsApi, selectSchema])
+    }, [open, credentialNamesKey, credentialsApi, selectSchema])
 
     const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
         setFormValues((prev) => ({ ...prev, [fieldName]: value }))