Ve a /service/single. La barra superior se divide en tres zonas.

• Izquierda — Historial · Guía · Título de la app · Guardar (💾)
• Centro — Desplegable de plantillas (11 opciones)
• Derecha — Lista compartida · Compartir · Copiar · Ejecutar ▶ · Desplegar 📦

El cuerpo tiene cuatro pestañas de editor (prompt · html · scss · vuejs) y una vista previa en vivo a la derecha.

Dos formas de empezar:

1. Plantillas prefabricadas — 11 opciones en el desplegable: E-Commerce · Gráfico bursátil en tiempo real · Panel de favoritos · Precios SaaS · Menú de kiosco · Reserva de restaurante · Hub de creador de YouTube · Detalle de producto · App de chat · Cuenta atrás de evento · Panel admin. Al elegir una, se rellenan al momento las cuatro pestañas.
2. Prompt de IA desde cero — describe lo que quieres en la pestaña prompt (p. ej. «página de menú de cafetería con 3 pestañas de categoría»), luego usa el botón de IA para autogenerar las pestañas HTML/SCSS/Vue.

Cambia de pestaña para editar cada capa.

• prompt — la descripción usada para regenerar con IA. Editar + regenerar refresca el código.
• html — estructura y texto. Números de línea + búsqueda Ctrl+F.
• scss — colores, tipografías, espaciados. La mayoría de plantillas definen variables de tema al inicio del archivo.
• vuejs — datos e interactividad. Usa data() { return { ... } }, methods: { ... }, mounted().

Haz clic en Ejecutar ▶ a la derecha de la barra para renderizar la página en vivo en el panel de vista previa. Vuelve a hacer clic tras editar para refrescar.

El botón Historial arriba a la izquierda abre tus versiones guardadas recientes. El icono → Cargar de una fila restaura ese estado — tu red de seguridad cuando una edición rompe algo.

Dos maneras de sacar tu trabajo:

• Desplegar 📦 — botón más a la derecha de la barra. Tras conectar una cuenta de Railway se ejecuta un modal de progreso; en 1–3 minutos tu página está en vivo en un dominio gratuito.
• Compartir — el icono de compartir en la barra. Añade título/descripción/etiquetas y publica en la comunidad; otros pueden forkear tu trabajo (es compartir plantilla, no despliegue en vivo).

Abre desde el menú Servicio > Proyecto. La disposición:

• Barra lateral izquierda — botones azules [+ Nuevo proyecto] / [+ Nuevo equipo] más las secciones Recientes, Soluciones públicas, Mis proyectos, Equipos.
• Ruta superior — alterna entre las vistas lista ↔ detalle ↔ programas ↔ despliegue.
• Cuerpo — tarjetas mostrando por cada proyecto: insignia de dominio, tipo de BD, conteo de programas/routers.

Pulsa [+ Nuevo proyecto] → modal asistente.

1. Paso 1 — tarjetas de funciones y diagrama de flujo.
2. Paso 2 — configuración
   • Dominio (obligatorio) — uno de tus dominios existentes
   • Dataset (obligatorio) — la BD que usará este proyecto
   • Nombre / descripción del proyecto
   • Asignación de equipos (casillas)
3. [Guardar] abajo — solo se habilita cuando hay dominio y dataset elegidos.

Un programa es una página o un bloque funcional dentro del proyecto. Rellena la info básica en el formulario de creación y salta directo al editor de código para escribir Blade + SCSS + Vue en una sola pantalla.

1) Crear un nuevo programa

La barra del detalle del proyecto muestra [+ Nuevo programa] y [+ Nuevo router]. Pulsar Nuevo programa abre un modal formulario.

• Nombre del programa (p. ej. home, admin_dashboard)
• Descripción — una línea sobre qué es esta pantalla/función
• Tipo — frontend (HTML/CSS/JS) / backend (PHP)
• Router — elige un router existente, o créalo en línea con alias + ruta URL + método HTTP

2) Abrir el editor de código y disposición de pantalla

Haz clic en el icono de la fila de programa para cambiar a la vista de editor. La pantalla se divide en tres zonas.

• Ruta superior + barra de herramientas — nombre del programa actual, indicador del estado de guardado y un grupo de botones-herramienta, todo en una línea.
• Barra lateral izquierda — lista de otros programas del mismo proyecto. Cada fila tiene iconos rápidos (Code) y (Builder) para saltar entre vistas.
• Editor central a 3 columnas — tres paneles CodeMirror 6 (HTML / CSS / JavaScript) lado a lado. Pulsar un panel lo resalta como focused, y el tema del editor sigue automáticamente tu ajuste Oscuro/Claro.

3) Qué contiene realmente cada pestaña

• HTML — HTML plano más directivas Blade (@if, @foreach) y salida @{{ ... }}. Variables de servidor, condiciones y bucles expresados directamente en la plantilla.
• CSS — sintaxis SCSS (anidamiento, referencias &, variables, mixins) tal cual. Se compila automáticamente al desplegar.
• JavaScript — forma Vue 3 Options API (data / computed / methods / mounted). El runtime lo toma automáticamente y lo enlaza con la plantilla de la columna HTML.

Los atajos estándar de CodeMirror funcionan como se espera: Ctrl+F buscar dentro del editor, Ctrl+Z deshacer, Ctrl+/ comentar, cierre automático de paréntesis/etiquetas y ajuste de línea suave.

4) Estado de edición y ciclo de guardado

En cuanto cambias un solo carácter, en la barra superior aparece No guardado, avisando de cambios sin guardar. Pulsa [ Guardar] y las tres pestañas salen a la vez; al tener éxito, parpadea brevemente un Guardado.

Cada guardado escribe las tres columnas al cuerpo del programa y a la vez registra el momento como una revisión. Guardar = instantánea automática de versión — puedes volver a cualquiera más tarde.

5) Deploy on Save — en directo con cada guardado

Pon a ON el interruptor [Deploy on Save] junto a Guardar y cada guardado también autodespliega el cambio al destino del proyecto (p. ej. servidor principal). Tras el envío aparece brevemente una insignia «N desplegados», así no hace falta pulsar un botón Desplegar aparte — el bucle «editar → en vivo» se cierra solo. El interruptor se recuerda por proyecto.

6) El clúster de herramientas superior de un vistazo

• Base de datos — abre el popup de binding de dataset. Nombra una variable, elige una tabla, pon WHERE/LIMIT/ORDER, y el resultado de la consulta se inyecta al programa con ese nombre de variable.
• Builder — cambia a una vista de edición basada en bloques del mismo programa. Vista Code y Builder comparten la misma salida.
• Code Search — panel de búsqueda y reemplazo a nivel proyecto (ver 7 abajo).
• Revisions — historial de revisiones con panel diff (ver 8 abajo).
• Guía de la extensión — popup que explica cómo editar y desplegar el mismo proyecto localmente vía la extensión de VSCode.

7) Búsqueda y reemplazo a nivel proyecto

Escribe una palabra arriba y pulsa Enter o el botón . Las pestañas de alcance dan dos opciones — Project (todos los programas del proyecto actual) o Revisions (incluye instantáneas pasadas).

• Los resultados muestran insignia de tipo (HTML / CSS / JS), ID del programa, nombre y conteo de coincidencias.
• Las pestañas de filtro por tipo All / HTML / CSS / JS acotan a una sola columna, con el conteo por pestaña.
• Pulsar la flecha junto al nombre de un programa salta directamente al editor de ese programa.
• Pulsar [Show More] en una fila abre a la derecha el panel de contexto mostrando el código alrededor de cada coincidencia.

Replace vive en la segunda fila. Elige un alcance (All / HTML / CSS / JS), rellena términos de búsqueda y reemplazo, pulsa el botón — aparece una confirmación «se harán cambios en N archivos» y al Sí el reemplazo a nivel proyecto se ejecuta de golpe.

8) Revisions · historial y rollback

Cada guardado añade una instantánea aquí. En cuanto abres el panel, hace un diff automático la última revisión ↔ tu edición actual en el lado derecho.

• Izquierda: la lista de revisiones (paginada). Cada fila tiene tres iconos de acción:
  • Revert — sobrescribe el editor con esta revisión (se pierden los cambios sin guardar).
  • Diff con actual — esta revisión ↔ lo que está ahora mismo en el editor.
  • Diff con la anterior — esta revisión ↔ la inmediatamente anterior.
• Derecha: diff lado a lado con pestañas HTML / CSS / JS. La pestaña que realmente cambió se autoselecciona.

9) El orden real que sigue un autor

1. Abre el editor desde el icono de una fila de programa.
2. Escribe en las pestañas HTML(Blade) → CSS(SCSS) → JS(Vue) según lo que exija el cambio.
3. Si necesitas datos, ve a Base de datos; si necesitas búsqueda entre programas, a Code Search; si quieres comparar con el historial, a Revisions.
4. Pulsa [Guardar] → espera a «Guardado». Si Deploy on Save está ON, el despliegue también sale.
5. Si algo se rompe, vuelve a la instantánea adecuada vía el panel Revisions.
6. Para un renombrado que cruce muchos programas, usa Code Search → Replace para hacerlo en una sola acción confirmada.

Registra routers en la sección plegable de routers de la vista de detalle o vía [+ Nuevo router].

• alias — identificador interno (p. ej. home, api_orders)
• Ruta URL — ruta pública (p. ej. /home, /api/orders)
• Método HTTP — GET / POST / PUT / DELETE / ANY

Conecta un router a un programa en el selector de router del formulario del programa — los visitantes que toquen esa URL dispararán el programa.

Pulsa el icono 🚀 (cohete) en una tarjeta de la lista de proyectos para abrir el modal de despliegue.

1. Elige un modo de despliegue: integrate (reutilizar Docker existente) · rebuild · new
2. Pulsa [Iniciar despliegue] → se ejecuta el pipeline de 9 pasos (cada uno se pone verde al completar):
   ① Crear pack → ② Preparar BD → ③ Preparar datos → ④ Transferir servidor → ⑤ Build Docker → ⑥ Deploy Docker → ⑦ Conectar dominio → ⑧ Instalación completa → ⑨ Estabilización del servicio
3. Al terminar, la URL del dominio está en vivo e inmediatamente accesible.

Abre el Code Builder con el icono en una fila de programa. Arriba hay ocho pestañas de pasos (DB · List · Detail · Search · Hook · Style · Code · Menu); la mayoría de los programas terminan recorriéndolas de izquierda a derecha una vez.

El flujo de un vistazo

• [1] DB
  elegir tablas
  elegir campos
  WHERE · ORDER
• [2] List
  colocar campos
  grupos · orden
  cinco layouts
• [3] Detail · Search
  dar forma al formulario
  elegir componentes
  separar insert / update
• [4] Hook · Code
  inyectar hooks
  [Builder] emite código
  reutilizar snippets
• [5] Menu
  árbol 4 niveles
  [menu:code]
  include común

Pestaña DB en detalle — si la conexión no está, lo primero que ves es el banner «DB no conectada» con una guía de reconexión. Cuando está viva, el panel se abre así:

• #list (editable) — una tabla principal. Elige del desplegable y pulsa [Select]. Es la tabla cuyas filas editarás / borrarás / insertarás.
• #list2 (solo lectura) — una tabla secundaria para joins (p. ej. traer etiquetas o nombres).
• #list3, #list4 … — pulsa el de la barra lateral para añadir más tablas.
• Tres selectores de campo — desde la misma lista de columnas, multi-seleccionas por separado «campos para List», «campos para Detail» y «campos para Search». Una casilla junto a cada uno alterna todo on/off.
• DB Search Option — tres líneas WHERE · ORDER BY · LIMIT, más un Raw Query opcional. Se convierten en el filtro de consulta por defecto de la lista.
• Abajo, [Update] guarda el paso; [Reset] arranca de nuevo.

Los «campos para List» que elegiste en la pestaña DB aparecen como candidatos a la izquierda. Esta pestaña define cómo se ve la pantalla de lista y cómo se comporta cada columna.

Elige primero uno de los cinco layouts — las opciones de abajo se autoajustan a tu elección.

• datatable — tabla con orden y paginación incorporados.
• table — tabla plana con alternador de orden por columna.
• grid — rejilla de tarjetas.
• modal — lista que abre las filas como modales en su sitio.
• slots — empotrada en los huecos de un layout frame.

Añadir ítems (columnas de campo) — pulsa [+ Add Item] a la izquierda para abrir el desplegable de candidatos. Elige un campo existente, o usa + new para añadir uno virtual (para valores calculados o compuestos).

• Por fila: header_value (etiqueta visible) · header_text (descripción) · width · mutator (código personalizado por campo) · sortable · linkable · use_opt (valor de opción) · (mostrar/ocultar).
• ↑↓ para reordenar, para quitar, la varita para código asistido por IA.

Agrupación — [Create Group] arriba a la derecha junta los campos seleccionados en 1–5 grupos. Pulsa … para asignar ítems a un grupo.

• En modo grupo, [Toggle Panel] cambia la vista a un panel de edición de grupo. Ahí rellenas, por cada grupo, un group name (identificador interno), un group header (título visible) y un layout (cómo se disponen las columnas dentro del grupo). Arriba del panel, el group display method decide cómo se muestran varios grupos — tabs, cajas lado a lado o una única fila input group.

[Update] abajo guarda el paso.

La pestaña Detail define el popup de detalle / edición (modal) que se abre al pulsar una fila de la lista. El layout se parece mucho al de List; el extra clave es elegir un componente de entrada por campo.

• Desplegable Component — tipo de entrada por campo: text · textarea · select · checkbox · radio · date · datetime · file · editor · hidden …
• opt_name / opt_value — opciones específicas del componente (lista de opciones para select, extensiones permitidas para file, formato para date …).
• Icono triángulo insert / update — alterna si el campo aparece en el formulario de añadir, el de editar o en ambos. P. ej. id / created_at suelen ser solo de edición.
• Interruptor required (+/-) — indicador de obligatoriedad.
• layout — colocación / ancho de celda (1/2, 1/3, ancho completo …).
• En la barra superior elige la columna clave primaria (la que identifica únicamente una fila) y la clave de página de detalle (la columna que se lleva en la URL al abrir una página de detalle).

La pestaña Search comparte el mismo editor. Diferencias:

• Match mode — cómo el valor tecleado se contrasta contra la BD: contains (coincidencia parcial) · equals (exacta) · one-of (contra una lista separada por comas) · full-text (búsqueda por palabra en texto largo), etc.
• Los componentes reflejan la UX de búsqueda — inputs libres, filtros desplegables …

Los inputs de búsqueda se colocan automáticamente sobre la lista; al enviarse, se combinan con AND con el WHERE de la pestaña DB.

A estas alturas los pasos 1–3 ya han rellenado los «ingredientes» de la pantalla. Toca añadir comportamiento fino, permisos y lógica personalizada, y luego emitir el código.

Pestaña Hook — muestra un pequeño diagrama del andamio HTML y JavaScript generado, con un conjunto de hook points (insignias) donde inyectar código propio.

• Mini esqueleto HTML / JavaScript arriba — las posiciones <?php ... ?>, <style>, <body>, modal, data / computed / mounted / methods están marcadas para que veas exactamente dónde acaba tu hook.
• Expande cualquier fila de hook con para mostrar su editor. Doble clic para modo ancho.
• Clic derecho en el editor → Save Snippet / Load Snippet. Guarda lógica recurrente (chequeos de login, guardas de permisos, preprocesado de subida …) bajo un ident y reutilízala en cualquier otro programa.

Pestaña Style — editor CSS / SCSS para este programa. Activa css_integrate para fundir con el bundle CSS global del proyecto; activa Backend Code para adjuntar también un snippet PHP.

Pestaña Code · la generación real — aquí pulsas [Builder].

