Ruta /demo/code-review-ia · Modo de acceso: Abierta · Tipo: datos de ejemplo (seis pull requests de una fintech ficticia con comentarios de IA escritos de antemano; el analizador de «Prueba con tu diff» es real pero usa reglas que corren en tu navegador, sin IA; no llama al servidor) · Plan del producto: Code review con IA

Resumen. Muestra cómo se vería la revisión automática de pull requests (PR) en «Billetera Andina», una fintech ficticia: lista de PR con puntaje y riesgo, comentarios de la IA anclados al diff con sugerencias que se aplican con un clic, hallazgos de seguridad y dependencias vulnerables, pruebas sugeridas, cómo llega el comentario a GitHub, GitLab, Bitbucket o Azure DevOps (simulado) y métricas del equipo. Además puedes pegar tu propio diff y revisarlo con 15 reglas locales. Está pensada para líderes técnicos, CTO y equipos de desarrollo; cualquier visitante la abre sin registrarse. Al entrar, el encabezado dice qué es, para quién y por dónde empezar, y la franja Primeros pasos guía el recorrido en cinco pasos que se marcan solos.

En esta página: Recorrido sugerido · Pantallas y funciones · Qué es real y qué es simulado · Acceso · Limitaciones conocidas

Vista inicial: (1) Volver al catálogo de demos; (2) título e insignia «Datos de ejemplo»; (3) por dónde empezar; (4) «Solicitar demo guiada» y «Cotizar para tu equipo»; (5) los cinco primeros pasos.

El recorrido sigue la franja Primeros pasos: cada paso tiene su botón, que abre la pantalla donde se hace (y en el celular la desplaza hasta ahí). Un paso se marca con un chulo verde solo cuando de verdad lo hiciste (no basta con pulsar el botón), y el contador dice cuántos llevas («2 de 5 hechos»). Si alguien ya usó la demo en ese navegador, empieza con Restablecer (arriba a la derecha) y confirma con Sí, restablecer: los PR de ejemplo y el avance vuelven al inicio.

Recorrido completo sobre el PR #218: comentarios, diff, simulación en GitLab, aprobar, fusionar, revisar un diff propio con las reglas locales y los primeros pasos completos.

stateDiagram-v2
    state "Abierto" as AB
    state "En revisión" as ER
    state "Cambios pedidos" as CP
    state "Aprobado" as AP
    state "Fusionado (solo lectura)" as FU
    AB --> CP: Pedir cambios
    ER --> CP: Pedir cambios
    AB --> AP: Aprobar sin bloqueantes pendientes
    ER --> AP: Aprobar sin bloqueantes pendientes
    CP --> AP: Aprobar sin bloqueantes pendientes
    AP --> CP: Pedir cambios
    AP --> FU: Fusionar sin bloqueantes pendientes
    FU --> [*]

Estados de un PR de ejemplo. Con un hallazgo bloqueante pendiente, «Aprobar» y «Fusionar» muestran un aviso y no cambian nada. «Volver este PR al inicio» devuelve cualquier PR de ejemplo a su estado inicial, también uno fusionado.

Pulsa el primer paso, Aplica una sugerencia de la IA: elige el PR #218 · feat(pagos): webhook de confirmación de pagos PSE (modo de pruebas) y abre la pestaña Comentarios.

Los cuatro comentarios pendientes del PR #218, ordenados de bloqueante a nota.

