Feat/diseno negro

server/src/engine/agents.ts

@@ -30,7 +30,10 @@ export interface Agent {
 }
 
 /** Colores distintos a los de los humanos (ámbar/naranjas = agentes). */
-const AGENT_COLORS = ["#ffc37a", "#e8a05f", "#d9b878", "#f0b27a"];
+// Los cuatro de antes eran naranjas casi identicos y uno repetia el color de
+// una persona: con dos agentes en la sala no se sabia cual hablaba. Ahora son
+// una familia calida propia, distinta de la de la gente.
+const AGENT_COLORS = ["#ff4d1c", "#ff8c42", "#e0574f", "#ffb347"];
 
 export const MAX_AGENTS_PER_ROOM = 3;
 

server/src/rooms.ts

@@ -96,7 +96,10 @@ export interface Room {
 
 const rooms = new Map<string, Room>();
 
-const COLORS = ["#b9a8e3", "#c393c9", "#7fa3d8", "#8fb573", "#ffc37a", "#d95d63"];
+// Separados en tono a proposito: sobre negro, dos colores parecidos se
+// confunden en un nombre de 12px. Y ninguno se acerca a los de los agentes,
+// para que de un vistazo se sepa si habla una persona o un agente.
+const COLORS = ["#f5f5f5", "#5eb3ff", "#7dd8a0", "#ffd166", "#c792ea", "#ff8fa3"];
 const ADJ = ["taco", "chido", "vibe", "noche", "lofi", "pixel", "nube", "compa"];
 const NOUN = ["fiesta", "sala", "jam", "build", "crew", "party", "lab", "zona"];
 

web/src/App.tsx

@@ -640,8 +640,13 @@ function Sala({
     }
   };
 
-  /** Alguno sigue subiendo: mandar ahora dejaría el mensaje sin su archivo. */
-  const subiendoAlgo = pendientes.some((p) => p.subiendo !== null);
+  /**
+   * Alguno todavía no tiene id: mandar ahora dejaría el mensaje sin su archivo.
+   *
+   * Se mira el ID y no el progreso porque el id es la condición de verdad: es lo
+   * único que el server puede resolver. El progreso es para enseñarlo.
+   */
+  const subiendoAlgo = pendientes.some((p) => !p.id);
 
   const send = () => {
     const text = draft.trim();
@@ -652,8 +657,12 @@ function Sala({
     socketRef.current?.emit("chat", {
       text,
       anchor: mySelection,
+      // Solo los que ya subieron. `send` no llega aquí si falta alguno, pero
+      // filtrar es más barato que confiar en que dos estados van a la par.
       adjuntos: pendientes.length
-        ? pendientes.map((p) => ({ id: p.id, nombre: p.nombre, mediaType: p.mediaType }))
+        ? pendientes
+            .filter((p) => p.id)
+            .map((p) => ({ id: p.id, nombre: p.nombre, mediaType: p.mediaType }))
         : undefined,
     });
     setDraft("");