Add bootstrap help text to playground

RAG/docs/HISTORIAL_SESIONES.md

@@ -0,0 +1,45 @@
+# Historial de sesiones
+
+**Proyecto:** Workspace de tools IA para empresas  
+**Modulo:** RAG  
+**Ultima actualizacion:** 2026-04-06  
+**Ultima modificacion por:** Agente RAG 2  
+**Estado:** Activo
+
+---
+
+## Registro de sesion
+
+### 2026-04-06 - Agente RAG 2
+
+**Modelo:** gpt-5.4  
+**Conversation ID:** `N/D (OpenCode no lo expone en este entorno)`  
+**Session ID OpenCode:** `ses_29bdbd003ffeLrLjUlFgnp08Y7`  
+**Directorio:** `/home/pancho/Documentos/Empresa/Desarrollo/IA`
+
+**Rol asumido:**
+Dar continuidad al RAG en `RAG/` a partir del estado actual documentado.
+
+**Contexto recuperado:**
+- No existe `README` en la raiz de `RAG/`.
+- La base documental principal revisada ha sido:
+  - `docs/SISTEMA_RAG_BASE.md`
+  - `docs/BITACORA_DISENO_RAG.md`
+  - `docs/METODOLOGIA_ITERACION_Y_REDEPLOY.md`
+  - `docs/PLAYGROUND.md`
+  - `docs/LOGS_EVALUACION.md`
+- La v1 figura como operativa y desplegada en `https://rag.por-correo.com`.
+- Endpoints documentados como operativos: `GET /health`, `POST /ingest`, `POST /retrieve`, `POST /answer`.
+- El playground y los logs de evaluacion aparecen implementados en codigo y pendientes de redeploy segun la documentacion.
+
+**Criterio de continuidad asumido:**
+- Trabajar desde el estado ya documentado, sin redescubrir decisiones nucleares de la v1.
+- Mantener actualizada la documentacion relevante cuando se hagan cambios reales.
+- Usar este historial para dejar trazabilidad entre sesiones y agentes.
+
+**Trabajo realizado en esta sesion:**
+- Auditoria inicial de documentacion, codigo y estado observable del modulo `RAG/`.
+- Registro de un reporte temporal de auditoria de modelo en `RAG/docs/TEMP_AUDITORIA_MODELO_PRE_CLEANUP.md` para comparacion futura.
+- Implementacion de ayuda visual en la zona de `Bootstrap` del playground.
+- Añadidos tooltip y `aria-label` en `Cargar bootstrap`, `Reemplazar contexto`, `Vaciar contexto`, `Preset docs`, `Preset RAG docs` y `Preset codigo`.
+- Actualizacion de `RAG/docs/PLAYGROUND.md` y `RAG/docs/TEXTOS_AYUDA_PLAYGROUND.md` para reflejar la mejora.

RAG/docs/PLAYGROUND.md

@@ -61,6 +61,7 @@ Tambien permite:
 - ajustar `scope`
 - seleccionar el modelo de respuesta
 - usar presets para docs, docs del modulo y codigo del RAG
+- mostrar ayuda visual breve en la zona de bootstrap para explicar como usar `Cargar bootstrap`, `Reemplazar contexto`, `Vaciar contexto` y los presets
 - ver un contador visible de logs recientes
 - mostrar branding visual del servicio en la cabecera
 
@@ -81,6 +82,7 @@ El playground ya no funciona como una sola caja de consulta tecnica. Ahora se or
 - cargar un mapa inicial del dominio
 - opcionalmente pedir a un modelo que sintetice ese bootstrap
 - reemplazar o vaciar el contexto de sesion
+- mostrar ayuda visible y tooltip en los botones principales para reducir confusiones de uso
 
 3. `Chat`
 - conversar con el modelo
@@ -106,6 +108,18 @@ En la pestaña `Ingesta` ya se puede:
 
 Esto permite probar documentos o PDFs que no tengan nada que ver con el RAG sin mezclarlos con el resto de scopes si eliges un identificador especifico para esa carga.
 
+### Ayuda visual en bootstrap
+
+La zona de `Bootstrap` ya incluye:
+
+- una ayuda breve siempre visible junto a los botones principales
+- tooltip o texto alternativo en `Cargar bootstrap`, `Reemplazar contexto`, `Vaciar contexto`, `Preset docs`, `Preset RAG docs` y `Preset codigo`
+
+Objetivo:
+
+- dejar claro que los presets solo preparan la configuracion
+- evitar la confusion entre preparar un preset y cargar realmente el contexto en sesion
+
 ### Chat con consultas adicionales al RAG
 
 El chat ya soporta dos niveles:

RAG/docs/TEMP_AUDITORIA_MODELO_PRE_CLEANUP.md

@@ -0,0 +1,90 @@
+# Auditoria temporal del modelo antes de cleanup
+
+**Proyecto:** Workspace de tools IA para empresas  
+**Modulo:** RAG  
+**Fecha:** 2026-04-06  
+**Estado:** Temporal
+
+---
+
+## Proposito
+
+Guardar el reporte generado por el modelo seleccionado en el playground al auditar el RAG usando `Preset codigo`, antes de implementar la funcion de limpieza y reingestar `RAG/src`.
+
+Este documento servira como linea base de comparacion.
+
+---
+
+## Contexto de la prueba
+
+- La auditoria fue pedida desde el playground del RAG.
+- Se uso `Preset codigo` para cargar contexto del codigo del proyecto.
+- El contexto disponible correspondia a una version antigua respecto al estado actual del proyecto, pero aun asi se conserva el reporte para compararlo despues.
+- Tras implementar la funcion de limpieza y reingestar `RAG/src`, se repetira la misma auditoria con el mismo modelo para contrastar resultados.
+
+---
+
+## Reporte generado por el modelo
+
+Basándome en el contexto proporcionado, realizaré un análisis detallado de la solución RAG:
+
+🔍 Evaluación Arquitectónica
+
+Fortalezas Principales:
+1. Diseño Modular y Flexible
+- Separación clara de responsabilidades (Retrieve, Answer, Ingest Services)
+- Soporte para múltiples modos: documental, código, automático
+- Intenciones de recuperación flexibles (bootstrap, specific)
+
+2. Estrategia de Recuperación Inteligente
+- Función `buildSpecificQueries()` genera consultas expandidas
+- Capacidad de adaptar búsquedas según contexto de la pregunta
+- Enriquecimiento semántico de consultas originales
+
+3. Gestión Avanzada de Contexto
+- Construcción de prompt con metadatos detallados
+- Inclusión de referencias a fuentes originales
+- Seguimiento de líneas de código/documento
+
+Puntos Críticos de Diseño:
+- Dependencia de servicios externos (OpenAI, Qdrant)
+- Necesidad de configuración precisa de variables de entorno
+- Complejidad en manejo de múltiples formatos
+
+🧠 Lógica de Funcionamiento
+
+Flujo RAG Implementado:
+1. Normalización de consulta
+2. Expansión semántica de consultas
+3. Recuperación vectorial de fragmentos
+4. Generación de respuesta con contexto limitado
+5. Citación de fuentes originales
+
+Características Destacadas:
+- Prompt engineering robusto
+- Control estricto de generación (temperatura baja)
+- Manejo explícito de casos de contexto insuficiente
+
+📊 Evaluación General como Solución RAG
+
+Calificación: 8/10 ⭐
+
+Aspectos Positivos:
++ Alta modularidad
++ Flexibilidad de configuración
++ Estrategias avanzadas de recuperación
++ Control de generación de respuestas
+
+Áreas de Mejora:
+- Optimizar rendimiento de consultas múltiples
+- Implementar fallback más robusto
+- Mejorar manejo de contextos muy extensos
+- Añadir métricas de relevancia
+
+🚀 Recomendaciones:
+1. Implementar evaluación automática de relevancia
+2. Añadir caching inteligente de consultas
+3. Desarrollar método de "self-reflection" para respuestas
+4. Crear interfaz de configuración más amigable
+
+Conclusión: Es una implementación RAG sólida, con un diseño moderno que permite adaptación a diversos casos de uso, con un enfoque claro en precisión y control contextual.

RAG/docs/TEXTOS_AYUDA_PLAYGROUND.md