• Dos editores CodeMirror — plantilla Blade a la izquierda, Vue Script a la derecha. Previsualizan el código ensamblado desde los pasos 1–3 y tus entradas de hook.
• Session Condition, cuatro celdas — Add / Delete / Read / Detail. Cada una toma un predicado de sesión (p. ej. user_level>=3) que protege esa operación CRUD.
• Rejilla de funcionalidades — activa funciones reutilizables (export CSV / Excel, multi-borrado, persistencia de orden …) y ajusta los parámetros necesarios.
• El botón [Builder] abajo ensambla todo en Blade + Vue Script y lo escribe directamente en el código real del programa. A partir de ahí retoma el editor de código normal — editar, guardar, desplegar como siempre.

Cuando tengas varios programas, querrás una navegación compartida. La pestaña Menu es un asistente que construye un árbol de menú hasta 4 niveles de profundidad y te deja soltarlo donde quieras mediante un shortcode de una sola línea.

Menu group — un namespace que aloja una definición de menú dentro del proyecto.

• Elige un grupo existente del desplegable o teclea un nuevo código de grupo (alfanumérico + guion bajo, 2–9 caracteres) y pulsa [Create Menu Group].

Editor de árbol de 4 profundidades — al seleccionar un grupo aparece una tabla Depth 0 a la izquierda. Al profundizar en una fila, se abre la siguiente profundidad a su derecha; hasta cuatro columnas se alinean a medida que bajas (Depth 0 → Depth 3).

  Depth 0 ┐
          ├─ Depth 1 ┐
          │          ├─ Depth 2 ┐
          │          │          └─ Depth 3   ← máximo 4 niveles
          └─ Depth 1'
           ...

• Cada tabla de profundidad tiene su propio [+ Add Menu] — el popup te deja rellenar nombre, alias de URL y condición de sesión opcional.
• Por fila: editar, borrar, flechas para reordenar.
• Pulsa el botón de verificación al final de una fila para bajar a los hijos de ese ítem en la columna derecha.

Inyectar como shortcode — con el árbol listo, suéltalo en tus páginas reales. En un área de include común (un layout frame, un partial de cabecera / sidebar) basta con una línea:

<?php echo get_menus_by_code($project_id, 'group_code', 'nav nav-menu', 'role="navigation"'); ?>

Al renderizar, el helper get_menus_by_code() lee la tabla project_menu y ensambla <ul>/<li> hasta cuatro niveles. Las filas de menú con session_condition solo se muestran cuando la sesión del usuario la satisface. Al ítem cuya URL coincide con la página actual se le asigna automáticamente la clase active.

Ve a /layout/page.

• Barra lateral izquierda — botón [+ Nueva página] + secciones Recientes / Compartidas / Mis páginas.
• Barra superior — búsqueda (campo + palabra clave), pestañas Block/Frame/Page, cambio Cuadrícula/Lista, filas por página (20/50/100).
• Cuerpo — tarjetas de página con título, descripción, frame e indicador desplegado-o-no.

Pulsa una tarjeta de página o el icono de rejilla para abrir el builder a pantalla completa. Tiene tres áreas.

• Panel izquierdo — arriba: tira de Frames (elige la plantilla responsiva); centro: lienzo del Frame (iframe + superposiciones de huecos); abajo: tira de Blocks (bloques arrastrables).
• Panel central — Data sampler (pestañas Architecture / Data) para el binding de API.
• Panel derecho — Despliegue + asistencia IA.

Tras elegir un Frame, aparecen huecos de soltado transparentes sobre el iframe. Empieza a arrastrar un bloque desde la tira de Blocks y los huecos se iluminan en azul — suelta para instalar el bloque en ese hueco.

Los huecos instalados pasan a «filled»; volver a pulsar el hueco permite intercambio. El mismo bloque puede rellenar varios huecos, y una página puede mezclar bloques distintos libremente.

En la pestaña Architecture del panel central, empareja las claves de datos de ejemplo de cada bloque con las claves reales de la respuesta de API.

1. La columna izquierda de cada tarjeta de bloque muestra el árbol de claves de ejemplo que espera el bloque.
2. El conmutador ⚡ (rayo) del centro activa el modo binding de API.
3. A la derecha elige un endpoint construido en el servicio Base de datos → se despliega el árbol de claves de respuesta de esa API.
4. Haz clic para emparejar una clave de ejemplo con una de API — una línea de mapeo las une y aparece abajo en «Pair Map» como sample_key → api_key.

La pestaña Data muestra las respuestas JSON en bruto, útil para depurar.

Usa el panel derecho para desplegar.

• Expose parameters — lista de parámetros query/path a exponer en la URL. Cada fila tiene una casilla de activación, nombre, origen (query/path) y valor por defecto. [Add] hace crecer la lista.
• Deploy URL — escribir un slug como /my-page actualiza la vista previa al vuelo.
• [Deploy] — muestra barra de progreso + etiqueta de paso; al terminar, está en vivo en el dominio.
• Debajo, Deploy history acumula URLs pasadas que puedes volver a visitar.

Abre desde el menú Display > Slideshow. La barra lateral izquierda tiene un botón [+ Registrar presentación] y un filtro «Presentaciones de la comunidad»; el cuerpo es una vista Cuadrícula/Lista.

Cada tarjeta muestra título, número de escenas, duración total de reproducción y estado de despliegue.

Haz clic en [+ Registrar presentación].

1. Paso 1 — Introducción: tarjetas + diagrama de flujo (Remote → Subida → Presentación → Navegador) que explican el mapeo de URI, canales, 67 transiciones y control de línea de tiempo.
2. Paso 2 — Registrar: introduce título + descripción → [Guardar] → aterrizas en el editor detallado.

El panel Timeline central define la reproducción.

• Duración total — control deslizante, 10–3600 s.
• Número de escenas — control de rango; la duración por escena se calcula automáticamente.
• Transiciones — elige de un catálogo de 67 (fade, slide, cube, page flip, etc.).
• Confirma con el botón [Guardar].

Cursor paramétrico (Page Sequencer) autogenera N escenas a partir de una única página Layout variando un parámetro.

• Nombre del parámetro (p. ej. month), algoritmo (by_range / by_comma / by_json), valores (p. ej. 1-12 paso 1).
• Resultado: 12 escenas autogeneradas, una por mes.

Canales de visualización (solo MAX) — emitir la misma presentación con mezclas distintas a diferentes pantallas.

• Nombre del canal (p. ej. «Categoría A», «Categoría B») + multiselección de diapositivas a incluir.
• Activar «Usar parámetro de consulta» asigna los canales a URLs vía ?keyword=value.

El panel de despliegue (se-deploy) de la derecha publica el show.

1. Escribe una ruta URL (p. ej. /menu-signage) + elige un dominio del desplegable.
2. Haz clic en [Desplegar presentación] — barra de progreso, mensajes «Desplegando...» y «Despliegue completo».
3. Una tarjeta de historial de despliegue registra dominio / ruta / marca de tiempo.

Apunta el navegador de cada pantalla a esa URL en pantalla completa — listo.

Abre desde el menú Data > Parser. Barra lateral izquierda con [+ Nueva regla de parser] y secciones Recientes / Públicas / Mis reglas; el cuerpo es una vista Rejilla/Lista.

Cada tarjeta tiene iconos (Ejecutar) · (Prueba de ítem) · (Programar — MAX) · (Editar) · (Duplicar) · (Borrar).

[+ Nueva regla de parser] abre un asistente de 3 pasos. El asistente solo registra la info base de la regla (nombre, descripción, dataset destino) — la URL de rastreo real, los selectores y el mapeo de campos se rellenan después en la pantalla de ajustes del parser que se abre automáticamente al terminar el asistente.

1. Paso 1 — Visión general: una introducción «¿Qué es una regla de parser?» seguida de cuatro tarjetas de funciones una al lado de otra (Extracción de datos, Rastreo web avanzado, Mapeo de campos, Reutilización) y un diagrama «Parser Pipeline» mostrando los cuatro flujos soportados de un vistazo (Regla de parser → BD / → Macro → BD / → Scheduler → BD / → Endpoint de API → Lanzamiento de servicio). Pulsa [Siguiente].
2. Paso 2 — Conexión a BD: pulsa una tarjeta de dataset (con insignia db_type, nombre de tabla, dominio) para elegir dónde caerán las filas extraídas. Si no hay datasets registrados, solo se muestra el enlace «Go to Dataset». Pulsar [Siguiente] lanza automáticamente un despliegue en 3 pasos («Agent connect → Parser engine deploy → Deploy complete») que aprovisiona el motor del parser en el agente docker elegido.
3. Paso 3 — Crear regla: introduce el nombre de la regla y una descripción opcional, luego pulsa [Create Rule]. Se guarda la info base (nombre, descripción, dataset, flag de share), el asistente se cierra y la pantalla de ajustes de la regla recién creada se abre automáticamente.

Ahí acaba el asistente. En la pantalla de ajustes del parser rellenas entonces la URL objetivo, opciones HTTP, Loop Splitter, selectores XPath/JSON y mapeo de campos (ver ▶︎ Paso 3 · URL objetivo y selectores de extracción), verificas en la pestaña «Test» y guardas — solo entonces el parser está listo para correr de verdad.

Una barra de pasos arriba sigue el progreso; [Atrás] vuelve al paso anterior (desactivado durante el despliegue). El modal del asistente solo se cierra con el botón [x] de la esquina superior derecha.

(Descripción de la pantalla de edición de regla del parser: URL objetivo, Loop Splitter, selectores XPath/JSON, funciones de posprocesado y autoregistro de la regla mediante AI Prompt. El detalle más abajo aún no está completamente traducido al español.)

Enter the Target URL at the top of the editor and combine three techniques to extract rows.

• Loop Splitter (3 inputs — primary + 2 secondary) — string patterns that chop HTML into repeated units.
• XPath selectors — up to 3 levels, extracting fields inside each unit. The selector should point at a node set (array), not a leaf value — if the actual data sits at //h3/a/text(), enter just //h3/a so the result comes out as an array.
• JSON selectors — for JSON APIs, dot/bracket paths. Same idea: point at the array path. If the data has a shape like data.items[0].title, enter data.items as the selector so the item array is produced.
• Post-processing functions — chain trim(@p), replace(...), regex(...), strtoupper(@p), slice(), remove() per column.

The fastest path is to feed a slice of the source (via the Loop Splitter) into the AI Prompt and let the AI response auto-register the rule. Hand-tuning selectors one by one is much slower — especially when the page structure is non-trivial.

Auto-register with an AI prompt (recommended)

Instead of hand-filling selectors, hand the sample to an AI and apply the completed rule it returns.

1. Prerequisite — enter the Target URL and run the extract test once from the "Test" tab so a response body exists. That body is injected into the prompt automatically.
2. Click the highlighted "AI Prompt" button (wand icon) at the top of the test result panel. A prompt is auto-built in the editor area just below it, picking the right language for the document out of 8 supported (Korean · English · Japanese · Chinese · Russian · German · French · Spanish) and the right document type (HTML / JSON / XML).
3. Click inside the editor panel → Ctrl+A → Ctrl+C to copy everything.
4. Paste into an AI such as ChatGPT / Claude / Gemini and run → the AI returns a rule JSON.
5. Copy the response, then click the "Import Pattern" button (import icon) in the same panel — a paste-in textarea opens. Paste and click [Apply Pattern].
6. Loop splitter, selectors, unique key, and every column are mapped into the right slots of the rule automatically; the editor switches to the "fields" tab so you can check the result immediately. A summary toast like "Pattern applied: N fields" appears at the bottom.

If the AI response isn't valid, you'll see an "Invalid JSON" toast and your existing values stay untouched — safe to retry.

El icono (vial) en una tarjeta o la pestaña «Test» en el editor abren el modal de prueba.

• Barra superior: «N items / M columnas»
• Exportaciones: CSV · XLSX · JSON · HTML
• Rejilla: Row# + cabeceras de columna detectadas automáticamente
• Hover de celda → botón «Copy»

Ajusta selectores, prueba, ajusta, prueba — bucle hasta que la salida luzca bien.

(Uso del modal «Run» que abre el icono ▶ (play) en una tarjeta de regla — interfaz de tres paneles (lista de URLs / Plan y ejecución / feedback de resultado), pasos URI · Fuzzer · Preview · Run mode · feedback en vivo y efectos esperados. El detalle más abajo aún no está completamente traducido.)

Clicking the (Play) icon on a rule card opens the Run modal — the single screen where you decide where to hit, with what parameter combinations, how to run, and where to store results, then launch and monitor in place.

• [1] URI
  Target address
  {param} tokens
  path · query
• [2] Fuzzer
  Parameter mix
  1-N · A,B · DB
  combine / pair
• [3] Preview
  Expand URLs
  Fill left panel
  Verify count
• [4] Run · Save
  Runtime / Schedule
  DB / CSV / JSON
  Items per run
• [5] Start
  Flow checks
  [Start] enables
  Pause anytime
• [6] Feedback
  Progress · stats
  Per-URL log
  Macro chain

Interface at a glance — 3-panel layout

• Left panel · URL list — shows the preview URLs generated from the center panel, numbered. While a run is in progress the current row is highlighted and finished rows show a check, so you can see progress at a glance. Each row has a button to test-parse that single URL in isolation, and a at the top-right loads past run configurations for reuse.
• Center panel · Plan & Execute — the main body: define URI, fuzzer parameters, run/save mode, then launch from the flow diagram's [Start] button.
• Right panel · Result feedback — two tabs. "Results" shows live statistics and log during a run; "Parse Test" shows the cell-level preview when you click on the left.

Step-by-step

1. URI input — first card in the center panel. Two example styles — path-token (/category/{param}/list) and query-string (?param={param}) — are pinned to the header as clickable hint badges. Names inside the curly braces {...} must match the parameter names defined in the next card so substitution works.
2. Fuzzer parameters — the card that builds the list of values injected into each {...}. A top toggle picks one of two modes:
   • Combination — cartesian product of every parameter's values. E.g. {page}=1..10 × {cat}=A,B → 20 URLs.
   • Paired — zip-style: the n-th value of every parameter together. All lists must have the same length.
   For each parameter pick a name and a generator — 1-N (range with step), A,B (comma list), DB (pull from a dataset column with optional WHERE/ORDER/LIMIT), [,] (JSON array), or \n (newline list). adds another parameter.
3. URL preview — the [URL preview] button at the bottom of the card expands the URI + parameter combinations into real URLs listed in the left panel. The count shows in the header badge, so you can immediately verify the expected size (e.g. range 10 × categories 2 = 20).
4. Run mode & Save mode — the third card.
   • Run: Runtime (one-off) / Schedule (periodic, MAX plan). Schedule reveals start-time and interval (minutes) inputs inline.
   • Items per run: Page / PK.
   • Save: DB (dataset, or a custom external DB via host/user/password/database), CSV, JSON, or SQL. DB mode also surfaces table (collection) name and a DBMS badge so you can confirm the destination visually.
5. Visual flow guide & Start — below the cards, a small flow diagram chains URI → Parameter → Preview → Save → [Start] → Macro. Each node lights up with a green check as its input is filled. Once required nodes are valid the [Start] button at the top-right activates. (If you pin a macro on the trailing node, it runs automatically right after the scrape.)
6. Live feedback while running — the moment you press Start, the top progress bar fills up (parsed / total) and the right-panel "Results" tab updates in real time.
   • Stat cards: Total · Passed · Failed · Remaining — the red "Failed" card only appears when a failure actually happens.
   • Log view: one line per URL as it's processed, latest highlighted, each showing time · URL · +rows added; failed URLs carry an badge.
   • Pause / Resume: the Start button switches to [Pause] during a run — stop at any time safely.
   • File-save modes (CSV/JSON/SQL): the Output textarea below fills with the generated file body; a button grabs it immediately.

What this run screen buys you

