feat: add visual traceroute map and alerts & notifications

Visual Traceroute:
- New full-screen map view showing packet route across the globe
- GeoIP service extended to return lat/lon coordinates from ip-api.com
- Animated route lines between geo-located hops, color-coded by loss
- Pulsing markers for source/destination, hover tooltips with stats
- Auto-centers and auto-scales map to fit the discovered route
- Skips LAN/private IPs and unresponsive hops
- Idle state shows clickable global AWS preset targets on the map
- Floating target picker panel for quick trace launch

Alerts & Notifications:
- Configurable alert rules with name, source, metric, and threshold
- Supports traceroute and loss monitor as data sources
- Monitors latency, packet loss, and jitter metrics
- Fires native Windows desktop notifications when thresholds exceeded
- 30-second cooldown per rule to prevent notification spam
- Rules persisted to disk (alert-rules.json in userData)
- Enable/disable toggle and delete for each rule
- Recent alerts log showing last 50 fired alerts with timestamps

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dbfx

src/main/ipc-handlers.ts

@@ -1,5 +1,7 @@
-import { ipcMain, BrowserWindow } from 'electron';
-import { MtrSessionConfig } from '../shared/types';
+import { ipcMain, BrowserWindow, Notification, app } from 'electron';
+import path from 'node:path';
+import fs from 'node:fs';
+import { MtrSessionConfig, AlertRule } from '../shared/types';
 import { MtrSession } from './services/mtr-session';
 import { LossMonitor } from './services/loss-monitor';
 import { LOSS_MONITOR_TARGETS } from '../shared/presets';
@@ -87,6 +89,28 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
       lossMonitor = null;
     }
   });
+
+  // Alert rules persistence
+  const alertsFile = path.join(app.getPath('userData'), 'alert-rules.json');
+
+  ipcMain.handle('alerts:load', async () => {
+    try {
+      const data = fs.readFileSync(alertsFile, 'utf-8');
+      return JSON.parse(data) as AlertRule[];
+    } catch {
+      return [];
+    }
+  });
+
+  ipcMain.handle('alerts:save', async (_, rules: AlertRule[]) => {
+    fs.writeFileSync(alertsFile, JSON.stringify(rules, null, 2), 'utf-8');
+  });
+
+  ipcMain.handle('alerts:notify', async (_, title: string, body: string) => {
+    if (Notification.isSupported()) {
+      new Notification({ title, body }).show();
+    }
+  });
 }
 
 export function cleanupSession(): void {

src/main/preload.ts

@@ -62,4 +62,9 @@ contextBridge.exposeInMainWorld('mtrApi', {
     ipcRenderer.on('updater:error', listener as (...args: unknown[]) => void);
     return () => { ipcRenderer.removeListener('updater:error', listener as (...args: unknown[]) => void); };
   },
+
+  // Alerts
+  loadAlertRules: () => ipcRenderer.invoke('alerts:load'),
+  saveAlertRules: (rules: unknown) => ipcRenderer.invoke('alerts:save', rules),
+  showNotification: (title: string, body: string) => ipcRenderer.invoke('alerts:notify', title, body),
 });

src/main/services/geoip.ts

@@ -1,6 +1,12 @@
 import http from 'node:http';
 
