Novedades Floogos — Semana 21, mayo 2026 (18–24 may)

Resumen

La semana 21 se centra en el editor de workflows, que recibe tres mejoras de productividad: agrupación visual de nodos en contenedores arrastrables con color y título personalizados, un buscador de nodos ahora accesible desde la barra de herramientas, y la descarga del diagrama completo como imagen PNG con un shortcut. En el motor, se resolvieron dos bugs críticos en los nodos de consulta SQL: caracteres especiales en valores de cadena que rompían la query, y trazas de ejecución en modo batch que no aparecían en el historial.

Nuevas funcionalidades

Agrupación visual de nodos en el editor

Los nodos del canvas ahora pueden agruparse dentro de contenedores visuales con color y título personalizados. Los grupos se mueven como bloque y actúan como agrupación puramente visual — el motor de ejecución ignora los contenedores y procesa únicamente los nodos internos.

• Crear un grupo — Selecciona dos o más nodos, haz clic derecho y elige “Agrupar selección”. Aparece un contenedor semitransparente que envuelve los nodos seleccionados con un padding de 48 px en cada lado.
• Título editable — Haz clic en el título del grupo para editarlo en línea. El cambio se persiste al guardar el workflow.
• Descripción — Debajo del título hay un campo de descripción opcional, también editable en línea.
• Color personalizado — Un botón de paleta en la esquina superior del grupo permite elegir entre 8 colores predefinidos para identificar visualmente distintos bloques funcionales.
• Redimensionar — Arrastra las esquinas o bordes del contenedor para ajustar su tamaño. El redimensionado mínimo es 200×100 px.
• Desagrupar — Clic derecho sobre el grupo → “Desagrupar”. Los nodos quedan sueltos en sus posiciones absolutas y el contenedor desaparece.
• Persistencia — Los grupos, con sus hijos, colores, títulos y dimensiones, se guardan y restauran correctamente al recargar el workflow.
• Sin impacto en la ejecución — El convertidor de canvas a payload del motor filtra automáticamente los nodos de tipo group, por lo que nunca se ejecutan.

Buscador de nodos en la barra de herramientas

El buscador de nodos, anteriormente accesible solo mediante el shortcut Ctrl+B, ahora tiene un botón dedicado en la barra de herramientas del editor en ambos modos.

• El botón de búsqueda (SearchIcon) se resalta visualmente cuando el panel está abierto, indicando su estado activo.
• En la toolbar compacta, el ítem “Buscar nodo (Ctrl+B)” aparece dentro del menú desplegable Editar.
• El panel filtra hasta 12 nodos por nombre o tipo, soporta navegación con ↑ ↓ y Enter, y se cierra con Esc.
• Al seleccionar un resultado, el canvas hace zoom con animación suave y centra el nodo seleccionado.

Descarga del workflow como imagen PNG

Un nuevo botón Descargar imagen en la barra de herramientas exporta el diagrama completo del workflow como un archivo PNG de 1920×1080 px.

• Shortcut — Ctrl+Shift+E.
• Nombre del archivo — workflow-<nombre-del-workflow>.png.
• La imagen incluye todos los nodos y conexiones visibles en el canvas con el color de fondo del tema activo (oscuro o claro).
• En la toolbar compacta, la opción aparece en el menú Archivo con el shortcut indicado junto al ítem.
• No requiere ninguna petición al servidor — el PNG se genera íntegramente en el navegador con la librería html-to-image.

Mejoras

Versión dinámica en el menú de usuario

El número de versión que aparece en el menú desplegable del usuario (esquina superior derecha) ahora se lee directamente de package.json en tiempo de compilación mediante la variable __APP_VERSION__ inyectada por Vite. Anteriormente mostraba un valor hardcodeado que quedaba desactualizado entre releases. A partir de la versión 2.6.6 el número es siempre correcto sin intervención manual.

Correcciones de errores

SQL: Apóstrofes y caracteres especiales en valores rompen la query

Los nodos sqlQuery (MySQL) y sqlQueryMSSQL (SQL Server) fallaban con ER_PARSE_ERROR o error de sintaxis equivalente cuando un valor de datos contenía un apóstrofe u otro carácter especial — por ejemplo, Mont Sant'Angelo-CC Gargano.

Causa raíz: resolveConfigVariables en el motor de ejecución procesaba el campo query de la configuración y substituía las variables {{campo}} directamente en el texto de la query antes de que el módulo SQL pudiera convertirlas en parámetros del driver. Los valores con apóstrofes llegaban ya incrustados en el SQL, produciendo SQL malformado.

Solución: El motor ahora inyecta el template original de la query en un campo _rawQuery_ antes de la fase de resolución de variables, marcado como campo protegido (skipKeys). Los módulos SQL leen _rawQuery_ para construir la query parametrizada — marcadores ? en MySQL y parámetros nombrados @campo en SQL Server — dejando que el driver del cliente maneje el escape y la conversión de tipos internamente. Ningún valor de datos toca el texto SQL como cadena cruda.

SQL: Trazas de ejecución no aparecían en el historial de nodos batch

Los nodos sqlQuery y sqlQueryMSSQL ejecutados dentro de un Iterator en modo batch generaban entradas en la tabla workflow_traces de la base de datos, pero no eran visibles en la vista de historial de ejecución del editor.

Causa raíz: La función processIteratorBatch del motor construía el config de cada iteración sin incluir los campos workflowName y origenid. El logger de trazas almacenaba workflow_name = null en la base de datos. El endpoint /api/traces/workflow/:workflowName consulta por ese campo, por lo que devolvía resultados vacíos.

Solución: processIteratorBatch ahora propaga correctamente workflowName y origenid al config de cada iteración del batch, garantizando que las trazas sean localizables desde el historial.

Notas técnicas

• Los módulos sqlQuery y sqlQueryMSSQL subieron a la versión 2.1.3.
• El campo _rawQuery_ se añadió a la lista skipKeys de resolveConfigVariables para garantizar que nunca sea modificado por el ciclo de resolución de variables.
• buildParameterizedQuery usa la expresión regular /'?\{\{\s*([^}@#$\n]+?)\s*\}\}'?/g para capturar tanto {{campo}} como '{{campo}}' (con apóstrofes de SQL alrededor de la variable).
• GroupNode usa el componente NodeResizer de @xyflow/react para el redimensionado nativo y zIndex: -1 para permanecer visualmente detrás de sus nodos hijos.
• El convertidor convertReactFlowToWorkflow.js filtra los nodos de tipo group antes de construir el payload para el motor.
• La descarga de imagen usa getNodesBounds y getViewportForBounds de @xyflow/react para calcular el viewport óptimo y luego llama a toPng de html-to-image con dimensiones 1920×1080.
• La versión dinámica se gestiona en src/version.ts mediante declare const __APP_VERSION__: string, resuelto en build por el define de vite.config.ts.