@@ -0,0 +1,125 @@
+# Textos de ayuda para botones del playground
+
+**Proyecto:** Workspace de tools IA para empresas  
+**Modulo:** RAG  
+**Ultima actualizacion:** 2026-04-06  
+**Ultima modificacion por:** Agente tools IA para potenciar servicios empresariales  
+**Estado:** Implementado en playground
+
+---
+
+## Proposito
+
+Dejar definidos los textos exactos que deben usarse como ayuda breve y como texto alternativo o tooltip de los botones principales del playground.
+
+Este documento sirve como referencia para que otro agente implemente la ayuda visual sin tener que reinterpretar el comportamiento de cada accion.
+
+---
+
+## Regla general de uso
+
+- `Preset docs`, `Preset RAG docs` y `Preset codigo` no cargan contexto por si solos.
+- Esos botones solo preparan la configuracion recomendada.
+- Despues de usar un preset, normalmente hay que pulsar `Cargar bootstrap` para que el contexto quede realmente cargado.
+- `Reemplazar contexto` vuelve a cargar bootstrap y sustituye el contexto activo por el nuevo.
+- `Vaciar contexto` borra el contexto actual y no necesita combinarse con ningun otro boton.
+
+---
+
+## Botones y textos
+
+### 1. `Cargar bootstrap`
+
+**Funcion real:**
+Ejecuta el bootstrap con la configuracion actual y carga un contexto inicial en la sesion.
+
+**Texto breve de ayuda:**
+Carga el contexto inicial del scope seleccionado para que el chat pueda trabajar con una panoramica del contenido.
+
+**Texto ALT / tooltip sugerido:**
+Ejecutar bootstrap y cargar contexto inicial
+
+---
+
+### 2. `Reemplazar contexto`
+
+**Funcion real:**
+Vuelve a ejecutar el bootstrap con la configuracion actual y sustituye el contexto activo.
+
+**Texto breve de ayuda:**
+Recalcula el bootstrap y reemplaza el contexto cargado por uno nuevo usando la configuracion actual.
+
+**Texto ALT / tooltip sugerido:**
+Reemplazar el contexto activo por un nuevo bootstrap
+
+---
+
+### 3. `Vaciar contexto`
+
+**Funcion real:**
+Elimina el bootstrap cargado de la sesion actual.
+
+**Texto breve de ayuda:**
+Borra el contexto precargado de la sesion para probar el chat sin bootstrap.
+
+**Texto ALT / tooltip sugerido:**
+Vaciar el contexto bootstrap activo
+
+---
+
+### 4. `Preset docs`
+
+**Funcion real:**
+Prepara la configuracion para trabajar con la documentacion global del workspace.
+
+**Texto breve de ayuda:**
+Prepara el formulario para trabajar con la documentacion global del workspace. Despues pulsa `Cargar bootstrap` si quieres cargar ese contexto.
+
+**Texto ALT / tooltip sugerido:**
+Aplicar preset para la documentacion global del workspace
+
+---
+
+### 5. `Preset RAG docs`
+
+**Funcion real:**
+Prepara la configuracion para trabajar con la documentacion del modulo RAG.
+
+**Texto breve de ayuda:**
+Prepara el formulario para trabajar con la documentacion del modulo RAG. Despues pulsa `Cargar bootstrap` si quieres cargar ese contexto.
+
+**Texto ALT / tooltip sugerido:**
+Aplicar preset para la documentacion del modulo RAG
+
+---
+
+### 6. `Preset codigo`
+
+**Funcion real:**
+Prepara la configuracion para trabajar con el codigo fuente del modulo RAG.
+
+**Texto breve de ayuda:**
+Prepara el formulario para trabajar con el codigo del RAG en modo `codigo`. Despues pulsa `Cargar bootstrap` si quieres cargar ese contexto.
+
+**Texto ALT / tooltip sugerido:**
+Aplicar preset para el codigo fuente del modulo RAG
+
+---
+
+## Texto general de ayuda recomendado para la zona de bootstrap
+
+Texto sugerido:
+
+```text
+Los presets solo preparan la configuracion recomendada. Para cargar realmente el contexto en la sesion debes pulsar `Cargar bootstrap`. Si ya hay un contexto activo y quieres sustituirlo, usa `Reemplazar contexto`. Si quieres eliminarlo por completo, usa `Vaciar contexto`.
+```
+
+---
+
+## Nota para implementacion
+
+Lo ideal es que esta ayuda aparezca:
+
+- cerca de los botones de bootstrap
+- con una frase breve siempre visible
+- y con tooltip o texto ALT especifico en cada boton

RAG/public/playground/index.html

@@ -120,12 +120,52 @@
             Usar un modelo para sintetizar el bootstrap recuperado
           </label>
           <div class="actions">
