Run & Preview

El bucle de corregir el código → ejecutar → comprobar el resultado se cierra dentro de Blyck. Los errores vuelven como marcadores del editor, la pantalla web se integra directamente en el panel y la IA ve la pantalla y la verifica por sí misma.

Run & Observe — ejecutar y observar

Al pulsar el botón ▶ Ejecutar, la salida no fluye sin más. El Problem Matcher parsea los errores de la salida en tiempo real, los estructura por archivo · línea · severidad y coloca marcadores del editor (subrayado rojo) en la ubicación correspondiente. No necesitas seguir el mensaje de error con la vista para encontrar el archivo.

Detección automática del comando de ejecución

Mirando los archivos marcadores de la raíz del proyecto, propone automáticamente el comando de ejecución predeterminado.

Archivo detectado	Comando propuesto
`package.json`	`npm start` (también reconoce los scripts build · test)
`go.mod`	`go run .`
`Cargo.toml`	`cargo run`
`*.csproj` / `.sln`	`dotnet run`
`pyproject.toml` / `setup.py`	`pytest`
`Makefile`	`make`
Archivo `.py` / `.js` único	`python <archivo>` / `node <archivo>`

El comando se puede modificar libremente y se guarda por proyecto. En el panel de salida fluyen en tiempo real el comando ($)·la salida estándar (blanco)·el error estándar (rojo), y se muestran hasta 5000 líneas. Durante la ejecución, el botón cambia a ■ Detener y, al hacer clic, interrumpe el proceso al instante.

Parsing de errores por lenguaje (Problem Matcher)

Lenguaje / herramienta	Objeto de parsing
Python	Traceback (`File "...", line N`)
Go / Rust	Errores de compilación (`filename:line:col`)
C / C++ (gcc · clang)	Advertencias·errores
C# (MSBuild · dotnet)	Errores de build
Node.js	Trazas de pila
Personalizado	Añade tu propio matcher con expresiones regulares

Los errores parseados se resaltan en el panel de salida con el formato nombreArchivo:númeroLínea y, al hacer clic, el editor va a esa línea.

Live Preview — un navegador dentro de la app

Tras ejecutar el servidor de desarrollo, integras la pantalla web directamente en el panel. Sin necesidad de abrir un navegador aparte ni saltar entre ventanas, mantienes el código · terminal · pantalla en un único campo de visión.

Abrir la vista previa

