# NetWatch

Real-time network latency monitor SPA designed to be served from a static bucket.

## Features

- **Real-time monitoring**: Updates every 250ms
- **10 monitored hosts**: Google Cloud, AWS, GitHub, Cloudflare, Azure, DigitalOcean, Fastly, Akamai, local gateway (192.168.100.1), and datavi.be
- **Visual latency display**: Large color-coded latency figures (NNNms format)
- **Sparkline graphs**: 300-second history visualization for each host
- **Color coding**:
  - Green: <50ms (excellent)
  - Lime: <100ms (good)
  - Yellow: <200ms (moderate)
  - Orange: <500ms (poor)
  - Red: >500ms (bad)
  - Gray: offline/unreachable
- **Zero runtime dependencies**: All resources bundled into build artifacts
- **IPv4 only**: Designed for IPv4 connectivity testing

## Technical Details

- Latency measured via HEAD requests with cache-busting
- Uses `mode: 'no-cors'` to allow cross-origin requests where CORS headers aren't present
- 5-second timeout for unresponsive hosts
- Canvas-based sparkline rendering
- Tailwind CSS v4 for styling

## Build

```bash
# Install dependencies
yarn install

# Development server
yarn dev

# Production build
yarn build

# Preview production build
yarn preview
```

## Deployment

After running `yarn build`, deploy the contents of the `dist/` directory to any static file host:

- AWS S3
- Google Cloud Storage
- Cloudflare Pages
- Vercel
- Netlify
- GitHub Pages

## Output Structure

```
dist/
├── index.html
└── assets/
    ├── index-*.css
    └── index-*.js
```

All assets are bundled and minified. No external dependencies at runtime.

## Browser Compatibility

Requires modern browser with:
- ES modules support
- Fetch API
- Canvas API
- CSS custom properties

## Limitations

- **CORS**: Some hosts may block cross-origin HEAD requests. The app uses `no-cors` mode which allows the request but provides opaque responses. Latency is still measurable based on request timing.
- **Local gateway**: The 192.168.100.1 endpoint requires the host to be accessible from your network.
- **Network conditions**: Measurements reflect browser-to-endpoint latency, which includes your local network, ISP, and internet routing.

## License

MIT