NoCodeQuest RPG

"Tu IDE ya no es solo un editor. Es una mazmorra, un tablero de decisiones y una crónica viva."

NoCodeQuest es una extension para VS Code que convierte el trabajo real del IDE en una aventura RPG pixel art. Diagnosticos, TODO, commits, diff, contexto del editor, inventario, mercado, cronica y decisiones HITL conviven en un unico WebView jugable.

La idea no es tapar el IDE con un juego, sino usar el juego como interfaz simbolica y accionable para trabajar mejor: el estado tecnico se refleja en la aventura y Jasper actua como bardo y copiloto, pero la ultima palabra siempre la tiene la persona que desarrolla.

---

Vision

• Convertir el IDE en un "Espejo del IDE": una capa donde editor, juego e IA comparten contexto.
• Mantener un flujo HITL real: la IA sugiere, pero no ejecuta nada importante sin aprobacion humana.
• Hacer visible el estado tecnico con una UI mas memorable que una lista plana de paneles y logs.
• La dirección de producto y sus hitos se mantienen en ROADMAP_PRODUCTO.md.

---

Estado Actual

• WebView jugable con splash, login, escena principal, HUD, panel lateral y chat overlay.
• Fase A del flujo HITL estabilizada: commit transaccional, Inspeccionar fiable, ACK honestos, confirmacion fuerte del pergamino y arranque mas robusto.
• Combate contra bugs con recompensas de EXP y oro.
• Boss contextual para conflictos de merge y recompensas asociadas.
• Misiones generadas desde TODO y FIXME.
• Inventario, mercado, armas, skins, pergaminos y pociones con efectos reales sobre la partida.
• Planta de la guarida como indicador simbolico de deuda tecnica.
• Cronica de aventuras persistente con detalle de eventos relevantes.
• Cartas de Destino generadas desde el estado real del IDE.
• Chat HITL de Jasper con sugerencias estructuradas ejecutables.
• Estado visible del oraculo en el chat: activo, cooldown, guia local o dormido.
• Escena Phaser contextual con fondos por sala, clima tecnico, transiciones de sala y salas de hito.
• Audio de localizacion con pista base y pista secundaria para salas especiales.
• Jasper, la bruja, bug y boss ya conviven en escena con presencia contextual y reacciones a hitos.
• Controles de vista para mover, maximizar, teatro y zen mode.
• Pantalla de creditos y pantalla de apoyo separada, con CTA flotante para colaborar con el desarrollo.

---

Lo Que Hace Hoy

• Combate: los diagnosticos del editor pueden materializarse como amenazas y puedes atacarlas desde el panel.
• Amenaza real: los conflictos de merge pueden invocar un boss contextual con botin, insignia y celebracion propia.
• Destino: el oraculo local resume contexto del IDE y propone cartas con acciones utiles.
• Jasper: responde con tono narrativo, pero tambien con foco tecnico cuando la pregunta lo requiere.
• Escena reactiva: la mazmorra cambia de fondo segun contexto, sala, hito y clima tecnico del IDE.
• Chat accionable: desde el overlay puedes Inspeccionar, Copiar IDE, Reconsultar, Refrescar IDE y exportar.
• Commit ritualizado: el panel prepara commits con flujo transaccional y el resultado se refleja de verdad en la UI.
• Mercado e inventario: comprar, equipar y consumir recursos funciona sin salir del juego.
• Heroe vivo: inspect, coffee, commit y scroll tienen rituales visuales propios.
• PNJs vivos: Jasper y la bruja aparecen por sala, dialogan entre si y reaccionan a gestas reales como compras, badges, level up o pergaminos.
• Salas de hito: victorias, ascensos, compras importantes y recompensas usan fondos y microescenas dedicadas.
• Cronica: cada accion importante deja huella en adventureLog.
• Pantalla de creditos: muestra accesos directos al repo, Open VSX y apoyo al dev.

Capitulo experimental: pruebas Node

