v0.0.1

tareas/completadas/04-service-node.md

@@ -0,0 +1,21 @@
+# 04 — ServiceNode (nodo visual de container)
+
+## Objetivo
+Crear el componente visual que representa cada container en el grafo.
+
+## Tareas
+- [ ] `src/client/nodes/ServiceNode.tsx`:
+  - Status dot con animate-pulse (running = verde, stopped = rojo, paused = amarillo)
+  - Icono auto-detectado por imagen (postgres=🐘, redis=⚡, nginx=🔀, node=💚, python=🐍, etc.)
+  - Nombre del servicio
+  - Imagen (truncada)
+  - Puertos como badges cyan
+  - Barras de CPU/MEM con porcentaje
+  - Badge del proyecto (compose project name)
+  - Handles top/bottom para edges
+  - Dark theme: bg slate-900, bordes según estado, backdrop-blur
+- [ ] Registrar nodeTypes en React Flow
+- [ ] Probar con datos mock primero
+
+## Criterio de completado
+Se ven nodos bonitos con toda la info, pulso verde en running, rojo en stopped.