• Plan, run and observe in one screen — no tab hopping. Tweak the URI, parameter list, or save target and immediately re-run. The configure → run → verify loop is as tight as it gets.
• A fuzzer that scales — generate tens of thousands of URLs without writing one by hand. Ranges, comma lists, DB columns, JSON arrays, newline lists — category × page × date combinations are ready in seconds.
• DB-backed parameters (by_db_field) read a key table column and iterate detail pages on top of it — the classic "list → detail" two-stage crawl works end-to-end without spreadsheets or glue scripts.
• Transparent live feedback — per-URL checkmarks, streaming log, and success/fail counters make it easy to spot exactly where things stalled. Rerun a failed row on its own via to isolate the cause.
• Resource-friendly architecture — the actual HTTP and parsing runs on your docker agent, not the QuickStart server. Large crawls don't affect the service's bandwidth.
• Macro chaining — attach a macro to run right after the scrape for notifications, aggregation, or post-processing, turning collect → clean → notify into a single action.

(Estructura de la tarjeta de ejecución programada (solo MAX), diagrama de flujo de 5 pasos, verificación de resultados en el editor de base de datos, consejo de encadenar con un macro, etc. El detalle más abajo aún no está completamente traducido.)

Scheduled runs are a hands-off mode: the docker agent executes the rule on a fixed interval on its own, even while the screen is closed. Rows flow straight into the dataset (DB), so to actually see the results you open the target table in the Database editor.

• [1] Schedule setup
  Start time
  Interval (min)
  Active toggle
• [2] Agent sync
  [Save] pushes
  config to the
  docker agent
• [3] Auto periodic run
  Agent runs alone
  QuickStart idle
  Background task
• [4] DB accumulation
  Rows INSERT into
  dataset table
  Dup keys skipped
• [5] Check in Database editor
  Data > Database
  Open the table
  Query with WHERE/ORDER

The (clock) icon on a card opens the schedule modal (FREE/PRO plans show a "Max" ribbon).

• Start time (hour 0–23, minute 0–59)
• Interval (minutes)
• Active toggle
• Run mode: Single URL / URL list (batch)

[Save] persists to QuickStart and auto-syncs to the selected docker agent. The agent is what actually runs the schedule — QuickStart never sits in the traffic path.

Verify results in the "Database editor"

Because scheduled runs are headless, the way to check the output is to open the target dataset directly and inspect the rows that piled up.

1. Open Data > Database from the left menu.
2. Click the dataset card that the parser rule is linked to — this opens the Database editor.
3. Pick the target table from the left table list (e.g. items, products, etc.).
4. Use WHERE / ORDER BY at the top to bring recent rows to the top (ORDER BY created_at DESC, ORDER BY id DESC) and inspect what the last scheduled run added.
5. A quick row count (COUNT) or a date-range filter is enough to sanity-check trend — if the count grows each interval, the schedule is healthy.

The run log itself is shown as a table in the Run modal's right-panel "Results" tab when schedule mode is active, but for content verification of the actual harvested data, the Database editor is always the source of truth.

Abre Data > Macro desde el menú. Barra lateral izquierda con las secciones Recientes / Comunidad / Mis macros; el cuerpo es una vista Rejilla/Lista. La barra superior soporta búsqueda por nombre o descripción.

Haz clic en el botón [+ Nuevo macro] de la barra lateral para abrir al instante el asistente de creación.

[+ Nuevo macro] abre un asistente de 4 pasos. Este único asistente cubre tanto registrar la información base del macro como preparar su servidor de ejecución.

1. Paso 1 — Intro de macro: una introducción «¿Qué es un macro?» con cuatro tarjetas de funciones (Encadenamiento de pipelines, Patrón adaptador, Entrada → Salida, Generación de código) y un diagrama de flujo con las cuatro topologías soportadas (Consulta BD · Encadenamiento · Parser · Planificador). Sin entrada — pulsa [Siguiente].
2. Paso 2 — Método de conexión: preparar dónde correrá realmente el macro. Dos opciones:
   • Desplegar nuevo servidor de macro — conecta tu cuenta Railway (pega el token), luego elige lenguaje · framework · stack principal · complementos opcionales (MongoDB / FFmpeg / Puppeteer / WebSocket, etc.) · credenciales de BD. Pulsando [Desplegar servidor] corre un pipeline de 6 pasos (Receive → Decrypt → Docker build → Deploying → Network → Verify), y tu cuenta obtiene un runtime de macro dedicado.
   • Conectar servidor de macro existente — si ya tienes un servidor ejecutando tu código de macro, pon su info de conexión para engancharte.
   Cuando el servidor está listo, el asistente avanza solo.
3. Paso 3 — Selección de tipo: elige uno de los 24 tipos de macro (pipeline ETL · API por lotes · migración de datos · import CSV/Excel · y más). Código inicial acorde al tipo — con parámetros de entrada, andamiaje de bucle y estructura de salida — se autogenera como punto de partida para el siguiente paso.
4. Paso 4 — Registrar: introduce un nombre de macro (p. ej. «Sync BD nocturna», «Traducción masiva») y una breve descripción, luego pulsa [Crear]. El macro se guarda, el asistente se cierra y la vista de detalle (editor de código) se abre automáticamente.

Una barra de pasos arriba sigue el progreso; [Atrás] vuelve al paso anterior (desactivado durante un despliegue). El asistente solo se cierra con el botón [x] de la esquina superior derecha.

Al cerrarse el asistente, se abre un editor de 3 paneles: a la izquierda, la definición de campos de entrada; en el centro, el editor de código con pestañas PHP / Node.js / Python; a la derecha, el panel AI Prompt. El editor viene preparado con un andamiaje para el tipo de macro elegido en el paso 3, así que normalmente solo editas lo importante.

Nota: la localización completa de esta larga sección (rejilla de 6 tarjetas, tabla run_data, ejemplo de código, sección AI Prompt) se hará en una pasada posterior. Mensajes clave: run_data.input_data llega primero como un array de { item_name, item_value, item_type } que hay que voltear a un objeto clave/valor; run_data.conn_string/table_name/file_name vienen rellenos; los campos de retorno data / json / download_links / message deben coincidir con el tipo de salida elegido en el asistente; el panel AI Prompt a la derecha monta, desde una insignia de escenario + tu textarea, un prompt que copias a ChatGPT/Claude/Gemini y cuyo código pegas de vuelta en el editor central.

Cambia a la pestaña Quick Test (icono matraz 🧪) en la parte superior del panel izquierdo. Quick Test ejecuta el código a través del servidor de macro preparado en el paso 2.

1. Rellena los parámetros de entrada fila a fila.
2. Pulsa [Ejecutar] → spinner «Running…».
3. La visualización del resultado depende de la forma de retorno:
   • data → tabla
   • json → visor JSON
   • download_links → lista de botones de descarga
   • message/error → bloque de texto <pre>

Stdout y stderr se transmiten en tiempo real al panel de terminal inferior — genial para depurar.

Una vez que Quick Test se ve bien, entrega el macro a un planificador para ejecución sin supervisión. En la sección Schedule de la vista de detalle, bastan dos valores.

• Hora de inicio (offset) — formato HH:MM (p. ej. 00:00 = medianoche, 03:30 = 3:30 de la mañana). Es el ancla del planning recurrente.
• Intervalo N (minutos) — el macro corre cada N minutos desde la hora de inicio. Introduce 5 para cada 5 minutos, 60 para cada hora, 1440 para una vez al día.
• Interruptor Activo — pausa o reanuda sin perder la configuración.

Ejemplos: inicio 00:00 + intervalo 5 → cada 5 minutos desde medianoche (00:00, 00:05, 00:10…). Inicio 09:00 + intervalo 1440 → una vez al día a las 9 AM.

Una vez guardado, el servidor de macro ejecuta este macro con esa cadencia por su cuenta. QuickStart solo señaliza — la ejecución real y el tráfico viven en el servidor de macro. (No hay expresiones cron — el planificador solo usa hora de inicio + intervalo.)

Abre desde el menú Data > Base de datos. La barra lateral izquierda tiene un botón azul [+ Nuevo dataset] y secciones Recientes / Públicos / Mis / Equipo; el cuerpo es una vista Cuadrícula/Lista en tarjetas.

Los cuatro iconos de cada tarjeta: ▶ (editor de BD) · tabla (editor de celdas) · (ajustes de API) · copiar/borrar.

[+ Nuevo dataset] → modal asistente.

1. Paso 1 — tres opciones de conexión: Desplegar BD nueva (Railway) · Conectar BD existente · Archivo local (JSON/CSV/Excel). Desplegable Tipo de BD (MySQL 3306 · MariaDB 3306 · PostgreSQL 5432 · MongoDB 27017) · host · puerto · BD · usuario · contraseña → [Probar conexión] verifica que las credenciales llegan a la base.
2. Paso 2 — al éxito, elige una tabla; sus campos se despliegan.
3. Paso 3 — registrar el dataset: nombre · descripción · tabla · PK · columnas (* o separadas por coma) · WHERE · LIMIT · ORDER BY · compartido. El panel derecho [Probar consulta] da una vista previa; luego [Guardar].

Pulsa el icono ▶ (play) en una tarjeta de dataset para abrir el editor a pantalla completa, con tres paneles.

• Izquierda — pestañas (Tables/Views/Procedures/Functions), inspector de estructura de tabla, iconos de comandos (Copiar CREATE · Drop · Update · Insert · Delete · Join · Reverse · Refresh).
• Centro — editor SQL multi-pestaña. ▶ Run o F5/F9. Exportar a TSV/CSV/JSON/SQL, o enviar directamente a un macro con «Enviar a Macro».
• Derecha — rejilla de resultados con edición a nivel celda.

Pulsa el botón Ajustes API (icono enchufe) en una tarjeta y se abre el modal de ajustes de API.

1. Básicos: Namespace (obligatorio, cola de URL) · Tabla · Tabla JOIN · Page var (por defecto page) · Por página (50) · caché (0–1440 min).
2. [Autogenerar] → ensambla la forma JSON (main_container → main_fields → item_container → item_fields → detail). Cada campo es un par «clave JSON → variable SQL».
3. [Guardar] → [Desplegar] activa el endpoint.

Los endpoints se publican en GET https://happycat.apidealder.net/endpoint/{namespace}. La sección ACL del modal los asegura.

• API Key (botón autogenerar · envío header/param · nombre de cabecera X-API-KEY)
• Lista blanca de IPs — comodines / CIDR
• Restricción Referer — dominios permitidos
• Rate limit — máx req/min

Ejemplo: curl -H "X-API-KEY: ..." https://happycat.apidealder.net/endpoint/menu_list

Remote Management se divide en cuatro zonas. Sepa dónde mirar antes de empezar a hacer clic.

• Lista de servidores a la izquierda — todos los dominios que gestionas, cada uno con un pequeño punto de estado. Puedes contraer este panel a solo iconos cuando necesites más espacio.
• Área de archivos central — el explorador de archivos del servidor seleccionado. La barra superior contiene la barra de ruta, botones de orden y el conmutador del terminal; el contenido de las carpetas debajo se expande en columnas a medida que profundizas.
• Barra de acciones inferior — Subir · Nueva carpeta · Nuevo archivo · Descargar · Borrar. Los botones se iluminan solo tras elegir un archivo o carpeta.
• Panel terminal — consola que sube desde abajo a demanda. Usa el icono de terminal en la barra superior para mostrar/ocultar.

Haz clic en un dominio de la lista. El punto junto al nombre indica su estado actual:

• Punto verde — en línea. La lista de archivos se abre de inmediato.
• Punto gris — fuera de línea. El contenedor puede estar dormido o la red bloqueada.
• Punto blanco — aún comprobando, o estado desconocido.

Si la lista está vacía verás un mensaje «Despliega primero un servidor» con botones de atajo a las pantallas de despliegue de Single File, proyecto y base de datos.

El área central es un navegador de columnas — cada carpeta que haces clic se abre como nueva columna a la derecha. Se ven hasta cuatro columnas a la vez; las rutas más profundas pliegan la más izquierda automáticamente.

• Barra de ruta — el icono de casa vuelve a la raíz (/), y cada segmento separado por slash es clicable para ir exactamente a ese sitio.
• Entrada de ruta — escribe una ruta completa como /var/www/html/storage/logs y pulsa Enter para saltar sin hacer clic por los directorios.
• Botones de orden — nombre · tamaño · fecha de modificación. Pulsando el mismo botón otra vez invierte el orden.
• Selección — un clic selecciona un elemento, Shift+clic selecciona un rango, Ctrl/⌘+clic añade o quita elementos uno a uno. Al haber más de uno seleccionado, aparece una insignia «N seleccionados» arriba a la derecha de la barra de acciones.

Un clic sobre un archivo para seleccionarlo. Haz un segundo clic y se abre — la vista adecuada aparece a la derecha automáticamente según el tipo de archivo.

• Archivos de texto / código → se abre en el centro un editor con resaltado de sintaxis. HTML, PHP, Vue, CSS/SCSS, JavaScript/TypeScript, JSON y más se detectan automáticamente.
• Imágenes (PNG · JPG · GIF · SVG · WebP · BMP · ICO) → se abren en un visor de previsualización para confirmarlas a ojo.
• Archivos binarios / ejecutables muestran «No se puede editar un archivo binario» y no se abren.
• El botón [Guardar] arriba a la derecha del editor envía el cambio al servidor al momento — sin necesidad de redesplegar. Esc o [Cancelar] cierra sin guardar.
• Solo se pueden abrir en el editor archivos de hasta 10 MB; los mayores muestran un aviso de «demasiado grande».

Combina la barra de acciones inferior con el panel terminal para trabajo real.

• Subir archivo comprimido — arrastra o haz clic para elegir un .zip · .tar · .tar.gz · .tgz. Aparece una vista previa del contenido; al pulsar Start Upload, el archivo se envía en trozos de 1 MB con barra de porcentaje, y al terminar la carpeta actual se refresca sola.
• Subir archivo — elige uno o varios archivos a la vez y se suben tal cual a la carpeta actual (sin descompresión).
• Nueva carpeta / Nuevo archivo — pide un nombre. Solo letras, dígitos, punto, guion y guion bajo.
• Descargar — los archivos se bajan tal cual; si eliges una carpeta se empaqueta automáticamente en un único ZIP.
• Borrar — confirma una vez; con varios seleccionados, van todos en una sola operación.
• Mover / copiar — arrastra un archivo sobre una carpeta y se abre un diálogo de confirmación. O pulsa Ctrl+X/Ctrl+C para dejar la selección en la nevera, y luego Ctrl+V en otra carpeta para pegar con el mismo diálogo.
• Terminal — el icono de terminal en la barra superior hace subir el panel inferior y te conecta a la shell del servidor seleccionado. Teclea un comando y Enter — stdout sale en blanco, stderr en rojo. ↑/↓ recupera comandos previos y el directorio de trabajo actual se lleva por ti, de modo que tras cd some/path el siguiente comando se ejecuta desde ahí.

Tras iniciar sesión, abre desde la navegación superior o el panel Servicios → Single File. La pantalla se divide en una barra superior y el cuerpo:

• Barra superior — izquierda: Historial · Guide · Entrada de título · Guardar (💾). Centro: Desplegable de plantillas. Derecha: Compartir · Ejecutar ▶ · Desplegar 📦.
• Editor central — cuatro pestañas arriba: prompt · html · scss · vuejs. Haz clic para cambiar.
• Panel de vista previa derecho — se renderiza cuando pulsas Ejecutar.

Abre el desplegable de plantillas del centro de la barra y elige «Restaurant Booking System». La secuencia:

1. En cuanto cambia el valor del desplegable, se aplica automáticamente la plantilla elegida.
2. Las cuatro pestañas (prompt · html · scss · vuejs) se rellenan con el código prefabricado y el prompt de IA usado para regenerarlo.
3. La pestaña activa pasa por defecto a prompt — ese texto es el que usa la IA si pides una regeneración.
4. Pulsa Ejecutar ▶ en la barra y la vista previa de la derecha renderiza una pantalla de reservas a 3 columnas (calendario / franjas horarias / formulario de reserva).

Nota: esta plantilla es una pantalla de operario para que el propietario gestione fechas, franjas y disponibilidad de mesas — no una simple landing de menú orientada al visitante.

Esta plantilla se personaliza en dos capas: un modal de Ajustes (sin código) y edición directa de código. El punto de entrada es el icono ⚙ Ajustes arriba a la derecha de la página renderizada, junto al conmutador de tema (☀/🌙).