Primero ejecuta el servidor de desarrollo en el terminal (npm run dev, python -m http.server, etc.).
Menú de pestaña nueva (+) → selecciona 🌐 Vista previa web….
Introduce la dirección del servidor en el cuadro de URL (ej.: http://localhost:3000).

Controles de cabecera

Botón	Acción
Actualizar	Recarga la URL actual
Zoom `25%~500%`	Ajuste de escala. Al hacer clic en el número de escala vuelve al instante a 100%
Barra de URL	Navega directamente a otra ruta

Los registros de consola y las respuestas de red fetch/XHR se recopilan automáticamente hasta los 200 más recientes cada uno. La IA aprovecha estos datos al diagnosticar.

Herramientas de AI Live Preview

Desde el Chat con IA puedes manipular directamente el panel de vista previa. Las herramientas siguientes se activan en los modos Act (⚡) o Auto (🚀) del Chat con IA.

Herramienta	Acción
`panel_screenshot`	Captura la pantalla actual → la IA la comprueba como imagen (detecta automáticamente el tipo de cualquier panel)
`preview_navigate`	Navega a la URL indicada
`preview_click`	Hace clic por coordenadas o selector
`preview_type`	Introduce texto
`preview_eval`	Ejecuta JavaScript dentro de la página y devuelve el resultado
`preview_wait`	Espera un selector o N segundos (para esperar a que termine la carga de la página)
`preview_console_logs`	Consulta errores·advertencias de consola
`preview_network`	Consulta la lista de peticiones de red

Si omites paneId, se aplica al panel de vista previa activo actual.

Prompt de ejemplo:

Pon la cuenta de prueba (test@example.com / 1234) en el formulario de inicio de sesión y envíalo.
Si hay errores de consola, encuentra la causa y corrígela.

La IA ejecuta automáticamente en el orden preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs.

Verificación de regresión por visión con IA

En lugar de decir “ya lo arreglé”, lo demuestra con la pantalla. Compara la pantalla antes y después de la corrección píxel a píxel y detecta automáticamente los cambios visuales no intencionados.

Flujo de regresión por visión

Guardar baseline — ejecuta preview_baseline_set en el estado deseado antes de la corrección
Corregir el código — con IA o edición directa
Comparar — ejecuta preview_baseline_diff → devuelve una imagen con el porcentaje de cambio (%) y las áreas de cambio compuestas en cajas rojas

Como la IA lee la captura con visión y la coteja con los registros de consola, detecta automáticamente si solo se produjo el cambio previsto · si no se rompió nada más (regresión visual).

Herramienta	Acción
`preview_baseline_set`	Guarda la pantalla actual como baseline
`preview_baseline_diff`	Compara la pantalla actual con el baseline píxel a píxel, devuelve el porcentaje de cambio + la imagen de diff

También admite apps de escritorio

Las apps de escritorio, que no son web, usan el mismo flujo con el espejo de escritorio. Menú de pestaña nueva → 🖥️ Captura de escritorio… → al seleccionar la ventana de la app, streaming en vivo (solo visualización). La IA captura la ventana con la herramienta panel_screenshot y, aunque reinicies la app, la vuelve a encontrar y conectar por el título de la ventana.

Limitaciones

La manipulación automática (clic · entrada) de Live Preview solo funciona dentro del panel de vista previa integrado. No se pueden manipular ventanas de navegador externas.
La comparación de regresión visual se basa en el tamaño de la ventana en el momento en que se guardó el baseline. Si cambia el tamaño del panel, vuelve a guardar el baseline.
El botón ▶ Ejecutar solo aparece en archivos guardados en local. En archivos remotos SFTP está desactivado.
La herramienta run_observe (ejecución autónoma de la IA) solo funciona en los modos ⚡ Ejecutar+revisar · 🚀 Automático. No se puede usar en los modos 💬 Chat·📋 Plan.
Los procesos de tipo servidor (npm run dev, etc.) tienen el timeout de run_observe limitado a 30 segundos.

Preguntas frecuentes

P. No veo el botón ▶ Ejecutar. → Es un archivo remoto (SFTP) o un archivo aún sin guardar. Guárdalo en local y vuelve a abrirlo para que aparezca.

P. La vista previa no se carga. → Comprueba que el servidor de desarrollo esté en ejecución. Sin servidor no funciona. Ejecuta primero el servidor en el terminal con npm run dev, etc. Para más detalles consulta la página de Solución de problemas.

P. ¿Qué tengo que hacer para usar las herramientas de vista previa de IA? → En el Chat con IA cambia al modo ⚡ Ejecutar+revisar (Ctrl+3) o 🚀 Automático (Ctrl+4) y solicítalo con el panel de vista previa abierto.

P. preview_eval falla de inmediato. → La página aún se está cargando. Espera a que termine la carga con preview_wait y reintenta.

P. Los marcadores de error no se colocan en el editor. → Comprueba que sea un lenguaje admitido por el Problem Matcher. Para formatos de error personalizados puedes registrar un matcher por expresiones regulares.

P. La comparación de regresión por visión sale extraña. → Puede que el tamaño del panel haya cambiado desde que se guardó el baseline. Vuelve a guardar el baseline con preview_baseline_set y compara.

P. ¿Cómo hago que la IA ejecute los tests automáticamente? → En el modo 🚀 Automático, si lo solicitas como “ejecuta los tests y corrige los errores”, la IA repite de forma autónoma el bucle de ejecutar→parsear errores→corregir código con run_observe. Para más información consulta la página del Chat con IA.