• Activa nocodequest.testBattle.enabled en el workspace y recarga la ventana. Inicia NoCodeQuest una vez para activar el watcher; seguira observando aunque cierres el panel.
• Ejecuta npm run test:battle para lanzar la suite Node completa: conserva la salida legible en consola y escribe un reporte por ejecucion en .nocodequest/test-battle/.
• El panel sincroniza el estado actual al abrirse; los golpes nuevos se animan mientras esta abierto. Un TAP incompleto no confirma la victoria; cada test fallido u omitido cuenta como golpe, sin duplicar snapshots del mismo run.
• Por defecto, la cafeina parte de 100, cada golpe resta 20 y una Pocion de Cafe recupera 50 (precio actual: 30 monedas). Al llegar a cero, el personaje descansa diez minutos reales y despierta con el 50%.
• Este primer adaptador solo observa el reporte emitido por npm run test:battle; npm test, otros runners y proveedores arbitrarios de VS Code Testing no se observan automaticamente.
• El renderizado se comprobo visualmente en TRAE con la version 1.0.17. Como mejora futura, ajustar los PV al numero de golpes y retirar la barra a la vez que desaparece el mob.

---

Instalacion

Desde Open VSX

• Ficha publica: NoCodeQuest en Open VSX

Desde VSIX

1. Abre VS Code.
2. Ve a Extensiones.
3. Pulsa ....
4. Elige Instalar desde VSIX....
5. Selecciona el .vsix.

Integracion de campaña con asistentes

La integración es opcional y se instala por workspace desde la paleta de comandos:

• NoCodeQuest: Instalar reglas de campaña en este workspace crea el contrato y la bitácora locales, una skill portable, reglas y el comando /nocodequest-gm para TRAE.
• Si no existe AGENTS.md, se crea con las reglas de la campaña. Si ya existe, NoCodeQuest lo deja intacto y solo añade un bloque delimitado tras una confirmación aparte.
• NoCodeQuest: Copiar pergamino de campaña copia el contrato y la bitácora para compartirlos manualmente. No los envía a Groq ni a otro asistente.
• NoCodeQuest: Desinstalar reglas de campaña del workspace retira archivos administrados que sigan intactos. Los archivos editados se conservan y se informan para revisión.

Los datos viven en .nocodequest/campaign/. TRAE usa .trae/rules/ para reglas de proyecto y .trae/commands/ para comandos invocables; otros asistentes pueden descubrir .agents/skills/ o AGENTS.md según su implementación. Que un IDE sea compatible con extensiones VS Code no garantiza que su asistente cargue los mismos archivos. La instalación no crea configuración global, no sondea el repositorio y no activa llamadas proactivas a Groq.

En esta primera iteración, chronicle.jsonl queda preparado para eventos estructurados, pero el runtime todavía no lo alimenta ni inyecta el contrato en Jasper. El asistente de desarrollo mantiene la bitácora cuando trabaja siguiendo estas instrucciones; el pergamino solo sale del workspace mediante el comando explícito de exportación.

Desde codigo fuente

git clone https://github.com/Charran78/NoCodeQuest.git
cd NoCodeQuest
npm install

Despues abre el proyecto en VS Code y pulsa F5 para lanzar la ventana de desarrollo de la extension.

---

Primer Arranque

1. Abre cualquier proyecto en VS Code.
2. Ejecuta NoCodeQuest: ⚔️ Iniciar Aventura.
3. Espera a la splash y entra en el login.
4. Pulsa Start.
5. Usa Destino, Inventario, Misiones, Mercado, Cronica y Chat segun te convenga.

Comandos disponibles:

• NoCodeQuest: ⚔️ Iniciar Aventura
• NoCodeQuest: 🧙 Ver Perfil del Aventurero
• NoCodeQuest: 🪞 Inspeccionar Estado del IDE

---

Recorrido Visual

Splash

Pantalla de arranque con mensajes rotatorios, carga ligera y tono retro desde el primer paint.

Login

Entrada a la aventura con fondo dedicado y acceso directo a Start y Creditos.

Juego

Vista principal del WebView con escena, HUD, panel lateral, acciones, chat y cronica.

Creditos

Pantalla de creditos con llamadas a la accion para seguir el repo, ver Open VSX o invitar un cafe al bardo.

---

Flujo De Uso