A. Modal de Ajustes — solo datos, sin código

1. Clic en ⚙ → una superposición a pantalla completa abre un modal centrado (4 pestañas).
2. Time Ranges — ajusta con campos numéricos las horas de inicio/fin de mañana / comida / cena. Una barra de visualización arriba refleja los segmentos coloreados en vivo. Si inicio == fin, el segmento aparece como «(inactivo)».
3. Time Slots — elige paso (10 / 30 / 60 / 120 min) y activa/desactiva franjas individuales en la cuadrícula. Arriba se muestran los recuentos activos/inactivos.
4. Tables — lista con renombrado en línea + borrado, y un campo al pie para añadir mesas. Esta lista alimenta el selector «Mesa» del formulario de reserva.
5. Holidays — cierres recurrentes (Dom–Sáb, 7 botones de conmutación) + festivos concretos (campo de fecha + texto de motivo, lista con añadir/borrar). Los motivos solo se ven en Ajustes, nunca en la pantalla pública.

B. Edición de código — nombre del local, tema, etc.

• pestaña html — reemplaza la cadena del título del encabezado "레스토랑 예약" por el nombre de tu local. Usa Ctrl+F para localizarla.
• pestaña vuejs — mounted() contiene generación de datos simulados (D+1 ~10 %, D+2 ~5 %, D+3 ~2 % de reservas aleatorias + un array de nombres coreanos). En uso real, vacía ese bloque o sustitúyelo por una llamada a API del servidor. Los festivos se obtienen de https://date.nager.at/api/v3/PublicHolidays/{year}/KR — cambia KR por otro código de país si lo necesitas.
• pestaña scss — el tema usa propiedades CSS personalizadas, no variables SCSS. Definidas bajo .reservation (claro) / .reservation.dark (oscuro): --primary (acento de marca), --bg (fondo de página), --card-bg, --text / --text-sub, --border, --holiday (rojo festivo), --closed-bg (ámbar de cierre del local), --occ-bg / --occ-border (franja con sitios libres). Tocando solo esto se desplaza el look global de forma coherente.

Tras editar: Guardar (💾) → Ejecutar ▶ para refrescar. Las pestañas sin guardar muestran un puntito (●).

Ahora prueba tú mismo a hacer una reserva, como si fueras un cliente. Es exactamente lo que hará tu equipo o tus visitantes tras el lanzamiento. Sigue este orden en la vista previa:

1. Elige fecha en el calendario (izquierda) — haz clic en cualquier fecha desde hoy en adelante. Los días rojos son festivos, los ámbar son cierres específicos que hayas puesto, y los atenuados son cierres regulares — no se pueden clicar. Los días con reservas muestran en la esquina un pequeño número tipo «+2» para ver el estado de un vistazo.
2. Elige hora (centro) — al elegir fecha, las horas disponibles aparecen como botones redondeados. El número «2/5» significa «2 ya reservadas de 5 mesas en total». Tono claro = bastantes sitios, oscuro = casi lleno, tachado = completo y no clicable.
3. Ver quién ya reservó — al hacer clic en una hora se despliega abajo la lista de reservas existentes para esa franja (nombre del comensal, mesa, personas). Evita dobles reservas.
4. Rellena el formulario (derecha) — la fecha y hora elegidas aparecen como resumen arriba. Rellena de arriba abajo:
   • Nombre del comensal
   • Teléfono: escribe solo dígitos, se formatea solo como «010-1234-5678»
   • Mesa: las mesas ya ocupadas en esa hora se ocultan automáticamente, así no se pueden doble-reservar
   • Personas: de 1 a 20
   • Nota: peticiones especiales (cumpleaños, accesibilidad, etc.)
5. Pulsa [Reservar] — si el nombre está vacío, aparece un aviso. Si no, sale una confirmación «Reserva completada», y el «+N» del calendario y el «N/M» del botón de hora suben al instante 1 punto. El formulario se limpia solo y queda listo para la siguiente.
6. Prueba tema claro y oscuro — pulsa el icono ☀/🌙 arriba a la derecha. Tu local puede usarse a plena luz del día o en un ambiente nocturno tenue, verifica la legibilidad en ambos.

Para comprobar vistas en móvil y tableta, basta con arrastrar el borde de la ventana del navegador con el ratón para estrecharla. A medida que la pantalla se hace más estrecha, las 3 columnas se reorganizan en 2 y terminan apiladas en 1. El equipo suele usar tabletas y los clientes móvil — asegúrate de que texto y botones siguen siendo lo bastante grandes en pantallas estrechas.

El despliegue usa el hosting Railway. La primera vez que pulsas Deploy, aparece un modal «Conectar cuenta de Railway». El orden:

1. Pulsa Log in with Railway → se abre la página de login de Railway en una pestaña nueva.
2. ¿Aún no tienes cuenta Railway? Regístrate gratis allí (email o GitHub).
3. En la pantalla «QuickStart solicita permiso de despliegue», pulsa Authorize.
4. Volverás a QuickStart y aparecerá un toast «Conectado».

Esto solo se hace una vez — los siguientes despliegues se saltan este paso.

Con la cuenta conectada, vuelve a pulsar Deploy. Se abre un modal de progreso que recorre 8 etapas — cada una se pone verde al terminar.

1. Pack — empaquetar tu código.
2. Upload — enviar el paquete a Railway.
3. Install — instalar las librerías necesarias.
4. Build — compilar SCSS y empaquetar Vue.
5. Migrate — colocar los archivos estáticos en la ubicación del servidor web.
6. Start — arrancar el contenedor.
7. Health — verificar que el sitio responde de verdad.
8. Complete — finalizar y asignar la URL.

En total suele tardar de 1 a 3 minutos. Despliega Mostrar logs al pie del modal para verlo en directo.

Cuando termina el despliegue, en la parte baja del modal aparece un botón Abrir dominio. Al pulsarlo, el dominio gratis asignado automáticamente (p. ej. happycat.apidealder.net) se abre en una pestaña nueva. Comparte esa URL con quien quieras.

Más adelante, para conectar tu propio dominio (p. ej. myname.com), entra en Ajustes → Gestión de Dominios del panel, registra el dominio personalizado y añade en tu proveedor DNS los registros indicados allí.

Desde la navegación superior o el panel, haz clic en Servicios → Base de datos para abrir la página de base de datos. La pantalla se divide en una barra lateral izquierda y un cuerpo central.

• Barra lateral izquierda — arriba un botón azul [+ Nuevo dataset], y debajo secciones «Recientes», «Datasets públicos», «Mis datasets», «Equipo».
• Cuerpo central — la barra superior tiene un buscador (nombre / tabla / URI), un conmutador de vista cuadrícula⇄lista y un selector de filas por página (20/50/100). Más abajo, tus datasets existentes aparecen como tarjetas.
• Cuatro iconos en cada tarjeta — ▶ (play) abre el Editor de base de datos · icono de tabla abre el Editor de celdas · botón Ajustes API (icono enchufe) abre Ajustes de API · más copiar/borrar. Doble clic en el nombre de la tarjeta para renombrar en línea.

Haz clic en [+ Nuevo dataset] en la barra lateral y en el centro se abre un asistente modal de 3 pasos. El flujo:

1. Paso 0 — Vista general: tarjetas explicativas sobre datasets y capacidades. Pulsa Next para continuar.
2. Paso 1 — Método de conexión: elige una de tres grandes opciones.
   • Desplegar BD nueva — aprovisiona un contenedor de BD nuevo en Railway.
   • Conectar BD existente (lo más común) — conectar a una BD que ya tengas.
   • Archivo local — subir un JSON / CSV / Excel como dataset.
3. Para «Conectar BD existente»:
   • Desplegable Tipo de BD — MySQL (puerto 3306 por defecto) · MariaDB (3306) · PostgreSQL (5432) · MongoDB (27017). Al elegir, el puerto por defecto se autocompleta.
   • Host · Puerto · Nombre de base · Usuario · Contraseña
4. Pulsa [Probar conexión] abajo — si funciona, el asistente avanza solo al paso 2; si falla, aparece abajo un error rojo.

Una vez conectado, el asistente te guía automáticamente por dos pasos más.

Paso 2 — Selección de tabla

• Las tablas de la BD aparecen como filas (nombre · icono · número de filas · comentario).
• Al hacer clic en una tabla, el panel derecho se expande mostrando su lista de campos.

Paso 3 — Registrar el dataset (aquí se finalizan los metadatos del «dataset»)

• Izquierda — formulario de registro:
  • Nombre del dataset (obligatorio) — p. ej. «Lista de menú»
  • Descripción del dataset
  • Desplegable de tabla destino (obligatorio)
  • Campo clave primaria — autoselecciona id si existe.
  • Columnas incluidas — * (todas) o separadas por comas como id,name,price
  • Cláusula WHERE — p. ej. stock_flag = 1
  • LIMIT — p. ej. 0,100 (offset 0, 100 filas)
  • ORDER BY — p. ej. created_at DESC
  • Casilla Compartir — exponer en solo lectura al resto.
• Derecha — probador de consulta: al pulsar [Probar consulta] se ejecuta el SQL real con la configuración actual y se muestran número de filas, columnas y una vista previa en vivo. Ajusta las condiciones de la izquierda hasta ver lo que quieras.
• Pulsa [Guardar] → el asistente se cierra → aparece una nueva tarjeta de dataset en la pantalla principal.

Al pulsar el icono ▶ (play) de una tarjeta de dataset se abre el Editor de base de datos como superposición a pantalla completa. Tiene tres paneles.

• Izquierda — explorador de objetos: pestañas arriba (Tables / Views / Procedures / Functions). Haz clic en cualquier tabla y en el inspector inferior se ven columnas · tipos · comentarios. La tira de comandos sobre la lista cubre Copiar script CREATE, Drop, Update, Insert, Delete, Join, Reverse, Refresh.
• Centro — editor SQL: gestiona varias consultas como pestañas. Doble clic sobre una pestaña para renombrar. La barra tiene un botón ▶ Run y atajos F5 / F9. Los resultados se exportan a TSV / CSV / JSON / SQL o se mandan directamente a un Macro con «Enviar a Macro».
• Derecha — cuadrícula de resultados: filas de la última consulta, con edición a nivel celda.

Aprovecha este paso para confirmar que los datos que vas a exponer se ven de verdad como quieres. Si no, arréglalos aquí primero.

Ahora expón este dataset como API REST. En la tarjeta del dataset pulsa el botón Ajustes API (icono enchufe) para abrir la modal Ajustes API.

1. Básicos
   • Namespace (obligatorio) — será la cola de la URL. menu_list produce /endpoint/menu_list.
   • Tabla — tabla objetivo (autocompletada desde el dataset)
   • Tabla JOIN — segunda tabla opcional si quieres hacer join
   • Page var — nombre del parámetro de paginación (por defecto page)
   • Por página — 50 por defecto
   • Tiempo de caché — 0–1440 minutos
2. Autogenerar la respuesta: al pulsar [Autogenerar] se construye la forma JSON como main_container → main_fields → item_container → item_fields → (opcional) detail. Cada campo es un par «clave JSON → variable SQL» (p. ej. name → $customer_name). También puedes añadir o quitar campos a mano.
3. Control de acceso (ACL) — detalles abajo.
4. Pulsa [Guardar] para almacenar la definición de API.
5. Pulsa [Desplegar] para lanzar el pipeline de despliegue — aparece una barra de progreso y el endpoint queda en vivo al terminar.

Tras el despliegue, el endpoint queda público (con un dominio personalizado) en:

• GET https://happycat.apidealder.net/endpoint/menu_list
• GET https://happycat.apidealder.net/endpoint/menu_list?page=2
• GET https://happycat.apidealder.net/endpoint/menu_list/csv — descarga CSV

Autenticación con API Key (sección ACL en la modal de API):

• API Key — pulsa [Autogenerar] para obtener una clave aleatoria estilo UUID.
• Transporte — header o param.
• Nombre de cabecera, p. ej. X-API-KEY / Nombre de parámetro, p. ej. api_key.

Ejemplos de llamada

Por cabecera:

curl -H "X-API-KEY: your-secret-key" https://happycat.apidealder.net/endpoint/menu_list

Por parámetro de consulta:

curl "https://happycat.apidealder.net/endpoint/menu_list?api_key=your-secret-key"

Fetch del navegador:

const res = await fetch('https://happycat.apidealder.net/endpoint/menu_list', { headers: { 'X-API-KEY': 'your-secret-key' } });
const data = await res.json();

Protecciones adicionales (todas en la sección ACL):

• Lista blanca de IPs — comodines (192.168.1.*) y CIDR (10.0.0.0/24).
• Restricción por Referer — lista de dominios permitidos.
• Rate limit — máximas solicitudes por minuto.

Desde la navegación superior o el panel, haz clic en Servicios → Recopilación de datos para abrir la pantalla de lista de reglas del parser. El diseño replica la página de Base de datos.

• Barra lateral izquierda — arriba un botón azul [+ Nueva regla de parser], luego «Recientes», «Reglas públicas» y «Mis reglas» (con filtro por usuario).
• Cuerpo central — barra superior con búsqueda, cambio rejilla/lista, paginación. Abajo, tus reglas existentes salen como tarjetas (o filas de tabla).
• Iconos en cada tarjeta — ⚗️ (tubo) Prueba de ítems · ⏱ (reloj) Programar (muestra cinta «Max» si tu plan no lo incluye) · editar · duplicar · borrar. Las tarjetas muestran nombre de regla, página de prueba, descripción y fecha de creación.

Pulsa [+ Nueva regla de parser] en la barra lateral izquierda → se abre un asistente de 3 pasos.

1. Paso 1 — Vista general: cuatro tarjetas informativas (Extraer / Rastrear / Mapear campos / Reutilizar) y un diagrama de pipeline (Regla de parser → Base de datos / Macro / Planificador / API). Sin entradas, solo contexto.
2. Paso 2 — Conexión de base de datos: elige un dataset en una lista de tarjetas como destino de los datos recopilados. Cada tarjeta indica nombre de dataset, tipo de BD, tabla y dominio. Tras seleccionar, pulsa [Siguiente] — se ejecuta un flujo auto de 3 fases («Conectar agente → Desplegar motor del parser → Despliegue completado») que instala el motor del parser en el agente docker elegido.
3. Paso 3 — Registrar regla:
   • Nombre de la regla (obligatorio) — p. ej. «Naver News sección IT»
   • Descripción — una línea sobre lo que recopila
   • Haz clic en [Crear regla] y el asistente se cierra, aterrizando directamente en la pantalla de ajustes del parser.

