💻 Aplicación Web Local (WebApp)

La WebApp de Context Code (apps/webapp) es una interfaz gráfica web premium e interactiva basada en una Progressive Web App (PWA) de Angular 19 que se conecta en tiempo real a tu terminal de desarrollo mediante canales seguros de WebSockets.

Permite monitorear el progreso del agente, interactuar con el chat mediante un diseño enriquecido y, lo más importante, gestionar y aprobar permisos de herramientas con un solo toque gráfico desde tu navegador o tu dispositivo móvil en red local.

---

🎨 Características Principales

• Chat Enriquecido en Tiempo Real: Interfaz web fluida con jerarquía visual de colores: verde para las consultas del desarrollador, gris para los turnos y pensamientos del agente, y tarjetas de estado del motor.
• Aprobaciones Gráficas de Permisos (Tarjetas Amarillas): Cuando el agente intenta realizar una operación restringida (ej. editar un archivo o correr un comando), la WebApp renderiza una tarjeta interactiva con botones físicos para Aprobar, Aprobar Siempre o Denegar con un solo toque.
• Prompt Remoto Interactivo: Cuadro de texto integrado en el navegador que te permite enviar instrucciones y consultas directamente al REPL de la consola interactiva local en caliente.
• Progressive Web App (PWA) Instalable: Utiliza @angular/service-worker para permitirte instalar la aplicación en la pantalla de inicio de tu smartphone, tableta o PC como una app nativa, funcionando perfectamente a pantalla completa.

---

🛡️ Protocolo de Comunicación y Seguridad

Para evitar accesos no autorizados en tu red local, la WebApp implementa un canal de comunicación estrictamente seguro:

1. Token Bearer Temporal: El servidor genera un token criptográfico dinámico de autorización. Puedes consultarlo o refrescarlo desde la CLI interactiva ejecutando el comando barra correspondiente.
2. Validación del WebSocket: La WebApp solicita el token en su componente de Login y lo persiste de forma segura en el localStorage del navegador. Al abrir la conexión por WebSocket, el primer mensaje obligatorio es una trama de auth con el token.
3. Control de Versión de Protocolo: Ambos extremos (CLI y WebApp) validan la cabecera PROTOCOL_VERSION para evitar incompatibilidades o distorsiones de datos entre diferentes releases del motor.

---

⚙️ Guía de Uso y Comandos en la CLI

Desde tu consola de Context Code, dispones de una suite de subcomandos bajo la opción barra /webapp para administrar el servidor local:

Comando	Acción
/webapp	Muestra el estado del servidor web local (inactivo/activo, puerto, URL, conexiones activas y estado del build estático).
/webapp start	Inicia el servidor HTTP y WebSocket local en el puerto por defecto 9876.
/webapp stop	Detiene el servidor web de forma inmediata.
/webapp token	Genera o expone el token temporal Bearer de seguridad para que inicies sesión en la WebApp.
/webapp open	Lanza de forma automática tu navegador web predeterminado y accede a la URL http://localhost:9876.

---

🛠️ Desarrollo y Compilación Local

1. Servidor de Desarrollo (con Hot-Reload)

Si deseas realizar modificaciones visuales o depurar la interfaz web de Angular:

1. Navega a la carpeta de la WebApp e instala sus dependencias:

   cd apps/webapp
   pnpm install

2. Levanta el servidor de desarrollo de Angular:

   pnpm start

   Esto iniciará la aplicación en http://localhost:4200 y detectará automáticamente el socket del servidor del CLI corriendo en el puerto 9876.

2. Compilación de Producción PWA (Build Estático)

Para compilar y empaquetar la aplicación de manera que la CLI de Context Code la sirva de forma nativa e integrada en un único origen sin CORS:

1. Ejecuta el build de Angular:

   pnpm build

   Esto compila la PWA y escribe los archivos listos directamente en CLI/dist/webapp/. La próxima vez que corras /webapp start, el servidor local servirá la app de forma nativa.