-const cache = new Map<string, string>();
+export interface GeoIpResult {
+  location: string;
+  lat: number | null;
+  lon: number | null;
+}
+
+const cache = new Map<string, GeoIpResult>();
 
 function isPrivateIp(ip: string): boolean {
   return (
@@ -14,38 +20,50 @@ function isPrivateIp(ip: string): boolean {
   );
 }
 
+const LAN_RESULT: GeoIpResult = { location: 'LAN', lat: null, lon: null };
+const EMPTY_RESULT: GeoIpResult = { location: '', lat: null, lon: null };
+
 export function lookupGeoIp(ip: string): Promise<string> {
+  return lookupGeoIpFull(ip).then((r) => r.location);
+}
+
+export function lookupGeoIpFull(ip: string): Promise<GeoIpResult> {
   if (cache.has(ip)) return Promise.resolve(cache.get(ip)!);
   if (isPrivateIp(ip)) {
-    cache.set(ip, 'LAN');
-    return Promise.resolve('LAN');
+    cache.set(ip, LAN_RESULT);
+    return Promise.resolve(LAN_RESULT);
   }
 
   return new Promise((resolve) => {
     const timeout = setTimeout(() => {
-      resolve('');
+      resolve(EMPTY_RESULT);
     }, 3000);
 
     // ip-api.com free tier — no API key needed, 45 req/min
-    const req = http.get(`http://ip-api.com/json/${ip}?fields=country,city`, (res) => {
+    const req = http.get(`http://ip-api.com/json/${ip}?fields=country,city,lat,lon`, (res) => {
       let data = '';
       res.on('data', (chunk: Buffer) => { data += chunk.toString(); });
       res.on('end', () => {
         clearTimeout(timeout);
         try {
           const json = JSON.parse(data);
           const location = [json.city, json.country].filter(Boolean).join(', ') || '';
-          cache.set(ip, location);
-          resolve(location);
+          const result: GeoIpResult = {
+            location,
+            lat: typeof json.lat === 'number' ? json.lat : null,
+            lon: typeof json.lon === 'number' ? json.lon : null,
+          };
+          cache.set(ip, result);
+          resolve(result);
         } catch {
-          resolve('');
+          resolve(EMPTY_RESULT);
         }
       });
     });
 
     req.on('error', () => {
       clearTimeout(timeout);
-      resolve('');
+      resolve(EMPTY_RESULT);
     });
   });
 }

src/main/services/mtr-session.ts

@@ -3,7 +3,7 @@ import { MtrSessionConfig, MtrSessionState, DiscoveredHop } from '../../shared/t
 import { runTraceroute, resolveHostname } from './traceroute';
 import { ping } from './ping';
 import { StatsCalculator } from './stats';
-import { lookupGeoIp } from './geoip';
+import { lookupGeoIpFull } from './geoip';
 
 export class MtrSession extends EventEmitter {
   private config: MtrSessionConfig;
@@ -40,8 +40,8 @@ export class MtrSession extends EventEmitter {
               resolveHostname(hop.ip).then((hostname) => {
                 this.stats.setHostname(hop.hopNumber, hostname);
               });
-              lookupGeoIp(hop.ip).then((geo) => {
-                this.stats.setGeo(hop.hopNumber, geo);
+              lookupGeoIpFull(hop.ip).then((result) => {
+                this.stats.setGeo(hop.hopNumber, result.location, result.lat, result.lon);
               });
             }
           },

src/main/services/stats.ts

@@ -5,6 +5,8 @@ interface HopStats {
   ip: string;
   hostname: string;
   geo: string;
+  geoLat: number | null;
+  geoLon: number | null;
   sent: number;
   received: number;
   last: number | null;
@@ -30,6 +32,8 @@ export class StatsCalculator {
         ip,
         hostname: ip,
         geo: '',
+        geoLat: null,
+        geoLon: null,
         sent: 0,
         received: 0,
         last: null,
@@ -47,9 +51,13 @@ export class StatsCalculator {
     if (hop) hop.hostname = hostname;
   }
 
-  setGeo(hopNumber: number, geo: string): void {
+  setGeo(hopNumber: number, geo: string, lat?: number | null, lon?: number | null): void {
     const hop = this.hops.get(hopNumber);
-    if (hop) hop.geo = geo;
+    if (hop) {
+      hop.geo = geo;
+      if (lat !== undefined) hop.geoLat = lat;
+      if (lon !== undefined) hop.geoLon = lon;
+    }
   }
 
   addSample(hopNumber: number, rtt: number | null): void {
@@ -96,6 +104,8 @@ export class StatsCalculator {
         ip: hop.ip,
         hostname: hop.hostname,
         geo: hop.geo,
+        geoLat: hop.geoLat,
+        geoLon: hop.geoLon,
         sent: hop.sent,
         received: hop.received,
         lossPercent: Math.round(lossPercent * 10) / 10,

src/renderer/App.tsx

@@ -3,15 +3,19 @@ import { AnimatePresence, motion } from 'framer-motion';
 import Layout from './components/Layout';
 import TraceView from './components/TraceView';
 import MapView from './components/MapView';
+import VisualTraceView from './components/VisualTraceView';
 import LossMonitorView from './components/LossMonitorView';
+import AlertsView from './components/AlertsView';
 import AboutView from './components/AboutView';
 import { useMtrSession } from './hooks/useMtrSession';
 import { useLossMonitor } from './hooks/useLossMonitor';
+import { useAlerts } from './hooks/useAlerts';
 
 export default function App() {
-  const [activeView, setActiveView] = useState<'trace' | 'map' | 'loss' | 'about'>('trace');
+  const [activeView, setActiveView] = useState<'trace' | 'map' | 'visual' | 'loss' | 'alerts' | 'about'>('trace');
   const { hops, status, target, resolvedIp, error, start, stop } = useMtrSession();
   const lossMonitor = useLossMonitor();
+  const alerts = useAlerts();
 
   const handleStart = useCallback(
     (t: string, interval: number) => {
@@ -35,6 +39,10 @@ export default function App() {
     [start],
   );
 
+  // Check alerts whenever we have data
+  alerts.checkTrace(hops);
+  alerts.checkLoss(lossMonitor.targets);
+
   return (
     <Layout activeView={activeView} onViewChange={setActiveView}>
       <AnimatePresence mode="wait">
@@ -70,6 +78,26 @@ export default function App() {
             <MapView onSelectTarget={handleMapSelect} />
           </motion.div>
         )}
+        {activeView === 'visual' && (
+          <motion.div
+            key="visual"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="h-full"
+          >
+            <VisualTraceView
+              hops={hops}
+              status={status}
+              target={target}
+              resolvedIp={resolvedIp}
+              error={error}
+              onStart={handleStart}
+              onStop={handleStop}
+            />
+          </motion.div>
+        )}
         {activeView === 'loss' && (
           <motion.div
             key="loss"
@@ -87,6 +115,24 @@ export default function App() {
             />
           </motion.div>
         )}
+        {activeView === 'alerts' && (
+          <motion.div
+            key="alerts"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="h-full"
+          >
+            <AlertsView
+              rules={alerts.rules}
+              recentAlerts={alerts.recentAlerts}
+              onAddRule={alerts.addRule}
+              onRemoveRule={alerts.removeRule}
+              onToggleRule={alerts.toggleRule}
+            />
+          </motion.div>
+        )}
         {activeView === 'about' && (
           <motion.div
             key="about"