El editor de regla abre con un campo URL objetivo arriba. Introduce la página a rastrear (p. ej. https://news.example.com/it) y configura la extracción. El parser combina tres enfoques.

• Loop Splitter (3 entradas — principal + 2 auxiliares) — un patrón de texto que corta el HTML en unidades repetidas. Ejemplo: usar parte de <li class="article"> como splitter para que cada artículo sea un ítem.
• Selectores XPath (hasta 3 niveles) — elige título / URL / imagen dentro de cada unidad repetida con XPath. El selector debe apuntar a un conjunto de nodos (array); si el valor está en //h3/a/text(), escribe solo //h3/a.
• Selectores JSON (3 niveles) — si la página devuelve JSON, usa notación de punto/corchete para apuntar a la ruta del array. Para datos con forma data.items[0].title, escribe data.items para producir el array de ítems.
• Posprocesado por función — la columna «function» se aplica a cada valor extraído:
  • trim(@p) — recorta espacios (@p es el valor actual)
  • replace(old,new) / regex(pattern,replacement)
  • Llamadas PHP directas como strtoupper(@p)
  • Helpers integrados: get_data() · slice() · remove() · map()

El camino más rápido no es teclear selectores a mano — es meter un trozo de la fuente (vía Loop Splitter) en el AI Prompt y dejar que la respuesta de la IA registre la regla automáticamente. Justo eso cubre el Paso 4 de abajo.

En vez de teclear decenas de selectores a mano, puedes pasar el ejemplo a una IA y aplicar la regla completa que devuelva. Es la vía recomendada para principiantes.

Requisito previo — debes haber introducido la URL objetivo en el Paso 3 y ejecutado la prueba de extracción desde la pestaña «Test» del editor al menos una vez para que exista un cuerpo de respuesta. Ese cuerpo se inyecta automáticamente en el prompt.

A. Construir y copiar el prompt

1. En el panel de resultados de la prueba, pulsa arriba el botón 🪄 «AI Prompt» (icono varita) resaltado.
2. El tipo de documento (HTML / JSON / XML) se autodetecta, el cuerpo se extrae y se ensambla un prompt.
3. El panel de editor justo debajo del botón se llena con un prompt en formato markdown. Incluye:
   • Un párrafo de presentación de tarea
   • Un ejemplo del HTML/JSON fuente
   • Definiciones objetivo — delimitador de repetición, campo detail-URL, clave única, y por cada columna: etiqueta, nombre de variable, tipo, reglas de partición, función de posprocesado
   • Un JSON de ejemplo y la instrucción explícita «No emitas ningún texto que no sea JSON»
4. El prompt es multilingüe (8 idiomas: coreano · inglés · japonés · chino · ruso · alemán · francés · español) — un documento coreano produce etiquetas coreanas, uno chino etiquetas chinas, etc.
5. Haz clic dentro del panel → Ctrl+A → Ctrl+C para copiar todo.

B. Pegar en la IA que prefieras y ejecutarla

1. Pega en ChatGPT / Claude / Gemini y envía.
2. La IA responde con un JSON de regla.
3. Copia la respuesta (o solo la parte JSON).

C. Pega la respuesta para autocompletar los campos de la regla

1. De vuelta al mismo panel, pulsa el botón 📥 «Import Pattern» (icono de importar) — se abre un área de pegado con pista del formato esperado.
2. Pega tu JSON y pulsa [Aplicar patrón].
3. El delimitador de repetición, selectores, clave única y campo detail-URL se mapean automáticamente a la parte superior de la regla, y cada columna (etiqueta, nombre de variable, tipo, reglas de partición, función de posprocesado) se rellena de una sola vez en la lista de campos. Los nombres de variable duplicados se renombran solos para evitar colisiones.
4. El editor pasa automáticamente a la pestaña «fields» para verificar al momento, y en la parte inferior aparece un toast resumen tipo «Pattern applied: N fields».

Con los selectores más o menos puestos, verifica que extraen lo que quieres. Dos puntos de entrada:

• El icono ⚗️ en la tarjeta de una regla
• O la pestaña «Test» arriba en el editor de regla

El modal Prueba de ítems se abre con:

1. Barra de estado superior — resumen «N ítems / M columnas». Si N es 0, el Loop Splitter está mal — arréglalo primero.
2. Botones de exportación — CSV · XLSX · JSON · HTML, útiles para pasar una muestra al equipo.
3. Rejilla de resultados — Row# + cabeceras autoderivadas del primer ítem, una fila por ítem extraído.
4. Hover de celda — al pasar el ratón aparece un botón «Copy» que lleva el valor al portapapeles.

Si los resultados se ven mal, cierra el modal, ajusta selectores/funciones y vuelve a probar — este ciclo es ~70% del trabajo de un parser.

Cuando la prueba salga limpia, confirma los ajustes de guardado en la sección «Save» del editor.

• Desplegable Save type — a «Database» (ya preestablecido si elegiste un dataset en el asistente).
• Tabla / nombre de colección destino — donde caen las filas. Si no existe, el agente la crea en el primer run, usando las columnas detectadas en tu prueba.
• DB mode — Dataset (enlazado) / Custom. Custom te deja escribir directamente host · usuario · contraseña · base (útil para escribir en otra BD distinta a la del asistente).

Qué pasa al ejecutar

1. Ejecutas la regla (botón «Persist» en la prueba o la planificación del siguiente paso) y el agente docker golpea la URL objetivo.
2. Se extraen ítems: Loop Splitter → selectores XPath/JSON → procesado por funciones.
3. Los ítems extraídos se insertan en la tabla destino. Los duplicados (por hash de URL o la clave que elijas) se saltan o actualizan automáticamente.
4. Como esta tabla vive en la misma BD que la tarjeta de dataset del Paso 5, el endpoint de API /endpoint/... construido antes sirve ya los datos más frescos.

El último paso hace que corra solo. Haz clic en el icono ⏱ (reloj) de una tarjeta de regla para abrir el modal de planificación. Esta función es solo MAX — en otros planes el icono muestra cinta «Max».

1. Campos de la planificación:
   • Hora de inicio — hora (0–23) + minuto (0–59). P. ej. 03:30 AM.
   • Intervalo (minutos) — 60 = cada hora, 1440 = una vez al día.
   • Activa — interruptor. Off conserva la configuración pero pausa las ejecuciones.
   • Modo de ejecución — URL única (una URL objetivo) o Batch (itera una lista de URLs, una por línea).
2. Pulsa [Guardar] — la planificación queda registrada en QuickStart y se autosincroniza al agente docker elegido, que es quien la ejecuta de verdad.
3. Desde ahí, el agente dispara la regla en tu intervalo y canaliza filas al dataset. QuickStart solo señaliza — no queda en la ruta de tráfico, así que no hay sobrecarga de ancho de banda.

Encadenado con un macro (opcional) — en el diagrama de flujo del editor, usa el desplegable «Seleccionar macro» para elegir un macro. Justo después de terminar un rastreo, se ejecuta. Ejemplo: comparar los precios recién rastreados con los de ayer; si bajaron en N%, enviar alerta por Slack.

Empujar directo de la BD de producción (B) a la de analítica (C) parece lo más sencillo, pero en la vida real los nombres de columnas no cuadran, se cuelan datos personales y las zonas horarias no coinciden — siempre hace falta un sitio para ordenar las cosas en medio. El dataset de QuickStart (A) existe para eso.

• B (origen externo) — la tienda o ERP en producción. Tocar ahí significa parar el servicio, así que solo lectura.
• A (mi dataset · Docker) — tu mesa de trabajo. Renombrar columnas, sustituir URLs, quitar campos, añadir agregados — todo aquí.
• C (destino externo) — la BD que alimenta el cuadro de mando BI, la de un partner, cualquier destino. Solo viaja hacia C la versión ya limpia desde A.

Ventajas:

1. B y C pueden correr motores distintos (MySQL ↔ PostgreSQL …) — A hace de puente.
2. Los datos quedan en A; si se borra C, se vuelve a empujar. Rollback barato.
3. En A se itera y prueba lo que haga falta; solo cuando todo cuadre se abre la vía hacia C.

Primero creamos el dataset (A) donde acabarán los datos traídos de B.

1. Menú superior → Datos → Base de datos. Se abre el listado.
2. Arriba a la derecha [+ Nuevo dataset]. Rellenar:
   • Nombre — p. ej. replication_staging
   • Tipo de BD — MySQL o PostgreSQL. Igualar a B reduce conversiones.
   • Host — por defecto la BD del agente Docker (autorrellenada).
   • Nombre de BD — p. ej. my_staging
3. [Guardar] — aparece la fila con los iconos 🔌 test · editar · migración · exportar.
4. Antes de seguir, pulsar 🔌 y confirmar «Conexión correcta».

El dataset A queda como el búfer intermedio donde pasarán brevemente los datos venidos de B y los que se enviarán a C.

En la lista, sobre la fila A, pulsa el icono Migración. Se abre un modal grande con tres columnas.

• Izquierda · Deck A — tu dataset (replication_staging) ya está enganchado; tablas y campos se ven al instante.
• Centro · barra — indicador de dirección (A → B / B → A), botón [Invertir] y la lista de acciones (⚡ hard_sync, 🔄 soft_sync, ➕ append …).
• Derecha · Deck B — formulario de la BD remota.

La dirección por defecto es A → B (sacar fuera), pero nosotros queremos traer desde B, así que pulsamos [Invertir] y pasamos a B → A. La insignia de Deck B cambia a «source» y la de Deck A a «target».

Ahora completa en Deck B la conexión de la BD de producción externa (B):

1. Host — p. ej. origin.acme.com o 10.0.1.23
2. Tipo de BD — MYSQL · POSTGRESQL · MONGODB · ELASTICSEARCH
3. Nombre de BD — p. ej. sales_db
4. Cuenta / contraseña — se recomienda mucho una cuenta de solo lectura. Con solo SELECT no se puede tocar B por error.
5. [Probar conexión] → «Conexión correcta» y la lista de tablas remotas se carga sola.

Tras una conexión correcta, Deck B muestra la lista de tablas y aparece [Siguiente] arriba a la derecha. Al pulsarlo Deck B pasa de «conexión» a «selección de tablas».

1. Seleccionar tablas — marcar las que quieres traer. [Todas las tablas] marca todo. Es más prudente empezar pequeño (orders · customers · products).
2. Filtro (opcional) — el campo WHERE al pie de Deck B acepta created_at > '2026-01-01'. LIMIT 0, 1000 trae solo 1000 filas de muestra. Siempre limitar en la primera pasada.
3. Inspeccionar campos (opcional) — el icono junto a una tabla abre la lista de columnas; desmarca las que no quieras copiar (password_hash, national_id …) — esas columnas quedan fuera.
4. ⚡ hard_sync — en la barra central pulsa [hard_sync] (icono rayo). El diálogo «¿Ejecutar hard_sync en {count} tablas?» pide confirmación. En A cada tabla se rehace DROP → CREATE → INSERT. La barra de progreso muestra tabla actual / total y el avance por fila.
5. Al terminar, el log de abajo pone «Success» y la lista de tablas de Deck A se refresca con las nuevas.

Alternativas a hard_sync:

• 🔄 soft_sync — solo UPDATE/INSERT/DELETE por clave primaria; lo ya presente en A que no esté en origen no se borra. Para sincronización periódica.
• ➕ append — inserta solo los id que aún no están en A. Ideal para ingesta incremental.
• 🔀 merge — inserta solo filas cuyo id no choca con A.

Los datos crudos ya están en A, pero mandarlos tal cual a C suele romper algo. Dos vías para limpiarlos.

① Sustitución dentro del modal de Migración — al pie de la barra central hay un bloque «Configurar sustitución» para reemplazo masivo de cadenas. Si B usa https://cdn-old.acme.com/ y C espera https://cdn.acme.com/:

1. Elige el modo [Texto] (o [Regex]).
2. Campo izquierdo: https://cdn-old.acme.com/
3. Campo derecho: https://cdn.acme.com/
4. En el siguiente hard_sync / soft_sync el valor se reescribe al vuelo y cae ya corregido en A (o en C en el paso 6). El origen no se toca.

② Editor SQL — vuelve a la lista de datasets y pulsa en la fila A para ejecutar SQL.

• ALTER TABLE orders DROP COLUMN password_hash; — quitar columnas sensibles
• UPDATE orders SET created_kst = CONVERT_TZ(created_at, 'UTC', 'Asia/Seoul'); — conversión de zona horaria
• CREATE TABLE orders_summary AS SELECT product_id, COUNT(*) cnt, SUM(amount) total FROM orders GROUP BY product_id; — tabla agregada

Antes del paso 6, valida en el editor: SELECT * FROM orders_summary LIMIT 20;.

Ahora se empujan los datos limpios de A hacia el destino externo (C). Desde la lista de datasets, abre otra vez la migración de la fila A.

1. Verificar dirección — en la barra central debe leerse A → B, donde B en la UI es ahora nuestro C. Si sigue en B → A del paso 3, pulsa [Invertir]. Deck A pasa a origen, Deck B a destino.
2. Conexión destino en Deck B (= C) — host warehouse.acme.com, tipo POSTGRESQL, nombre reporting, cuenta con permisos INSERT/UPDATE. [Probar conexión] → correcta.
3. Elegir las tablas en Deck A — marca orders_summary · products · customers_clean o las que hayas preparado.
4. Elegir la acción:
   • C es de estreno: ⚡ hard_sync, se copia la estructura y si faltan tablas se crean solas.
   • C ya tiene datos y esto es sincronización periódica: 🔄 soft_sync; UPDATE/INSERT/DELETE contra C a partir de A.
   • C solo acumula: ➕ append; solo van a C los id nuevos en A.
5. Ejecutar — confirma y observa la barra. Si la red se interrumpe, las filas se trocean; volver a lanzar continúa desde donde quedó.

Una vez pasada a mano la tubería, envuélvela en una macro y planifícala. Servicio → Macro, crea una nueva y desde el código llama a la migración.

• El cuerpo se parece a fetch('/dataset/api/mig_run', { method: 'POST', body: JSON.stringify({ dataset_id: 123, action: 'soft_sync', deck_b: {host, db_name, user, password}, sel_tables: ['orders'] }) }). Lo más fiable: ejecuta el botón manualmente una vez y copia la petición desde la pestaña Network.
• En la pestaña Planificación de la macro, define el cron. P. ej. cada día a las 3:00 — 0 3 * * *.
• Mantén B → A y A → C como dos macros independientes; así un fallo a un lado no congela el otro. Encadena el orden «primero B → A, luego A → C» mirando el success del resultado de la primera.

Lista de verificación:

1. SELECT COUNT(*) FROM orders sobre C y comparar con A y B.
2. Elige un id reciente al azar y compara las columnas en B · A · C.
3. Inserta adrede una fila en B y sigue si llega a A y después a C en 5–10 min. Si no, mira el log de ejecución de la macro y el log de resultado de la migración.

En estos casos, un pegado vale más que un SQL a mano:

• Marketing te pasa un Excel con 500 códigos promo para subir a la BD del servicio.
• Diseño entrega una Google Sheet con nombre · precio · categoría para subir de una vez.
• Un partner te envía un CSV con lista de miembros para importar tal cual.
• Quieres dejar al asistente IA una tabla con 100 ejemplos ya preparados.

El Editor de celdas funciona como Excel: una rejilla filas × columnas. Ctrl+C desde Excel y Ctrl+V en cualquier celda — tabulaciones o comas detectadas automáticamente y las filas se colocan. Sin diálogo de mapeo: desde la celda de inicio las columnas se llenan de izquierda a derecha.

Menú superior → Datos → Base de datos. Aparece tu lista de datasets en tarjetas o filas.

1. Localiza la fila de un dataset tuyo (user_id = tú). Los compartidos son de solo lectura.
2. Pulsa el icono Editor de celdas en las acciones de la fila. Se abre un modal a pantalla completa.
3. Disposición: a la izquierda el panel de opciones (selector de tabla · paso de página · orden · búsqueda · reemplazo); en el centro la rejilla; a la derecha la barra (guardar · +/– fila · Undo/Redo · copiar · exportar CSV/SQL · ✨ asistente IA).
4. En el desplegable de la izquierda elige la tabla destino. Sus filas existentes se cargan. Tabla vacía → rejilla vacía.

Antes de pegar confirma orden de columnas Excel = orden de la tabla. Si no cuadra, los valores van a columnas equivocadas.

• Cabeceras — la primera fila de la rejilla muestra nombre y tipo. Excel debe ir de izquierda a derecha en el mismo orden.
• Clave primaria (PK) — columnas con 🔑. Con id auto_increment, no incluyas id en la selección; la BD lo asigna al INSERT.
• Columnas NOT NULL — cabeceras en rojo no pueden ir vacías; rellénalas en cada fila.
• Columnas de más/menos — lo que sobra a la derecha se ignora; lo que falta queda vacío.

Si no encaja: regenera con Crear rejilla (X × Y) en el panel izquierdo, o reordena en Excel antes de copiar.

Núcleo del flujo. En Excel/Sheets selecciona el rango sin la columna id y Ctrl+C. Vuelve al editor:

1. Haz clic en la celda inicial. Generalmente la más a la izquierda, una fila debajo de la última existente — las nuevas filas entran al final.
2. Ctrl+V. El editor detecta tabulador (por defecto Excel) o coma (CSV) y reparte filas/columnas.
3. La rejilla crece, las filas nuevas aparecen con fondo ligeramente teñido — «nueva, sin guardar».
4. Pega otros rangos eligiendo otra celda inicial.

Separador manual — desplegable Separador a la izquierda: tab · coma · coma segura (respeta comillas). CSV con comas dentro de comillas → coma segura; lo entrecomillado queda en una celda.

Antes de guardar, pasa el ojo por la rejilla. Tres estados se marcan con color.

• Fila teñida — fila «nueva» recién pegada, será un INSERT.
• Punto amarillo en esquina — celda modificada de una fila existente, UPDATE.
• Fila en gris — en cola de borrado. La barra de estado muestra «🗑 X filas se borrarán» y un botón [Restaurar].

Gestos habituales:

• Doble clic en celda para teclear dentro.
• Barra derecha / — fila vacía en cursor / borrar fila actual.
• Ctrl+Z · Ctrl+Y — deshacer/rehacer (hasta 50 snapshots).
• Buscar y reemplazar — panel izquierdo; texto o regex, actúa sobre toda la rejilla.

La barra muestra ✏ X filas, Y celdas modificadas. Si no es el número esperado, arregla antes de guardar.

Si todo parece bien, guarda con el botón Guardar de la derecha o Ctrl+S. El editor ensambla y ejecuta:

• Filas nuevas → INSERT INTO tabla (col1, col2, ...) VALUES (...). Las PK auto_increment las asigna la BD.
• Filas con celdas modificadas → UPDATE tabla SET col=val WHERE id=..., solo las columnas que cambiaron.
• Filas en cola de borrado → DELETE FROM tabla WHERE id=....

Éxito: toast «X filas guardadas». El tintado de filas nuevas vuelve a normal, los id vacíos reciben el número que da la BD. Ya son datos normales.

Si falla — el panel memo muestra el error: normalmente NOT NULL en blanco, tipo incompatible, duplicado unique. Arregla la fila y guarda otra vez.

as if to be es una instrucción por aprendizaje de patrón: «Si el resultado ya terminado (Deseado) luce así, entonces transforma lo crudo (Actual) con la misma lógica». En vez de redactar la regla con palabras, enseñas a la IA unas cuantas salidas de esa regla y ella generaliza al resto.

El Editor de celdas provee dos marcadores (color 1 · color 2).

• Marcador 1 (Deseado · turquesa por defecto) — celdas ejemplo correcto del resultado.
• Marcador 2 (Actual · naranja por defecto) — celdas crudas que la IA debe rellenar.

Por qué es potente:

1. No hace falta describir la regla en lenguaje natural: los ejemplos la «dicen».
2. Funciona también para reglas demasiado sutiles para las palabras (tono, matiz, registro).
3. Un solo prompt procesa cientos de celdas. Se acaba el «pegar fila por fila a la IA».
4. Añadir/ajustar ejemplos mejora la calidad al instante. El bucle de ajuste va por segundos.

Con el dataset abierto en el editor, arma esta estructura:

1. Columna de entrada — lo que la IA lee. P. ej. es_text, product_desc, address_raw.
2. Columna de salida — lo que la IA rellena. P. ej. en_text, summary, city. Si no existe, créala por SQL: ALTER TABLE ... ADD COLUMN en_text TEXT;.
3. 2–5 filas semilla — columna de salida rellenada a mano. Tres buenos ejemplos deciden la calidad de 500 filas.

Cómo escoger buenos ejemplos:

• Variedad — corto, largo, caso especial. Ejemplos muy parecidos dejan a la IA perdida en los bordes.
• Dificultades mezcladas — fácil, medio, complicado.
• Estilo explícito — saltos de línea, mayúsculas, formal/informal deben verse en los ejemplos.

En la paleta de marcadores del panel derecho, pulsa la primera muestra (turquesa · Deseado) para activarla (borde resaltado).

1. Haz clic en cada celda de ejemplo rellenada a mano — pasa a turquesa, queda marcada como «Deseado».
2. Los marcadores alternan: volver a clicar los quita.
3. Arrastra para seleccionar un rango y pulsa la muestra para marcar en bloque.

Renombrar la etiqueta — lápiz al lado de la etiqueta («Deseado» por defecto). Para traducción «Traducción al inglés», para resumen «Resumen de una línea», para clasificación «Categoría». La etiqueta entra en el prompt del paso 5 y afina la tarea para la IA.

Ahora activa la segunda muestra (naranja · Actual).

1. Selecciona por arrastre las celdas vacías o crudas de la columna salida — p. ej. en_text desde la fila 4 hasta el final.
2. Un clic en la muestra naranja; todas pasan a naranja, son los objetivos para la IA.
3. La columna de entrada (es_text) no se marca; la IA lee automáticamente la entrada de cada fila objetivo.
4. Renombra también esta etiqueta: «Al inglés», «Más corto», «Asignar categoría» — una instrucción de una palabra.

Al final la rejilla muestra celdas turquesa (ejemplos correctos) + celdas naranja (vacías a rellenar) una al lado de otra — es la forma canónica de «as if to be».

Clic en ✨ Asistente IA en la barra derecha. El editor lee los marcadores, arma un prompt estructurado y lo copia automáticamente al portapapeles. Toast «Prompt IA copiado».

Estructura típica (el texto concreto varía según etiquetas y ejemplos):

1. Mensaje del sistema — "You are a data transformation assistant"
2. Enunciado de tarea — derivado de las etiquetas. P. ej. "Transform each 'Current Value' cell according to the pattern shown in 'Desired Value' examples."
3. Lista de ejemplos — (fila, columna, valor) de cada celda turquesa.
4. Lista de objetivos — (fila, columna, valor crudo) de cada celda naranja.
5. Contrato de salida — solo un array JSON [{"pos":"fila,columna","return_txt":"valor"}, ...].

Parada — sin marcadores sale un aviso. Vuelve a los pasos 3 y 4.

Pega el prompt en Claude · ChatGPT · Gemini y envía. La IA responde con un array JSON.

1. Selecciona solo la parte JSON y Ctrl+C. Texto alrededor da igual — coge el array.
2. En el editor, Ctrl+V en la caja Memo de abajo a la derecha. Memo es la pista de aterrizaje para la salida IA.
3. Verifica de un vistazo: [{"pos":"3,5","return_txt":"Translated"},{"pos":"4,5","return_txt":"Another"}, ...].

Depurar palabrería — la IA suele preceder con «Here is the JSON you asked for:». Toma solo el array (de [ a ]). El botón Aplicar del paso 7 parsea JSON estricto.

JSON en Memo — botón 📥 Aplicar resultado IA en la barra derecha. El editor parsea y escribe cada return_txt en la celda pos. Toast «Aplicadas X celdas».

• Las celdas escritas llevan el punto amarillo modificado — en la rejilla, aún no en la BD.
• ¿Un resultado no convence? Ctrl+Z deshace pero tira todo el lote IA. Suele ser más rápido corregir a mano las malas.
• OK → Ctrl+S. Mismo camino UPDATE que en la sección 1 paso 6.

Bucle y estrategia por lotes:

1. Antes de aplicar el lote entero, mira 10 muestras. Si la calidad se desvía, ajusta ejemplos/etiquetas en 3–4 y regenera el prompt.
2. Calidad ok: pasa de página, marca el siguiente lote, repite 5–7.
3. Al final, mantén una columna meta (batch_note) con los ejemplos usados por tramo — relanzar una sección cuando cambie el estilo es trivial.

Un caso concreto se entiende mejor. La cafetería "Sodam" quiere una carta digital en una tableta a la entrada. Hacerla desde cero es lento; coger la solución menupan del mercado y vestirla con la identidad de la cafetería es muchísimo más rápido.

Lo que cerramos en 30–45 min:

• Logo — sustituir el logo predeterminado de menupan por el de "Sodam".
• Carta — borrar la demo (Americano 4500 KRW, etc.) e introducir la carta real.
• Color y tipografía — pasar del azul por defecto a un beige cálido + marrón oscuro, y la fuente del cuerpo a una tipografía con buena lectura en coreano.
• Publicación — sacarlo en tu propio dominio, p. ej. menu.sodam.kr.

¿Por qué bifurcar?

1. Diseño, esquema de BD y panel de admin ya están listos — ahorras un 90 % de tiempo de construcción.
2. El fork vive bajo tu cuenta, tu dominio, tu BD; el original no se toca, solo tu copia se edita.
3. Si menupan sube una actualización después, tu fork no se ve afectado — tus personalizaciones se quedan.

Menú superior → Comunidad → Mercado de soluciones (o /solution). Galería en formato tarjetas.

1. Filtros arriba (Todos / Project / Macro / Community / Direct) — selecciona Project — o teclea menupan / carta digital en la búsqueda.
2. Pulsa la tarjeta y se abre la página de detalle: vistas previas, descripción de funciones y recursos requeridos (dominio / BD).
3. En esa página pulsa Bifurcar como nuevo proyecto. Aparece el modal de fork.
4. Rellena:
   • Dominio — uno de tus dominios activos, p. ej. menu.sodam.kr. ¿Sin dominio? Abre en otra pestaña Configuración → Dominios y consigue un subdominio gratuito (~.apidealder.net) antes de seguir.
   • Dataset — la BD donde vivirán los datos del menú. Nuevo o uno tuyo existente.
   • Nombre y descripción — p. ej. nombre sodam_menu, descripción "tablero del menú en cafetería Sodam".
   • Conmutador "Auto-deploy" — actívalo para que el primer deploy corra justo al terminar el fork. Recomendado la primera vez.
5. Pulsa [Ejecutar fork]. Tras 30 s a 2 min sale un toast de éxito. En la barra lateral Mis proyectos aparece la nueva fila arriba y el espacio de trabajo se abre solo.

Dos partes: (a) subir el nuevo logo con Gestión remota; (b) cambiar la URL del logo en el editor de programas.

(a) Subir el logo por Gestión remota

1. Menú superior → Servicio → Gestión remota. En la lista de servidores de la izquierda, selecciona el dominio de tu proyecto bifurcado (menu.sodam.kr). El indicador debe estar en verde.
2. En la barra de ruta del centro escribe /public/assets y Enter.
3. Abajo, [Subir archivo]; elige el logo del café (sodam_logo.png). No hace falta archivo comprimido para un único fichero.
4. Comprueba en el navegador https://menu.sodam.kr/assets/sodam_logo.png — debería responder 200 OK con la imagen.

(b) Reemplazar la URL del logo en el editor

1. Vuelve al espacio de trabajo → proyecto → Programas. Sale la lista (suele ser main, menu_list, …).
2. Doble clic en el programa que pinta el logo (normalmente main) → editor abierto.
3. Abre Buscar y reemplazar (Ctrl+H): busca la URL antigua, casi siempre /assets/menupan_logo.png.
4. Buscar menupan_logo.png, reemplazar por sodam_logo.png, Reemplazar todo. HTML y CSS de un golpe.
5. Ctrl+S para guardar; en la previa de la derecha debe verse tu logo.

menupan trae una página de administración para que el personal del local añada / edite / borre platos. Hay dos rutas, recomendamos claramente la admin.

(Recomendado) admin

1. Entra en https://menu.sodam.kr/admin (o la ruta que defina menupan) e inicia sesión. Las credenciales por defecto están en el README de la página de detalles.
2. En la barra lateral → Gestión de menú. Categorías (Café · Postres · Sin café) y artículos (Americano · Latte · …) se ven en tablas/tarjetas.
3. Borra todas las entradas demo y añade tu carta línea a línea:
   • Nombre (Americano) · precio (4500) · descripción (...) · categoría (Café) · foto (URL del archivo subido por Gestión remota).
4. El día a día — editar, ordenar, conmutar visibilidad — todo aquí. Esta pantalla la puede usar también el personal.

(Alternativa) Editar la BD directo

• Para operaciones masivas no contempladas en la admin (p. ej. subir 500 a todo el café de una vez): Datos → Base de datos → el dataset creado en el fork → Editor de celdas.
• Selecciona menu_item y edita, o en el editor SQL: UPDATE menu_item SET price = price + 500 WHERE category='Café';. (Ver Best Practices → Editor de celdas · Pegar para insertar.)
• Cuidado: tocar columnas que la admin desconoce o romper PK/FK puede dejar la admin inoperativa. Por eso el día a día va por la admin.

Antes de tocar el código, encuentra el color que quieres en el navegador. Los cambios son temporales — al recargar se borran — así que prueba sin miedo.

1. Abre la carta publicada (https://menu.sodam.kr) en Chrome y pulsa F12 para DevTools (o clic derecho → Inspeccionar).
2. El icono flecha en cuadro de arriba a la izquierda (selector de elementos): púlsalo y haz clic en la zona a recolorear (cabecera, fondo de tarjeta). A la derecha, en Styles, salen las reglas CSS aplicadas.
3. Pasa el ratón sobre un valor de color (background-color: #2563eb;) y verás un cuadradito de muestra. Pulsalo y se abre el selector de color: arrastra o teclea el hex.
4. La fuente igual: clic en font-family: ...; y escribe otro nombre ('Pretendard', 'Noto Sans KR', sans-serif).
5. Cuando la combinación te guste, anota los hex y el nombre de la fuente. Los usarás en el paso 6 (IA) o en el 7 (código).

Trucos útiles:

• Comparar varios elementos — si tocas la cabecera y el cuerpo no cuadra, ajusta los dos juntos.
• Pestaña Computed — muestra el valor finalmente aplicado (con herencia). Útil para rastrear de dónde sale algo raro.
• Forzar :hover — el botón :hov arriba en Styles fija :hover·:focus para revisar también esos estados.

Si la elección manual del paso 5 no acaba de cuadrar, pide a la IA alternativas: salen 5–10 candidatas a la primera. Plantilla para Claude / ChatGPT:

Estoy haciendo el tablero de carta digital para la cafetería "Sodam".
Concepto: "café coreano cálido y tranquilo".
Espacio: interior de tonos madera, luz amarilla cálida.

Paleta actual:
- Fondo cabecera: #2563eb (azul)
- Fondo cuerpo:   #ffffff
- Texto:          #1f2937
- Acento:         #2563eb

Sugiere 5 sets de paletas que encajen mejor con ese concepto.
Para cada set, da los 4 hex (cabecera / fondo cuerpo / texto / acento)
y una línea corta describiendo la sensación.

También recomienda 3 tipografías Google (o coreanas libres)
que se lean bien en coreano y que casen con esta atmósfera.

La IA suele responder así:

• Set 1 (beige cálido · marrón oscuro) — cabecera #6b4423, fondo #f5ecd9, texto #3c2415, acento #c97a4a · se funde con la madera y la luz amarilla
• Set 2 (mínimo moderno) — …
• …

Validar candidatos:

1. Vuelve a F12 (paso 5) y pega los hex uno a uno; quédate con el set que más te guste.
2. Mezclar es válido: "cabecera del set 1, acento del set 3" gana muchas veces. Anótalo.
3. Para tipografías, busca en https://fonts.google.com los nombres y comprueba el dibujo real sobre tu menú.

Llevamos la elección de F12 + IA al código real. Después de esto, los cambios sobreviven al recargar y los ven todos.

1. Espacio de trabajo → proyecto → Programas — doble clic en el programa de diseño (normalmente main o theme).
2. Pestaña SCSS (o CSS). Las variables de color suelen estar arriba ($primary-color, $bg-color …).
3. Pega los hex en esas variables:
   $header-bg: #6b4423;
$body-bg: #f5ecd9;
$text-main: #3c2415;
$accent: #c97a4a;
4. Para la tipografía coreana, añade arriba del SCSS @import url('https://fonts.googleapis.com/css2?family=Pretendard&display=swap'); y pon en body font-family: 'Pretendard', sans-serif;.
5. Ctrl+S. La previa de abajo debería actualizarse al instante.

Dos formas de publicar

• Opción A — deploy manual (por defecto): botón 🚀 Desplegar en la barra del workspace. 1–2 min de build y entrega; menu.sodam.kr pasa al nuevo diseño. Lo más seguro la primera vez.
• Opción B — guardar = desplegar (genial para iterar): activa el conmutador "Guardar = desplegar" en la barra del workspace. A partir de ahí, cada Ctrl+S dispara despliegue automático. Perfecto para barrer rápido colores, tipografías y menús viendo el efecto en producción. En horario de servicio, mejor desactivado (evitar parpadeos en clientes).

Tras desplegar, abre https://menu.sodam.kr en móvil y tableta para la revisión final. Esa misma URL en la tableta de la entrada — eso es lo que ven los clientes.

En lugar de escribir fetch() a mano y montar tu propio v-for, hay un patrón: tomas un componente ya diseñado (block), lo metes en un slot de un frame, conectas un dataset — la página está hecha. Esta guía recorre el ciclo entero.

Otra vez la analogía: un marco de fotos vacío (frame) recibe fotos ya diseñadas (blocks); un álbum (dataset) aporta el texto a imprimir; colgar el marco en la pared es el despliegue.

La página de hoy — «listado de productos de nuestra tienda»: cabecera arriba, diez tarjetas de producto en el centro (filas reales del dataset), pie abajo. Una página simple.

• Un paso más allá: en montajes avanzados se enlazan 8–10 tablas del dataset — cotizaciones, noticias, rankings — a varias variables a la vez (list / list3 ... list10) y la página entera se renderiza desde una única spec JSON. Esta guía se queda en la primera puntada: una variable (list) + un dataset (products).
• Por qué este enfoque — la persona de diseño solo cuida el aspecto del block, la de datos solo el dataset, la de página solo el emparejamiento de slots en el Builder de programa. Roles bien separados. Cambian datos sin tocar diseño y al revés.

Primero los datos reales. Si haces la pantalla sobre una tabla vacía no podrás verificar nada. Datos antes que pantalla, regla básica.

1. Menú superior → Datos → Base de datos. ¿No tienes dataset propio? [+ Nuevo dataset]. P. ej. nombre shop, MySQL/PostgreSQL.
2. En su editor SQL () crea la tabla:
   CREATE TABLE products (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), price INT, image_url TEXT);
3. Abre el Editor de celdas sobre products y mete 5–10 filas. Pegar desde Excel (Ctrl+V) es lo más rápido (mira Best Practices → Editor de celdas · Pegar para insertar).
4. Comprobación rápida: SELECT * FROM products LIMIT 3;. En el paso 6 enlazaremos este dataset a la variable list.

Qué columnas — solo las que el block necesite. name · price · image_url ya basta. Más no estorba, pero empezar simple acelera la depuración.

Ahora el block que enchufaremos en el slot. Menú superior → Diseño → Block (o /layout/block) abre la biblioteca. [+ Nuevo block].

1. Nombre — algo memorable como product_card_list.
2. Zona HTML — plantilla de rejilla de tarjetas. Truco: nombra la variable list:
   <div class="card-grid">
  <div class="card" v-for="item in list" :key="item.id">
    <img :src="item.image_url">
    <div class="name">@{{ item.name }}</div>
    <div class="price">@{{ item.price }}</div>
  </div>
</div>
3. Zona CSS/SCSS — rejilla básica:
   .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { padding:14px; border:1px solid #eee; border-radius:8px; }
4. sample_data — datos ficticios en JSON con la clave list:
   { "list": [
  {"id":1,"name":"Muestra A","price":1000,"image_url":"/assets/sample.jpg"},
  {"id":2,"name":"Muestra B","price":2000,"image_url":"/assets/sample.jpg"}
] }
5. Guardar. La previsualización del Block Builder debe pintar dos tarjetas desde sample_data automáticamente. Esa previsualización es la verificación crítica. Si no sale, comprueba que el nombre de variable en HTML (list) coincide con la clave en sample_data (list).

Ahora la página (programa). Servicio → Proyecto → [mi proyecto] → + Nuevo programa, o abre uno existente en el Builder de programa (Coder Builder). La misma herramienta con dos nombres. Ocho pestañas de paso.

1. Ocho pestañas — db · list · detail · search · hook · style · code · menu. Pulsa la segunda, list.
2. Conmutador de modo — arriba en list, dos modos: «campos / slots». Por defecto «campos» (table-like). Queremos meter blocks de diseño → cambia a slots. La UI pasa a 3 etapas:
   • 1) Selección de frame — qué marco con cuántos slots y cómo dispuestos.
   • 2) Configuración de slots — qué block en qué slot, cómo se mapean variables.
   • 3) Previsualización del código — resultado sintetizado para revisar.
