Agente · dev-frontend

Propósito

Desarrollo y mantenimiento del frontend de CreaRack-Pro v1.0.49.

Stack activo

Arquitectura: patrón híbrido HTMX + JS Modular

HTMX (Dashboard, User Management, Trash, Device Groups)
├── 29 endpoints server-side rendering
├── 16 templates parciales en templates/htmx/
└── Declarativo, sin JavaScript manual

JS Modular (Editores, Terminal, Observatory, Wireless)
├── 112 archivos JS / módulos ES6
├── Services: ApiService, EChartsService, ToastService
└── State: StateManager, PersistenceManager

Regla principal: si la interacción puede resolverse con HTMX, usar HTMX. JS solo para lógica compleja de estado, canvas o visualizaciones.

Estructura de módulos JS (112 archivos)

static/js/
├── constants/          # Timing.js · Typography.js
├── services/           # ApiService · EChartsService · ToastService · Logger (6 archivos)
├── utils/              # IpValidator · KonvaLifecycle · TabHelper · DeviceFilterService · SidebarResize (6)
├── state_core/         # StateManager (Undo/Redo) · PersistenceManager (localStorage)
├── pages/              # dashboard · observatory · terminal · wireless (+ submódulos)
│   ├── observatory/    # ObservatoryCharts · CNS · Overview · Sentinel · Tabs · Alerts · WS · Settings · PingConsole (9)
│   └── wireless/       # WirelessDashboard · Detail · ChartGrid · ChartPanel · Registry · Report (6)
├── terminal/           # TabManager · MultiPaneManager · TerminalToolbar · Settings · ClusterMode · AgentLifecycle · ManualConnection · DeviceManager (10)
├── editor/             # Rack Editor: main · state · konva_setup · devices · ui_panels · ui_library · editor_api · modal_helper · PropertiesPanelRenderer/Events · SshConfigModal · ssh_integration · history_adapter · import_export · backups · sftp_ui · auto_provision_panel (17)
├── blueprints/         # Map Editor: map_editor · MapRender · MapInteraction · MapCables · MapRacks · MapHistoryAdapter · pathfinder · AutoPlansAdapter (8)
├── network/            # auto_provision.js (1)
└── modules/            # agent_connector · ssh_client · network_tools_v3 (3)

Estética NOC / Network-Native

El producto tiene identidad visual de herramienta de operaciones de red profesional — no es una app web genérica ni usa dark mode del sistema operativo:

• Fondo oscuro como base del diseño (no opcional)
• Tipografía monospace para datos técnicos: IPs, MACs, contadores, logs
• Colores de estado: verde (ok) · ámbar (warning) · rojo (critical) · gris (unknown/offline)
• Alta densidad de información: paneles, tablas, métricas en tiempo real
• Sin animaciones decorativas — solo indicadores funcionales de estado
• CSS propio: static/css/variables.css · components.css · pages/

Servicios centralizados (usar siempre estos, no duplicar)

• ApiService — fetch wrapper con CSRF. Usar para todas las llamadas API
• EChartsService — factory para Apache ECharts. No inicializar ECharts directamente
• ToastService — notificaciones. No usar alerts ni consola para feedback al usuario
• Logger — logger con niveles. No usar console.log directamente en producción
• DeviceFilterService — filtrado centralizado (search, status, group, rack). Compartido entre Terminal, Observatory y Wireless. Tiene scoped mode para modales
• StateManager — Undo/Redo global
• PersistenceManager — localStorage + auto-save

Componentes principales

Rack Editor (editor/)

• Canvas Konva.js con racks, dispositivos y conexiones editables
• Undo/Redo via StateManager + history_adapter
• Panel flotante Auto-Provision (auto_provision_panel.js)
• Integración SSH directa desde el editor

Map Editor (blueprints/)

• Canvas Konva.js para planos de infraestructura
• Cables bezier, zoom infinito
• Integración Auto-Plan AI (AutoPlansAdapter.js)
• Pathfinder para routing de cables

Terminal Hub (terminal/)

• xterm.js + WebSocket + Local Agent
• 5 layouts Multi-Pane CSS Grid: 1x1, 2x1, 1x2, 2x2, 3x1
• Drag-to-resize, shared toolbar, grid tab grouping
• Cluster Mode: broadcast multi-sesión
• Device groups migrado a HTMX partials

Network Observatory (pages/observatory/)

• Gráficas ECharts: heartbeat (ping), SNMP bandwidth, HTTP health
• Draggable sidebar (280–560px, persistido en localStorage)
• Ping Console flotante en tiempo real
• SNMP Interface Selector: cambio de interfaz al vuelo
• Bandwidth Y-Axis Sync: toggle escalas Y sincronizadas/independientes
• Asteroids Alert Mode: efecto visual rojo en alertas críticas
• Widget “Agent Fleet” con tabla, badges de rol y acciones

Wireless Monitor (pages/wireless/)

• Página dedicada: /monitoring/wireless/
• Multi-vendor: Cambium/Xirrus con columnas adaptativas
• Hasta 8 chart panels por AP, 9 métricas disponibles
• Time range pills: 1h/4h/12h/24h
• WebSocket real-time: Station Count + AP Bandwidth
• Print support: light theme para ECharts en impresión

Convenciones

• Módulos ES6 — no usar scripts globales salvo casos justificados
• No jQuery
• HTMX: targets con ID semántico · hx-swap="outerHTML" por defecto
• Alpine.js: solo cuando HTMX no es suficiente para el estado local
• Sin frameworks CSS externos (Bootstrap, Tailwind) — CSS propio
• Vite como build tool — no webpack ni rollup

Comandos de desarrollo (Windows)

# Instalar dependencias JS
npm install

# Arrancar Vite en modo desarrollo (hot reload)
npm run dev

# Build de producción
npm run build