v0.0.8VISSOFT @ ICSME 2025
Versión de investigación aceptada en VISSOFT
Build de investigación vinculada a VISSOFT @ ICSME 2025 y al primer flujo XR de métricas.
1 / 14
Código abiertoEn desarrollo activoMejor proyectoProyecto premiado
Code-XR
Code-XR es una extensión open source para VS Code que convierte una base de código en una ciudad 3D que puedes recorrer desde el navegador, y la mantiene actualizada según editas. No hace falta casco, aunque funciona en VR. La versión 1.2.0 pone cuatro análisis sobre la misma mesa: la ciudad de código, un grafo de dependencias navegable, la comparación lado a lado de dos revisiones de Git y una película con la historia completa del proyecto, además de salas que puedes compartir con alguien fuera de tu propia red.
DOI 10.1109/VISSOFT67405.2025.00034Narrativa del proyecto
Code-XR empezó como una forma de hacer que las métricas de software fueran más comprensibles que en un dashboard estático tradicional. El primer objetivo fue conectar el análisis de código en vivo con una escena XR inmersiva, para que archivos, directorios y proyectos completos pudieran explorarse espacialmente desde Visual Studio Code, y para que la escena siguiera al código según iba cambiando. La versión 0.0.8 fue la versión de investigación vinculada a VISSOFT @ ICSME 2025. En octubre de 2025 presenté la versión 1.0.0 ante el tribunal universitario, con análisis básico de ficheros y directorios ya funcionando. El proyecto no terminó ahí: el 22 de marzo de 2026 publiqué la versión 1.1.0, una evolución sustancial centrada en rendimiento, colaboración, pantallas virtuales, remapeo seguro de gráficos dentro de la escena, métricas más ricas, mejores workflows para ficheros/directorios/proyectos y un setup Python más robusto.
El 30 de julio de 2026 publiqué la versión 1.2.0, «Threads, Timelines & Global Networks», que convirtió la extensión en un espacio de trabajo XR compartido. La misma mesa sirve ahora cuatro análisis entre los que se conmuta sin perder el estado de ninguno: la ciudad de código clásica, un grafo de dependencias 3D navegable con tres layouts, una mesa dual que compara dos puntos de la historia de Git, y Project Evolution, que reproduce el repositorio entero como una película. Alrededor, la colaboración ganó identidades persistentes y avatares empaquetados, una sesión puede abrirse a alguien fuera de tu red mediante un túnel saliente de Cloudflare protegido por un código de emparejamiento de seis dígitos, y una guía de seis pestañas vive dentro de la sala para que la pregunta «qué estoy viendo» no obligue a quitarse el casco. El comportamiento inmersivo se depuró de extremo a extremo en sesiones WebXR emuladas con el Immersive Web Emulator de Meta, en navegadores de escritorio y en el emulador, no en cascos físicos. La extensión empaquetada bajó además de 39,2 MB a 6,1 MB.
Rol y contribuciones
Autor único y desarrollador end-to-end. Construí la extensión de VS Code, el pipeline de análisis en Python, la persistencia en JSON, la generación de escenas XR con A-Frame/BabiaXR, el empaquetado para Marketplace y la web de documentación. La versión 1.1.0 se centró en rendimiento, salas compartidas, controles de pantallas virtuales y remapeo seguro de métricas. La versión 1.2.0 añadió los adaptadores de dependencias por lenguaje, la materialización segura de snapshots de Git sin ejecutar checkout ni fetch, el túnel de Cloudflare y el emparejamiento por código de seis dígitos detrás de las sesiones entre redes, y la guía de uso dentro de la escena. Supervisión académica de David Moreno Lumbreras (PhD, supervisor del TFG).
Versiones e hitos
v1.0.0Octubre de 2025
Versión presentada ante tribunal universitario
Versión de defensa universitaria con análisis estable de ficheros y directorios en VS Code.
v1.1.022 de marzo de 2026
Release de rendimiento y colaboración
Pipeline 18x más rápido, salas compartidas, pantallas virtuales, remapeo seguro, métricas más ricas y mejor setup Python.
v1.2.030 de julio de 2026
Threads, Timelines & Global Networks
El grafo de dependencias, la comparación histórica y Project Evolution se suman al análisis clásico sobre una misma mesa XR, con colaboración 2.0, sesiones entre redes y un VSIX que baja de 39,2 MB a 6,1 MB.
Tecnologías
Node.js
TypeScript
Python
VS Code Extension API
WebXR
A-Frame
BabiaXR
JSON
Git
Cloudflare Tunnel
WebCodecs
Playwright
React
Vite
Tailwind
Novedades de la v1.2.0
v1.2.030 de julio de 2026Threads, Timelines & Global Networks
Threads es el nuevo grafo de dependencias: las líneas que atan una base de código. Timelines son los dos análisis de Git, uno que compara dos puntos de la historia y otro que la reproduce entera. Global Networks son las sesiones que ahora pueden abrirse a alguien que no está en tu red.
Tutorial completo (12:24)Grafo de dependencias: la arquitectura, no solo los ficheros
Un análisis nuevo que responde qué depende de qué y qué se rompe si tocas algo. Las relaciones se leen directamente del código de tu directorio de trabajo y se renderizan como un grafo 3D navegable.
- Tres layouts (force-3d, hierarchical y metric-space con ejes reales), calculados en un Web Worker para que un grafo grande nunca congele la escena.
- Siete métricas por nodo (fan-in, fan-out, grado, relaciones, radio de impacto, tamaño de ciclo, líneas totales) pueden mapear tamaño, altura, color o posición.
- Techo de 600 nodos y 2.000 aristas: por encima, el grafo se abre agrupado por carpeta y haces drill-down en un grupo.
Comparación histórica: qué cambió entre dos puntos en el tiempo
Eliges dos fuentes (la copia de trabajo, una rama, un tag o un commit) y los dos estados caen en una mesa dual con el mismo gráfico, el mismo mapeo y la misma escala, así que una diferencia de altura es una diferencia real.
- Una tarjeta de comparación reporta añadidos, eliminados, modificados y sin cambios, más deltas con signo por métrica.
- Nunca ejecuta checkout ni fetch, y nunca escribe dentro de .git: tu rama, tu índice y tus ficheros se quedan donde los dejaste.
- Habla con el binario local de git, así que GitHub, GitLab, Bitbucket o un servidor propio funcionan igual.
Project Evolution: la historia de Git como una película
Donde la comparación enseña dos fotografías, Project Evolution reproduce la película: un único gráfico a tamaño completo que recorre el repositorio desde su primera revisión hasta el estado actual de la rama.
- La línea temporal se muestrea uniformemente en el tiempo, prefiriendo merges y tags. También puedes elegir un rango, o los frames exactos, en tu propio orden.
- Play, pausa, salto al frame anterior o siguiente, cambio de velocidad y clic en cualquier punto de la línea para saltar.
- Cada frame es un análisis completo, etiquetado con la revisión, la fecha y el frame que estás viendo.
Análisis clásico: cambiar el gráfico sin relanzarlo
El análisis con el que nació Code-XR, un edificio por fichero dimensionado y coloreado por las métricas que elijas, ya no hay que relanzarlo para verlo de otra forma.
- Cambia el tipo de gráfico en vivo desde el panel Field Mapping, a mitad de sesión.
- Todos los tipos de gráfico ya se presentan correctamente sobre la mesa, y los proyectos grandes siguen legibles mostrando los ficheros top por métrica.
- Un selector dentro de la escena enruta entre los cuatro análisis conservando el estado de cada uno.
Colaboración 2.0 y sesiones entre redes
Identidades persistentes, roles de anfitrión e invitado con autoridad real y un avatar animado empaquetado que funciona sin conexión. Cada participante tiene su color y una etiqueta con su nombre que siempre se gira hacia ti.
- Una sesión llega a alguien fuera de tu red mediante un túnel saliente de Cloudflare: tu router nunca tiene que aceptar una conexión entrante nueva.
- La puerta es un código de emparejamiento de seis dígitos que caduca, limita intentos y se quema al primer fallo.
- cloudflared está fijado a una versión, se descarga solo con tu consentimiento y se verifica por SHA-256 antes de ejecutarse.
Una guía de uso dentro de la sala, y LivePanel al día
La respuesta a «qué estoy viendo» ya no exige quitarse el casco, y el panel 2D dentro de VS Code lleva ahora la misma analítica que la sala.
- Seis pestañas, cada una con el color del análisis que explica, más un glosario de 24 términos generado desde los contratos reales de análisis.
- LivePanel ganó un Dependency Summary y una comparación histórica en 2D con tabla buscable de deltas por elemento.
- La misma guía se sirve como página guide.html, para leerla fuera de XR.