La página de login ES la demo

GeekBye v1.7.5 es una release de una semana con doble personalidad: 37 commits, de los cuales 28 son un rediseño de la página de login — y 25 de esos son micro-ajustes style(login), todos aterrizados en un solo día. También es la release que arregló una de las carreras más instructivas de la base de código. Las dos historias merecen contarse, y se encuentran en la misma idea: la página de login es lo primero que ve un usuario sin autenticar, así que más le vale ser el producto, no una foto de él.

Una captura de pantalla, durante unas cinco horas

El rediseño empezó de forma convencional. Reestructurar a dos columnas, poner el inicio de sesión a la izquierda y mostrar el producto a la derecha — como imagen. Los commits de media mañana hacen exactamente eso: a las 11:57 aterriza en el repo una captura de preview real, un PNG de 114 KB, que se actualiza una vez seis minutos después.

A las 17:04 ya no estaba. El commit del giro sustituye la imagen estática por 344 líneas de componentes reales — un panel LoginDemo ensamblado a partir de ocho piezas pequeñas que replican la UI real del overlay: la píldora de navegación de grabación con sus barras de EQ pulsantes y su botón de stop, el panel de chat con pestañas Chat/Transcript, una respuesta del asistente renderizada (explicando el useEffect de React, muy a propósito), las acciones rápidas "Tell me more / Simplify / Show example" (cuéntame más / simplifica / muestra un ejemplo), la fila de prompts en vivo y el input de Assist con ⌘⏎.

Seamos precisos con la palabra «demo», porque es fácil exagerar: los botones tienen estados hover reales — brillos, shimmers, transiciones — pero nada está cableado al clic, y el input es de solo lectura. No es un sandbox. Lo que sí es, es el vocabulario de UI real del producto renderizado en vivo: el mismo asset del logo, el mismo tratamiento de borde degradado y backdrop-blur, el mismo import de productName que usa el sistema white-label — de modo que la demo se rebrandea automáticamente para cada producto construido desde esta base de código. Una captura no puede hacer nada de eso. Una captura está desactualizada el día en que la tomas, borrosa en la pantalla equivocada y marcada para siempre con el producto que casualmente capturaste. Los componentes se ven nítidos a cualquier DPI, siempre al día y correctos para cada marca — porque no son una foto del design system, son el design system.

El PNG borrado, por cierto, sigue en el repo en el tag de la release — huérfano, sin nada que lo referencie. Toda base de código carga con algunos fósiles del enfoque que perdió.

Qué aspecto tienen 25 commits de estilo en un día

El log de commits de ese único día es el cuaderno de bocetos de un diseñador, conservado con una honestidad inusual. La proporción de columnas fue 40/60, luego 45/55. Una etiqueta "Works with" (funciona con) sobre los logos de plataformas se añadió a mediodía, se recolocó y se eliminó — vivió más o menos medio día. La propia fila de logos de plataformas (Google Meet, Teams, Zoom, Slack, Webex), añadida a las 10:59 de la mañana, se borró entera a las 22:08 de esa noche. Y el footer necesitó una saga de cuatro enfoques para alinearse: un único contenedor wrapper, luego quitar las clases de centrado, luego centrado con flexbox, luego simplemente empujarlo un poco más hacia el borde inferior.

Sería fácil leer eso como churn. Nosotros lo leemos como la forma real del trabajo de diseño: converges renderizando, mirando y ajustando — y hacerlo en 25 commits pequeños en vez de en un único "redesign login page" aplastado significa que la búsqueda misma queda registrada. Cuando alguien pregunte «¿no probamos una fila de logos una vez?», la respuesta está en el historial, con timestamps.

El usuario que fue más rápido que el OCR

La historia de ingeniería de la release ocurrió cinco días antes, en una cadena de arreglos de tres commits. Desde v1.5.12, pulsar Cmd+H encola una captura con feedback instantáneo: la miniatura aparece en la cola inmediatamente, y la extracción de texto — OCR local con Apple Vision, de uno a dos segundos aproximadamente — corre en segundo plano. El evento de encolado literalmente sale con ocrText: '' y un comentario prometiendo que se rellenará más tarde.

Es una buena optimización, y acuñó una carrera. Un usuario rápido pulsa Cmd+H y envía su pregunta inmediatamente. El campo de texto de la captura sigue vacío. La petición sale sin contenido de pantalla, y el modelo responde — con verdad, con exasperación — "I cannot see images" (no puedo ver imágenes). La ruta ingenua no falló con un error; falló con una respuesta correcta a la pregunta equivocada, que es la forma más confusa en que puede fallar el software.

El arreglo bloquea la ruta de envío sobre el trabajo asíncrono que la optimización aplazó: si alguna captura encolada todavía tiene el texto OCR vacío, la petición se aparca y la UI muestra un indicador "Reading screen..." (leyendo la pantalla); un useEffect se dispara en el momento en que llega el texto y envía la petición con el contenido extraído completo. Dos detalles específicos de React en el diff merecen robarse: la cola de capturas se espeja en un ref que se sincroniza durante el render, porque la cadena de closures del manejador de eventos estaba capturando estado obsoleto; y la petición aparcada se envía directamente en vez de a través del hook genérico de peticiones encoladas, por la misma razón de stale closure.

Y hay una arruga honesta registrada en el propio mensaje de commit: los logs de traza añadidos para cazar esta carrera revelaron un segundo bug en el backend — el ensamblado del prompt estaba descartando el texto de la captura por completo en una de las rutas de código. Un síntoma, dos bugs, encontrados instrumentando la cadena entera y mirando dónde desaparecía el texto. La cadena terminó con una decisión de producto, nueve minutos después del arreglo de la carrera: Cmd+H encola capturas para análisis por lotes, mientras que Cmd+Enter siempre toma una captura fresca de la pantalla actual — dos flujos de trabajo distintos en vez de uno ambiguo. (Lo que hace realmente el Assist de Cmd+Enter es un post aparte: ayuda de IA instantánea sobre lo que estés mirando.)

Una pequeña coda de la misma semana, para los lectores del capítulo de white-label: el User-Agent Product/version (platform) ganó un arreglo para el modo dev, porque app.getVersion() en Electron sin empaquetar devuelve la versión de Electron, no la del producto. Las cadenas de identidad, como siempre, se filtran por las tuberías.

Tres cosas que nos enseñó esta release

1. Renderiza el producto, no lo fotografíes. Una demo de la página de login construida con componentes reales se rebrandea sola, sobrevive a cualquier densidad de pantalla y no puede quedarse desactualizada. El enfoque de la captura se probó y se borró dentro de la misma jornada — experimento barato, veredicto claro.
2. Cada optimización asíncrona necesita una compuerta en el punto de uso. «Feedback instantáneo con texto OCR vacío» era la decisión de UX correcta, pero la ruta de envío tuvo que aprender a esperar lo que la optimización aplazó. Si aplazas trabajo, encuentra a cada consumidor de su resultado y enséñale la diferencia entre «vacío» y «todavía no listo».
3. Instrumenta la cadena, no al sospechoso. Los logs de traza siguieron el texto de la captura de punta a punta — del manejador del atajo al IPC al cliente de API — y por eso una investigación cerró dos bugs, uno de ellos al otro lado de la red.

Para el capítulo anterior de la historia v1, reuniones que por fin puedes volver a encontrar (v1.7.3); y para todo el arco, la anatomía de publicar software hasta la perfección.