Módulo de aviso del permiso Local Network Access

Resumen

Módulo JavaScript (static/js/modules/agent_lna_notice.js) que contextualiza el prompt del navegador sobre Local Network Access (LNA) antes de que aparezca. Detecta vía Permissions API si el estado es prompt y, si es así, renderiza un aviso propio explicando la conexión con el Local Agent.

Archivo: static/js/modules/agent_lna_notice.js
Tamaño: ~86 LOC
Dependencias: Permissions API (navigator.permissions.query)
Integración: templates/base.html (línea ~974, <script defer>)

Arquitectura Interna

Flujo de Ejecución

1. Módulo IIFE (Immediately Invoked Function Expression)
   ↓
2. Verificar ruta (pageOnAgentPage)
   → Si no está en AGENT_PATHS → return early
   ↓
3. Verificar sessionStorage['lna_notice_dismissed']
   → Si existe → return early (ya mostrado esta sesión)
   ↓
4. maybeShowNotice() async
   ├─ Verificar navigator.permissions existe
   ├─ Query permissions.query({name: 'local-network-access'})
   ├─ Si estado ≠ 'prompt' → return early
   └─ Llamar showNotice()
   ↓
5. showNotice()
   ├─ Crear <div class="lna-notice">
   ├─ Rellenar HTML (título + párrafo + botón)
   ├─ Adjuntar al <body>
   └─ Registrar evento click en botón
   ↓
6. dismiss() (al pulsar "Entendido")
   ├─ Marcar sessionStorage['lna_notice_dismissed'] = '1'
   ├─ Animar fade-out (0.4s)
   └─ Eliminar nodo del DOM

Constantes y Variables Clave

Métodos Públicos

maybeShowNotice() (async)

• Punto de entrada.
• Valida que navigator.permissions exista.
• Consulta navigator.permissions.query({name: 'local-network-access'}).
• Si el estado es 'prompt', llama a showNotice().
• Try-catch: si el navegador no soporta el permiso, sale silenciosamente (no-op).

showNotice()

• Crea el elemento DOM con HTML embebido:
  • Clase: lna-notice (fijo, abajo-derecha)
  • Contenido: título (“Conexión con tu Agente Local”) + párrafo explicativo + botón “Entendido”
  • Atributo: role="status" (accesibilidad)
  • Event listener: botón vinculado a dismiss()

dismiss()

• Marca sessionStorage['lna_notice_dismissed'] = '1'.
• Aplica CSS animation: fadeOut 0.4s ease-out forwards.
• Tras 400ms, elimina el nodo del DOM.

Estilos CSS

Definidos en static/css/components.css (líneas ~903–949):

Animaciones reutilizadas:

• slideIn (0.3s ease-out, definida en otro lugar)
• fadeOut (0.4s ease-out, definida en otro lugar)

Ciclo de Vida

1. Carga de página: Script se ejecuta con defer.
2. DOMContentLoaded o después: Invoca maybeShowNotice().
3. Detección: Consulta Permissions API.
   • Si navegador no soporta → nada.
   • Si estado = 'granted'/'denied' → nada (ya decidió).
   • Si estado = 'prompt' → muestra aviso.
4. Usuario cierra aviso: Marca sessionStorage, anima fade-out, borra DOM.
5. Resto de sesión: sessionStorage persiste, maybeShowNotice() no muestra de nuevo (early return).
6. Cierra navegador: sessionStorage se olvida, próxima sesión repite desde paso 2.

Integración con Otros Módulos

Limitaciones y Notas

1. Sin sincronización dinámica de rutas: AGENT_PATHS está hardcodeada. Si se añaden nuevas rutas al Agent, hay que actualizar manualmente aquí y en dashboard_widgets.js.

   • TODO: Considerar endpoint /api/agent/paths o inyectar en template.

2. sessionStorage vs localStorage: Se usa sessionStorage porque el permiso concedido persiste en el navegador; una sesión nueva vería el prompt de nuevo si no existiera. El aviso propio (sessionStorage) es para no molestar múltiples veces en la misma sesión.

3. Navegadores sin LNA: El módulo detecta ausencia de Permissions API y sale. No hay polyfill.

4. Timing de animaciones: Las timelines están hardcodeadas (0.3s slide-in, 0.4s fade-out). Deben coincidir con CSS.

Fuentes y Referencias

• Implementación: Commit f494fca8c040a41b05d07e9b367362f4c614bac1
• Microsoft Permissions API: https://learn.microsoft.com/deployedge/ms-edge-local-network-access
• MDN Permissions API: https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API
• Local Agent docs: Documentation/backend/LOCAL_AGENT.md (sección “Seguridad”)

Véase también

• [[feature—core—aviso-lna]]
• [[crearack—terminal—local-agent]]
• [[concept—saas—security]]
• [[entity—core—service—dashboard-widgets]]
• [[entity—core—middleware—csp]]