3. Si «frame / slot» suena abstracto: piensa «un marco de 3 filas esperando tres fotos». Elegimos el frame en el paso 5.

En 1) Selección de frame en modo slot, abre la dropdown y elige algo simple — «3-row (arriba/centro/abajo)» sirve. Frame elegido, [Aplicar], y en 2) Configuración de slots se crean automáticamente las filas de slot 1, slot 2, slot 3 …

1. En la fila del slot 2 (centro), abre la dropdown de selección de block y elige product_card_list del paso 3. Las opciones suelen leerse id - nombre - autor.
2. Al elegirlo, el área del slot muestra al instante la previsualización del block con su sample_data — dos tarjetas. Si las ves, el block está bien colocado.
3. Slot 1 (arriba) y slot 3 (abajo) admiten igual blocks de cabecera/pie ya hechos, o pueden quedar vacíos. En la primera pasada, basta con el slot 2.
4. Cada fila de slot tiene además un data_placer (selector origen) y un data_selector (selector destino). De momento los dos a list. Su sentido se ve en el paso 6.
5. El block está en el slot pero todavía come del sample. La conexión real al dataset toca a continuación.

El paso más importante. Cableamos la variable list dentro del block hasta las filas reales de la tabla products.

Qué significa cada uno:

• data_placer (selector origen) — el nombre de variable tal como está escrito dentro del block. Nuestro block tiene v-for="item in list", así que es list.
• data_selector (selector destino) — el nombre de variable a nivel de página. Si en una misma página hay dos listas de tarjetas, list chocaría; mapeas a product_list y review_list. Con una sola lista, dejarlo en list está bien.