1. Filtros: Pendientes (4), Bloqueantes (2), Atendidos (0) y Todos (4).
2. Etiquetas del comentario: severidad (Bloqueante, Advertencia, Sugerencia o Nota), categoría (Seguridad, Datos personales, Error potencial, Rendimiento, Estilo o Pruebas), origen («IA · ejemplo») y archivo con línea. Debajo, el mensaje, la explicación en español y la regla del equipo que lo origina («Regla del equipo #2: todo webhook verifica la firma del emisor»).
3. Código actual y Sugerencia, uno al lado del otro.
4. Aplicar sugerencia: reemplaza el código en el diff. Pulsa este botón: aparece «Sugerencia aplicada: el diff y el puntaje se actualizaron.», el puntaje del PR sube de 59 a 74 y el paso 1 queda hecho. Los comentarios sin sugerencia tienen Marcar como resuelto.
5. Descartar: lo saca de los pendientes. Deshacer lo reabre.
6. Ver en el diff: abre la pestaña Diff en esa línea.

Qué decir: «La IA explica el problema en español, cita la regla de tu equipo y propone el cambio; el desarrollador lo aplica con un clic».

En el segundo comentario («Sin idempotencia…») pulsa Ver en el diff (o el paso 2 de la franja).

Diff unificado del controlador del webhook con los comentarios debajo de cada línea.

1. Archivos del PR: un botón por archivo.
2. Unificado o Lado a lado (ver Diff).
3. Sugerencia aplicada: la línea 8 ya muestra el código sugerido (verificación de la firma) y el comentario lleva la etiqueta verde; Deshacer lo revierte.
4. Comentario destacado: el que pediste ver, con un borde morado. Desde aquí también se aplica o se descarta.

Pulsa el paso 3 (abre En tu repositorio) y elige GitLab.

Conversación simulada del merge request #218 en GitLab.

1. Plataforma: GitHub, GitLab, Bitbucket o Azure DevOps. Cambian el nombre del bot (revisor-ia[bot], @revisor-ia…), «Pull request» o «Merge request» y el texto del botón de la sugerencia.
2. Aviso de simulación: «la demo no se conecta a GitLab», cómo se instala en un proyecto (aquí, «integración por webhook de GitLab») y desde qué plan (GitHub desde el plan Básico; GitLab y Bitbucket desde el Profesional; Azure DevOps en Enterprise).
3. Comentario resumen del revisor: puntaje, riesgo y la lista de hallazgos pendientes.
4. Comentario en línea con la sugerencia y su botón (Aplicar sugerencia en GitLab, Confirmar sugerencia en GitHub, Aplicar cambio en Bitbucket y Azure DevOps). Pulsa el botón: aplica la sugerencia de idempotencia.
5. Estado del chequeo: «Revisión automática: 1 bloqueante sin resolver. La fusión queda bloqueada.» Después de aplicar, cambia a «Revisión automática: sin bloqueantes. El chequeo pasa.» y el puntaje sube a 89.

Abajo, Copiar comentario (Markdown) copia el comentario resumen y Ver planes lleva al catálogo de soluciones (/services#otras-soluciones).

Qué decir: «Tu equipo no cambia de herramienta: el comentario aparece en el PR y el chequeo bloquea la fusión si hay algo grave».

Pulsa el paso 4: la demo lleva el foco a Aprobar en el panel del PR #218. Sin bloqueantes pendientes, púlsalo.

El PR #218 aprobado: riesgo medio, puntaje 89/100 y «Fusionar» habilitado.

1. Encabezado del PR: estado «Aprobado», riesgo y puntaje.
2. Aprobar: queda desactivado una vez aprobado.
3. Fusionar: se habilita al aprobar. Púlsalo: aparece «PR #218 fusionado en main.», el estado pasa a Fusionado, el PR queda en solo lectura («Este PR ya se fusionó: queda en solo lectura.») y el paso 4 queda hecho.
4. Nota de estado: «Aprobado y sin bloqueantes: ya puedes fusionarlo.»
5. Volver este PR al inicio: aparece en cuanto cambias algo del PR y lo deja como al empezar (también deshace la fusión). Avisa «El PR #218 volvió a su estado inicial.»

Para mostrar el bloqueo, elige el PR #216 y pulsa Aprobar: sale «No se puede: hay 1 hallazgo bloqueante sin resolver.» Todo queda en la Actividad del Resumen («daniela.v aprobó el PR», «daniela.v fusionó el PR en main»).

Pulsa el paso 5 (o Prueba con tu diff, arriba) y luego Cargar ejemplo.

Ventana «Prueba con tu diff» con el diff de ejemplo cargado.

1. Aviso: «No pegues secretos ni datos personales reales. El texto no se envía a ningún servidor ni se guarda».
2. Diff o código: acepta un diff unificado (la salida de git diff) o un fragmento de código.
3. Contador de líneas («20 de 300 líneas»); se pone en rojo si pasas el máximo.
4. Cargar ejemplo: un diff de src/clientes/notificar.ts con varios problemas a propósito.
5. Ver las 15 reglas locales: despliega la lista con su severidad y cuáles traen corrección automática.
6. Analizar y agregar a la lista. Cancelar, la ×, Escape o un clic fuera cierran la ventana y el foco vuelve al botón que la abrió; mientras está abierta, la tecla Tab no sale de ella.

Si el texto está vacío, pasa de 300 líneas o es demasiado largo, o el diff no tiene líneas agregadas ni eliminadas, la ventana lo dice y no analiza.

El diff pegado aparece como PR #219 «Tu diff 1 · análisis local» con 7 hallazgos.

1. PR nuevo en la lista con la etiqueta «análisis local» (el número sigue al mayor de la lista). La demo lo abre en Comentarios, avisa «Análisis local listo: 7 hallazgos.» y marca el paso 5.
2. Nota: «Lo pegaste tú y se analizó con reglas locales en tu navegador (sin IA). No se guarda: desaparece al recargar la página.»
3. Eliminar este análisis: lo quita de la lista.
4. Hallazgos con el origen «Regla local · sin IA». Con el ejemplo salen 7: un secreto escrito en el código (bloqueante), jwt.verify sin fijar el algoritmo, un dato personal en los logs, un monto con decimales de punto flotante, el tipo any, una comparación con == y una URL con http://.

Los hallazgos se aplican, resuelven o descartan igual que los de la IA, y se ven en Diff, Seguridad y En tu repositorio. Los diff propios no se aprueban ni se fusionan.

Los cinco pasos hechos (1) y el cierre con las dos salidas comerciales (2).

Con los cinco pasos hechos, la franja dice «Completaste los primeros pasos. ¿Quieres verlo con el código y las reglas de tu equipo?» y repite Solicitar demo guiada y Cotizar para tu equipo.

Qué decir: «Aquí revisas tu código con reglas simples; en tu proyecto, la revisión la hace un modelo de IA con las reglas de tu equipo». Cierre sugerido: Métricas y la calculadora de horas, y luego Solicitar demo guiada.

Una sola página: encabezado, primeros pasos, cuatro indicadores, la lista de PR, el panel del PR elegido y siete pestañas (Resumen, Comentarios, Diff, Seguridad, Pruebas sugeridas, En tu repositorio y Métricas). Abajo, una nota de datos de ejemplo con las dos salidas comerciales.

Los indicadores se recalculan con cada cosa que haces.

• Filtros: Todos, Míos (los de daniela.v, la usuaria con la que «revisas», más tus diff) y Por revisar (los que tienen a daniela.v como revisora y no están aprobados ni fusionados). Si nada coincide, aparece Limpiar búsqueda y filtro.
• Cada PR muestra número, estado, título, repositorio y autor, puntaje, tamaño (XS a XL según las líneas cambiadas) y etiquetas de lo pendiente (seguridad, datos personales, rendimiento, pruebas o «sin pendientes»).
• Los seis PR de ejemplo: #218 webhook de pagos PSE (En revisión), #217 redondeo del IVA del 19 % en COP (Cambios pedidos), #216 validación de cédula y NIT (Abierto), #215 dependencias con vulnerabilidades (En revisión), #214 exportar movimientos a CSV por streaming (Aprobado; su autora es daniela.v) y #213 reglas del equipo para el revisor (Fusionado, sin hallazgos).
• Fechas: los PR se abrieron en la semana anterior a hoy (hora de Colombia). Las fechas se calculan al cargar la página: antes de eso el campo «Abierto» y la Actividad aparecen sin fecha por un instante.
• Panel del PR: repositorio, título, rama → main, estado, riesgo y puntaje; autor, revisores, commits, archivos, líneas, fecha y primera revisión. Tocar un archivo abre su diff.
• Aprobar, Pedir cambios y Fusionar, con estas reglas: no se aprueba ni se fusiona con bloqueantes pendientes; primero hay que aprobar para fusionar («Primero hay que aprobar el PR.»); en el PR #214 no puedes aprobar porque eres la autora («lo aprueba otra persona del equipo»), pero sí fusionarlo; un PR fusionado queda en solo lectura.
• Volver este PR al inicio: aparece cuando el PR de ejemplo cambió (estado, comentarios, pruebas o actividad) y lo deja como al empezar.
• Puntaje: 100 menos 15 por bloqueante, 8 por advertencia, 3 por sugerencia y 1 por nota pendiente. Riesgo: alto si queda un bloqueante, medio si queda una advertencia y bajo en otro caso.

«Qué cambia» (descripción del PR), Riesgo con hasta tres motivos, Puntaje con la fórmula y el conteo por severidad, Archivos (abren el diff) y Actividad (quién abrió, revisó, aprobó o aplicó cada cosa, con fecha y hora de Colombia; por ejemplo «Revisor IA publicó su revisión (4 hallazgos)»). Se ve en la vista general.

Ver el paso 1. Los estados de un comentario son Pendiente, Sugerencia aplicada, Descartado y Resuelto. El comentario de categoría Pruebas (por ejemplo, «Faltan pruebas con valores límite» del #217) se marca como resuelto solo cuando agregas una prueba sugerida.

Vista «Lado a lado» del mismo archivo: (1) antes y después, con las líneas comentadas resaltadas; (2) los comentarios del archivo, debajo, con su número de línea.

• Unificado: líneas agregadas en verde y eliminadas en rojo, con los números de línea viejo y nuevo, y cada comentario debajo de su línea (los descartados no se muestran). Ver el paso 2.
• Lado a lado: «Antes» y «Después»; las líneas con comentarios pendientes se resaltan en ámbar y, debajo del archivo, la lista «N comentarios en este archivo» con la línea de cada uno («Línea 8») y las mismas acciones (aplicar, descartar, deshacer).
• Insignias Archivo nuevo y Prueba agregada (cuando agregas una prueba sugerida, aparece como un archivo más del diff).

Pestaña Seguridad del PR #215: (1) contadores, (2) el hallazgo bloqueante, (3) la tabla de dependencias con sus avisos y (4–5) las descargas.

• Cuatro contadores: Secretos, Dependencias vulnerables, Datos personales y Código inseguro.
• Los comentarios de Seguridad y Datos personales del PR, con las mismas acciones de la pestaña Comentarios.
• Dependencias que cambia este PR (solo en #215): versión anterior y nueva, licencia y aviso público con enlace a la base NVD. En el ejemplo, cross-spawn 7.0.3 tiene el aviso CVE-2024-21538 y el botón Subir a 7.0.5 (aplica la sugerencia del comentario); ws sube a 8.17.1 y su aviso CVE-2024-37890 queda Resuelta; zod no tiene avisos.
• Exportar hallazgos (CSV) descarga code-review-pr-<número>-seguridad.csv (en inglés, …-security.csv); Descargar SBOM (CycloneDX) descarga sbom-pr-<número>.cdx.json con las dependencias, las vulnerabilidades sin resolver y la recomendación en el idioma de la página.

Tres pruebas sugeridas para el PR #217; la primera ya está agregada al PR.

Cada prueba tiene nombre, archivo, tipo (Unitaria o Integración) y código. Agregar al PR la suma al diff como archivo nuevo («Prueba agregada al PR en src/facturas/calcular-iva.spec.ts.»), Quitar del PR la retira y Copiar código la copia. La demo no ejecuta las pruebas. Los PR #215 y #213 no tienen pruebas sugeridas, y los diff propios tampoco («Las reglas locales no generan pruebas»).

Ver el paso 3. El comentario en línea toma el primer hallazgo pendiente que tenga sugerencia (o el primero pendiente); en un PR fusionado el botón de aplicar no aparece.

Métricas calculadas con los PR de la lista (incluido un diff propio) y la tabla por PR.

• PR en la lista, Hallazgos, Resueltos o aplicados (porcentaje) y Primera revisión IA.
• Hallazgos por categoría («4 pendientes · 1 atendido», con singular y plural correctos) y PR por estado.
• Tabla por PR con estado, puntaje, pendientes, atendidos y primera revisión; Exportar métricas (CSV) descarga code-review-metricas-equipo.csv (en inglés, code-review-team-metrics.csv).
• Calcula el tiempo de revisión que liberas: desarrolladores (20), PR por desarrollador a la semana (3) y minutos que ahorra cada PR (20) dan «≈ 87 horas de revisión al mes» con la fórmula desarrolladores × PR por semana × 4,33 semanas × minutos ÷ 60. La demo aclara que es una estimación con tus supuestos, no un resultado medido.

La demo en un teléfono (390 px): encabezado con las salidas comerciales, buscador y el inicio de los primeros pasos.

En pantallas pequeñas todo va en una columna: encabezado, primeros pasos (se desplazan de lado), indicadores de a dos, lista de PR, panel del PR y pestañas (con desplazamiento lateral). Los botones de los pasos llevan a la pestaña correspondiente. El código del diff y las tablas se desplazan de lado sin cortar los comentarios. La página no se desborda a lo ancho.

• Las pestañas se recorren con las flechas izquierda y derecha, Inicio y Fin; solo la pestaña activa recibe el foco con Tab.
• Todos los botones propios de la demo muestran un borde de foco visible.
• La ventana «Prueba con tu diff» retiene el foco, se cierra con Escape y devuelve el foco al botón que la abrió; la confirmación de «Restablecer» se cancela con Escape.
• Los avisos se anuncian (región aria-live), igual que el avance de los primeros pasos.

Cómo lo ve un visitante. La demo es Abierta: en /demo su tarjeta («Code Review IA», insignias «Abierta» y «DevTools») tiene Probar Demo, que abre /demo/code-review-ia directamente, y Solicitar demo guiada, que lleva a /solicitar-demo?demos=code-review-ia. No hay pantalla de acceso ni hace falta cuenta.

Cómo se pide una demo guiada o una cotización. Dentro de la demo hay dos salidas, en el encabezado, al completar los primeros pasos y en la nota final:

• Solicitar demo guiada abre /solicitar-demo?demos=code-review-ia con «Revisión de código con IA» ya elegida. Llega a Admin › Solicitudes de demo.
• Cotizar para tu equipo abre el formulario de contacto (/contact?service=code-review-ia) con el servicio «Code review con IA» y el mensaje «Hola, me interesa cotizar Code review con IA.» ya escritos. Llega a Admin › Contactos.

El bloque final del sitio, «¿Te gustaría algo así para tu negocio?», repite Solicitar demo guiada (al mismo formulario), Solicitar Cotización (/contact) y Ver Planes y Precios.

Cómo la gestiona el admin. Como la demo es abierta, no hace falta conceder acceso para usarla; la solicitud o el contacto sirven para agendar la presentación. Un admin puede cambiar el modo en Admin › Catálogo de demos (por ejemplo, a «Con solicitud»); desde ese momento el visitante sin acceso verá la pantalla de acceso. Detalle en el Manual del administrador y en Flujos del visitante.

flowchart LR
    H["Hub /demo: tarjeta Abierta"] --> P["Probar Demo"]
    P --> D["/demo/code-review-ia sin registro"]
    H --> G["Solicitar demo guiada"]
    G --> F["/solicitar-demo con la demo elegida"]
    F --> AS["Admin: Solicitudes de demo"]
    D --> E["Solicitar demo guiada (encabezado, primeros pasos o nota final)"]
    E --> F
    D --> Q["Cotizar para tu equipo"]
    Q --> C["/contact?service=code-review-ia"]
    C --> AC["Admin: Contactos"]

«Solicitar demo guiada» siempre lleva al formulario de solicitud de demo; «Cotizar para tu equipo», al de contacto.

1. La IA no corre en la demo: los comentarios y las pruebas están escritos de antemano, y el análisis de tu diff usa reglas por patrón (la propia demo lo dice). No existe un servicio del backend que revise código con IA.
2. La tarjeta del catálogo todavía promete más de lo que se ve («SAST + DAST + SCA + SBOM + license compliance» y «Test generation auto y refactoring suggestions con LLM») y usa otro nombre («Code Review IA»). La demo muestra hallazgos de ejemplo, licencias y SBOM de las dependencias de un PR, pero no DAST, ni generación de pruebas, ni refactorizaciones en vivo. El texto nuevo de la tarjeta está propuesto al equipo de plataforma.
3. Tu diff no se guarda (a propósito, para no dejar código en el navegador): desaparece al recargar, no recibe pruebas sugeridas y no se aprueba ni se fusiona porque no es un PR de un repositorio. Solo se revisan las líneas agregadas.
4. El estado vive en un solo navegador: otra persona u otro equipo ve los datos de ejemplo; en una ventana privada o con el almacenamiento bloqueado, la demo funciona pero no recuerda los cambios.
5. «Ver planes» (pestaña En tu repositorio) lleva a la sección «Otras soluciones» del catálogo (/services#otras-soluciones), donde hay que buscar «Code review con IA»; «Ver Planes y Precios» del bloque final del sitio lleva a los planes del chatbot RAG (/services#planes-rag), no a los de esta solución.

Al recorrerla (escritorio y celular, en español y en inglés, tema claro y oscuro) no se encontraron botones sin acción ni errores de la demo en la consola.