Guía contextual de instalación del Local Agent (Modal "Where to Install It")

Descripción ejecutiva\n\nEn v1.49.0, al pulsar “Download Agent” en el sidebar Terminal, dropdown header, botón Fleet Manager o banner onboarding, se abre una modal global que explica la decisión arquitectónica clave: la máquina donde instalar el Agent determina su rol (monitorización 24/7 vs. terminal interactivo).\n\nAntes: descarga ciega.\nAhora: guía contextual con dos opciones claras + confirmación de que varios Agents es lo normal (flota gestionada automáticamente).\n\n## Motivación\n\nAl charlar con usuarios, surgió confusión: “¿En mi PC o en un servidor?”. La gente suponía que el Agent decidía por sí mismo. Hay que aclarar: es la máquina la que decide el patrón de uso.\n\n- Máquina siempre encendida (servidor, mini-PC) → 24/7 Sentinel (monitorización continua).\n- Mi propio PC → Terminal + Auto-Discovery (descubrimiento y sesiones locales).\n\nUna sola clave `.exe`, pero el contexto de instalación marca todo.\n\n## Experiencia (UX)\n\n### Puntos de entrada (5)\n\n1. Terminal → “Download Agent” (sidebar): click abre la modal.\n2. Header → Dropdown “Local Agent” → “Download Agent”: click abre la modal.\n3. Fleet Manager → Botón “Install Guide”: click abre la modal.\n4. Banner just-in-time de onboarding (primera conexión sin agente): botón “Where to Install It” abre la modal.\n5. Recovery flow (agente caído): se salta la modal → descarga directa (el usuario ya sabe dónde lo tiene).\n\n### Contenido de la modal\n\n\n╔═══════════════════════════════════════════════════════════╗\n║ Local Agent — Where to Install It [✕] ║\n║───────────────────────────────────────────────────────────║\n│ It is the same installer in every case — what matters │\n│ is which machine it runs on. Your browser can only │\n│ reach the Agent installed on the computer you are using. │\n│ │\n│ ┌─────────────────────┐ ┌─────────────────────┐ │\n│ │ 24/7 MONITORING │ │ DEVICE DISCOVERY │ │\n│ │ (SENTINEL) │ │ AND TERMINAL │ │\n│ ├─────────────────────┤ ├─────────────────────┤ │\n│ │ Install on a │ │ Install on your PC. │ │\n│ │ machine that is │ │ Auto-Discovery and │ │\n│ │ always on… │ │ SSH/SFTP sessions │ │\n│ │ │ │ reach your devices │ │\n│ │ (monitoring only │ │ through the Agent │ │\n│ │ runs while powered) │ │ running next to │ │\n│ │ │ │ your browser. │ │\n│ └─────────────────────┘ └─────────────────────┘ │\n│ │\n│ Having several Agents is fine and expected: CreaRack │\n│ manages them as a fleet. One becomes the Primary and │\n│ runs the monitoring; the rest stay as ready backups. │\n│ │\n│ [Download Agent] [Close] │\n╚═══════════════════════════════════════════════════════════╝\n\n\nEn responsivo: las dos tarjetas apilan en vertical (<600px).\n\n## Implementación\n\n### Frontend (static/js + templates)\n\nModal HTML (`templates/base.html`):\n- Template global, renderizado solo si usuario autenticado (`{% if user.is_authenticated %}`)\n- ID: `agent-install-guide-modal`\n- Clases CSS: `.install-guide-intro`, `.install-guide-cards`, `.install-guide-card`, `.install-guide-note`\n\nFunciones JS (`static/js/base.js`):\n- `openAgentInstallGuide()` → `window.openModal('agent-install-guide-modal')`\n- `closeAgentInstallGuide()` → `window.closeModal('agent-install-guide-modal')`\n- Window bindings para invocación desde Alpine.js y event listeners\n\nAlpine actions (`static/js/alpine-components.js`):\n- `openInstallGuide()` en el menu dropdown del header → integración limpia\n\nPuntos de clickeo:\n- Terminal toolbar: botón “Download Agent” → `data-action=\"openAgentInstallGuide\"`\n- Fleet Manager: botón “Install Guide” → `data-action=\"openAgentInstallGuide\"`\n- Onboarding banner: botón “Where to Install It” → `window.openAgentInstallGuide()`\n- Dentro del modal: botón “Download Agent” → link directo a `{{ AGENT_DOWNLOAD_URL }}`\n\n### CSS (`static/css/components.css`)\n\nEstilos:\n- Intro + nota: tamaño 12px, color secundario, line-height 1.5\n- Cards: flexbox, gap 12px, background card, border 1px gris, radius 6px\n- Card heading: 12px, uppercase, letter-spacing 0.3px\n- Card paragraph: 12px, color secundario\n- Responsive: flex-direction column en <600px\n\n### I18n\n\nStrings nuevos en `locale/es/LC_MESSAGES/django.po` y `djangojs.po`:\n- `\"Local Agent — Where to Install It\"` → `\"Local Agent — Dónde instalarlo\"`\n- `\"24/7 monitoring (Sentinel)\"` → `\"Monitorización 24/7 (Sentinel)\"`\n- `\"Device discovery and terminal\"` → `\"Descubrimiento de dispositivos y terminal\"`\n- `\"Install it on a machine that is always on…\"` → (versión larga español)\n- `\"Install it on your own PC…\"` → (versión larga español)\n- `\"Having several Agents is fine and expected…\"` → (versión larga español)\n- `\"It is the same installer in every case…\"` → (versión larga español)\n- `\"Where to Install It\"` → `\"Dónde instalarlo\"`\n- `\"Install Guide\"` (botón en Fleet Manager)\n- `\"Where to install and download the Local Agent\"` (title atributo)\n\nTodas validadas con `check_po.py` y compiladas OK.\n\n## Testing\n\nNo hay tests específicos en el diff (es UX pura), pero:\n- Modal debe renderizar sin errores JS\n- Botones deben llamar a funciones correctas\n- Link de descarga debe estar presente y accesible\n- Responsive debe funcionar en móvil\n\n## Límites y futuro\n\n1. Recovery flow: agente caído salta la modal (descarga directa) — no queremos fricción extra cuando algo falla.\n2. Detección automática de portátil: QA de futuro — batería, hibernación, etc. Por ahora es responsabilidad del user.\n3. Enlace a docs extendidas: la modal es breve; docs profundos en wiki `concept--terminal--local-agent`.\n\n