1. Abres la aventura desde la paleta de comandos.
2. NoCodeQuest lee archivo activo, diagnosticos, estado Git, quests y progreso del jugador.
3. Destino te propone cartas segun ese contexto.
4. Jasper puede ampliar el siguiente paso con consejo narrativo y tecnico.
5. Tu decides si ejecutar, inspeccionar, refrescar contexto, copiar la respuesta al IDE o ignorarla.

Este es el nucleo HITL del proyecto: contexto real, sugerencia visible y accion humana explicita.

---

Jasper Y El Oraculo

Modo local

• Si no hay API key, Jasper sigue funcionando con guia local y mensajes de fallback.
• El badge del chat deja claro si el oraculo esta dormido o si estas usando guia local.

Modo Groq

1. Consigue una API key en console.groq.com/keys.
2. Ejecuta NoCodeQuest: 🧭 Asistente de Groq desde la paleta.
3. Pega la clave y deja que el asistente consulte /models con tu cuenta.
4. Elige Auto o uno de los modelos realmente accesibles para esa API key.

Modelos utiles si tu cuenta los devuelve:

• openai/gpt-oss-20b
• llama-3.1-8b-instant
• openai/gpt-oss-120b
• llama-3.3-70b-versatile

Notas:

• El sistema entra en cooldown temporal si Groq devuelve 429, para evitar spam de errores.
• El badge del chat refleja si la respuesta viene del oraculo real o de fallback.
• El chat muestra tambien el modelo real usado en esa respuesta, no solo el modelo configurado.
• El selector de modelos no usa una lista fija: se alimenta con /openai/v1/models segun la API key activa.
• Para GPT OSS, NoCodeQuest usa la ruta oficial de Chat Completions con streaming y ensamblado de delta.content.
• La API key actual se guarda en Secret Storage de VS Code; los ajustes solo mantienen compatibilidad legacy.
• Antes de empaquetar una VSIX, repasa CHECKLIST_GROQ_EMPAQUETADO.md.

---

UI Y Controles

Zona de juego

• HUD superior con nivel, oro, rango, cafe, pergaminos y planta.
• Panel lateral con Destino, Inventario, Misiones, Mercado y Cronica.
• Barra de accion con ataque, consumibles, commit, chat, musica y accesos rapidos.

Chat de Jasper

• Inspeccionar: intenta abrir el objetivo tecnico sugerido.
• Copiar IDE: copia la respuesta para pegarla en el chat del IDE.
• Reconsultar: pide a Jasper una nueva respuesta con el contexto mas reciente.
• Refrescar IDE: relee el contexto del IDE y las cartas sin volver a consultar a Jasper.
• Exportar: saca el transcript para soporte o seguimiento.

Vista

• IDE: mueve el panel al grupo principal.
• MAX: maximiza o restaura el grupo actual.
• THE: activa modo teatro.
• ZEN: alterna zen mode del editor.

---

Pantalla De Creditos

• Tiene fondo dedicado y el mismo formato base que splash y login.
• Se puede abrir desde el login o desde la bolita flotante de la esquina inferior derecha.
• Incluye enlaces directos al repo, Open VSX y pagina de apoyo al desarrollo.
• Tiene boton Volver, asi que puedes regresar a la pantalla anterior sin cerrar la extension.

Enlaces actuales:

• Repo: github.com/Charran78/NoCodeQuest
• Open VSX: open-vsx.org/extension/pedromencias/nocodequest
• Cafe para el bardo: buymeacoffee.com/beyonddigiv

---

Persistencia

• El estado de la partida se guarda en .nocodequestrc.json dentro del workspace.
• Existe un ejemplo en .nocodequestrc.example.json.
• Parte del runtime del WebView usa un espejo local en .nocodequest/webview-runtime.json para mantener sincronizado host y webview.
• La identidad del aventurero vive ya dentro de la partida, en un perfil local propio de NoCodeQuest pensado para evolucionar hacia party/perfiles multiples.
• nocodequest.playerName se mantiene solo como compatibilidad legacy: sirve para migrar instalaciones antiguas y como espejo auxiliar, pero ya no gobierna el runtime.
• El login, el HUD y el perfil visual leen la identidad activa del juego para evitar desajustes entre pantallas.

Decision de arquitectura viva: identidad del jugador

