ContainerFlow/tareas/completadas/05-react-flow-layout.md

# 05 — React Flow + Auto-Layout + Agrupación

## Objetivo
Montar el canvas de React Flow con auto-layout (dagre) y subgraphs por proyecto/compose file.

## Tareas
- [ ] `src/client/App.tsx`:
  - React Flow con Background, Controls, MiniMap
  - Dark theme (bg-slate-950, minimap dark)
  - fitView al cargar
- [ ] `src/client/engine/layout.ts`:
  - Auto-layout con dagre respetando grupos
  - Nodos dentro de su grupo (parentId)
  - Posicionamiento que no se solape
- [ ] Agrupación automática:
  - `detectGrouping()`: si hay 1 proyecto → agrupa por compose_file, si hay múltiples → agrupa por project
  - Nodos "group" de React Flow con borde dashed, label, fondo semi-transparente
  - Colores distintos por grupo
- [ ] Edges entre nodos:
  - Usa connections del backend
  - Label con tipo de conexión (postgres, cache, upstream, broker)
  - Estilo: línea sólida gris con label
- [ ] Conectar useDocker hook → actualizar nodos/edges en tiempo real

## Criterio de completado
Dashboard muestra todos los containers agrupados por proyecto/compose file, con edges entre ellos, auto-layout limpio, minimap, zoom y pan.