-            <button id="bootstrapButton">Cargar bootstrap</button>
+            <button
-            <button id="replaceBootstrapButton" class="secondary">Reemplazar contexto</button>
+              id="bootstrapButton"
-            <button id="clearBootstrapButton" class="secondary">Vaciar contexto</button>
+              title="Ejecutar bootstrap y cargar contexto inicial"
-            <button id="presetDocs" class="secondary">Preset docs</button>
+              aria-label="Ejecutar bootstrap y cargar contexto inicial"
-            <button id="presetRagDocs" class="secondary">Preset RAG docs</button>
+            >Cargar bootstrap</button>
-            <button id="presetCode" class="secondary">Preset codigo</button>
+            <button
+              id="replaceBootstrapButton"
+              class="secondary"
+              title="Reemplazar el contexto activo por un nuevo bootstrap"
+              aria-label="Reemplazar el contexto activo por un nuevo bootstrap"
+            >Reemplazar contexto</button>
+            <button
+              id="clearBootstrapButton"
+              class="secondary"
+              title="Vaciar el contexto bootstrap activo"
+              aria-label="Vaciar el contexto bootstrap activo"
+            >Vaciar contexto</button>
+            <button
+              id="presetDocs"
+              class="secondary"
+              title="Aplicar preset para la documentacion global del workspace"
+              aria-label="Aplicar preset para la documentacion global del workspace"
+            >Preset docs</button>
+            <button
+              id="presetRagDocs"
+              class="secondary"
+              title="Aplicar preset para la documentacion del modulo RAG"
+              aria-label="Aplicar preset para la documentacion del modulo RAG"
+            >Preset RAG docs</button>
+            <button
+              id="presetCode"
+              class="secondary"
+              title="Aplicar preset para el codigo fuente del modulo RAG"
+              aria-label="Aplicar preset para el codigo fuente del modulo RAG"
+            >Preset codigo</button>
+          </div>
+          <div class="bootstrap-help" aria-label="Ayuda de uso de botones bootstrap">
+            <p class="helper bootstrap-help-summary">Los presets solo preparan la configuracion recomendada. Para cargar realmente el contexto en la sesion debes pulsar <code>Cargar bootstrap</code>. Si ya hay un contexto activo y quieres sustituirlo, usa <code>Reemplazar contexto</code>. Si quieres eliminarlo por completo, usa <code>Vaciar contexto</code>.</p>
+            <div class="bootstrap-help-grid">
+              <p><strong>Cargar bootstrap:</strong> Carga el contexto inicial del scope seleccionado para que el chat pueda trabajar con una panoramica del contenido.</p>
+              <p><strong>Reemplazar contexto:</strong> Recalcula el bootstrap y reemplaza el contexto cargado por uno nuevo usando la configuracion actual.</p>
+              <p><strong>Vaciar contexto:</strong> Borra el contexto precargado de la sesion para probar el chat sin bootstrap.</p>
+              <p><strong>Preset docs:</strong> Prepara el formulario para trabajar con la documentacion global del workspace. Despues pulsa <code>Cargar bootstrap</code> si quieres cargar ese contexto.</p>
+              <p><strong>Preset RAG docs:</strong> Prepara el formulario para trabajar con la documentacion del modulo RAG. Despues pulsa <code>Cargar bootstrap</code> si quieres cargar ese contexto.</p>
+              <p><strong>Preset codigo:</strong> Prepara el formulario para trabajar con el codigo del RAG en modo <code>codigo</code>. Despues pulsa <code>Cargar bootstrap</code> si quieres cargar ese contexto.</p>
+            </div>
           </div>
           <pre id="bootstrapResult">Sin ejecutar aun.</pre>
         </article>

RAG/public/playground/styles.css

@@ -189,6 +189,39 @@ button.secondary {
   align-items: center;
 }
 
+.bootstrap-help {
+  margin: 16px 0 18px;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: #0b1020;
+}
+
+.bootstrap-help-summary {
+  margin-bottom: 12px;
+}
+
+.bootstrap-help-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bootstrap-help-grid p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.bootstrap-help-grid strong {
+  color: var(--text);
+}
+
+.bootstrap-help code {
+  color: var(--accent);
+}
+
 .checkbox input { width: auto; }
 
 pre {
@@ -259,6 +292,10 @@ pre {
     grid-template-columns: 1fr;
   }
 
+  .bootstrap-help-grid {
+    grid-template-columns: 1fr;
+  }
+
   .hero {
     flex-direction: column;
   }