Para simplificar, mantenemos los dos en list y seguimos.

Conectar el dataset real — abre la sección «variables de datos / data_vars» en la cabecera del Builder de programa (o panel lateral). Si está vacía, + Añadir una fila.

1. Nombre de variable: list (debe coincidir con el data_selector del paso 5).
2. Dataset: elige shop del paso 2.
3. Tabla: products.
4. WHERE (opcional): vacío = todo. P. ej. price > 0.
5. LIMIT (opcional): 0, 20 para las 20 primeras.
6. ORDER BY (opcional): id desc para más nuevas primero.
7. Guardar.

Internamente queda una ficha JSON (no la escribes tú, conceptualmente):

{"var_name":"list","dataset":{"id":42,"table_name":"products","str_limit":"0, 20","str_order":"id desc"}}

Esa JSON es la spec que sigue el renderer: en tiempo de petición ejecuta SELECT * FROM products ORDER BY id desc LIMIT 20, vuelca las filas en list, y el v-for del block toma el relevo.

Todo cableado, vamos a 3) Previsualización del código en modo slot (o pestaña code) y dejamos que el sistema sintetice.

1. Pulsa Generar código (sincronizar). El sistema ensambla:
   • El esqueleto HTML del frame + el HTML de cada block en <[slot-1]>·<[slot-2]>·…
   • Dentro de cada block, list → data_selector del paso 5 (aquí sigue list).
   • Las definiciones de data_vars se añaden al init de la página.
2. Repasa la salida. Si v-for="item in list" sigue intacto y arriba aparece list = await fetch('/api/...') o una inyección server-side, vamos bien.
3. Ctrl+S o Guardar. La previsualización debería ahora soltar tarjetas reales de products. Esperas 5–10 tarjetas del dataset, no las 2 del sample_data.
4. Final: 🚀 Desplegar en la workspace (o «guardar = desplegar»), comprobación en el dominio en producción.

Por qué la spec JSON es el frontend — en este punto, todo el comportamiento de la página se reduce a tres JSONs:

• slot_info — qué frame + qué slots + qué blocks.
• data_vars — qué variable se conecta a qué dataset, tabla y filtro.
• ui_info — opciones extra de UI (aquí casi vacío).

Ya no hay código a mano: tocas estos tres JSONs y la página se redibuja. La magia comienza ahí — hacer 10 pantallas se acerca al coste de hacer una, porque cada nueva pantalla es sobre todo una nueva combinación de blocks y vinculaciones existentes.

Para un sitio sencillo, una URL GET tipo https://site.com/search?q=hello alcanza. Pero más de la mitad de los sitios reales no son tan simples.

• Resultados solo después de login — sin cookie de sesión, recibes una página vacía o la pantalla de login.
• POST + cuerpo JSON — el término no está en la URL, vive dentro del cuerpo: {"q":"hello","page":1,"size":20}.
• Tokens CSRF / Bearer — cada petición necesita una cabecera adicional, si no, vuelve vacía.
• X-Requested-With · Referer · User-Agent — sin estas marcas AJAX, el servidor a menudo responde vacío a propósito.

Reescribir cada cabecera a mano no es viable. La vía más rápida: copiar la petición real del navegador como un comando cURL de una línea, dejar todo como se capturó y reemplazar solo los pedazos que cambian por fila por variables.

Lo que vamos a construir — un dataset de N palabras clave (p. ej. keyword_list), luego llamar N veces a la API de búsqueda del sitio y apilar las respuestas en otro dataset (p. ej. search_results).

Abre el sitio objetivo en Chrome (o Edge) y haz una búsqueda como sueles hacerlo.

1. F12 abre las DevTools, luego pestaña Network.
2. Al buscar la lista se llena de peticiones. La que quieres normalmente lleva search, list, query o api en el nombre y devuelve JSON.
3. Haz clic en la petición y en el panel Response de la derecha confirma que el cuerpo son los datos buscados.
4. Clic derecho en la fila → Copy → Copy as cURL (bash). También en Windows: la versión bash tiene el quoting más limpio.

El portapapeles ahora tiene una sola línea como curl 'https://...' -H 'Cookie: ...' -H 'Authorization: ...' --data-raw '{...}'. Parece largo, pero contiene URL · cookies · todas las cabeceras · cuerpo de un solo golpe.

No pegues el cURL directo en el parser. Primero confirma en Postman (o Insomnia / Bruno) que una llamada funciona exactamente. Si aquí falla, la regla del parser también fallará.

1. Abrir Postman → arriba izquierda Import → pestaña Raw text.
2. Pegar la línea cURL con Ctrl+V, luego Continue → Import.
3. Se abre una nueva pestaña con cabeceras y cuerpo precargados. Pulsar Send arriba a la derecha.
4. Estado 200 y cuerpo igual que en el navegador → listo. Cuerpo vacío, 401, 403 o 302 → revisa la lista de abajo.

• Cookie expirada — la causa más común. Vuelve al navegador, confirma que sigues logueado y haz F12 → Copy as cURL otra vez.
• Cabecera perdida en la importación — Postman a veces deja caer 1–2 cabeceras. Pon Headers del navegador y de Postman lado a lado y compara línea por línea.
• Referer / Origin — algunos sitios devuelven vacío sin estas dos. Si el navegador las envía, agrégalas también.

Mirando la petición de Postman que funciona, marca lo que cambiará en la próxima llamada. Candidatos típicos:

• Término de búsqueda en el cuerpo POST — "q":"hello" → "q":"${query}"
• Página / offset — "page":1 → "page":${page} (los números sin comillas)
• Categoría / filtro — "cat":"food" → "cat":"${category}"
• Rango de fechas — "from":"2026-04-01" → "from":"${date_from}"
• Variable en el path de la URL — /api/user/12345 → /api/user/${user_id}

El truco es nombrar cada variable idéntica a la columna del dataset que vas a crear. Si vas a llamar a tus columnas query · page · category, escribe ${query} · ${page} · ${category} también en el cURL. Nombres iguales → mapeo automático en el siguiente paso, sin cableado a mano.

Formato — el parser reconoce el patrón ${nombre}. Solo letras ASCII, dígitos y guion bajo (sin espacios, sin caracteres con tilde, sin puntuación).

El parser lee el dataset fila por fila y mete cada fila en los huecos de variables del cURL. En este paso preparamos las N combinaciones de entrada como dataset.

1. Menú lateral Datos > Datasets → arriba derecha + Nuevo dataset.
2. Nombre claro como keyword_list. Añade columnas con nombres exactamente iguales a las variables del Paso 4 — p. ej. query (varchar) · page (int) · category (varchar).
3. Filas de dos formas — (a) tecleadas en la UI una a una, (b) preparadas en Excel/Sheets y pegadas vía Cell Editor en modo pegar → insertar en BD (ver guía cell-paste).
4. No empieces a lo grande. 3–5 filas bastan para arrancar. Con 100 filas, un error son 100 llamadas mal hechas.

También conviene preparar ya el dataset de salida. P. ej. search_results con query, rank, title, url, snippet. Apuntarás el parser a él en el Paso 6.

Ahora creamos la regla en el parser y conectamos el cURL al dataset.

1. Menú lateral Datos > Parser → arriba derecha + Nueva regla.
2. Campo Página de prueba (URL base) — pega el endpoint del inicio del cURL, p. ej. https://example.com/api/search. Si la URL contiene una variable, escríbela igual: ${user_id}.
3. Campo cURL — Ctrl+V sobre la línea con variables marcadas del Paso 4. El parser separa automáticamente método, cabeceras, cookies y cuerpo, y descubre los patrones ${...} registrándolos como variables candidatas.
4. Elegir el dataset de entrada — keyword_list del Paso 5. Los nombres iguales se mapean automáticamente; los desiguales muestran un dropdown de mapeo al lado.
5. Elegir el dataset de almacenamiento de respuestas — search_results. En el campo JSON path indica qué ruta (p. ej. data.items[*]) se desdobla en una fila.
6. Guardar. La regla queda registrada — todavía no se ha hecho ninguna llamada.

Hay dos modos de ejecución.

• ① Override directo, una vez — en la página de la regla, junto al botón ▶ Ejecutar, el panel de entrada de variables permite teclear directo query="café madrid", page=1 y disparar una sola llamada. Vista previa de la respuesta y filas extraídas, lado a lado. Quédate en este modo hasta que la forma de la respuesta esté entendida del todo.
• ② Bucle sobre dataset — cambiar el panel a «Desde dataset», elegir keyword_list del Paso 5, pulsar Ejecutar. La barra de progreso sube de 0/N a N/N, y las respuestas se añaden fila a fila a search_results.

Mientras corre, mira — número de errores (vacío / 401 / 5xx), muestra de respuesta, filas guardadas. Una o dos filas fallidas es normal; si fallan más del 50 %, para inmediatamente y revisa el cURL.

Programación — la pestaña Schedule de la regla permite ejecutar diario/horario/cualquier hora cron. Una lista de palabras clave en la entrada → resultados frescos apilándose cada día en la salida.

Antes de subir, empaqueta todo lo que te dio el diseñador en un único archivo zip. La forma de empaquetar decide cómo se ven las rutas en el servidor — sigue estas reglas.

• Envuelve todo en una carpeta superior — p. ej. pon imágenes y css dentro de design_assets/ y comprime esa carpeta. Tras la extracción verás /ruta-de-destino/design_assets/logo.png, con el nombre de la carpeta como un nivel.
• Usa solo letras, dígitos, guion (-) y guion bajo (_) en los nombres — los espacios o caracteres no ASCII tienden a romper las referencias de URL. Ejemplo: banner principal.png ❌ → main-banner.png ✅
• Formatos admitidos — .zip · .tar · .tar.gz · .tgz. Normalmente basta con .zip. En Windows clic derecho sobre la carpeta → « Comprimir a ZIP »; en macOS, en Finder, clic derecho → « Comprimir ».
• Ejemplo de estructura —
  design_assets/
 ├─ images/logo.png
 ├─ images/hero.jpg
 ├─ fonts/pretendard.woff2
 └─ css/theme.css

