diff --git a/cli/cmd/dashboard_test.go b/cli/cmd/dashboard_test.go
index 8e01666..4495a2d 100644
--- a/cli/cmd/dashboard_test.go
+++ b/cli/cmd/dashboard_test.go
@@ -230,6 +230,19 @@ func TestDashboardHTMLIsNotCached(t *testing.T) {
 	}
 }
 
+func TestTopologyMapsHaveNoFixedHubAndCanZoom(t *testing.T) {
+	for _, required := range []string{`data-net="in"`, `data-net="out"`, `data-net="fit"`, `data-net="full"`, `requestFullscreen()`, `data-cat="observed"`, `data-cat="predicted"`, `data-cat="severity"`, `drawTopology('offlineGraph'`, `drawTopology('modelGraph'`, `drawTopology('captureGraph'`} {
+		if !strings.Contains(dashboardHTML, required) {
+			t.Fatalf("topology map is missing %q", required)
+		}
+	}
+	for _, removed := range []string{"CAPTURE HUB", "MAIN HOST", "lower-activity"} {
+		if strings.Contains(dashboardHTML, removed) {
+			t.Fatalf("topology map must not centre on one host or drop hosts: found %q", removed)
+		}
+	}
+}
+
 func TestOfflineUploadAndShortRolloutControls(t *testing.T) {
 	for _, required := range []string{`id="offlineUpload"`, `id="offlineStepTabs"`, `id="offlinePast"`, `id="offlineFuture"`, `id="offlineGraph"`, `Math.min(3,Number(w.rollout_steps||0))`} {
 		if !strings.Contains(dashboardHTML, required) {
diff --git a/cli/cmd/dashboard_ui.go b/cli/cmd/dashboard_ui.go
index 7b754e8..1de673d 100644
--- a/cli/cmd/dashboard_ui.go
+++ b/cli/cmd/dashboard_ui.go
@@ -25,26 +25,28 @@ const dashboardHTML = `<!doctype html>
 .shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr);transition:grid-template-columns .2s ease}.sidebar{position:sticky;top:0;height:100vh;padding:16px 12px;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;z-index:10;overflow:visible;transition:padding .2s ease}.brand{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 8px 16px;overflow:hidden}.brand-mark{width:36px;height:36px;min-width:36px;border-radius:10px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900;letter-spacing:-.04em}.brand-copy{min-width:0;white-space:nowrap}.brand strong{display:block;font-size:18px;letter-spacing:-.02em}.brand small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em}.rail-toggle{position:absolute;right:-13px;top:29px;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);z-index:2}.rail-toggle:hover{color:var(--red);border-color:#c9c9c9}.nav{display:grid;gap:4px}.nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:42px;border:0;border-radius:10px;padding:9px 12px;background:transparent;text-align:left;color:var(--text);cursor:pointer;font-weight:500;overflow:hidden}.nav button:hover{background:var(--surface)}.nav button.active{background:var(--surface);font-weight:700}.nav button.active:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--red)}.nav-icon{width:24px;min-width:24px;text-align:center;color:var(--muted)}.nav-label{white-space:nowrap}.side-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px 10px 4px}.side-foot>p{margin:12px 0 10px;font-size:11px;color:var(--muted)}.latency-aside h4{margin:0 0 9px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.lag-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}.lag-row:last-child{border-bottom:0}.lag-row span{font-size:10px;color:var(--muted)}.lag-row strong{font-size:11px}.lag-note{display:block;margin-top:7px;color:var(--muted);font-size:9px;line-height:1.35}body.rail-collapsed .shell{grid-template-columns:76px minmax(0,1fr)}body.rail-collapsed .sidebar{padding-left:10px;padding-right:10px}body.rail-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}body.rail-collapsed .brand-copy,body.rail-collapsed .nav-label,body.rail-collapsed .side-foot{display:none}body.rail-collapsed .nav button{justify-content:center;gap:0;padding:9px}body.rail-collapsed .nav-icon{font-size:15px}
 .main{min-width:0;padding:0 32px 48px;max-width:1600px;width:100%;margin:0 auto}.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);margin-bottom:32px}.topbar h1{font-size:16px;margin:0;font-weight:700}.topbar p{margin:1px 0 0;color:var(--muted);font-size:11px}.status-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;border:0;border-radius:999px;padding:6px 12px;color:var(--text);background:var(--surface);font-size:11px;font-weight:600}.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.chip.good .dot{background:var(--green)}.chip.bad .dot{background:var(--red)}
 .view{display:none;animation:enter .18s ease}.view.active{display:block}@keyframes enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 24px}.eyebrow{margin:0 0 7px;color:var(--red);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.section-head h2,.hero h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.035em}.section-head p{margin:8px 0 0;color:var(--muted);max-width:700px}.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:span 2}.span-all{grid-column:1/-1}.card{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:none;min-width:0}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}.card-head h3{font-size:15px;margin:0}.card-head p{font-size:11px;color:var(--muted);margin:4px 0 0}.kpi{min-height:116px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border-color:transparent}.kpi-label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}.kpi-value{font-size:28px;font-weight:700;letter-spacing:-.035em}.kpi-note{font-size:11px;color:var(--muted)}
-.hero{position:relative;overflow:hidden;min-height:0;padding:26px 30px 30px;background:#101113;color:#fff;border:1px solid #292a2d;display:flex;flex-direction:column;gap:22px}.hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#ff3038}.hero:after{content:"";position:absolute;right:-100px;bottom:-250px;width:390px;height:390px;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}.hero-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-header .eyebrow{margin:0;color:#ff7378}.hero-header span{color:#9699a0;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.hero-copy{position:relative;z-index:1;min-width:0;padding-top:20px;border-top:1px solid #34363a}.hero h2{max-width:960px;font-size:clamp(27px,3vw,42px);line-height:1.12;letter-spacing:-.035em}.hero-copy p{color:#b9bbc0;margin:10px 0 0;max-width:780px;font-size:13px;line-height:1.5}.hero-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0;width:100%}.hero-metric{min-width:0;min-height:112px;padding:15px 17px;border-radius:10px;background:#202124;border:1px solid #37393d;display:flex;flex-direction:column;justify-content:space-between;gap:7px}.hero-metric .kpi-label{color:#b9bbc0;font-size:10px;line-height:1.25}.hero-measure{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}.hero-metric strong{display:block;color:#fff;font-size:clamp(22px,2.1vw,31px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.hero-unit{color:#d5d6da;font-size:11px;white-space:nowrap}.hero-metric .kpi-note{color:#a6a9af;font-size:10px;line-height:1.3}.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:10px}.legend span:before{content:"";display:inline-block;width:18px;height:3px;border-radius:9px;margin-right:6px;vertical-align:middle}.legend .observed:before{background:var(--cyan)}.legend .predicted:before{background:var(--red);border-top:1px dashed #fff}.legend .alternative:before{background:#909090}.legend .alerting:before{background:var(--amber)}
+.hero{position:relative;overflow:hidden;min-height:0;padding:26px 30px 30px;background:#101113;color:#fff;border:1px solid #292a2d;display:flex;flex-direction:column;gap:22px}.hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#ff3038}.hero:after{content:"";position:absolute;right:-100px;bottom:-250px;width:390px;height:390px;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}.hero-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-header .eyebrow{margin:0;color:#ff7378}.hero-header span{color:#9699a0;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.hero-copy{position:relative;z-index:1;min-width:0;padding-top:20px;border-top:1px solid #34363a}.hero h2{max-width:960px;font-size:clamp(27px,3vw,42px);line-height:1.12;letter-spacing:-.035em}.hero-copy p{color:#b9bbc0;margin:10px 0 0;max-width:780px;font-size:13px;line-height:1.5}.hero-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0;width:100%}.hero-metric{min-width:0;min-height:112px;padding:15px 17px;border-radius:10px;background:#202124;border:1px solid #37393d;display:flex;flex-direction:column;justify-content:space-between;gap:7px}.hero-metric .kpi-label{color:#b9bbc0;font-size:10px;line-height:1.25}.hero-measure{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}.hero-metric strong{display:block;color:#fff;font-size:clamp(22px,2.1vw,31px);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.hero-unit{color:#d5d6da;font-size:11px;white-space:nowrap}.hero-metric .kpi-note{color:#a6a9af;font-size:10px;line-height:1.3}.legend{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10px}.legend button{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);padding:5px 10px;font:inherit;cursor:pointer}.legend button[aria-pressed="false"]{opacity:.45;text-decoration:line-through}.legend button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.legend button:before{content:"";display:inline-block;width:18px;height:3px;border-radius:9px;margin-right:6px;vertical-align:middle}.legend .observed:before{background:var(--cyan)}.legend .predicted:before{background:var(--red);border-top:1px dashed #fff}.legend .alternative:before{background:#909090}.legend .alerting:before{background:var(--amber)}
 .chart{min-height:230px;width:100%;overflow:hidden}.chart svg{display:block;width:100%;height:230px}.axis{fill:var(--muted);font-size:10px}.rate-card-head{flex-wrap:wrap}.rate-tabs{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.rate-tabs button{border:0;border-radius:5px;background:transparent;color:var(--muted);padding:5px 8px;font-size:10px;cursor:pointer}.rate-tabs button.active{background:var(--surface2);color:var(--text);box-shadow:var(--shadow)}.rate-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}table{border-collapse:collapse;width:100%;min-width:680px}th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;background:var(--surface);position:sticky;top:0}td{font-size:12px}tbody tr:hover{background:#fafafa}tbody tr:last-child td{border-bottom:0}.badge{display:inline-flex;border:0;border-radius:999px;padding:4px 9px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.badge.good{color:#176b29;background:#e6f4ea}.badge.warn{color:#8a4b00;background:#fff3e0}.badge.danger{color:#fff;background:var(--red)}.badge.info{color:var(--cyan);background:#e8f0fe}
 .empty{min-height:180px;border:1px dashed #c7c7c7;border-radius:12px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);background:#fafafa}.empty strong{color:var(--text);display:block;margin-bottom:5px}.banner{border-radius:10px;padding:14px 16px;border:1px solid var(--line);margin-bottom:16px;border-left-width:4px}.banner.warn{background:#fff8ed;border-color:#f4d1a1;border-left-color:var(--amber);color:#743d00}.banner.danger{background:#fff1f1;border-color:#ffc5c5;border-left-color:var(--red);color:#8c0000}.banner.info{background:#f0f6ff;border-color:#c5d9f5;border-left-color:var(--cyan);color:#06428e}.banner p{margin:4px 0 0;color:inherit;opacity:.8;font-size:12px}.metric-list{display:grid;gap:10px}.metric-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line)}.metric-row:last-child{border-bottom:0}.metric-row span{color:var(--muted);font-size:11px}.metric-row strong{font-size:12px;text-align:right;max-width:70%;overflow-wrap:anywhere}
 .state-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.state-toolbar input{accent-color:var(--red);min-width:190px;flex:1}.state-pill{background:var(--red);color:#fff;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800}.model-graph{height:430px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(#fafafa,#fff);overflow:hidden}.model-graph svg{width:100%;height:100%;display:block}.rank-list{display:grid;gap:8px}.rank-row{display:grid;grid-template-columns:44px 98px minmax(190px,1fr) 100px 90px;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.rank-row:last-child{border-bottom:0}.rank{font-weight:800;color:var(--red)}.link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attention-list,.caveat-list,.alert-list{display:grid;gap:8px}.attention-item,.caveat,.alert-item{padding:13px 14px;border-radius:10px;background:var(--surface)}.attention-item strong,.alert-item strong{display:block;margin-bottom:4px}.attention-item p,.caveat,.alert-item p{margin:0;color:var(--muted);font-size:12px}.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.family{padding:14px;background:var(--surface);border-radius:10px}.family strong{display:block;font-size:22px}.family span{font-size:11px;color:var(--muted)}.subtle{font-size:11px;color:var(--muted)}
 .attention-matrix{overflow:auto;border:1px solid var(--line);border-radius:10px}.attention-matrix table{min-width:760px;table-layout:fixed}.attention-matrix th,.attention-matrix td{height:42px;width:74px;min-width:0;padding:6px 4px;text-align:center;border-right:1px solid var(--line)}.attention-matrix th:last-child,.attention-matrix td:last-child{border-right:0}.attention-matrix th:first-child,.attention-matrix td:first-child{position:sticky;left:0;z-index:1;width:168px;min-width:168px;max-width:168px;text-align:left;background:var(--surface);overflow:hidden;text-overflow:ellipsis}.attention-matrix th{font-size:8px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}.attention-matrix td.heat{font-size:9px;font-weight:800;font-variant-numeric:tabular-nums}.matrix-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:9px}.matrix-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:5px 12px;margin-top:10px}.matrix-legend div{display:flex;gap:7px;align-items:baseline;min-width:0;font-size:9px;color:var(--muted)}.matrix-legend strong{flex:0 0 auto;color:var(--red)}.matrix-legend span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.system-card{min-width:0;min-height:132px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.system-card.wide{grid-column:span 2}.system-label{display:block;margin-bottom:16px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.system-value{display:block;font-size:clamp(16px,1.7vw,24px);line-height:1.2;overflow-wrap:anywhere;word-break:break-word}.system-card.wide .system-value{font-size:13px;line-height:1.55}.system-note{display:block;margin-top:12px;color:var(--muted);font-size:10px}
 .offline-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.offline-form input[type=file]{min-width:0;max-width:100%;flex:1 1 260px;padding:12px;border:1px dashed var(--line);border-radius:9px;background:var(--surface)}.offline-form button{border:0;border-radius:9px;padding:12px 18px;background:var(--red);color:#fff;cursor:pointer;font-weight:700}.offline-form button:disabled{opacity:.5;cursor:wait}.offline-result{display:grid;gap:16px;margin-top:16px}.offline-result details{border:1px solid var(--line);border-radius:9px;padding:12px;margin:8px 0;background:var(--surface2)}.offline-result summary{cursor:pointer;font-weight:700}.offline-result .table-wrap{margin-top:10px}.offline-result .subtle{line-height:1.5}.offline-status{margin-top:14px;color:var(--muted);overflow-wrap:anywhere}
-.offline-upload-card{border-left:4px solid var(--red)}.offline-jump{position:fixed;right:24px;bottom:24px;z-index:9;border:0;border-radius:999px;padding:12px 17px;background:var(--red);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);font-weight:700;cursor:pointer}.offline-jump:hover{background:var(--red-hover)}.offline-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.offline-pane{min-width:0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.offline-pane.past{border-top:3px solid var(--cyan)}.offline-pane.future{border-top:3px solid var(--red)}.offline-pane h5{margin:0 0 4px;font-size:13px}.offline-pane>p{margin:0 0 12px;color:var(--muted);font-size:11px}.offline-event{padding:10px 0;border-top:1px solid var(--line);font-size:11px}.offline-event:first-child{border-top:0}.offline-event strong{display:block;overflow-wrap:anywhere}.offline-event small{color:var(--muted)}.offline-step-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.offline-step-tabs button{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 11px;cursor:pointer}.offline-step-tabs button.active{background:var(--red);border-color:var(--red);color:#fff}.offline-step-tabs button:focus-visible,.offline-jump:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.model-graph.offline-graph{height:520px}.offline-graph svg{min-width:980px}.offline-timing{margin-top:10px;color:var(--muted);font-size:11px;line-height:1.5}
+.offline-upload-card{border-left:4px solid var(--red)}.offline-jump{position:fixed;right:24px;bottom:24px;z-index:9;border:0;border-radius:999px;padding:12px 17px;background:var(--red);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);font-weight:700;cursor:pointer}.offline-jump:hover{background:var(--red-hover)}.offline-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.offline-pane{min-width:0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.offline-pane.past{border-top:3px solid var(--cyan)}.offline-pane.future{border-top:3px solid var(--red)}.offline-pane h5{margin:0 0 4px;font-size:13px}.offline-pane>p{margin:0 0 12px;color:var(--muted);font-size:11px}.offline-event{padding:10px 0;border-top:1px solid var(--line);font-size:11px}.offline-event:first-child{border-top:0}.offline-event strong{display:block;overflow-wrap:anywhere}.offline-event small{color:var(--muted)}.offline-step-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.offline-step-tabs button{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 11px;cursor:pointer}.offline-step-tabs button.active{background:var(--red);border-color:var(--red);color:#fff}.offline-step-tabs button:focus-visible,.offline-jump:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.model-graph.offline-graph{height:640px}.offline-graph svg{min-width:980px}.offline-timing{margin-top:10px;color:var(--muted);font-size:11px;line-height:1.5}
 @media(max-width:800px){.offline-split{grid-template-columns:1fr}.offline-jump{right:12px;bottom:12px}.model-graph.offline-graph{height:420px}}
 @media(max-width:1100px){.shell,body.rail-collapsed .shell{grid-template-columns:1fr}.sidebar,body.rail-collapsed .sidebar{position:sticky;height:auto;top:0;padding:8px 16px;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);overflow:auto}.brand,body.rail-collapsed .brand{justify-content:flex-start;padding:0 18px 0 0;min-height:40px}.brand-copy,body.rail-collapsed .brand-copy,.nav-label,body.rail-collapsed .nav-label{display:block}.brand small,.side-foot,.rail-toggle{display:none}.nav{display:flex}.nav button,body.rail-collapsed .nav button{white-space:nowrap;font-size:13px;justify-content:flex-start;gap:8px;padding:9px 12px}.nav-icon,body.rail-collapsed .nav-icon{display:none}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3,.system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:720px){.main{padding:0 16px 34px}.topbar{height:auto;padding:16px 0;align-items:flex-start;flex-direction:column}.status-row{justify-content:flex-start}.grid-4,.grid-3,.grid-2,.system-grid{grid-template-columns:1fr}.span-2,.span-all,.system-card.wide{grid-column:auto}.hero{padding:22px;gap:18px}.hero-header span{display:none}.hero-metrics{width:100%}.rank-row{grid-template-columns:45px 90px minmax(0,1fr)}.rank-row .rank-score,.rank-row .rank-severity{display:none}.model-graph{height:330px}.section-head{align-items:flex-start;flex-direction:column}.card{padding:16px}.sidebar,body.rail-collapsed .sidebar{padding:8px}.brand{display:none}.nav{min-width:max-content}.attention-matrix table{min-width:680px}.attention-matrix th:first-child,.attention-matrix td:first-child{width:140px;min-width:140px;max-width:140px}.system-card{min-height:110px}.system-value{font-size:18px}.system-card.wide .system-value{font-size:12px}}
 @media(max-width:900px){.hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy{max-width:760px}}
 @media(max-width:720px){.hero-metric{min-height:104px}}
 @media(max-width:420px){.hero-metrics{grid-template-columns:1fr}.hero-metric{min-height:88px}}
-.model-graph{height:740px;overflow:auto}.model-graph svg{width:100%;min-width:980px;height:auto;display:block}
+.model-graph{position:relative;height:740px;overflow:hidden}.model-graph svg{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.model-graph svg.dragging{cursor:grabbing}.model-graph svg [data-id]{cursor:pointer}
+.graph-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}.graph-tools button{min-width:34px}.graph-hint{position:absolute;right:14px;bottom:9px;margin:0;color:var(--muted);font-size:10px;pointer-events:none}
+.graph-frame:fullscreen{display:flex;flex-direction:column;gap:12px;margin:0;padding:18px;border:0;border-radius:0;background:var(--surface);overflow:hidden}.graph-frame:fullscreen .model-graph{flex:1;min-height:0;height:auto;margin-top:0!important}.graph-frame:fullscreen svg{touch-action:none}
 .model-graph.graph-empty{height:auto;min-height:180px;border:0;background:transparent}
 .graph-swipe-note{display:none}
-@media(max-width:720px){.model-graph{height:430px}.graph-swipe-note{display:block;color:var(--muted);font-size:11px;margin:8px 0 0}}
-:root{color-scheme:light;--topology-lane:#f7f9fc;--topology-aura:#fff6f6;--topology-aura-border:#ffe0e0;--topology-node:#fff;--topology-predicted-node:#fff1f1;--topology-node-border:#cbd5e1;--heat-rgb:255,0,0;--heat-weak-text:#111;--heat-strong-text:#fff}
-html[data-theme="dark"]{color-scheme:dark;--bg:#0b1018;--surface:#202a38;--surface2:#141c27;--line:#354153;--text:#edf2f9;--muted:#aebdd0;--green:#73dc87;--cyan:#83bdff;--amber:#ffbd69;--red:#ff6267;--red-hover:#ff8589;--shadow:0 2px 10px rgba(0,0,0,.3);--topology-lane:#1a2634;--topology-aura:#2d202a;--topology-aura-border:#56303a;--topology-node:#243142;--topology-predicted-node:#3b2530;--topology-node-border:#63758c;--heat-rgb:255,98,103;--heat-weak-text:#edf2f9;--heat-strong-text:#fff}
+@media(max-width:720px){.model-graph{height:430px}.graph-hint{display:none}.graph-swipe-note{display:block;color:var(--muted);font-size:11px;margin:8px 0 0}}
+:root{color-scheme:light;--heat-rgb:255,0,0;--heat-weak-text:#111;--heat-strong-text:#fff}
+html[data-theme="dark"]{color-scheme:dark;--bg:#0b1018;--surface:#202a38;--surface2:#141c27;--line:#354153;--text:#edf2f9;--muted:#aebdd0;--green:#73dc87;--cyan:#83bdff;--amber:#ffbd69;--red:#ff6267;--red-hover:#ff8589;--shadow:0 2px 10px rgba(0,0,0,.3);--heat-rgb:255,98,103;--heat-weak-text:#edf2f9;--heat-strong-text:#fff}
 .sidebar,.rail-toggle{background:var(--surface2)}
 .rail-toggle:hover{border-color:var(--muted)}
 .theme-toggle{cursor:pointer;border:1px solid var(--line);white-space:nowrap}
@@ -93,26 +95,14 @@ html[data-theme="dark"] .attention-matrix td.heat{color:var(--text)!important}
 .incident-trigger{border:0;background:transparent;padding:4px 0;color:var(--text);font-weight:700;text-align:left;cursor:pointer}.incident-trigger:hover,.incident-trigger:focus-visible{color:var(--red);text-decoration:underline}.incident-detail-cell{background:var(--surface);padding:16px!important}.incident-detail{max-height:420px;overflow:auto}.incident-detail h4{margin:0 0 8px}.incident-detail p{margin:0 0 12px;color:var(--muted)}.incident-detail table{width:100%;min-width:700px}
 @media(max-width:720px){.calibration-overview{grid-template-columns:1fr}.threshold-axis{display:none}.threshold-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.threshold-track{grid-column:1/-1;grid-row:2}.threshold-tooltip{right:8px}}
 .graph-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
-.graph-expand,.graph-close{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:7px 11px;cursor:pointer;font-size:11px;font-weight:700}
-.graph-expand:hover,.graph-close:hover{border-color:var(--red);color:var(--red)}
-.graph-expand:focus-visible,.graph-close:focus-visible,#modelGraph:focus-visible{outline:2px solid var(--red);outline-offset:3px}
-#modelGraph:not(.graph-empty){cursor:zoom-in}
-body.graph-modal-open{overflow:hidden}
-.graph-dialog{position:fixed;inset:0;width:calc(100vw - 32px);max-width:1600px;height:calc(100vh - 32px);max-height:1100px;margin:auto;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface2);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.4);overflow:hidden}
-.graph-dialog::backdrop{background:rgba(5,10,18,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
-.graph-dialog-panel{height:100%;display:flex;flex-direction:column;gap:12px;padding:18px}
-.graph-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
-.graph-dialog-head h2{font-size:18px;margin:0}.graph-dialog-head p{font-size:11px;color:var(--muted);margin:4px 0 0}
-.graph-dialog-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
-.graph-dialog .state-toolbar{flex:0 0 auto}.graph-dialog .legend{flex:0 0 auto}
-.expanded-graph{flex:1;min-height:0;height:auto;overflow:auto}
-.expanded-graph svg{width:100%;min-width:0;height:100%!important}
-.graph-dialog.detail .expanded-graph svg{width:1000px;min-width:1000px;height:auto!important;margin:0 auto}
-.graph-dialog-note{margin:0;color:var(--muted);font-size:10px}
+.graph-expand{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:7px 11px;cursor:pointer;font-size:11px;font-weight:700}
+.graph-expand:hover{border-color:var(--red);color:var(--red)}
+.graph-expand:focus-visible{outline:2px solid var(--red);outline-offset:3px}
+
 .protection-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.protection-controls button{border:1px solid var(--line);border-radius:8px;padding:10px 13px;background:var(--surface);cursor:pointer}.protection-controls button.primary{border-color:var(--red);background:var(--red);color:#fff}.protection-controls button:disabled{opacity:.55;cursor:not-allowed}.protection-controls button.primary:disabled{border-color:var(--line);background:var(--surface);color:var(--muted);opacity:1}.protection-advice{overflow-wrap:anywhere;line-height:1.55;margin:12px 0;color:var(--text)}.protection-advice:empty{display:none}.protection-advice ul{margin:10px 0 0;padding-left:22px}.protection-advice li{margin:0 0 10px}.protection-advice p{margin:8px 0}.protection-advice strong{font-weight:700}.protection-facts{margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);font-size:12px;line-height:1.5}.protection-facts:empty{display:none}.protection-status{min-height:18px;margin:8px 0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
 .protection-label{display:block;margin:0 0 8px;font-size:11px;font-weight:700;color:var(--muted)}#protectionIncidentSelect{display:block;width:100%;max-width:520px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--text)}#protectionIncidentSelect:disabled{opacity:.6}#protectionSelection{margin:11px 0 0}
 .protection-block-list{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface2)}.protection-block-list[hidden]{display:none}.protection-block-list h4{margin:0 0 5px}.protection-block-list>p{margin:0 0 10px;color:var(--muted);font-size:11px}.protection-block-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line)}.protection-block-row strong{display:block}.protection-block-row small{display:block;color:var(--muted);overflow-wrap:anywhere}.protection-block-row button{flex:none;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:8px 12px;cursor:pointer}.protection-block-row button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.protection-block-row{align-items:flex-start;flex-direction:column}}
-@media(max-width:720px){.graph-actions{justify-content:flex-start}.graph-dialog{width:calc(100vw - 12px);height:calc(100vh - 12px);border-radius:10px}.graph-dialog-panel{padding:12px;gap:10px}.graph-dialog .state-toolbar input{min-width:120px}}
+@media(max-width:720px){.graph-actions{justify-content:flex-start}}
 </style>
 </head>
 <body>
@@ -175,7 +165,7 @@ body.graph-modal-open{overflow:hidden}
         <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Forecast time reference</h3><p id="forecastTimeSummary">Checking the observed state timestamp…</p></div></div><div class="metric-list" id="forecastTimeContext"></div><p class="calibration-disclaimer">A predicted link is a hypothetical model output, not a detected incident. Event step +k has no validated wall-clock ETA and may not be in the future relative to now when the input state is delayed.</p></div>
         <div class="grid grid-4" id="calibrationCards"></div>
         <div class="grid grid-3" style="margin-top:16px">
-          <div class="card span-all"><div class="card-head"><div><h3>State explorer</h3><p id="stateContext">Observed state plus selected predictions</p></div><div class="graph-actions"><div class="legend"><span class="observed">Observed</span><span class="predicted">Hypothetical link</span><span class="alternative">Alternative</span><span class="alerting">Severity set</span></div><button class="graph-expand" id="expandModelGraph" type="button" aria-haspopup="dialog" aria-controls="modelGraphDialog">Open full map ↗</button></div></div><div class="state-toolbar"><span class="state-pill" id="stateLabel">S[t]</span><input id="stateStep" type="range" min="0" max="0" value="0" aria-label="Forecast event step"><span class="subtle" id="stateStepMeaning">Next imagined events; no clock-time ETA</span></div><div class="model-graph" id="modelGraph" role="button" tabindex="0" aria-label="Open full forecast topology map" aria-haspopup="dialog" aria-controls="modelGraphDialog" style="margin-top:15px"></div><p class="graph-swipe-note" id="stateTimingNote">Blue links were observed; red links are hypothetical event steps. Swipe to inspect peers.</p></div>
+          <div class="card span-all graph-frame"><div class="card-head"><div><h3>State explorer</h3><p id="stateContext">Observed state plus selected predictions</p></div><div class="graph-actions"><div class="legend"><button type="button" class="observed" data-cat="observed" aria-pressed="true" title="Show or hide these links">Observed</button><button type="button" class="predicted" data-cat="predicted" aria-pressed="true" title="Show or hide these links">Hypothetical link</button><button type="button" class="alternative" data-cat="alternative" aria-pressed="true" title="Show or hide these links">Alternative</button><button type="button" class="alerting" data-cat="severity" aria-pressed="true" title="Show or hide these links">Severity set</button></div></div></div><div class="state-toolbar"><span class="state-pill" id="stateLabel">S[t]</span><input id="stateStep" type="range" min="0" max="0" value="0" aria-label="Forecast event step"><span class="subtle" id="stateStepMeaning">Next imagined events; no clock-time ETA</span></div><div class="model-graph" id="modelGraph" style="margin-top:15px"></div><p class="graph-swipe-note" id="stateTimingNote">Blue links were observed; red links are hypothetical event steps. Swipe to inspect peers.</p></div>
           <div class="card"><div class="card-head"><div><h3>Operating point</h3><p>Calibration and measured test behavior</p></div></div><div class="alarm-controls"><label for="worldThresholdMode">Alert threshold</label><select id="worldThresholdMode"><option value="checkpoint">Original checkpoint</option><option value="live">Four-hour live</option></select><span class="subtle" id="worldThresholdModeStatus">Original checkpoint is the default.</span></div><div class="metric-list" id="thresholdDetail"></div></div>
           <div class="card span-2"><div class="card-head"><div><h3>Relative risk by event step</h3><p>Served score against the signed threshold; this is not probability</p></div></div><div class="chart" id="riskChart"></div></div>
           <div class="card span-all"><div class="card-head"><div><h3>World-model attention matrix</h3><p>Latest scored events and rollout seeds by attended peer; actual averaged model weights</p></div></div><div id="worldAttentionMatrix"></div><p class="subtle">— means that peer is not one of that event’s reported peers; 0.0% means it is, and the model gave it no weight. Neither is a security verdict; only the eight strongest peers are shown.</p></div>
@@ -183,7 +173,7 @@ body.graph-modal-open{overflow:hidden}
         <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Hypothetical next links</h3><p>Ranked by model score. Each +k is an event step from the observed state, not a time estimate or an incident. Path probabilities are intentionally not displayed.</p></div></div><div class="rank-list" id="predictionList"></div></div>
         <div class="card" style="margin-top:16px"><div class="alarm-controls"><label for="worldAlarmMode">World-model popup</label><select id="worldAlarmMode"><option value="incident">Observed incidents</option><option value="off">Off</option></select><span class="subtle" id="worldAlarmStatus">Only new observed incidents trigger popups; event flags and forecast links do not.</span></div></div>
         <div id="worldRuleSummary" style="margin-top:16px"></div>
-        <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Observed world-model incidents</h3><p>Click an incident to see its contributing scored events and source/destination IPs. Three threshold crossings on one link; 120-second quiet gap.</p></div></div><div class="table-wrap"><table><thead><tr><th>Opened</th><th>Observed link</th><th>Opening score</th><th>Flagged events</th><th>Severity</th></tr></thead><tbody id="worldIncidentRows"></tbody></table></div></div>
+        <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Observed world-model alerts</h3><p id="worldHistoryNote">Every observed event that crossed the threshold, one row per burst on a link (120-second quiet gap). Three crossings in a row on a link make it an incident. Click a row for its events.</p></div></div><div class="table-wrap"><table><thead><tr><th>Opened</th><th>Observed link</th><th>Opening score</th><th>Flagged events</th><th>Type</th><th>Severity</th></tr></thead><tbody id="worldIncidentRows"></tbody></table></div></div>
         <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Caveats from the service</h3><p>All service-provided limits are shown.</p></div></div><div class="caveat-list" id="caveatList"></div></div>
       </div>
     </section>
@@ -212,7 +202,7 @@ body.graph-modal-open{overflow:hidden}
     <section class="view" id="network">
       <div class="section-head"><div><p class="eyebrow">Deterministic capture</p><h2>Observed network</h2><p>Only measured packet and flow telemetry from this machine. No model-predicted links appear here.</p></div></div>
       <div id="captureWarning"></div>
-      <div class="card"><div class="card-head"><div><h3>Local topology</h3><p>Traffic touching a local interface address</p></div><div class="legend"><span class="observed">Observed</span></div></div><div class="model-graph" id="captureGraph"></div><p class="graph-swipe-note">Swipe across the map to inspect peer hosts; the local host stays at its center.</p></div>
+      <div class="card graph-frame"><div class="card-head"><div><h3>Local topology</h3><p>Traffic touching a local interface address</p></div><div class="legend"><button type="button" class="observed" data-cat="observed" aria-pressed="true" title="Show or hide these links">Observed</button></div></div><div class="model-graph" id="captureGraph"></div><p class="graph-swipe-note">Drag sideways to pan; use + and − to zoom.</p></div>
       <div class="card" style="margin-top:16px"><div class="card-head"><div><h3>Active flows</h3><p>Service tags describe ports and roles; they do not prove a flow is safe.</p></div><span class="badge info" id="flowBadge">0 flows</span></div><div class="table-wrap"><table><thead><tr><th>Initiator</th><th>Responder</th><th>Protocol</th><th>Service / role</th><th>State</th><th>Packets</th><th>Bytes</th></tr></thead><tbody id="flowRows"></tbody></table></div></div>
     </section>
 
@@ -228,15 +218,6 @@ body.graph-modal-open{overflow:hidden}
     </section>
   </main>
 </div>
-<dialog class="graph-dialog" id="modelGraphDialog" aria-labelledby="expandedGraphTitle">
-  <div class="graph-dialog-panel">
-    <div class="graph-dialog-head"><div><h2 id="expandedGraphTitle">Forecast topology</h2><p id="expandedStateContext">Observed state plus selected predictions</p></div><div class="graph-dialog-controls"><button class="graph-expand" id="graphScaleToggle" type="button" aria-pressed="false">Read labels</button><button class="graph-close" id="closeModelGraph" type="button" aria-label="Close full map">Close ×</button></div></div>
-    <div class="legend"><span class="observed">Observed</span><span class="predicted">Predicted</span><span class="alternative">Alternative</span><span class="alerting">Severity set</span></div>
-    <div class="state-toolbar"><span class="state-pill" id="expandedStateLabel">S[t]</span><input id="expandedStateStep" type="range" min="0" max="0" value="0" aria-label="Forecast event step in full map"><span class="subtle" id="expandedStateStepMeaning">Next imagined events; no clock-time ETA</span></div>
-    <div class="model-graph expanded-graph" id="expandedModelGraph"></div>
-    <p class="graph-dialog-note" id="graphDialogNote">All peers are fitted into this view. Choose Read labels to inspect the map at full size; press Esc to close.</p>
-  </div>
-</dialog>
 <div class="alarm-toast hidden" id="alarmToast" role="status" aria-live="polite"><strong id="alarmToastTitle"></strong><span id="alarmToastDetail"></span></div>
 
 <script>
@@ -317,17 +298,17 @@ function renderLocalAlerts(items){
 }
 function renderFlows(items){$('flowBadge').textContent=items.length+' flows';$('flowRows').innerHTML=items.length?items.slice(0,150).map(function(f){return '<tr><td class="mono">'+esc(f.initiator_ip)+':'+number(f.initiator_port)+'</td><td class="mono">'+esc(f.responder_ip)+':'+number(f.responder_port)+'</td><td>'+esc(f.protocol)+'</td><td>'+esc(f.state)+'</td><td>'+number(f.total_packets)+'</td><td>'+bytes(f.total_bytes)+'</td></tr>'}).join(''):'<tr><td colspan="6">No active flows.</td></tr>'}
 
-function renderCaptureGraph(){let g=telemetry.graph||{},sys=telemetry.system||{},locals=sys.interface_ips||[],edges=(g.edges||[]).filter(function(e){return locals.includes(e.src_ip)!==locals.includes(e.dst_ip)});(g.nodes||[]).forEach(function(node){if(node.ip&&node.hostnames&&node.hostnames.length)hostnamesByIP[node.ip]={name:String(node.hostnames[0]),seen:Date.now()}});setTopologyGraph('captureGraph',topologySVG(edges,[],[],locals,0,'capture'));if(forecast&&forecast.status==='CONNECTED')renderState()}
+function renderCaptureGraph(){let g=telemetry.graph||{},sys=telemetry.system||{},locals=sys.interface_ips||[],edges=(g.edges||[]).filter(function(e){return locals.includes(e.src_ip)!==locals.includes(e.dst_ip)});(g.nodes||[]).forEach(function(node){if(node.ip&&node.hostnames&&node.hostnames.length)hostnamesByIP[node.ip]={name:String(node.hostnames[0]),seen:Date.now()}});drawTopology('captureGraph',edges,[],[],locals,0,'capture');if(forecast&&forecast.status==='CONNECTED')renderState()}
 
 function renderSystem(){let st=telemetry.status||{},sys=telemetry.system||{},selected=sys.network_interface||st.interface||'Unavailable',active=sys.active_route_interface||'',items=[['Hostname',sys.hostname||'Unknown','Local capture host',false],['Operating system',sys.operating_system||'Unknown','Go runtime target',false],['Capture interface',selected,st.connected?'Capture connected':'Capture offline',false],['Active route',active||'Unavailable','Interface currently carrying the default route',false],['Local addresses',(sys.interface_ips||[]).join(' · ')||'None reported','Used to identify this machine in network views',true],['MAC address',sys.mac_address||'Unavailable','Selected capture interface',false],['Dashboard uptime',number(st.capture_duration_seconds||0)+' s','Local server process',false]];$('systemGrid').innerHTML=items.map(function(x){return '<article class="system-card'+(x[3]?' wide':'')+'"><span class="system-label">'+esc(x[0])+'</span><strong class="system-value mono">'+esc(x[1])+'</strong><span class="system-note">'+esc(x[2])+'</span></article>'}).join('');$('interfaceNotice').innerHTML=active&&selected!==active?'<div class="banner warn">Capture is still bound to '+esc(selected)+' while the active route is '+esc(active)+'. Restart Netwatch with automatic interface selection (or specify the LAN interface) to switch all model services together.</div>':''}
 
 function worldStateAge(source){return source.state_as_of?Math.max(0,Date.now()/1000-Number(source.state_as_of)):Number(source.lag_seconds||0)}
 function ageSince(timestamp){if(!Number.isFinite(Number(timestamp))||Number(timestamp)<=0)return 'age unavailable';let seconds=Math.max(0,Math.floor(Date.now()/1000-Number(timestamp)));if(seconds<60)return seconds+' s ago';if(seconds<3600)return Math.floor(seconds/60)+' min '+seconds%60+' s ago';return Math.floor(seconds/3600)+' h '+Math.floor(seconds%3600/60)+' min ago'}
 function renderForecastTime(){let source=forecast.source||{},live=source.mode==='live',eventTime=source.t,cutoff=source.state_as_of,capture=source.newest_packet,horizon=Number(forecast.rollout_steps||0),paths=new Set((forecast.predicted_edges||[]).map(function(x){return x.seed_event})).size;$('forecastTimeSummary').textContent=live?'The model begins from observed traffic, not the current wall-clock moment.':'This is a recorded replay, not current traffic.';$('forecastTimeContext').innerHTML=row('Latest scored event',eventTime?stamp(eventTime)+(live?' · '+ageSince(eventTime):' · recorded'):'Not supplied')+row('Eligible capture cutoff',cutoff?stamp(cutoff)+(live?' · '+ageSince(cutoff):''):'Not supplied')+row('Newest packet in model input',capture?stamp(capture)+(live?' · '+ageSince(capture):''):'Not supplied')+row('Rollout horizon','Up to '+horizon+' imagined event step'+(horizon===1?'':'s')+' on each of '+paths+' seed path'+(paths===1?'':'s'))+row('Wall-clock ETA','Not predicted; the internal 1 s gap is only a simulation assumption')}
-function renderForecast(f){forecast=f||{};let connected=forecast.status==='CONNECTED',source=forecast.source||{},warming=forecastInitializing(f);renderModelChips();$('forecastStatus').textContent=connected?'connected':warming?'initializing':'offline';$('forecastStatus').className='badge '+(connected?'good':warming?'warn':'danger');$('forecastOffline').classList.toggle('hidden',connected);$('forecastConnected').classList.toggle('hidden',!connected);$('forecastOffline').querySelector('strong').textContent=warming?'Forecast initializing':'Forecast service is not connected';$('forecastReason').textContent=warming?'The '+forecast.device.toUpperCase()+' service is preparing its first complete-flow forecast. Capture processing can take several minutes after a restart.':forecast.reason||'The service returned NOT_CONNECTED.';$('worldLag').textContent=connected&&source.mode==='live'?worldStateAge(source).toFixed(1)+' s':connected?'replay':warming?'initializing':'offline';if(!connected){if($('modelGraphDialog').open)$('modelGraphDialog').close();$('observedCount').textContent='0';$('forecastAlertCount').textContent='0';$('modelSource').innerHTML=empty(warming?'Forecast initializing':'Forecast offline',warming?$('forecastReason').textContent:forecast.reason||'No model payload.');return}
+function renderForecast(f){forecast=f||{};let connected=forecast.status==='CONNECTED',source=forecast.source||{},warming=forecastInitializing(f);renderModelChips();$('forecastStatus').textContent=connected?'connected':warming?'initializing':'offline';$('forecastStatus').className='badge '+(connected?'good':warming?'warn':'danger');$('forecastOffline').classList.toggle('hidden',connected);$('forecastConnected').classList.toggle('hidden',!connected);$('forecastOffline').querySelector('strong').textContent=warming?'Forecast initializing':'Forecast service is not connected';$('forecastReason').textContent=warming?'The '+forecast.device.toUpperCase()+' service is preparing its first complete-flow forecast. Capture processing can take several minutes after a restart.':forecast.reason||'The service returned NOT_CONNECTED.';$('worldLag').textContent=connected&&source.mode==='live'?worldStateAge(source).toFixed(1)+' s':connected?'replay':warming?'initializing':'offline';if(!connected){$('observedCount').textContent='0';$('forecastAlertCount').textContent='0';$('modelSource').innerHTML=empty(warming?'Forecast initializing':'Forecast offline',warming?$('forecastReason').textContent:forecast.reason||'No model payload.');return}
   let src=forecast.source||{},t=forecast.threshold;$('observedCount').textContent=number((forecast.observed||{}).events);$('forecastAlertCount').textContent=number((forecast.alerts||[]).length);
   let sourceName=src.mode==='replay'?'Recorded dataset · '+(src.day||'unknown day'):(src.day||'this machine')+' · '+(src.tag||'untagged');$('modelSource').innerHTML=row('Mode',src.mode||'unknown')+row('Source',sourceName)+row('State as of',src.state_as_of?stamp(src.state_as_of):'Not supplied')+row('Lag',src.mode==='live'?worldStateAge(src).toFixed(0)+' s':'Recorded replay')+row('Epoch',t?t.epoch:'uncalibrated');
-  selectedStep=Math.min(selectedStep,Number(forecast.rollout_steps||0));$('stateStep').max=String(forecast.rollout_steps||0);$('stateStep').value=String(selectedStep);$('expandedStateStep').max=$('stateStep').max;$('expandedStateStep').value=String(selectedStep);
+  selectedStep=Math.min(selectedStep,Number(forecast.rollout_steps||0));$('stateStep').max=String(forecast.rollout_steps||0);$('stateStep').value=String(selectedStep);
   renderForecastTime();
   let recall=t?Number(t.recall||0):null;$('recallWarning').innerHTML=!t?'<div class="banner danger"><strong>Checkpoint is uncalibrated.</strong><p>Nothing alerts until a threshold is served.</p></div>':recall===0?'<div class="banner danger"><strong>Measured test recall is 0.000%.</strong><p>This checkpoint is not a working detector yet. Forecast alerts must not be treated as primary detections.</p></div>':'<div class="banner info"><strong>Forecast alerts are secondary.</strong><p>Measured test recall is '+(100*recall).toFixed(3)+'%. Use the early detection service as the primary alert source.</p></div>';
   $('calibrationCards').innerHTML=kpi('Source tag',src.tag||src.mode||'unknown',src.mode==='replay'?'recorded dataset':'served forecast product')+kpi('Model score',forecast.score||'unknown','score, not calibrated probability')+kpi('Rollout',number(forecast.rollout_steps)+' steps','one imagined event per step')+kpi('Events scored',number(forecast.events_scored),'service total');
@@ -358,28 +339,21 @@ function renderDetectionCalibration(){
 }
 
 $('stateStep').addEventListener('input',function(){selectedStep=Number(this.value);renderState()});
-$('expandedStateStep').addEventListener('input',function(){selectedStep=Number(this.value);renderState()});
-function openModelGraph(){if($('modelGraph').classList.contains('graph-empty')||!$('modelGraph').querySelector('svg'))return;let dialog=$('modelGraphDialog');if(dialog.open)return;dialog.classList.remove('detail');$('graphScaleToggle').textContent='Read labels';$('graphScaleToggle').setAttribute('aria-pressed','false');$('graphDialogNote').textContent='Red links are hypothetical next events, not current incidents; there is no wall-clock ETA. Choose Read labels to inspect the map at full size; press Esc to close.';dialog.showModal();document.body.classList.add('graph-modal-open');renderState();$('closeModelGraph').focus()}
-$('expandModelGraph').addEventListener('click',openModelGraph);
-$('modelGraph').addEventListener('click',openModelGraph);
-$('modelGraph').addEventListener('keydown',function(event){if(event.key==='Enter'||event.key===' '){event.preventDefault();openModelGraph()}});
-$('graphScaleToggle').addEventListener('click',function(){let detail=$('modelGraphDialog').classList.toggle('detail'),graph=$('expandedModelGraph');this.textContent=detail?'Fit all':'Read labels';this.setAttribute('aria-pressed',String(detail));$('graphDialogNote').textContent=detail?'Actual-size map: scroll to inspect every peer. Red links remain hypothetical events with no ETA.':'Red links are hypothetical next events, not current incidents; there is no wall-clock ETA. Choose Read labels to inspect the map at full size.';graph.scrollLeft=detail?Math.max(0,(graph.scrollWidth-graph.clientWidth)/2):0;graph.scrollTop=detail?Math.max(0,(graph.scrollHeight-graph.clientHeight)/2):0});
-$('closeModelGraph').addEventListener('click',function(){$('modelGraphDialog').close()});
-$('modelGraphDialog').addEventListener('click',function(event){if(event.target===this)this.close()});
-$('modelGraphDialog').addEventListener('close',function(){document.body.classList.remove('graph-modal-open')});
-function renderState(){if(!forecast||forecast.status!=='CONNECTED')return;let observed=(forecast.observed||{}).edges||[],predicted=(forecast.predicted_edges||[]).filter(function(e){return Number(e.step)<=selectedStep}),current=(forecast.predicted_edges||[]).filter(function(e){return Number(e.step)===selectedStep}),alts=[];current.forEach(function(e){(e.candidates||[]).slice(0,3).forEach(function(c){alts.push({a:e.sender_ip,b:c.ip,severity:c.severity||''})})});let hidden=new Set(((forecast.observed||{}).suppressed_links||[]).map(function(x){return x.key})),drawn=function(a,b){return !hidden.has([String(a),String(b)].sort().join('|'))};if(hidden.size){observed=observed.filter(function(e){return drawn(e.sender_ip,e.receiver_ip)});predicted=predicted.filter(function(e){return drawn(e.sender_ip,e.receiver_ip)});alts=alts.filter(function(e){return drawn(e.a,e.b)})}let src=forecast.source||{},age=src.mode==='live'&&src.t?'latest scored event '+ageSince(src.t):'recorded replay',paths=new Set(predicted.map(function(e){return e.seed_event})).size;$('stateLabel').textContent=selectedStep===0?(forecast.current_state||'S[t]'):'S[t+'+selectedStep+']';$('stateContext').textContent=(selectedStep===0?'Observed input only · '+age:('Observed input plus '+predicted.length+' hypothetical links across '+paths+' seed paths through event step +'+selectedStep+' · '+age))+(hidden.size?' · '+hidden.size+' routine-service link(s) hidden by service rules':'');$('stateStepMeaning').textContent=selectedStep===0?'Observed model state; no imagined events':'Step +'+selectedStep+' per seed path · no ETA';$('expandedStateStepMeaning').textContent=$('stateStepMeaning').textContent;$('stateTimingNote').textContent=selectedStep===0?'Blue links were observed. The state timestamp above shows how far behind live capture it is.':'Red links are hypothetical, not detected incidents. Event step +'+selectedStep+' has no time ETA and may already have occurred since the delayed input state.';$('stateStep').value=String(selectedStep);$('expandedStateStep').value=String(selectedStep);$('expandedStateLabel').textContent=$('stateLabel').textContent;$('expandedStateContext').textContent=$('stateContext').textContent;setTopologyGraph('modelGraph',topologySVG(observed,predicted,alts,src.local_ips||[],selectedStep,'state'));if($('modelGraphDialog').open)setTopologyGraph('expandedModelGraph',topologySVG(observed,predicted,alts,src.local_ips||[],selectedStep,'expanded'))}
+function renderState(){if(!forecast||forecast.status!=='CONNECTED')return;let observed=(forecast.observed||{}).edges||[],predicted=(forecast.predicted_edges||[]).filter(function(e){return Number(e.step)<=selectedStep}),current=(forecast.predicted_edges||[]).filter(function(e){return Number(e.step)===selectedStep}),alts=[];current.forEach(function(e){(e.candidates||[]).slice(0,3).forEach(function(c){alts.push({a:e.sender_ip,b:c.ip,severity:c.severity||''})})});let hidden=new Set(((forecast.observed||{}).suppressed_links||[]).map(function(x){return x.key})),drawn=function(a,b){return !hidden.has([String(a),String(b)].sort().join('|'))};if(hidden.size){observed=observed.filter(function(e){return drawn(e.sender_ip,e.receiver_ip)});predicted=predicted.filter(function(e){return drawn(e.sender_ip,e.receiver_ip)});alts=alts.filter(function(e){return drawn(e.a,e.b)})}let src=forecast.source||{},age=src.mode==='live'&&src.t?'latest scored event '+ageSince(src.t):'recorded replay',paths=new Set(predicted.map(function(e){return e.seed_event})).size;$('stateLabel').textContent=selectedStep===0?(forecast.current_state||'S[t]'):'S[t+'+selectedStep+']';$('stateContext').textContent=(selectedStep===0?'Observed input only · '+age:('Observed input plus '+predicted.length+' hypothetical links across '+paths+' seed paths through event step +'+selectedStep+' · '+age))+(hidden.size?' · '+hidden.size+' routine-service link(s) hidden by service rules':'');$('stateStepMeaning').textContent=selectedStep===0?'Observed model state; no imagined events':'Step +'+selectedStep+' per seed path · no ETA';$('stateTimingNote').textContent=selectedStep===0?'Blue links were observed. The state timestamp above shows how far behind live capture it is.':'Red links are hypothetical, not detected incidents. Event step +'+selectedStep+' has no time ETA and may already have occurred since the delayed input state.';$('stateStep').value=String(selectedStep);drawTopology('modelGraph',observed,predicted,alts,src.local_ips||[],selectedStep,'state')}
 function renderRisk(){let values=forecast.step_value||[],shares=forecast.alert_share||[];if(!values.length){$('riskChart').innerHTML=empty('No step scores','The service did not return step_value.');return}let w=800,h=230,p=40,t=forecast.threshold,threshold=t?Number(t.direction||1)*Number(t.threshold||0):null,all=values.slice();if(threshold!=null)all.push(threshold);let min=Math.min(...all),max=Math.max(...all);if(max===min){max+=1;min-=1}let xy=function(v,i){return [p+(w-p*2)*(values.length===1?0:i/(values.length-1)),h-p-(h-p*2)*(v-min)/(max-min)]};let pts=values.map(xy),path='M '+pts.map(function(x){return x[0].toFixed(1)+' '+x[1].toFixed(1)}).join(' L '),thresholdLine='';if(threshold!=null){let y=xy(threshold,0)[1];thresholdLine='<line x1="'+p+'" y1="'+y+'" x2="'+(w-p)+'" y2="'+y+'" stroke="var(--amber)" stroke-dasharray="7 6"/><text x="'+(w-p)+'" y="'+(y-7)+'" text-anchor="end" fill="var(--amber)" font-size="10">threshold '+score(threshold)+'</text>'}let dots=pts.map(function(x,i){return '<circle cx="'+x[0]+'" cy="'+x[1]+'" r="4" fill="var(--red)"/><text x="'+x[0]+'" y="'+(h-12)+'" text-anchor="middle" fill="var(--muted)" font-size="9">'+(i+1)+'</text><title>Step '+(i+1)+': score '+score(values[i])+', alert share '+Number(shares[i]||0).toFixed(3)+'</title>'}).join('');$('riskChart').innerHTML='<svg viewBox="0 0 '+w+' '+h+'">'+thresholdLine+'<path d="'+path+'" fill="none" stroke="var(--red)" stroke-width="3"/>'+dots+'<text x="'+p+'" y="16" fill="var(--muted)" font-size="10">'+esc(forecast.score||'score')+' · event steps, not time</text></svg>'}
 function renderPredictions(){let items=(forecast.predicted_edges||[]).slice(),direction=forecast.threshold?Number(forecast.threshold.direction||1):1;items.sort(function(a,b){return Number(a.step)-Number(b.step)||(direction*Number(b.value)-direction*Number(a.value))});if(!items.length){$('predictionList').innerHTML=empty('No predicted links','The connected service returned no rollout edges.');return}$('predictionList').innerHTML=items.slice(0,30).map(function(x,i){return '<div class="rank-row" title="Hypothetical event +'+number(x.step)+' on seed '+number(x.seed_event)+'; no wall-clock ETA; not observed"><span class="rank">'+ordinal(i+1)+'</span><span class="badge info">Event +'+number(x.step)+'</span><span class="link mono">'+esc(x.sender_ip)+' → '+esc(x.receiver_ip)+'</span><span class="rank-score mono">'+score(x.value)+'</span><span class="rank-severity">'+(x.severity?severityBadge(x.severity):'<span class="muted">not alerting</span>')+'</span></div>'}).join('')}
 function renderWorldAlerts(){
-  let source=forecast.observed||{},incidents=(source.incidents||[]).slice().reverse();
-  $('worldIncidentRows').innerHTML=incidents.length?incidents.map(function(x,index){let key=x.id||[x.opened,x.sender_ip,x.receiver_ip].join('|'),open=selectedWorldIncident===key,when=forecast.source&&forecast.source.mode==='live'?' · '+ageSince(x.opened):'';return '<tr><td><button type="button" class="incident-trigger" data-world-index="'+index+'" aria-expanded="'+open+'">'+stamp(x.opened)+esc(when)+' '+(open?'▾':'▸')+'</button></td><td class="mono">'+esc(x.sender_ip)+' → '+esc(x.receiver_ip)+'</td><td class="mono">'+score(x.opening_score)+'</td><td>'+number(x.events)+'</td><td>'+severityBadge(x.severity)+'</td></tr>'+(open?'<tr><td colspan="5" class="incident-detail-cell">'+worldIncidentDetail(x)+'</td></tr>':'')}).join(''):'<tr><td colspan="5">No observed world-model incidents in the current window.</td></tr>';
+  let source=forecast.observed||{},incidents=(source.incidents||[]).slice().reverse(),kept=worldRows(),hours=Number(source.history_window_s||0)/3600;
+  $('worldHistoryNote').textContent='Every observed event that crossed the threshold, one row per burst on a link (120-second quiet gap)'+(hours?', kept for '+hours+' hours':'')+'. Three crossings in a row on a link make it an incident. Click a row for its events.'+(source.suppressed_history?' '+number(source.suppressed_history)+' row(s) on routine internal services are hidden by the service rules.':'');
+  $('worldIncidentRows').innerHTML=kept.length?kept.map(function(x,index){let key=x.id||[x.opened,x.sender_ip,x.receiver_ip].join('|'),open=selectedWorldIncident===key,when=forecast.source&&forecast.source.mode==='live'?' · '+ageSince(x.opened):'';return '<tr><td><button type="button" class="incident-trigger" data-world-index="'+index+'" aria-expanded="'+open+'">'+stamp(x.opened)+esc(when)+' '+(open?'▾':'▸')+'</button></td><td class="mono">'+esc(x.sender_ip)+' → '+esc(x.receiver_ip)+'</td><td class="mono">'+score(x.opening_score)+'</td><td>'+number(x.events)+'</td><td>'+(x.incident||!source.history?'<span class="badge danger">Incident</span>':'<span class="badge warn">Flagged event'+(x.events>1?'s':'')+'</span>')+'</td><td>'+severityBadge(x.severity)+'</td></tr>'+(open?'<tr><td colspan="6" class="incident-detail-cell">'+worldIncidentDetail(x)+'</td></tr>':'')}).join(''):'<tr><td colspan="6">'+(hours?'No observed event crossed the threshold in the last '+hours+' hours.':'No observed world-model incidents in the current window.')+'</td></tr>';
   let routine=source.suppressed_links||[],setAside=(forecast.suppressed_alerts||[]).length;
   $('worldRuleSummary').innerHTML=routine.length?'<div class="banner">'+number(routine.length)+' link(s) judged routine internal services by deterministic service rules and hidden from the state explorer: '+number((source.suppressed_alerts||[]).length)+' flagged event(s), '+number((source.suppressed_incidents||[]).length)+' incident(s) and '+number(setAside)+' forecast alert(s) set aside. Raw model scores remain in the API. A service port alone is not a whitelist.<div class="mono" style="margin-top:8px;font-size:11px">'+routine.slice(0,8).map(function(x){return '<span title="'+esc(x.rule_reason||'')+'">'+esc(String(x.key).replace('|',' ↔ '))+' · '+esc(x.protocol_tag||'UNKNOWN')+' · '+esc(x.rule_classification||'UNKNOWN')+' · '+number(x.events)+' flagged event(s)</span>'}).join('<br>')+'</div></div>':'';
   $('worldAlarmStatus').textContent=Object.prototype.hasOwnProperty.call(source,'incidents')?'Only new observed incidents trigger popups; event flags and forecast links do not.':'Incident grouping is unavailable; world-model popups are paused.';
   processAlarms('world',incidents.map(function(x){return {key:x.id||[x.opened,x.sender_ip,x.receiver_ip].join('|'),label:x.sender_ip+' → '+x.receiver_ip}}))
 }
+function worldRows(){let o=(forecast||{}).observed||{};return (o.history||o.incidents||[]).slice().reverse()}
 function worldIncidentDetail(incident){let events=incident.related_events||[];if(!events.length)return '<div class="incident-detail">No linked event details in this forecast window.</div>';return '<div class="incident-detail"><h4>Contributing observed events</h4><p>These are scored threshold crossings on this link, not imagined forecast events. Service tags are deterministic context, not proof of safety.'+(incident.rule_reason?' Rule: '+esc(incident.rule_reason)+'.':'')+'</p><table><thead><tr><th>Observed</th><th>Event</th><th>Source</th><th>Destination</th><th>Service / role</th><th>Traffic class</th><th>Score</th><th>Severity</th></tr></thead><tbody>'+events.map(function(x){let ported=!!x.src,protocol=Number(x.protocol)===6?'TCP · ':Number(x.protocol)===17?'UDP · ':'';return '<tr><td>'+stamp(x.t)+'</td><td class="mono">#'+number(x.event_id)+'</td><td class="mono">'+esc(ported?x.src+':'+(x.src_port||0):x.sender_ip)+'</td><td class="mono">'+esc(ported?x.dst+':'+(x.dst_port||0):x.receiver_ip)+'</td><td>'+esc(x.protocol_tag||'UNKNOWN')+'<br><small>'+esc(protocol+(x.connection_role||'UNKNOWN'))+'</small></td><td>'+esc(x.traffic_class||'UNKNOWN')+'</td><td class="mono">'+score(x.value)+'</td><td>'+severityBadge(x.severity)+'</td></tr>'}).join('')+'</tbody></table></div>'}
-$('worldIncidentRows').addEventListener('click',function(event){let button=event.target.closest('button[data-world-index]');if(!button)return;let incidents=((forecast||{}).observed||{}).incidents||[],item=incidents.slice().reverse()[Number(button.dataset.worldIndex)];if(!item)return;let key=item.id||[item.opened,item.sender_ip,item.receiver_ip].join('|');selectedWorldIncident=selectedWorldIncident===key?null:key;renderWorldAlerts()});
+$('worldIncidentRows').addEventListener('click',function(event){let button=event.target.closest('button[data-world-index]');if(!button)return;let item=worldRows()[Number(button.dataset.worldIndex)];if(!item)return;let key=item.id||[item.opened,item.sender_ip,item.receiver_ip].join('|');selectedWorldIncident=selectedWorldIncident===key?null:key;renderWorldAlerts()});
 function renderAttentionMatrix(id,items,options){let box=$(id),rows=(items||[]).slice(-8),totals={};rows.forEach(function(row){(row.attended||[]).forEach(function(peer){let key=String(options.peer(peer));totals[key]=(totals[key]||0)+Number(peer.attention||0)})});let columns=Object.keys(totals).sort(function(a,b){return totals[b]-totals[a]}).slice(0,8);if(!rows.length||!columns.length){box.innerHTML=empty('Waiting for attention','The matrix appears after a scored event has a valid neighbourhood.');return}let label=function(column,index){return options.compactColumns?'E'+(index+1):column};let head='<tr><th>'+esc(options.corner)+'</th>'+columns.map(function(column,index){return '<th class="mono" title="'+esc(column)+'">'+esc(label(column,index))+'</th>'}).join('')+'</tr>';let body=rows.map(function(row){let values={};(row.attended||[]).forEach(function(peer){values[String(options.peer(peer))]=Number(peer.attention||0)});return '<tr><td class="mono" title="'+esc(options.row(row))+'">'+esc(options.row(row))+'</td>'+columns.map(function(column){let value=Math.max(0,Math.min(1,values[column]||0)),alpha=.04+.86*Math.sqrt(value),color=value>.42?'#fff':'#111';return '<td class="heat mono" style="background:rgba(255,0,0,'+alpha.toFixed(3)+');color:'+color+'" title="attention '+(100*value).toFixed(3)+'%">'+(Object.prototype.hasOwnProperty.call(values,column)?(100*value).toFixed(1)+'%':'—')+'</td>'}).join('')+'</tr>'}).join('');let newest=Math.max.apply(null,rows.map(function(row){return Number(options.time(row)||0)})),legend=options.compactColumns?'<div class="matrix-legend">'+columns.map(function(column,index){return '<div><strong class="mono">'+label(column,index)+'</strong><span class="mono" title="'+esc(column)+'">'+esc(column)+'</span></div>'}).join('')+'</div>':'';box.innerHTML='<div class="attention-matrix"><table><thead>'+head+'</thead><tbody>'+body+'</tbody></table></div>'+legend+'<div class="matrix-note"><span>Darker red = more attention. Only the eight strongest columns are displayed.</span><span class="mono">updated '+(newest?stamp(newest):'this forecast cycle')+'</span></div>'}
 function renderAttention(){renderAttentionMatrix('worldAttentionMatrix',forecast.explanation||[],{corner:'Scored event / peer',row:function(x){return '#'+x.seed_event+' '+(x.sender_ip||x.sender)+' → '+(x.receiver_ip||'?')},peer:function(p){return p.ip||String(p.node)},time:function(x){return x.t}})}
 function renderCaveats(){let items=forecast.caveats||[];$('caveatList').innerHTML=items.length?items.map(function(x){return '<div class="caveat">'+esc(x)+'</div>'}).join(''):empty('No caveats returned','The service did not include caveat text.')}
@@ -456,31 +430,74 @@ async function pollTelemetry(){if(telemetryPending||Date.now()-lastTelemetryAt<5
 let stream=new EventSource('/api/stream');stream.addEventListener('telemetry',function(event){try{renderTelemetry(JSON.parse(event.data));lastTelemetryAt=Date.now()}catch(error){console.error(error)}});stream.onerror=function(){pollTelemetry()};
 pollTelemetry();setInterval(pollTelemetry,5000);
 pollModels();renderProtectionSelection();setInterval(function(){pollModels().then(renderProtectionSelection)},2000);
-function setTopologyGraph(id,markup){let box=$(id),hadGraph=box.dataset.topologySeen==='1',left=box.scrollLeft,top=box.scrollTop,hasGraph=markup.startsWith('<svg');box.innerHTML=markup;box.classList.toggle('graph-empty',!hasGraph);if(hasGraph){box.scrollLeft=hadGraph?left:Math.max(0,(box.scrollWidth-box.clientWidth)/2);box.scrollTop=hadGraph?top:0;box.dataset.topologySeen='1'}else{box.dataset.topologySeen='0'}}
-function topologySVG(observed,predicted,alternatives,locals,step,kind){
-  let raw=[],traffic={},endpoints=new Set();
-  function add(e,type,a,b){if(!a||!b||a===b)return;a=String(a);b=String(b);let weight=Math.max(1,Number(e.events||e.packet_count||1));raw.push({a:a,b:b,type:type,severity:e.severity||'',weight:weight,step:type==='predicted'?Number(e.step||0):0});endpoints.add(a);endpoints.add(b);traffic[a]=(traffic[a]||0)+weight;traffic[b]=(traffic[b]||0)+weight}
+// Topology maps are force-directed graphs the reader can pan, zoom and rearrange. Every host is drawn; labels that would collide are left out until there is room for them. Positions and the view are kept per map, so a refresh does not move what is already on screen.
+let nets={};
+function drawTopology(id,observed,predicted,alternatives,locals,step,kind){
+  let box=$(id),g=nets[id]||(nets[id]={pos:{},pinned:{},k:1,wide:1,tx:0,ty:0,hover:null,drag:null,touched:false,sig:''}),raw=[],local=new Set((locals||[]).map(String)),host='@local-host',localIP='';
+  function add(e,type,a,b){if(!a||!b||a===b)return;a=String(a);b=String(b);[a,b].forEach(function(ip){if(!localIP&&local.has(ip))localIP=ip});raw.push({a:local.has(a)?host:a,b:local.has(b)?host:b,type:type,severity:e.severity||'',weight:Math.max(1,Number(e.events||e.packet_count||1)),step:type==='predicted'?Number(e.step||0):0})}
   (observed||[]).forEach(function(e){add(e,'observed',e.sender_ip||e.src_ip,e.receiver_ip||e.dst_ip)});
   (predicted||[]).forEach(function(e){add(e,'predicted',e.sender_ip,e.receiver_ip)});
   (alternatives||[]).forEach(function(e){add(e,'alternative',e.a,e.b)});
-  if(!raw.length)return empty('No links to draw','Observed links appear as traffic is scored.');
-  let localIPs=(locals||[]).map(String),present=localIPs.filter(function(ip){return endpoints.has(ip)}),hubIP=present[0]||Array.from(endpoints).sort(function(a,b){return (traffic[b]||0)-(traffic[a]||0)||a.localeCompare(b)})[0],hubIPs=new Set(present.length?localIPs:[hubIP]),hub='@local-host',peers=new Map(),links=new Map();
-  raw.forEach(function(e){let a=hubIPs.has(e.a)?hub:e.a,b=hubIPs.has(e.b)?hub:e.b;if(a===b)return;let key=[e.type,a,b,e.severity].join('|'),old=links.get(key);if(old){old.weight+=e.weight;if(e.step)old.step=old.step?Math.min(old.step,e.step):e.step}else{links.set(key,{a:a,b:b,type:e.type,severity:e.severity,weight:e.weight,step:e.step})}[a,b].forEach(function(ip){if(ip===hub)return;let p=peers.get(ip)||{ip:ip,weight:0,observed:false,predicted:false,alternative:false,severity:false};p.weight+=e.weight;p[e.type]=true;p.severity=p.severity||!!e.severity;peers.set(ip,p)})});
-  let rank=function(p){return (p.predicted?1000000:0)+(p.severity?200000:0)+(p.observed?10000:0)+Math.log1p(p.weight)*100},ranked=Array.from(peers.values()).sort(function(a,b){return rank(b)-rank(a)||a.ip.localeCompare(b.ip)}),limit=kind==='expanded'?ranked.length:Math.max(18,ranked.filter(function(p){return p.predicted}).length),shown=ranked.slice(0,limit),shownIPs=new Set(shown.map(function(p){return p.ip}));
-  let privateIP=function(ip){let p=ip.split('.').map(Number),v=ip.toLowerCase();return p.length===4&&(p[0]===10||p[0]===127||p[0]===192&&p[1]===168||p[0]===172&&p[1]>=16&&p[1]<=31||p[0]===169&&p[1]===254)||v.startsWith('fe80:')||v.startsWith('fc')||v.startsWith('fd')},left=[],right=[];
-  shown.sort(function(a,b){return a.ip.localeCompare(b.ip)}).forEach(function(p){let preferred=privateIP(p.ip)?left:right,other=preferred===left?right:left;(preferred.length<=other.length+1?preferred:other).push(p)});
-  let rowGap=kind==='expanded'?40:58,nodeHeight=kind==='expanded'?38:46,h=Math.max(520,130+Math.max(left.length,right.length)*rowGap),cy=h/2,pos={};pos[hub]=[500,cy];[left,right].forEach(function(side,index){side.forEach(function(p,i){pos[p.ip]=[index?855:145,cy+(i-(side.length-1)/2)*rowGap]})});
-  let sys=telemetry.system||{},sameHost=kind!=='offline'&&(sys.interface_ips||[]).includes(hubIP),hubName=sameHost&&sys.hostname?String(sys.hostname):hubIP,hostName=function(ip){if(kind==='offline')return ip;let entry=hostnamesByIP[ip];return entry&&Date.now()-entry.seen<3600000?entry.name:ip},short=function(v){let s=String(v);return s.length>25?s.slice(0,24)+'…':s},prefix=kind==='capture'?'captureTopo':kind==='expanded'?'expandedStateTopo':kind==='offline'?'offlineStateTopo':'stateTopo';
-  let svg='<svg viewBox="0 0 1000 '+h+'" style="height:'+h+'px" role="img" aria-label="Network topology centered on '+esc(hubName)+'"><defs>';
-  [['observed','var(--cyan)'],['predicted','var(--red)'],['alternative','var(--muted)'],['severity','var(--amber)']].forEach(function(x){svg+='<marker id="'+prefix+x[0]+'" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="'+x[1]+'"/></marker>'});
-  svg+='</defs><rect x="20" y="56" width="260" height="'+(h-100)+'" rx="20" fill="var(--topology-lane)"/><rect x="720" y="56" width="260" height="'+(h-100)+'" rx="20" fill="var(--topology-lane)"/><circle cx="500" cy="'+cy+'" r="116" fill="var(--topology-aura)" stroke="var(--topology-aura-border)"/>';
-  svg+='<text x="24" y="29" fill="var(--muted)" font-size="12">'+(step?'Observed + hypothetical through event +'+step+' per seed (no ETA)':'Observed topology')+' · showing '+shown.length+' of '+ranked.length+' peers</text>';
-  Array.from(links.values()).filter(function(e){return (e.a===hub||shownIPs.has(e.a))&&(e.b===hub||shownIPs.has(e.b))}).sort(function(a,b){return ['observed','alternative','predicted'].indexOf(a.type)-['observed','alternative','predicted'].indexOf(b.type)}).forEach(function(e){let a=pos[e.a],b=pos[e.b];if(!a||!b)return;let start=[a[0]+(b[0]>=a[0]?(e.a===hub?91:107):-(e.a===hub?91:107)),a[1]],end=[b[0]+(a[0]>=b[0]?(e.b===hub?91:107):-(e.b===hub?91:107)),b[1]],color=e.severity?'var(--amber)':e.type==='observed'?'var(--cyan)':e.type==='predicted'?'var(--red)':'var(--muted)',marker=e.severity?'severity':e.type,midX=(start[0]+end[0])/2,midY=(start[1]+end[1])/2+(e.type==='predicted'?-14:e.type==='alternative'?14:0);if(e.a!==hub&&e.b!==hub)midY+=midY<cy?-65:65;let meaning=e.type==='predicted'?'hypothetical event +'+e.step+'; no ETA; not observed':e.type==='observed'?'observed traffic':'alternative hypothetical link';svg+='<path d="M '+start[0]+' '+start[1]+' Q '+midX+' '+midY+' '+end[0]+' '+end[1]+'" fill="none" stroke="'+color+'" stroke-width="'+(e.type==='predicted'||e.severity?2.4:1.6)+'" stroke-dasharray="'+(e.type==='predicted'?'8 6':e.type==='alternative'?'2 6':'none')+'" opacity="'+(e.type==='observed'?'.50':'.85')+'" marker-end="url(#'+prefix+marker+')"><title>'+esc(e.a===hub?hubName:hostName(e.a))+' → '+esc(e.b===hub?hubName:hostName(e.b))+' · '+meaning+(e.severity?' · model severity '+esc(e.severity):'')+'</title></path>'});
-  shown.forEach(function(p){let xy=pos[p.ip],name=hostName(p.ip),hasName=name!==p.ip,fill=p.predicted&&!p.observed?'var(--topology-predicted-node)':'var(--topology-node)',border=p.severity?'var(--amber)':p.predicted?'var(--red)':'var(--topology-node-border)';svg+='<g><title>'+esc(name)+(hasName?' ('+esc(p.ip)+')':'')+' · '+(p.predicted?'predicted ':'')+(p.observed?'observed':'')+'</title><rect x="'+(xy[0]-107)+'" y="'+(xy[1]-nodeHeight/2)+'" width="214" height="'+nodeHeight+'" rx="12" fill="'+fill+'" stroke="'+border+'" stroke-width="'+(p.predicted?2:1.4)+'"/><text x="'+xy[0]+'" y="'+(xy[1]-(hasName?3:-1))+'" text-anchor="middle" fill="var(--text)" font-size="12" font-weight="700">'+esc(short(name))+'</text>'+(hasName?'<text x="'+xy[0]+'" y="'+(xy[1]+14)+'" text-anchor="middle" fill="var(--muted)" font-size="10">'+esc(short(p.ip))+'</text>':'')+'</g>'});
-  svg+='<g><title>'+esc(hubName)+' · '+esc(Array.from(hubIPs).join(', '))+'</title><rect x="407" y="'+(cy-32)+'" width="186" height="64" rx="17" fill="var(--red)"/><text x="500" y="'+(cy-4)+'" text-anchor="middle" fill="#fff" font-size="16" font-weight="800">'+esc(short(hubName))+'</text><text x="500" y="'+(cy+17)+'" text-anchor="middle" fill="#fff" font-size="10">'+esc(kind==='offline'?'CAPTURE HUB':hubName===hubIP?'MAIN HOST':short(hubIP))+'</text></g>';
-  svg+='<text x="24" y="'+(h-17)+'" fill="var(--muted)" font-size="10">'+(ranked.length>shown.length?(ranked.length-shown.length)+' lower-activity peers omitted to prevent overlap. ':'')+(kind==='offline'?'Offline capture IPs; no live hostnames are reused.':'Names come from captured DNS; IPs are shown otherwise.')+'</text></svg>';
-  return svg
+  if(!raw.length){box.innerHTML=empty('No links to draw','Observed links appear as traffic is scored.');box.classList.add('graph-empty');g.sig='';return}
+  let nodes=new Map(),links=new Map(),sys=telemetry.system||{},order=['observed','alternative','predicted'];
+  raw.forEach(function(e){if(e.a===e.b)return;let key=[e.type,e.a,e.b,e.severity].join('|'),old=links.get(key);if(old){old.weight+=e.weight;if(e.step)old.step=old.step?Math.min(old.step,e.step):e.step}else{links.set(key,e)};[e.a,e.b].forEach(function(ip){let p=nodes.get(ip)||{weight:0,degree:0,observed:false,predicted:false,alternative:false,severity:false};p.weight+=e.weight;p[e.type]=true;p.severity=p.severity||!!e.severity;nodes.set(ip,p)})});
+  links.forEach(function(e){nodes.get(e.a).degree++;nodes.get(e.b).degree++});
+  nodes.forEach(function(p,ip){let entry=hostnamesByIP[ip];p.name=ip===host?(sys.hostname&&(sys.interface_ips||[]).includes(localIP)?String(sys.hostname):localIP):kind!=='offline'&&entry&&Date.now()-entry.seen<3600000?entry.name:ip;p.detail=ip===host?'this host · '+localIP:p.name!==ip?ip:''});
+  let sig=[kind,step,Array.from(links.keys()).sort().join(','),Array.from(nodes.values()).map(function(p){return p.name}).join(',')].join('#');
+  if(!box.querySelector('svg')){box.classList.remove('graph-empty');box.innerHTML='<svg role="img"></svg><div class="graph-tools"><button class="graph-expand" type="button" data-net="in" aria-label="Zoom in">+</button><button class="graph-expand" type="button" data-net="out" aria-label="Zoom out">−</button><button class="graph-expand" type="button" data-net="fit">Fit</button><button class="graph-expand" type="button" data-net="full">Full screen</button></div><p class="graph-hint">Drag to pan · Ctrl + scroll to zoom (scroll alone in full screen) · drag a host to move it · hover to trace its links · click a link type in the legend to hide it</p>';wireTopology(box,g);g.sig=''}
+  if(sig===g.sig)return;
+  g.sig=sig;g.nodes=nodes;g.host=host;g.step=step;g.kind=kind;g.links=Array.from(links.values()).sort(function(a,b){return order.indexOf(a.type)-order.indexOf(b.type)});
+  layoutTopology(g);if(!g.touched)fitTopology(box,g);paintTopology(box,g)
+}
+function layoutTopology(g){
+  // Nearby hosts repel each other, links pull their two hosts together (busier links pull closer), and a weak pull to the middle keeps separate groups in view. New hosts start beside a neighbour that is already placed.
+  let ids=Array.from(g.nodes.keys()).sort(),n=ids.length,L=110,near={},pairs=new Map(),heaviest=1,fresh=0;
+  ids.forEach(function(id){near[id]=[]});
+  g.links.forEach(function(e){let key=e.a<e.b?e.a+'|'+e.b:e.b+'|'+e.a,old=pairs.get(key);if(old){old.w+=e.weight}else{pairs.set(key,{a:e.a,b:e.b,w:e.weight});near[e.a].push(e.b);near[e.b].push(e.a)}});
+  pairs.forEach(function(p){heaviest=Math.max(heaviest,p.w)});
+  ids.forEach(function(id,i){if(g.pos[id])return;fresh++;let by=near[id].find(function(x){return g.pos[x]}),o=by?g.pos[by]:[0,0],r=by?L*.5:L*.6*Math.sqrt(i+1),a=i*2.39996;g.pos[id]=[o[0]+Math.cos(a)*r,o[1]+Math.sin(a)*r]});
+  let rounds=Math.max(30,Math.min(fresh===n?300:fresh?120:40,Math.round(12e6/(n*n))));
+  for(let r=0;r<rounds;r++){
+    let heat=(fresh===n?L:L*.3)*(1-r/rounds)+.5,move={};
+    ids.forEach(function(id){move[id]=[-g.pos[id][0]*.08,-g.pos[id][1]*.08]});
+    for(let i=0;i<n;i++)for(let j=i+1;j<n;j++){let a=g.pos[ids[i]],b=g.pos[ids[j]],dx=a[0]-b[0],dy=a[1]-b[1],d=Math.hypot(dx,dy)||1;if(d>L*2.5)continue;let f=L*L/(d*d);move[ids[i]][0]+=dx*f;move[ids[i]][1]+=dy*f;move[ids[j]][0]-=dx*f;move[ids[j]][1]-=dy*f}
+    pairs.forEach(function(p){let a=g.pos[p.a],b=g.pos[p.b],dx=a[0]-b[0],dy=a[1]-b[1],f=Math.hypot(dx,dy)/(L*(1.5-.8*Math.log1p(p.w)/Math.log1p(heaviest)));move[p.a][0]-=dx*f;move[p.a][1]-=dy*f;move[p.b][0]+=dx*f;move[p.b][1]+=dy*f});
+    ids.forEach(function(id){if(g.pinned[id])return;let m=move[id],d=Math.hypot(m[0],m[1])||1,s=Math.min(d,heat)/d;g.pos[id][0]+=m[0]*s;g.pos[id][1]+=m[1]*s})
+  }
+}
+function fitTopology(box,g){
+  let xs=[],ys=[];g.nodes.forEach(function(p,id){xs.push(g.pos[id][0]);ys.push(g.pos[id][1])});
+  let w=box.clientWidth||1000,h=box.clientHeight||600,x0=Math.min.apply(null,xs),x1=Math.max.apply(null,xs),y0=Math.min.apply(null,ys),y1=Math.max.apply(null,ys);
+  let kx=(w-180)/Math.max(1,x1-x0),ky=(h-130)/Math.max(1,y1-y0);g.wide=Math.max(1,Math.min(2.2,kx/ky));g.k=Math.max(.1,Math.min(1.6,ky,kx/g.wide));g.tx=w/2-(x0+x1)/2*g.k*g.wide;g.ty=h/2+4-(y0+y1)/2*g.k
+}
+function paintTopology(box,g){
+  let svg=box.querySelector('svg');if(!svg||!g.nodes)return;
+  let w=box.clientWidth||1000,h=box.clientHeight||600,k=g.k,z=Math.max(.55,Math.min(1.7,Math.sqrt(k))),at=function(id){let p=g.pos[id];return [p[0]*k*g.wide+g.tx,p[1]*k+g.ty]},size=function(p){return (4.5+1.8*Math.sqrt(p.degree))*z},order=['observed','alternative','predicted'],short=function(v){let s=String(v);return s.length>25?s.slice(0,24)+'…':s},hot=null,labels=[],placed=[],named=0,frame=box.closest('.graph-frame'),off=new Set(Array.from(frame?frame.querySelectorAll('.legend button[aria-pressed="false"]'):[]).map(function(b){return b.dataset.cat})),shown=g.links.filter(function(e){return !off.has(e.severity?'severity':e.type)}),active=new Set();
+  shown.forEach(function(e){active.add(e.a);active.add(e.b)});
+  if(g.hover&&g.nodes.has(g.hover)){hot=new Set([g.hover]);shown.forEach(function(e){if(e.a===g.hover)hot.add(e.b);if(e.b===g.hover)hot.add(e.a)})}
+  let out='<defs>';
+  [['observed','var(--cyan)'],['predicted','var(--red)'],['alternative','var(--muted)'],['severity','var(--amber)']].forEach(function(x){out+='<marker id="'+box.id+x[0]+'" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M0 0L10 5L0 10z" fill="'+x[1]+'"/></marker>'});
+  out+='</defs>';
+  // A link is a shallow curve, so a to b, b to a and the link types between the same two hosts stay apart. Hovering a host fades everything that is not linked to it. Link types switched off in the legend are not drawn; a host left with no drawn link stays in place, faded and unlabelled.
+  shown.forEach(function(e){let a=at(e.a),b=at(e.b),dx=b[0]-a[0],dy=b[1]-a[1],d=Math.hypot(dx,dy)||1,ux=dx/d,uy=dy/d,ra=size(g.nodes.get(e.a))+2,rb=size(g.nodes.get(e.b))+4;if(d<ra+rb+4)return;let bend=(5+order.indexOf(e.type)*9)*z,lit=!hot||e.a===g.hover||e.b===g.hover,color=e.severity?'var(--amber)':e.type==='observed'?'var(--cyan)':e.type==='predicted'?'var(--red)':'var(--muted)',meaning=e.type==='predicted'?'hypothetical event +'+e.step+'; no ETA; not observed':e.type==='observed'?'observed traffic':'alternative hypothetical link';out+='<path d="M '+(a[0]+ux*ra).toFixed(1)+' '+(a[1]+uy*ra).toFixed(1)+' Q '+((a[0]+b[0])/2-uy*bend).toFixed(1)+' '+((a[1]+b[1])/2+ux*bend).toFixed(1)+' '+(b[0]-ux*rb).toFixed(1)+' '+(b[1]-uy*rb).toFixed(1)+'" fill="none" stroke="'+color+'" stroke-width="'+(e.type==='predicted'||e.severity?1.8:1.2)+'" stroke-dasharray="'+(e.type==='predicted'?'6 5':e.type==='alternative'?'2 5':'none')+'" opacity="'+(!lit?.07:e.type==='observed'&&!hot?.55:.9)+'" marker-end="url(#'+box.id+(e.severity?'severity':e.type)+')"><title>'+esc(g.nodes.get(e.a).name)+' → '+esc(g.nodes.get(e.b).name)+' · '+meaning+(e.severity?' · model severity '+esc(e.severity):'')+'</title></path>'});
+  g.nodes.forEach(function(p,id){let c=at(id),r=size(p),own=id===g.host,on=active.has(id),lit=on&&(!hot||hot.has(id))||id===g.hover,both=p.predicted&&p.observed;out+='<g data-id="'+esc(id)+'" opacity="'+(lit?1:on?.16:.28)+'"><title>'+esc(p.name)+(p.detail?' ('+esc(p.detail)+')':'')+' · '+(p.predicted?'predicted ':'')+(p.observed?'observed ':'')+'· '+p.degree+' links</title><circle cx="'+c[0].toFixed(1)+'" cy="'+c[1].toFixed(1)+'" r="'+r.toFixed(1)+'" fill="'+(p.severity?'var(--amber)':p.predicted&&!p.observed?'var(--red)':own?'var(--text)':'var(--cyan)')+'" stroke="'+(both?'var(--red)':own?'var(--cyan)':'var(--surface)')+'" stroke-width="'+(both||own?2.4:1.2)+'"/></g>';placed.push([c[0]-r,c[1]-r,c[0]+r,c[1]+r]);if(lit&&c[0]>-60&&c[0]<w+60&&c[1]>-30&&c[1]<h+30)labels.push({x:c[0],y:c[1]+r+13,text:short(p.name)+(own?' · this host':''),bold:own||p.predicted||p.severity,rank:(id===g.hover?1e9:0)+(hot?1e8:0)+(own?1e7:0)+(p.predicted?1e6:0)+(p.severity?2e5:0)+p.degree*500+Math.log1p(p.weight)*100})});
+  labels.sort(function(a,b){return b.rank-a.rank}).forEach(function(l){let half=l.text.length*3.4+6,r=[l.x-half,l.y-11,l.x+half,l.y+4];if(placed.some(function(q){return r[0]<q[2]&&r[2]>q[0]&&r[1]<q[3]&&r[3]>q[1]}))return;placed.push(r);named++;out+='<text x="'+l.x.toFixed(1)+'" y="'+l.y.toFixed(1)+'" text-anchor="middle" fill="var(--text)" font-size="11" font-weight="'+(l.bold?700:500)+'" stroke="var(--surface2)" stroke-width="3" paint-order="stroke" pointer-events="none">'+esc(l.text)+'</text>'});
+  out+='<text x="16" y="25" fill="var(--muted)" font-size="12" pointer-events="none">'+(g.step?'Observed + hypothetical through event +'+g.step+' per seed (no ETA)':'Observed topology')+' · '+g.nodes.size+' hosts · '+(shown.length<g.links.length?shown.length+' of ':'')+g.links.length+' links · '+named+' labelled at this zoom</text><text x="16" y="'+(h-12)+'" fill="var(--muted)" font-size="10" pointer-events="none">'+(g.kind==='offline'?'Offline capture IPs; no live hostnames are reused.':'Names come from captured DNS; IPs are shown otherwise.')+'</text>';
+  svg.setAttribute('aria-label','Network topology of '+g.nodes.size+' hosts');svg.classList.toggle('dragging',!!g.drag);svg.innerHTML=out
+}
+function wireTopology(box,g){
+  if(box.netWired)return;box.netWired=true;
+  let zoom=function(f,x,y){let k=Math.max(.1,Math.min(8,g.k*f));g.tx=x-(x-g.tx)*k/g.k;g.ty=y-(y-g.ty)*k/g.k;g.k=k;g.touched=true;paintTopology(box,g)};
+  box.addEventListener('click',function(e){let b=e.target.closest('button[data-net]');if(!b)return;let act=b.dataset.net;if(act==='in')zoom(1.4,box.clientWidth/2,box.clientHeight/2);else if(act==='out')zoom(1/1.4,box.clientWidth/2,box.clientHeight/2);else if(act==='fit'){g.touched=false;fitTopology(box,g);paintTopology(box,g)}else if(document.fullscreenElement)document.exitFullscreen();else (box.closest('.graph-frame')||box).requestFullscreen()});
+  box.addEventListener('wheel',function(e){if(!e.target.closest('svg')||!(e.ctrlKey||e.metaKey||document.fullscreenElement))return;e.preventDefault();let r=box.getBoundingClientRect();zoom(Math.exp(-e.deltaY*.002),e.clientX-r.left,e.clientY-r.top)},{passive:false});
+  box.addEventListener('pointerdown',function(e){if(!e.target.closest('svg'))return;let n=e.target.closest('[data-id]');g.drag={id:n?n.dataset.id:null,x:e.clientX,y:e.clientY};box.setPointerCapture(e.pointerId)});
+  box.addEventListener('pointermove',function(e){if(g.drag){let dx=e.clientX-g.drag.x,dy=e.clientY-g.drag.y;g.drag.x=e.clientX;g.drag.y=e.clientY;if(g.drag.id&&g.pos[g.drag.id]){g.pos[g.drag.id][0]+=dx/(g.k*g.wide);g.pos[g.drag.id][1]+=dy/g.k;g.pinned[g.drag.id]=true}else{g.tx+=dx;g.ty+=dy}g.touched=true;paintTopology(box,g);return}let n=e.target.closest('[data-id]'),id=n?n.dataset.id:null;if(id!==g.hover){g.hover=id;paintTopology(box,g)}});
+  ['pointerup','pointercancel'].forEach(function(name){box.addEventListener(name,function(){if(g.drag){g.drag=null;paintTopology(box,g)}})});
+  box.addEventListener('pointerleave',function(){if(g.hover&&!g.drag){g.hover=null;paintTopology(box,g)}});
+  new ResizeObserver(function(){if(!box.clientWidth||!g.nodes)return;if(!g.touched)fitTopology(box,g);paintTopology(box,g)}).observe(box)
 }
+document.addEventListener('click',function(e){let b=e.target.closest('.legend button[data-cat]'),frame=b&&b.closest('.graph-frame'),box=frame&&frame.querySelector('.model-graph');if(!box||!nets[box.id])return;b.setAttribute('aria-pressed',String(b.getAttribute('aria-pressed')==='false'));paintTopology(box,nets[box.id])});
+document.addEventListener('fullscreenchange',function(){document.querySelectorAll('button[data-net="full"]').forEach(function(b){b.textContent=document.fullscreenElement?'Exit full screen':'Full screen'});Object.keys(nets).forEach(function(id){nets[id].touched=false})});
 let offlinePollTimer=null;
 function offlineTable(headings,rows){return '<div class="table-wrap"><table><thead><tr>'+headings.map(function(x){return '<th>'+esc(x)+'</th>'}).join('')+'</tr></thead><tbody>'+rows.join('')+'</tbody></table></div>'}
 let offlineWorldResult=null,offlineSelectedStep=1;
@@ -494,7 +511,7 @@ function offlineWorldPanel(w){
     '<h4>Past ↔ next imagined states</h4><p class="subtle">Past events come from the completed capture. S[t+k] is the k-th imagined event on each seed path, not k seconds or the next k events actually captured.</p>'+
     '<div class="offline-step-tabs" id="offlineStepTabs" role="group" aria-label="Offline forecast event step">'+tabs+'</div>'+
     '<div class="offline-split"><div class="offline-pane past"><h5>Observed past</h5><p id="offlinePastNote">Latest scored events before S[t]</p><div id="offlinePast"></div></div><div class="offline-pane future"><h5>Imagined next events</h5><p id="offlineFutureNote">Three event steps per seed path at most</p><div id="offlineFuture"></div></div></div>'+
-    '<div class="model-graph offline-graph" id="offlineGraph" style="margin-top:14px"></div><p class="offline-timing" id="offlineTiming"></p></div>';
+    '<div class="graph-frame"><div class="legend" style="margin-top:14px"><button type="button" class="observed" data-cat="observed" aria-pressed="true" title="Show or hide these links">Observed</button><button type="button" class="predicted" data-cat="predicted" aria-pressed="true" title="Show or hide these links">Hypothetical link</button><button type="button" class="alerting" data-cat="severity" aria-pressed="true" title="Show or hide these links">Severity set</button></div><div class="model-graph offline-graph" id="offlineGraph" style="margin-top:10px"></div></div><p class="offline-timing" id="offlineTiming"></p></div>';
 }
 function renderOfflineState(){
   let w=offlineWorldResult;if(!w||!$('offlineGraph'))return;
@@ -506,7 +523,7 @@ function renderOfflineState(){
   $('offlineFutureNote').textContent=offlineSelectedStep?'Event +'+offlineSelectedStep+' · '+current.length+' imagined links across '+paths+' seed paths':'Select +1, +2, or +3 to inspect imagined links';
   $('offlineFuture').innerHTML=offlineSelectedStep?(current.length?current.map(function(e){return '<div class="offline-event"><small>Seed #'+number(e.seed_event)+' · event +'+number(e.step)+' · hypothetical</small><strong class="mono">'+esc(e.sender_ip)+' → '+esc(e.receiver_ip)+'</strong><small>Model score '+score(e.value)+(e.severity?' · '+esc(e.severity):'')+'</small></div>'}).join(''):'<p class="subtle">No imagined link at this step.</p>'):'<p class="subtle">S[t] contains observed capture context only. It is not a prediction.</p>';
   $('offlineStepTabs').querySelectorAll('button[data-offline-step]').forEach(function(button){let active=Number(button.dataset.offlineStep)===offlineSelectedStep;button.classList.toggle('active',active);button.setAttribute('aria-pressed',String(active))});
-  setTopologyGraph('offlineGraph',topologySVG(observed.edges||[],predicted.filter(function(e){return Number(e.step)<=offlineSelectedStep&&Number(e.step)<=3}),[],[],offlineSelectedStep,'offline'));
+  drawTopology('offlineGraph',observed.edges||[],predicted.filter(function(e){return Number(e.step)<=offlineSelectedStep&&Number(e.step)<=3}),[],[],offlineSelectedStep,'offline');
   $('offlineTiming').textContent=offlineSelectedStep?'Blue links were observed before the model state. Red links through event +'+offlineSelectedStep+' are imagined, not detected incidents. A completed PCAP may already contain packets after S[t]; the rollout has no validated wall-clock ETA.':'Blue links are observed input from the completed PCAP. Choose an event step to add hypothetical red links.';
 }
 $('offlineResult').addEventListener('click',function(event){let button=event.target.closest('button[data-offline-step]');if(!button)return;offlineSelectedStep=Number(button.dataset.offlineStep);renderOfflineState()});
diff --git a/cli/modelapi/service_rules.go b/cli/modelapi/service_rules.go
index 682d125..adf4b9a 100644
--- a/cli/modelapi/service_rules.go
+++ b/cli/modelapi/service_rules.go
@@ -397,6 +397,18 @@ func applyWorldRules(f *ForecastResponse) {
 		o.SuppressedLinks = append(o.SuppressedLinks, *link)
 	}
 	sort.Slice(o.SuppressedLinks, func(i, j int) bool { return o.SuppressedLinks[i].Key < o.SuppressedLinks[j].Key })
+	// A kept row is judged on its own events: what was routine an hour ago
+	// says nothing about the link now, and the other way round.
+	history := make([]ObservedIncident, 0, len(o.History))
+	for _, x := range o.History {
+		x.RelatedEvents = tagWorldEvents(x.RelatedEvents)
+		if decideServiceEvents(Incident{Family: worldRuleFamily}, worldLinkedEvents(x.RelatedEvents), 1).FinalDecision == "SUPPRESSED" {
+			o.SuppressedHistory++
+			continue
+		}
+		history = append(history, x)
+	}
+	o.History = history
 }
 
 func worldLinkedEvents(events []ObservedAlert) []DetectionIncidentEvent {
diff --git a/cli/modelapi/service_rules_test.go b/cli/modelapi/service_rules_test.go
index 907a871..3bfa770 100644
--- a/cli/modelapi/service_rules_test.go
+++ b/cli/modelapi/service_rules_test.go
@@ -240,6 +240,14 @@ func TestWorldFlagsFollowTheServiceRules(t *testing.T) {
 	if len(single.Observed.SuppressedLinks) != 1 || len(single.Observed.Alerts) != 0 {
 		t.Fatalf("a single routine crossing: %+v", single.Observed)
 	}
+	// Kept history rows follow the same rule, each on its own events.
+	kept := &ForecastResponse{Observed: Observed{History: []ObservedIncident{
+		{ID: "old-dns", SenderIP: "10.4.4.120", ReceiverIP: resolver, Events: 1, RelatedEvents: []ObservedAlert{event(1, 10, resolver, 53)}},
+		{ID: "old-other", SenderIP: "10.4.4.120", ReceiverIP: other, Events: 1, RelatedEvents: []ObservedAlert{event(2, 20, other, 4444)}}}}}
+	applyWorldRules(kept)
+	if h := kept.Observed.History; len(h) != 1 || h[0].ID != "old-other" || h[0].RelatedEvents[0].TrafficClass == "" || kept.Observed.SuppressedHistory != 1 {
+		t.Fatalf("history rows on a routine service are dropped and counted: %+v", kept.Observed)
+	}
 	mixed := &ForecastResponse{Observed: Observed{Alerts: []ObservedAlert{event(1, 10, resolver, 53), event(2, 20, resolver, 4444)}}}
 	applyWorldRules(mixed)
 	if len(mixed.Observed.SuppressedLinks) != 0 || len(mixed.Observed.Alerts) != 2 {
diff --git a/cli/modelapi/types.go b/cli/modelapi/types.go
index 2887f12..f5e2fe9 100644
--- a/cli/modelapi/types.go
+++ b/cli/modelapi/types.go
@@ -114,6 +114,12 @@ type Observed struct {
 	SuppressedIncidents []ObservedIncident `json:"suppressed_incidents,omitempty"`
 	SuppressedAlerts    []ObservedAlert    `json:"suppressed_alerts,omitempty"`
 	SuppressedLinks     []SuppressedLink   `json:"suppressed_links,omitempty"`
+	// History is every observed threshold crossing the live service kept, as one
+	// row per burst on a link. ForecastWithRules drops the rows that are one
+	// routine internal service and counts them in SuppressedHistory.
+	History           []ObservedIncident `json:"history,omitempty"`
+	HistoryWindowS    float64            `json:"history_window_s,omitempty"`
+	SuppressedHistory int                `json:"suppressed_history,omitempty"`
 }
 
 // SuppressedLink is a host pair whose every flagged event in the window is one
@@ -137,6 +143,8 @@ type ObservedIncident struct {
 	Events        int             `json:"events"`
 	RelatedEvents []ObservedAlert `json:"related_events,omitempty"`
 	Severity      string          `json:"severity"`
+	// Incident is set on a History row whose events met the incident rule.
+	Incident bool `json:"incident,omitempty"`
 	// Deterministic service-rule decision; the model's score is not changed.
 	FinalDecision      string `json:"final_decision,omitempty"`
 	RuleClassification string `json:"rule_classification,omitempty"`
diff --git a/models/serving/incident_history.py b/models/serving/incident_history.py
index 5389013..2fb69bf 100644
--- a/models/serving/incident_history.py
+++ b/models/serving/incident_history.py
@@ -1,4 +1,4 @@
-"""Small durable ledger of detector incidents for the operator's recent-history view."""
+"""Small durable ledgers of detector incidents and world-model flags for the operator's recent-history view."""
 from __future__ import annotations
 
 import json
@@ -129,3 +129,56 @@ def close(self) -> None:
             self.reader.close()
         with self.lock:
             self.db.close()
+
+
+class WorldAlertHistory:
+    """The observed events that crossed the world model's threshold, kept for the same three hours.
+
+    The live forecast rebuilds its window every cycle, so a flag is on screen only while its event is in that window.
+    An event is identified by its time and link: event ids are renumbered on every rebuild.
+    """
+
+    def __init__(self, path: Path):
+        path = Path(path)
+        path.parent.mkdir(parents=True, exist_ok=True)
+        self.lock = threading.Lock()
+        self.db = sqlite3.connect(path, timeout=10, check_same_thread=False)
+        self.db.execute("PRAGMA journal_mode=WAL")
+        self.db.execute("CREATE TABLE IF NOT EXISTS world_alerts (t REAL NOT NULL, sender_ip TEXT NOT NULL, "
+                        "receiver_ip TEXT NOT NULL, incident INTEGER NOT NULL, detail TEXT NOT NULL, "
+                        "PRIMARY KEY (t, sender_ip, receiver_ip))")
+        self.db.commit()
+
+    def record(self, events: list[dict], now: "float | None" = None) -> None:
+        """Keep these flagged events. One that later joins an incident stays marked as part of it."""
+        values = [(float(e["t"]), str(e["sender_ip"]), str(e["receiver_ip"]), int(bool(e.get("incident"))),
+                   json.dumps(e)) for e in events]
+        with self.lock, self.db:
+            self.db.executemany("INSERT INTO world_alerts VALUES (?, ?, ?, ?, ?) ON CONFLICT (t, sender_ip, receiver_ip) "
+                                "DO UPDATE SET incident = MAX(incident, excluded.incident), detail = excluded.detail",
+                                values)
+            self.db.execute("DELETE FROM world_alerts WHERE t < ?", ((time.time() if now is None else now) - WINDOW_S,))
+
+    def remember(self, events: list[dict], incidents: list[dict]) -> list[dict]:
+        """Keep one cycle's threshold crossings and return everything kept.
+
+        Input:  the cycle's events (those without a `severity` did not cross and are skipped) and its incidents
+        Output: `recent()` after recording them
+        """
+        in_incident = {(e["t"], e["sender_ip"], e["receiver_ip"]) for incident in incidents
+                       for e in incident["related_events"]}
+        crossings = {(e["t"], e["sender_ip"], e["receiver_ip"]): e for e in events if e.get("severity")}
+        self.record([{**e, "incident": key in in_incident} for key, e in crossings.items()])
+        return self.recent()
+
+    def recent(self, now: "float | None" = None) -> list[dict]:
+        """The kept events, oldest first, each with `incident`: whether it was ever part of an incident."""
+        cutoff = (time.time() if now is None else float(now)) - WINDOW_S
+        with self.lock:
+            rows = self.db.execute("SELECT incident, detail FROM world_alerts WHERE t >= ? ORDER BY t",
+                                   (cutoff,)).fetchall()
+        return [{**json.loads(detail), "incident": bool(incident)} for incident, detail in rows]
+
+    def close(self) -> None:
+        with self.lock:
+            self.db.close()
diff --git a/models/serving/live.py b/models/serving/live.py
index 2edb8c7..e80c417 100644
--- a/models/serving/live.py
+++ b/models/serving/live.py
@@ -74,12 +74,14 @@
 from models.flow_encoder.encoder import VARIANT, FlowAutoencoder
 from models.flow_encoder.export import export_latents as export_flow_latents
 from models.explanation.world_model import seed_explanations
+from models.serving.incident_history import MAX_RETURNED, WINDOW_S, WorldAlertHistory
 from models.serving.live_calibration import LiveScoreCalibration, checkpoint_signature
 from models.serving.service_evidence import flow_evidence
 from models.serving.threshold_mode import ThresholdMode
 from models.world_model.inference import Replay
 from models.world_model.reception import SPLIT_TEST, receive
-from models.world_model.service import Handler, STAGE_UNAVAILABLE, TARGET, forecast_payload, node_names, served_threshold
+from models.world_model.service import (Handler, STAGE_UNAVAILABLE, TARGET, alert_groups, forecast_payload, node_names,
+                                        served_threshold)
 
 DAY = "live"                   # the window's stream name; every stage keys its folders on it
 # CICFlowMeter's flow timeout (tools/CICFlowMeter .../ifm/Cmd.java: flowTimeout = 120000000 us). A flow that started this
@@ -329,8 +331,10 @@ class Live:
 
     def __init__(self, chain: Chain, inbox: Path, *, block10: Path, window: int, idle: float, rollout_steps: int,
                  rollout_seeds: int, hold: float = HOLD_S, live_calibration_hours: float = 0.0,
-                 calibration_db: "Path | None" = None, model_paths: "list[Path] | None" = None):
+                 calibration_db: "Path | None" = None, model_paths: "list[Path] | None" = None,
+                 alert_db: "Path | None" = None):
         self.chain, self.inbox, self.block10 = chain, Path(inbox), Path(block10)
+        self.alert_history = WorldAlertHistory(alert_db or chain.work.parent / "world-alerts.sqlite")
         self.window, self.idle, self.hold = window, idle, hold
         self.rollout_steps, self.rollout_seeds = rollout_steps, rollout_seeds
         self.threshold = served_threshold(self.block10)
@@ -592,6 +596,10 @@ def forecast(self, cycle: Path, build_seconds: float, cutoff: float, newest: flo
                                      wanted={flow_of.get(event["event_id"]) for event in flagged})
             for event in flagged:
                 event.update(evidence.get(flow_of.get(event["event_id"]), {}))
+        # The window is rebuilt every cycle, so a flag leaves the payload when its event leaves the window. Every
+        # observed threshold crossing is kept for three hours, with its evidence, and served as bursts per link.
+        observed["history"] = alert_groups(self.alert_history.remember(flagged, observed["incidents"]))[-MAX_RETURNED:]
+        observed["history_window_s"] = WINDOW_S
         return payload
 
 
diff --git a/models/serving/test_incident_history.py b/models/serving/test_incident_history.py
index b52960b..1751b5e 100644
--- a/models/serving/test_incident_history.py
+++ b/models/serving/test_incident_history.py
@@ -5,7 +5,7 @@
 import unittest
 from pathlib import Path
 
-from models.serving.incident_history import IncidentHistory, WINDOW_S
+from models.serving.incident_history import IncidentHistory, WINDOW_S, WorldAlertHistory
 
 
 class IncidentHistoryTest(unittest.TestCase):
@@ -88,6 +88,21 @@ def test_event_answer_is_complete_up_to_the_limit_then_a_marked_prefix(self):
             self.assertEqual(history.events("Bot", 1, opened), rows)
             history.close()
 
+    def test_world_flags_outlive_the_window_and_keep_their_incident_mark(self):
+        with tempfile.TemporaryDirectory() as temp:
+            now = time.time()
+            flag = {"event_id": 4, "t": now - 60, "sender_ip": "10.0.0.5", "receiver_ip": "10.0.0.9",
+                    "value": .999, "severity": "MEDIUM"}
+            history = WorldAlertHistory(Path(temp) / "world-alerts.sqlite")
+            quiet = {**flag, "t": now - 30, "severity": ""}
+            history.record([{**flag, "t": now - WINDOW_S - 5}])
+            history.remember([flag, quiet], [{"related_events": [flag]}])
+            # The next cycle renumbers the event and no longer sees it inside an incident.
+            history.remember([{**flag, "event_id": 9}, quiet], [])
+            history.close()
+            kept = WorldAlertHistory(Path(temp) / "world-alerts.sqlite").recent()
+            self.assertEqual([(row["t"], row["event_id"], row["incident"]) for row in kept], [(now - 60, 9, True)])
+
 
 if __name__ == "__main__":
     unittest.main()
diff --git a/models/world_model/service.py b/models/world_model/service.py
index 5e7790b..cacf09b 100644
--- a/models/world_model/service.py
+++ b/models/world_model/service.py
@@ -146,6 +146,34 @@ def observed_incidents(rows: dict, threshold: "dict | None", names: dict, *, gap
     return [incident for incident in incidents if incident["last_seen"] + gap >= newest][-30:]
 
 
+def alert_groups(events: list[dict], *, gap: float = INCIDENT_GAP_S) -> list[dict]:
+    """Stored flagged events as one row per burst on a link, shaped like an incident.
+
+    Input:  flagged events (`t`, `sender_ip`, `receiver_ip`, `value`, `severity`, optionally `incident`), any order
+    Output: rows oldest first; a further flag on the link within `gap` seconds extends its row
+
+    `incident` on a row says whether any of its events met the incident rule (three crossings in a row) when it was
+    scored. A burst of three stored flags alone does not: unflagged events between them are not stored.
+    """
+    groups, latest = [], {}
+    for event in sorted(events, key=lambda e: e["t"]):
+        key = (event["sender_ip"], event["receiver_ip"])
+        group = latest.get(key)
+        if group is None or event["t"] > group["last_seen"] + gap:
+            group = latest[key] = {"id": f"{event['t']:.6f}|{key[0]}|{key[1]}", "opened": event["t"],
+                                   "last_seen": event["t"], "sender_ip": key[0], "receiver_ip": key[1],
+                                   "opening_score": event["value"], "events": 0, "related_events": [],
+                                   "severity": event["severity"], "incident": False}
+            groups.append(group)
+        group["last_seen"] = event["t"]
+        group["related_events"].append(event)
+        group["events"] += 1
+        group["incident"] = group["incident"] or bool(event.get("incident"))
+        if event["severity"] == "HIGH":
+            group["severity"] = "HIGH"
+    return groups
+
+
 def forecast_payload(rollouts: list[dict], rows: dict, *, caveats: list[str], names: "dict | None" = None,
                      threshold: "dict | None" = None, recent: int = 400, source: "dict | None" = None,
                      explanation: "list | None" = None) -> dict:
diff --git a/models/world_model/test_service_incidents.py b/models/world_model/test_service_incidents.py
index 18e4c22..ae69afe 100644
--- a/models/world_model/test_service_incidents.py
+++ b/models/world_model/test_service_incidents.py
@@ -1,7 +1,7 @@
 """Observed world-model incidents are distinct from raw event flags and forecasts."""
 import unittest
 
-from models.world_model.service import caveats_for, forecast_payload, observed_incidents, with_live_age
+from models.world_model.service import alert_groups, caveats_for, forecast_payload, observed_incidents, with_live_age
 
 
 def rows(times, scores):
@@ -65,6 +65,16 @@ def test_low_surprise_uses_signed_checkpoint_threshold(self):
         self.assertEqual(len(incidents), 1)
         self.assertEqual(incidents[0]["opening_score"], 0.1)
 
+    def test_stored_flags_become_one_row_per_burst_on_a_link(self):
+        flag = lambda t, receiver, **more: {"t": t, "sender_ip": "a", "receiver_ip": receiver, "value": .9,
+                                            "severity": "MEDIUM", **more}
+        groups = alert_groups([flag(300, "b", severity="HIGH"), flag(10, "b"), flag(100, "b", incident=True),
+                               flag(50, "c")])
+        self.assertEqual([(g["receiver_ip"], g["opened"], g["last_seen"], g["events"], g["incident"], g["severity"])
+                          for g in groups],
+                         [("b", 10, 100, 2, True, "MEDIUM"), ("c", 50, 50, 1, False, "MEDIUM"),
+                          ("b", 300, 300, 1, False, "HIGH")])
+
 
 if __name__ == "__main__":
     unittest.main()