From 9c3d4736429de89115acb16bda8ebd6d6d5bafa3 Mon Sep 17 00:00:00 2001 From: ErickHub192 Date: Sun, 16 Aug 2026 19:05:11 -0600 Subject: [PATCH] Ver la app a ancho de tablet o de telefono Lo que se construye en una sala acaba en un link que la gente abre en el celular, pero no habia forma de comprobar como se ve ahi sin sacar el telefono. Ahora hay un boton que cicla el ancho del preview: computadora, tablet, celular. Un solo boton que cambia de icono en vez de tres, porque se toca poco y la barra de arriba ya lleva siete controles. Y solo aparece con la app a la vista: en el back no hay nada que redimensionar. El ancho va en un marco alrededor, no en el iframe, y el iframe nunca se desmonta: recargarlo perderia el estado de la app (un formulario a medias, en que pantalla ibas) y costaria segundos cada vez. De poco sirve el boton si lo que el agente construye no es responsive, asi que tambien se le pide en el prompt. Es lo mismo que hace Lovable, que lo lleva en su manual de prompting: el codigo de la app lo escribe el agente, no Multi, asi que ahi es donde se pide. Sabido: si dos personas miran el preview a anchos distintos, sus cursores se ven corridos entre si. Los cursores se posicionan sobre el escenario, que no cambia de tamano. Se deja asi porque la vista angostada es para revisar un momento, no para trabajar en ella. Co-Authored-By: Claude Opus 5 --- server/src/agent/loop.ts | 6 +++ web/src/App.tsx | 96 +++++++++++++++++++++++++++++++++++++--- web/src/i18n.tsx | 11 +++++ web/src/styles.css | 46 +++++++++++++++++++ 4 files changed, 153 insertions(+), 6 deletions(-) diff --git a/server/src/agent/loop.ts b/server/src/agent/loop.ts index f6b8e49..d539b99 100644 --- a/server/src/agent/loop.ts +++ b/server/src/agent/loop.ts @@ -75,6 +75,12 @@ créalo con bash: es tu trabajo, no preguntes por dónde empezar. - Deja el dev server en el script "dev" del package.json, escuchando en el puerto de la variable PORT y con el host abierto. Multi lo levanta y lo muestra a toda la sala; sin eso nadie ve nada. +- Lo que construyas tiene que verse bien también en un teléfono, no solo en pantalla + ancha: nada de anchos fijos en el layout, y que el texto se lea y los botones se + puedan tocar con el dedo. + Por qué: la sala mira el preview desde donde sea, y lo que se publica acaba en un link + que la gente abre en el celular. Una app que solo se ve bien en la computadora está a + medias. - El proyecto vive en un volumen montado, donde los eventos de archivo del sistema no cruzan. Configura el watcher de tu stack por SONDEO (polling) o los cambios no se verán en vivo y la sala se quedará mirando una pantalla congelada. diff --git a/web/src/App.tsx b/web/src/App.tsx index c42f5a8..3455648 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -34,6 +34,25 @@ import { /** Cuántas imágenes caben en un mensaje. El server aplica el mismo tope. */ const MAX_ADJUNTOS = 4; +/** + * A qué ancho se mira el preview. + * + * Un solo botón las cicla en este orden, en vez de tres botones en la barra: + * ya hay siete controles ahí arriba y este se toca poco. + * + * Los anchos son los de siempre para cada clase de pantalla; lo que importa no + * es el número exacto sino cruzar los puntos donde un layout se rompe. + */ +const VISTAS = ["escritorio", "tablet", "movil"] as const; +type Vista = (typeof VISTAS)[number]; + +const ANCHO_DE_VISTA: Record = { + // Sin ancho: el preview ocupa lo que haya, como siempre. + escritorio: undefined, + tablet: "768px", + movil: "390px", +}; + // El roomId vive en el hash de la URL: #/sala/taco-fiesta-42 function readRoomFromHash(): string | null { const m = window.location.hash.match(/#\/sala\/([\w-]+)/); @@ -227,6 +246,13 @@ function Sala({ roomId, name }: { roomId: string | null; name: string }) { * no cabe al lado del preview y pasa a ser una vista más. */ const [tab, setTab] = useState<"chat" | "app" | "back">("app"); + /** + * A qué ancho se está viendo el preview. + * + * Es solo del que mira: cambiarlo no le mueve nada a los demás de la sala, ni + * toca la app. Se angosta el marco, no el proyecto. + */ + const [vista, setVista] = useState("escritorio"); /** * El chat colapsado deja el preview a pantalla completa. * @@ -990,6 +1016,20 @@ function Sala({ roomId, name }: { roomId: string | null; name: string }) { + + {/* A qué ancho se ve el preview. Un solo botón que cicla, y no tres, + porque se toca poco y la barra de arriba ya va llena. Solo aparece + con la app a la vista: en el back no hay nada que redimensionar. */} + {tab === "app" && ( + + )} {tab === "back" && roomId && ( @@ -1001,12 +1041,17 @@ function Sala({ roomId, name }: { roomId: string | null; name: string }) {
{previewReady ? ( <> -