▶ Overrun

El navegador donde la observabilidad es parte de navegar.

Un navegador para desarrollo, debugging y testing con las DevTools integradas como un overlay flotante que no le roba viewport a la página.

Nota de nombre. Overrun es un codename interno. El nombre público se define antes de la distribución pública (ver docs/decisiones/BRANDING.md).

---

Qué es

En un navegador normal, abrir las DevTools dockeadas encoge el viewport: dejás de ver tu app a tamaño real justo cuando más necesitás observarla. Overrun resuelve esto poniendo las herramientas en un panel flotante anclado a una esquina, por encima de la página y colapsable. La superficie de render se mantiene siempre a tamaño completo.

La instrumentación se obtiene por Chrome DevTools Protocol (CDP) desde fuera del DOM de la página — no la contamina ni la modifica de forma observable, lo que además prepara el terreno para el análisis de seguridad.

Características (MVP)

• Overlay flotante de observabilidad — arrastrable, colapsable a un pill, no altera el viewport de la página.
• Panel Network en tiempo real — lista virtualizada de requests con method, status, tamaño y tiempo; throughput en Canvas.
• Detalle de request — General, timing waterfall (DNS/Connect/TLS/TTFB), headers de request y response, payload y body de respuesta (on-demand).
• Chrome propio — barra de direcciones, navegación y resolución del viewport en vivo.
• Multi size — 55 perfiles de móviles, plegables, tablets, portátiles, monitores, TV y breakpoints; búsqueda, favoritos y tamaños personalizados guardados con DPR, touch y rotación. Escalado automático sin recortar el viewport lógico. Catálogo y guía.
• Sesiones exportables — Network en HAR y todos los paneles en JSON, bajo demanda y sin persistir métricas en disco.
• Release interno — About, User-Agent Overrun/x.y, protocolo overrun:// y automatización de releases Windows/Linux al publicar tags v*.
• Sin barra de menú nativa; identidad visual propia (Space Grotesk + JetBrains Mono).

Concepto visual navegable: artboards de Overrun (ventana, overlay colapsado, hoja de métricas, sistema de marca).

Arquitectura

BaseWindow
├── chromeView   WebContentsView → barra + tabs (React)
├── pageView     WebContentsView → la app inspeccionada, full-size
└── overlayView  WebContentsView → panel flotante (React), colapsable

pageView ─CDP→ main ─→ Overrun Events (normalización) ─IPC→ overlayView (UI)
                                                        └──→ servidor MCP (v3)

La capa Overrun Events normaliza los eventos crudos de CDP en un stream tipado por dominio (Network, Console, Memory, Performance, Storage). El mismo stream alimenta la UI hoy y el servidor MCP en v3, sin reimplementar.

Stack

Pieza	Elección
Base	Electron + WebContentsView
Lenguaje	TypeScript
Datos	CDP 1.3 → capa Overrun Events
UI overlay	React + uPlot (Canvas) + TanStack Virtual
Bundler	electron-vite
Empaquetado	Windows (NSIS) + Linux (AppImage)

Desarrollo

Requiere Node 20+ (y bun solo para correr las pruebas).

npm install
npm run dev          # modo desarrollo con HMR

Plataformas: Windows y Linux son las plataformas soportadas (las que se empaquetan y las que corre CI). macOS anda para desarrollo, con dos diferencias: usa la barra de título nativa en vez del chrome frameless (macOS no soporta titleBarOverlay, y los semáforos taparían las pestañas) y conserva el menú de aplicación mínimo, porque ahí los atajos de edición (Cmd+C/V/X/A) dependen de los roles del menú. No hay empaquetado para Mac: el instalador exigiría notarización paga (D-010).

Script	Qué hace
npm run dev	Levanta la app en desarrollo
npm run typecheck	Chequeo de tipos (main + renderer)
bun run test:viewport	Pruebas de catálogo, validación, rotación y biblioteca
bun run test:viewport:electron	Compila y verifica Multi size en Electron con sesión temporal
bun run test:security	Pruebas de redacción y reglas de interceptación
bun run test:security:electron	Compila y verifica los criterios de la fase 2.1 en Electron
npm run build	Bundle de producción
npm run package:win	Instalador NSIS (Windows)
npm run package:linux	AppImage (Linux)

Estructura

src/
├── shared/events.ts        Overrun Events (tipos por dominio) + canales IPC
├── main/                   proceso principal
│   ├── window.ts           BaseWindow + 3 WebContentsView + layout + IPC
│   ├── cdp/attach.ts       attach CDP a pageView
│   └── events/             bus + normalizadores por dominio
├── preload/                puente window.overrun (contextBridge, sandbox)
└── renderer/
    ├── chrome/             barra + tabs
    └── overlay/            panel de observabilidad
docs/                       producto, arquitectura, requerimientos, roadmap, decisiones
design/                     concepto visual (.dc.html)

Roadmap

Versión	Alcance
MVP ✅	Navegador + overlay + panel Network end-to-end
v1	Paneles Console · Memory · CPU · Storage · viewports · branding · distribución
v2	Seguridad / pentesting (interceptar tráfico, superficie mínima)
v3	IA (tokens) + servidor MCP

Detalle en docs/producto/ROADMAP.md.

Documentación

Toda la documentación vive en docs/ — empezar por docs/README.md.

Versionado

SemVer atado al roadmap: 0.x construye hacia v1; v1 = 1.0.0, v2 = 2.0.0, v3 = 3.0.0. Commits en formato Conventional Commits. Releases etiquetados vX.Y.Z con binarios en GitHub Releases.

Licencia

Propietario — © EscaliaTech. Todos los derechos reservados. Ver LICENSE.