Desde la barra de navegación superior o el panel, ve a Servicios → Gestión remota. Verás la barra lateral con la lista de servidores a la izquierda, el explorador de archivos a cuatro columnas al centro y la barra de acciones abajo.

1. En la lista de la izquierda, haz clic en el dominio al que vas a subir (por ej. myshop.apidealder.net). El pequeño círculo indica el estado.
   • Punto verde — listo; la lista de archivos se abre de inmediato.
   • Punto gris — desconectado. El contenedor está detenido o aún no se ha desplegado.
   • Punto blanco — verificando estado.
2. Si la lista está vacía, aparecerá el aviso « Despliega primero un servidor ». Despliega un single-file o proyecto y vuelve.
3. Al seleccionar, el centro expande la raíz (/) y muestra el árbol de archivos real.

Los assets se cargan por URL desde el navegador, así que deben vivir en una carpeta accesible públicamente. En servidores single-file lo habitual es public/assets.

• Barra de ruta — el icono de casa arriba salta a la raíz; cada segmento separado por barras es cliqueable para ir allí directo.
• Entrada directa de ruta — en el campo contiguo, escribe /public/assets y pulsa Enter para saltar de una sola vez en lugar de ir carpeta por carpeta.
• Si no existe la carpeta assets — usa [Nueva carpeta] en la barra inferior para crear assets y entra. En el nombre solo se admiten letras, dígitos, punto (.), guion (-) y guion bajo (_).
• Tras moverte, confirma que la barra de ruta dice /public/assets. Aquí se extraerá el archivo; si eliges mal, tocará borrar y re-subir.

Con la ruta en /public/assets (o la carpeta pública que prefieras), haz clic en [Subir archivo] (icono de nube con flecha arriba) en la barra inferior. La modal se abre en tres fases.

1. Zona de soltar — arrastra el zip al recuadro de puntos o haz clic para abrir el selector de archivos. Se admiten .zip · .tar · .tar.gz · .tgz.
2. Vista previa — la modal dibuja el árbol de carpetas/archivos dentro del archivo y muestra arriba el nombre, tamaño y destino de extracción (/public/assets). Verifica aquí que el envoltorio exterior está bien y que no hay archivos ocultos intrusos (.DS_Store de macOS, etc.). El [x] arriba a la derecha permite cambiar el archivo.
3. Enviar — pulsa [Enviar]. El archivo se envía en trozos de 1 MB con barra de progreso en vivo; redes inestables retoman limpiamente y archivos grandes (cientos de MB) suben de forma estable.
4. Al terminar la transferencia, el servidor extrae automáticamente el archivo, la carpeta actual se refresca y aparece la nueva design_assets (o images/fonts/css). También salta un toast de completado.

¿Solo necesitas subir un puñado de archivos sueltos? Junto a la otra opción está [Subir archivos] — selecciona varios y se copian tal cual en la carpeta actual, sin extraer.

Los archivos subidos se sirven directamente desde el dominio desplegado. Por ejemplo, si subiste a /public/assets/design_assets/images/logo.png en myshop.apidealder.net, la URL en el navegador es https://myshop.apidealder.net/assets/design_assets/images/logo.png. (public es la raíz web, por eso no aparece en la URL.)

Ahora abre el editor single-file (Servicios → Single File) y referencia los assets que acabas de subir.

• Insertar imágenes en la pestaña HTML —
  <img src="/assets/design_assets/images/logo.png" alt="logo">
<img src="/assets/design_assets/images/hero.jpg">
• Referenciar fondos y fuentes en la pestaña SCSS —
  .hero { background: url("/assets/design_assets/images/hero.jpg") center/cover; }
@font-face { font-family: 'Pretendard'; src: url("/assets/design_assets/fonts/pretendard.woff2") format('woff2'); }
• Regla clave — usa siempre una ruta absoluta que empiece con /. Las rutas relativas (../assets/...) pueden comportarse distinto entre la vista previa y producción; mejor evitarlas.
• Para incluir un CSS externo completo, añade @import url("/assets/design_assets/css/theme.css"); al inicio de la pestaña SCSS.

Una vez enlazadas las referencias, pulsa [Run ▶] arriba a la derecha del editor single-file para ver la vista previa. Si todo está bien, pulsa [Deploy 📦] para publicarlo en el dominio real.

1. Vista previa Run — el panel derecho renderiza el resultado en tiempo real. Verifica que aparecen las imágenes, cargan las fuentes y el CSS no está roto.
2. Deploy — el botón inicia un deploy por pasos, normalmente en 1–2 minutos. Al terminar aparece un enlace al dominio en el cuadro de resultado.
3. Verificar en el dominio desplegado — abre el enlace en una pestaña nueva o visita https://tu-dominio/ directamente. Haz una recarga forzada (Ctrl+F5 o Cmd+Shift+R) para saltar el caché.
4. Si una imagen no aparece, vuelve a la gestión remota y reexamina la ruta. Si la estructura extraída no coincide con lo esperado, borrar la carpeta y volver a subir desde el Paso 4 suele ser más rápido que parchear rutas a mano.

En la superficie los síntomas suelen parecerse, pero la causa varía. Si aplica alguno de estos casos, leer los logs del lado servidor es el camino más corto.

• Errores de servidor 500 / 502 / 504 — el navegador solo muestra « Ocurrió un error »; la causa real vive en el log del servidor.
• Página en blanco — normalmente un error fatal de PHP silenció la salida. El log casi seguro tiene una línea Fatal Error o Parse Error.
• API devolviendo 400/422 con causa poco clara — la regla de validación exacta que se disparó queda registrada en el log del controlador.
• Trabajos en background (cola, planificador, macro) « parecen correr pero sin resultado » — los fallos silenciosos solo dejan rastro en el log.

Archivos de log clave:

• storage/logs/laravel.log — el log principal de PHP/Laravel. El más consultado.
• storage/logs/laravel-YYYY-MM-DD.log — si la rotación diaria está activa.
• storage/logs/worker.log y logs específicos de features (macros, parseadores) cuando esos subsistemas mantienen sus propios archivos.

En el navegador, ve a Servicios → Gestión remota.

1. En la lista de servidores de la izquierda, haz clic en el dominio con el problema. Punto verde = contenedor alcanzable. Gris/blanco = contenedor dormido — espera un minuto y vuelve a intentarlo.
2. Pulsa el icono de terminal (▷_) en la barra de herramientas superior del centro. Un panel terminal se despliega desde abajo. Volver a pulsar el mismo icono lo oculta.
3. El encabezado muestra el directorio de trabajo actual (p. ej. /var/www/html) y el cursor parpadea en el campo de entrada. Este cursor está conectado directamente al shell del servidor elegido, por lo que los comandos se ejecutan allí.
4. Primero confirma dónde estás:
   pwd
ls
   Normalmente aterrizas en la raíz del proyecto (/var/www/html).

En un proyecto Laravel, los logs viven en storage/logs. Salta allá desde el terminal.

• cd storage/logs — relativo a la carpeta actual; basta con una línea si ya estás en /var/www/html.
• cd /var/www/html/storage/logs — ruta absoluta; funciona desde cualquier punto.
• pwd — confirma que acabaste en /var/www/html/storage/logs.

El terminal recuerda el directorio de trabajo, así que cada comando siguiente se ejecuta respecto a esa carpeta — no tienes que volver a teclear la ruta.

Alternativa: navega primero a /storage/logs en el explorador y luego abre el terminal — la ruta te sigue sola. Útil cuando no te gusta teclear rutas.

Ya dentro de la carpeta, primero ve qué archivos hay y cuáles se tocaron hace poco, luego asómate al contenido.

• ls -lhrt — lista ordenada por tiempo de modificación ascendente; el más reciente queda al final. -h imprime tamaños legibles (KB/MB).
• cat laravel.log — vuelca todo el archivo. Solo con archivos pequeños; varios MB inundan el terminal.
• tail -n 100 laravel.log — las últimas 100 líneas. La forma más rápida de ver el error más reciente. Ajusta el número.
• tail -f laravel.log — seguimiento en vivo. Las nuevas líneas aparecen según se escriben; reproduce el bug en el navegador y ve cómo fluyen las entradas. Ctrl+C para detener.
• head -n 50 laravel.log — las primeras 50 líneas; útil para entradas de arranque al principio.
• wc -l laravel.log — total de líneas. Si son cientos de miles, salta directo a grep.

Cuando el archivo es largo, tail por sí solo no alcanza. grep imprime solo las líneas que contienen un patrón dado — caballo de batalla de la depuración por log.

• grep -i error laravel.log — todas las líneas con « error »; -i hace la búsqueda insensible a mayúsculas, así « Error », « ERROR » y « error » coinciden.
• grep -in "fatal\|exception" laravel.log — líneas con « fatal » o « exception », con números de línea (-n). Varios patrones se combinan como OR con \|.
• grep -A 5 -B 2 "SQLSTATE" laravel.log — localiza líneas con SQLSTATE e imprime 2 líneas antes (-B 2) y 5 después (-A 5) de contexto. Ideal para ver la stack trace junto a la excepción.
• grep "2026-04-25 15:4" laravel.log — acota a una franja horaria (rango 15:40). Combinado con el intervalo del Paso 1 la búsqueda se estrecha mucho.
• grep -c "production.ERROR" laravel.log — imprime solo el número de coincidencias. Bueno para « con qué frecuencia pasa esto ».
• tail -f laravel.log | grep -i error — seguimiento en vivo con filtro. Solo las líneas con « error » llegan a pantalla.

Flujo típico — grep -i error para hacerte la foto → elige un mensaje llamativo y corre grep -A 10 "ese mensaje" para el contexto → anota rutas de archivos y números de línea que salgan.

Las líneas de error que caza grep suelen llevar un ruta de archivo y número de línea (p. ej. /var/www/html/app/Services/Order.php:127). Con eso vas directo al fix.

1. Recoge el terminal, pega /var/www/html/app/Services en el campo de ruta del explorador y pulsa Enter.
2. Doble clic sobre el archivo objetivo para abrirlo en el editor con resaltado de sintaxis. Corrige la línea y pulsa [Guardar] — se aplica al instante, sin redeploy.
3. Vuelve al terminal y arranca un seguimiento en vivo con tail -f /var/www/html/storage/logs/laravel.log, después reproduce el bug en el navegador.
4. Si el mismo error ya no aparece, Ctrl+C y listo. Si aparece otro, vuelve al Paso 5 y sigue acotando.

Cuando necesitas logging de depuración temporal — mete una línea \Log::info('[debug] ' . json_encode($variable)); en el código sospechoso, guarda, reproduce y léela con grep "[debug]" laravel.log. Una vez entendida la causa, borra la línea Log::info(). Es lo más seguro.

Casi todo equipo de desarrollo en activo sigue este flujo. Cambios pequeños, verificación en cada etapa. Lanzar un cambio directo a producción es romper producción de golpe.

• Local es rápido. Guardar → refrescar, un segundo. Primer sitio donde confirmas que el cambio coincide con tu intención.
• Stage refleja el dominio/BD/tráfico de prod. Última red para "en mi máquina funcionaba".
• Producción es lo que ven los usuarios reales. Un problema descubierto aquí llega como queja del cliente.

Hoy recorremos las tres etapas de cabo a rabo. El trabajo en sí pasa por pedirle a Claude o Codex en VS Code en lenguaje natural. Tu papel ya no es teclear línea a línea, sino plantear con claridad, verificar el resultado y decidir si puede pasar.

Cinco minutos una vez y el resto del día corre más rápido.

1. En QuickStart Web abre Descargar paquete de tu proyecto, descomprime, en VS Code File > Open Folder.
2. El panel QUICKSTART de abajo aparece solo. Auth silenciosa — la huella del .env conecta al servidor sin formulario de login.
3. Pestaña UTIL → al final [🚀 SMART SETUP]. Ejecuta composer dump-autoload → npm install → vite build. Al terminar, vite dev y el servidor PHP integrado están ambos vivos.

Abres http://localhost:<puerto> — tu proyecto funciona. Esa es la línea de salida.

Dos caminos, normalmente usados a la vez.

• ① Panel de chat VS Code + MCP — apunta a Claude (o Cursor / Copilot Chat / Codex CLI) a un servidor MCP del proyecto. En el chat: "añade una columna phone a la tabla users y una fila al formulario de registro". La IA escribe el SQL, edita blade/vue/scss y lanza el build, todo en una pasada.
• ② Botones IA de la pestaña UTIL — selecciona código y haz clic en UTIL → grupo IA → [CODE REVIEW] · [REFACTOR] · [EXPLAIN] · [i18n TS]. Cada uno construye un prompt rico en contexto del proyecto que pegas en Claude/Codex para una respuesta mucho más afilada.

Una buena petición — sé concreto en "qué, dónde, en qué forma". Ejemplo: "En /admin/users muestra la columna phone justo después de email; cuando esté vacía pinta \"-\"". Con eso la IA no se pierde.

En el momento que la IA guarda, vite dev hace hot-reload del navegador. Casi todos los .blade.php·.scss·.vue·.js se refrescan al guardar; los cambios del backend PHP los recoge php artisan serve.

1. Mira la pantalla real — ¿posición correcta, comportamiento correcto, forma correcta?
2. Vistazo rápido a la consola F12 — sin errores rojos antes de seguir.
3. UTIL → SYSTEM → [CLEAN CACHE] limpia la caché de view/route de Laravel para que los cambios de plantilla/config queden limpios.

No es lo correcto → petición corta a la IA: "mueve esa columna phone encima del código postal" — y refrescas. En forma, una vuelta en menos de un minuto es velocidad estándar.

Local pasó → empuja a stage.

1. Pestaña QS DEPLOY abajo.
2. Barra lateral izquierda: Source = L (Local), marca Destination = stage.
3. En cada nodo pulsa [CONNECT] y [TEST CONFIG] una vez — confirma conexión real. Punto rojo → revisa el .env del nodo (host/puerto/cuenta BD).
4. Pulsa el [SRC → DST] central. A la derecha verifica que [Save on Deploy] está ON — si está ON, antes del deploy se guardan todos los archivos abiertos.
5. El visor de log enseña en directo cómo código + assets (imágenes/build) + esquema y datos de BD viajan a stage en una pasada.

Cuando termine, abre el dominio stage en el navegador y comprueba no solo el cambio de código, sino que la nueva columna phone también está en la BD de stage.

Stage es el espejo de prod. Solo cambia el dominio; código y BD son exactamente lo que va a salir.

• Entra al dominio stage real y usa el cambio tú mismo. Caché, CDN, sesiones — los problemas que se ocultan en localhost salen aquí.
• Comparte el enlace con alguien. Lo que tú no ves por ser tuyo, otro lo ve enseguida.
• QS DEPLOY → [DIFF] compara stage ↔ local. Diferencias = alguien tocó stage a mano — limpia antes del deploy a prod.
• [BROWSER] abre el árbol de archivos real del servidor stage para inspeccionar lo sospechoso.

¿Regresión cazada? → vuelves a local, repides a la IA → paso 4 → si pasa, vuelves al paso 5. Una vuelta más aquí cuesta muchísimo menos que un incidente en prod.

Stage pasó → paso final. Mismos botones que el paso 5, pero los usuarios reales lo ven al instante.

1. QS DEPLOY → Source = stage (o L con el mismo código), Destination = main (nodo de prod).
2. Confirma otra vez que [Save on Deploy] está ON. Tenerlo siempre ON es el por defecto seguro.
3. Pulsa [SRC → DST]. Quédate en el visor de log hasta que termine — cualquier 5xx o línea roja, paras.
4. Abre el dominio prod. Pasa la nueva funcionalidad y los flujos clave que no tocaste (login, pago, etc.) — confirma que siguen funcionando.
5. Si algo va mal, [SWITCH] intercambia Source/Destination y devuelve el estado anterior de stage a prod — ese es tu rollback rápido.

Una vuelta completa cerrada — VS Code → Claude/Codex(MCP) → Local → Stage → Prod. Cada cambio futuro va por la misma vía, solo que más rápido.