Skip to content
TraceWall Desktop V3 AI

Recorrido de la interfaz

Recorrido de la interfaz

TraceWall Desktop usa una interfaz de panel lateral fijo con área de contenido principal. La UI se renderiza en el proceso Renderer de Electron (Chromium) y se comunica con el proceso Main vía IPC tipado.

Layout general

┌─────────────────────────────────────────────────────────────────────┐
│  Header:  [Logo]  TraceWall Desktop V3 AI        [User] [Settings] │
├─────────────┬───────────────────────────────────────────────────────┤
│  Sidebar    │  Content Area                                         │
│  (nav)      │  (módulo activo)                                      │
│             │                                                       │
│  1 CC       │  ┌─────────────────────────────────────────────────┐  │
│  2 Assets   │  │                                                 │  │
│  3 Topology │  │                                                 │  │
│  4 Exposure │  │                                                 │  │
│  5 Events   │  │                                                 │  │
│  6 Incidents│  │                                                 │  │
│  7 SOC      │  │                                                 │  │
│  8 Sensor   │  │                                                 │  │
│  9 ARGUS    │  │                                                 │  │
│  10 Settings│  │                                                 │  │
│             │  └─────────────────────────────────────────────────┘  │
└─────────────┴───────────────────────────────────────────────────────┘
ÍtemRutaDescripción
Command Center/Dashboard operativo: tarjetas de estado, KPIs, accesos rápidos
Assets & Inventory/modulos/assets-inventoryTabla de activos con filtros, columnas configurables, exportación
Network Topology/modulos/network-topologyGrafo interactivo (cytoscape.js): nodos, aristas, zoom, filtros
Exposure Intelligence/modulos/exposure-intelligencePerfiles, ejecución, hallazgos, evidencia, exportación
Events / SIEM/modulos/events-siemBuffer de eventos: búsqueda full-text, filtros, timeline, export
Incidents/modulos/incidentsGestión de incidentes: crear, asignar, timeline, evidencia, cerrar
SOC Workbench/modulos/soc-workbenchBúsquedas guardadas, casos, plantillas, exportación evidencia
Local Sensor/modulos/local-sensorTelemetría detallada del host: interfaces, procesos, puertos, rutas
ARGUS Workspace/argus/workspaceChat operativo, briefs, historial, herramientas, validación
Settings/configuracion/ajustes-generalesConfiguración global (ver Configuración)

Header (Barra superior)

  • Logo + versión — Clic: vuelve a Command Center
  • Indicador de estado global — Verde (todo ok), Amarillo (degradado: sensor/integración/ARGUS), Rojo (crítico)
  • Usuario actual — Sesión local (no hay cuentas cloud)
  • Botón Settings (engranaje) — Acceso directo a Settings

Área de contenido (por módulo)

Command Center

Tarjetas tipo widget (grid responsive 1-4 columnas):

TarjetaContenidoAcciones
Sensor LocalEstado, última muestra, uptime, CPU/RAM/DiskClic → Local Sensor
InventarioTotal activos, por tipo, reachable/staleClic → Assets
TopologíaMini-grafo (primer nivel), conteo nodos/aristasClic → Topology
ExposiciónÚltimo perfil, hallazgos críticos/altosClic → Exposure
EventosÚltimos 10, severidad, fuenteClic → Events
ARGUSEstado motor, último brief, tiempoClic → ARGUS Workspace
IntegracionesChips por conector + estadoClic → Settings → Integraciones

Convenciones de UI

  • Tablas: Ordenables (clic cabecera), filtrables (input por columna), paginadas (50/100/200), exportables (CSV/JSON)
  • Grafos: Zoom rueda, pan arrastre, clic nodo → panel lateral detalles, clic derecho → menú contextual
  • Formularios: Validación en línea, tooltips en iconos ?, campos obligatorios con *
  • Estados vacíos: Ilustración + mensaje + CTA (ej. “Configurar integración”, “Ejecutar perfil”)
  • Notificaciones: Toast superior-derecha (éxito, advertencia, error), persistentes en Logs

Atajos de teclado

AtajoAcción
Ctrl+1..Ctrl+9Navegar a módulo 1-9 (sidebar)
Ctrl+Shift+SAbrir Settings
Ctrl+KBúsqueda global (assets, eventos, hallazgos, briefs)
F5Refrescar datos del módulo actual
Ctrl+EExportar vista actual (si disponible)
EscCerrar modal / panel lateral / búsqueda
Ctrl+/Mostrar ayuda contextual / atajos

Temas y apariencia

  • Claro / Oscuro / Sistema — Settings → Apariencia
  • Densidad: Compacta / Cómoda / Espaciosa (afecta padding tablas, grafos)
  • Acento de color: Azul (defecto), Verde, Púrpura, Naranja — para daltonismo

Responsive / Ventana reducida

  • Sidebar colapsable (hover para expandir) below 1024px
  • Tarjetas Command Center apilan en 1 columna < 768px
  • Tablas: scroll horizontal con columnas fijas (IP, Hostname, Severidad)
  • Grafos: modo “lista” alternativo en móvil (no implementado aún)

Páginas relacionadas