• La fuente de verdad actual para la identidad del jugador es el save de NoCodeQuest, no los settings del IDE.
• Cualquier futura implementacion de perfiles, companions, party o cooperativo debe extender esta capa de identidad propia antes de apoyarse en configuracion global de VS Code.
• La evolucion prevista de esta parte se sigue en ROADMAP.md.

---

Arquitectura

[IDE] -> [Estado JSON] -> [Adventure Oracle] -> [Cartas de Destino]
   -> [WebView Phaser + Panel HITL] -> [Decision del jugador] -> [IDE]

Piezas principales:

• extension.js: orquestador entre VS Code, WebView, Git, runtime mirror y acciones del juego.
• adventureOracle.js: recopila ide_state y genera cartas con reglas fijas.
• inventoryManager.js: progreso, recursos, cronica y estado del jugador.
• questBoard.js: convierte TODO y FIXME en misiones.
• narrationEngine.js: integra Groq, cooldown por rate limit y fallback local.
• compactSystem.js: base del contrato /compact y parte del flujo HITL.
• webview/panel.js: HTML, CSS y bootstrap del WebView.
• webview/modules/navigation.js: splash, login, juego, creditos y carga diferida.
• webview/modules/ui-renderer.js: renderizado de chat, cartas, badge del oraculo e inventario.
• webview/modules/event-handlers.js: eventos de UI y puente de acciones al host.

---

Estado Del Laboratorio Visual

Completado

• Mazmorra Reactiva v1: el fondo y la iluminacion ya reflejan el estado tecnico y la sala activa.
• Rituales del Heroe v1: el heroe responde a inspect, coffee, commit y scroll.
• Bruja Comerciante v1: la tienda tiene presencia diegetica y la bruja acompana shop.
• Enemigo Contextual v1: bug y boss aparecen por errores reales y conflictos de merge.
• Audio de Localizacion v1: la musica diferencia sala base y localizaciones especiales.
• Jasper Escenico v1-v2: Jasper gano presencia en Creditos, Cronica, Destino y en hitos reales.
• PNJs v2-v4: Jasper y la bruja ya comparten escena, dialogan y reaccionan a gestas del jugador.
• Salas de Hito v1-v2: level up, victorias, compras, equipo, pergamino e insignias ya tienen microescena propia.
• Transiciones de Sala v1: los cambios de fondo ya se sienten como viaje entre salas y no como simple swap de textura.

Pospuesto

• Musica Adaptativa v1: se aparca por ahora en favor de audio por localizacion mas simple y controlable.

---

Roadmap

Ahora

• Validar en runtime todo el bloque visual ya integrado y ajustar timings, intensidades y densidad de apariciones.
• Revisar documentacion, packaging y estado de release para no perder trazabilidad del sprint.
• Preparar el siguiente corte del laboratorio sin romper la base HITL ya estabilizada.

Siguiente

• PNJs v5: reacciones de personajes a amenazas vivas como bug, boss spawn, damageBoss o deuda tecnica critica.
• Sala del Bardo v1 o un espacio mas propio para Jasper dentro del reino.
• Seguir afinando el equilibrio RPG, tienda, progresion y feedback visual del IDE.

Mas adelante

• Reabrir Musica Adaptativa v1 si aporta valor real y no mete ruido en la UX.
• Enriquecer sugerencias estructuradas sin perder control humano.
• Ampliar assets, bosses, escenas y narrativa contextual.
• Publicar releases mas cerradas y documentadas, incluyendo salto al marketplace oficial de VS Code.

---

Notas De Diseno

• NoCodeQuest no busca automatizarlo todo.
• El objetivo es mantener a la persona dentro del flujo del IDE, no sustituir su criterio.
• El juego dramatiza el contexto, la IA propone y la persona decide.

---

Creditos

• Pedro Mencias: vision del producto, direccion y arquitectura.
• DeepSeek: diseno narrativo, sistema y documentacion conceptual.
• Claude: implementacion y evolucion tecnica del codigo.
• Gemini: apoyo creativo y refinamiento visual.

---

Licencia

MIT.

---

"From factory floor to AI core, pasando por las mazmorras del codigo."