NEXUS — Freelance Pipeline

Download
URL
https://nexus.ou-uv.com/pipeline-flow
Domain
nexus.ou-uv.com
First Captured
2026-02-27T16:10:54.303Z
Last Updated
2026-02-27T16:10:54.303Z
File Size
409.93 KB
Version
Version History (2 older versions)

2026-02-27T15:19:19.713Z • 405.8 KB
Download
2026-02-27T15:19:59.519Z • 405.76 KB
Download
Page Preview

<html lang="en" style="zoom: 1.25;"><head>
<meta charset="UTF-8">
<title>NEXUS — Freelance Pipeline</title>
<script src="/static/js/chart.umd.min.js"></script>
<style>
/* ── reset ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#050c16;overflow:hidden;}
body{display:flex;flex-direction:column;font-family:'Consolas','Courier New',monospace;color:#8ab4d0;}

/* ── topbar ─────────────────────────────────────────────────────────────── */
#topbar{
  flex-shrink:0;height:38px;background:#070e1b;
  border-bottom:1px solid #0c1e38;
  display:flex;align-items:center;padding:0 14px;gap:14px;
  position:relative;overflow:hidden;
}
.title{font-size:11px;font-weight:bold;color:#1a7fff;letter-spacing:3px;white-space:nowrap;}
#tb-logo{
  flex-shrink:0;
  height:28px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  object-position:left center;
  border-right:1px solid #0c2a4a;
  padding-right:14px;
  opacity:.92;
}
.metrics{display:flex;gap:12px;font-size:10px;color:#243650;flex:1;}
.metrics .m{white-space:nowrap;}
.metrics .m span{color:#3a9fff;font-weight:bold;display:inline-block;min-width:46px;text-align:right;}
#rdot{width:7px;height:7px;border-radius:50%;background:#00ff88;flex-shrink:0;}
#rdot.stale{background:#ff4040;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
/* ── topbar right anchor – always visible regardless of middle content ── */
#tb-right{
  position:absolute;right:14px;top:0;bottom:0;
  display:flex;align-items:center;gap:8px;
  background:#070e1b;padding-left:12px;
  border-left:1px solid #0c1e38;
  z-index:10;
}
#tb-ws-ver{font-size:8px;color:#1a5070;letter-spacing:.3px;font-family:monospace;flex-shrink:0;user-select:none;border-left:1px solid #0c2040;padding-left:10px;}
#tb-profile{font-size:8px;letter-spacing:1.5px;color:#3a9fff;border:1px solid #0c2a4a;border-radius:2px;padding:1px 8px;background:#060d18;font-family:monospace;flex-shrink:0;cursor:default;white-space:nowrap;}
/* REQ-043: GPU/hardware acceleration indicator */
#tb-gpu{font-size:7px;letter-spacing:.5px;color:#1a4060;border:1px solid #0c1e38;border-radius:2px;padding:1px 5px;font-family:monospace;flex-shrink:0;cursor:default;white-space:nowrap;user-select:none;transition:color .3s,border-color .3s;}
#tb-gpu.gpu-on{color:#00cc66;border-color:rgba(0,180,80,.5);}
#tb-gpu.gpu-sw{color:#f0a020;border-color:rgba(200,120,0,.45);}
/* ── health badges ─────────────────────────────────────────────────────── */
#tb-health{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.tb-badge{
  display:flex;align-items:center;gap:3px;font-size:9px;font-weight:bold;
  padding:1px 6px 1px 4px;border-radius:3px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.06);letter-spacing:.5px;
  transition:background .4s,border-color .4s;cursor:default;
}
.tb-badge .bd-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.tb-badge.run {background:rgba(0,100,220,.18);border-color:rgba(0,140,255,.3);color:#3a9fff;}
.tb-badge.run .bd-dot{background:#2a8fff;animation:blink .9s infinite;}
.tb-badge.done{background:rgba(0,140,60,.14);border-color:rgba(0,200,80,.25);color:#00cc66;}
.tb-badge.done .bd-dot{background:#00aa55;}
.tb-badge.stop{background:rgba(160,20,20,.18);border-color:rgba(255,60,60,.28);color:#ff5555;}
.tb-badge.stop .bd-dot{background:#cc2222;}
.tb-badge.idle{background:rgba(20,40,70,.25);border-color:rgba(40,80,140,.2);color:#2a5080;}
.tb-badge.idle .bd-dot{background:#1a3860;}
#tb-age{font-size:9px;color:#1a3860;white-space:nowrap;}
.m-perf{display:flex;gap:10px;align-items:center;font-size:9px;color:#1a3860;
  border-left:1px solid #0c1e38;padding-left:12px;flex-shrink:0;}
.m-perf>div{white-space:nowrap;}
.m-perf span{color:#1a6090;font-weight:bold;display:inline-block;min-width:38px;text-align:right;}
#perf-spark{width:60px;height:14px;vertical-align:middle;flex-shrink:0;
  border:1px solid #091828;border-radius:2px;}

/* ── canvas ─────────────────────────────────────────────────────────────── */
canvas{flex:1 1 auto;display:block;width:100%;}

/* ── timeline bar ───────────────────────────────────────────────────────── */
#timeline{
  flex-shrink:0;height:68px;background:#070e1b;
  border-top:1px solid #0c1e38;
  display:flex;align-items:center;padding:0 14px;gap:10px;font-size:10px;
  position:relative;
}
#color-legend{
  position:absolute;right:14px;bottom:4px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(4,9,22,0.82);border:1px solid rgba(0,180,255,0.15);
  padding:4px 8px;border-radius:3px;pointer-events:none;
}
.cl-row{display:flex;align-items:center;gap:5px;white-space:nowrap;}
.cl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cl-lbl{font-size:8px;font-family:Consolas,monospace;font-weight:bold;width:50px;}
.cl-sub{font-size:8px;font-family:Consolas,monospace;color:rgba(180,200,220,0.65);}
#tl-track{
  flex:1;height:6px;background:#0a1828;border-radius:3px;
  cursor:pointer;position:relative;
}
#tl-fill{
  height:100%;background:#1a5090;border-radius:3px;
  pointer-events:none;transition:none;
}
#tl-thumb{
  position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:#2a8fff;border:2px solid #070e1b;transform:translate(-50%,-50%);
  cursor:grab;pointer-events:auto;touch-action:none;z-index:2;
}
#tl-thumb:active{ cursor:grabbing; }
#tl-density{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;border-radius:3px;
}
#tl-ticks{
  position:relative;width:100%;height:14px;overflow:hidden;
}
.tl-tick{
  position:absolute;transform:translateX(-50%);
  font-size:8px;color:#1a3a60;white-space:nowrap;
  pointer-events:none;user-select:none;line-height:1;
}
.tl-tick::before{
  content:'';display:block;width:1px;height:4px;
  background:#0e2840;margin:0 auto 1px;
}
#tl-labels{display:flex;justify-content:space-between;font-size:9px;color:#1a3a60;width:100%;}
#tl-now{font-size:10px;color:#1a5090;white-space:nowrap;min-width:130px;text-align:right;}
.tl-zoom-btns{display:flex;gap:2px;flex-shrink:0;}
.tl-zoom-btns .spd{padding:0 5px;font-size:8px;height:18px;}
#throughput-bar{
  flex-shrink:0;background:#060d1a;
  border-top:1px solid #091828;
  display:flex;align-items:center;padding:3px 12px;gap:10px;
}
#tpb-label{font-size:8px;color:#1a5090;letter-spacing:2px;white-space:nowrap;flex-shrink:0;}
#tpb-rows{flex:1;display:flex;gap:14px;align-items:center;overflow:hidden;flex-wrap:nowrap;}
/* ── Useme funnel meter ──────────────────────────────────────────────────── */
#useme-meter{
  flex-shrink:0;background:#060d1a;
  border-top:1px solid #091828;
  display:flex;align-items:center;padding:3px 12px;gap:10px;
}
#um-label{font-size:8px;color:#1a6040;letter-spacing:2px;white-space:nowrap;flex-shrink:0;width:56px;}
#um-content{flex:1;display:flex;gap:8px;align-items:center;overflow:hidden;}
.um-seg{font-size:8px;white-space:nowrap;}
#um-identified{color:#1a5050;}
#um-pct{color:#2a9060;font-weight:bold;width:32px;text-align:left;}
#um-detail{color:#1a4840;font-size:8px;}
#um-bar{width:140px;height:5px;background:#0a1828;border-radius:3px;overflow:hidden;border:1px solid #081520;flex-shrink:0;}
#um-fill{height:100%;border-radius:3px;background:#0e3a20;transition:width .8s ease,background .5s;}
#um-retry{font-size:8px;color:#cc3333;white-space:nowrap;flex-shrink:0;padding-left:8px;border-left:1px solid #0c1e38;margin-left:4px;}
.tpb-row{display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:default;}
.tpb-name{font-size:8px;color:#2a5880;width:72px;text-align:right;letter-spacing:.5px;}
.tpb-cur{font-size:9px;color:#3a9fff;font-weight:bold;width:54px;text-align:right;}
.tpb-bar{width:70px;height:5px;background:#0a1828;border-radius:3px;overflow:hidden;border:1px solid #091020;}
.tpb-fill{height:100%;border-radius:3px;transition:width .6s ease,background .4s;}
.tpb-pct{font-size:8px;color:#1a6090;width:26px;text-align:left;}
.tpb-refs{font-size:8px;color:#0e2840;}
#statusbar{
  flex-shrink:0;height:22px;background:#060d1a;
  border-top:1px solid #091828;
  display:flex;align-items:center;padding:0 12px;gap:8px;font-size:9px;
}
#log-line{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1a4060;}
#pkt-count{white-space:nowrap;color:#0e2840;}

/* ── hover tooltip ─────────────────────────────────────────────────────── */
#tooltip{
  position:fixed;pointer-events:none;display:none;
  background:rgba(5,12,26,.96);border:1px solid #1a4080;
  border-radius:6px;padding:8px 12px;font-size:10px;
  color:#8ab4d0;line-height:1.6;z-index:100;min-width:160px;max-width:260px;
}
#tooltip .tt-title{font-weight:bold;color:#3a9fff;margin-bottom:4px;font-size:11px;}
#tooltip .tt-row{display:flex;justify-content:space-between;gap:12px;}
#tooltip .tt-key{color:#2a5880;}
#tooltip .tt-val{color:#6ab0e0;font-weight:bold;}

/* ── window resize grip ── */
.nw-grip{
  position:absolute;right:0;bottom:0;width:14px;height:14px;
  cursor:se-resize;z-index:10;opacity:.35;
  background:linear-gradient(135deg,transparent 50%,#2a6090 50%);
  border-radius:0 0 5px 0;
}
.nw-grip:hover{opacity:.75;}
/* ── window launcher ── */
#win-launcher{
  position:relative;flex-shrink:0;
}
#win-launcher-btn{
  height:24px;padding:0 8px;border-radius:3px;border:1px solid #1a3a60;
  background:#0a1626;color:#2a6090;cursor:pointer;font-size:9px;
  font-family:inherit;white-space:nowrap;transition:all .15s;
  letter-spacing:1px;
}
#win-launcher-btn:hover,#win-launcher-btn.open{color:#3affc0;border-color:#2a9fff;background:#0e1e38;}
#win-dropdown{
  display:none;position:fixed;top:38px;right:14px;
  background:rgba(4,9,20,.98);border:1px solid #1a3a60;
  border-radius:5px;z-index:4001;min-width:240px;max-width:320px;
  padding:4px 0;box-shadow:0 4px 24px rgba(0,0,0,.7);
  max-height:calc(100vh - 52px);overflow-y:auto;
}
#win-dropdown.open{display:block;}
.wd-cat-row{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;cursor:pointer;font-size:9px;letter-spacing:1px;
  color:#1a5080;transition:background .12s;
}
.wd-cat-row:hover,.wd-cat-row.cat-active{background:rgba(0,80,180,.22);color:#6ab0e0;}
.wd-cat-label{flex:1;font-weight:bold;}
.wd-cat-count{font-size:8px;color:#1a5050;min-width:12px;text-align:right;}
.wd-cat-count.has-open{color:#00ff88;}
.wd-cat-arrow{font-size:8px;color:#1a4060;}
.wd-item{
  display:flex;align-items:center;gap:7px;
  padding:5px 10px;cursor:pointer;font-size:9px;letter-spacing:.5px;
  transition:background .1s;
}
.wd-item:hover{background:rgba(0,80,180,.15);}
.wd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.wd-dot.open-w{background:#00ff88;}
.wd-dot.closed-w{background:#1a3a50;}
.wd-label{flex:1;color:#3a7090;}
.wd-label.open-w{color:#6ab0e0;}
.wd-action{font-size:8px;color:#1a4060;}
.wd-sep-flyout{margin:3px 8px 2px;border-top:1px solid #0c1e38;}
.wd-empty{padding:8px 12px;font-size:9px;color:#1a3a50;font-style:italic;}
.wd-cat-items{border-top:1px solid rgba(0,80,160,.2);border-bottom:1px solid rgba(0,80,160,.2);margin-bottom:2px;background:rgba(0,20,60,.3);}
.wd-cat-items .wd-item{padding-left:18px;}
.wd-cat-row.cat-active{color:#6ab0e0;background:rgba(0,60,140,.22);}
.wd-cat-row.cat-active .wd-cat-label{color:#6ab0e0;}
.wd-cat-row.cat-active .wd-cat-arrow{color:#3a9fff;}
/* ── speed buttons ── */
.speed-btns{display:flex;gap:3px;flex-shrink:0;}
.spd{height:24px;padding:0 7px;border-radius:3px;border:1px solid #1a3a60;
  background:#0a1626;color:#2a6090;cursor:pointer;font-size:9px;
  font-family:inherit;white-space:nowrap;transition:all .15s;}
/* transport buttons: fixed width so play↔pause swap doesn't resize */
#spd-prev,#spd-rr,#spd-r,#spd-p,#spd-f,#spd-ff,#spd-next{
  width:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.spd:hover{color:#3a9fff;border-color:#2a6fff;background:#0e1e38;}
.spd.active{color:#7ac0ff;border-color:#3a7fff;background:#0e2040;}

/* ── status panel ── */
#sp-toggle{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  width:18px;padding:10px 3px;background:rgba(5,11,23,.95);
  border:1px solid #0c1e38;border-left:none;border-radius:0 4px 4px 0;
  cursor:pointer;z-index:60;font-size:8px;color:#1a4060;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  writing-mode:vertical-rl;white-space:nowrap;letter-spacing:2px;
  opacity:0;transition:opacity .18s ease;
}
#sp-toggle:hover{opacity:1;color:#3a9fff;background:rgba(8,18,36,.97);}
/* reveal tab when panel is open so user can close it */
#status-panel.open ~ #sp-toggle,
body:has(#status-panel.open) #sp-toggle{opacity:1;}
#status-panel{
  position:fixed;left:0;top:38px;bottom:72px;width:270px;
  background:rgba(4,9,20,.97);border-right:1px solid #0c1e38;
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease;
  z-index:55;overflow:hidden;
}
#status-panel.open{transform:translateX(0);}
.sp-head{padding:9px 12px;border-bottom:1px solid #0c1e38;
  font-size:9px;font-weight:bold;color:#1a7fff;letter-spacing:2px;
  display:flex;justify-content:space-between;align-items:center;}
.sp-close-btn{background:none;border:1px solid #1a3060;color:#2a5080;
  font-size:9px;padding:1px 6px;border-radius:3px;cursor:pointer;}
.sp-close-btn:hover{color:#3a9fff;}
.sp-body{flex:1;overflow-y:auto;padding:10px 12px;}
.sp-body::-webkit-scrollbar{width:3px;}
.sp-body::-webkit-scrollbar-thumb{background:#1a3a50;}
.sp-sect{margin-bottom:14px;}
.sp-sect-title{font-size:8px;color:#1a3a60;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:6px;border-bottom:1px solid #0a1828;padding-bottom:3px;}
.sp-m{margin-bottom:7px;}
.sp-m-hd{font-size:9px;color:#3a6080;display:flex;justify-content:space-between;margin-bottom:3px;}
.sp-m-hd b{color:#3a9fff;}
.sp-bar{height:4px;background:#0a1828;border-radius:2px;overflow:hidden;}
.sp-bar-fill{height:100%;border-radius:2px;transition:width .6s ease;}
.sp-task{font-size:9px;padding:2px 0;border-bottom:1px solid #060e1a;
  display:flex;align-items:center;gap:5px;}
.sp-task:last-child{border-bottom:none;}
.sp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.sp-task-done{color:#009944;}.sp-task-active{color:#2a8fff;}
.sp-task-ready{color:#aa7700;}.sp-task-blocked{color:#1a3050;}
.sp-task-unknown{color:#1a3050;}

/* ── detail panel ── */
#detail-panel{
  position:fixed;left:0;right:0;bottom:72px;
  height:0;overflow:hidden;
  background:rgba(4,9,20,.98);border-top:2px solid #1a4080;
  z-index:55;transition:height .2s ease;
  display:flex;flex-direction:column;
}
#detail-panel.open{height:200px;}
.dp-head{padding:6px 16px;border-bottom:1px solid #0c1e38;
  font-size:10px;font-weight:bold;
  display:flex;justify-content:space-between;align-items:center;gap:12px;}
.dp-title{color:#3a9fff;}
.dp-ts{font-size:9px;color:#1a4060;}
#dp-close{background:none;border:1px solid #1a3060;color:#2a5080;
  font-size:9px;padding:2px 8px;border-radius:3px;cursor:pointer;}
#dp-close:hover{color:#3a9fff;}
.dp-body{flex:1;display:flex;overflow:hidden;}
.dp-col{flex:1;padding:8px 16px;border-right:1px solid #080e1e;
  overflow-y:auto;min-width:0;}
.dp-col:last-child{border-right:none;flex:2;}
.dp-row{font-size:9px;display:flex;padding:2px 0;border-bottom:1px solid #050d18;gap:8px;}
.dp-k{color:#1a4060;min-width:90px;flex-shrink:0;}
.dp-v{color:#6ab0e0;font-weight:bold;overflow:hidden;text-overflow:ellipsis;}
.dp-col::-webkit-scrollbar{width:3px;}
.dp-col::-webkit-scrollbar-thumb{background:#1a3a50;}

/* ── nexus window system ─────────────────────────────────────────────────── */
#nw-container{position:fixed;top:0;left:0;width:0;height:0;z-index:500;}

@keyframes nw-scan{0%{transform:translateY(-120%);opacity:0}15%{opacity:.055}85%{opacity:.025}100%{transform:translateY(120%);opacity:0}}
@keyframes nc-blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes nc-val-flash{0%{color:#00ffcc;text-shadow:0 0 8px #00ffcc}100%{color:#4aaad0;text-shadow:none}}
@keyframes nc-expand-up{from{opacity:0;transform:translateY(5px) scaleY(.82)}to{opacity:1;transform:none}}
@keyframes nc-qa-in{from{opacity:0;transform:scaleX(.8)}to{opacity:1;transform:none}}

.nw{
  position:fixed;display:flex;flex-direction:column;
  border-radius:0;
  border:1px solid rgba(0,120,210,.22);
  background:rgba(2,6,15,.97);
  z-index:50;min-width:180px;min-height:100px;overflow:hidden;opacity:.76;
  box-shadow:0 0 0 1px rgba(0,50,120,.1),0 12px 50px rgba(0,0,0,.88),
             inset 0 0 50px rgba(0,18,55,.06);
  transition:opacity .22s,box-shadow .2s,border-color .2s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.nw::after{
  content:'';position:absolute;left:0;right:0;height:55%;top:0;
  background:linear-gradient(to bottom,transparent,rgba(0,130,255,.032) 50%,transparent);
  animation:nw-scan 5s linear infinite;pointer-events:none;z-index:0;
}
.nw.aura{opacity:.08;z-index:2;background:rgba(0,5,16,.3);border-color:rgba(10,38,80,.28);
  box-shadow:none;min-width:0;min-height:0;pointer-events:none;clip-path:none;}
.nw.aura.aura-hot{opacity:.22;pointer-events:auto;box-shadow:0 0 22px rgba(0,130,255,.15);}
.nw.pip{opacity:.55;z-index:10;}
.nw.focused{
  opacity:1;border-color:rgba(0,155,255,.52);
  box-shadow:0 0 0 1px rgba(0,90,200,.14),0 0 28px rgba(0,110,255,.17),
             0 12px 52px rgba(0,0,0,.92);
}

/* title bar — thin strip, no chrome */
.nw-tb{
  height:20px;
  background:linear-gradient(90deg,rgba(0,16,42,.94),rgba(0,9,26,.97));
  border-bottom:1px solid rgba(0,90,190,.13);
  display:flex;align-items:center;padding:0 6px 0 8px;gap:5px;
  cursor:grab;user-select:none;flex-shrink:0;position:relative;z-index:1;
}
.nw-tb:active{cursor:grabbing;}
.nw-tb::after{content:'';position:absolute;top:0;right:10px;
  width:10px;height:1px;background:rgba(0,170,255,.4);}
.nw-ndot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:rgba(0,70,130,.45);transition:background .4s,box-shadow .4s;}
.nw-ndot.pulsing{animation:nc-blink 1.8s ease-in-out infinite;}
.nw-title{
  flex:1;font-size:8px;font-weight:bold;
  color:rgba(0,165,255,.78);letter-spacing:2.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 0 10px rgba(0,130,255,.28);
}
.nw-snaps{display:none;}
.nw-tb-btns{display:flex;gap:2px;flex-shrink:0;}
.nw-tb-btn{
  width:14px;height:14px;border-radius:1px;
  border:1px solid rgba(0,65,120,.3);background:transparent;
  color:rgba(0,85,150,.4);cursor:pointer;font-size:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;padding:0;transition:all .12s;
}
.nw-tb-btn:hover{color:#ff5040;border-color:rgba(255,38,38,.42);background:rgba(45,0,0,.32);}
.nw-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative;z-index:1;}

/* snap zones */
.snap-zone{position:fixed;border:1px dashed rgba(0,110,240,.22);
  background:rgba(0,38,100,.04);border-radius:1px;pointer-events:none;z-index:1000;display:none;}
.snap-zone.active-snap{background:rgba(0,85,175,.13);border-color:rgba(0,155,255,.55);}

/* ── Node Card v2 — cyberpunk ─────────────────────────────────────────── */
.nc-body{padding:0;display:flex;flex-direction:column;overflow:hidden;flex:1;gap:0;}

/* status strip */
.nc-sts{display:flex;align-items:center;gap:6px;padding:4px 10px 3px;
  border-bottom:1px solid rgba(0,45,95,.28);background:rgba(0,7,20,.5);flex-shrink:0;}
.nc-sts-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background .4s,box-shadow .4s;}
.nc-sts-dot.running{background:#00ff88;box-shadow:0 0 7px #00ff88;animation:nc-blink 2s ease-in-out infinite;}
.nc-sts-dot.stopped{background:#ff3030;box-shadow:0 0 5px #ff3030;}
.nc-sts-dot.ready  {background:#ffb000;box-shadow:0 0 5px #ffb000;}
.nc-sts-dot.unknown,.nc-sts-dot.checking{background:rgba(0,75,135,.32);}
.nc-sts-lbl{flex:1;font-size:8px;color:rgba(75,150,205,.68);letter-spacing:1.5px;text-transform:uppercase;}
.nc-sts-pid{font-size:7px;color:rgba(0,85,145,.52);}

/* node profile spec strip */
.nc-prof{display:flex;align-items:center;gap:5px;padding:2px 10px 2px;
  border-bottom:1px solid rgba(0,32,68,.2);background:rgba(0,4,14,.28);flex-shrink:0;}
.nc-prof-type{font-size:7px;letter-spacing:1.5px;color:rgba(0,130,200,.55);
  background:rgba(0,22,58,.42);border:1px solid rgba(0,55,120,.25);
  padding:0 4px;height:12px;display:flex;align-items:center;flex-shrink:0;}
.nc-prof-app{font-size:7px;color:rgba(0,88,145,.46);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1;}
.nc-prof-hc{font-size:6px;color:rgba(0,60,105,.36);flex-shrink:0;letter-spacing:1px;}
.nc-prof-age{font-size:7px;color:rgba(55,130,185,.48);flex-shrink:0;margin-left:auto;min-width:52px;text-align:right;transition:color .4s;}

/* node description strip */
.nc-desc{padding:4px 10px 3px;border-bottom:1px solid rgba(0,32,68,.2);
  background:rgba(0,3,10,.2);flex-shrink:0;cursor:pointer;user-select:none;}
.nc-desc-text{font-size:8px;color:rgba(55,112,168,.52);line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:2;transition:color .15s;}
.nc-desc:hover .nc-desc-text{color:rgba(80,150,210,.72);}
.nc-desc.expanded .nc-desc-text{-webkit-line-clamp:unset;}

/* cadence picker strip (report_refresh NodeCard) */
.nc-cadence{display:flex;align-items:center;gap:3px;padding:3px 8px;
  border-bottom:1px solid rgba(0,32,65,.22);min-height:24px;flex-shrink:0;flex-wrap:wrap;}
.nc-cadence-lbl{font-size:7px;color:rgba(0,72,125,.42);letter-spacing:1.5px;margin-right:3px;flex-shrink:0;}
.nc-cad-btn{
  height:17px;padding:0 7px;
  background:rgba(0,18,45,.42);border:1px solid rgba(0,55,110,.28);border-radius:1px;
  color:rgba(0,115,185,.58);font-size:7px;font-family:inherit;
  letter-spacing:1px;cursor:pointer;transition:all .12s;
}
/* REQ-032: per-node cadence controls in NodeCard */
.nc-cdn-wrap{padding:3px 8px 4px;border-top:1px solid rgba(0,32,65,.18);background:rgba(0,8,22,.2);}
.nc-cdn-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nc-cdn-lbl{font-size:6.5px;color:rgba(0,180,255,.42);letter-spacing:1.2px;user-select:none;}
.nc-cdn-inp{width:52px;height:16px;padding:0 4px;font:7px Consolas,monospace;
  background:rgba(0,12,30,.55);border:1px solid rgba(0,55,110,.32);border-radius:1px;
  color:rgba(0,200,255,.7);outline:none;-moz-appearance:textfield;}
.nc-cdn-inp::-webkit-outer-spin-button,.nc-cdn-inp::-webkit-inner-spin-button{-webkit-appearance:none;}
.nc-cdn-inp:focus{border-color:rgba(0,130,220,.55);}
.nc-cdn-sel{height:17px;padding:0 2px;font:7px Consolas,monospace;
  background:rgba(0,12,30,.55);border:1px solid rgba(0,55,110,.32);border-radius:1px;
  color:rgba(0,200,255,.65);outline:none;cursor:pointer;}
.nc-cdn-unit{font-size:6.5px;color:rgba(0,100,160,.5);margin-left:-2px;}
.nc-cdn-btn{height:17px;padding:0 8px;background:rgba(0,20,48,.5);
  border:1px solid rgba(0,80,140,.38);border-radius:1px;
  color:rgba(0,180,255,.72);font:bold 7px Consolas,monospace;
  letter-spacing:1px;cursor:pointer;transition:all .12s;}
.nc-cdn-btn:hover{background:rgba(0,40,90,.65);color:rgba(0,220,255,.9);}
.nc-cdn-na{font-size:7px;color:rgba(0,80,130,.45);padding:2px 0;}
.nc-cad-btn:hover{border-color:rgba(0,145,255,.52);color:#00d0ff;background:rgba(0,38,95,.48);}
.nc-cad-btn.active{border-color:rgba(0,185,120,.65);color:#00e090;
  background:rgba(0,45,30,.42);box-shadow:0 0 6px rgba(0,160,100,.18);}

/* metrics grid */
.nc-metrics{
  padding:5px 10px 4px;
  display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;
  border-bottom:1px solid rgba(0,38,78,.24);flex-shrink:0;
}
.nc-kv{font-size:8px;display:flex;gap:4px;align-items:baseline;padding:1.5px 0;overflow:hidden;}
.nc-k{color:rgba(0,88,145,.62);flex-shrink:0;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nc-v{color:#4aaad0;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;transition:color .1s;}
.nc-v.changed{animation:nc-val-flash .7s ease-out forwards;}

/* quick actions */
.nc-qa{display:flex;align-items:center;gap:3px;padding:3px 8px;
  border-bottom:1px solid rgba(0,32,65,.22);min-height:24px;flex-shrink:0;overflow:hidden;}
.nc-qa-btn{
  height:17px;padding:0 7px;
  background:rgba(0,22,58,.52);border:1px solid rgba(0,75,155,.32);border-radius:1px;
  color:rgba(0,135,205,.72);font-size:7px;font-family:inherit;
  letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;
  transition:all .12s;display:flex;align-items:center;gap:3px;white-space:nowrap;
  animation:nc-qa-in .15s ease-out;
}
.nc-qa-btn:hover{background:rgba(0,52,125,.58);border-color:rgba(0,155,255,.62);color:#00d0ff;box-shadow:0 0 8px rgba(0,115,255,.18);}
.nc-qa-btn.danger:hover{background:rgba(65,0,0,.48);border-color:rgba(255,38,38,.58);color:#ff6050;}
.nc-qa-badge{background:rgba(0,65,135,.32);border-radius:8px;padding:0 3px;font-size:6px;color:rgba(0,135,215,.5);min-width:10px;text-align:center;}
.nc-qa-more{position:relative;margin-left:auto;flex-shrink:0;}
.nc-qa-more-btn{
  height:17px;padding:0 7px;background:transparent;
  border:1px solid rgba(0,55,105,.28);border-radius:1px;
  color:rgba(0,85,145,.48);font-size:7px;font-family:inherit;
  letter-spacing:1px;cursor:pointer;transition:all .15s;
}
.nc-qa-more-btn:hover,.nc-qa-more.open .nc-qa-more-btn{color:rgba(0,155,255,.72);border-color:rgba(0,115,215,.42);}
.nc-qa-menu{
  display:none;position:absolute;
  bottom:calc(100% + 4px);right:0;
  background:rgba(2,7,18,.98);
  border:1px solid rgba(0,95,195,.38);
  min-width:130px;z-index:300;padding:3px 0;
  box-shadow:0 -10px 32px rgba(0,0,0,.78),0 0 0 1px rgba(0,55,135,.08);
  transform-origin:bottom right;
}
.nc-qa-menu.open{display:block;animation:nc-expand-up .14s ease-out;}
.nc-qa-mi{
  padding:4px 12px 4px 10px;font-size:8px;
  color:rgba(0,135,205,.68);cursor:pointer;
  letter-spacing:1px;text-transform:uppercase;
  transition:padding-left .1s,background .1s,color .1s;
  white-space:nowrap;display:flex;align-items:center;gap:7px;
}
.nc-qa-mi:hover{background:rgba(0,52,125,.38);color:#00d0ff;padding-left:14px;}
.nc-qa-mi.danger:hover{color:#ff6050;background:rgba(58,0,0,.38);}
.nc-qa-mi-ct{margin-left:auto;font-size:6px;color:rgba(0,95,155,.42);}
.nc-qa-mi-sep{height:1px;background:rgba(0,48,95,.28);margin:3px 8px;}

/* maint section */
.nc-maint-section{display:none;padding:4px 10px;border-top:1px solid rgba(68,32,0,.28);}
.nc-maint-section.visible{display:block;}
.nc-maint-label{font-size:7px;color:rgba(195,108,0,.62);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;display:flex;align-items:center;gap:5px;}
.nc-maint-label::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#ff8800;box-shadow:0 0 5px #ff8800;}
.nc-btns{display:flex;gap:3px;flex-wrap:wrap;}
.nc-btn{height:20px;padding:0 8px;border-radius:1px;border:1px solid rgba(0,75,135,.32);background:rgba(0,18,48,.48);color:rgba(0,125,185,.68);cursor:pointer;font-size:8px;font-family:inherit;white-space:nowrap;transition:all .12s;}
.nc-btn:hover{color:#3affc0;border-color:rgba(0,195,155,.48);}
.nc-btn.danger:hover{color:#ff5040;border-color:rgba(255,38,28,.48);}
.nc-status-row{display:none;}
.nc-dot{display:none;}
.nc-maint-toggle{display:none;}

/* sparkline */
.nc-spark-wrap{height:22px;padding:1px 0;flex-shrink:0;border-bottom:1px solid rgba(0,28,58,.32);}
.nc-spark-cnv{width:100%;height:19px;display:block;}

/* log */
.nc-log-hd{font-size:7px;color:rgba(0,75,135,.55);letter-spacing:2.5px;
  padding:3px 10px 1px;text-transform:uppercase;
  display:flex;align-items:center;gap:5px;flex-shrink:0;}
.nc-log-hd::before{content:'';display:inline-block;width:3px;height:3px;
  border-radius:50%;background:rgba(0,115,195,.38);}
.nc-log{flex:1;overflow-y:auto;font-size:7.5px;font-family:Consolas,monospace;
  color:rgba(0,95,155,.58);background:rgba(0,3,10,.7);
  padding:3px 8px;line-height:1.5;min-height:48px;}
.nc-log::-webkit-scrollbar{width:2px;}
.nc-log::-webkit-scrollbar-thumb{background:rgba(0,55,100,.4);}
.nc-log-entry{padding:1px 0;border-bottom:1px solid rgba(0,15,32,.6);
  white-space:pre-wrap;word-break:break-all;}
.nc-log-entry.err{color:#c52828;}
.nc-log-entry.ok{color:#00a050;}
.nc-log-entry.info{color:rgba(0,95,145,.55);}
.nc-log-entry.pkt{color:rgba(0,75,115,.48);font-style:italic;}
.nc-log-src{display:inline-block;min-width:60px;margin-right:5px;font-size:7px;
  color:rgba(0,80,130,.48);text-transform:uppercase;letter-spacing:1px;vertical-align:middle;}
.lf-bg-spark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.12;z-index:0;}
.lf-body-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;}
.lf-log{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1;}
.nc-log-src{display:inline-block;min-width:64px;margin-right:5px;font-size:7px;
  color:#1a4060;text-transform:uppercase;letter-spacing:1px;vertical-align:middle;}
/* live feed window */
.lf-log{flex:1;overflow-y:auto;overflow-x:hidden;font-size:8px;font-family:Consolas,monospace;
  padding:3px 7px;display:flex;flex-direction:column;min-height:0;}
.lf-log::-webkit-scrollbar{width:2px;}
.lf-log::-webkit-scrollbar-thumb{background:#1a3a50;}
.lf-entry{padding:0;border-bottom:1px solid rgba(5,16,34,.8);
  display:flex;gap:4px;align-items:baseline;overflow:hidden;flex-shrink:0;min-height:10px;line-height:1.25;}
.lf-ts{color:rgba(42,88,120,.62);flex-shrink:0;font-size:6.5px;min-width:42px;}
.lf-type{font-weight:bold;flex-shrink:0;font-size:7px;min-width:42px;}
.lf-lbl{color:rgba(110,168,200,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;}

/* ── action items strip ───────────────────────────────────────────────── */
#action-strip{
  position:fixed;top:38px;left:0;right:64px;z-index:80;
  display:flex;flex-direction:column;
  pointer-events:none;
}
.ai-banner{
  display:flex;align-items:center;gap:10px;
  padding:5px 14px;font-size:10px;font-family:inherit;
  pointer-events:auto;
  border-bottom:1px solid rgba(0,0,0,.4);
  animation:ai-slide-in .15s ease;
}
@keyframes ai-slide-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ai-error  {background:rgba(60,8,8,.93);border-left:3px solid #f85149;}
.ai-warning{background:rgba(55,37,0,.93);border-left:3px solid #e3a020;}
.ai-title{font-weight:bold;color:#f0f0f0;white-space:nowrap;letter-spacing:.5px;}
.ai-detail{flex:1;color:#9aabbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;padding-left:6px;}
.ai-ts{color:#445;font-size:9px;white-space:nowrap;}
.ai-ack{
  padding:1px 8px;font-size:9px;font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:#8ab4d0;border-radius:2px;white-space:nowrap;margin-left:6px;
}
.ai-ack:hover{background:rgba(255,255,255,.18);color:#fff;}

/* ── C3 performance matrix window ───────────────────────────────────────── */
.pm-wrap{padding:4px 6px;overflow:auto;max-height:100%;}
.pm-tbl{width:100%;border-collapse:collapse;font-size:9px;font-family:Consolas,monospace;}
.pm-tbl thead tr:first-child th{
  background:rgba(0,30,55,.9);color:#2a8aaa;font-size:8px;
  letter-spacing:1px;padding:3px 4px;text-align:center;border-bottom:1px solid #0a3050;}
.pm-sub-hd th{color:rgba(42,138,170,.65);font-size:7.5px;padding:1px 4px;text-align:right;}
.pm-sub-hd th:first-child{text-align:left;}
.pm-tbl tbody tr{border-bottom:1px solid rgba(10,30,50,.8);}
.pm-tbl tbody tr:hover{background:rgba(10,50,80,.4);}
.pm-name{color:#5ab4d8;padding:3px 4px;font-size:9px;white-space:nowrap;}
.pm-num{text-align:right;padding:3px 5px;color:rgba(90,148,180,.70);}
.pm-num.pm-hi{color:rgba(0,198,120,.85);font-weight:bold;}
.pm-sub{color:rgba(255,200,80,.75);}
.pm-num.pm-hi.pm-sub{color:rgba(255,200,80,1);font-weight:bold;}
.pm-legend{font-size:7px;color:rgba(42,88,120,.55);text-align:right;margin-top:3px;letter-spacing:.5px;}
.pm-empty{color:rgba(42,88,120,.6);font-size:9px;padding:12px 8px;text-align:center;}

/* ── settings window sliders ───────────────────────────────────────────── */
.dc-row{display:flex;align-items:center;gap:5px;}
.dc-lbl{width:76px;flex-shrink:0;font-size:9px;color:#2a6080;}
.dc-val{width:34px;flex-shrink:0;text-align:right;font-size:9px;color:#3a9fff;font-weight:bold;}
.dc-slider{flex:1;-webkit-appearance:none;appearance:none;
  height:3px;background:#0a1c30;border-radius:2px;outline:none;cursor:pointer;
  min-width:0;}
.dc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;
  border-radius:50%;background:#1a7fff;cursor:pointer;
}
.dc-copy-btn{
  margin-top:4px;padding:4px 0;width:100%;
  background:#0a1828;border:1px solid #1a4060;border-radius:3px;
  color:#1a7fff;font-family:Consolas,monospace;font-size:9px;
  letter-spacing:1px;cursor:pointer;
}
.dc-copy-btn:hover{background:#0e2040;border-color:#2a8fff;color:#4aafff;}
/* ── windows dropdown settings section ─────────────────────────────────── */
.wd-sep{
  margin:4px 8px 2px;padding:3px 0 1px;
  border-top:1px solid #0c1e38;
  font-size:8px;color:#1a3860;letter-spacing:2px;
}
.wd-sub .wd-label{padding-left:8px;}
.wd-flyout-hdr{padding:4px 10px 3px;font-size:8px;letter-spacing:2px;color:#1a4060;border-bottom:1px solid #0c1e38;margin-bottom:2px;}
/* ── Zoom controls ─────────────────────────────────────────────────────── */
#zoom-controls{
  display:flex;flex-direction:column;gap:4px;
}
.zc-btn{
  width:32px;height:32px;
  background:#0c1e38;border:1px solid #1a4060;border-radius:4px;
  color:#3a8fff;font-family:Consolas,monospace;font-size:14px;font-weight:bold;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  user-select:none;
}
.zc-btn:hover{background:#112840;border-color:#2a8fff;color:#6abfff;}
.zc-btn:active{background:#1a3860;}

/* ── Roadmap window ─────────────────────────────────────────────────────── */
.rm-body{flex:1;overflow-y:auto;padding:6px 10px 8px;display:flex;flex-direction:column;gap:5px;}
.rm-body::-webkit-scrollbar{width:3px;}
.rm-body::-webkit-scrollbar-thumb{background:#1a3a50;}
.rm-item{border:1px solid #0d2038;border-radius:4px;padding:6px 8px;background:#060e1c;
  display:flex;flex-direction:column;gap:3px;transition:border-color .15s;}
.rm-item:hover{border-color:#1a4060;}
.rm-item.pri-critical{border-left:3px solid #ff4040;}
.rm-item.pri-high    {border-left:3px solid #ff9000;}
.rm-item.pri-medium  {border-left:3px solid #3a9fff;}
.rm-item.pri-low     {border-left:3px solid #1a5080;}
.rm-top{display:flex;align-items:center;gap:6px;}
.rm-id{font-size:8px;color:#1a4060;flex-shrink:0;min-width:84px;letter-spacing:.5px;}
.rm-title{font-size:9px;color:#7ab8d0;font-weight:bold;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rm-badges{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.rm-badge{font-size:8px;padding:1px 5px;border-radius:2px;font-weight:bold;
  letter-spacing:.5px;border:1px solid rgba(255,255,255,.06);}
.rm-badge.st-submitted  {background:rgba(0,100,200,.2);color:#3a9fff;}
.rm-badge.st-in-progress{background:rgba(200,120,0,.18);color:#ffa020;}
.rm-badge.st-completed  {background:rgba(0,140,60,.18);color:#00cc66;}
.rm-badge.st-rejected   {background:rgba(100,20,20,.18);color:#aa4040;}
.rm-badge.cat-bug       {background:rgba(220,40,40,.15);color:#ff5555;}
.rm-badge.cat-feature   {background:rgba(0,80,180,.15);color:#5590ff;}
.rm-badge.cat-improvement{background:rgba(80,0,160,.15);color:#9944ff;}
.rm-badge.cat-integration{background:rgba(0,140,180,.15);color:#00bbff;}
.rm-pri-sel{height:18px;background:#090f1c;border:1px solid #1a3a60;color:#3a9fff;
  font-size:8px;font-family:inherit;border-radius:3px;padding:0 3px;cursor:pointer;
  transition:border-color .15s;}
.rm-pri-sel:hover{border-color:#2a8fff;}
.rm-desc{font-size:8px;color:#2a5070;line-height:1.4;max-height:40px;overflow:hidden;
  text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.rm-footer{display:flex;align-items:center;gap:8px;font-size:8px;color:#1a4060;margin-top:2px;}
.rm-footer span{color:#2a6080;}
/* check strip in topbar */
#check-strip{display:flex;gap:4px;align-items:center;flex-shrink:0;
  border-left:1px solid #0c1e38;padding-left:10px;}
.chk-pill{display:flex;align-items:center;gap:2px;font-size:8px;letter-spacing:.5px;
  padding:1px 4px;border-radius:2px;font-weight:bold;cursor:default;
  border:1px solid rgba(255,255,255,.05);transition:background .3s,border-color .3s;}
.chk-pill.ok  {background:rgba(0,200,80,.12);border-color:rgba(0,220,80,.25);color:#00cc55;}
.chk-pill.fail{background:rgba(200,30,30,.14);border-color:rgba(255,60,60,.28);color:#cc3333;}
.chk-pill.pend{background:rgba(20,40,70,.2);border-color:rgba(40,80,140,.15);color:#1a3860;}
.chk-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;}
.chk-pill.ok   .chk-dot{background:#00cc55;box-shadow:0 0 4px #00cc55;}
.chk-pill.fail .chk-dot{background:#cc3333;}
.chk-pill.pend .chk-dot{background:#1a3860;}

/* ── Protocol panel + glow overlay (REQ-039 / REQ-040 / REQ-041) ────────── */
#right-panel{
  position:fixed;right:14px;top:46px;
  display:flex;flex-direction:column;gap:18px;z-index:150;align-items:center;
}
#proto-panel{
  display:flex;flex-direction:column;gap:18px;
  padding-bottom:12px;border-bottom:1px solid #1a3a60;
}
#zoom-controls{
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
#proto-glow-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1;
  border:3px solid transparent;opacity:0;transition:opacity .5s;
}
#proto-glow-overlay.active-rebaseline{
  opacity:1;border-color:rgba(255,153,0,.6);
  box-shadow:inset 0 0 80px rgba(255,100,0,.10);
  background:radial-gradient(ellipse at center,rgba(255,80,0,.05) 0%,transparent 70%);
  animation:glow-pulse-amber 1.5s infinite alternate;
}
#proto-glow-overlay.active-throughput{
  opacity:1;border-color:rgba(0,220,255,.6);
  box-shadow:inset 0 0 80px rgba(0,180,255,.10);
  background:radial-gradient(ellipse at center,rgba(0,140,255,.05) 0%,transparent 70%);
  animation:glow-pulse-cyan 1.5s infinite alternate;
}
@keyframes glow-pulse-amber{
  from{box-shadow:inset 0 0 30px rgba(255,120,0,.05),0 0 15px rgba(255,120,0,.10);}
  to  {box-shadow:inset 0 0 100px rgba(255,120,0,.15),0 0 60px rgba(255,120,0,.25);}
}
@keyframes glow-pulse-cyan{
  from{box-shadow:inset 0 0 30px rgba(0,180,255,.05),0 0 15px rgba(0,220,255,.10);}
  to  {box-shadow:inset 0 0 100px rgba(0,180,255,.15),0 0 60px rgba(0,220,255,.25);}
}
.proto-btn{
  width:36px;height:50px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  border:2px solid #1a3a60;border-radius:8px;
  background:rgba(10,20,40,.8);cursor:pointer;
  font-family:inherit;user-select:none;
  transition:border-color .15s,background .15s,box-shadow .2s;
}
.proto-btn[data-color="amber"]{color:#cc7700;}
.proto-btn[data-color="cyan"] {color:#008899;}
.proto-btn[data-color="red"]  {color:#993333;}
.proto-btn[data-color="amber"]:hover{border-color:#ff9900;color:#ffaa20;background:rgba(40,20,0,.8);}
.proto-btn[data-color="cyan"]:hover {border-color:#00ccff;color:#40ddff;background:rgba(0,20,40,.8);}
.proto-btn[data-color="red"]:hover  {border-color:#ff4444;color:#ff6666;background:rgba(40,0,0,.8);}
.proto-btn.running[data-color="amber"]{border-color:#ff9900;color:#ffcc44;box-shadow:0 0 14px rgba(255,153,0,.5);animation:proto-pulse-amber .8s infinite alternate;}
.proto-btn.running[data-color="cyan"] {border-color:#00ccff;color:#44eeff;box-shadow:0 0 14px rgba(0,204,255,.5);animation:proto-pulse-cyan  .8s infinite alternate;}
.proto-btn.running[data-color="red"]  {border-color:#ff4444;color:#ff6666;box-shadow:0 0 14px rgba(255,60,60,.5);animation:proto-pulse-red   .8s infinite alternate;}
.proto-btn.done[data-color="amber"]   {border-color:#996600;color:#cc8800;}
.proto-btn.done[data-color="cyan"]    {border-color:#006688;color:#009966;}
.proto-btn.done[data-color="red"]     {border-color:#662222;color:#994444;}
.proto-btn.error{border-color:#cc3333;color:#ff4444;}
.proto-btn.unavailable{opacity:.35;cursor:not-allowed;border-color:#333;color:#556;}
@keyframes proto-pulse-amber{from{box-shadow:0 0 6px rgba(255,153,0,.3);}to{box-shadow:0 0 28px rgba(255,153,0,.8);}}
@keyframes proto-pulse-cyan {from{box-shadow:0 0 6px rgba(0,200,255,.3);}to{box-shadow:0 0 28px rgba(0,200,255,.8);}}
@keyframes proto-pulse-red  {from{box-shadow:0 0 6px rgba(255,60,60,.3);}to{box-shadow:0 0 28px rgba(255,60,60,.8);}}
.proto-icon{font-size:14px;line-height:1;}
.proto-label{font-size:6px;font-weight:bold;letter-spacing:.5px;}
/* ── UI scale control ───────────────────────────────────────────────────── */
#ui-scale-ctrl{
  position:fixed;right:14px;bottom:76px;z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(5,10,20,.7);border:1px solid #1a3a60;border-radius:3px;
  padding:3px 4px;
}
.usc-btn{
  width:22px;height:16px;border:1px solid #1a4060;border-radius:2px;
  background:#0a1828;color:#3a8fff;font-size:11px;font-family:Consolas,monospace;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
  padding:0;user-select:none;
}
.usc-btn:hover{background:#112840;border-color:#2a8fff;color:#6abfff;}
#usc-pct{font-size:7px;color:#1a5090;font-family:Consolas,monospace;letter-spacing:.5px;white-space:nowrap;}
/* ── Protocol toast notification ────────────────────────────────── */
#proto-toast{
  position:fixed;top:52px;left:50%;transform:translateX(-50%) translateY(-12px);
  z-index:8000;pointer-events:none;
  background:rgba(6,14,28,.92);border:1px solid #1a3a60;border-radius:4px;
  padding:7px 16px;font-family:Consolas,monospace;font-size:10px;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  opacity:0;transition:opacity .25s,transform .25s;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
#proto-toast.pt-show{opacity:1;transform:translateX(-50%) translateY(0);}
#proto-toast.pt-done  {border-color:rgba(0,180,80,.5);}
#proto-toast.pt-error {border-color:rgba(200,40,40,.5);}
#proto-toast.pt-run   {border-color:rgba(255,153,0,.45);}
.pt-icon{font-size:13px;flex-shrink:0;}
.pt-done  .pt-icon{color:#00cc66;}
.pt-error .pt-icon{color:#ff4444;}
.pt-run   .pt-icon{color:#ffaa20;}
.pt-msg{color:#7ab8d0;max-width:480px;overflow:hidden;text-overflow:ellipsis;}
.pt-sub{color:#1a5070;font-size:8px;max-width:340px;overflow:hidden;text-overflow:ellipsis;}
/* urgency badge on canvas nodes — drawn by JS as star burst, no CSS needed */

/* ── NEXUS BOOT SCREEN ───────────────────────────────────────────────────── */
#nexus-boot{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;
  background:#050c16;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Consolas','Courier New',monospace;
  transition:opacity .6s ease;
}
#nexus-boot.nb-gone{display:none;}
#nexus-boot::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,55,115,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,55,115,.06) 1px,transparent 1px);
  background-size:44px 44px;
}
#nexus-boot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,40,100,.18) 0%,transparent 70%);
}
/* ── logo ─────────────────────────────────────────────────────────────── */
#nb-logo{
  height:224px;width:auto;max-width:960px;
  object-fit:contain;margin-bottom:0;z-index:1;
  mix-blend-mode:screen;
  animation:nb-logo-glow 3s ease-in-out infinite;
}
@keyframes nb-logo-glow{
  0%,100%{filter:drop-shadow(0 0 18px rgba(26,127,255,.55)) drop-shadow(0 0 40px rgba(26,127,255,.20));}
  50%{filter:drop-shadow(0 0 38px rgba(74,191,255,.90)) drop-shadow(0 0 80px rgba(74,191,255,.38));}
}
/* ── radar canvas ──────────────────────────────────────────────────────── */
#nb-radar{
  position:relative;margin-bottom:20px;flex-shrink:0;z-index:1;
  width:240px;height:240px;
}
#nb-radar-canvas{
  position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:50%;
}
@keyframes nb-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* ── text ──────────────────────────────────────────────────────────────── */
#nb-sub{
  font-size:8px;letter-spacing:5px;color:#1a3e6a;margin-bottom:20px;z-index:1;
}
/* ── step list ─────────────────────────────────────────────────────────── */
#nb-steps{
  display:flex;flex-direction:column;gap:7px;margin-bottom:20px;
  width:300px;z-index:1;
}
.nb-step{
  display:flex;align-items:center;gap:10px;font-size:9px;
  padding:5px 10px 5px 8px;
  border:1px solid rgba(0,50,105,.3);border-radius:3px;
  background:rgba(0,10,26,.45);
  transition:border-color .35s,background .35s;
}
.nb-step.nb-active{
  border-color:rgba(0,120,255,.4);background:rgba(0,28,72,.4);
}
.nb-step.nb-done{
  border-color:rgba(0,190,75,.3);background:rgba(0,38,18,.35);
}
.nb-icon{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(0,65,130,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;flex-shrink:0;color:rgba(0,90,160,.4);
  transition:border-color .35s,color .35s,background .35s;
}
.nb-step.nb-active .nb-icon{
  border-color:rgba(0,155,255,.65);color:#3aafff;
  animation:nb-spin 1.4s linear infinite;
}
.nb-step.nb-done .nb-icon{
  border-color:rgba(0,195,75,.7);background:rgba(0,75,28,.4);
  color:#00cc55;animation:none;font-size:10px;
}
.nb-label{
  flex:1;letter-spacing:1px;
  color:rgba(50,105,165,.5);transition:color .35s;
}
.nb-step.nb-active .nb-label{color:#4a90bb;}
.nb-step.nb-done   .nb-label{color:#2a8050;}
.nb-tag{
  font-size:8px;letter-spacing:1.5px;
  color:rgba(0,70,130,.35);transition:color .35s;
  white-space:nowrap;
}
.nb-step.nb-active .nb-tag{color:rgba(0,150,255,.55);}
.nb-step.nb-done   .nb-tag{color:rgba(0,180,70,.6);}
/* ── progress bar ──────────────────────────────────────────────────────── */
#nb-bar-wrap{
  width:300px;height:2px;background:rgba(0,35,80,.4);
  border-radius:1px;overflow:hidden;margin-bottom:14px;z-index:1;
}
#nb-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,#0a3870,#1a8fff,#3affc0);
  border-radius:1px;transition:width .5s ease;
}
#nb-status-line{
  font-size:9px;color:#1a3c66;letter-spacing:1.5px;min-height:13px;z-index:1;
}
#nb-build-lbl{
  position:absolute;bottom:14px;right:16px;
  font-size:8px;color:#0e1e38;letter-spacing:1px;
}
#nb-corner-tl,#nb-corner-tr,#nb-corner-bl,#nb-corner-br{
  position:absolute;width:20px;height:20px;
  border-color:rgba(0,80,160,.25);border-style:solid;
}
#nb-corner-tl{top:16px;left:16px;border-width:1px 0 0 1px;}
#nb-corner-tr{top:16px;right:16px;border-width:1px 1px 0 0;}
#nb-corner-bl{bottom:16px;left:16px;border-width:0 0 1px 1px;}
#nb-corner-br{bottom:16px;right:16px;border-width:0 1px 1px 0;}
</style>

<!-- ── REQ-042: SKIN OVERRIDES ─────────────────────────────────────────── -->
<style id="nexus-skin">
/* default: dark-cyan — base CSS already correct */

/* ── DARK AMBER ── */
html.skin-amber .title,
html.skin-amber .nw-title{color:#ff9f1a;text-shadow:0 0 10px rgba(255,140,0,.28);}
html.skin-amber .metrics .m span{color:#ff9f3a;}
html.skin-amber #tb-profile{color:#ff9f3a;border-color:#5a3010;}
html.skin-amber #tl-now{color:#b06820;}
html.skin-amber #tl-fill{background:#6a3810;}
html.skin-amber #tl-thumb{background:#ff9f20;border-color:#200a00;}
html.skin-amber .dc-copy-btn{color:#ff9f1a;border-color:#4a2a10;}
html.skin-amber .dc-copy-btn:hover{color:#ffb040;border-color:#ff9f1a;}
html.skin-amber .dc-val{color:#ff9f3a;}
html.skin-amber .spd:hover{color:#ff9f3a;border-color:#9a4a10;}
html.skin-amber .spd.active{color:#ffb050;border-color:#8a3a10;background:#201000;}
html.skin-amber .nc-v{color:#ffaa40;}
html.skin-amber .nc-qa-btn{color:rgba(220,140,0,.72);border-color:rgba(200,100,0,.32);}
html.skin-amber .nc-qa-btn:hover{color:#ffb040;border-color:rgba(255,150,0,.62);box-shadow:0 0 8px rgba(255,115,0,.18);}
html.skin-amber .nc-btn:hover{color:#ffaa40;border-color:rgba(255,160,40,.48);}
html.skin-amber .zc-btn{color:#ff9f3a;border-color:#5a3010;background:#100800;}
html.skin-amber .zc-btn:hover{color:#ffb040;border-color:#ff9f3a;background:#201000;}
html.skin-amber .wd-dot.open-w{background:#ff9f20;}
html.skin-amber .wd-label.open-w{color:#ffb050;}
html.skin-amber .nw.focused{border-color:rgba(255,150,0,.52);box-shadow:0 0 0 1px rgba(200,90,0,.14),0 0 28px rgba(255,110,0,.17),0 12px 52px rgba(0,0,0,.92);}
html.skin-amber .sp-head{color:#ff9f1a;}
html.skin-amber #sp-toggle,html.skin-amber #sp-toggle:hover{color:#ff9f3a;}
html.skin-amber .nc-k{color:rgba(180,100,0,.62);}
html.skin-amber .tb-badge.run{background:rgba(180,80,0,.18);border-color:rgba(255,130,0,.3);color:#ff9f3a;}
html.skin-amber .tb-badge.run .bd-dot{background:#ff9f20;}
html.skin-amber #rdot{background:#ffa020;}
html.skin-amber .win-launcher-btn:hover{color:#ffb040;}

/* ── DARK GREEN ── */
html.skin-green .title,
html.skin-green .nw-title{color:#1aff5a;text-shadow:0 0 10px rgba(0,220,80,.28);}
html.skin-green .metrics .m span{color:#3aff7a;}
html.skin-green #tb-profile{color:#3aff7a;border-color:#0a4020;}
html.skin-green #tl-now{color:#12a040;}
html.skin-green #tl-fill{background:#0a3818;}
html.skin-green #tl-thumb{background:#20ff60;border-color:#001a00;}
html.skin-green .dc-copy-btn{color:#1aff5a;border-color:#0a3010;}
html.skin-green .dc-copy-btn:hover{color:#40ff80;border-color:#1aff5a;}
html.skin-green .dc-val{color:#3aff7a;}
html.skin-green .spd:hover{color:#3aff7a;border-color:#0a6028;}
html.skin-green .spd.active{color:#50ff90;border-color:#0a5020;background:#001408;}
html.skin-green .nc-v{color:#40ffaa;}
html.skin-green .nc-qa-btn{color:rgba(0,200,80,.72);border-color:rgba(0,160,60,.32);}
html.skin-green .nc-qa-btn:hover{color:#40ff80;border-color:rgba(0,220,80,.62);box-shadow:0 0 8px rgba(0,180,60,.18);}
html.skin-green .nc-btn:hover{color:#40ff80;border-color:rgba(40,255,80,.48);}
html.skin-green .zc-btn{color:#3aff7a;border-color:#0a4020;background:#001408;}
html.skin-green .zc-btn:hover{color:#50ff90;border-color:#3aff7a;background:#002010;}
html.skin-green .wd-dot.open-w{background:#20ff60;}
html.skin-green .wd-label.open-w{color:#50ff90;}
html.skin-green .nw.focused{border-color:rgba(0,220,80,.52);box-shadow:0 0 0 1px rgba(0,160,60,.14),0 0 28px rgba(0,180,60,.17),0 12px 52px rgba(0,0,0,.92);}
html.skin-green .sp-head{color:#1aff5a;}
html.skin-green #sp-toggle,html.skin-green #sp-toggle:hover{color:#3aff7a;}
html.skin-green .nc-k{color:rgba(0,160,60,.62);}
html.skin-green .tb-badge.run{background:rgba(0,140,40,.18);border-color:rgba(0,220,80,.3);color:#3aff7a;}
html.skin-green .tb-badge.run .bd-dot{background:#20ff60;}
html.skin-green #rdot{background:#20ff60;}

/* ── HIGH CONTRAST ── */
html.skin-hc .title,
html.skin-hc .nw-title{color:#ffffff;text-shadow:none;}
html.skin-hc .metrics .m span{color:#e0e0e0;}
html.skin-hc #tb-profile{color:#e0e0e0;border-color:#555;}
html.skin-hc #topbar{background:#000;border-bottom-color:#666;}
html.skin-hc #tl-now{color:#999;}
html.skin-hc #tl-fill{background:#555;}
html.skin-hc #tl-thumb{background:#e0e0e0;border-color:#000;}
html.skin-hc .dc-val{color:#e0e0e0;}
html.skin-hc .spd:hover{color:#ffffff;border-color:#888;}
html.skin-hc .spd.active{color:#ffffff;border-color:#aaa;background:#111;}
html.skin-hc .nc-v{color:#e0e0e0;}
html.skin-hc .nc-qa-btn{color:rgba(200,200,200,.72);border-color:rgba(180,180,180,.32);}
html.skin-hc .nc-qa-btn:hover{color:#fff;border-color:rgba(255,255,255,.62);}
html.skin-hc .nc-btn:hover{color:#fff;border-color:rgba(255,255,255,.48);}
html.skin-hc .zc-btn{color:#e0e0e0;border-color:#555;background:#111;}
html.skin-hc .zc-btn:hover{color:#fff;border-color:#aaa;background:#222;}
html.skin-hc .nw{border-color:rgba(180,180,180,.4);}
html.skin-hc .nw.focused{border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 12px 50px rgba(0,0,0,.9);}
html.skin-hc .wd-dot.open-w{background:#e0e0e0;}
html.skin-hc .wd-label.open-w{color:#fff;}
html.skin-hc .tb-badge.run{background:rgba(100,100,100,.25);border-color:rgba(200,200,200,.45);color:#e0e0e0;}
html.skin-hc .tb-badge.run .bd-dot{background:#e0e0e0;}
html.skin-hc #rdot{background:#ffffff;}
html.skin-hc .sp-head{color:#e0e0e0;}
html.skin-hc #sp-toggle,html.skin-hc #sp-toggle:hover{color:#e0e0e0;}
html.skin-hc .nw-title{color:rgba(230,230,230,.9);}

/* ── NODE NAVIGATOR window ── */
#nw-body-node-nav{padding:0;display:flex;flex-direction:column;}
#nn-search{background:rgba(0,0,0,.35);border:1px solid #1a3050;color:#cde;font-size:11px;padding:4px 8px;margin:6px;border-radius:3px;outline:none;}
#nn-search:focus{border-color:#2a90ff;}
#nn-list{flex:1;overflow-y:auto;padding:0 4px 8px;}
.nn-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:3px;cursor:pointer;font-size:10px;color:#7ab;letter-spacing:.04em;transition:background .12s;}
.nn-item:hover{background:rgba(0,150,255,.10);color:#cde;}
.nn-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.nn-label{flex:1;font-weight:600;}
.nn-sub{color:#3a6080;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
html.skin-wh40k body{background:#020a02;}
html.skin-wh40k #topbar{background:#040f04;border-bottom-color:#1a3a12;}
html.skin-wh40k .title,
html.skin-wh40k .nw-title{color:#44bb22;text-shadow:0 0 10px rgba(50,180,20,.4);}
html.skin-wh40k .metrics .m span{color:#66dd33;}
html.skin-wh40k #tb-profile{color:#66dd33;border-color:#1a4410;}
html.skin-wh40k #tl-now{color:#2a7a18;}
html.skin-wh40k #tl-fill{background:#0a2a08;}
html.skin-wh40k #tl-thumb{background:#44bb22;border-color:#021000;}
html.skin-wh40k .dc-copy-btn{color:#cc6600;border-color:#3a2008;}
html.skin-wh40k .dc-copy-btn:hover{color:#ff8800;border-color:#cc6600;}
html.skin-wh40k .dc-val{color:#66dd33;}
html.skin-wh40k .spd:hover{color:#66dd33;border-color:#2a5a10;}
html.skin-wh40k .spd.active{color:#88ff44;border-color:#2a5a00;background:#041400;}
html.skin-wh40k .nc-v{color:#44bb22;}
html.skin-wh40k .nc-qa-btn{color:rgba(80,200,40,.72);border-color:rgba(40,140,10,.32);}
html.skin-wh40k .nc-qa-btn:hover{color:#88ff44;border-color:rgba(60,180,20,.62);box-shadow:0 0 8px rgba(40,160,0,.22);}
html.skin-wh40k .nc-btn:hover{color:#ff8800;border-color:rgba(200,100,0,.48);}
html.skin-wh40k .zc-btn{color:#66dd33;border-color:#1a4410;background:#021000;}
html.skin-wh40k .zc-btn:hover{color:#aaffaa;border-color:#66dd33;background:#041800;}
html.skin-wh40k .nw{border-color:rgba(40,120,20,.45);background:rgba(2,10,2,.92);}
html.skin-wh40k .nw.focused{border-color:rgba(60,180,30,.65);box-shadow:0 0 0 1px rgba(40,140,20,.2),0 0 28px rgba(40,160,20,.18),0 12px 52px rgba(0,0,0,.95);}
html.skin-wh40k .nw-title{color:rgba(100,220,60,.9);}
html.skin-wh40k .nw-titlebar{background:rgba(4,14,2,.95);border-bottom-color:#0e2a0a;}
html.skin-wh40k .wd-dot.open-w{background:#cc6600;}
html.skin-wh40k .wd-label.open-w{color:#ff9933;}
html.skin-wh40k .wd-cat-row:hover,.wd-cat-row.cat-active{background:rgba(40,120,20,.25);color:#66dd33;}
html.skin-wh40k .tb-badge.run{background:rgba(30,100,10,.2);border-color:rgba(60,180,20,.35);color:#44bb22;}
html.skin-wh40k .tb-badge.run .bd-dot{background:#44bb22;}
html.skin-wh40k #rdot{background:#44bb22;box-shadow:0 0 6px rgba(50,180,20,.8);}
html.skin-wh40k .sp-head{color:#44bb22;}
html.skin-wh40k #sp-toggle,html.skin-wh40k #sp-toggle:hover{color:#66dd33;}
html.skin-wh40k #win-launcher-btn{color:#2a5a10;border-color:#1a3a0a;background:#021000;}
html.skin-wh40k #win-launcher-btn:hover,html.skin-wh40k #win-launcher-btn.open{color:#88ff44;border-color:#44bb22;background:#041800;}
html.skin-wh40k #win-dropdown,html.skin-wh40k #wd-flyout{background:rgba(2,10,2,.98);border-color:#1a3a0a;}
/* orange accent — interactive controls */
html.skin-wh40k .chk-pill.ok .chk-dot{background:#44bb22;}
html.skin-wh40k .chk-pill.fail .chk-dot{background:#cc2200;}
html.skin-wh40k .chk-pill.fail{color:#cc2200;border-color:#441100;}
/* blue accent — informational / inactive badge states */
html.skin-wh40k .tb-badge{border-color:#1a3a5a;color:#336699;}
html.skin-wh40k .tb-badge .bd-dot{background:#336699;}
/* red accent — error / blocked states override */
html.skin-wh40k .tb-badge.err{background:rgba(120,10,10,.2);border-color:rgba(200,20,10,.35);color:#cc2200;}
html.skin-wh40k .tb-badge.err .bd-dot{background:#cc2200;}
</style>
<script type="text/javascript" data-name="TokenSigning" data-by="Web-eID extension">(function pageScript() {
        let hasDeprecationWarningDisplayed = false;
        const eidPromises = {};
        window.addEventListener("message", function (event) {
            if (event.source !== window)
                return;
            if (event.data.src && (event.data.src === "background.js")) {
                console.log("Page received: ");
                console.log(event.data);
                if (event.data.nonce) {
                    const p = eidPromises[event.data.nonce];
                    if (event.data.result === "ok") {
                        if (event.data.signature !== undefined) {
                            p.resolve({ hex: event.data.signature });
                        }
                        else if (event.data.version !== undefined) {
                            p.resolve(event.data.extension + "/" + event.data.version);
                        }
                        else if (event.data.cert !== undefined) {
                            p.resolve({ hex: event.data.cert });
                        }
                        else {
                            console.log("No idea how to handle message");
                            console.log(event.data);
                        }
                    }
                    else {
                        p.reject(new Error(event.data.result));
                    }
                    delete eidPromises[event.data.nonce];
                }
                else {
                    console.log("No nonce in event msg");
                }
            }
        }, false);
        function nonce() {
            let val = "";
            const hex = "abcdefghijklmnopqrstuvwxyz0123456789";
            for (let i = 0; i < 16; i++)
                val += hex.charAt(Math.floor(Math.random() * hex.length));
            return val;
        }
        function messagePromise(msg) {
            if (!hasDeprecationWarningDisplayed) {
                console.warn("TokenSigning API is deprecated. Please consider switching to the new Web-eID library.");
                hasDeprecationWarningDisplayed = true;
            }
            return new Promise(function (resolve, reject) {
                window.postMessage(msg, "*");
                eidPromises[msg.nonce] = { resolve, reject };
            });
        }
        window.TokenSigning = class TokenSigning {
            getCertificate(options) {
                const msg = {
                    src: "page.js",
                    nonce: nonce(),
                    type: "CERT",
                    lang: options.lang,
                    filter: options.filter,
                };
                console.log("getCertificate()");
                return messagePromise(msg);
            }
            sign(cert, hash, options) {
                const msg = {
                    src: "page.js",
                    nonce: nonce(),
                    type: "SIGN",
                    cert: cert.hex,
                    hash: hash.hex,
                    hashtype: hash.type,
                    lang: options.lang,
                    info: options.info,
                };
                console.log("sign()");
                return messagePromise(msg);
            }
            getVersion() {
                const msg = {
                    src: "page.js",
                    nonce: nonce(),
                    type: "VERSION",
                };
                console.log("getVersion()");
                return messagePromise(msg);
            }
        };
    })();</script></head>
<body>

<!-- ── NEXUS BOOT SCREEN ───────────────────────────────────────────────── -->
<div id="nexus-boot">
  <div id="nb-corner-tl"></div>
  <div id="nb-corner-tr"></div>
  <div id="nb-corner-bl"></div>
  <div id="nb-corner-br"></div>
  <img id="nb-logo" src="/static/logo.png" alt="NEXUS" onerror="this.style.display='none'" style="display: none;">
  <div id="nb-sub">PIPELINE OPERATIONS CENTER</div>
  <div id="nb-radar">
    <canvas id="nb-radar-canvas" width="480" height="480"></canvas>
  </div>
  <div id="nb-steps">
    <div class="nb-step nb-done" id="nbs-health">
      <div class="nb-icon">✓</div>
      <span class="nb-label">BACKEND HEALTH CHECK</span>
      <span class="nb-tag">OK</span>
    </div>
    <div class="nb-step nb-done" id="nbs-profile">
      <div class="nb-icon">✓</div>
      <span class="nb-label">PIPELINE PROFILE</span>
      <span class="nb-tag">OK</span>
    </div>
    <div class="nb-step nb-done" id="nbs-data">
      <div class="nb-icon">✓</div>
      <span class="nb-label">PIPELINE DATA</span>
      <span class="nb-tag">OK</span>
    </div>
  </div>
  <div id="nb-bar-wrap"><div id="nb-bar" style="width: 100%;"></div></div>
  <div id="nb-status-line" style="color: rgb(42, 144, 96);">NEXUS ONLINE</div>
  <div id="nb-build-lbl">BUILD 20260225.002</div>
</div>

<!-- ── TOP BAR ───────────────────────────────────────────────────────────── -->
<div id="topbar">
  <img id="tb-logo" src="/static/logo.png" alt="Nexus">
  <div class="metrics">
    <div class="m">DB <span id="m-jobs">14,587</span></div>
    <div class="m">STUBS <span id="m-stubs">2,831</span></div>
    <div class="m">PAGES <span id="m-pgs">0</span>/<span id="m-tot">0</span></div>
    <div class="m">WS CAPS <span id="m-caps">—</span></div>
    <div class="m">DESC <span id="m-desc">73.6%</span></div>
    <div class="m">WATCHDOG <span id="m-wd" style="color:#00ff88">ALIVE</span></div>
    <div class="m" id="m-loss-item" title="Assigned jobs lost to expiry — click to open detail" style="cursor: pointer; border-left: 1px solid rgb(12, 32, 64); padding-left: 10px;">LOST <span id="m-loss" style="color:#ff5555;">485 / ~4604.0K PLN</span></div>
    <div class="m" id="m-offer-item" title="Operator submissions quoted value — click to open detail" style="cursor: pointer; border-left: 1px solid rgb(12, 32, 64); padding-left: 6px;">OFFER <span id="m-offer" style="color:#00cc66;">34 / 118.8K PLN</span></div>
  </div>
  <div class="m-perf">
    <div>JSON <span id="m-json-mb">13.25</span>MB</div>
    <div>DB <span id="m-db-mb">21.97</span>MB</div>
    <div>API <span id="m-api-ms">1476</span>ms</div>
    <canvas id="perf-spark" width="60" height="14" title="API collect time trend (last 20 polls)"></canvas>
  </div>
  <div id="tb-health">
    <div class="tb-badge run" id="badge-stub"><div class="bd-dot"></div><span id="badge-stub-lbl">STUB RUN</span></div>
    <div class="tb-badge stop" id="badge-ws"><div class="bd-dot"></div><span id="badge-ws-lbl">WS STOP</span></div>
    <div class="tb-badge run" id="badge-extract"><div class="bd-dot"></div><span id="badge-extract-lbl">EXT RUN</span></div>
    <div class="tb-badge run" id="badge-wd"><div class="bd-dot"></div><span id="badge-wd-lbl">WD ALIVE</span></div>
    <span id="tb-age">—</span>
  </div>
  <div id="check-strip">
    <!-- populated by IntegrationChecks module -->
  <div class="chk-pill ok" title="WebShadow MCP: port 40001 open"><span class="chk-dot"></span>MCP</div><div class="chk-pill ok" title="SQLite DB: 14587 jobs"><span class="chk-dot"></span>DB</div><div class="chk-pill ok" title="Master JSON: 14764 jobs"><span class="chk-dot"></span>JSON</div><div class="chk-pill fail" title="Stub Collector: no log file"><span class="chk-dot"></span>STUB</div><div class="chk-pill fail" title="Retry Queue: 723 pending, 731 EXHAUSTED â€” need manual review"><span class="chk-dot"></span>RETRY</div><div class="chk-pill fail" title="Desc Capture: stale 22851s"><span class="chk-dot"></span>DESC</div><div class="chk-pill ok" title="Enrichment: live (21s ago)"><span class="chk-dot"></span>ENRICH</div><div class="chk-pill ok" title="Classifier: live (50s ago)"><span class="chk-dot"></span>CLASS</div><div class="chk-pill ok" title="Offer Gen: live (81s ago)"><span class="chk-dot"></span>OFFER</div></div>
  <div id="tb-right">
    <span id="tb-profile" title="Profile: Freelance Pipeline
Parent: sales_funnel_processing
ID: freelance_pipeline
v1.0.0">Freelance Pipeline</span>
    <select id="tb-profile-sel" title="Switch profile" style="display:none;height:18px;font-size:8px;font-family:inherit;letter-spacing:1px;background:#090f1c;color:#3a9fff;border:1px solid #1a3a60;border-radius:2px;padding:0 4px;cursor:pointer;"></select>
    <div id="win-launcher">
      <button id="win-launcher-btn" title="Open / restore windows">WINDOWS</button>
    </div>
    <span id="tb-ws-ver" title="">srv 1.0.0</span>
    <span id="tb-build">B.20260227.001</span>
    <div id="tb-gpu" title="Google Inc. (NVIDIA) — ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0), or similar" class="gpu-on">GPU</div>
    <div id="rdot" class=""></div>
  </div>
</div>

<!-- ── WIN DROPDOWN — body-level to escape topbar overflow:hidden ───────── -->
<div id="win-dropdown"><div class="wd-cat-row" data-cat="MONITORING"><span class="wd-cat-label">MONITORING</span><span class="wd-cat-count has-open">1</span><span class="wd-cat-arrow">►</span></div><div class="wd-cat-row" data-cat="ANALYTICS"><span class="wd-cat-label">ANALYTICS</span><span class="wd-cat-count "></span><span class="wd-cat-arrow">►</span></div><div class="wd-cat-row" data-cat="TOOLS"><span class="wd-cat-label">TOOLS</span><span class="wd-cat-count "></span><span class="wd-cat-arrow">►</span></div><div class="wd-cat-row" data-cat="SETTINGS"><span class="wd-cat-label">SETTINGS</span><span class="wd-cat-count "></span><span class="wd-cat-arrow">►</span></div></div>
<!-- ── ACTION ITEMS STRIP — pinned blocker banners below topbar ────────── -->
<div id="action-strip"></div>

<!-- ── PROTO GLOW OVERLAY + CANVAS (REQ-039/040/041) ───────────────────── -->
<div id="proto-glow-overlay"></div>
<div id="proto-toast"><span class="pt-icon"></span><div style="display:flex;flex-direction:column;gap:2px;"><span class="pt-msg"></span><span class="pt-sub"></span></div></div>
<canvas id="c" width="2048" height="862"></canvas>
<!-- ── RIGHT PANEL: protocols (top) + zoom (bottom) ─────────────────────── -->
<div id="right-panel">
  <div id="proto-panel">
    <div class="proto-btn" id="proto-rebaseline" data-proto="rebaseline" data-color="amber" title="Rebaseline Protocol — refresh task audit, urgent counts, report">
      <span class="proto-icon">↻</span>
      <span class="proto-label">REBASE</span>
    </div>
    <div class="proto-btn" id="proto-throughput" data-proto="throughput" data-color="cyan" title="Throughput Boost — accelerate pipeline for 60 min">
      <span class="proto-icon">▲</span>
      <span class="proto-label">BOOST</span>
    </div>
    <div class="proto-btn" id="proto-drain-ws-queue" data-proto="drain-ws-queue" data-color="red" title="Drain WS Queue — purge all pending WebShadow browser commands">
      <span class="proto-icon">␡</span>
      <span class="proto-label">DRAIN</span>
    </div>
  </div>
  <div id="zoom-controls">
    <button class="zc-btn" id="zc-in" title="Zoom in">+</button>
    <button class="zc-btn" id="zc-out" title="Zoom out">−</button>
    <button class="zc-btn" id="zc-fit" title="Reset view" style="font-size:8px;letter-spacing:-1px;">FIT</button>
    <button class="zc-btn" id="btn-save-layout" title="Save operator node positions" style="font-size:7px;letter-spacing:-.5px;width:32px;height:24px;background:rgba(0,60,20,.6);border-color:rgba(0,200,80,.4);color:rgba(0,220,100,.9);">SAVE</button>
    <button class="zc-btn" id="btn-reset-layout" title="Reset operator nodes to default" style="font-size:7px;letter-spacing:-.5px;width:32px;height:24px;">RESET</button>
    <button class="zc-btn" id="btn-screenshot" title="Copy screenshot to clipboard" style="font-size:9px;letter-spacing:-.5px;width:32px;height:24px;background:rgba(0,30,60,.6);border-color:rgba(58,159,255,.4);color:rgba(130,200,255,.9);">CAP</button>
  </div>
</div>

<!-- ── UI SCALE CONTROL ── bottom-right, below LIVE label ───────────────── -->
<div id="ui-scale-ctrl">
  <button class="usc-btn" id="usc-in" title="Scale UI up">+</button>
  <span id="usc-pct">125%</span>
  <button class="usc-btn" id="usc-out" title="Scale UI down">−</button>
</div>

<!-- ── TIMELINE BAR ──────────────────────────────────────────────────────── -->
<div id="timeline">
  <div class="speed-btns">
    <button class="spd" id="spd-prev" title="Jump to previous event [Left]">|◀</button>
    <button class="spd" id="spd-rr" title="Rewind 8x">⏪</button>
    <button class="spd" id="spd-r" title="Rewind 2x">◀◀</button>
    <button class="spd" id="spd-p" title="Play / Pause [Space]">⏸</button>
    <button class="spd active" id="spd-f" title="Forward 2x">▶▶</button>
    <button class="spd" id="spd-ff" title="Forward 8x">⏩</button>
    <button class="spd active" id="spd-live" title="Jump to live [End]">LIVE</button>
    <button class="spd" id="spd-next" title="Jump to next event [Right]">▶|</button>
  </div>
  <div style="display:flex;flex-direction:column;flex:1;gap:2px;">
    <div id="tl-track">
      <div id="tl-fill" style="width:100%"></div>
      <div id="tl-thumb" style="left:100%"></div>
      <canvas id="tl-density"></canvas>
    </div>
    <div id="tl-ticks"><div class="tl-tick" data-ts="1772190000000" style="left: 2.26136%;">12:00</div><div class="tl-tick" data-ts="1772191800000" style="left: 13.958%;">12:30</div><div class="tl-tick" data-ts="1772193600000" style="left: 25.6547%;">13:00</div><div class="tl-tick" data-ts="1772195400000" style="left: 37.3514%;">13:30</div><div class="tl-tick" data-ts="1772197200000" style="left: 49.048%;">14:00</div><div class="tl-tick" data-ts="1772199000000" style="left: 60.7447%;">14:30</div><div class="tl-tick" data-ts="1772200800000" style="left: 72.4414%;">15:00</div><div class="tl-tick" data-ts="1772202600000" style="left: 84.138%;">15:30</div><div class="tl-tick" data-ts="1772204400000" style="left: 95.8347%;">16:00</div></div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <div id="tl-labels">
        <span id="tl-start">11:54:12</span>
        <span id="tl-mid">14:02:26</span>
        <span id="tl-end">16:10:41</span>
      </div>
      <div class="tl-zoom-btns">
        <button class="spd" id="tlz-1m" title="Zoom to 1 minute">1m</button>
        <button class="spd" id="tlz-5m" title="Zoom to 5 minutes">5m</button>
        <button class="spd" id="tlz-30m" title="Zoom to 30 minutes">30m</button>
        <button class="spd active" id="tlz-all" title="Show full range [Home]">ALL</button>
      </div>
    </div>
  </div>
  <div id="tl-now" style="color: rgb(0, 204, 102);">LIVE</div>
  <div id="color-legend">
    <div class="cl-row"><span class="cl-dot" style="background:rgb(0,180,255);box-shadow:0 0 4px rgba(0,180,255,0.7)"></span><span class="cl-lbl" style="color:rgb(0,180,255)">ACTIVE</span><span class="cl-sub">submitted / lead open</span></div>
    <div class="cl-row"><span class="cl-dot" style="background:rgb(255,165,0);box-shadow:0 0 4px rgba(255,165,0,0.7)"></span><span class="cl-lbl" style="color:rgb(255,165,0)">READY</span><span class="cl-sub">tasks queued — none submitted</span></div>
    <div class="cl-row"><span class="cl-dot" style="background:rgb(0,200,80);box-shadow:0 0 4px rgba(0,200,80,0.7)"></span><span class="cl-lbl" style="color:rgb(0,200,80)">DONE</span><span class="cl-sub">all tasks complete</span></div>
    <div class="cl-row"><span class="cl-dot" style="background:rgb(80,100,120);box-shadow:0 0 4px rgba(80,100,120,0.4)"></span><span class="cl-lbl" style="color:rgb(120,140,160)">DORMANT</span><span class="cl-sub">no tasks assigned</span></div>
  </div>
</div>

<!-- ── STATUS PANEL ─────────────────────────────────────────────────────── -->
<div id="sp-toggle" title="Toggle status panel">STATUS</div>
<div id="status-panel" class="open">
  <div class="sp-head">NEXUS STATUS<button class="sp-close-btn" id="sp-close">✕</button></div>
  <div class="sp-body" id="sp-body"><div class="sp-sect"><div class="sp-sect-title">DISCOVERY</div><div class="sp-m">
      <div class="sp-m-hd"><span>Stub pages</span><b>0 / 0</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(0,180,255,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>Stubs collected</span><b>2831</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:28.310000000000002%;background:rgba(0,180,255,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>WS category captures</span><b>0</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(0,180,255,.8)"></div></div>
    </div></div><div class="sp-sect"><div class="sp-sect-title">DATABASE</div><div class="sp-m">
      <div class="sp-m-hd"><span>Total jobs in DB</span><b>14,587 / 10,000 goal</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:100%;background:rgba(0,255,136,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>Descriptions (target 90%)</span><b>73.6% / 90%</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:73.6%;background:rgba(255,176,0,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>WS individual captures</span><b>0 / 14587</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(255,176,0,.8)"></div></div>
    </div></div><div class="sp-sect"><div class="sp-sect-title">PIPELINE <span style="font-size:7px;color:#888">(run Rebase)</span></div><div class="sp-m">
      <div class="sp-m-hd"><span>Enrichment coverage</span><b>— / 80%</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(30,55,90,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>Classification</span><b>— / 100%</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(30,55,90,.8)"></div></div>
    </div><div class="sp-m">
      <div class="sp-m-hd"><span>Offers submitted</span><b>— / —</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:0%;background:rgba(30,55,90,.8)"></div></div>
    </div></div><div class="sp-sect"><div class="sp-sect-title">WATCHDOG</div><div class="sp-m"><div class="sp-m-hd"><span>Status</span><b style="color:#00ff88">ALIVE</b></div></div><div class="sp-m">
      <div class="sp-m-hd"><span>Restarts</span><b>492 / 50</b></div>
      <div class="sp-bar"><div class="sp-bar-fill" style="width:984%;background:rgba(0,255,136,.8)"></div></div>
    </div></div><div class="sp-sect"><div class="sp-sect-title">TASKS (26)</div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-001: Generate URL List for Missing Descriptions</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-002: Capture Missing Job Pages in WebShadow</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-003: Extract Descriptions from WebShadow</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-004: Reload Database from JSON</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-005: Validate Description Coverage</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-006: Fix Enrichment Schema Mismatch</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-007: Test Enrichment on Sample Jobs</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-008: Create Batch Enrichment Activity Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-009: Validate Enrichment Coverage</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-010: Create Category Page Capture Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-V01: Create Description Validation Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-V02: Create Enrichment Validation Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-V03: Create Classification Validation Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-V04: Create Unit Test Suite</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-V05: Create Integration Test Suite</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-A01: Create Automated Fetch Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-A02: Create Parallel Enrichment Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-A03: Add Progress Checkpointing</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-I01: Create Progress Dashboard</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-I02: Create Knowledge Base Index</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-I03: Document All Activity Scripts</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-C01: Create Data Collection Plan</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-C02: Create Executive Summary</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-C03: Create Project Plan with WBS</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-C04: Create URL Generation Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div><div class="sp-task sp-task-unknown"><span class="sp-dot" style="background:#1a3860"></span><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">TASK-C05: Create Page Capture Activity Script</span><span style="color:#1a3860;flex-shrink:0;font-size:8px">?</span></div></div></div>
</div>

<!-- ── DETAIL PANEL ─────────────────────────────────────────────────────── -->
<div id="detail-panel">
  <div class="dp-head">
    <span class="dp-title" id="dp-title">—</span>
    <span class="dp-ts" id="dp-ts">—</span>
    <button id="dp-close">✕</button>
  </div>
  <div class="dp-body">
    <div class="dp-col" id="dp-col-meta"></div>
    <div class="dp-col" id="dp-col-context"></div>
  </div>
</div>

<div id="throughput-bar">
  <span id="tpb-label">THROUGHPUT</span>
  <div id="tpb-rows"><span style="color:#1a4060;font-size:9px;">loading…</span></div>
</div>

<div id="useme-meter">
  <span id="um-label">FUNNEL</span>
  <div id="um-content">
    <span id="um-identified" class="um-seg">397 (A+B)</span>
    <div id="um-bar"><div id="um-fill" style="width: 14%; background: rgb(14, 58, 32);"></div></div>
    <span id="um-pct" class="um-seg">14%</span>
    <span id="um-detail" class="um-seg">22 applied · 35 operator-submitted</span>
    <span id="um-retry" style="color: rgb(255, 64, 64);">723 retry pending · 731 EXHAUSTED</span>
  </div>
</div>

<div id="statusbar">
  <span id="log-line">restart #10 [2026-02-27 16:10:41]</span>
  <span id="pkt-count">pkts:0 traces:0 hist:120</span>
</div>

<div id="tooltip"></div>

<!-- ── NEXUS WINDOW SYSTEM CONTAINERS ──────────────────────────────────── -->
<div id="nw-container"><div class="nw pip" id="nw-livefeed" style="z-index: 52; left: 4px; top: 1021px; width: 316px; height: 158px;"><div class="nw-tb"><div class="nw-ndot"></div><div class="nw-title">LIVE FEED — EVENT STREAM</div><div class="nw-snaps"><div class="nw-snap" title="tl">◤</div><div class="nw-snap" title="tr">◥</div><div class="nw-snap" title="bl">◣</div><div class="nw-snap" title="br">◢</div><div class="nw-snap" title="left">▌</div><div class="nw-snap" title="right">▐</div><div class="nw-snap" title="pip">⊡</div></div><div class="nw-tb-btns"><button class="nw-tb-btn" title="PiP">⊡</button><button class="nw-tb-btn" title="Aura">◌</button><button class="nw-tb-btn" title="Close">✕</button></div></div><div class="nw-body" id="nw-body-livefeed"><div class="lf-body-wrap"><canvas class="lf-bg-spark" id="lf-bg-spark"></canvas><div class="lf-log" id="lf-log"><div class="lf-entry"><span class="lf-ts">11:54:12</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">11:55:42</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">11:57:12</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">11:58:42</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:00:12</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:01:42</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:03:12</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:04:43</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:06:13</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:07:43</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">12:09:13</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">13:52:49</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">13:54:19</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">13:56:20</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">13:57:51</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">13:59:21</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:00:51</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:12:36</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:14:06</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:15:37</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:17:07</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:18:37</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:20:07</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:21:37</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:23:07</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:24:37</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:26:07</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:27:37</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:29:08</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:30:38</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:32:08</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:33:38</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:35:08</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:36:38</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:38:08</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:39:38</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:41:09</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:42:39</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:44:09</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:46:50</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:48:20</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:49:50</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:51:21</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:52:51</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:54:21</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:55:51</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:57:21</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">14:58:51</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:00:21</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:01:52</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:03:22</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:04:52</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:06:22</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:07:52</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:09:22</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:10:52</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:12:22</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:13:53</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:15:23</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:16:53</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:18:23</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:19:53</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:21:23</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:23:23</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:24:53</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:26:23</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:27:53</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:29:24</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:30:54</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:35:30</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:37:00</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:38:30</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:40:00</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:41:30</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:43:00</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:44:30</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:46:00</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:47:31</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:49:01</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:50:31</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:52:01</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:53:31</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:55:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:56:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:58:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">15:59:02</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #48</span></div><div class="lf-entry"><span class="lf-ts">15:59:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 91971</span></div><div class="lf-entry"><span class="lf-ts">15:59:32</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #49</span></div><div class="lf-entry"><span class="lf-ts">15:59:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:00:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 91979</span></div><div class="lf-entry"><span class="lf-ts">16:00:02</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #50</span></div><div class="lf-entry"><span class="lf-ts">16:00:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92033</span></div><div class="lf-entry"><span class="lf-ts">16:00:32</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">WATCHDOG STOP</span></div><div class="lf-entry"><span class="lf-ts">16:01:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:02:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:04:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:05:32</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:06:11</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92159</span></div><div class="lf-entry"><span class="lf-ts">16:06:11</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #1</span></div><div class="lf-entry"><span class="lf-ts">16:06:41</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92212</span></div><div class="lf-entry"><span class="lf-ts">16:06:41</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #2</span></div><div class="lf-entry"><span class="lf-ts">16:07:02</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:07:11</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92216</span></div><div class="lf-entry"><span class="lf-ts">16:07:11</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #3</span></div><div class="lf-entry"><span class="lf-ts">16:07:41</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92222</span></div><div class="lf-entry"><span class="lf-ts">16:07:41</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #4</span></div><div class="lf-entry"><span class="lf-ts">16:08:11</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92226</span></div><div class="lf-entry"><span class="lf-ts">16:08:11</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #5</span></div><div class="lf-entry"><span class="lf-ts">16:08:33</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:08:41</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92283</span></div><div class="lf-entry"><span class="lf-ts">16:08:41</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #6</span></div><div class="lf-entry"><span class="lf-ts">16:09:11</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92287</span></div><div class="lf-entry"><span class="lf-ts">16:09:11</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #7</span></div><div class="lf-entry"><span class="lf-ts">16:09:41</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92294</span></div><div class="lf-entry"><span class="lf-ts">16:09:41</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #8</span></div><div class="lf-entry"><span class="lf-ts">16:10:03</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">classified 10736 â€“ idle</span></div><div class="lf-entry"><span class="lf-ts">16:10:11</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92300</span></div><div class="lf-entry"><span class="lf-ts">16:10:11</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #9</span></div><div class="lf-entry"><span class="lf-ts">16:10:41</span><span class="lf-type" style="color:rgb(0,255,140)">DONE</span><span class="lf-lbl">collector PID 92355</span></div><div class="lf-entry"><span class="lf-ts">16:10:41</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">restart #10</span></div><div class="lf-entry"><span class="lf-ts">16:10:54</span><span class="lf-type" style="color:rgb(255,60,50)">ERROR</span><span class="lf-lbl">WS TIMEOUT – no capture &gt;120s</span></div></div></div></div><div class="nw-grip"></div></div></div>
<div class="snap-zone" id="sz-tl"></div>
<div class="snap-zone" id="sz-tr"></div>
<div class="snap-zone" id="sz-bl"></div>
<div class="snap-zone" id="sz-br"></div>
<div class="snap-zone" id="sz-left"></div>
<div class="snap-zone" id="sz-right"></div>
<div class="snap-zone" id="sz-full"></div>

<script>
"use strict";
const BUILD = '20260227.001';  // bump on every edit
// ── RUNTIME ERROR SURFACE ── shows any exception in the statusbar log line
window.onerror = function(msg, src, line, col, err){
  const el = document.getElementById('log-line');
  if(el) el.textContent = 'JS ERROR ln' + line + ': ' + msg;
  return false;
};
window.onunhandledrejection = function(e){
  const el = document.getElementById('log-line');
  if(el) el.textContent = 'PROMISE ERROR: ' + (e.reason||e);
};

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: NEXUS_BOOT  – startup loading screen with live canvas radar
   ════════════════════════════════════════════════════════════════════════════ */
const NexusBoot = (() => {
  const _el      = document.getElementById('nexus-boot');
  const _bar     = document.getElementById('nb-bar');
  const _status  = document.getElementById('nb-status-line');
  const _cv      = document.getElementById('nb-radar-canvas');
  let _steps     = 0;
  const _TOTAL   = 3;
  let _rafId     = null;
  let _angle     = 0;           // current sweep angle in radians
  const _SWEEP_SPEED = 0.028;   // radians per frame @60fps ≈ 1 full rev / 3.7s

  // ── blip pool ────────────────────────────────────────────────────────────
  const _blips   = [];
  // Canvas is 480×480 (2× for HiDPI), logical half-size = 240
  const _S       = 120;   // normalized radius unit (logical half = 240, but blip coords
                          // are in [-_S, +_S] and get ×2 for canvas pixels)

  // Three persistent target blips – one per check
  const _TARGETS = [
    { key:'health',  angle: 0.72, radius: 0.55, fired: false, bx:0, by:0 },
    { key:'profile', angle: 2.10, radius: 0.75, fired: false, bx:0, by:0 },
    { key:'data',    angle: 4.45, radius: 0.88, fired: false, bx:0, by:0 },
  ];

  const _MSGS = {
    health:  ['nbs-health',  'BACKEND ONLINE',   'OK'],
    profile: ['nbs-profile', 'PROFILE LOADED',   'OK'],
    data:    ['nbs-data',    'DATA RECEIVED',    'OK'],
  };

  function _spawnTrailBlip(sweepAngle) {
    const a = sweepAngle - Math.random() * 0.22;
    const r = (0.30 + Math.random() * 0.60) * _S;
    _blips.push({
      x: Math.cos(a) * r, y: Math.sin(a) * r,
      age: 0, maxAge: 55 + Math.random() * 55,
      size: 1.2 + Math.random() * 1.4,
      r: 80, g: 160 + Math.floor(Math.random() * 80), b: 255,
      alpha: 0, persistent: false,
    });
  }

  function _spawnConfirmBurst(tx, ty) {
    for (let i = 0; i < 9; i++) {
      const a   = Math.random() * Math.PI * 2;
      const rad = 4 + Math.random() * 12;
      _blips.push({
        x: tx + Math.cos(a) * rad, y: ty + Math.sin(a) * rad,
        age: 0, maxAge: 55 + Math.random() * 40,
        size: 1.0 + Math.random() * 1.5,
        r: 0, g: 255, b: 100, alpha: 0, persistent: false,
      });
    }
  }

  function _initTargetBlips() {
    for (const t of _TARGETS) {
      t.bx = Math.cos(t.angle) * t.radius * _S;
      t.by = Math.sin(t.angle) * t.radius * _S;
      _blips.push({
        x: t.bx, y: t.by,
        age: 0, maxAge: Infinity,
        size: 3.5,
        r: 0, g: 80, b: 180, alpha: 0.28,
        persistent: true, targetKey: t.key,
      });
    }
  }

  function _draw() {
    if (!_cv || _el.classList.contains('nb-gone')) return;
    const W   = _cv.width, H = _cv.height;   // 480×480
    const cx  = W / 2, cy = H / 2;
    const R   = W / 2 - 4;
    const ctx = _cv.getContext('2d');

    ctx.clearRect(0, 0, W, H);

    // background vignette, clipped to circle
    const vg = ctx.createRadialGradient(cx, cy, 0, cx, cy, R);
    vg.addColorStop(0,   'rgba(0,18,48,.72)');
    vg.addColorStop(0.7, 'rgba(0,10,28,.82)');
    vg.addColorStop(1,   'rgba(0,5,16,.92)');
    ctx.save();
    ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.clip();
    ctx.fillStyle = vg; ctx.fillRect(0, 0, W, H);

    // rings
    [0.32, 0.52, 0.72, 0.92].forEach((rf, i) => {
      ctx.beginPath();
      ctx.arc(cx, cy, R * rf, 0, Math.PI * 2);
      ctx.strokeStyle = `rgba(0,${100 + i * 28},220,${0.18 - i * 0.02})`;
      ctx.lineWidth = 1;
      ctx.stroke();
    });

    // cross-hairs
    ctx.strokeStyle = 'rgba(0,90,180,.14)';
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 8]);
    ctx.beginPath(); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); ctx.stroke();
    ctx.setLineDash([]);

    // sweep – N arc-segment approximation of conic gradient
    const sweepFade = Math.PI * 0.90;
    const STEPS = 36;
    for (let i = 0; i < STEPS; i++) {
      const t  = i / STEPS;
      const a0 = _angle - sweepFade * t;
      const a1 = _angle - sweepFade * (i + 1) / STEPS;
      const op = (1 - t) * (1 - t) * 0.35;
      if (op < 0.005) break;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, R * 0.96, a0, a1, true);
      ctx.closePath();
      ctx.fillStyle = `rgba(0,${Math.round(140 + t * 60)},255,${op.toFixed(3)})`;
      ctx.fill();
    }
    // leading edge line
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + Math.cos(_angle) * R * 0.96, cy + Math.sin(_angle) * R * 0.96);
    ctx.strokeStyle = 'rgba(80,200,255,.72)';
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // blips
    const toRemove = [];
    _blips.forEach((b, i) => {
      if (!b.persistent) {
        b.age++;
        if (b.age > b.maxAge) { toRemove.push(i); return; }
        const life = b.age / b.maxAge;
        b.alpha = life < 0.2 ? (life / 0.2) : (1 - (life - 0.2) / 0.8);
      } else {
        b.alpha = 0.18 + 0.10 * Math.sin(Date.now() / 700 + b.x);
      }
      const bx = cx + b.x * 2, by = cy + b.y * 2;
      const a  = Math.max(0, Math.min(1, b.alpha));
      const sz = b.size * 2;

      // glow halo
      const grd = ctx.createRadialGradient(bx, by, 0, bx, by, sz * 4.5);
      grd.addColorStop(0,   `rgba(${b.r},${b.g},${b.b},${(a * 0.85).toFixed(3)})`);
      grd.addColorStop(0.4, `rgba(${b.r},${b.g},${b.b},${(a * 0.28).toFixed(3)})`);
      grd.addColorStop(1,   `rgba(${b.r},${b.g},${b.b},0)`);
      ctx.beginPath(); ctx.arc(bx, by, sz * 4.5, 0, Math.PI * 2);
      ctx.fillStyle = grd; ctx.fill();
      // core dot
      ctx.beginPath(); ctx.arc(bx, by, sz, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(${b.r},${b.g},${b.b},${a.toFixed(3)})`;
      ctx.fill();
    });
    for (let i = toRemove.length - 1; i >= 0; i--) _blips.splice(toRemove[i], 1);

    // center dot
    const cPulse = 0.6 + 0.4 * Math.sin(Date.now() / 800);
    const cGrd   = ctx.createRadialGradient(cx, cy, 0, cx, cy, 20);
    cGrd.addColorStop(0,   `rgba(80,180,255,${cPulse.toFixed(2)})`);
    cGrd.addColorStop(0.5, `rgba(30,120,255,${(cPulse * 0.4).toFixed(2)})`);
    cGrd.addColorStop(1,   'rgba(0,60,180,0)');
    ctx.beginPath(); ctx.arc(cx, cy, 12, 0, Math.PI * 2);
    ctx.fillStyle = cGrd; ctx.fill();
    ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2);
    ctx.fillStyle = '#4ac0ff'; ctx.fill();

    ctx.restore();

    // advance sweep
    _angle = (_angle + _SWEEP_SPEED) % (Math.PI * 2);

    // trail blips
    if (Math.random() < 0.35) _spawnTrailBlip(_angle);

    // update persistent target blip colours
    for (const t of _TARGETS) {
      const tb = _blips.find(b => b.persistent && b.targetKey === t.key);
      if (!tb) continue;
      if (t.fired) {
        // keep green and bright
        tb.r = 0; tb.g = 230; tb.b = 90;
        tb.alpha = 0.78 + 0.18 * Math.sin(Date.now() / 400);
      } else {
        // flash blue when sweep passes over it
        let diff = t.angle - _angle;
        if (diff < 0) diff += Math.PI * 2;
        if (diff < 0.14) tb.alpha = 0.80;
      }
    }

    _rafId = requestAnimationFrame(_draw);
  }

  function _activateNext() {
    const steps = _el ? _el.querySelectorAll('.nb-step') : [];
    for (const s of steps) {
      if (!s.classList.contains('nb-done') && !s.classList.contains('nb-active')) {
        s.classList.add('nb-active');
        const tag = s.querySelector('.nb-tag');
        if (tag) tag.textContent = 'LOADING';
        break;
      }
    }
  }

  function step(key) {
    const info = _MSGS[key];
    if (!info || !_el) return;
    const [id, , tag] = info;
    const s = document.getElementById(id);
    if (!s) return;
    s.classList.remove('nb-active');
    s.classList.add('nb-done');
    const icon  = s.querySelector('.nb-icon');
    const tEl   = s.querySelector('.nb-tag');
    if (icon) icon.innerHTML = '&#10003;';
    if (tEl)  tEl.textContent = tag;
    _steps++;
    const pct = Math.round((_steps / _TOTAL) * 85);
    if (_bar) _bar.style.width = pct + '%';
    if (_status) _status.textContent = info[1] + '\u2026';
    _activateNext();

    // Fire the matching target blip on the radar
    const t = _TARGETS.find(x => x.key === key);
    if (t) {
      t.fired = true;
      _spawnConfirmBurst(t.bx, t.by);
    }
  }

  function dismiss() {
    if (!_el) return;
    step('data');
    if (_bar) _bar.style.width = '100%';
    if (_status) _status.textContent = 'NEXUS ONLINE';
    if (_status) _status.style.color = '#2a9060';
    setTimeout(() => {
      if (!_el) return;
      _el.style.opacity = '0';
      setTimeout(() => {
        _el.classList.add('nb-gone');
        if (_rafId) { cancelAnimationFrame(_rafId); _rafId = null; }
      }, 620);
    }, 320);
  }

  // start immediately
  if (_cv) { _initTargetBlips(); _draw(); }

  return { step, dismiss };
})();

// ── FILE:// GUARD ── API calls cannot work when page is opened as a local file
(function(){
  if(location.protocol === 'file:'){
    const b = document.createElement('div');
    b.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;background:#3a0a0a;' +
      'border-bottom:2px solid #ff4040;padding:9px 16px;font-size:11px;font-family:Consolas,monospace;' +
      'color:#ff7070;display:flex;align-items:center;gap:14px;';
    b.innerHTML =
      '<b style="color:#ff4040;letter-spacing:2px">NEXUS OFFLINE</b>' +
      '<span>Page opened as file:// — backend API unreachable. ' +
      'Open via: <a href="http://localhost:40001/pipeline-flow" ' +
      'style="color:#3affc0;text-decoration:none" ' +
      'onclick="location.href=this.href;return false;">' +
      'http://localhost:40001/pipeline-flow</a></span>' +
      '<span style="margin-left:auto;cursor:pointer;color:#ff4040;font-size:14px" ' +
      'onclick="this.parentNode.remove()">x</span>';
    document.body.appendChild(b);
  }
})();
/* ════════════════════════════════════════════════════════════════════════════
   MODULE: CONSTANTS
   ════════════════════════════════════════════════════════════════════════════ */
const DATA_REFRESH  = 8000;
const EVENT_REFRESH = 4000;
const DPR = Math.min(window.devicePixelRatio || 1, 2);

// Visual transit time: seconds for an animated pill to cross each segment
const TRANSIT = {
  top_0:3, top_1:5, top_2:3, top_3:3, top_4:3,
  right_bend:5,
  bot_0:3, bot_1:3, bot_2:3, bot_3:3, bot_4:3,
  wd_conn:3, wd_to_audit:3, desc_to_json:4,
  td_mariusz:4, td_robert_l:4, td_rafal:4, td_sebastian:4,
  audit_to_td:6,
  err_retry:5,
};
const SPEED = {};  // t-units per frame @60fps, scaled by Timeline.speedMult
Object.keys(TRANSIT).forEach(k => SPEED[k] = 1/(TRANSIT[k]*60));
// Events newer than this (relative to cursor) become animated pills; older → trace dots
// LIVE_WINDOW: kept for history completeness; no longer used in packet logic.
// Scrub path derives pill position from baseSpeed (real duration); force-animate path bypasses it.
const LIVE_WINDOW = 600;

const PACKET_COL = {
  capture:{r:0,  g:190,b:255},
  extract:{r:130,g:80, b:255},
  sync:   {r:0,  g:220,b:110},
  error:  {r:255,g:60, b:50},
  done:   {r:0,  g:255,b:140},
  check:  {r:80, g:255,b:80 },   // integration health check — lime green
  blocked:{r:30, g:55, b:85},
  info:   {r:0,  g:220,b:110},   // layout/system events — green
  layout: {r:0,  g:220,b:110},
};
const NODE_COL = {
  active: {r:0,  g:180,b:255},
  done:   {r:0,  g:255,b:136},
  ready:  {r:255,g:176,b:0},
  blocked:{r:30, g:55, b:90},
  stop:   {r:255,g:100,b:30},
  error:  {r:255,g:60, b:50},
};
// REQ-033: Upstream steering packet colours  (cadence_req=magenta, throttle_req=orange, ack=teal)
const STEERING_COL = {
  cadence_req:  {r:200, g:80,  b:255},
  throttle_req: {r:255, g:150, b:30 },
  ack:          {r:0,   g:200, b:180},
};
// Visual weight per event type — drives pipe bloom and packet glow (0=dim, 1=full intensity)
const SIGNIFICANCE = {
  error:1.0, capture:0.85, extract:0.80, check:0.92, done:0.75, sync:0.60, batch_open:0.50,
};
// Cursor-time window (seconds) used when computing per-pipe activity heat
const HEAT_WINDOW = 300;

// ── SKIN SYSTEM (REQ-042) ────────────────────────────────────────────────────
const _SKIN_DEFS = {
  cyan:   { label:'DARK CYAN',     active:{r:0,  g:180,b:255}, capture:{r:0,  g:190,b:255} },
  amber:  { label:'DARK AMBER',    active:{r:255,g:150,b:0  }, capture:{r:255,g:160,b:10 } },
  green:  { label:'DARK GREEN',    active:{r:0,  g:210,b:80 }, capture:{r:0,  g:220,b:90 } },
  hc:     { label:'HIGH CONTRAST', active:{r:200,g:200,b:200}, capture:{r:210,g:210,b:210} },
  wh40k:  { label:'GRIMDARK',      active:{r:40, g:170,b:20 }, capture:{r:60, g:200,b:40 } },
};

function applySkin(id) {
  const s = _SKIN_DEFS[id] || _SKIN_DEFS.cyan;
  NODE_COL.active = {...s.active};
  PACKET_COL.capture = {...s.capture};
  const html = document.documentElement;
  html.classList.remove('skin-amber','skin-green','skin-hc','skin-wh40k');
  if(id !== 'cyan') html.classList.add('skin-' + id);
  localStorage.setItem('nexus_skin', id);
  window._activeSkin = id;
}

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: CANVAS
   ════════════════════════════════════════════════════════════════════════════ */
const canvas = document.getElementById('c');
const ctx    = canvas.getContext('2d');

function CW(){ return canvas.offsetWidth; }
function CH(){ return canvas.offsetHeight; }

function resizeCanvas(){
  canvas.width  = CW()*DPR;
  canvas.height = CH()*DPR;
  ctx.setTransform(DPR,0,0,DPR,0,0);
  Layout.rebuild();
}
window.addEventListener('resize', resizeCanvas);

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: LAYOUT  – node positions, connection path points
   ════════════════════════════════════════════════════════════════════════════ */
const Layout = (() => {
  let _nodes = [], _conns = [], _wdNode = null, _errNode = null, _opNodes = [], _auditNode = null, _rrNode = null, _acNode = null, _aoNode = null, _aeNode = null, _enrDbNode = null, _wcNode = null, _workerNodes = [], _lastWorkers = null, _mcpNode = null, _wsMcpNode = null, _pluginNodes = [], _lastPlugins = null, _discordNode = null;

  let TOP_DEFS = [
    {id:'useme',        label:'USEME.COM',    sub:'source',              nodeType:'source'},
    {id:'upwork',       label:'UPWORK',       sub:'source',              nodeType:'source'},
    {id:'ws_capture',   label:'WEBSHADOW',    sub:'capture',             nodeType:'transform'},
    {id:'stub_extract', label:'STUB EXTRACT', sub:'source_router.py',    nodeType:'transform'},
    {id:'master_json',  label:'MASTER JSON',  sub:'jobs_master_db.json', nodeType:'store'},
    {id:'db_loader',    label:'DB LOADER',    sub:'load_master_db.py',   nodeType:'transform'},
    {id:'sqlite_db',    label:'SQLITE DB',    sub:'freelance_jobs.db',   nodeType:'store'},
  ];
  let BOT_DEFS = [
    {id:'submission',  label:'SUBMISSION',   sub:'apply to jobs',      nodeType:'sink'},
    {id:'offer_gen',   label:'OFFER GEN',    sub:'ai_offer_writer.py', nodeType:'transform'},
    {id:'classifier',  label:'CLASSIFIER',   sub:'classify_jobs.py',   nodeType:'transform'},
    {id:'enrichment',  label:'ENRICHMENT',   sub:'enrich_job_batch.py',nodeType:'transform'},
    {id:'desc_extract',label:'DESC EXTRACT', sub:'extract_descs.py',   nodeType:'transform'},
    {id:'job_capture', label:'JOB CAPTURE',  sub:'capture_pages.ps1',  nodeType:'source'},
  ];
  const OP_DEFS = [
    {id:'task_dispatch', label:'TASK DISPATCH',  sub:'task_dispatcher.py',           nodeType:'monitor'},
    {id:'worker_cluster',label:'WORKER CLUSTER', sub:'worker_node/worker.py',         nodeType:'monitor'},
    {id:'op_mariusz',    label:'MARIUSZ',         sub:'tasks/mariusz',               dormant:false, nodeType:'operator'},
    {id:'op_darek',      label:'DAREK',           sub:'korekt12 / tasks/darek',      dormant:false, nodeType:'operator'},
    {id:'op_robert',     label:'ROBERT R.',       sub:'RobertRolidar / tasks/robert',dormant:false, nodeType:'operator'},
    {id:'op_robert_l',   label:'ROBERT L.',       sub:'tasks/robert_l',              dormant:true,  nodeType:'operator'},
    {id:'op_rafal',      label:'RAFAL',           sub:'tasks/rafal',                 dormant:true,  nodeType:'operator'},
    {id:'op_sebastian',  label:'SEBASTIAN',       sub:'tasks/sebastian',             dormant:false, nodeType:'operator'},
  ];
  let CONN_DEFS = [
    {id:'top_0', from:'useme',        to:'ws_capture',   dir:'lr'},
    {id:'src_up', from:'upwork',       to:'ws_capture',   dir:'lr'},
    {id:'top_1', from:'ws_capture',   to:'stub_extract', dir:'lr'},
    {id:'top_2', from:'stub_extract', to:'master_json',  dir:'lr'},
    {id:'top_3', from:'master_json',  to:'db_loader',    dir:'lr'},
    {id:'top_4', from:'db_loader',    to:'sqlite_db',    dir:'lr'},
    {id:'wd_conn',      from:'watchdog',    to:'ws_capture',   dir:'vert', dashed:true},
    {id:'wd_to_audit',  from:'watchdog',    to:'task_audit',   dir:'lr',   dashed:true},
    {id:'right_bend',   from:'sqlite_db',   to:'job_capture',  dir:'bend'},
    {id:'bot_0', from:'job_capture',  to:'desc_extract', dir:'rl'},
    {id:'bot_1', from:'desc_extract', to:'enrichment',   dir:'rl'},
    {id:'bot_2', from:'enrichment',   to:'classifier',   dir:'rl'},
    {id:'bot_3', from:'classifier',   to:'offer_gen',    dir:'rl'},
    {id:'bot_4', from:'offer_gen',    to:'task_dispatch', dir:'lr'},
    {id:'desc_to_json', from:'desc_extract', to:'master_json', dir:'cross', dashed:true},
    {id:'err_capture',  from:'ws_capture',   to:'error_log',   dir:'err_up', dashed:true},
    {id:'err_extract',  from:'stub_extract', to:'error_log',   dir:'err_up', dashed:true},
    {id:'err_retry',    from:'error_log',    to:'ws_capture',  dir:'err_ret',dashed:true},
    {id:'td_vert',  from:'task_dispatch', to:'submission',    dir:'vert'},
    {id:'td_mariusz',  from:'task_dispatch', to:'op_mariusz',  dir:'rl'},
    {id:'td_darek',    from:'task_dispatch', to:'op_darek',    dir:'rl'},
    {id:'td_robert',   from:'task_dispatch', to:'op_robert',   dir:'rl'},
    {id:'td_robert_l', from:'task_dispatch', to:'op_robert_l', dir:'rl', dashed:true},
    {id:'td_rafal',    from:'task_dispatch', to:'op_rafal',    dir:'rl', dashed:true},
    {id:'td_sebastian',from:'task_dispatch', to:'op_sebastian', dir:'rl'},
    {id:'audit_to_td', from:'task_audit',    to:'task_dispatch', dir:'audit_td', dashed:true},
    {id:'rpt_from_db',   from:'sqlite_db',   to:'report_refresh', dir:'rpt_qry', dashed:true},
    {id:'rpt_from_json', from:'master_json', to:'report_refresh', dir:'rpt_qry', dashed:true},
    {id:'ac_from_cls',   from:'classifier',         to:'airmind_classifier',  dir:'vert', dashed:true},
    {id:'ac_to_ao',      from:'airmind_classifier',  to:'airmind_offer_gen',   dir:'lr',   dashed:true},
    {id:'ao_to_td',      from:'airmind_offer_gen',   to:'task_dispatch',       dir:'lr',   dashed:true},
    {id:'ae_from_op',    from:'op_airmind',          to:'airmind_export',      dir:'vert', dashed:true},
    {id:'td_to_wc',      from:'task_dispatch',       to:'worker_cluster',      dir:'vert', dashed:true},
    {id:'enr_pipe',      from:'sqlite_db',            to:'enriched_db',         dir:'vert'},
    {id:'enr_to_enrdb',  from:'enrichment',           to:'enriched_db',         dir:'cross', dashed:true},
    // MCP server connections (REQ-MCP-TRANSPORT-01)
    {id:'mcp_to_td',     from:'mcp_server',  to:'task_dispatch',       dir:'lr',    dashed:false},
    {id:'mcp_from_db',   from:'sqlite_db',   to:'mcp_server',          dir:'cross', dashed:true},
    // WebShadow MCP connections (REQ-051)
    {id:'wsmcp_to_wscap',from:'ws_mcp',      to:'ws_capture',          dir:'vert',  dashed:false},
    {id:'wsmcp_to_nexus',from:'ws_mcp',      to:'mcp_server',          dir:'lr',    dashed:true},
    // Discord connections (REQ-045)
    {id:'disc_to_wc',    from:'discord',     to:'worker_cluster',      dir:'lr',    dashed:true},
    {id:'disc_from_td',  from:'task_dispatch', to:'discord',           dir:'rl',    dashed:true},
  ];

  function nodeW(){ return Math.min(128, CW()*0.095); }

  function spreadX(n,l,r){ return Array.from({length:n},(_,i)=>l+(r-l)*i/(n-1)); }

  function mkNode(def, x, y){
    return { ...def, x, y, w:nodeW(), h:68,
      status:'blocked', metric:'', flash:0, srcGlow:0, failFlash:0, spinAngle:0, active:false,
      _hovered:false, _info:{} };
  }

  function rebuild(){
    // REQ-031: apply externally-configured layout from profile if present
    const _profLay = window._nexusProfile?.layout;
    if (_profLay?.top_nodes && _profLay.top_nodes.length) {
      TOP_DEFS = _profLay.top_nodes.map(n => ({...n}));
    }
    if (_profLay?.bot_nodes && _profLay.bot_nodes.length) {
      BOT_DEFS = _profLay.bot_nodes.map(n => ({...n}));
    }
    if (_profLay?.conn_defs && _profLay.conn_defs.length) {
      CONN_DEFS = _profLay.conn_defs.map(c => ({...c}));
    }
    const w=CW(), h=CH();
    const topY=h*0.30, botY=h*0.73;
    const lx=w*0.065, rx=w*0.935;
    const txs=spreadX(TOP_DEFS.length,lx,rx), bxs=spreadX(BOT_DEFS.length,lx,rx);

    // Load saved positions from localStorage (all node types)
    const _savedLayout = (()=>{
      try{
        let raw = JSON.parse(localStorage.getItem('nexus_node_layout')||'{}');
        // Migrate legacy op-only key
        const legacy = JSON.parse(localStorage.getItem('nexus_op_layout')||'{}');
        let changed = false;
        for(const k of Object.keys(legacy)){
          if(!raw[k]){ raw[k]=legacy[k]; changed=true; }
        }
        if(changed){ localStorage.setItem('nexus_node_layout', JSON.stringify(raw)); }
        // Migrate old absolute {x,y} to fractions {xf,yf}
        const cw2=CW(), ch2=CH();
        for(const k of Object.keys(raw)){
          if(raw[k].x !== undefined && raw[k].xf === undefined){
            raw[k]={ xf: raw[k].x/cw2, yf: raw[k].y/ch2 }; changed=true;
          }
        }
        if(changed) localStorage.setItem('nexus_node_layout', JSON.stringify(raw));
        return raw;
      }catch(e){ return {}; }
    })();
    function _applyLayout(nd){
      const sv=_savedLayout[nd.id];
      if(sv && sv.xf !== undefined){
        const nx=sv.xf*w, ny=sv.yf*h;
        // Discard saved position if node right/left edge clips outside canvas
        // (prevents stale off-canvas positions from overriding corrected defaults)
        if(nx - nd.w/2 < 2 || nx + nd.w/2 > w - 2) return;
        nd.x=nx; nd.y=ny;
      }
    }

    _nodes = [];
    TOP_DEFS.forEach((d,i)=>{ const nd=mkNode(d, txs[i], topY); _applyLayout(nd); _nodes.push(nd); });
    BOT_DEFS.forEach((d,i)=>{ const nd=mkNode(d, bxs[BOT_DEFS.length-1-i], botY); _applyLayout(nd); _nodes.push(nd); });
    // Patch source node labels/platform from profile.sources when loaded
    if(window._nexusProfile?.sources){
      window._nexusProfile.sources.forEach(src=>{
        const nd = _nodes.find(n=>n.id===src.id);
        if(nd){ if(src.label) nd.label=src.label; if(src.platform) nd.sub=src.platform; }
      });
    }

    // TASK DISPATCH hub — fixed anchor point for radial fan
    const opY = h * 0.88;
    const tdx = w*0.88, tdy = opY;
    _opNodes = [];
    const _tdNode = mkNode(OP_DEFS[0], tdx, tdy);
    _tdNode.w = nodeW()*0.90; _tdNode.h = 54;
    _applyLayout(_tdNode);
    _opNodes.push(_tdNode);
    // REQ-038: WORKER CLUSTER — always created as explicit fixed node (not profile-driven)
    _wcNode = mkNode(OP_DEFS[1], tdx - nodeW()*1.5, opY + h*0.068);
    _wcNode.w = nodeW()*0.82; _wcNode.h = 50;
    _applyLayout(_wcNode);
    _opNodes.push(_wcNode);
    // Original offsets — these produced the correct layout in the reference screenshot.
    // NO Y-clamping: clamping collapsed multiple nodes to the same Y, causing stacking.
    const _opOffsets = [
      {dx:-0.22*w, dy:-0.055*h},  // op 0 (mariusz)
      {dx:-0.30*w, dy:+0.000*h},  // op 1 (darek)
      {dx:-0.22*w, dy:+0.055*h},  // op 2 (robert)
      {dx:-0.11*w, dy:-0.090*h},  // op 3 (robert_l, dormant)
      {dx:-0.09*w, dy:+0.080*h},  // op 4 (rafal, dormant)
      {dx:-0.38*w, dy:+0.045*h},  // op 5 (sebastian)
      {dx:-0.20*w, dy:+0.135*h},  // op 6 (airmind, purpose-driven)
    ];
    // Use profile-driven operators when profile is available, fall back to OP_DEFS
    // slice(2) skips task_dispatch (OP_DEFS[0]) AND worker_cluster (OP_DEFS[1])
    const _profOpList = (window._nexusProfile?.operators||[]).length > 0
      ? window._nexusProfile.operators.map(o=>({id:o.id, label:o.label, sub:o.task_dir, dormant:!!o.dormant}))
      : OP_DEFS.slice(2);
    _profOpList.forEach((d,i)=>{
      const off = _opOffsets[i] || {dx:-0.15*w, dy:0};
      const nd  = mkNode(d, tdx + off.dx, tdy + off.dy);
      nd.dormant = d.dormant || false;
      nd.w = nd.dormant ? nodeW()*0.80 : nodeW();
      nd.h = nd.dormant ? 50 : 60;
      // Override with saved position if available
      _applyLayout(nd);
      _opNodes.push(nd);
    });

    const wsn = getNode('ws_capture');
    _wdNode = mkNode({id:'watchdog',label:'WATCHDOG',sub:'watchdog.py',nodeType:'monitor'},
                     wsn.x, h*0.10);
    _wdNode.w = nodeW()*0.82; _wdNode.h = 54; _applyLayout(_wdNode);

    // TASK AUDIT: independent node, right of watchdog, same Y — observes task/brief currency
    _auditNode = mkNode({id:'task_audit', label:'TASK AUDIT', sub:'audit_task_currency.py',nodeType:'monitor'},
                        w*0.62, h*0.10);
    _auditNode.w = nodeW()*0.88; _auditNode.h = 54; _applyLayout(_auditNode);

    // REPORT REFRESH: analytics-refresh meta-node — between watchdog and task_audit
    _rrNode = mkNode({id:'report_refresh', label:'REPORT REFRESH', sub:'/pipeline-reports',nodeType:'monitor'},
                     w*0.53, h*0.10);
    _rrNode.w = nodeW()*0.85; _rrNode.h = 54; _applyLayout(_rrNode);

    // ERROR LOG: above the top rail, between ws_capture and stub_extract
    _errNode = mkNode({id:'error_log',label:'ERROR LOG',sub:'failures & timeouts'},
                      txs[1]+(txs[2]-txs[1])*0.45, topY - h*0.11);
    _errNode.w = nodeW()*0.80; _errNode.h = 44; _applyLayout(_errNode);

    // AIRMIND CLASSIFIER: below the bottom rail — parallel classify branch
    _acNode = mkNode({id:'airmind_classifier', label:'AIRMIND CLASSIFY', sub:'classify_airmind.py',nodeType:'transform'},
                     bxs[5-2], botY + h*0.115);
    _acNode.w = nodeW()*1.05; _acNode.h = 54; _applyLayout(_acNode);

    // AIRMIND OFFER GEN: between classifier and task_dispatch on the airmind branch
    _aoNode = mkNode({id:'airmind_offer_gen', label:'AIRMIND OFFERS', sub:'offer_gen_autonomous.py',nodeType:'transform'},
                     w*0.73, botY + h*0.115);
    _aoNode.w = nodeW()*1.05; _aoNode.h = 54; _applyLayout(_aoNode);

    // AIRMIND EXPORT: PDF exporter below op_airmind, for manual submission
    _aeNode = mkNode({id:'airmind_export', label:'AIRMIND PDF', sub:'export_airmind_pdf.py'},
                     w*0.68, botY + h*0.245);
    _aeNode.w = nodeW()*1.05; _aeNode.h = 54; _applyLayout(_aeNode);

    // MCP SERVER node: external SSE transport, right of centre between rails (REQ-MCP-TRANSPORT-01)
    // Evict stale saved position — old default was off-canvas far-right (xf≈0.95)
    try { const _l=JSON.parse(localStorage.getItem('nexus_node_layout')||'{}'); if(_l['mcp_server']&&(_l['mcp_server'].xf||0)>0.85){delete _l['mcp_server'];localStorage.setItem('nexus_node_layout',JSON.stringify(_l));} } catch(e){}
    _mcpNode = mkNode({id:'mcp_server', label:'MCP SERVER', sub:'SSE transport · 20 tools', nodeType:'source'},
                      w*0.72, h*0.51);
    _mcpNode.w = nodeW()*1.05; _mcpNode.h = 54; _applyLayout(_mcpNode);

    // WEBSHADOW MCP node: capture automation MCP process at port 40001 (REQ-051)
    const _wsCap = getNode('ws_capture');
    _wsMcpNode = mkNode({id:'ws_mcp', label:'WS MCP', sub:'port 40001 · capture automation', nodeType:'source'},
                        (_wsCap ? _wsCap.x : w*0.36) - nodeW()*1.55, h*0.105);
    _wsMcpNode.w = nodeW()*1.05; _wsMcpNode.h = 54; _applyLayout(_wsMcpNode);

    // DISCORD node: external integration, bottom-left (REQ-045)
    _discordNode = mkNode({id:'discord', label:'DISCORD', sub:'bot + webhook', nodeType:'monitor'},
                          w*0.05, h*0.88);
    _discordNode.w = nodeW(); _discordNode.h = 54; _applyLayout(_discordNode);

    // REQ-VIZ-003: ENRICHED DB — secondary node below sqlite_db, shows enriched record count
    // Positioned at right side of canvas, between top and bottom rails
    const _sqliteNode = _nodes.find(n=>n.id==='sqlite_db');
    const _enrX = _sqliteNode ? _sqliteNode.x - nodeW()*0.15 : w*0.88;
    _enrDbNode = mkNode({id:'enriched_db', label:'ENRICHED DB', sub:'desc + ai metadata',nodeType:'store'},
                        _enrX, topY + (botY - topY) * 0.44);
    _enrDbNode.w = nodeW()*0.95; _enrDbNode.h = 56; _applyLayout(_enrDbNode);

    // Build connection list — operator fan connections are profile-driven when available
    const _profLoaded = (window._nexusProfile?.operators||[]).length > 0;
    const _baseConns = CONN_DEFS.filter(c => !c.id.startsWith('td_') || c.id === 'td_vert' || c.id === 'audit_to_td');
    const _tdConns = _profLoaded
      ? window._nexusProfile.operators.map(op=>({id:'td_'+op.key, from:'task_dispatch', to:op.id, dir:'rl', dashed:!!op.dormant}))
      : CONN_DEFS.filter(c => c.id.startsWith('td_') && c.id !== 'td_vert' && c.id !== 'audit_to_td');
    _conns = [..._baseConns, ..._tdConns].map(d=>({...d, pts:[], status:'blocked'}));
    // Re-inject any known worker nodes (persist across resize/rebuild)
    if (_lastWorkers  && _lastWorkers.length)  { setWorkerNodes(_lastWorkers); }
    if (_lastPlugins  && _lastPlugins.length)   { setPluginNodes(_lastPlugins); }
    else                                         { computePaths(); }
  }

  // Dynamically inject browser plugin nodes below ws_mcp (REQ-051)
  function setPluginNodes(plugins) {
    _lastPlugins = plugins || [];
    // Remove stale plugin nodes and their connections
    _opNodes     = _opNodes.filter(n => !String(n.id).startsWith('_p_'));
    _conns       = _conns.filter(c  => !String(c.id).startsWith('wsmcp_p'));
    _pluginNodes = [];
    const wsm = _wsMcpNode;
    if(!wsm || !_lastPlugins.length) { computePaths(); return; }
    const num     = _lastPlugins.length;
    const nw      = Math.round(nodeW() * 0.72);
    const nh      = 42;
    const spacing = nw * 1.18;
    const startX  = wsm.x - ((num - 1) / 2) * spacing;
    const plugY   = wsm.y + CH() * 0.095;
    _lastPlugins.forEach((p, i) => {
      const pid  = p.plugin_id || ('plugin' + i);
      const id   = '_p_' + pid;
      const st   = p.status || 'unknown';
      const nd   = mkNode({
        id, nodeType: 'source',
        label: 'BROWSER',
        sub:   (p.ip || pid).slice(0, 16),
      }, startX + i * spacing, plugY);
      nd.w      = nw; nd.h = nh;
      nd.status = st === 'active' ? 'active' : st === 'idle' ? 'ready' : 'ready';
      nd.metric  = p.capabilities ? (p.capabilities[0] || '').slice(0, 10) : 'connected';
      nd.metric2 = p.last_poll ? '' : 'polling';
      nd._info   = { plugin_id: pid, ip: p.ip, status: st, capabilities: p.capabilities };
      _pluginNodes.push(nd);
      _opNodes.push(nd);
      _conns.push({id: 'wsmcp_p' + i, from: 'ws_mcp', to: id, dir: 'vert', dashed: true, pts: [], status: 'active'});
    });
    computePaths();
  }

  // REQ-038: dynamically inject individual worker nodes below worker_cluster
  function setWorkerNodes(workers) {
    _lastWorkers = workers || [];
    // Remove stale worker nodes from _opNodes and their connections from _conns
    _opNodes = _opNodes.filter(n => !String(n.id).startsWith('_w_'));
    _conns   = _conns.filter(c => !String(c.id).startsWith('wc_w'));
    _workerNodes = [];
    if (!_lastWorkers.length) { computePaths(); return; }
    const wcn = _wcNode;
    if (!wcn) { computePaths(); return; }
    const num = _lastWorkers.length;
    const nw  = Math.round(nodeW() * 0.68);
    const nh  = 42;
    const spacing = nw * 1.2;
    const startX = wcn.x - ((num - 1) / 2) * spacing;
    const wrkY   = wcn.y + CH() * 0.072;
    _lastWorkers.forEach((w, i) => {
      const id = '_w_' + (w.worker_id || i);
      const nd = mkNode({
        id, nodeType: 'operator',
        label: (w.adapter_type || 'WORKER').slice(0, 8).toUpperCase(),
        sub:   (w.hostname || w.worker_id || ('w' + i)).slice(0, 14),
      }, startX + i * spacing, wrkY);
      nd.w = nw; nd.h = nh;
      const st = w.status || 'stopped';
      nd.status  = st === 'busy' ? 'active' : st === 'idle' ? 'ready' : 'stop';
      nd.metric  = w.current_task ? String(w.current_task).slice(0, 12) : '—';
      nd.metric2 = w.queue_depth  ? 'q:' + w.queue_depth : '';
      _workerNodes.push(nd);
      _opNodes.push(nd);
      const cst = st === 'busy' ? 'active' : st === 'idle' ? 'ready' : 'blocked';
      _conns.push({id: 'wc_w' + i, from: 'worker_cluster', to: id, dir: 'vert', dashed: true, pts: [], status: cst});
    });
    computePaths();
  }

  function lerp(a,b,t){ return a+(b-a)*t; }
  function evalB(cp,t){
    if(cp.length===2) return {x:lerp(cp[0].x,cp[1].x,t),y:lerp(cp[0].y,cp[1].y,t)};
    if(cp.length===4){
      const u=1-t;
      return {x:u*u*u*cp[0].x+3*u*u*t*cp[1].x+3*u*t*t*cp[2].x+t*t*t*cp[3].x,
              y:u*u*u*cp[0].y+3*u*u*t*cp[1].y+3*u*t*t*cp[2].y+t*t*t*cp[3].y};
    }
    const u=1-t;
    return {x:u*u*cp[0].x+2*u*t*cp[1].x+t*t*cp[2].x,
            y:u*u*cp[0].y+2*u*t*cp[1].y+t*t*cp[2].y};
  }
  function sampleB(cp,n){
    return Array.from({length:n+1},(_,i)=>evalB(cp,i/n));
  }
  function side(id,s){
    const n=getNode(id); if(!n) return {x:0,y:0};
    const hw=n.w/2,hh=n.h/2;
    return ({right:{x:n.x+hw,y:n.y},left:{x:n.x-hw,y:n.y},
             top:{x:n.x,y:n.y-hh},bottom:{x:n.x,y:n.y+hh}})[s]||{x:n.x,y:n.y};
  }
  function computePaths(){
    const w=CW(),h=CH();
    for(const c of _conns){
      if(c.dir==='vert')
        c.pts=sampleB([side(c.from,'bottom'),side(c.to,'top')],24);
      else if(c.dir==='bend'){
        const p0=side(c.from,'right'),p3=side(c.to,'right'),mx=w*0.975;
        c.pts=sampleB([p0,{x:mx,y:p0.y},{x:mx,y:p3.y},p3],64);
      }else if(c.dir==='cross'){
        const p0=side(c.from,'top'),p3=side(c.to,'bottom');
        c.pts=sampleB([p0,{x:(p0.x+p3.x)/2,y:(p0.y+p3.y)/2-h*.04},p3],48);
      }else if(c.dir==='err_up'){
        // node top → error_log bottom: short upward S-curve
        const p0=side(c.from,'top');
        const errN=getNode('error_log');
        if(errN){
          const p3={x:errN.x+errN.w/2*(c.from==='stub_extract'?0.3:-0.2), y:errN.y+errN.h/2};
          const my=(p0.y+p3.y)/2;
          c.pts=sampleB([p0,{x:p0.x,y:my},{x:p3.x,y:my},p3],32);
        } else { c.pts=[p0,p0]; }
      }else if(c.dir==='err_ret'){
        // error_log bottom → ws_capture top: S-curve downward
        const p0=side(c.from,'bottom'), p3=side(c.to,'top');
        const my=(p0.y+p3.y)/2;
        c.pts=sampleB([p0,{x:p0.x,y:my},{x:p3.x,y:my},p3],48);
      }else if(c.dir==='audit_td'){
        // task_audit (top) → task_dispatch (bottom-right): S-curve down and right
        const p0=side(c.from,'bottom'), p3=side(c.to,'top');
        const my1=(p0.y+p3.y)*0.38, my2=(p0.y+p3.y)*0.62;
        c.pts=sampleB([p0,{x:p0.x,y:my1},{x:p3.x,y:my2},p3],64);
      }else if(c.dir==='rpt_qry'){
        // top-rail node → report_refresh (above top rail): upward S-curve query arc
        const p0=side(c.from,'top'), p3=side(c.to,'bottom');
        const my=(p0.y+p3.y)/2;
        c.pts=sampleB([p0,{x:p0.x,y:my},{x:p3.x,y:my},p3],32);
      }else if(c.dir==='lr')
        c.pts=sampleB([side(c.from,'right'),side(c.to,'left')],24);
      else
        c.pts=sampleB([side(c.from,'left'),side(c.to,'right')],24);
    }
  }

  function getNode(id){
    if(id==='watchdog')            return _wdNode;
    if(id==='error_log')           return _errNode;
    if(id==='task_audit')          return _auditNode;
    if(id==='report_refresh')      return _rrNode;
    if(id==='airmind_classifier')  return _acNode;
    if(id==='airmind_offer_gen')   return _aoNode;
    if(id==='airmind_export')       return _aeNode;
    if(id==='enriched_db')          return _enrDbNode;
    if(id==='mcp_server')           return _mcpNode;
    if(id==='ws_mcp')               return _wsMcpNode;
    if(id==='discord')              return _discordNode;
    const opN = _opNodes.find(n=>n.id===id);
    if(opN) return opN;
    return _nodes.find(n=>n.id===id)||null;
  }
  function getConn(id){ return _conns.find(c=>c.id===id)||null; }
  function pathAt(c,t){
    const pts=c.pts; if(!pts||pts.length<2) return {x:0,y:0};
    const tc=Math.max(0,Math.min(1,t));
    const fi=tc*(pts.length-1), i0=Math.floor(fi), i1=Math.min(i0+1,pts.length-1);
    const f=fi-i0;
    return {x:lerp(pts[i0].x,pts[i1].x,f),y:lerp(pts[i0].y,pts[i1].y,f)};
  }

  return { rebuild, getNode, getConn, pathAt, computePaths, setWorkerNodes, setPluginNodes,
           get nodes(){ return _nodes; },
           get conns(){ return _conns; },
           get wdNode(){ return _wdNode; },
           get errNode(){ return _errNode; },
           get auditNode(){ return _auditNode; },
           get opNodes(){ return _opNodes; },
           get allNodes(){ return [..._nodes, ..._opNodes, _wdNode, _errNode, _auditNode, _rrNode, _acNode, _aoNode, _aeNode, _enrDbNode, _mcpNode, _wsMcpNode, _discordNode].filter(Boolean); } };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: HISTORY  – stores all raw events ever fetched, keyed by id
   ════════════════════════════════════════════════════════════════════════════ */
const History = (() => {
  const _events = [];             // ordered by ts ascending
  const _seen   = new Set();

  function addEvent(evt){
    if(_seen.has(evt.id)) return false;
    _seen.add(evt.id);
    evt._ms = new Date(evt.ts).getTime();
    _events.push(evt);
    _events.sort((a,b)=>a._ms-b._ms);
    return true;
  }

  function getRange(){
    if(!_events.length) return {min:Date.now(), max:Date.now()};
    return {min:_events[0]._ms, max:_events[_events.length-1]._ms};
  }

  // Return all events with ts <= cutoffMs
  function getUpTo(cutoffMs){
    return _events.filter(e=>e._ms<=cutoffMs);
  }

  function getAll(){ return _events; }
  function count(){ return _events.length; }

  return {addEvent, getRange, getUpTo, getAll, count};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: TIMELINE  – scrub cursor, play/pause, live vs frozen
   ════════════════════════════════════════════════════════════════════════════ */
const Timeline = (() => {
  let _live    = true;
  let _paused  = false;
  let _cursor  = Date.now();
  let _lastTickKey    = '';
  let _lastDensityCnt = -1;

  // View window: null = show full history range; otherwise clip to _viewSpanMs wide
  let _viewSpanMs  = null;
  let _viewStartMs = null;

  const track     = document.getElementById('tl-track');
  const fill      = document.getElementById('tl-fill');
  const thumb     = document.getElementById('tl-thumb');
  const nowLbl    = document.getElementById('tl-now');
  const startL    = document.getElementById('tl-start');
  const midL      = document.getElementById('tl-mid');
  const endL      = document.getElementById('tl-end');
  const ticksDiv  = document.getElementById('tl-ticks');
  const densityCv = document.getElementById('tl-density');

  let _dragging = false;

  function fmtTime(ms){
    const d=new Date(ms);
    return d.toTimeString().slice(0,8);
  }

  function _viewRange(){
    const {min,max}=History.getRange();
    if(!_viewSpanMs) return {min,max};
    const s = (_viewStartMs !== null) ? _viewStartMs : max - _viewSpanMs;
    return {min: s, max: s + _viewSpanMs};
  }
  function pctFromMs(ms){
    const {min,max}=_viewRange();
    if(max===min) return 100;
    return Math.max(0,Math.min(100,(ms-min)/(max-min)*100));
  }
  function msFromPct(pct){
    const {min,max}=_viewRange();
    return min+(max-min)*(pct/100);
  }
  function _panToVisible(){
    if(!_viewSpanMs || _viewStartMs === null) return;
    const {min:gmin,max:gmax}=History.getRange();
    const margin = _viewSpanMs * 0.12;
    const vEnd = _viewStartMs + _viewSpanMs;
    const cur = _live ? Date.now() : _cursor;
    if(cur < _viewStartMs + margin){
      _viewStartMs = Math.max(gmin, cur - margin);
    } else if(cur > vEnd - margin){
      _viewStartMs = Math.max(gmin, Math.min(gmax - _viewSpanMs, cur - _viewSpanMs + margin));
    }
  }

  function render(){
    const {min,max}=History.getRange();
    startL.textContent = History.count()>0 ? fmtTime(min) : '—';
    endL.textContent   = History.count()>0 ? fmtTime(max) : '—';
    const pct = _live ? 100 : pctFromMs(_cursor);
    fill.style.width  = pct+'%';
    thumb.style.left  = pct+'%';
    nowLbl.textContent = _live ? 'LIVE' : fmtTime(_cursor);
    nowLbl.style.color = _live ? '#00cc66' : '#3a7fff';
    if(midL&&History.count()>0) midL.textContent=fmtTime((min+max)/2);
    // REQ-020 — Tick marks: HH:MM (or MM:SS for sub-minute zoom)
    if(ticksDiv && History.count()>0){
      const {min:vMin,max:vMax}=_viewRange();
      if(vMax>vMin){
        const spanMs=vMax-vMin;
        const IVLS=[10e3,30e3,60e3,5*60e3,15*60e3,30*60e3,60*60e3];
        const tickMs=IVLS.find(i=>spanMs/i>=2&&spanMs/i<=12)||60*60e3;
        const first=Math.ceil(vMin/tickMs)*tickMs;
        const ticks=[];
        for(let t=first;t<=vMax;t+=tickMs) ticks.push(t);
        // Rebuild DOM only when label set changes; always update positions.
        const labelKey=ticks.map(t=>Math.floor(t/1000)).join(',')+':'+tickMs;
        if(labelKey!==_lastTickKey){
          _lastTickKey=labelKey;
          ticksDiv.innerHTML='';
          ticks.forEach(t=>{
            const el=document.createElement('div');
            el.className='tl-tick';
            el.dataset.ts=t;
            el.textContent=tickMs>=60e3
              ?new Date(t).toTimeString().slice(0,5)  // HH:MM
              :new Date(t).toTimeString().slice(3,8); // MM:SS
            ticksDiv.appendChild(el);
          });
        }
        Array.from(ticksDiv.children).forEach(el=>{
          const t=+el.dataset.ts;
          el.style.left=((t-vMin)/(vMax-vMin)*100)+'%';
        });
      }
    }
  }

  function scrubTo(pct){
    _cursor = msFromPct(Math.max(0,Math.min(100,pct)));
    _live   = (pct >= 99.5);
    render();
  }

  function pctFromEvent(e){
    const r=track.getBoundingClientRect();
    return (e.clientX-r.left)/r.width*100;
  }

  // Track click anywhere (not on thumb) — jump and capture pointer
  track.addEventListener('pointerdown', e=>{
    if(e.target===thumb) return;
    _dragging=true; _paused=true;
    track.setPointerCapture(e.pointerId);
    scrubTo(pctFromEvent(e));
  });
  track.addEventListener('pointermove', e=>{
    if(!_dragging) return;
    scrubTo(pctFromEvent(e));
  });
  track.addEventListener('pointerup', ()=>{ _dragging=false; });

  // Thumb drag — pointer capture so it tracks outside track bounds
  thumb.addEventListener('pointerdown', e=>{
    e.stopPropagation();
    _dragging=true; _paused=true;
    thumb.setPointerCapture(e.pointerId);
  });
  thumb.addEventListener('pointermove', e=>{
    if(!_dragging) return;
    scrubTo(pctFromEvent(e));
  });
  thumb.addEventListener('pointerup', ()=>{ _dragging=false; });

  // Speed control: -8 = rewind 8x, -1 = rewind 1x, 0 = paused, 1 = play, 8 = fwd 8x
  let _speedMult = 1;
  const SPEEDS = [-8,-2,0,1,2,8];
  const speedBtns = {
    rr: document.getElementById('spd-rr'),
    r:  document.getElementById('spd-r'),
    p:  document.getElementById('spd-p'),
    f:  document.getElementById('spd-f'),
    ff: document.getElementById('spd-ff'),
    live: document.getElementById('spd-live'),
  };

  function _setSpeed(s){
    _speedMult=s;
    if(s===0){ _paused=true; }
    else { _paused=false; if(s>0&&_live) _live=true; }
    _updateSpeedUI();
    render();
  }
  function _updateSpeedUI(){
    Object.values(speedBtns).forEach(b=>b&&b.classList.remove('active'));
    if(_speedMult===-8&&speedBtns.rr) speedBtns.rr.classList.add('active');
    if(_speedMult===-2&&speedBtns.r)  speedBtns.r.classList.add('active');
    if(_paused&&speedBtns.p)          speedBtns.p.classList.add('active');
    if(_speedMult===1&&!_paused&&speedBtns.f)  speedBtns.f.classList.add('active');
    if(_speedMult===2&&speedBtns.ff)  speedBtns.ff.classList.add('active');
    if(_speedMult===8&&speedBtns.ff)  speedBtns.ff.classList.add('active');
    if(_live&&speedBtns.live)         speedBtns.live.classList.add('active');
    speedBtns.p.innerHTML = _paused ? '&#9654;' : '&#x23F8;';
  }
  speedBtns.rr.addEventListener('click',()=>{ _live=false; _setSpeed(-8); });
  speedBtns.r.addEventListener('click', ()=>{ _live=false; _setSpeed(-2); });
  speedBtns.p.addEventListener('click', ()=>{ _setSpeed(_paused?1:0); });
  speedBtns.f.addEventListener('click', ()=>{ _setSpeed(2); });
  speedBtns.ff.addEventListener('click',()=>{ _setSpeed(8); });
  speedBtns.live.addEventListener('click',()=>{ _live=true; _cursor=Date.now(); _setSpeed(1); });

  // Prev / Next event jump
  function _jumpToEvent(dir){
    const events = History.getAll();
    if(!events.length) return;
    const cur = getCursor();
    if(dir > 0){
      // next: first event strictly after cursor
      const next = events.find(e => e._ms > cur + 500);
      if(next){ _live=false; _cursor=next._ms; _paused=true; render(); }
    } else {
      // prev: last event strictly before cursor
      const prev = [...events].reverse().find(e => e._ms < cur - 500);
      if(prev){ _live=false; _cursor=prev._ms; _paused=true; render(); }
    }
  }
  speedBtns.prev = document.getElementById('spd-prev');
  speedBtns.next = document.getElementById('spd-next');
  speedBtns.prev.addEventListener('click', ()=> _jumpToEvent(-1));
  speedBtns.next.addEventListener('click', ()=> _jumpToEvent(+1));

  // Keyboard shortcuts
  document.addEventListener('keydown', e=>{
    if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA') return;
    if(e.code==='Space'){ e.preventDefault(); _setSpeed(_paused?1:0); }
    else if(e.code==='ArrowLeft'){ e.preventDefault(); _jumpToEvent(-1); }
    else if(e.code==='ArrowRight'){ e.preventDefault(); _jumpToEvent(+1); }
    else if(e.code==='End'){ e.preventDefault(); _live=true; _cursor=Date.now(); _setSpeed(1); }
    else if(e.code==='Home'){ e.preventDefault(); _setZoom('all'); }
  });

  // ── Zoom span controls ────────────────────────────────────────────────────
  const _zoomSpans = {'1m':60e3,'5m':5*60e3,'30m':30*60e3,'all':null};
  const _zoomBtns  = {
    '1m':  document.getElementById('tlz-1m'),
    '5m':  document.getElementById('tlz-5m'),
    '30m': document.getElementById('tlz-30m'),
    'all': document.getElementById('tlz-all'),
  };
  function _setZoom(key){
    _viewSpanMs = _zoomSpans[key];
    if(_viewSpanMs !== null){
      const {min:gmin,max:gmax}=History.getRange();
      const cur = _live ? Date.now() : _cursor;
      _viewStartMs = Math.max(gmin, Math.min(gmax-_viewSpanMs, cur-_viewSpanMs/2));
    } else {
      _viewStartMs = null;
    }
    Object.entries(_zoomBtns).forEach(([k,b])=>b&&b.classList.toggle('active',k===key));
    _lastTickKey=''; _lastDensityCnt=-1;  // force redraw
    render();
  }
  Object.entries(_zoomBtns).forEach(([k,b])=>{ if(b) b.addEventListener('click',()=>_setZoom(k)); });
  _setZoom('all');  // start with full range active

  let _lastFrameMs = null;
  function tick(nowMs){
    if(_lastFrameMs===null){ _lastFrameMs=nowMs; }
    const dt=(nowMs-_lastFrameMs)/1000; // seconds since last frame
    _lastFrameMs=nowMs;
    if(_live && !_paused){ _cursor=nowMs; }
    else if(!_paused && !_live){
      _cursor += dt * _speedMult * 1000;
      const {min,max}=History.getRange();
      _cursor=Math.max(min, Math.min(max, _cursor));
      if(_cursor>=max){ _live=true; _setSpeed(1); }
    }
  }

  function getCursor(){ return _live ? Date.now() : _cursor; }
  function isPaused(){ return _paused; }

  _updateSpeedUI();
  return { tick, getCursor, isPaused, render,
    get live(){ return _live; }, get paused(){ return _paused; },
    get speedMult(){ return _speedMult; } };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: PACKETS  – live packet objects traversing pipes
   ════════════════════════════════════════════════════════════════════════════ */
const Packets = (() => {
  let _active = [];

  // ── helpers ──────────────────────────────────────────────────────────────
  // baseSpeed: t-units per frame at speedMult=1 (@60fps).
  // Visual transit speed — base from TRANSIT table, heat-boosted when the pipe is hot.
  // Heat factor range: 0.0 = cool (×1.0), 1.0 = saturated (×2.5 speed).
  // duration_s is intentionally NOT used for speed; it drives pill SIZE only.
  function _baseSpeed(evt){
    const base = SPEED[evt.conn] || 0.002;
    const heat = Traces.getHeat(evt.conn, Date.now(), 60);
    return base * (1 + heat * 1.5);
  }

  // count drives pill width only (not speed).
  // Prefers explicit burst field, then extracts first number from label.
  function _count(evt){
    if(evt.burst && evt.burst > 1) return evt.burst;
    const cm = evt.label.match(/(\+|at |total |extracted )?(\d[\d,]*)/);
    return cm ? Math.max(1, parseInt(cm[2].replace(/,/g,''))||1) : 1;
  }

  function _push(conn, label, type, evtId, ts, t0, baseSpeed, count){
    _active.push({
      t:t0, conn, label,
      type, col:PACKET_COL[type]||PACKET_COL.capture,
      evtId, destFlashed:(t0>=0.99), trail:[], ts,
      count, baseSpeed,
      born: Date.now(),   // for max-age pruning
    });
  }

  // ── inject ────────────────────────────────────────────────────────────────
  // forceAnimate=true  → newly seen by frontend; always start at t=0, spawn burst if present.
  // forceAnimate=false → history scrub; position proportionally to age at cursorMs.
  function inject(evt, atMs, forceAnimate){
    const c=Layout.getConn(evt.conn);
    if(!c||!c.pts||c.pts.length<2) return;

    const baseSpeed = _baseSpeed(evt);
    const count     = _count(evt);

    if(forceAnimate){
      // Burst: N pills staggered 0.03 apart so they travel as a visible cluster.
      // Pill 0 is the tail (t=0), pill N-1 is the leader (t=(N-1)*0.03).
      const n = (evt.burst && evt.burst > 1) ? Math.min(evt.burst, 8) : 1;
      for(let i=0; i<n; i++){
        const t0 = i * 0.03;
        const lbl = n>1 ? (i===n-1 ? evt.label : String(n-i)) : evt.label;
        _push(evt.conn, lbl, evt.type, evt.id+'_'+i, evt.ts, t0, baseSpeed, count);
      }
      // Stack source glow — grows brighter with each injected packet
      const sn = Layout.getNode(c.from);
      if(sn){
        const step = window.NODE_CFG.srcGlowStep || 0.4;
        sn.srcGlow = Math.min(1.0, (sn.srcGlow||0) + step);
      }
      // Spawn departure float at source node for extract and error packets
      if(typeof FloatNums !== 'undefined' && (evt.type==='extract'||evt.type==='error'||evt.type==='capture')){
        FloatNums.spawnAtSource(evt, sn);
      }
      return;
    }

    // History-scrub: place single pill at age-proportional position
    const cursorMs = (atMs !== undefined) ? atMs : Timeline.getCursor();
    const evtMs    = evt._ms || new Date(evt.ts).getTime();
    const age_s    = Math.max(0, (cursorMs - evtMs) / 1000);
    // Convert age to t using the same baseSpeed so scrub is consistent
    const framesNeeded = 1 / baseSpeed; // frames to cross pipe at speedMult=1
    const t0 = Math.min(0.99, age_s * 60 / framesNeeded);

    if(t0 >= 0.99){
      Traces.add(evt);
      return;
    }
    _push(evt.conn, evt.label, evt.type, evt.id, evt.ts, t0, baseSpeed, count);
  }

  // Max age a pill is allowed to live before being force-dropped (live mode).
  // Prevents any pill from ever appearing stuck regardless of speed calculation.
  const MAX_PILL_AGE_MS = 30000;

  // ── step ──────────────────────────────────────────────────────────────────
  function step(){
    const surviving=[];
    const nowMs = Date.now();
    // REQ-011: rewind = run packets backward; arrivals do not fire side-effects.
    const isRewind = !Timeline.isPaused() && Timeline.speedMult < 0;
    for(const p of _active){
      const c=Layout.getConn(p.conn); if(!c) continue;

      // Always advance — even when paused use a slow drain so pills don't freeze.
      const rate = Timeline.isPaused()
        ? p.baseSpeed * 0.15          // drain slowly while paused, never freeze
        : p.baseSpeed * Math.max(0.1, Math.abs(Timeline.speedMult));

      // REQ-011: backward step in rewind mode — drop packet silently at source.
      if(isRewind){
        p.t -= rate;
        if(p.t <= 0) continue;  // reached source end — discard silently
        if(Timeline.live && (nowMs - (p.born||nowMs)) > MAX_PILL_AGE_MS) continue;
        const pos = Layout.pathAt(c, p.t);
        p.trail.push({...pos});
        if(p.trail.length > 120) p.trail.shift();
        surviving.push(p);
        continue;  // skip all forward-arrival side-effects
      }

      // REQ-033: upstream steering packets travel in reverse (source ← destination)
      if(p.upstream){
        p.t -= rate * 0.45;
        if(p.t <= 0){
          const src = Layout.getNode(c.from);
          if(src) src.flash = Math.min(1.0, (src.flash||0) + 0.35);
          continue;  // consumed at upstream source
        }
        if(Timeline.live && (nowMs - (p.born||nowMs)) > MAX_PILL_AGE_MS) continue;
        surviving.push(p); continue;
      }

      p.t += rate;

      // Safety prune: drop pills older than MAX_PILL_AGE_MS (stuck-pill killer)
      if(Timeline.live && (nowMs - (p.born||nowMs)) > MAX_PILL_AGE_MS) continue;

      const pos=Layout.pathAt(c,p.t);
      p.trail.push({...pos});
      if(p.trail.length>120) p.trail.shift();

      if(p.t>=1.0){
        if(!p.destFlashed){
          p.destFlashed=true;
          const dn=Layout.getNode(c.to); if(dn) dn.flash=1.0;
          if(typeof FloatNums!=='undefined'&&dn) FloatNums.spawnForPacket(p,dn);
          if(typeof NodeStats!=='undefined'){ NodeStats.push(c.from); NodeStats.push(c.to); }

          // Log packet transit into both NodeCard log streams
          {
            const _lbl = (p.label||'').substring(0, 52);
            const _pc  = p.type==='error'?'err':'pkt';
            _pushNcPkt(c.to,   '\u2190 ' + _lbl, _pc);   // inbound  at destination
            _pushNcPkt(c.from, '\u2192 ' + _lbl, 'pkt'); // outbound at source
          }

          // Zero-yield detection: extract packet with +0 or no count → fail signal
          if(p.type==='extract' && dn){
            const lbl=p.label||'';
            const mPlus=lbl.match(/\+(\d[\d,]*)/);
            const yielded=mPlus ? parseInt(mPlus[1].replace(/,/g,''),10) : -1;
            if(mPlus && yielded===0){
              dn.failFlash=Math.min(1.0,(dn.failFlash||0)+0.55);
              // LiveFeed error row
              if(typeof LiveFeed!=='undefined'){
                LiveFeed.push({type:'error',label:'IDLE — 0 new from '+c.from.replace('_',' '),
                  ts:p.ts||new Date().toISOString().slice(0,19).replace('T',' ')});
              }
              // NodeCard log entry
              const ncLog=document.getElementById('ncd-log-'+c.to);
              if(ncLog){
                const d2=document.createElement('div');
                d2.className='nc-log-entry err';
                d2.textContent='IDLE: 0 new stubs extracted';
                ncLog.appendChild(d2); ncLog.scrollTop=ncLog.scrollHeight;
                while(ncLog.children.length>80) ncLog.removeChild(ncLog.firstChild);
              }
              // REQ-030: route 0-yield error packet to error_log via err_extract
              Packets.inject({
                conn:'err_extract', label:'0-YIELD '+c.from.replace('_',' '),
                type:'error', id:'zy_'+Date.now(),
                ts:p.ts||new Date().toISOString().slice(0,19).replace('T',' '),
                _ms:Date.now(), burst:0,
              }, undefined, true);
            }
          }

          if(typeof DataFetch !== 'undefined') DataFetch.refresh();
        }
        if(p.t>1.02) continue; // drop after flash frame
      }
      surviving.push(p);
    }
    _active=surviving;
  }

  // ── history scrub ─────────────────────────────────────────────────────────
  function rebuildFromHistory(cursorMs){
    _active=[];
    Traces.clear();
    const evts=History.getUpTo(cursorMs);
    for(const e of evts) inject(e, cursorMs);
  }

  function _pushSteering(conn, type){
    _active.push({
      t: 0.0,
      conn, label: type.toUpperCase().slice(0,3),
      type, col: STEERING_COL[type] || {r:200,g:80,b:255},
      evtId: 'steer_'+Date.now()+'_'+Math.random().toString(36).slice(2),
      destFlashed: true, trail: [],
      ts: new Date().toISOString().slice(0,19),
      count: 1, baseSpeed: 0.0012,
      born: Date.now(),
      upstream: true,
    });
  }

  function injectSteering(conn, type){
    const c = Layout.getConn(conn);
    if(!c || !c.pts || c.pts.length < 2) return;
    _pushSteering(conn, type);
  }

  function getActive(){ return _active; }
  function count(){ return _active.length; }

  return {inject, injectSteering, step, rebuildFromHistory, getActive, count};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: TRACES  – stub, no storage, no rendering.
   Heat is derived live from History so pipe glow still works.
   ════════════════════════════════════════════════════════════════════════════ */
const Traces = (() => {
  // No dots are stored or drawn. Traces.add() is intentionally a no-op.
  function add(){}
  function clear(){}
  function getAll(){ return []; }
  function hit(){ return null; }

  // Pipe heat: count History events on this conn within the heat window.
  // Saturates at 10 events = 1.0. Drives pipe glow in Renderer.
  function getHeat(connId, cursorMs, windowSec){
    const wms = (windowSec || HEAT_WINDOW) * 1000;
    let n = 0;
    for(const e of History.getAll()){
      if(e.conn === connId && Math.abs((e._ms||0) - cursorMs) < wms) n++;
    }
    return Math.min(1, n / 10);
  }

  return {add, hit, getAll, clear, getHeat};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: STATE_APPLIER  – maps /pipeline-data JSON → node statuses
   ════════════════════════════════════════════════════════════════════════════ */
const StateApplier = (() => {
  let _lastData = null;
  // Stale-process detection: track consecutive polls with unchanged values
  const _prev = {stubs:null, wsCaps:null, descPct:null};
  const _same = {stubs:0, wsCaps:0, descPct:0};
  const STALE_POLLS = 6; // 6 × 8s = 48s unchanged → STOP (headroom for 28-35s batches)
  // Error tally for error_log node metric
  let _errCount = 0;
  let _lastErrLabel = '';
  let _prevStubStale = false; // edge-detect stale transition to inject once
  let _prevWsStale   = false; // edge-detect ws_capture timeout to inject once

  function _badge(id, state, label){
    const el=document.getElementById(id); if(!el) return;
    el.className='tb-badge '+state;
    const lbl=document.getElementById(id+'-lbl'); if(lbl&&label) lbl.textContent=label;
  }
  function _trackStale(key, val){
    if(_prev[key]===val){ _same[key]++; } else { _same[key]=0; _prev[key]=val; }
    return _same[key] >= STALE_POLLS;
  }

  function _setText(id, val){
    const el=document.getElementById(id);
    if(el) el.textContent = (val===undefined||val===null) ? '—' : val;
  }
  // Persistent lerp + flash state for topbar sparkline color transitions
  const _spkLerp  = { r:42, g:143, b:255 };
  const _spkFlash = { r:42, g:143, b:255, a:0 };  // snap-flash layer
  let   _spkZone  = 0;  // 0=blue, 1=orange, 2=red

  function _spkTarget(zone){ return zone===2?{r:255,g:85,b:85}:zone===1?{r:255,g:170,b:0}:{r:42,g:143,b:255}; }

  function _drawSparkline(id, vals){
    const cnv = document.getElementById(id);
    if(!cnv || vals.length < 2) return;
    const c = cnv.getContext('2d'), W = cnv.width, H = cnv.height;
    c.clearRect(0, 0, W, H);
    const mn = Math.min(...vals), mx = Math.max(...vals);
    const range = (mx - mn) || 1;
    const slope = vals.length>1 ? (vals[vals.length-1]-vals[0])/vals.length : 0;
    const zone  = slope>10 ? 2 : slope>3 ? 1 : 0;
    // On zone change: snap flash to new target color, reset lerp to accelerate toward it
    if(zone !== _spkZone){
      _spkZone = zone;
      const t=_spkTarget(zone);
      _spkFlash.r=t.r; _spkFlash.g=t.g; _spkFlash.b=t.b; _spkFlash.a=1.0;
    }
    // Fast lerp (k=0.18) so it catches up within ~15 frames
    const t=_spkTarget(zone), k=0.18;
    _spkLerp.r+=( t.r-_spkLerp.r)*k; _spkLerp.g+=(t.g-_spkLerp.g)*k; _spkLerp.b+=(t.b-_spkLerp.b)*k;
    // Flash alpha decays quickly
    _spkFlash.a = Math.max(0, _spkFlash.a - 0.06);

    const pts=vals.map((v,i)=>({x:i/(vals.length-1)*W, y:H-1-((v-mn)/range*(H-3))}));
    function _strokePath(col, lw, alpha){
      c.beginPath(); c.moveTo(pts[0].x,pts[0].y);
      for(let i=1;i<pts.length;i++){
        const cx=(pts[i-1].x+pts[i].x)/2;
        c.bezierCurveTo(cx,pts[i-1].y,cx,pts[i].y,pts[i].x,pts[i].y);
      }
      c.globalAlpha=alpha; c.strokeStyle=col; c.lineWidth=lw; c.stroke(); c.globalAlpha=1;
    }
    // Base lerp line
    _strokePath(`rgb(${Math.round(_spkLerp.r)},${Math.round(_spkLerp.g)},${Math.round(_spkLerp.b)})`, 1.2, 1.0);
    // Flash overlay — fades out fast after zone change
    if(_spkFlash.a > 0.01){
      _strokePath(`rgb(${_spkFlash.r},${_spkFlash.g},${_spkFlash.b})`, 1.8, _spkFlash.a);
    }
    c.globalAlpha=1;
    c.strokeStyle='#0c1e38'; c.lineWidth=0.5;
    c.beginPath(); c.moveTo(0,H-0.5); c.lineTo(W,H-0.5); c.stroke();
  }

  // Smooth bezier sparkline drawn directly onto a canvas element
  function _drawSparklineSm(cnv, vals, colStr, fillAlpha){
    if(!cnv || vals.length<2) return;
    const c=cnv.getContext('2d'), W=cnv.width||cnv.offsetWidth, H=cnv.height||cnv.offsetHeight;
    if(!W||!H) return;
    c.clearRect(0,0,W,H);
    const mn=Math.min(...vals), mx=Math.max(...vals), range=(mx-mn)||1;
    const pts=vals.map((v,i)=>({x:i/(vals.length-1)*W, y:H-2-((v-mn)/range*(H-4))}));
    if(fillAlpha>0){
      c.beginPath(); c.moveTo(pts[0].x,H); c.lineTo(pts[0].x,pts[0].y);
      for(let i=1;i<pts.length;i++){ const cx=(pts[i-1].x+pts[i].x)/2; c.bezierCurveTo(cx,pts[i-1].y,cx,pts[i].y,pts[i].x,pts[i].y); }
      c.lineTo(pts[pts.length-1].x,H); c.closePath();
      c.globalAlpha=fillAlpha; c.fillStyle=colStr; c.fill(); c.globalAlpha=1;
    }
    c.beginPath(); c.moveTo(pts[0].x,pts[0].y);
    for(let i=1;i<pts.length;i++){ const cx=(pts[i-1].x+pts[i].x)/2; c.bezierCurveTo(cx,pts[i-1].y,cx,pts[i].y,pts[i].x,pts[i].y); }
    c.strokeStyle=colStr; c.lineWidth=1.3; c.stroke();
    c.strokeStyle='rgba(255,255,255,0.05)'; c.lineWidth=0.5;
    c.beginPath(); c.moveTo(0,H-0.5); c.lineTo(W,H-0.5); c.stroke();
  }

  function _fmt(n){
    if(n===undefined||n===null) return '—';
    return Number(n).toLocaleString();
  }

  function apply(d){
    _lastData = d;
    const sc=d.stub_collection||{}, db=d.database||{}, mj=d.master_json||{};
    const wds=d.watchdog||{}, ws=d.webshadow||{}, rec=d.recapture||{}, pf=d.perf||{}, dc=d.desc_capture||{}, des=d.desc_extract_stats||{};

    // topbar
    _setText('m-jobs',  _fmt(db.total_jobs));
    _setText('m-stubs', _fmt(sc.stubs_collected));
    _setText('m-pgs',   sc.pages_done??'—');
    _setText('m-tot',   sc.pages_total??'—');
    _setText('m-caps',  _fmt(ws.total_captures));
    _setText('m-desc',  (db.desc_pct??0).toFixed(1)+'%');
    // perf topbar
    if(pf.json_size_kb) _setText('m-json-mb', (pf.json_size_kb/1024).toFixed(2));
    if(pf.db_size_kb)   _setText('m-db-mb',   (pf.db_size_kb/1024).toFixed(2));
    if(pf.collect_ms!=null) _setText('m-api-ms', pf.collect_ms);
    _drawSparkline('perf-spark', (pf.history||[]).map(h=>h.ms));
    // Live Feed background sparkline (average API perf)
    const lfBg=document.getElementById('lf-bg-spark');
    if(lfBg && (pf.history||[]).length>1){
      const lfLog=document.getElementById('lf-log');
      if(lfLog){ lfBg.width=lfLog.offsetWidth||300; lfBg.height=lfLog.offsetHeight||140; }
      _drawSparklineSm(lfBg,(pf.history||[]).map(h=>h.ms),'rgb(42,143,255)',0.08);
    }
    const wdAlive=!wds.exited && wds.log_mtime &&
      (Date.now()-new Date(wds.log_mtime).getTime())<120000;
    _setText('m-wd', wdAlive?'ALIVE':'STOP');
    document.getElementById('m-wd').style.color=wdAlive?'#00ff88':'#ff4040';
    document.getElementById('rdot').className='';

    // Health badges
    // WebShadow: age-based — stale if no capture in last 120s (avoids false STOP during 28s wait)
    const wsAge   = typeof ws.last_capture_age_s === 'number' ? ws.last_capture_age_s : 9999;
    const wsStale = wsAge > 120;
    // Stub extract stale: pages_done frozen AND WebShadow also stale.
    // If WebShadow is still capturing, extractor is just waiting on it — not stuck.
    // Normal batch cycle is ~55s (5 tabs + 28s wait + close + extract) so pages_done
    // freezes every cycle. Only flag as stuck when WS confirms nothing is moving.
    _trackStale('stubs', sc.pages_done); // keep counter advancing for when wsStale kicks in
    const stubStale = wsStale && _same['stubs'] >= STALE_POLLS;
    const stubDone2 = sc.complete===true;
    _badge('badge-stub',
      stubDone2 ? 'done' : stubStale ? 'stop' : (sc.stubs_collected>0 ? 'run' : 'idle'),
      stubDone2 ? 'STUB DONE' : stubStale ? 'STUB STOP' : 'STUB RUN');
    _badge('badge-ws',
      wsStale ? 'stop' : (ws.total_captures>0 ? 'run' : 'idle'),
      wsStale ? 'WS STOP' : (ws.total_captures>0 ? 'WS RUN' : 'WS IDLE'));
    _badge('badge-extract',
      stubDone2 ? 'done' : stubStale ? 'stop' : 'run',
      stubDone2 ? 'EXT DONE' : stubStale ? 'EXT STOP' : 'EXT RUN');
    _badge('badge-wd', wdAlive ? 'run' : 'stop', wdAlive ? 'WD ALIVE' : 'WD STOP');
    // Last-data age
    const ageEl=document.getElementById('tb-age');
    if(ageEl){ ageEl._lastOk=Date.now(); }
    if(!window._tbAgeTimer){
      window._tbAgeTimer=setInterval(()=>{
        const el=document.getElementById('tb-age'); if(!el||!el._lastOk) return;
        const s=Math.round((Date.now()-el._lastOk)/1000);
        el.textContent=(s<5?'live':s+'s ago');
        el.style.color=s>30?'#cc3333':s>10?'#8a6a00':'#1a3860';
      },1000);
    }

    const stubDone=sc.complete===true;
    const mjJobs = mj.total_jobs ?? db.total_jobs ?? 0;  // declare before any N() that uses it

    // Node states
    const N=(id,st,m,m2,info)=>{ const n=Layout.getNode(id);
      if(typeof m2==='object'&&m2!==null){info=m2;m2='';}
      if(n){n.status=st;n.metric=m||'';n.metric2=m2||'';n._info=info||{};} };

    // Pipeline gap helper: shows what % of upstream inputs are stuck at this node and why
    const _bn=(stuck,total,reason)=>{
      if(!total||total<=0) return 'no upstream data yet';
      if(stuck<=0) return '\u2714 full throughput \u2014 no gap';
      const pct=(stuck/total*100).toFixed(0);
      return '\u26a0 '+_fmt(stuck)+' of '+_fmt(total)+' ('+pct+'%) \u2014 '+reason;
    };

    const _usemePct = sc.pct ?? 0;
    const _usemePagesDone = sc.pages_done ?? 0;
    const _usemePagesTotal = sc.pages_total ?? 0;
    const _usemeStubs = sc.stubs_collected ?? 0;
    const _usemeCount = (d.database||{}).useme_count ?? mjJobs;
    const _upworkCount = (d.database||{}).upwork_count ?? 0;
    // Hoist desc stats so _bn() calls below can reference them
    const _descEx      = db.with_description || 0;
    const _descTot     = db.total_jobs || 0;
    const _descPct     = db.desc_pct || 0;
    const _descPending = db.without_description || Math.max(0, _descTot - _descEx);
    const _usemeMetric = _usemeCount>0 ? _fmt(_usemeCount)+' jobs' : '—';
    const _usemeMetric2 = _usemePct.toFixed(0)+'% scraped';
    N('useme',       'active',  _usemeMetric, _usemeMetric2,
      {'Platform':'Useme.com','Pages scraped':_fmt(_usemePagesDone)+' / '+_fmt(_usemePagesTotal),
       'Progress':_usemePct.toFixed(1)+'%','Stubs found':_fmt(_usemeStubs),
       'Jobs in DB':_fmt(_usemeCount),
       'Tier A (fit≥70)':_fmt((d.database||{}).tier_a_count||0),
       'Tier B (fit≥50)':_fmt((d.database||{}).tier_b_count||0),
       'Actionable A+B':_fmt((d.database||{}).tier_ab_count||0),
       'Pipeline gap':_bn(Math.max(0,_usemePagesTotal-_usemePagesDone),Math.max(_usemePagesTotal,1),'pages not yet captured by WebShadow')});

    const _uw = (d.upwork||{});
    const _uwRunning = _uw.running ?? false;
    const _uwStubs = _uw.stubs_this_session ?? 0;
    const _uwStatus = _uwRunning ? 'active' : _upworkCount > 0 ? 'done' : 'ready';
    N('upwork',
      _uwStatus,
      _upworkCount > 0 ? _fmt(_upworkCount)+' jobs' : '—',
      _uwRunning ? 'collecting…' : _uwStubs > 0 ? '+'+_fmt(_uwStubs)+' new' : 'idle',
      {'Platform':'Upwork.com',
       'Collector running':_uwRunning ? 'YES' : 'NO',
       'Jobs in DB':_fmt(_upworkCount),
       'Stubs this session':_fmt(_uwStubs),
       'Script':'collect_stubs_upwork.py',
       'Log':'upwork_collection_log.txt',
       'Pipeline gap':_bn(Math.max(0,_descTot-_upworkCount),Math.max(_descTot,1),'Upwork jobs not yet in DB')});
    // REQ-VIZ-004: Collector autonomy indicator — category slug + pages remaining
    const _scCatRaw   = sc.current_category || '';
    const _scCatSlug  = _scCatRaw ? _scCatRaw.replace(/,\d+$/, '') : '—';  // strip ",34" ID suffix
    const _scRemain   = (sc.pages_total!=null && sc.pages_done!=null) ? sc.pages_total - sc.pages_done : null;
    const _scProgress = (sc.pct != null) ? sc.pct.toFixed(1)+'%' : '—';
    const _scMetric2  = _scRemain != null ? `${sc.pages_done}/${sc.pages_total} pg (${_scProgress})` : `${sc.pages_done??'—'}/${sc.pages_total??'—'} pg`;
    N('ws_capture',  wsStale?'stop': stubDone?'done':'active',
      _fmt(sc.stubs_collected||0)+' stubs',
      _scMetric2,
      {'Pages done':    sc.pages_done??'—',
       'Pages total':   sc.pages_total??'—',
       'Pages remaining': _scRemain != null ? _fmt(_scRemain) : '—',
       'Progress':      _scProgress,
       'Category':      _scCatSlug,
       'Last batch':    sc.last_batch_stubs != null ? '+'+sc.last_batch_stubs : '—',
       'Batch size':10, 'Wait':'28s / batch',
       'Status':wsStale?'STALE – no capture >120s':stubDone?'DONE':'RUNNING',
       'Pipeline gap':_bn(_descPending,Math.max(_descTot,1),'jobs not yet captured (no HTML in WebShadow)')});
    const _seLastBatch = sc.last_batch_stubs!=null ? '+'+sc.last_batch_stubs : '—';
    const _seZeroStreak = sc.consecutive_zeros>0 ? sc.consecutive_zeros+'x zero' : 'none';
    const _seStatus = stubStale ? ('STALE – '+_same['stubs']+' polls frozen') : stubDone ? 'COMPLETE' : 'RUNNING';
    N('stub_extract', stubStale?'stop': stubDone?'done':'active',
      _fmt(sc.stubs_collected||0)+' stubs',
      _seLastBatch!=='—' ? _seLastBatch+' last' : _seZeroStreak!=='none' ? _seZeroStreak : '—',
      {'Stubs extracted': _fmt(sc.stubs_collected||0),
       'Last batch':      _seLastBatch,
       'Zero streak':     _seZeroStreak,
       'Last extract':    sc.last_extract_ts||'—',
       'Category':        sc.current_category||'—',
       'Status':          _seStatus,
       'Pipeline gap':_bn(Math.max(0,_descTot-(sc.stubs_collected||0)),Math.max(_descTot,1),'stubs not yet extracted from captured pages')});
    N('master_json', 'active',  _fmt(mjJobs)+' jobs',
      mj.file_size_kb ? (mj.file_size_kb/1024).toFixed(1)+' MB' : '—',
      {'Total jobs':_fmt(mjJobs),
       'File size':mj.file_size_kb?(mj.file_size_kb/1024).toFixed(2)+' MB':'—',
       'Last updated':mj.mtime?mj.mtime.slice(0,19).replace('T',' '):'—',
       'In SQLite':_fmt(db.total_jobs||0),'Desc coverage':(db.desc_pct||0).toFixed(1)+'%',
       'Collect time':(pf.collect_ms!=null?pf.collect_ms+'ms':'—'),
       'Pipeline gap':_bn(Math.max(0,mjJobs-(db.total_jobs||0)),Math.max(mjJobs,1),'jobs in master JSON not yet loaded to SQLite')});
    const _dbDescPct = (db.desc_pct||0).toFixed(1);
    const _dbEnriched = db.enriched_count||0;
    N('db_loader',   db.total_jobs>0?'active':'ready',
      db.total_jobs>0 ? _fmt(db.total_jobs)+' rows' : '—',
      _dbDescPct+'% desc',
      {'Script':'load_master_database.py','Status':db.total_jobs>0?'LOADED':'READY – manual run',
       'Jobs loaded':_fmt(db.total_jobs||0),'Desc coverage':_dbDescPct+'%',
       'Enriched':_fmt(_dbEnriched),'Click START to reload':'via NodeCard',
       'Pipeline gap':_bn(_descPending,Math.max(db.total_jobs||0,1),'jobs loaded but missing description — awaiting desc_extract')});
    N('sqlite_db',   db.total_jobs>0?'active':'blocked',
      _fmt(db.total_jobs||0)+' rows',
      _upworkCount>0 ? _fmt(_usemeCount)+' usm/'+_fmt(_upworkCount)+' upw' :
        (db.new_jobs||0)>0 ? '+'+_fmt(db.new_jobs)+' new' : db.categories ? db.categories+' cats' : '—',
      {'Total rows':_fmt(db.total_jobs||0),'Useme jobs':_fmt(_usemeCount),'Upwork jobs':_fmt(_upworkCount),
       'Categories':db.categories||0,
       'New jobs':_fmt(db.new_jobs||0),
       'File size':db.size_kb?(db.size_kb/1024).toFixed(1)+' MB':'—',
       'Pipeline gap':_bn(_descPending,Math.max(db.total_jobs||0,1),'rows present but no description yet — bottleneck at desc_extract')});
    const _recDone = rec.done||0, _recTotal = rec.total||0, _recPct = rec.pct||0;
    // REQ-VIZ-001: job_capture node shows desc_capture autonomous pipeline progress
    const _dcRunning  = dc.running === true;
    const _dcBatch    = dc.batch_num;
    const _dcYield    = dc.last_batch_extracted;
    const _dcMissed   = dc.last_batch_missed;
    const _dcWaiting  = dc.waiting_webshadow === true;
    const _dcSession  = dc.session_extracted || 0;
    const _jcStatus   = _dcRunning ? 'active' : (_descPct > 0 ? 'active' : 'ready');
    const _jcM2       = _dcRunning
      ? (_dcWaiting ? 'waiting WS' : (_dcBatch ? 'batch '+_dcBatch : 'running'))
      : (_descPct >= 100 ? 'complete' : (_descPct > 0 ? _descPct.toFixed(0)+'% done' : 'idle'));
    N('job_capture', _jcStatus,
      _descPct > 0 ? _descPct.toFixed(0)+'% captured' : (_descTot > 0 ? _fmt(_descTot)+' to capture' : '—'),
      _jcM2,
      {'Desc capture process': _dcRunning ? 'RUNNING' : 'stopped',
       'Coverage': _descPct.toFixed(1)+'% ('+_fmt(_descEx)+' / '+_fmt(_descTot)+')',
       'Pending capture': _fmt(_descPending),
       'Current batch': _dcBatch ? '#'+_dcBatch : '—',
       'Last batch yield': _dcYield !== null && _dcYield !== undefined ? '+'+_dcYield+' captured, '+(_dcMissed||0)+' missed' : '—',
       'Session captured': _dcSession > 0 ? _fmt(_dcSession) : '—',
       'WebShadow wait': _dcWaiting ? 'YES \u2014 capturing pages' : 'no',
       'Last log update': dc.log_mtime ? dc.log_mtime.slice(0,19).replace('T',' ') : '\u2014',
       'Pipeline gap':_bn(_descPending,Math.max(_descTot,1),'jobs not yet captured \u2014 desc_capture_autonomous.py must be running')});
    const dcRunning = dc.running === true;
    // _descEx/_descTot/_descPct/_descPending hoisted above
    // REQ-VIZ-002: desc_extract pass rates from desc_enrichment_stdout.txt
    const _deTotal     = des.total     ?? null;
    const _deExtracted = des.extracted ?? null;
    const _deNotFound  = des.not_found ?? null;
    const _deFailed    = des.failed    ?? null;
    const _deSkipped   = des.skipped   ?? null;
    const _dePct       = des.pass_pct  ?? null;
    const _dePassStr   = _deTotal ? _deExtracted+'/'+_deTotal+' ('+(_dePct||0)+'%)' : '—';
    const _deM2        = dcRunning ? _descPct.toFixed(0)+'%'
                       : (_dePct !== null ? _dePct.toFixed(0)+'% yield' : (_descEx > 0 ? _descPct.toFixed(1)+'% done' : 'idle'));
    N('desc_extract',
      dcRunning ? 'active' : (_descEx > 0 ? 'active' : 'blocked'),
      _descEx > 0 ? _fmt(_descEx)+'/'+_fmt(_descTot) : '—',
      _deM2,
      {'Status': dcRunning ? 'RUNNING' : (_descEx > 0 ? 'HAS DATA' : 'WAITING \u2013 start pipeline'),
       'Captured': _fmt(_descEx)+' / '+_fmt(_descTot),
       'Pending': _fmt(_descPending)+' \u2190 bottleneck',
       'Coverage': _descPct.toFixed(1)+'%',
       'Last run \u2014 total': _deTotal !== null ? _fmt(_deTotal) : '\u2014',
       'Last run \u2014 extracted': _deExtracted !== null ? _fmt(_deExtracted)+' ('+(_dePct||0)+'%)' : '\u2014',
       'Last run \u2014 not found': _deNotFound !== null ? _fmt(_deNotFound) : '\u2014',
       'Last run \u2014 failed': _deFailed !== null ? _fmt(_deFailed) : '\u2014',
       'Last run \u2014 skipped': _deSkipped !== null ? _fmt(_deSkipped) : '\u2014',
       'Script': 'capture_descriptions_autonomous.py',
       'Pipeline gap':_bn(_descPending,Math.max(_descTot,1),'jobs with no description \u2014 WebShadow has not captured these pages')});
    const _enriched = db.enriched_count||0;
    const _enrichRunning = db.enrichment_running===true;
    const _enrichPending = Math.max(0, _descEx - _enriched);
    const _enrichPct = _descEx>0 ? (_enriched/_descEx*100) : 0;
    const _enrichStatus = _enrichRunning ? 'active' : (_enriched>0 ? 'active' : 'ready');
    const _enrichMetric = _enrichRunning ? _enrichPct.toFixed(1)+'%' : (_enriched>0 ? (_enrichPending>0 ? _enrichPct.toFixed(1)+'%' : 'done') : 'ready');
    N('enrichment',  _enrichStatus,
      _enriched > 0 ? _fmt(_enriched)+'/'+_fmt(_descTot) : '—',
      _enriched > 0 ? _enrichPct.toFixed(0)+'%' : (_descEx>0 ? 'ready' : 'waiting'),
      {'Status':_enrichRunning?'RUNNING':(_enriched>0?'DONE':'READY – run enrich_autonomous.py'),
       'Enriched':_fmt(_enriched)+' / '+_fmt(_descEx),'Pending':_fmt(_enrichPending),
       'Script':'enrich_autonomous.py',
       'Needs':_descEx>0?'OK – desc available':'Wait for desc_extract',
       'Pipeline gap':_bn(_enrichPending,Math.max(_descEx,1),'jobs with description but not yet enriched — run enrich_autonomous.py')});
    // REQ-VIZ-003: enriched_db secondary node — subset of sqlite_db with full AI metadata
    const _enrDbStatus = _enriched > 0 ? 'active' : (_descEx > 0 ? 'ready' : 'blocked');
    const _enrCovPct   = _descTot > 0 ? (_enriched / _descTot * 100) : 0;
    N('enriched_db', _enrDbStatus,
      _enriched > 0 ? _fmt(_enriched)+' enriched' : '—',
      _enriched > 0 ? _enrCovPct.toFixed(1)+'% of pool' : (_descEx > 0 ? 'ready' : 'waiting'),
      {'Enriched records': _fmt(_enriched),
       'Pool size': _fmt(_descTot),
       'Coverage': _enrCovPct.toFixed(1)+'%',
       'Pending enrichment': _fmt(_enrichPending),
       'Enrichment running': _enrichRunning ? 'YES' : 'no',
       'Source': 'sqlite_db → enrich_autonomous.py → enriched_db'});
    const _classified = db.classified_count||0;
    const _classifiedGood = db.classified_good||0;
    const _classifyRunning = db.classify_running===true;
    const _classifyStatus = _classifyRunning ? 'active' : (_classified>0 ? 'active' : (_enriched>0 ? 'ready' : 'blocked'));
    const _classifiedUnfit = Math.max(0, _classified - _classifiedGood);
    const _fitPct = _classified>0 ? (_classifiedGood/_classified*100) : 0;
    const _classifyMetric = _classifyRunning ? _fitPct.toFixed(1)+'% fit' : (_classified>0 ? _fitPct.toFixed(1)+'% fit' : (_enriched>0 ? 'ready' : 'waiting'));
    N('classifier',  _classifyStatus,
      _classifiedGood > 0 ? _fmt(_classifiedGood)+'/'+_fmt(_descTot)+' fit' : '—',
      _classified > 0 ? _fitPct.toFixed(0)+'% fit' : (_enriched>0 ? 'ready' : 'waiting'),
      {'Status':_classifyRunning?'RUNNING':(_classified>0?'DONE':'READY – run classify_jobs_autonomous.py'),
       'Classified':_fmt(_classified),'Fit (score>=50)':_fmt(_classifiedGood),
       'UNFIT (score<50)':_fmt(_classifiedUnfit)+' → discarded',
       'Fit rate':_fitPct.toFixed(1)+'%',
       'Script':'classify_jobs_autonomous.py',
       'Needs':_enriched>0?'OK – enriched jobs available':'Wait for enrichment',
       'Pipeline gap':_bn(Math.max(0,_enriched-_classified),Math.max(_enriched,1),'enriched jobs not yet scored by classifier')});
    const _acRunning = db.airmind_running===true;
    const _acT1 = db.airmind_t1||0, _acT2 = db.airmind_t2||0, _acT3 = db.airmind_t3||0;
    const _acTotal = _acT1 + _acT2 + _acT3;
    const _acStatus = _acRunning ? 'active' : (_acT1+_acT2 > 0 ? 'active' : (_enriched>0 ? 'ready' : 'blocked'));
    N('airmind_classifier', _acStatus,
      _acT1+_acT2 > 0 ? _acT1+'+'+_acT2+' match' : (_enriched>0 ? 'ready' : '—'),
      _acRunning ? 'RUNNING' : (_acTotal>0 ? _acTotal+' scored' : 'idle'),
      {'Status':_acRunning?'RUNNING':(_acTotal>0?'DONE':'READY'),
       'T1 (prime ≥70)':_acT1,'T2 (good ≥50)':_acT2,'T3 (borderline ≥30)':_acT3,
       'Script':'classify_airmind_autonomous.py',
       'Purpose':'Routes to op_airmind, separate from main classifier',
       'Needs':_enriched>0?'OK – enriched jobs available':'Wait for enrichment',
       'Pipeline gap':_bn(Math.max(0,_enriched-_acTotal),Math.max(_enriched,1),'enriched jobs not yet scored by AIrmind classifier')});
    const _airmindOffers = db.airmind_offers_staged||0;
    const _aeCount = db.airmind_export_count||0;
    const _aeLast  = db.airmind_export_last||0;
    const _aoStatus = _airmindOffers>0 ? 'active' : (_acT1+_acT2>0 ? 'ready' : 'blocked');
    N('airmind_offer_gen', _aoStatus,
      _airmindOffers>0 ? _airmindOffers+' staged' : (_acT1+_acT2>0 ? 'ready' : '—'),
      _airmindOffers>0 ? 'briefs ready' : (_acT1+_acT2>0 ? 'pending' : 'idle'),
      {'Status':_airmindOffers>0?'BRIEFS READY':(_acT1+_acT2>0?'READY – run offer_gen_autonomous.py':'WAITING'),
       'Staged briefs':_airmindOffers,'T1+T2 input':_acT1+_acT2,
       'Script':'offer_gen_autonomous.py (run_airmind_batch)',
       'Output':'data/offer_briefs/airmind/*.md',
       'Needs':_acT1+_acT2>0?'OK – T1/T2 matches available':'Wait for airmind_classifier',
       'Pipeline gap':_bn(Math.max(0,(_acT1+_acT2)-_airmindOffers),Math.max(_acT1+_acT2,1),'T1/T2 jobs without an AIrmind offer brief yet')});
    const _offerStaged = db.offer_staged_count||0;
    const _applied = db.applied_count||0;
    // Hoist dispatched count so _bn() and _submStatus can reference it below
    const opData = (d.operators)||{};
    const _dispatched = opData.total_dispatched||0;
    const _offerGenRunning = db.offer_gen_running===true;
    const _offerAllDone = _classifiedGood>0 && _offerStaged>=_classifiedGood;
    const _offerPct = _classifiedGood>0 ? (_offerStaged/_classifiedGood*100) : 0;
    const _offerStatus = _offerGenRunning ? 'active' : (_offerAllDone ? 'done' : (_offerStaged>0 ? 'active' : (_classifiedGood>0 ? 'ready' : 'blocked')));
    const _offerMetric = _offerGenRunning ? _offerPct.toFixed(0)+'%' : (_offerAllDone ? 'ALL DONE' : (_offerStaged>0 ? _offerPct.toFixed(0)+'%' : (_classifiedGood>0 ? 'ready' : 'waiting')));
    N('offer_gen',  _offerStatus,
      _offerStaged > 0 ? _fmt(_offerStaged)+' staged' : '—',
      _classifiedGood > 0 ? _offerPct.toFixed(0)+'%' : 'waiting',
      {'Status':_offerGenRunning?'RUNNING':(_offerAllDone?'ALL DONE':(_offerStaged>0?'BRIEFS READY':'READY – run offer_gen_autonomous.py')),
       'Staged':_fmt(_offerStaged)+' / '+_fmt(_classifiedGood),'Completion':_offerPct.toFixed(0)+'%',
       'Note':'CLASSIFIER rejected '+_fmt(_classifiedUnfit)+' unfit jobs before this stage',
       'Script':'offer_gen_autonomous.py',
       'Output':'data/offer_briefs/*.md','Needs':_classifiedGood>0?'OK – A/B jobs available':'Wait for classifier',
       'Pipeline gap':_bn(Math.max(0,_classifiedGood-_offerStaged),Math.max(_classifiedGood,1),'fit jobs with no offer brief — run offer_gen_autonomous.py')});
    const _eng      = d.engagement||{};
    const _sent     = _eng.sent_offers||0;
    const _closed   = _eng.closed_offers||0;
    const _engaged  = _eng.engaged_count||0;
    const _clients  = _eng.engaged_clients||[];
    const _engAge   = _eng.captured_at ? _eng.captured_at.slice(11,16) : '—';
    const _submStatus = _sent>0||_applied>0 ? 'active' : (_dispatched>0 ? 'ready' : 'blocked');
    // Build client list for details
    const _clientLines = _clients.map(cl=>
      `${cl.client}: ${cl.status}${cl.title?' — '+cl.title.slice(0,40):''}`
    ).join('\n');
    N('submission', _submStatus,
      _sent>0 ? _sent+' sent / '+_closed+' closed' : (_applied>0 ? _fmt(_applied)+' applied' : '—'),
      _engaged>0 ? _engaged+' engaged' : (_offerStaged>0 ? _fmt(_offerStaged)+' pending' : 'idle'),
      {'Sent (Useme)':_sent,'Closed (Useme)':_closed,'Applied (DB)':_applied,
       'Staged briefs':_offerStaged,
       'Active client discussions':_engaged,
       'Engaged clients':_clientLines||'—',
       'Stats refreshed':_engAge,
       'Rule':'HUMAN WRITES + SUBMITS — no auto-submit',
       'Pipeline gap':_bn(Math.max(0,_dispatched-_applied-_sent),Math.max(_dispatched,1),'tasks dispatched but not yet submitted by any operator'),
       'Optimize':'minimize expired-offers/week metric'});

    const wdn=Layout.wdNode;
    if(wdn){
      wdn.status=wdAlive?'active':'error';
      wdn.metric=`${wds.restarts||0}/50`;
      wdn.metric2=wdAlive?'ALIVE':'DOWN';
      wdn.active=wdAlive;
      wdn._info={'PID watchdog':wds.pid||'—','Restarts':(wds.restarts||0)+'/50',
                 'Status':wdAlive?'ALIVE':'STOPPED','Poll':'every 30s'};
    }

    // Task audit node — independent, watched by watchdog, checks task & brief currency
    const _audit = d.task_audit||{};
    const _auditExp       = _audit.expired||0;
    const _auditMiss      = _audit.missing||0;
    const _auditOk        = _audit.ok_count||0;
    const _auditLocked    = _audit.locked_count||0;          // REQ-046
    const _auditSubmitted = _audit.already_submitted_count||0; // REQ-046
    const _auditAvailable = _audit.available_count||_auditOk; // REQ-046
    const _auditMissed    = _audit.missed_submissions||0;
    const _auditMissVal   = _audit.missed_value_pln||0;
    const _auditRisk      = _audit.at_risk_count||0;
    const _auditRiskVal   = _audit.at_risk_value_pln||0;
    const _auditAvgMiss   = _audit.avg_missed_per_week||0;
    const _auditAge       = _audit.generated_at ? _audit.generated_at.slice(11,16) : '—';
    // status: error if file-expired or missed subs, warning if at-risk, done if clean
    const _auditSt = _auditExp>0||_auditMissed>0 ? 'error'
                   : _auditRisk>0 ? 'active'
                   : _auditOk>0   ? 'done' : 'blocked';
    // Line 1 (REQ-046): N available / N locked / N done
    const _auditLine1 = (_auditAvailable>0||_auditLocked>0||_auditSubmitted>0)
      ? [_auditAvailable+' avail', _auditLocked>0?_auditLocked+' lock':'', _auditSubmitted>0?_auditSubmitted+' done':''].filter(Boolean).join(' / ')
      : (_auditExp>0 ? _auditExp+' exp' : '—');
    // Line 2: PLN-loss + risk together — financial signal
    const _lostPart  = _auditMissVal>0 ? _auditMissVal.toLocaleString('pl-PL',{maximumFractionDigits:0})+' lost' : '';
    const _riskVPart = _auditRiskVal>0 ? _auditRiskVal.toLocaleString('pl-PL',{maximumFractionDigits:0})+' risk' : '';
    const _auditLine2 = [_lostPart,_riskVPart].filter(Boolean).map(s=>s+' PLN').join(' · ')
                      || (_auditMissed>0 ? _auditMissed+' missed' : _auditAvgMiss>0 ? _auditAvgMiss.toFixed(1)+' miss/wk' : 'clean');
    // build weekly table for details panel
    const _auditWeekly = (_audit.weekly_expiry||[]).slice(0,6);
    const _wkTable = _auditWeekly.map(w=>
      `${w.week}: ${w.total} exp / ${w.missed} missed`).join('\n');
    const _atRiskList = (_audit.at_risk||[]).slice(0,8).map(r=>
      `+${r.days_left}d  job_${r.job_id}  ${(r.title||'').slice(0,45)}`).join('\n');
    N('task_audit', _auditSt, _auditLine1, _auditLine2,
      {'Available (actionable)':_auditAvailable,'Locked (platform)':_auditLocked,'Already submitted':_auditSubmitted,
       'File-expired':_auditExp,'Missing from DB':_auditMiss,'Valid tasks':_auditOk,
       'Missed submissions':_auditMissed,'Missed value (PLN)':_auditMissVal.toFixed(0),
       'At risk this week':_auditRisk,'At-risk value (PLN)':_auditRiskVal.toFixed(0),
       'Avg missed/week':_auditAvgMiss,
       'Weekly breakdown':_wkTable||'—',
       'At-risk jobs':_atRiskList||'—',
       'Last audit':_auditAge,
       'Action':_auditRisk>0?'Submit at-risk offers NOW':_auditMissed>0?'Review missed submissions':'All current'});

    // Operator tier
    // opData and _dispatched hoisted above
    const _tdStatus = _dispatched>0?'active':(_offerStaged>0?'ready':'blocked');
    N('task_dispatch', _tdStatus,
      _dispatched>0 ? _fmt(_dispatched)+' tasks' : '—',
      _offerStaged>0 ? _fmt(_offerStaged)+' staged' : 'idle',
      {'Staged briefs':_offerStaged,'Dispatched':_dispatched,
       'Script':'task_dispatcher.py','Description':'assigns briefs to operators',
       'Pipeline gap':_bn(Math.max(0,_offerStaged-_dispatched),Math.max(_offerStaged,1),'staged briefs not yet dispatched to any operator — run task_dispatcher_autonomous.py')});

    // Worker cluster node
    const _wc = d.worker_cluster||{};
    const _wcWorkers = _wc.active_workers||0;
    const _wcQueued  = _wc.queued_tasks||0;
    const _wcBusy    = _wc.busy||0;
    const _wcAdapters = (_wc.adapters||[]).join(', ')||'none registered';
    const _wcStatus  = _wcWorkers>0 ? (_wcBusy>0 ? 'active' : 'ready') : 'blocked';
    N('worker_cluster', _wcStatus,
      _wcWorkers>0 ? _fmt(_wcWorkers)+' worker'+(
        _wcWorkers===1?'':'s') : '— offline',
      _wcQueued>0 ? _fmt(_wcQueued)+' queued' : 'idle',
      {'Active workers':_wcWorkers,'Busy':_wcBusy,'Idle':_wc.idle||0,
       'Queued tasks':_wcQueued,'Adapters':_wcAdapters,
       'Description':'distributed task executor — classify / enrich / offer_gen',
       'Pipeline gap':_bn(_wcQueued,Math.max(_wcQueued+_wcBusy,1),'tasks queued but no worker processing them yet')});

    // Named operator nodes — driven by profile when loaded, hardcoded fallback otherwise
    ((window._nexusProfile?.operators||[
      {id:'op_mariusz',  label:'Mariusz',   dormant:false},
      {id:'op_darek',    label:'Darek',     dormant:false},
      {id:'op_robert',   label:'Robert R.', dormant:false},
      {id:'op_robert_l', label:'Robert L.', dormant:true},
      {id:'op_rafal',    label:'Rafal',     dormant:true},
      {id:'op_sebastian',label:'Sebastian', dormant:false},
    ]).map(o=>({key:o.id, label:o.label, dormant:!!o.dormant})))
    .forEach(({key,label,dormant})=>{
      const _op = opData[key]||{};
      const _pend = _op.pending||0, _subm = _op.submitted||0;
      const _rej  = _op.rejected||0, _asgn = _op.assigned||0;
      const _lead = _op.lead||0;
      // Daily activity fields (from operator_activity table)
      const _todayAsgn = _op.today_assigned||0;
      const _todayAssd = _op.today_assessed||0;
      const _todaySubm = _op.today_submitted||0;
      const _avg7Asgn  = _op.avg7_assigned||0;
      const _avg7Assd  = _op.avg7_assessed||0;
      const _avg7Subm  = _op.avg7_submitted||0;
      const _recentDate     = _op.recent_date || null;
      const _recentIsToday  = _op.recent_is_today !== false;  // true when date matches today
      // Section label: "TODAY (2026-02-24)" or "LAST ACTIVE (2026-02-23)"
      const _recentLabel = _recentDate
        ? (_recentIsToday ? ('— TODAY ('+_recentDate+') —') : ('— LAST ACTIVE ('+_recentDate+') —'))
        : '— RECENT —';
      if(dormant){
        N(key,'blocked','dormant','—',{'Name':_op.name||label,'Status':'dormant','Active':'no'});
        return;
      }
      const _opSt = _lead>0?'active':(_subm>0?'active':(_todaySubm>0?'active':(_pend>0?'ready':'blocked')));
      const _metric  = _subm > 0 ? _fmt(_subm)+' done' : (_asgn > 0 ? _fmt(_asgn)+' asgn' : '—');
      // metric2: prefer recent submitted > recent assessed > lead > pend; suffix ★ if not today
      const _staleSfx = (!_recentIsToday && _recentDate) ? '★' : '';
      const _metric2 = _todaySubm > 0 ? _todaySubm+'sub'+_staleSfx
                     : _todayAssd > 0 ? _todayAssd+'rev'+_staleSfx
                     : _lead>0 ? _fmt(_lead)+' lead'
                     : (_pend>0 ? _fmt(_pend)+' pend' : 'idle');
      const _colMeaning = _opSt==='active'?'BLUE  = submitted or lead active'
                         :_opSt==='ready' ?'YELLOW = tasks queued, none submitted'
                         :_opSt==='done'  ?'GREEN  = all submitted'
                         :                 'DARK   = dormant / no tasks';
      const _tooltipBase = {'Name':_op.name||label,'Assigned':_asgn,'Pending':_pend,
         'Submitted':_subm,'Rejected':_rej,'Leads':_lead,'Active':_op.active?'yes':'no',
         [_recentLabel]:'',
         'Assigned': _todayAsgn, 'Assessed/rejected': _todayAssd, 'Submitted': _todaySubm,
         '— 7-DAY AVG —':'',
         'Avg/day assigned': _avg7Asgn, 'Avg/day assessed': _avg7Assd, 'Avg/day submitted': _avg7Subm,
         'Color':_colMeaning};
      if(key==='op_airmind'){
        _tooltipBase['T1 (prime)']  = _op.tier_T1||0;
        _tooltipBase['T2 (good)']   = _op.tier_T2||0;
        _tooltipBase['T3 (borderline)'] = _op.tier_T3||0;
        _tooltipBase['Unclassified'] = _op.tier_none||0;
        _tooltipBase['Source'] = 'AIrmind classifier — tasks/airmind/';
      }
      N(key, _opSt, _metric, _metric2, _tooltipBase);
      // Extra canvas properties for urgency badge + availability overlay
      const _nd = Layout.getNode(key);
      if(_nd){
        _nd.urgentCount       = _op.urgent_count      || 0;
        _nd.operatorAvailable = _op.operator_available !== false;
      }
    });

    // Useme funnel meter
    { const db2 = d.database||{};
      const _tierAB  = db2.tier_ab_count||0;
      const _applied = db2.applied_count||0;
      const _opSubmitted = (window._nexusProfile?.operators||[{id:'op_darek'},{id:'op_robert'},{id:'op_mariusz'}])
        .filter(o=>!o.dormant).map(o=>o.id)
        .reduce((a,k)=>a+((opData[k]||{}).submitted||0),0);
      const _completed = _applied + _opSubmitted;
      const _pct = _tierAB>0 ? Math.min(100,Math.round(_completed/_tierAB*100)) : 0;
      const umFill=document.getElementById('um-fill');
      const umPct=document.getElementById('um-pct');
      const umIdent=document.getElementById('um-identified');
      const umDetail=document.getElementById('um-detail');
      if(umFill){
        umFill.style.width=_pct+'%';
        umFill.style.background=_pct>60?'#0a7040':_pct>25?'#1a5a30':'#0e3a20';
      }
      if(umPct)  umPct.textContent=_pct+'%';
      if(umIdent)umIdent.textContent=_fmt(_tierAB)+' (A+B)';
      if(umDetail)umDetail.textContent=_fmt(_applied)+' applied \u00b7 '+_fmt(_opSubmitted)+' operator-submitted';
      const rq = d.retry_queue||{};
      const umRetry = document.getElementById('um-retry');
      if(umRetry){
        if((rq.exhausted||0) > 0){
          umRetry.textContent = (rq.pending||0)+' retry pending \u00b7 '+rq.exhausted+' EXHAUSTED';
          umRetry.style.color='#ff4040';
        } else if((rq.pending||0) > 0){
          umRetry.textContent = rq.pending+' retry pending';
          umRetry.style.color='#cc7700';
        } else {
          umRetry.textContent = '';
        }
      }
    }

    // Pipe statuses — reflect stale state so heartbeat stops injecting on dead pipes
    const C=(id,st)=>{ const c=Layout.getConn(id); if(c) c.status=st; };
    C('top_0', wsStale?'blocked':'active');
    C('top_1', wsStale?'blocked': stubDone?'done':'active');
    C('top_2', stubStale?'blocked': stubDone?'done':'active');
    // top_3 / top_4 / right_bend active whenever jobs exist in DB — heartbeat keeps pills flowing
    C('top_3',  db.total_jobs>0 ? 'active' : 'ready');
    C('top_4',  db.total_jobs>0 ? 'active' : 'ready');
    C('right_bend', db.total_jobs>0 ? 'active' : 'ready');
    C('bot_0',  dcRunning || _descEx > 0 ? 'active' : 'ready');
    C('bot_1',  _descEx > 0 ? 'active' : 'blocked');
    C('wd_conn',wdAlive?'active':'blocked');
    C('wd_to_audit', wdAlive ? (_auditRisk>0||_auditMissed>0 ? 'stop' : 'active') : 'blocked');
    // audit feeds back to dispatch: stop=missed, active=expiring/expired, ready=monitoring, blocked only if audit offline
    C('audit_to_td', _auditMissed>0 ? 'stop' : (_auditRisk>0||_auditExp>0 ? 'active' : (_auditOk>0||_auditAge!=='—' ? 'ready' : 'blocked')));
    C('desc_to_json', dcRunning || _descEx > 0 ? 'active' : 'blocked');
    C('bot_2', _enriched > 0 ? 'active' : (_descEx > 0 ? 'ready' : 'blocked'));
    // REQ-VIZ-003: enr_pipe — sqlite_db → enriched_db; heat driven by enrichment activity
    C('enr_pipe', _enriched > 0 ? 'active' : (_descEx > 0 ? 'ready' : 'blocked'));
    C('bot_3', _classified > 0 ? 'active' : (_enriched > 0 ? 'ready' : 'blocked'));
    C('bot_4', _offerStaged > 0 ? 'active' : (_classifiedGood > 0 ? 'ready' : 'blocked'));
    // error pipes are always "ready" to receive
    C('err_capture','ready'); C('err_extract','ready');
    // err_retry: active whenever retry queue has pending items
    const _rq = d.retry_queue||{};
    C('err_retry', (_rq.pending||0)>0 ? 'active' : ((_rq.exhausted||0)>0 ? 'stop' : 'ready'));
    C('td_vert',  _dispatched>0 ? 'active' : (_offerStaged>0 ? 'ready' : 'blocked'));
    C('ac_from_cls', _acTotal>0 ? 'active' : (_enriched>0 ? 'ready' : 'blocked'));
    C('ac_to_ao',    _acT1+_acT2>0 ? 'active' : (_acTotal>0 ? 'ready' : 'blocked'));
    C('ao_to_td',    _airmindOffers>0 ? 'active' : (_acT1+_acT2>0 ? 'ready' : 'blocked'));
    // airmind_export: ready when any tasks dispatched to op_airmind, active when PDFs exist
    const _aeDispatched = (window._nexusProfile?.operators||[]).some(op=>op.key==='airmind') && _dispatched>0;
    const _aeStatus = _aeCount>0 ? 'active' : (_aeDispatched ? 'ready' : 'blocked');
    const _aeDateStr = _aeLast>0 ? new Date(_aeLast*1000).toISOString().slice(0,16).replace('T',' ') : 'never';
    N('airmind_export', _aeStatus,
      _aeCount>0 ? _aeCount+' PDF'+(+_aeCount!==1?'s':'') : (_aeDispatched ? 'ready' : '—'),
      _aeCount>0 ? 'last: '+_aeDateStr : (_aeDispatched?'export pending':'waiting'),
      {'Status':_aeStatus.toUpperCase(),'PDFs exported':_aeCount,'Last export':_aeDateStr,
       'Script':'export_airmind_pdf.py','Output':'data/exports/airmind_tasks_*.pdf',
       'Purpose':'Manual submission outside FreelancePipeline workspace',
       'Needs':_aeDispatched?'OK – airmind tasks dispatched':'Run task_dispatcher first'});
    C('ae_from_op',  _aeCount>0 ? 'active' : (_aeDispatched ? 'ready' : 'blocked'));
    // Operator fan connections — profile-driven when loaded, hardcoded fallback otherwise
    (window._nexusProfile?.operators||[
      {key:'mariusz',  dormant:false},{key:'darek',    dormant:false},
      {key:'robert',   dormant:false},{key:'robert_l', dormant:true},
      {key:'rafal',    dormant:true}, {key:'sebastian',dormant:false},
    ]).forEach(op=>{
      C('td_'+op.key, op.dormant?'blocked':(_dispatched>0?'active':'blocked'));
    });

    // error_log node: passive sink — always shows error status + running error tally
    const errN = Layout.errNode;
    if(errN){
      errN.status='error';
      errN.metric = _errCount > 0 ? _errCount+' errors' : 'monitoring';
      errN._info={'Total errors': _errCount, 'Routes':'timeouts, 0-yield, failures',
                  'Last error': _lastErrLabel||'none', 'Type':'passive monitor'};
    }

    // Stale transition → push one error packet to err_extract so error_log receives it
    if(stubStale && !_prevStubStale){
      const _staleLbl = 'SE STALE – '+_same['stubs']+'x no advance';
      _errCount++;
      _lastErrLabel = _staleLbl;
      const _staleEvt = {
        conn: 'err_extract',
        label: _staleLbl,
        type: 'error',
        id: 'stale_'+Date.now(),
        ts: new Date().toISOString().slice(0,19).replace('T',' '),
        _ms: Date.now(),
        burst: 0,
      };
      if(typeof Packets !== 'undefined') Packets.inject(_staleEvt, undefined, true);
      if(typeof LiveFeed !== 'undefined') LiveFeed.push({type:'error', label:_staleLbl,
        ts: _staleEvt.ts});
      _pushNcPkt('stub_extract', '! '+_staleLbl, 'err');
      _pushNcPkt('error_log',   '← '+_staleLbl, 'err');
    }
    _prevStubStale = stubStale;

    // REQ-030: ws_capture timeout → inject error packet on err_capture
    if(wsStale && !_prevWsStale){
      const _wsLbl = 'WS TIMEOUT – no capture >120s';
      _errCount++;
      _lastErrLabel = _wsLbl;
      Packets.inject({
        conn:'err_capture', label:_wsLbl, type:'error',
        id:'wsto_'+Date.now(),
        ts:new Date().toISOString().slice(0,19).replace('T',' '),
        _ms:Date.now(), burst:0,
      }, undefined, true);
      if(typeof LiveFeed!=='undefined') LiveFeed.push({type:'error', label:_wsLbl,
        ts:new Date().toISOString().slice(0,19).replace('T',' ')});
      _pushNcPkt('ws_capture', '! '+_wsLbl, 'err');
      _pushNcPkt('error_log',  '\u2190 '+_wsLbl, 'err');
    }
    _prevWsStale = wsStale;

    // Mark active flag based on current packets on pipes
    _markActivity();
  }

  function _markActivity(){
    const activePipes=new Set(Packets.getActive().map(p=>p.conn));
    for(const n of Layout.allNodes){
      const pipes=Layout.conns.filter(c=>c.from===n.id||c.to===n.id).map(c=>c.id);
      n.active=pipes.some(id=>activePipes.has(id))||n.status==='active';
    }
  }

  function getLastData(){ return _lastData; }
  return {apply, getLastData};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: DETAIL_PANEL  – click-to-drill-down on packets, traces, nodes
   ════════════════════════════════════════════════════════════════════════════ */
const DetailPanel = (() => {
  const panel = document.getElementById('detail-panel');
  const titleEl= document.getElementById('dp-title');
  const tsEl   = document.getElementById('dp-ts');
  const colMeta= document.getElementById('dp-col-meta');
  const colCtx = document.getElementById('dp-col-context');
  document.getElementById('dp-close').addEventListener('click',()=>close());

  function row(k,v){ return `<div class="dp-row"><span class="dk dp-k">${k}</span><span class="dp-v">${v}</span></div>`; }

  function openPacket(p){
    const col=p.col;
    titleEl.textContent=p.label;
    titleEl.style.color=`rgba(${col.r},${col.g},${col.b},1)`;
    tsEl.textContent=p.ts||'';
    colMeta.innerHTML=
      row('type',p.type)+row('pipe segment',p.conn)+
      row('transit progress',Math.round(p.t*100)+'%')+
      row('status','IN TRANSIT');
    colCtx.innerHTML=_connContext(p.conn);
    panel.classList.add('open');
  }

  function openTrace(d){
    const col=d.col;
    titleEl.textContent=d.label;
    titleEl.style.color=`rgba(${col.r},${col.g},${col.b},1)`;
    tsEl.textContent=d.ts;
    const rawHtml = d.raw
      ? '<div style="color:#1a4060;font-size:9px;margin-top:4px;margin-bottom:2px">RAW LOG LINE</div>'
        +'<div style="font-size:8px;font-family:Consolas,monospace;color:#2a6888;word-break:break-all;'
        +'background:#040b14;padding:3px 5px;border-radius:2px;border:1px solid #0c2038;">'
        + d.raw.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
        +'</div>'
      : '';
    colMeta.innerHTML=
      row('type',d.type)+row('pipe',d.conn)+
      row('status','COMPLETED')+row('recorded at',d.ts)+rawHtml;
    colCtx.innerHTML=_connContext(d.conn);
    panel.classList.add('open');
  }

  function openNode(n){
    const col=NODE_COL[n.status]||NODE_COL.blocked;
    titleEl.textContent=n.label;
    titleEl.style.color=`rgba(${col.r},${col.g},${col.b},1)`;
    tsEl.textContent=n.sub;
    const infoRows=Object.entries(n._info||{}).map(([k,v])=>row(k,v)).join('');
    colMeta.innerHTML=row('status',n.status.toUpperCase())+row('script',n.sub)+infoRows;
    // Count traces on connected pipes
    const pipes=Layout.conns.filter(c=>c.from===n.id||c.to===n.id);
    const traceCounts=pipes.map(c=>{
      const cnt=Traces.getAll().filter(t=>t.conn===c.id).length;
      return row(c.id, cnt+' events recorded');
    }).join('');
    colCtx.innerHTML='<div style="color:#1a4060;font-size:9px;margin-bottom:4px">PIPE EVENT COUNTS</div>'+traceCounts;
    panel.classList.add('open');
  }

  function _connContext(connId){
    const c=Layout.getConn(connId); if(!c) return '';
    const fromN=Layout.getNode(c.from), toN=Layout.getNode(c.to);
    // REQ-013: use History (has data + raw field) instead of Traces.getAll() which is a stub.
    const traces=History.getAll().filter(t=>t.conn===connId);
    const recent=traces.slice(-5).reverse();
    let html=row('from', fromN?fromN.label:c.from)
            +row('to',   toN?toN.label:c.to)
            +row('total events', traces.length)
            +'<div style="color:#1a4060;font-size:9px;margin-top:4px;margin-bottom:2px">RECENT ON THIS PIPE</div>';
    // Each row is clickable — opens trace detail including raw log line (REQ-013).
    html+=recent.map(t=>{
      const rc = PACKET_COL[t.type]||PACKET_COL.capture;
      // Inject col into the event object for openTrace color rendering
      const tWithCol = Object.assign({col:rc}, t);
      const tJson = encodeURIComponent(JSON.stringify(tWithCol));
      return `<div class="dp-row" style="cursor:pointer" onclick="DetailPanel.openTrace(JSON.parse(decodeURIComponent('${tJson}')))">`+
        `<span class="dk dp-k" style="color:rgba(${rc.r},${rc.g},${rc.b},.7)">${t.ts.slice(11)}</span>`+
        `<span class="dp-v">${t.label}</span>`+
        `</div>`;
    }).join('');
    if(!recent.length) html+='<div style="color:#1a3050;font-size:8px;padding:2px 4px;">no events yet</div>';
    // REQ-012: DB drill-down placeholder for extraction pipes
    const _JOB_DRILL = {
      'right_bend':'pending_desc','bot_0':'pending_desc',
      'bot_1':'pending_enrich',
      'enr_pipe':'enriched','enr_to_enrdb':'enriched',
    };
    if(_JOB_DRILL[connId]){
      html += '<div id="dp-drill-anchor" style="margin-top:6px"></div>';
      setTimeout(()=>_drillJobs(connId, _JOB_DRILL[connId]),0);
    }
    return html;
  }

  function _drillJobs(connId, filter){
    const anchor = document.getElementById('dp-drill-anchor');
    if(!anchor) return;
    const _LABEL = {pending_desc:'JOBS PENDING DESCRIPTION',pending_enrich:'JOBS PENDING ENRICHMENT',enriched:'RECENTLY ENRICHED JOBS'};
    anchor.innerHTML=`<div style="color:#1a4060;font-size:9px;margin-top:2px;margin-bottom:2px">${_LABEL[filter]||'RELATED JOBS'}</div><div style="color:#1a3050;font-size:8px">loading…</div>`;
    fetch('/pipeline-jobs?filter='+filter+'&limit=12')
      .then(r=>r.json())
      .then(d=>{
        if(!anchor.isConnected) return;
        if(!d.jobs||!d.jobs.length){ anchor.innerHTML+='<div style="color:#1a3050;font-size:8px">no jobs found</div>'; return; }
        let h=`<div style="color:#1a4060;font-size:9px;margin-bottom:2px">${_LABEL[filter]||'RELATED JOBS'} (${d.count})</div>`;
        d.jobs.forEach(j=>{
          const score=j.fit_score?('<span style="color:'+(j.fit_score>=70?'#00cc66':j.fit_score>=50?'#bbaa00':'#cc4444')+'">'+j.fit_score+'</span>'):'—';
          const budget=j.budget_amount?(j.budget_amount+(j.budget_type?' '+j.budget_type:'')):'—';
          const title=(j.title||'').slice(0,42)+(j.title&&j.title.length>42?'\u2026':'');
          h+=`<div class="dp-row" style="cursor:pointer" onclick="window.open('${j.url||'#'}','_blank')"><span class="dp-k" style="min-width:22px;color:#3a5070">${j.job_id}</span><span class="dp-v" title="${j.title||''}">${title}</span><span style="margin-left:4px;color:#2a5a80;font-size:8px">${budget}</span><span style="margin-left:4px">${score}</span></div>`;
        });
        anchor.innerHTML=h;
      })
      .catch(()=>{ if(anchor.isConnected) anchor.innerHTML='<div style="color:#cc3333;font-size:8px">drill-down failed</div>'; });
  }

  function close(){ panel.classList.remove('open'); }
  function isOpen(){ return panel.classList.contains('open'); }
  return {openPacket, openTrace, openNode, close, isOpen};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: STATUS_PANEL  – right-side overlay with progress bars + task list
   ════════════════════════════════════════════════════════════════════════════ */
const StatusPanel = (() => {
  const toggle = document.getElementById('sp-toggle');
  const panel  = document.getElementById('status-panel');
  const body   = document.getElementById('sp-body');
  // REQ-014: persist open/closed state
  const _SP_KEY = 'nexus_sp_open';
  if(localStorage.getItem(_SP_KEY) === '1') panel.classList.add('open');
  document.getElementById('sp-close').addEventListener('click',()=>{
    panel.classList.remove('open');
    localStorage.setItem(_SP_KEY,'0');
  });
  toggle.addEventListener('click',()=>{
    panel.classList.toggle('open');
    localStorage.setItem(_SP_KEY, panel.classList.contains('open') ? '1' : '0');
  });

  function barHtml(pct, col){
    return `<div class="sp-bar"><div class="sp-bar-fill" style="width:${pct}%;background:rgba(${col.r},${col.g},${col.b},.8)"></div></div>`;
  }
  function metric(label, val, pct, col, target){
    return `<div class="sp-m">
      <div class="sp-m-hd"><span>${label}</span><b>${val}${target?' / '+target:''}</b></div>
      ${barHtml(pct, col)}
    </div>`;
  }
  const TASK_COLS={done:'#00aa55',active:'#2a8fff',ready:'#cc8800',blocked:'#1a3860',in_progress:'#2a8fff',unknown:'#1a3860'};
  const TASK_STATUS_LABEL={done:'DONE',active:'RUN',ready:'READY',blocked:'WAIT',in_progress:'RUN',unknown:'?'};

  // Snapshot from /nexus-status-snapshot (written by Rebaseline protocol)
  let _snap = null;

  function updateSnapshot(s){ _snap = s; }

  function _thresh(key, fallback){
    return (window._nexusProfile?.thresholds?.[key]) ?? fallback;
  }

  function update(d){
    const sc=d.stub_collection||{}, db=d.database||{};
    const ws=d.webshadow||{}, wds=d.watchdog||{};
    const tasks=d.tasks||[];

    // Use profile threshold for watchdog staleness
    const wdStaleMs = _thresh('watchdog_staleness_ms', 120000);
    const wdAlive=!wds.exited&&wds.log_mtime&&(Date.now()-new Date(wds.log_mtime).getTime())<wdStaleMs;
    // REQ-015: auto-open on critical watchdog failure (only when pipeline has data, only if user hasn't explicitly closed it)
    if(!wdAlive && (db.total_jobs||0) > 0 && !panel.classList.contains('open') && localStorage.getItem(_SP_KEY) !== '0'){
      panel.classList.add('open');
      localStorage.setItem(_SP_KEY,'1');
    }
    if(!panel.classList.contains('open')) return;

    const cyan  =NODE_COL.active, green=NODE_COL.done;
    const amber =NODE_COL.ready,  grey =NODE_COL.blocked;
    const stubPct  = sc.pct||0;
    const descPct  = db.desc_pct||0;
    const capPct   = db.total_jobs>0 ? Math.round((ws.individual_job_pages||0)/db.total_jobs*100) : 0;

    // Profile-driven thresholds
    const stubsTarget   = _thresh('stubs_collected_target', 10000);
    const catTarget     = _thresh('category_pages_target', 1200);
    const dbGoal        = _thresh('db_jobs_goal', 10000);
    const descTarget    = _thresh('desc_coverage_target_pct', 90);
    const wdRestartCeil = _thresh('watchdog_restart_ceiling', 50);
    const enrichTarget  = _thresh('enrichment_coverage_target', 100);

    // Pipeline coverage from audit snapshot (stale label shown when >4 h old)
    const snapStale     = _snap?.stale ?? true;
    const snapAge       = _snap ? `(${_snap.age_hours ?? '?'}h ago)` : '(run Rebase)';
    const enrichPct     = _snap?.enrichment_pct  ?? null;
    const classifiedPct = _snap?.classified_pct  ?? null;
    const submittedVal  = _snap?.submitted        ?? null;
    const submittedToday= _snap?.submitted_today  ?? null;

    let html='';

    html+=`<div class="sp-sect"><div class="sp-sect-title">DISCOVERY</div>`;
    html+=metric('Stub pages', `${sc.pages_done||0} / ${sc.pages_total||0}`, stubPct, cyan, sc.pages_total||0);
    html+=metric('Stubs collected', sc.stubs_collected||0, Math.min(100,((sc.stubs_collected||0)/stubsTarget)*100), cyan);
    html+=metric('WS category captures', ws.category_pages||0, Math.min(100,((ws.category_pages||0)/catTarget)*100), cyan);
    html+=`</div>`;

    html+=`<div class="sp-sect"><div class="sp-sect-title">DATABASE</div>`;
    html+=metric('Total jobs in DB', (db.total_jobs||0).toLocaleString(), Math.min(100,((db.total_jobs||0)/dbGoal)*100), green, dbGoal.toLocaleString()+' goal');
    html+=metric(`Descriptions (target ${descTarget}%)`, descPct.toFixed(1)+'%', descPct, amber, descTarget+'%');
    html+=metric('WS individual captures', ws.individual_job_pages||0, capPct, amber, db.total_jobs);
    html+=`</div>`;

    html+=`<div class="sp-sect">`;
    const sectTitle = snapStale
      ? `PIPELINE <span style="font-size:7px;color:#888">${snapAge}</span>`
      : `PIPELINE <span style="font-size:7px;color:#00cc66">LIVE</span>`;
    html+=`<div class="sp-sect-title">${sectTitle}</div>`;
    if(enrichPct !== null){
      html+=metric('Enrichment coverage', enrichPct.toFixed(1)+'%', Math.min(100,(enrichPct/enrichTarget)*100), enrichPct>=enrichTarget?green:amber, enrichTarget+'%');
    } else {
      html+=metric('Enrichment coverage', '—', 0, grey, enrichTarget+'%');
    }
    if(classifiedPct !== null){
      html+=metric('Classification', classifiedPct.toFixed(1)+'%', Math.min(100,classifiedPct), classifiedPct>=50?green:amber, '100%');
    } else {
      html+=metric('Classification', '—', 0, grey, '100%');
    }
    if(submittedVal !== null){
      const subLabel = submittedToday !== null ? `${submittedVal} total / ${submittedToday} today` : String(submittedVal);
      html+=metric('Offers submitted', subLabel, Math.min(100,(submittedVal/Math.max(dbGoal*0.01,1))*100), green, '—');
    } else {
      html+=metric('Offers submitted', '—', 0, grey, '—');
    }
    html+=`</div>`;

    html+=`<div class="sp-sect"><div class="sp-sect-title">WATCHDOG</div>`;
    html+=`<div class="sp-m"><div class="sp-m-hd"><span>Status</span><b style="color:${wdAlive?'#00ff88':'#ff4040'}">${wdAlive?'ALIVE':'STOPPED'}</b></div></div>`;
    html+=metric('Restarts', `${wds.restarts||0} / ${wdRestartCeil}`, ((wds.restarts||0)/wdRestartCeil)*100, wdAlive?green:NODE_COL.error);
    html+=`</div>`;

    if(tasks.length){
      html+=`<div class="sp-sect"><div class="sp-sect-title">TASKS (${tasks.length})</div>`;
      for(const t of tasks){
        const c=TASK_COLS[t.status]||'#1a3050';
        const s=TASK_STATUS_LABEL[t.status]||'?';
        html+=`<div class="sp-task sp-task-${t.status}">`+
          `<span class="sp-dot" style="background:${c}"></span>`+
          `<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${t.name}</span>`+
          `<span style="color:${c};flex-shrink:0;font-size:8px">${s}</span>`+
          `</div>`;
      }
      html+=`</div>`;
    }

    body.innerHTML=html;
  }

  return {update, updateSnapshot};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: WINDOW_MANAGER  – floating panels, snap presets, Z-order, PiP
   ════════════════════════════════════════════════════════════════════════════ */
const WindowManager = (() => {
  let _zTop = 50;
  const _windows = new Map();

  const SNAP_KEYS = ['tl','tr','bl','br','left','right','pip'];
  const SNAP_LABELS = {tl:'\u25E4',tr:'\u25E5',bl:'\u25E3',br:'\u25E2',left:'\u258C',right:'\u2590',pip:'\u22A1'};
  // Visual guide zones — shown as highlights during drag (show the target region)
  const SNAP_ZONES_DEF = [
    {id:'sz-tl',   preset:'tl',    t:0,   l:0,   r:.5,  b:.5},
    {id:'sz-tr',   preset:'tr',    t:0,   l:.5,  r:1,   b:.5},
    {id:'sz-bl',   preset:'bl',    t:.5,  l:0,   r:.5,  b:1},
    {id:'sz-br',   preset:'br',    t:.5,  l:.5,  r:1,   b:1},
    {id:'sz-left', preset:'left',  t:0,   l:0,   r:.5,  b:1},
    {id:'sz-right',preset:'right', t:0,   l:.5,  r:1,   b:1},
    {id:'sz-full', preset:'full',  t:0,   l:0,   r:1,   b:1},
  ];
  // Hit detection zones — non-overlapping; order matters: most specific first
  // Corners = 12%x12% squares; edges = 5% strips (between corners); top = 3% strip
  const _HIT_ZONES = [
    {preset:'full',  t:0,    l:.30, r:.70, b:.03},  // top center strip → fullscreen
    {preset:'tl',   t:0,    l:0,   r:.12, b:.12},  // top-left corner square
    {preset:'tr',   t:0,    l:.88, r:1,   b:.12},  // top-right corner square
    {preset:'bl',   t:.88,  l:0,   r:.12, b:1},    // bottom-left corner square
    {preset:'br',   t:.88,  l:.88, r:1,   b:1},    // bottom-right corner square
    {preset:'left', t:0,    l:0,   r:.05, b:1},    // left edge strip → left half
    {preset:'right',t:0,    l:.95, r:1,   b:1},    // right edge strip → right half
  ];

  function _vp(){
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    const tlH=(document.getElementById('timeline')||{offsetHeight:68}).offsetHeight;
    const sbH=(document.getElementById('statusbar')||{offsetHeight:22}).offsetHeight;
    return {cw:window.innerWidth, ch:window.innerHeight-tbH-tlH-sbH, topOff:tbH};
  }
  function _snapGeom(key){
    const {cw,ch,topOff}=_vp();
    const G={tl:{x:0,y:topOff,w:cw/2,h:ch/2},tr:{x:cw/2,y:topOff,w:cw/2,h:ch/2},
             bl:{x:0,y:topOff+ch/2,w:cw/2,h:ch/2},br:{x:cw/2,y:topOff+ch/2,w:cw/2,h:ch/2},
             left:{x:0,y:topOff,w:cw/2,h:ch},right:{x:cw/2,y:topOff,w:cw/2,h:ch},
             full:{x:0,y:topOff,w:cw,h:ch},
             pip:{x:cw-282,y:topOff+ch-174,w:274,h:164}};
    return G[key]||null;
  }
  function _applyGeom(el,g){
    el.style.left=g.x+'px'; el.style.top=g.y+'px';
    el.style.width=g.w+'px'; el.style.height=g.h+'px';
  }
  function snapTo(el,key){
    const g=_snapGeom(key); if(!g) return;
    el.style.transition='left .14s,top .14s,width .14s,height .14s';
    _applyGeom(el,g);
    setTimeout(()=>el.style.transition='',160);
  }
  function focus(id){
    const w=_windows.get(id); if(!w) return;
    _zTop++; w.el.style.zIndex=_zTop;
    w.el.classList.add('focused');
    _windows.forEach((o,oid)=>{ if(oid!==id) o.el.classList.remove('focused'); });
  }
  function create(id, opts){
    if(_windows.has(id)){ focus(id); return _windows.get(id).el; }
    const {title='',initialGeom=null,pipMode=false,nodeId=null}=opts;
    const el=document.createElement('div');
    el.className='nw'+(pipMode?' pip':''); el.id='nw-'+id;
    _zTop++; el.style.zIndex=_zTop;
    if(initialGeom) _applyGeom(el,initialGeom);
    else{ el.style.left=(80+Math.random()*160)+'px'; el.style.top=(80+Math.random()*120)+'px'; el.style.width='320px'; el.style.height='300px'; }
    // Restore user-moved/resized position from localStorage
    try{
      const saved=JSON.parse(localStorage.getItem('nexus_win_pos')||'{}')[id];
      if(saved){
        if(saved.w) el.style.width=saved.w+'px';
        if(saved.h) el.style.height=saved.h+'px';
        // Clamp so at least 120px of the window title bar is inside the viewport
        const ww=saved.w||parseInt(el.style.width)||320;
        const wh=saved.h||parseInt(el.style.height)||300;
        const TOPBAR_H=38;
        const cx=Math.max(-(ww-120), Math.min(saved.x, window.innerWidth-120));
        const cy=Math.max(TOPBAR_H,  Math.min(saved.y, window.innerHeight-30));
        el.style.left=cx+'px'; el.style.top=cy+'px'; }
    }catch(e){}

    // Title bar
    const tb=document.createElement('div'); tb.className='nw-tb';
    const ndot=document.createElement('div'); ndot.className='nw-ndot';
    if(nodeId){ const n=Layout.getNode(nodeId); if(n){ const c=NODE_COL[n.status]||NODE_COL.blocked; ndot.style.background=`rgba(${c.r},${c.g},${c.b},.9)`; } }
    const titleEl=document.createElement('div'); titleEl.className='nw-title'; titleEl.textContent=title;
    // Snap mini-buttons
    const snapsBar=document.createElement('div'); snapsBar.className='nw-snaps';
    SNAP_KEYS.forEach(k=>{
      const b=document.createElement('div'); b.className='nw-snap'; b.title=k; b.textContent=SNAP_LABELS[k]||k;
      b.addEventListener('click',e=>{ e.stopPropagation(); snapTo(el,k); });
      snapsBar.appendChild(b);
    });
    // Title bar buttons
    const tbBtns=document.createElement('div'); tbBtns.className='nw-tb-btns';
    const mkBtn=(t,fn)=>{ const b=document.createElement('button'); b.className='nw-tb-btn'; b.title=t; b.textContent=t==='PiP'?'\u22A1':t==='Aura'?'\u25CC':'\u2715'; b.addEventListener('click',e=>{ e.stopPropagation(); fn(); }); tbBtns.appendChild(b); };
    mkBtn('PiP', ()=>togglePip(id));
    mkBtn('Aura',()=>toggleAura(id));
    mkBtn('Close',()=>destroy(id));
    tb.appendChild(ndot); tb.appendChild(titleEl); tb.appendChild(snapsBar); tb.appendChild(tbBtns);

    // Drag
    let _ox=0,_oy=0,_drag=false,_snapC=null;
    tb.addEventListener('pointerdown',e=>{
      if(e.target.closest('.nw-tb-btn,.nw-snap')) return;
      _drag=true; const _z=window._nexusUiZoom||1; _ox=e.clientX/_z-el.offsetLeft; _oy=e.clientY/_z-el.offsetTop;
      tb.setPointerCapture(e.pointerId);
      el.classList.remove('aura','aura-hot','pip'); focus(id); _showSZ(true);
    });
    tb.addEventListener('pointermove',e=>{
      if(!_drag) return;
      const _z=window._nexusUiZoom||1; el.style.left=(e.clientX/_z-_ox)+'px'; el.style.top=(e.clientY/_z-_oy)+'px';
      _snapC=_hitSZ(e.clientX/_z,e.clientY/_z); _hlSZ(_snapC);
    });
    tb.addEventListener('pointerup',()=>{
      if(!_drag) return; _drag=false; _showSZ(false);
      if(_snapC){ snapTo(el,_snapC); _snapC=null; }
      // Persist position
      try{
        const store=JSON.parse(localStorage.getItem('nexus_win_pos')||'{}');
        store[id]={x:el.offsetLeft, y:el.offsetTop, w:el.offsetWidth, h:el.offsetHeight};
        localStorage.setItem('nexus_win_pos', JSON.stringify(store));
      }catch(e){}
    });

    // Body
    const body=document.createElement('div'); body.className='nw-body'; body.id='nw-body-'+id;

    // Resize grip
    const grip=document.createElement('div'); grip.className='nw-grip';
    let _rDrag=false, _rOX=0, _rOY=0, _rW0=0, _rH0=0;
    grip.addEventListener('pointerdown',e=>{
      e.stopPropagation(); e.preventDefault();
      _rDrag=true; _rOX=e.clientX; _rOY=e.clientY;
      _rW0=el.offsetWidth; _rH0=el.offsetHeight;
      grip.setPointerCapture(e.pointerId);
    });
    grip.addEventListener('pointermove',e=>{
      if(!_rDrag) return;
      const nw=Math.max(180,_rW0+(e.clientX-_rOX)/(window._nexusUiZoom||1));
      const nh=Math.max(110,_rH0+(e.clientY-_rOY)/(window._nexusUiZoom||1));
      el.style.width=nw+'px'; el.style.height=nh+'px';
    });
    grip.addEventListener('pointerup',()=>{
      _rDrag=false;
      // Persist size
      try{
        const store=JSON.parse(localStorage.getItem('nexus_win_pos')||'{}');
        store[id]={x:el.offsetLeft, y:el.offsetTop, w:el.offsetWidth, h:el.offsetHeight};
        localStorage.setItem('nexus_win_pos', JSON.stringify(store));
      }catch(e){}
    });

    el.appendChild(tb); el.appendChild(body); el.appendChild(grip);
    el.addEventListener('pointerdown',()=>focus(id));
    document.getElementById('nw-container').appendChild(el);
    _windows.set(id,{el,opts,auraMode:false});
    if(typeof WinLauncher!=='undefined') WinLauncher.refresh();
    return el;
  }
  function getBody(id){ return document.getElementById('nw-body-'+id); }
  // Click-outside defocus
  document.addEventListener('mousedown',function(e){
    if(!e.target.closest('.nw')){
      _windows.forEach(w=>w.el.classList.remove('focused'));
    }
  },true);
  function destroy(id){ const w=_windows.get(id); if(!w) return; w.el.remove(); _windows.delete(id); if(typeof WinLauncher!=='undefined') WinLauncher.refresh(); }
  function togglePip(id){
    const w=_windows.get(id); if(!w) return;
    w.el.classList.remove('aura','aura-hot','focused');
    const on=w.el.classList.toggle('pip');
    if(on) snapTo(w.el,'pip');
  }
  function toggleAura(id){
    const w=_windows.get(id); if(!w) return;
    w.auraMode=!w.auraMode;
    if(w.auraMode){
      w.el.classList.add('aura'); w.el.classList.remove('pip','focused'); w.el.style.zIndex=2;
      // REQ-026: auto-position at the node immediately after enabling aura mode
      if(w.opts && w.opts.nodeId) positionAuraAtNode(id, w.opts.nodeId);
    } else{ w.el.classList.remove('aura','aura-hot'); focus(id); }
  }
  function positionAuraAtNode(id,nodeId){
    const w=_windows.get(id); if(!w||!w.auraMode) return;
    const n=Layout.getNode(nodeId); if(!n) return;
    const cr=canvas.getBoundingClientRect();
    // Aura covers the node generously — wide enough to serve as ambient context
    w.el.style.left=(cr.left+n.x-n.w*1.1)+'px';
    w.el.style.top =(cr.top +n.y-n.h*0.8)+'px';
    w.el.style.width=(n.w*2.2)+'px';
    w.el.style.height=(n.h*2.2)+'px';
  }
  function setAuraHot(id,hot){ const w=_windows.get(id); if(w&&w.auraMode) w.el.classList.toggle('aura-hot',hot); }
  function _showSZ(v){
    const {cw,ch,topOff}=_vp();
    SNAP_ZONES_DEF.forEach(z=>{
      const el=document.getElementById(z.id); if(!el) return;
      el.style.display=v?'block':'none';
      if(v){ el.style.left=(z.l*cw)+'px'; el.style.top=(topOff+z.t*ch)+'px'; el.style.width=((z.r-z.l)*cw)+'px'; el.style.height=((z.b-z.t)*ch)+'px'; }
    });
  }
  function _hitSZ(cx,cy){
    const {cw,ch,topOff}=_vp();
    for(const z of _HIT_ZONES){
      if(cx>=z.l*cw&&cx<=z.r*cw&&cy>=(topOff+z.t*ch)&&cy<=(topOff+z.b*ch)) return z.preset;
    }
    return null;
  }
  function _hlSZ(key){ SNAP_ZONES_DEF.forEach(z=>{ const el=document.getElementById(z.id); if(el) el.classList.toggle('active-snap',z.preset===key); }); }
  function has(id){ return _windows.has(id); }
  function get(id){ return _windows.get(id); }
  function clearPos(id){
    try{
      const store=JSON.parse(localStorage.getItem('nexus_win_pos')||'{}');
      delete store[id];
      localStorage.setItem('nexus_win_pos',JSON.stringify(store));
    }catch(e){}
  }
  return {create,destroy,focus,getBody,togglePip,toggleAura,positionAuraAtNode,setAuraHot,has,get,clearPos};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: WIN_LAUNCHER  – topbar WINDOWS button with category submenus
   ════════════════════════════════════════════════════════════════════════════ */
const WinLauncher = (() => {
  const btn  = document.getElementById('win-launcher-btn');
  const drop = document.getElementById('win-dropdown');

  // Category order + labels
  const _CATS = [
    {id:'MONITORING', label:'MONITORING'},
    {id:'ANALYTICS',  label:'ANALYTICS'},
    {id:'TOOLS',      label:'TOOLS'},
    {id:'SETTINGS',   label:'SETTINGS'},
  ];

  // Known ID → category mapping
  const _ID_CATS = {
    'livefeed':          'MONITORING',
    'perf-matrix':       'ANALYTICS',
    'release-history':   'ANALYTICS',
    'capabilities':      'TOOLS',
    'value-plan':        'ANALYTICS',
    'expiry-loss':       'ANALYTICS',
    'op-throughput':     'ANALYTICS',
    'nc-report_refresh': 'ANALYTICS',
    'roadmap':           'ANALYTICS',
    'op-card':           'MONITORING',
    'acl-admin':         'TOOLS',
    'reports':           'ANALYTICS',
  };

  // Settings items (not in _reg — always present)
  const _SETTINGS_ITEMS = [
    ['DOT SETTINGS',   'settings-dot',   ()=>typeof SettingsPanel!=='undefined'&&SettingsPanel.openDot()],
    ['NODE SETTINGS',  'settings-node',  ()=>typeof SettingsPanel!=='undefined'&&SettingsPanel.openNode()],
    ['FLOAT SETTINGS', 'settings-float', ()=>typeof SettingsPanel!=='undefined'&&SettingsPanel.openFloat()],
    ['POLL SETTINGS',  'settings-poll',  ()=>typeof SettingsPanel!=='undefined'&&SettingsPanel.openPoll()],
    ['SKIN SETTINGS',  'settings-skin',  ()=>typeof SettingsPanel!=='undefined'&&SettingsPanel.openSkin()],
  ];

  // Registry: id → { label, open:fn, category }
  const _reg = new Map();
  // Which category is currently expanded (accordion)
  let _openCat = null;

  function _resolveCat(id, explicit) {
    if (explicit) return explicit;
    if (_ID_CATS[id]) return _ID_CATS[id];
    if (id.startsWith('nc-')) return 'MONITORING';
    return 'MONITORING';
  }

  function register(id, label, openFn, category) {
    _reg.set(id, {label, open: openFn, category: _resolveCat(id, category)});
    if (drop.classList.contains('open')) refresh();
  }

  function _makeItem(dotCls, labelText, actionText, clickFn) {
    const item = document.createElement('div'); item.className = 'wd-item';
    item.innerHTML =
      `<span class="wd-dot ${dotCls}"></span>`+
      `<span class="wd-label ${dotCls.includes('open-w')?'open-w':''}">${labelText}</span>`+
      `<span class="wd-action">${actionText}</span>`;
    item.addEventListener('click', e => { e.stopPropagation(); clickFn(); });
    return item;
  }

  function _buildItems(catId) {
    const wrap = document.createElement('div');
    wrap.className = 'wd-cat-items';
    let count = 0;
    if (catId === 'SETTINGS') {
      _SETTINGS_ITEMS.forEach(([lbl, wid, fn]) => {
        const isOpen = WindowManager.has(wid);
        wrap.appendChild(_makeItem(isOpen?'open-w':'closed-w', lbl, isOpen?'FOCUS':'OPEN', ()=>{ fn(); refresh(); _close(); }));
        count++;
      });
    } else {
      for (const [id, entry] of _reg) {
        if (entry.category !== catId) continue;
        const isOpen = WindowManager.has(id);
        wrap.appendChild(_makeItem(isOpen?'open-w':'closed-w', entry.label, isOpen?'FOCUS':'OPEN', ()=>{ entry.open(); refresh(); _close(); }));
        count++;
      }
    }
    if (!count) {
      const empty = document.createElement('div'); empty.className='wd-empty';
      empty.textContent = '— no windows registered —';
      wrap.appendChild(empty);
    }
    return wrap;
  }

  function _catOpenCount(catId) {
    if (catId === 'SETTINGS')
      return _SETTINGS_ITEMS.filter(([,wid]) => WindowManager.has(wid)).length;
    return [..._reg.entries()].filter(([id,e]) => e.category===catId && WindowManager.has(id)).length;
  }

  function refresh() {
    drop.innerHTML = '';
    _CATS.forEach(cat => {
      const isExpanded = _openCat === cat.id;
      const n = _catOpenCount(cat.id);

      const row = document.createElement('div');
      row.className = 'wd-cat-row' + (isExpanded ? ' cat-active' : '');
      row.dataset.cat = cat.id;
      row.innerHTML =
        `<span class="wd-cat-label">${cat.label}</span>`+
        `<span class="wd-cat-count ${n?'has-open':''}">${n||''}</span>`+
        `<span class="wd-cat-arrow">${isExpanded?'&#9660;':'&#9658;'}</span>`;
      row.addEventListener('click', e => {
        e.stopPropagation();
        _openCat = isExpanded ? null : cat.id;
        refresh();
      });
      drop.appendChild(row);

      if (isExpanded) {
        drop.appendChild(_buildItems(cat.id));
      }
    });
  }

  function _close() {
    drop.classList.remove('open');
    btn.classList.remove('open');
  }

  btn.addEventListener('click', e => {
    e.stopPropagation();
    const opening = drop.classList.toggle('open');
    btn.classList.toggle('open', opening);
    if (opening) refresh();
  });

  document.addEventListener('click', e => {
    if (!drop.contains(e.target) && e.target !== btn) _close();
  });

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && drop.classList.contains('open')) _close();
  });

  return {register, refresh};
})();


/* per-node in-memory packet arrival ring – shown in NodeCard LOG STREAM */
const _ncPktLog = new Map();
function _pushNcPkt(nodeId, text, cls){
  if(!nodeId) return;
  if(!_ncPktLog.has(nodeId)) _ncPktLog.set(nodeId, []);
  const arr = _ncPktLog.get(nodeId);
  arr.push({text, cls: cls||'pkt'});
  if(arr.length > 30) arr.shift(); // rolling window cap
}

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: NODE_CARD  – interactive per-node control card with live log
   ════════════════════════════════════════════════════════════════════════════ */
/* ── NodeCard usage tracking ─────────────────────────────────────────── */
const _ncUsage = {
  _k(id){ return 'nex_ua_'+id; },
  get(id){ try{ return JSON.parse(localStorage.getItem(this._k(id))||'{}'); }catch(e){ return {}; } },
  inc(id,action){ const u=this.get(id); u[action]=(u[action]||0)+1; localStorage.setItem(this._k(id),JSON.stringify(u)); },
  top(id,n=3){ return Object.entries(this.get(id)).sort((a,b)=>b[1]-a[1]).slice(0,n).map(e=>e[0]); },
};

const _NODE_ACTIONS_FALLBACK = {
  watchdog:     ['restart','stop','start'],
  ws_capture:   ['start','stop','restart','pause'],
  desc_extract: ['start','stop','restart','pause'],
  db_loader:    ['start','stop','restart'],
  upwork:       ['start','stop','restart'],
};
function _getNodeActions(nodeId){
  const prof = window._nexusProfile;
  if(prof?.nodes){
    const nd = prof.nodes.find(n=>n.id===nodeId);
    if(nd?.capabilities?.length) return nd.capabilities;
  }
  return _NODE_ACTIONS_FALLBACK[nodeId] || [];
}
const _ACTION_ICONS = {start:'▶',stop:'■',restart:'↺',pause:'⏸',open_folder:'↗'};

const NodeCard = (() => {
  const _cards = new Map();
  // CTRL.has(id) — true when the node has controllable capabilities
  const CTRL = {has: id => _getNodeActions(id).length > 0};
  const _prevVals = new Map();

  function _buildQA(body, nodeId){
    const qa = body.querySelector('#ncd-qa-'+nodeId); if(!qa) return;
    const actions = _getNodeActions(nodeId);
    const topUsed = _ncUsage.top(nodeId,3);
    // quick buttons: top 3 used, or first 3 actions if no usage data
    const quick = topUsed.length ? topUsed : actions.slice(0,3);
    qa.innerHTML='';
    quick.forEach(a=>{
      if(!actions.includes(a)) return;
      const ct = _ncUsage.get(nodeId)[a]||0;
      const btn=document.createElement('button');
      btn.className='nc-qa-btn'+(a==='stop'?' danger':'');
      btn.dataset.a=a; btn.dataset.n=nodeId;
      btn.innerHTML=(_ACTION_ICONS[a]||'')+(ct?`<span class="nc-qa-badge">${ct}</span>`:'')+
        ' '+a.toUpperCase();
      btn.title='×'+ct+' uses';
      qa.appendChild(btn);
    });
    // MORE dropdown if >3 actions
    if(actions.length>0){
      const more=document.createElement('div'); more.className='nc-qa-more';
      const mBtn=document.createElement('button'); mBtn.className='nc-qa-more-btn'; mBtn.textContent='ALL ▴';
      const menu=document.createElement('div'); menu.className='nc-qa-menu';
      actions.forEach((a,i)=>{
        if(i>0 && a==='stop'){ const sep=document.createElement('div'); sep.className='nc-qa-mi-sep'; menu.appendChild(sep); }
        const mi=document.createElement('div');
        mi.className='nc-qa-mi'+(a==='stop'?' danger':'');
        mi.dataset.a=a; mi.dataset.n=nodeId;
        const ct=_ncUsage.get(nodeId)[a]||0;
        mi.innerHTML=(_ACTION_ICONS[a]||'')+'&nbsp;'+a.toUpperCase()+(ct?`<span class="nc-qa-mi-ct">×${ct}</span>`:'');
        menu.appendChild(mi);
      });
      mBtn.addEventListener('click',e=>{ e.stopPropagation(); more.classList.toggle('open'); mBtn.textContent=more.classList.contains('open')?'ALL ▾':'ALL ▴'; });
      document.addEventListener('click',()=>{ more.classList.remove('open'); mBtn.textContent='ALL ▴'; },{capture:false});
      more.append(mBtn,menu); qa.appendChild(more);
    }
    // wire all action clicks
    qa.querySelectorAll('[data-a]').forEach(el=>{
      el.addEventListener('click',e=>{
        e.stopPropagation();
        const a=el.dataset.a, nd=el.dataset.n;
        _ncUsage.inc(nd,a);
        _appendLog(nd,'> '+(_ACTION_ICONS[a]||'')+' '+a.toUpperCase()+' sent…','info');
        fetch('/pipeline-control',{method:'POST',headers:{'Content-Type':'application/json'},
          body:JSON.stringify({node:nd,action:a})
        }).then(r=>r.json()).then(res=>{
          _appendLog(nd,'> '+(res.msg||res.error||JSON.stringify(res)),res.ok?'ok':'err');
          setTimeout(()=>{ _refreshStatus(nd); DataFetch.refresh(); _buildQA(body,nd); },900);
        }).catch(e=>_appendLog(nd,'> ERR: '+e.message,'err'));
        // refresh QA to update badges
        setTimeout(()=>_buildQA(body,nd),100);
      });
    });
  }

  function open(nodeId){
    const n=Layout.getNode(nodeId); if(!n) return;
    const wid='nc-'+nodeId;
    if(WindowManager.has(wid)){ WindowManager.focus(wid); return; }

    // ── Special bespoke NodeCard: report_refresh ────────────────────────────
    if(nodeId==='report_refresh'){
      const _W=400, _H=300;
      const cr2=canvas.getBoundingClientRect();
      const _uiz2=window._nexusUiZoom||1;
      const _scr2=Camera.ws(n.x,n.y);
      WindowManager.create(wid,{
        title:'REPORT REFRESH — Analytics Control', nodeId,
        initialGeom:{x:Math.max(4,Math.min(window.innerWidth-_W-4,cr2.left/_uiz2+_scr2.x-_W/2)),
                     y:Math.max(42,Math.min(window.innerHeight-_H-80,cr2.top/_uiz2+_scr2.y-_H*0.55)),
                     w:_W, h:_H},
      });
      const _body=WindowManager.getBody(wid);
      const _CADS=[{ms:0,l:'OFF'},{ms:300000,l:'5m'},{ms:900000,l:'15m'},
                   {ms:1800000,l:'30m'},{ms:3600000,l:'1h'}];
      function _rrRender(){
        const _st=Reports.getStatus();
        const _cur=_st.autoCadenceMs;
        const _cadBtns=_CADS.map(c=>
          `<button class="nc-cad-btn${c.ms===_cur?' active':''}" data-ms="${c.ms}">${c.l}</button>`
        ).join('');
        const _age=_st.lastLoadMs?Math.round((Date.now()-_st.lastLoadMs)/1000)+'s ago':'—';
        const _pnSpec2=(window._nexusProfile?.nodes?.find(nn=>nn.id==='report_refresh')||{});
        const _d2=_pnSpec2.description;
        const _descH=_d2?`<div class="nc-desc" onclick="this.classList.toggle('expanded')"><div class="nc-desc-text">${_d2}</div></div>`:'';
        _body.innerHTML=`<div class="nc-body">
          <div class="nc-sts">
            <div class="nc-sts-dot ${_cur?'running pulsing':'ready'}"></div>
            <span class="nc-sts-lbl">${_cur?'AUTO REFRESH ON':'MANUAL'}</span>
            <span class="nc-sts-pid">${_cur?(_cur/60000).toFixed(0)+'m cadence':''}</span>
          </div>
          <div class="nc-prof">
            <span class="nc-prof-type">MON</span>
            <span class="nc-prof-app">/pipeline-reports (R1 / R2 / R3)</span>
            <span class="nc-prof-age" id="ncd-lage-report_refresh">${_age}</span>
          </div>
          ${_descH}
          <div class="nc-cadence">
            <span class="nc-cadence-lbl">AUTO</span>${_cadBtns}
          </div>
          <div class="nc-qa">
            <button class="nc-qa-btn" id="ncd-refnow-btn">▶ REFRESH NOW</button>
            <button class="nc-qa-btn" id="ncd-openrpt-btn">↗ OPEN REPORTS</button>
          </div>
          <div class="nc-metrics" id="ncd-m-report_refresh"></div>
        </div>`;
        _body.querySelectorAll('.nc-cad-btn').forEach(btn=>{
          btn.addEventListener('click',()=>{
            Reports.setAutoRefresh(parseInt(btn.dataset.ms));
            _rrRender();
          });
        });
        const _rnBtn=_body.querySelector('#ncd-refnow-btn');
        if(_rnBtn) _rnBtn.addEventListener('click',()=>{
          _rnBtn.disabled=true;
          Reports.refresh().finally(()=>{ _rnBtn.disabled=false; _rrRender(); });
        });
        const _orBtn=_body.querySelector('#ncd-openrpt-btn');
        if(_orBtn) _orBtn.addEventListener('click',()=>Reports.open());
        const _rn=Layout.getNode('report_refresh'); if(_rn) refreshMetrics('report_refresh',_rn);
      }
      _rrRender();
      const _rrCard={
        wid, body:_body,
        logInterval: setInterval(()=>{
          const _st=Reports.getStatus();
          const ael=document.getElementById('ncd-lage-report_refresh');
          if(ael && _st.lastLoadMs){
            const a=Math.round((Date.now()-_st.lastLoadMs)/1000);
            ael.textContent=a+'s ago';
            const thresh=_st.autoCadenceMs>0?_st.autoCadenceMs/1000+15:120;
            ael.style.color=a<thresh?'rgba(0,198,120,.65)':a<3600?'rgba(178,138,0,.60)':'rgba(175,55,55,.58)';
          }
          const _rn=Layout.getNode('report_refresh'); if(_rn) refreshMetrics('report_refresh',_rn);
        }, 1000)
      };
      _cards.set('report_refresh', _rrCard);
      WinLauncher.register('nc-report_refresh','REPORT REFRESH — Analytics Control',()=>open('report_refresh'));
      return;
    }
    // ── Standard NodeCard ────────────────────────────────────────────────────
    const cr=canvas.getBoundingClientRect();
    const _uiz=window._nexusUiZoom||1;
    const _scr=Camera.ws(n.x,n.y);
    const W=400, H=370;
    const sx=cr.left/_uiz+_scr.x-W/2, sy=cr.top/_uiz+_scr.y-H*0.55;
    WindowManager.create(wid,{
      title:n.label+' — '+n.sub, nodeId,
      initialGeom:{x:Math.max(4,Math.min(window.innerWidth-W-4,sx)),
                   y:Math.max(42,Math.min(window.innerHeight-H-80,sy)),
                   w:W, h:H},
    });
    const body=WindowManager.getBody(wid);
    const hasCtrls = CTRL.has(nodeId);
    // Profile spec strip
    const _pnSpec = window._nexusProfile?.nodes?.find(pn=>pn.id===nodeId)||{};
    const _TYPE_ABBR={source:'SRC',scraper:'SCRP',extractor:'ETR',store:'DB',enricher:'ENR',
      classifier:'CLF',generator:'GEN',dispatcher:'DISP',monitor:'MON',sink:'SINK',etl:'ETL',operator:'OPR'};
    const _tChip = _pnSpec.type
      ? `<span class="nc-prof-type">${(_TYPE_ABBR[_pnSpec.type]||_pnSpec.type.slice(0,4)).toUpperCase()}</span>` : '';
    const _hcTag = _pnSpec.health_check && _pnSpec.health_check!=='none'
      ? `<span class="nc-prof-hc">${_pnSpec.health_check}</span>` : '';
    const _profHtml = (_pnSpec.type||_pnSpec.app)
      ? `<div class="nc-prof">${_tChip}<span class="nc-prof-app">${_pnSpec.app||nodeId}</span>${_hcTag}<span class="nc-prof-age" id="ncd-lage-${nodeId}"></span></div>` : '';
    const _descHtml = _pnSpec.description
      ? `<div class="nc-desc" onclick="this.classList.toggle('expanded')"><div class="nc-desc-text">${_pnSpec.description}</div></div>` : '';
    // Operator-specific: availability toggle button
    const _isOpNode = nodeId.startsWith('op_');
    const _bareOp   = _isOpNode ? nodeId.slice(3) : '';
    const _unavailBtn = _isOpNode ? `<div style="margin:6px 0 2px 0"><button id="ncd-ubtn-${nodeId}" onclick="ProtocolBar.toggleOperatorAvailability('${_bareOp}',this)" style="font:bold 8px Consolas,monospace;letter-spacing:1px;cursor:pointer;padding:3px 10px;border-radius:2px;border:1px solid #2a5a90;background:rgba(10,25,50,.7);color:#3a9fff;">MARK UNAVAILABLE</button></div>` : '';
    body.innerHTML=`<div class="nc-body">
      <div class="nc-sts">
        <div class="nc-sts-dot checking" id="ncd-dot-${nodeId}"></div>
        <span class="nc-sts-lbl" id="ncd-st-${nodeId}">initializing</span>
        <span class="nc-sts-pid" id="ncd-pid-${nodeId}"></span>
      </div>
      ${_profHtml}
      ${_descHtml}
      <div class="nc-spark-wrap"><canvas class="nc-spark-cnv" id="ncd-spark-${nodeId}"></canvas></div>
      <div class="nc-metrics" id="ncd-m-${nodeId}"></div>
      ${hasCtrls?`<div class="nc-qa" id="ncd-qa-${nodeId}"></div>`:''}
      ${_unavailBtn}
      ${hasCtrls?`<div class="nc-cdn-wrap" id="ncd-cdn-${nodeId}"></div>`:''}
      <div class="nc-log-hd">LOG STREAM</div>
      <div class="nc-log" id="ncd-log-${nodeId}"><div class="nc-log-entry info">connecting…</div></div>
    </div>`;
    if(hasCtrls) _buildQA(body, nodeId);
    if(hasCtrls) _refreshCadence(nodeId);
    const card={wid,logInterval:null,body};
    _cards.set(nodeId,card);
    card.logInterval=setInterval(()=>_refreshLog(nodeId),2800);
    _refreshLog(nodeId); _refreshStatus(nodeId);
    WinLauncher.register('nc-'+nodeId, n.label+' ('+n.sub+')', ()=>open(nodeId));
  }

  // REQ-032: populate cadence controls for a NodeCard
  function _refreshCadence(nodeId){
    const wrap = document.getElementById('ncd-cdn-' + nodeId); if(!wrap) return;
    fetch('/pipeline-cadence?node=' + encodeURIComponent(nodeId), {cache:'no-store'})
      .then(r=>r.json()).then(cfg=>{
        const RAMP_OPTS = ['linear','exponential','step'];
        const dv  = cfg.delay_ms   != null ? cfg.delay_ms   : '';
        const rm  = cfg.ramp_mode  || 'linear';
        const cut = cfg.cutoff     != null ? cfg.cutoff     : '';
        wrap.innerHTML =
          `<div class="nc-cdn-row">` +
          `<span class="nc-cdn-lbl">DELAY</span>` +
          `<input class="nc-cdn-inp" type="number" min="0" max="60000" step="100" ` +
            `value="${dv}" placeholder="0 ms" data-field="delay_ms" data-node="${nodeId}">` +
          `<span class="nc-cdn-unit">ms</span>` +
          `<select class="nc-cdn-sel" data-field="ramp_mode" data-node="${nodeId}">` +
            RAMP_OPTS.map(m=>`<option value="${m}"${m===rm?' selected':''}>${m}</option>`).join('') +
          `</select>` +
          `<span class="nc-cdn-lbl">CUTOFF</span>` +
          `<input class="nc-cdn-inp" type="number" min="0" max="100000" step="10" ` +
            `value="${cut}" placeholder="0" data-field="cutoff" data-node="${nodeId}">` +
          `<button class="nc-cdn-btn" data-node="${nodeId}">SET</button>` +
          `</div>`;
        wrap.querySelector('.nc-cdn-btn').addEventListener('click', ()=>{
          const delay  = parseInt(wrap.querySelector('[data-field="delay_ms"]').value) || 0;
          const ramp   = wrap.querySelector('[data-field="ramp_mode"]').value;
          const cutoff = parseInt(wrap.querySelector('[data-field="cutoff"]').value) || 0;
          fetch('/pipeline-cadence', {method:'POST',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({node:nodeId, delay_ms:delay, ramp_mode:ramp, cutoff}),
          }).then(r=>r.json()).then(res=>{
            if(res.ok) _appendLog(nodeId, '> cadence: '+delay+'ms '+ramp+' cutoff='+cutoff, 'ok');
            else       _appendLog(nodeId, '> cadence error: '+(res.error||'?'), 'err');
          }).catch(e=>_appendLog(nodeId, '> cadence ERR: '+e.message, 'err'));
        });
      }).catch(()=>{
        wrap.innerHTML = '<div class="nc-cdn-na">cadence n/a</div>';
      });
  }

  function _refreshLog(nodeId){
    const _n = Layout.getNode(nodeId); if(_n) refreshMetrics(nodeId, _n);

    fetch('/pipeline-node-log?node='+nodeId+'&lines=40')
      .then(r=>{if(!r.ok)throw new Error('HTTP '+r.status);return r.json();})
      .then(lines=>{
        const el=document.getElementById('ncd-log-'+nodeId); if(!el) return;
        if(!lines.length){ el.innerHTML='<div class="nc-log-entry info">no log output for this node</div>'; return; }
        const hasSrc=lines.some(l=>l.src);
        el.innerHTML=lines.map(l=>{
          const t=l.text.replace(/</g,'&lt;').replace(/>/g,'&gt;');
          const c=/error|fail|\u2717|\u2297/i.test(l.text)?'err':/\u2713|extracted|done|complete|alive/i.test(l.text)?'ok':'info';
          const srcCol=hasSrc?`<span class="nc-log-src">${(l.src||'').replace(/_log|_stdout/g,'')}</span>`:'';
          return '<div class="nc-log-entry '+c+'">'+srcCol+t+'</div>';
        }).join('');
        const _pkts = _ncPktLog.get(nodeId);
        if(_pkts && _pkts.length){
          _pkts.forEach(e=>{
            const d=document.createElement('div');
            d.className='nc-log-entry '+e.cls;
            d.textContent=e.text;
            el.appendChild(d);
          });
        }
        el.scrollTop=el.scrollHeight;
      }).catch(err=>{
        const el=document.getElementById('ncd-log-'+nodeId); if(!el) return;
        // only overwrite if no real log content has loaded yet
        if(!el.querySelector('.nc-log-entry.ok, .nc-log-entry.err'))
          el.innerHTML='<div class="nc-log-entry info">log stream unavailable — '+err.message+'</div>';
      });
    // Update aura position+heat
    const w=WindowManager.get('nc-'+nodeId);
    if(w&&w.auraMode){
      WindowManager.positionAuraAtNode('nc-'+nodeId,nodeId);
      const n=Layout.getNode(nodeId);
      WindowManager.setAuraHot('nc-'+nodeId,!!(n&&(n.status==='active'||n.active)));
    }
  }

  function _refreshStatus(nodeId){
    fetch('/pipeline-proc-status')
      .then(r=>r.json())
      .then(data=>{
        const s=data[nodeId];
        const dot=document.getElementById('ncd-dot-'+nodeId);
        const st=document.getElementById('ncd-st-'+nodeId);
        const pid=document.getElementById('ncd-pid-'+nodeId);
        if(!dot) return;
        // Update log-age element whenever we have age data
        const lageEl=document.getElementById('ncd-lage-'+nodeId);
        if(lageEl && s?.last_log_age_s!=null){
          const a=s.last_log_age_s;
          const fmt=a<60?Math.round(a)+'s':a<3600?(a/60).toFixed(0)+'m':(a/3600).toFixed(0)+'h';
          lageEl.textContent='log '+fmt+' ago';
          lageEl.style.color=a<120?'rgba(0,198,120,.65)':a<3600?'rgba(178,138,0,.60)':'rgba(175,55,55,.58)';
        }
        if(!s){
          // node exists but not tracked — show state from canvas node
          const n=Layout.getNode(nodeId);
          dot.className='nc-sts-dot '+(n?n.status:'unknown');
          if(st) st.textContent=n?(n.status.toUpperCase()):'NO PROCESS';
          return;
        }
        // Passive nodes (no start capability) show canvas status instead of proc state
        const _passive = !_getNodeActions(nodeId).length;
        const _cvs = Layout.getNode(nodeId);
        const cls = s.running ? 'running' : _passive ? (_cvs?.status||'unknown') : 'stopped';
        dot.className='nc-sts-dot '+cls;
        if(s.running) dot.classList.add('pulsing');
        if(st) st.textContent=s.running?'RUNNING':_passive?(_cvs?_cvs.status.toUpperCase():'PASSIVE'):'STOPPED';
        if(pid) pid.textContent=s.running?'PID '+s.pid:'';
        const nwEl=document.getElementById('nw-nc-'+nodeId);
        if(nwEl){
          const ndot=nwEl.querySelector('.nw-ndot');
          if(ndot){
            ndot.style.background=s.running?'#00ff88':'#ff4040';
            ndot.style.boxShadow=s.running?'0 0 6px #00ff88':'0 0 4px #ff3030';
            ndot.classList.toggle('pulsing',s.running);
          }
        }
      }).catch(()=>{
        const dot=document.getElementById('ncd-dot-'+nodeId);
        const st=document.getElementById('ncd-st-'+nodeId);
        if(dot) dot.className='nc-sts-dot unknown';
        if(st) st.textContent='STATUS UNAVAIL';
      });
  }

  function _appendLog(nodeId,text,cls){
    const el=document.getElementById('ncd-log-'+nodeId); if(!el) return;
    const d=document.createElement('div'); d.className='nc-log-entry '+(cls||'info');
    d.textContent=text; el.appendChild(d); el.scrollTop=el.scrollHeight;
    while(el.children.length>80) el.removeChild(el.firstChild);
  }

  function refreshMetrics(nodeId,n){
    const el=document.getElementById('ncd-m-'+nodeId); if(!el||!n) return;
    const info=n._info||{};
    const prev=_prevVals.get(nodeId)||{};
    const entries=Object.entries(info);
    el.innerHTML=entries.map(([k,v])=>{
      const vs=String(v); const changed=prev[k]!==undefined&&prev[k]!==vs;
      return '<div class="nc-kv"><span class="nc-k">'+k+'</span>'+
             '<span class="nc-v'+(changed?' changed':'')+'">'+vs+'</span></div>';
    }).join('');
    // Save snapshot for change detection
    const snap={}; entries.forEach(([k,v])=>snap[k]=String(v));
    _prevVals.set(nodeId,snap);
    // sparkline
    const cnv=document.getElementById('ncd-spark-'+nodeId);
    if(cnv&&typeof NodeStats!=='undefined'){
      const W=cnv.parentElement?cnv.parentElement.offsetWidth-14:200;
      if(W>10){ cnv.width=W; cnv.height=19; }
      const col=NODE_COL[n.status]||NODE_COL.blocked;
      _drawSparklineSm(cnv,NodeStats.sparkVals(nodeId),`rgb(${col.r},${col.g},${col.b})`,0.15);
    }
    // update titlebar dot
    const nwEl=document.getElementById('nw-nc-'+nodeId);
    if(nwEl){
      const ndot=nwEl.querySelector('.nw-ndot');
      if(ndot){ const c=NODE_COL[n.status]||NODE_COL.blocked; ndot.style.background=`rgba(${c.r},${c.g},${c.b},.9)`; }
    }
  }

  function openAura(nodeId){
    open(nodeId);
    const w=WindowManager.get('nc-'+nodeId);
    if(w&&!w.auraMode) WindowManager.toggleAura('nc-'+nodeId);
  }

  function close(nodeId){
    const c=_cards.get(nodeId); if(!c) return;
    if(c.logInterval) clearInterval(c.logInterval);
    WindowManager.destroy('nc-'+nodeId); _cards.delete(nodeId);
  }

  function updateAll(pipelineData){
    _cards.forEach((card,nodeId)=>{
      const n=Layout.getNode(nodeId); if(n) refreshMetrics(nodeId,n);
      _refreshStatus(nodeId);
    });
  }

  return {open,close,openAura,updateAll};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: LIVE_FEED  – global event stream floating window
   ════════════════════════════════════════════════════════════════════════════ */
const LiveFeed = (() => {
  const ID='livefeed';

  function _defaultGeom(){
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    const tlH=(document.getElementById('timeline')||{offsetHeight:68}).offsetHeight;
    const sbH=(document.getElementById('statusbar')||{offsetHeight:22}).offsetHeight;
    const ch=window.innerHeight-tbH-tlH-sbH;
    return {x:4, y:tbH+ch-168, w:316, h:158};
  }

  function ensure(){
    if(WindowManager.has(ID)) return;  // already open — do nothing
    // Clear any stale saved position so window always opens bottom-left
    try{
      const store=JSON.parse(localStorage.getItem('nexus_win_pos')||'{}');
      delete store[ID];
      localStorage.setItem('nexus_win_pos', JSON.stringify(store));
    }catch(e){}
    WindowManager.create(ID,{
      title:'LIVE FEED — EVENT STREAM',
      initialGeom:_defaultGeom(),
      pipMode:true,
    });
    WindowManager.getBody(ID).innerHTML=
      '<div class="lf-body-wrap">'+
      '<canvas class="lf-bg-spark" id="lf-bg-spark"></canvas>'+
      '<div class="lf-log" id="lf-log"></div>'+
      '</div>';
  }

  function push(evt){
    ensure();
    const log=document.getElementById('lf-log'); if(!log) return;
    const col=PACKET_COL[evt.type]||PACKET_COL.capture;
    const cs=`rgb(${col.r},${col.g},${col.b})`;
    const e=document.createElement('div'); e.className='lf-entry';
    e.innerHTML=`<span class="lf-ts">${(evt.ts||'').slice(11)}</span>`+
      `<span class="lf-type" style="color:${cs}">${(evt.type||'').toUpperCase().slice(0,7)}</span>`+
      `<span class="lf-lbl">${evt.label}</span>`;
    log.appendChild(e);
    while(log.children.length>128) log.removeChild(log.firstChild);
    log.scrollTop = log.scrollHeight;
  }

  function show(){ ensure(); WindowManager.focus(ID); }

  // Register with WinLauncher so it can be reopened after close
  setTimeout(()=> WinLauncher.register(ID, 'LIVE FEED — EVENT STREAM', show), 0);

  return {ensure,push,show};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: PERF_MATRIX  – C3 operator performance matrix (C1/C3/C6 requirements)
   Reads today_* and avg7_* fields injected by pipeline_dashboard._collect()
   ════════════════════════════════════════════════════════════════════════════ */
const PerfMatrix = (() => {
  const ID = 'perf-matrix';

  function _render(pipelineData) {
    const body = WindowManager.getBody(ID);
    if (!body) return;
    const ops = pipelineData.operators || {};
    const rows = Object.entries(ops)
      .filter(([k, v]) => k !== 'total_dispatched' && v && typeof v === 'object' && v.name)
      .sort((a, b) => {
        // Rank by today_submitted (×10 weight) + avg7_submitted, then name
        const aS = (a[1].today_submitted || 0) * 10 + (a[1].avg7_submitted || 0);
        const bS = (b[1].today_submitted || 0) * 10 + (b[1].avg7_submitted || 0);
        return bS !== aS ? bS - aS : (a[1].name || '').localeCompare(b[1].name || '');
      });

    if (!rows.length) {
      body.innerHTML = '<div class="pm-empty">No operator data.</div>';
      return;
    }

    const _n  = v => (v == null || v === undefined) ? '—' : v;
    const _hi = v => (v != null && v > 0) ? ' pm-hi' : '';

    body.innerHTML = `<div class="pm-wrap">
      <table class="pm-tbl">
        <thead>
          <tr>
            <th>OPERATOR</th>
            <th colspan="3">RECENT</th>
            <th colspan="3">7-DAY AVG</th>
          </tr>
          <tr class="pm-sub-hd">
            <th></th>
            <th>ASGN</th><th>ASSD</th><th>SUB</th>
            <th>ASGN</th><th>ASSD</th><th>SUB</th>
          </tr>
        </thead>
        <tbody>
          ${rows.map(([k, v]) => `<tr>
            <td class="pm-name">${v.name}</td>
            <td class="pm-num${_hi(v.today_assigned)}">${_n(v.today_assigned)}</td>
            <td class="pm-num${_hi(v.today_assessed)}">${_n(v.today_assessed)}</td>
            <td class="pm-num${_hi(v.today_submitted)} pm-sub">${_n(v.today_submitted)}</td>
            <td class="pm-num">${_n(v.avg7_assigned)}</td>
            <td class="pm-num">${_n(v.avg7_assessed)}</td>
            <td class="pm-num pm-sub">${_n(v.avg7_submitted)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
      <div class="pm-legend">ASGN=assigned · ASSD=assessed · SUB=submitted</div>
    </div>`;
  }

  function open() {
    if (WindowManager.has(ID)) { WindowManager.focus(ID); return; }
    const tbH = (document.getElementById('topbar') || { offsetHeight: 38 }).offsetHeight;
    WindowManager.create(ID, {
      title: 'OPERATOR PERFORMANCE MATRIX — C3',
      initialGeom: { x: Math.max(4, window.innerWidth - 450), y: tbH + 8, w: 440, h: 280 },
    });
    const d = typeof StateApplier !== 'undefined' ? StateApplier.getLastData && StateApplier.getLastData() : null;
    if (d) _render(d);
    else {
      const b = WindowManager.getBody(ID);
      if (b) b.innerHTML = '<div class="pm-empty">Waiting for data…</div>';
    }
  }

  function update(pipelineData) {
    if (!WindowManager.has(ID)) return;
    _render(pipelineData);
  }

  // Register with WinLauncher at startup
  setTimeout(() => WinLauncher.register(ID, 'OPERATOR PERFORMANCE MATRIX', open), 0);

  return { open, update };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: HOVER  – mouse over canvas → detect node/packet/trace, show tooltip
   ════════════════════════════════════════════════════════════════════════════ */
const Hover = (() => {
  let _hoveredNode = null;
  let _mouseX=0, _mouseY=0;
  const tooltip = document.getElementById('tooltip');

  function hitNode(mx, my){
    for(const n of Layout.allNodes){
      if(!n) continue;
      if(mx>=n.x-n.w/2 && mx<=n.x+n.w/2 &&
         my>=n.y-n.h/2 && my<=n.y+n.h/2) return n;
    }
    return null;
  }

  function hitPacket(mx, my){
    for(const p of Packets.getActive()){
      const c=Layout.getConn(p.conn); if(!c) continue;
      const pos=Layout.pathAt(c,p.t);
      const dx=mx-pos.x, dy=my-pos.y;
      if(dx*dx+dy*dy < 300) return p;
    }
    return null;
  }

  // ── Drag state ──────────────────────────────────────────────────────────
  let _dragNode=null, _dragOx=0, _dragOy=0, _wasDragged=false;

  // Zoom-aware canvas coordinate helper: converts viewport px to canvas CSS px
  function _cxy(e){ const r=canvas.getBoundingClientRect(),z=window._nexusUiZoom||1; return {sx:(e.clientX-r.left)/z, sy:(e.clientY-r.top)/z}; }

  canvas.addEventListener('mousemove', e=>{
    const {sx:_mx,sy:_my}=_cxy(e);
    _mouseX=_mx;
    _mouseY=_my;
    // suppress hover during drag or pan
    if(_dragNode||Camera.isPanning()){ tooltip.style.display='none'; return; }

    const {x:_wmx,y:_wmy}=Camera.sw(_mouseX,_mouseY);
    const hovN=hitNode(_wmx,_wmy);
    const hovP=hovN?null:hitPacket(_wmx,_wmy);
    const hovT=(hovN||hovP)?null:Traces.hit(_wmx,_wmy);

    Layout.allNodes.forEach(n=>{ if(n) n._hovered=false; });
    Traces.getAll().forEach(d=>d._hovered=false);
    if(hovN) hovN._hovered=true;
    if(hovT) hovT._hovered=true;

    if(hovN)       showNodeTooltip(hovN, e.clientX, e.clientY);
    else if(hovP)  showPacketTooltip(hovP, e.clientX, e.clientY);
    else if(hovT)  showTraceTooltip(hovT, e.clientX, e.clientY);
    else           tooltip.style.display='none';
    _hoveredNode=hovN;
  });

  canvas.addEventListener('mouseleave', ()=>{
    tooltip.style.display='none';
    Layout.allNodes.forEach(n=>{ if(n) n._hovered=false; });
    Traces.getAll().forEach(d=>d._hovered=false);
    _hoveredNode=null;
  });

  canvas.addEventListener('click', e=>{
    if(_wasDragged){ _wasDragged=false; return; }
    const {sx,sy}=_cxy(e);
    const {x:mx,y:my}=Camera.sw(sx,sy);
    const n=hitNode(mx,my);
    if(n){
      // Single click = open interactive NodeCard; show detail panel too
      NodeCard.open(n.id);
      DetailPanel.openNode(n);
      return;
    }
    const p=hitPacket(mx,my);
    if(p){ DetailPanel.openPacket(p); return; }
    const d=Traces.hit(mx,my);
    if(d){ DetailPanel.openTrace(d); return; }
    DetailPanel.close();
  });

  // ── Node drag – pointerdown / pointermove / pointerup ────────────────────
  canvas.addEventListener('pointerdown', e=>{
    if(e.button!==0) return;
    const {sx,sy}=_cxy(e);
    const {x:mx,y:my}=Camera.sw(sx,sy);
    const n=hitNode(mx,my);
    if(n){
      _dragNode=n; _dragOx=mx-n.x; _dragOy=my-n.y;
      _wasDragged=false;
    } else {
      Camera.startPan(sx,sy);
    }
    canvas.setPointerCapture(e.pointerId);
    e.preventDefault();
  });

  canvas.addEventListener('pointermove', e=>{
    const {sx,sy}=_cxy(e);
    if(_dragNode){
      const {x:mx,y:my}=Camera.sw(sx,sy);
      _dragNode.x=mx-_dragOx;
      _dragNode.y=my-_dragOy;
      Layout.computePaths();
      _wasDragged=true;
    } else if(Camera.isPanning()){
      Camera.movePan(sx,sy);
      _wasDragged=true;
    }
  });

  canvas.addEventListener('pointerup', e=>{
    if(_dragNode){
      // Auto-save ALL node positions after every drag
      if(_wasDragged && _dragNode.id){
        const cw=CW(), ch=CH(), layout={};
        Layout.allNodes.forEach(nd=>{ if(nd && nd.id) layout[nd.id]={ xf: nd.x/cw, yf: nd.y/ch }; });
        const count = Object.keys(layout).length;
        localStorage.setItem('nexus_node_layout', JSON.stringify(layout));
        const btn=document.getElementById('btn-save-layout');
        if(btn){ btn.textContent='SAVED'; btn.style.color='#00ff88'; btn.style.borderColor='rgba(0,255,100,.6)'; setTimeout(()=>{ btn.textContent='SAVE'; btn.style.color=''; btn.style.borderColor=''; },2000); }
        if(typeof LiveFeed!=='undefined'){
          LiveFeed.push({type:'sync', label:'LAYOUT AUTO-SAVED \u2014 '+count+' nodes pinned', node:_dragNode.id, ts:new Date().toISOString()});
          LiveFeed.show();
        }
      }
      _dragNode=null;
    } else if(Camera.isPanning()){ if(Camera.endPan()) _wasDragged=true; }
    canvas.releasePointerCapture(e.pointerId);
  });

  document.getElementById('btn-save-layout').addEventListener('click',()=>{
    const cw=CW(), ch=CH();
    const layout={};
    Layout.allNodes.forEach(nd=>{ if(nd && nd.id) layout[nd.id]={ xf: nd.x/cw, yf: nd.y/ch }; });
    const count = Object.keys(layout).length;
    const btn=document.getElementById('btn-save-layout');
    if(!count){
      btn.textContent='ERR'; btn.style.color='#ff4444';
      setTimeout(()=>{ btn.textContent='SAVE'; btn.style.color=''; },2000);
      console.warn('[SAVE] No nodes found in Layout.allNodes');
      return;
    }
    console.log('[SAVE] Writing layout to localStorage:', layout);
    localStorage.setItem('nexus_node_layout', JSON.stringify(layout));
    btn.textContent='SAVED'; btn.style.color='#00ff88'; btn.style.borderColor='rgba(0,255,100,.6)';
    setTimeout(()=>{ btn.textContent='SAVE'; btn.style.color=''; btn.style.borderColor=''; },2000);
    if(typeof LiveFeed!=='undefined'){
      LiveFeed.push({type:'sync', label:'LAYOUT SAVED — '+count+' nodes pinned', node:'task_dispatch', ts:new Date().toISOString()});
      LiveFeed.show();
    }
  });

  document.getElementById('btn-reset-layout').addEventListener('click',()=>{
    localStorage.removeItem('nexus_node_layout');
    localStorage.removeItem('nexus_op_layout');
    Layout.rebuild();
    Layout.computePaths();
    if(typeof LiveFeed!=='undefined') LiveFeed.push({type:'sync', label:'LAYOUT RESET — all node default positions restored', node:'task_dispatch', ts:new Date().toISOString()});
  });

  canvas.addEventListener('wheel', e=>{
    const {sx,sy}=_cxy(e);
    Camera.zoomAround(sx,sy, e.deltaY<0?1.15:1/1.15);
    e.preventDefault();
  }, {passive:false});

  function showNodeTooltip(n, cx, cy){
    const col=NODE_COL[n.status]||NODE_COL.blocked;
    const rows=Object.entries(n._info||{})
      .map(([k,v])=>`<div class="tt-row"><span class="tt-key">${k}</span><span class="tt-val">${v}</span></div>`)
      .join('');
    tooltip.innerHTML=`
      <div class="tt-title" style="color:rgba(${col.r},${col.g},${col.b},1)">${n.label}</div>
      <div class="tt-row"><span class="tt-key">status</span><span class="tt-val">${n.status.toUpperCase()}</span></div>
      ${rows}
      <div style="color:#1a3a60;font-size:8px;margin-top:4px">Click to expand details</div>
    `;
    _positionTooltip(cx,cy);
  }

  function showPacketTooltip(p, cx, cy){
    const col=p.col;
    tooltip.innerHTML=`
      <div class="tt-title" style="color:rgba(${col.r},${col.g},${col.b},1)">${p.label}</div>
      <div class="tt-row"><span class="tt-key">type</span><span class="tt-val">${p.type}</span></div>
      <div class="tt-row"><span class="tt-key">pipe</span><span class="tt-val">${p.conn}</span></div>
      <div class="tt-row"><span class="tt-key">progress</span><span class="tt-val">${Math.round(p.t*100)}%</span></div>
      <div class="tt-row"><span class="tt-key">time</span><span class="tt-val">${p.ts||'—'}</span></div>
      <div style="color:#1a3a60;font-size:8px;margin-top:4px">Click to expand details</div>
    `;
    _positionTooltip(cx,cy);
  }

  function showTraceTooltip(d, cx, cy){
    const col=d.col;
    const pipeCnt=Traces.getAll().filter(t=>t.conn===d.conn).length;
    tooltip.innerHTML=`
      <div class="tt-title" style="color:rgba(${col.r},${col.g},${col.b},1)">${d.label}</div>
      <div class="tt-row"><span class="tt-key">type</span><span class="tt-val">${d.type}</span></div>
      <div class="tt-row"><span class="tt-key">pipe</span><span class="tt-val">${d.conn}</span></div>
      <div class="tt-row"><span class="tt-key">recorded</span><span class="tt-val">${d.ts}</span></div>
      <div class="tt-row"><span class="tt-key">events on pipe</span><span class="tt-val">${pipeCnt}</span></div>
      <div style="color:#1a3a60;font-size:8px;margin-top:4px">Click to expand details</div>
    `;
    _positionTooltip(cx,cy);
  }

  function _positionTooltip(cx,cy){
    tooltip.style.display='block';
    const tw=tooltip.offsetWidth, th=tooltip.offsetHeight;
    const z=window._nexusUiZoom||1;
    const ww=window.innerWidth/z, wh=window.innerHeight/z;
    const x=cx/z, y=cy/z;
    let tx=x+14, ty=y-8;
    if(tx+tw>ww-10) tx=x-tw-14;
    if(ty+th>wh-10) ty=y-th-8;
    tooltip.style.left=tx+'px';
    tooltip.style.top =ty+'px';
  }

  return { getHoveredNode:()=>_hoveredNode };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: CAMERA  – pan / zoom transform for the canvas world
   ════════════════════════════════════════════════════════════════════════════ */
const Camera = (() => {
  let _z=1, _tx=0, _ty=0;
  const ZMIN=0.25, ZMAX=4.0;
  let _panStart=null;

  function sw(sx,sy){ return {x:(sx-_tx)/_z, y:(sy-_ty)/_z}; }
  function ws(wx,wy){ return {x:wx*_z+_tx,   y:wy*_z+_ty};   }

  function applyCtx(){
    ctx.save();
    ctx.transform(_z,0,0,_z,_tx,_ty);
  }
  function restoreCtx(){ ctx.restore(); }

  function zoomAround(cx,cy,f){
    const nz=Math.min(ZMAX,Math.max(ZMIN,_z*f));
    _tx = cx - (nz/_z)*(cx-_tx);
    _ty = cy - (nz/_z)*(cy-_ty);
    _z  = nz;
    Layout.computePaths();
  }
  function zoomIn(){  zoomAround(CW()/2,CH()/2,1.3); }
  function zoomOut(){ zoomAround(CW()/2,CH()/2,1/1.3); }
  function fit(){
    const nodes = Layout.allNodes;
    if(!nodes.length){ _z=1; _tx=0; _ty=0; Layout.computePaths(); return; }
    const PAD = 60;
    let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;
    nodes.forEach(n=>{
      const hw=(n.w||120)/2, hh=(n.h||60)/2;
      if(n.x-hw<minX) minX=n.x-hw;
      if(n.y-hh<minY) minY=n.y-hh;
      if(n.x+hw>maxX) maxX=n.x+hw;
      if(n.y+hh>maxY) maxY=n.y+hh;
    });
    const vw=CW(), vh=CH();
    const scaleX=(vw-PAD*2)/(maxX-minX||1);
    const scaleY=(vh-PAD*2)/(maxY-minY||1);
    _z = Math.min(scaleX, scaleY, 1.5);
    _tx = vw/2 - _z*(minX+maxX)/2;
    _ty = vh/2 - _z*(minY+maxY)/2;
    Layout.computePaths();
  }

  function startPan(sx,sy){
    _panStart={sx,sy,tx0:_tx,ty0:_ty};
  }
  function movePan(sx,sy){
    if(!_panStart) return false;
    _tx=_panStart.tx0+(sx-_panStart.sx);
    _ty=_panStart.ty0+(sy-_panStart.sy);
    Layout.computePaths();
    return true;
  }
  function endPan(){
    const moved=_panStart&&(
      Math.abs(_tx-_panStart.tx0)+Math.abs(_ty-_panStart.ty0)>4);
    _panStart=null;
    return moved;
  }
  function isPanning(){ return !!_panStart; }

  return {sw, ws, applyCtx, restoreCtx, zoomIn, zoomOut, fit, zoomAround,
          startPan, movePan, endPan, isPanning,
          centerOn(wx, wy, targetZ){
            const nz = Math.min(ZMAX, Math.max(ZMIN, targetZ || _z));
            _z  = nz;
            _tx = CW()/2 - wx * _z;
            _ty = CH()/2 - wy * _z;
            Layout.computePaths();
          },
          get zoom(){ return _z; }};
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: RENDERER  – draws grid, pipes, packets, nodes each frame
   ════════════════════════════════════════════════════════════════════════════ */
const Renderer = (() => {
  let _pulse=0;

  function rgba(c,a){ return `rgba(${c.r},${c.g},${c.b},${a})`; }

  function frame(){
    const w=CW(), h=CH();
    ctx.clearRect(0,0,w,h);
    _drawGrid(w,h);
    Camera.applyCtx();
    _pulse=(_pulse+0.022)%(Math.PI*2);
    const pv=0.5+0.5*Math.sin(_pulse);
    const cursorMs = Timeline.getCursor();

    // Per-pipe activity heat (0-1): drives bloom intensity
    const heatMap = {};
    for(const c of Layout.conns) heatMap[c.id] = Traces.getHeat(c.id, cursorMs, HEAT_WINDOW);
    // Per-node heat: max of all connected pipes
    const nodeHeat = {};
    for(const c of Layout.conns){
      const nh = heatMap[c.id];
      nodeHeat[c.from] = Math.max(nodeHeat[c.from]||0, nh);
      nodeHeat[c.to]   = Math.max(nodeHeat[c.to]  ||0, nh);
    }

    for(const c of Layout.conns) _drawPipe(c, pv, heatMap[c.id]||0);
    _drawTrackLabels(w,h);
    // Trace dots are not rendered — they exist only for hover hit-detection and detail panel data.
    // Active pills (heartbeat + real events) carry the visual load.
    for(const p of Packets.getActive()){
      if(p.upstream) _drawSteeringPacket(p); else _drawPacket(p);
    }
    for(const n of Layout.allNodes) _drawNode(n, pv, nodeHeat[n.id]||0);
    if(typeof FloatNums!=='undefined'){ FloatNums.step(); FloatNums.draw(); }
    Camera.restoreCtx();
    for(const n of Layout.allNodes){
      if(!n) continue;
      if(n.flash>0)      n.flash=Math.max(0,n.flash-window.NODE_CFG.flashDecay);
      if(n.srcGlow>0)    n.srcGlow=Math.max(0,n.srcGlow-window.NODE_CFG.srcGlowDecay);
      if(n.failFlash>0)  n.failFlash=Math.max(0,n.failFlash-0.004);
      if(n._hovered||(nodeHeat[n.id]||0)>0.05||n.status==='active'||n.status==='ready') n.spinAngle=(n.spinAngle||0)+0.028;
    }
    // legend rendered as HTML in #timeline (see #color-legend)
  }

  function _drawColorLegend(w,h){
    const items=[
      {col:NODE_COL.active, label:'ACTIVE',  sub:'submitted / lead open'},
      {col:NODE_COL.ready,  label:'READY',   sub:'tasks queued — none submitted'},
      {col:NODE_COL.done,   label:'DONE',    sub:'all tasks complete'},
      {col:NODE_COL.blocked,label:'DORMANT', sub:'no tasks assigned'},
    ];
    const rowH=12, dotR=4, dotOX=6, lblX=16, subX=58;
    const boxW=260, boxH=16+items.length*rowH;
    const px=w-boxW-14, py=h-64;
    ctx.save();
    ctx.globalAlpha=0.78;
    ctx.fillStyle='rgba(4,9,22,0.82)';
    ctx.strokeStyle='rgba(0,180,255,0.18)';
    ctx.lineWidth=1;
    ctx.beginPath(); ctx.rect(px-4,py-8,boxW,boxH); ctx.fill(); ctx.stroke();
    ctx.globalAlpha=1;
    items.forEach((item,i)=>{
      const y=py+i*rowH+4;
      ctx.shadowColor=`rgba(${item.col.r},${item.col.g},${item.col.b},0.7)`;
      ctx.shadowBlur=6;
      ctx.beginPath(); ctx.arc(px+dotOX, y, dotR, 0, Math.PI*2);
      ctx.fillStyle=`rgb(${item.col.r},${item.col.g},${item.col.b})`;
      ctx.fill();
      ctx.shadowBlur=0;
      ctx.font='bold 9px Consolas,monospace';
      ctx.textAlign='left'; ctx.textBaseline='middle';
      ctx.fillStyle=`rgb(${item.col.r},${item.col.g},${item.col.b})`;
      ctx.fillText(item.label, px+lblX, y);
      ctx.font='9px Consolas,monospace';
      ctx.fillStyle='rgba(180,200,220,0.70)';
      ctx.fillText(item.sub, px+subX, y);
    });
    ctx.restore();
  }

  function _drawTraces(pv){
    for(const d of Traces.getAll()){
      const c=Layout.getConn(d.conn); if(!c||!c.pts) continue;
      const pos=Layout.pathAt(c,d.t);
      const col=d.col;
      const hov=d._hovered;
      // Non-hovered: nearly invisible tick marks — just a 1px dot
      // Hovered: full callout with label
      if(!hov){
        ctx.beginPath();
        ctx.arc(pos.x,pos.y,1.5,0,Math.PI*2);
        ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},0.10)`;
        ctx.fill();
        continue;
      }
      // Hovered state — glowing dot + label
      ctx.shadowColor=`rgba(${col.r},${col.g},${col.b},0.5)`;
      ctx.shadowBlur=14;
      ctx.beginPath();
      ctx.arc(pos.x,pos.y,8,0,Math.PI*2);
      ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},0.90)`;
      ctx.fill();
      ctx.shadowBlur=0;
      if(hov){
        ctx.font='bold 9px Consolas,monospace';
        const tw=ctx.measureText(d.label).width;
        const pw=tw+12,ph=16,px=pos.x-pw/2,py=pos.y-r-18;
        ctx.fillStyle='rgba(4,9,20,.96)';
        ctx.beginPath(); ctx.rect(px,py,pw,ph); ctx.fill();
        ctx.strokeStyle=`rgba(${col.r},${col.g},${col.b},.8)`;
        ctx.lineWidth=1; ctx.stroke();
        ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},.95)`;
        ctx.textAlign='center'; ctx.textBaseline='middle';
        ctx.fillText(d.label,pos.x,py+ph/2);
        ctx.textAlign='left'; ctx.textBaseline='alphabetic';
      }
    }
  }

  function _drawGrid(w,h){
    ctx.strokeStyle='rgba(9,22,42,.85)'; ctx.lineWidth=1;
    for(let x=0;x<w;x+=44){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke();}
    for(let y=0;y<h;y+=44){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke();}
  }

  function _drawPipe(c, pv, heat){
    const pts=c.pts; if(!pts||pts.length<2) return;
    const col=NODE_COL[c.status]||NODE_COL.blocked;
    const isBlocked = c.status==='blocked';
    const alpha = isBlocked ? 0.09 : 0.20;

    // Activity bloom: wide soft halo behind active pipes
    if(heat > 0.05 && !isBlocked){
      ctx.shadowColor=`rgba(${col.r},${col.g},${col.b},${heat*0.40})`;
      ctx.shadowBlur = 6 + heat*22;
      ctx.beginPath(); ctx.moveTo(pts[0].x,pts[0].y);
      for(let i=1;i<pts.length;i++) ctx.lineTo(pts[i].x,pts[i].y);
      ctx.strokeStyle=rgba(col, heat*0.10);
      ctx.lineWidth=9+heat*9; ctx.stroke();
      ctx.shadowBlur=0;
    }

    // Pipe body
    ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);
    for(let i=1;i<pts.length;i++) ctx.lineTo(pts[i].x,pts[i].y);
    ctx.setLineDash(c.dashed?[5,8]:[]);
    ctx.strokeStyle=rgba(col,(alpha+heat*0.12)*0.5); ctx.lineWidth=7+heat*3; ctx.stroke();
    ctx.strokeStyle=rgba(col, alpha+(isBlocked?0:0.08*pv)+heat*0.28);
    ctx.lineWidth=1.5+heat*1.5; ctx.stroke(); ctx.setLineDash([]);

    // Arrowhead (brightness scales with heat)
    if(c.dir!=='bend'){
      const n=pts.length,ep=pts[n-1],pp=pts[Math.max(0,n-4)];
      const ang=Math.atan2(ep.y-pp.y,ep.x-pp.x);
      ctx.beginPath();ctx.moveTo(ep.x,ep.y);
      ctx.lineTo(ep.x-11*Math.cos(ang-.42),ep.y-11*Math.sin(ang-.42));
      ctx.lineTo(ep.x-11*Math.cos(ang+.42),ep.y-11*Math.sin(ang+.42));
      ctx.closePath();
      ctx.fillStyle=rgba(col, isBlocked?0.15:(0.50+heat*0.35)); ctx.fill();
    }

    // Label for the retry return arc
    if(c.id==='err_retry' && pts.length>0){
      const mid=pts[Math.floor(pts.length/2)];
      ctx.save();
      ctx.font='bold 9px Consolas,monospace';
      ctx.textAlign='center'; ctx.textBaseline='bottom';
      ctx.fillStyle=rgba(col, isBlocked?0.30:0.65+heat*0.25);
      ctx.fillText('RETRY', mid.x, mid.y-4);
      ctx.restore();
    }
    // Label for audit→dispatch feedback arc
    if(c.id==='audit_to_td' && pts.length>0){
      const mid=pts[Math.floor(pts.length/2)];
      ctx.save();
      ctx.font='bold 9px Consolas,monospace';
      ctx.textAlign='center'; ctx.textBaseline='bottom';
      ctx.fillStyle=rgba(col, isBlocked?0.25:0.60+heat*0.25);
      ctx.fillText('MONITOR', mid.x, mid.y-4);
      ctx.restore();
    }
  }

  // REQ-033: Draws hollow diamond steering packet traveling upstream (1.0→0.0 display)
  function _drawSteeringPacket(p){
    const c = Layout.getConn(p.conn); if(!c || !c.pts) return;
    const t = 1.0 - p.t;   // upstream: invert t so packet visually moves from to→from
    const col = STEERING_COL[p.type] || {r:200, g:80, b:255};
    const pos = Layout.pathAt(c, t);
    const sz = 7;
    ctx.save();
    // Glow halo
    const grad = ctx.createRadialGradient(pos.x, pos.y, sz*0.2, pos.x, pos.y, sz*2.8);
    grad.addColorStop(0, `rgba(${col.r},${col.g},${col.b},0.30)`);
    grad.addColorStop(1, `rgba(${col.r},${col.g},${col.b},0)`);
    ctx.beginPath(); ctx.arc(pos.x, pos.y, sz*2.8, 0, Math.PI*2);
    ctx.fillStyle = grad; ctx.fill();
    // Hollow diamond
    ctx.beginPath();
    ctx.moveTo(pos.x,      pos.y - sz);
    ctx.lineTo(pos.x + sz, pos.y     );
    ctx.lineTo(pos.x,      pos.y + sz);
    ctx.lineTo(pos.x - sz, pos.y     );
    ctx.closePath();
    ctx.fillStyle   = `rgba(${col.r},${col.g},${col.b},0.13)`;
    ctx.strokeStyle = `rgba(${col.r},${col.g},${col.b},0.88)`;
    ctx.lineWidth = 1.6;
    ctx.fill(); ctx.stroke();
    // Short label
    ctx.font = '6px Consolas, monospace';
    ctx.textAlign = 'center';
    ctx.fillStyle = `rgba(${col.r},${col.g},${col.b},0.82)`;
    const _lbl = p.type==='cadence_req'?'CDN':p.type==='throttle_req'?'THR':'ACK';
    ctx.fillText(_lbl, pos.x, pos.y + sz + 8);
    ctx.restore();
  }

  function _drawPacket(p){
    const c=Layout.getConn(p.conn); if(!c||!c.pts) return;
    const col=p.col;
    const sig = SIGNIFICANCE[p.type] || 0.60;
    const pos = Layout.pathAt(c, p.t);
    const cfg = window.DOT_CFG;
    // REQ-028: data-driven packet size — dot radius scales with sqrt(count), capped at 2.5×
    const _cntFactor = (p.count && p.count > 1) ? Math.min(2.5, Math.sqrt(p.count)) : 1;
    const r = (cfg.r + sig * cfg.sigScale) * _cntFactor;
    const glow = r * cfg.glowMult;

    ctx.save();

    // Radial gradient halo
    const grad = ctx.createRadialGradient(pos.x, pos.y, r*0.5, pos.x, pos.y, glow);
    grad.addColorStop(0, `rgba(${col.r},${col.g},${col.b},${cfg.glowAlpha})`);
    grad.addColorStop(1, `rgba(${col.r},${col.g},${col.b},0)`);
    ctx.beginPath();
    ctx.arc(pos.x, pos.y, glow, 0, Math.PI*2);
    ctx.fillStyle = grad;
    ctx.fill();

    // Solid colored body
    ctx.beginPath();
    ctx.arc(pos.x, pos.y, r, 0, Math.PI*2);
    ctx.fillStyle = `rgba(${col.r},${col.g},${col.b},1)`;
    ctx.fill();

    // White hot core
    ctx.beginPath();
    ctx.arc(pos.x, pos.y, r*cfg.coreFrac, 0, Math.PI*2);
    ctx.fillStyle = 'rgba(255,255,255,0.95)';
    ctx.fill();

    ctx.restore();
  }

  function _drawNode(n, pv, heat){
    if(!n) return;
    const {x,y,w,h,label,sub,status,metric,flash,srcGlow,spinAngle,active,_hovered}=n;
    const col=NODE_COL[status]||NODE_COL.blocked;
    const hw=w/2, hh=h/2;
    const highlighted=_hovered;
    const ht = heat||0;
    if(n.dormant) ctx.globalAlpha = 0.52;

    // Source fire glow — stacks per packet sent, render path identical to flash
    if(srcGlow>0){
      const ncfg=window.NODE_CFG;
      const sg_grad=ctx.createRadialGradient(x,y,0,x,y,Math.max(w,h));
      sg_grad.addColorStop(0,`rgba(${col.r},${col.g},${col.b},${srcGlow*ncfg.flashAlpha})`);
      sg_grad.addColorStop(1,`rgba(${col.r},${col.g},${col.b},0)`);
      ctx.beginPath();ctx.ellipse(x,y,w*ncfg.glowRW,h*ncfg.glowRH,0,0,Math.PI*2);
      ctx.fillStyle=sg_grad;ctx.fill();
    }

    if(flash>0){
      const ncfg=window.NODE_CFG;
      const fg=ctx.createRadialGradient(x,y,0,x,y,Math.max(w,h));
      fg.addColorStop(0,`rgba(${col.r},${col.g},${col.b},${flash*ncfg.flashAlpha})`);
      fg.addColorStop(1,`rgba(${col.r},${col.g},${col.b},0)`);
      ctx.beginPath();ctx.ellipse(x,y,w*ncfg.glowRW,h*ncfg.glowRH,0,0,Math.PI*2);
      ctx.fillStyle=fg;ctx.fill();
    }

    // Fail flash — red pulsing halo when a packet arrived with zero yield
    if(n.failFlash>0){
      const ff=n.failFlash;
      const fg2=ctx.createRadialGradient(x,y,0,x,y,Math.max(w,h)*1.2);
      fg2.addColorStop(0,`rgba(255,40,40,${ff*0.28})`);
      fg2.addColorStop(0.5,`rgba(220,0,0,${ff*0.12})`);
      fg2.addColorStop(1,'rgba(180,0,0,0)');
      ctx.beginPath();ctx.ellipse(x,y,w*2.1,h*2.1,0,0,Math.PI*2);
      ctx.fillStyle=fg2;ctx.fill();
      // Dashed red border
      ctx.save();
      ctx.globalAlpha=ff*0.55;
      ctx.strokeStyle='rgba(255,50,50,0.9)';
      ctx.lineWidth=1.2;
      ctx.setLineDash([3,4]);
      ctx.beginPath();_rRect(ctx,x-hw-3,y-hh-3,w+6,h+6,10);
      ctx.stroke();
      ctx.setLineDash([]);
      ctx.restore();
    }

    if(status!=='blocked' || highlighted){
      // Heat adds extra bloom on top of the base glow
      ctx.shadowColor=`rgba(${col.r},${col.g},${col.b},${highlighted?0.45:0.20+ht*0.35})`;
      ctx.shadowBlur = highlighted ? 28 : (16 + ht*18);
    }

    ctx.beginPath();_shapePath(ctx,n,x,y,hw,hh);
    const bg=ctx.createLinearGradient(x,y-hh,x,y+hh);
    bg.addColorStop(0,highlighted?'rgba(12,22,42,.98)':'rgba(7,13,26,.97)');
    bg.addColorStop(1,'rgba(4,9,18,.97)');
    ctx.fillStyle=bg;ctx.fill();
    ctx.strokeStyle=`rgba(${col.r},${col.g},${col.b},${highlighted?.85:status==='blocked'?.18:.55})`;
    ctx.lineWidth=highlighted?2.2:status==='active'?1.6:1.1;
    ctx.stroke(); ctx.shadowBlur=0;

    // Spinning ring — active nodes always show ring (floor heat), heat drives intensity.
    // Blocked/error nodes only spin on hover.
    const canHeatSpin = status!=='stop' && status!=='error' && status!=='blocked';
    const effectiveHt = canHeatSpin ? Math.max(ht, status==='active'?0.22:(status==='ready'?0.12:0)) : ht;
    if(highlighted||(canHeatSpin&&effectiveHt>0.15)){
      const r=Math.sqrt(hw*hw+hh*hh)+7;
      const sa=spinAngle||0, arc=Math.PI*(highlighted?1.6:(1.2+effectiveHt*0.5));
      ctx.beginPath();ctx.arc(x,y,r,sa,sa+arc);
      ctx.strokeStyle=`rgba(${col.r},${col.g},${col.b},${highlighted?0.55:(0.25+effectiveHt*0.35+0.12*pv)})`;
      ctx.lineWidth=highlighted?2.5:(1.8+effectiveHt*2); ctx.setLineDash(highlighted?[4,4]:[]); ctx.stroke();
      ctx.beginPath();ctx.arc(x,y,r,sa+arc,sa+Math.PI*2);
      ctx.strokeStyle=`rgba(${col.r},${col.g},${col.b},${0.05+effectiveHt*0.08})`;
      ctx.lineWidth=1; ctx.stroke(); ctx.setLineDash([]);
    }

    // Status dot
    ctx.beginPath();ctx.arc(x+hw-7,y-hh+7,4,0,Math.PI*2);
    ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},${status==='active'?.8+.2*pv:status==='blocked'?.2:.7})`;
    ctx.fill();

    // Type badge — bottom-left corner (source from nexus_profile nodes)
    const _pn = window._nexusProfile?.nodes?.find(pn=>pn.id===n.id);
    if(_pn?.type){
      const _TABBR={source:'SRC',scraper:'SCRP',extractor:'ETR',store:'DB',enricher:'ENR',
        classifier:'CLF',generator:'GEN',dispatcher:'DISP',monitor:'MON',sink:'SINK',
        etl:'ETL',operator:'OPR'};
      const _tb=_TABBR[_pn.type]||_pn.type.slice(0,4).toUpperCase();
      ctx.font=`7px Consolas,monospace`;
      ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},${status==='blocked'?0.22:0.48})`;
      ctx.textAlign='left';
      ctx.fillText(_tb,x-hw+4,y+hh-8);
    }

    ctx.textAlign='center';ctx.textBaseline='middle';
    ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},${status==='blocked'?highlighted?.5:.32:highlighted?1:.90})`;
    ctx.font=`bold ${Math.max(9,Math.min(11,w/11))}px Consolas,monospace`;
    ctx.fillText(label,x,y-hh*.12);

    ctx.fillStyle=`rgba(45,80,120,${status==='blocked'?highlighted?.4:.28:highlighted?.7:.50})`;
    ctx.font=`${Math.max(7,Math.min(9,w/14))}px Consolas,monospace`;
    ctx.fillText(sub,x,y+hh*.30);

    if(metric){
      const m2=n.metric2||'';
      ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},${status==='blocked'?.22:.72})`;
      ctx.font=`bold ${Math.max(8,Math.min(10,w/12))}px Consolas,monospace`;
      ctx.fillText(metric,x,y+hh*(m2?.60:.78));
      if(m2){
        ctx.fillStyle=`rgba(${col.r},${col.g},${col.b},${status==='blocked'?.15:.44})`;
        ctx.font=`${Math.max(7,Math.min(8,w/14))}px Consolas,monospace`;
        ctx.fillText(m2,x,y+hh*.87);
      }
    }
    if(n.dormant) ctx.globalAlpha = 1;

    // Urgency badge — star burst with pulsing glow at top-right (operator nodes only)
    if(n.urgentCount > 0){
      const _bx=x+hw-2, _by=y-hh-5;
      const _pulse=0.7+0.3*Math.sin((n.spinAngle||0)*3);
      ctx.save();
      ctx.shadowColor=`rgba(255,100,0,${_pulse*0.9})`;ctx.shadowBlur=12+_pulse*10;
      _drawStar(ctx,_bx,_by,10,5,6);
      ctx.fillStyle=`rgba(255,${Math.round(80+_pulse*40)},0,1)`;ctx.fill();
      ctx.strokeStyle=`rgba(255,220,120,${_pulse})`;ctx.lineWidth=1.2;ctx.stroke();
      ctx.shadowBlur=0;
      ctx.fillStyle='#fff';ctx.textAlign='center';ctx.textBaseline='middle';
      ctx.font=`bold ${n.urgentCount>9?6:8}px Consolas,monospace`;
      ctx.fillText(String(n.urgentCount),_bx,_by);
      ctx.restore();
    }

    // Unavailable overlay — grey diagonal stripe at bottom-left of operator nodes
    if(n.operatorAvailable === false){
      const _pad = 3;
      ctx.save();
      ctx.globalAlpha = 0.55;
      ctx.strokeStyle = '#888';
      ctx.lineWidth = 1.5;
      ctx.setLineDash([3,3]);
      ctx.beginPath();
      _rRect(ctx, x-hw+_pad, y-hh+_pad, w-_pad*2, h-_pad*2, 6);
      ctx.stroke();
      ctx.setLineDash([]);
      ctx.globalAlpha = 0.70;
      ctx.fillStyle = '#666';
      ctx.font = 'bold 7px Consolas,monospace';
      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      ctx.fillText('UNAVAIL', x, y+hh-10);
      ctx.restore();
    }
  }

  // REQ-044: node type → canvas path router
  function _shapePath(ctx, n, x, y, hw, hh){
    const t = n.nodeType;
    if(t === 'operator'){
      // Circle — human operator / avatar
      ctx.arc(x, y, Math.min(hw, hh), 0, Math.PI*2);
    } else if(t === 'source'){
      // Parallelogram — external data ingress nodes
      const sk = Math.round(hh * 0.28);
      ctx.moveTo(x-hw+sk,y-hh); ctx.lineTo(x+hw+sk,y-hh);
      ctx.lineTo(x+hw-sk,y+hh); ctx.lineTo(x-hw-sk,y+hh);
      ctx.closePath();
    } else if(t === 'transform'){
      // Flat-top hexagon — processing / transformation nodes
      const hx = hw * 0.58;
      ctx.moveTo(x-hx,y-hh); ctx.lineTo(x+hx,y-hh);
      ctx.lineTo(x+hw, y);   ctx.lineTo(x+hx,y+hh);
      ctx.lineTo(x-hx,y+hh); ctx.lineTo(x-hw, y);
      ctx.closePath();
    } else if(t === 'store'){
      // Octagon — structured storage nodes
      const c = Math.min(hw,hh)*0.26;
      ctx.moveTo(x-hw+c,y-hh); ctx.lineTo(x+hw-c,y-hh);
      ctx.lineTo(x+hw,  y-hh+c); ctx.lineTo(x+hw,  y+hh-c);
      ctx.lineTo(x+hw-c,y+hh); ctx.lineTo(x-hw+c,y+hh);
      ctx.lineTo(x-hw,  y+hh-c); ctx.lineTo(x-hw,  y-hh+c);
      ctx.closePath();
    } else if(t === 'monitor'){
      // Diamond — routing / orchestration / monitoring nodes
      ctx.moveTo(x,y-hh); ctx.lineTo(x+hw,y);
      ctx.lineTo(x,y+hh); ctx.lineTo(x-hw,y);
      ctx.closePath();
    } else {
      // Default (sink, error log, uncategorized): rounded rect
      _rRect(ctx, x-hw, y-hh, hw*2, hh*2, 8);
    }
  }
  function _rRect(ctx,x,y,w,h,r){
    ctx.moveTo(x+r,y);ctx.lineTo(x+w-r,y);ctx.quadraticCurveTo(x+w,y,x+w,y+r);
    ctx.lineTo(x+w,y+h-r);ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
    ctx.lineTo(x+r,y+h);ctx.quadraticCurveTo(x,y+h,x,y+h-r);
    ctx.lineTo(x,y+r);ctx.quadraticCurveTo(x,y,x+r,y);
  }
  function _drawStar(ctx,cx,cy,outerR,innerR,npts){
    const step=Math.PI/npts;
    ctx.beginPath();
    for(let i=0;i<npts*2;i++){
      const r=i%2===0?outerR:innerR, a=i*step-Math.PI/2;
      i===0?ctx.moveTo(cx+r*Math.cos(a),cy+r*Math.sin(a))
           :ctx.lineTo(cx+r*Math.cos(a),cy+r*Math.sin(a));
    }
    ctx.closePath();
  }

  function _drawTrackLabels(w,h){
    // REQ-009: clamp labels to available space left of node column
    const topY=h*.30, botY=h*.73, opY=h*.90;
    const lx   = w * 0.065;                         // leftmost node x
    const maxW = Math.max(0, lx - 10);              // available label width
    const baseSize = Math.max(6, Math.min(9, h * 0.022));  // scale with height
    ctx.textBaseline='middle';
    ctx.fillStyle='rgba(18,44,80,.5)';
    const _drawLabel = (full, abbreviated, x, y) => {
      ctx.font = `bold ${baseSize}px Consolas,monospace`;
      ctx.textAlign = 'left';
      const fw = ctx.measureText(full).width;
      if(fw <= maxW){
        ctx.fillText(full, x, y);
      } else {
        const aw = ctx.measureText(abbreviated).width;
        if(aw <= maxW){ ctx.fillText(abbreviated, x, y); }
        // else omit — too narrow to show any label
      }
    };
    _drawLabel('DISCOVERY TRACK', 'DISC',      6, topY - h*0.145);
    _drawLabel('PROCESSING TRACK','PROC',      6, botY - h*0.125);
    _drawLabel('OPERATORS TRACK', 'OPS',       6, opY  - h*0.055);
  }

  return {frame};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: THROUGHPUT_BAR  – displays per-stage cur/sustained/burst
   ════════════════════════════════════════════════════════════════════════════ */
const ThroughputBar = (() => {
  function update(stages) {
    const container = document.getElementById('tpb-rows');
    if (!container) return;
    let html = '';
    for (const s of stages) {
      const idle  = s.current_hr === 0;
      const pct   = idle ? 0 : Math.min(s.pct_of_sustained, 100);
      const color = pct > 80 ? '#00cc66' : pct > 40 ? '#3a9fff' : pct > 0 ? '#ff9900' : '#1a3860';
      const _fmt  = v => v >= 1000 ? (v/1000).toFixed(1)+'k' : v.toFixed(0);
      const curLabel = idle ? 'IDLE' : s.current_hr.toFixed(0)+'/hr';
      const curColor = idle ? '#1a4060' : '#3a9fff';
      const sustRef  = s.sustained_hr > 0 ? 'peak: '+_fmt(s.sustained_hr)+'/hr' : '';
      const title = `${s.label}: ${s.current_hr}/hr  sustained:${s.sustained_hr}/hr  burst:${s.burst_hr}/hr`;
      html += `<div class="tpb-row" title="${title}">`
            + `<span class="tpb-name">${s.label}</span>`
            + `<span class="tpb-cur" style="color:${curColor}">${curLabel}</span>`
            + `<div class="tpb-bar"><div class="tpb-fill" style="width:${pct.toFixed(1)}%;background:${color}"></div></div>`
            + `<span class="tpb-pct" style="color:${idle?'#1a4060':'#1a6090'}">${idle ? '' : pct.toFixed(0)+'%'}</span>`
            + `<span class="tpb-refs" style="color:${idle?'#1a3a5a':'#0e2840'}">${sustRef}</span>`
            + `</div>`;
    }
    container.innerHTML = html;
  }
  return { update };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: DATA_FETCH  – polls backend, feeds History + StateApplier
   ════════════════════════════════════════════════════════════════════════════ */
const DataFetch = (() => {
  let _cadenceMs       = DATA_REFRESH;  // active poll interval (ms)
  let _dataIntervalId  = null;          // current setInterval handle
  let _lastRefreshMs   = null;          // epoch ms of last successful fetch
  let _lastDurationMs  = null;          // last fetch round-trip ms
  let _fetchCount      = 0;             // total successful fetches since page load

  async function fetchData(){
    const _t0 = performance.now();
    try{
      const r=await fetch('/pipeline-data',{cache:'no-store'});
      if(!r.ok) throw new Error('HTTP '+r.status);
      const d=await r.json();
      StateApplier.apply(d);
      StatusPanel.update(d);
      NodeCard.updateAll(d);
      PerfMatrix.update(d);
      _injectCheckPulse(d);
      _lastDurationMs = Math.round(performance.now()-_t0);
      _lastRefreshMs  = Date.now();
      _fetchCount++;
      if(_fetchCount === 1) NexusBoot.dismiss();
    }catch(e){
      document.getElementById('rdot').className='stale';
      document.getElementById('log-line').textContent='data error: '+e.message;
    }
  }

  async function fetchEvents(){
    try{
      const r=await fetch('/pipeline-events',{cache:'no-store'});
      if(!r.ok) return;
      const evts=await r.json();
      // On the very first fetch, all events are "new" but most are old history.
      // Only animate events that are genuinely recent (< 90s old) to prevent
      // a one-time pill avalanche on page load.
      const isFirstFetch = History.count() === 0;
      const nowMs = Date.now();
      const ANIMATE_CUTOFF_MS = 90000; // 90 seconds
      let added=0;
      for(const e of evts){
        e._ms=new Date(e.ts).getTime();
        if(History.addEvent(e)){
          added++;
          const isRecent = (nowMs - e._ms) < ANIMATE_CUTOFF_MS;
          // Animate only if: not first fetch (incremental poll) OR event is recent
          if(!Timeline.paused && (!isFirstFetch || isRecent)) Packets.inject(e, undefined, true);
          LiveFeed.push(e);
        }
      }
      // Always push ALL history into traces (idempotent via _seen set)
      for(const e of History.getAll()) Traces.add(e);
      Timeline.render();
      if(StateApplier.getLastData()) StatusPanel.update(StateApplier.getLastData());
      document.getElementById('pkt-count').textContent=`pkts:${Packets.count()} traces:${Traces.getAll().length} hist:${History.count()}`;
      if(evts.length>0){
        document.getElementById('log-line').textContent=
          evts[evts.length-1].label+' ['+evts[evts.length-1].ts+']';
      }
    }catch(e){
      document.getElementById('log-line').textContent='events error: '+e.message;
    }
  }

  // Delta-based pulse: inject pills only when a metric ACTUALLY CHANGES between polls.
  // When nothing moves, nothing flows. Speed = frequency of real change events.
  const _prevMetric = {}; // connId → last observed value
  function _injectCheckPulse(d){
    if(!Timeline.live || Timeline.isPaused()) return;
    const sc  = d.stub_collection || {};
    const db  = d.database        || {};
    const mj  = d.master_json     || {};
    const ops = d.operators       || {};
    const nowMs = Date.now();
    const _n = v => v >= 1000 ? (v/1000).toFixed(1)+'k' : String(v||0);

    // Map each connection to: the value that drives it, its label, its type color
    const PIPE_METRICS = [
      { id:'top_1',      val: sc.pages_done||0,                   label: `${sc.pages_done||0}/${sc.pages_total||'?'} pg captured`,    type:'capture' },
      { id:'top_2',      val: sc.stubs_collected||0,              label: `${_n(sc.stubs_collected||0)} stubs extracted`,               type:'extract' },
      { id:'top_3',      val: mj.total_jobs||db.total_jobs||0,   label: `${_n(mj.total_jobs||db.total_jobs||0)} jobs \u2192 json`,    type:'extract' },
      { id:'top_4',      val: db.total_jobs||0,                   label: `${_n(db.total_jobs||0)} loaded to db`,                       type:'sync'    },
      { id:'right_bend', val: db.with_description||0,             label: `${_n(db.with_description||0)} have desc`,                    type:'sync'    },
      { id:'bot_0',      val: db.with_description||0,             label: `${_n(db.with_description||0)} desc captured`,                type:'extract' },
      { id:'bot_1',      val: db.enriched_count||0,               label: `${_n(db.enriched_count||0)} enriched`,                       type:'sync'    },
      { id:'bot_2',      val: db.classified_count||0,             label: `${_n(db.classified_count||0)} classified`,                   type:'sync'    },
      { id:'bot_3',      val: db.classified_good||0,              label: `${_n(db.classified_good||0)} good fit`,                      type:'sync'    },
      { id:'bot_4',      val: db.offer_staged_count||0,           label: `${_n(db.offer_staged_count||0)} offers staged`,              type:'sync'    },
      { id:'td_vert',    val: ops.total_dispatched||0,            label: `${ops.total_dispatched||0} total dispatched`,                type:'sync'    },
      { id:'err_retry',   val: (d.retry_queue||{}).pending||0,      label: `${(d.retry_queue||{}).pending||0} pages retrying`,           type:'error'   },
      { id:'td_mariusz', val: (ops.op_mariusz||{}).submitted||0,  label: `mariusz: ${(ops.op_mariusz||{}).submitted||0} submitted`,    type:'done'    },
      { id:'td_darek',   val: (ops.op_darek||{}).submitted||0,    label: `darek: ${(ops.op_darek||{}).submitted||0} submitted`,        type:'done'    },
      { id:'td_robert',  val: (ops.op_robert||{}).submitted||0,   label: `robert r: ${(ops.op_robert||{}).submitted||0} submitted`,    type:'done'    },
      { id:'desc_to_json', val: db.with_description||0,           label: `${_n(db.with_description||0)} desc \u2192 json`,             type:'extract' },
    ];

    // top_0 and wd_conn are passive/static \u2014 no delta to detect, skip them

    let delay = 0;
    for(const pm of PIPE_METRICS){
      const prev = _prevMetric[pm.id];
      const changed = prev === undefined || prev !== pm.val;
      _prevMetric[pm.id] = pm.val;
      if(!changed) continue;           // nothing moved on this pipe \u2014 no pill
      if(pm.val === 0) continue;       // zero is not progress

      const conn = Layout.getConn(pm.id);
      if(!conn || conn.status !== 'active') continue;

      const _delay = delay;
      delay += 80;
      setTimeout(()=>{
        if(Timeline.isPaused()) return;
        Packets.inject({
          conn:  pm.id,
          label: pm.label,
          type:  pm.type,
          id:    'delta_'+pm.id+'_'+nowMs,
          ts:    new Date(nowMs).toISOString().slice(0,19).replace('T',' '),
          _ms:   nowMs,
          burst: 0,
        }, undefined, true);
      }, _delay);
    }
  }

  async function fetchThroughput(){
    try{
      const r=await fetch('/pipeline-throughput',{cache:'no-store'});
      if(!r.ok) return;
      const d=await r.json();
      ThroughputBar.update(d.stages);
    }catch(e){ /* non-critical */ }
  }

  function setCadence(ms){
    _cadenceMs = ms;
    if(_dataIntervalId) clearInterval(_dataIntervalId);
    _dataIntervalId = setInterval(fetchData, _cadenceMs);
    try{ localStorage.setItem('nexus_data_cadence', String(ms)); }catch(e){}
  }

  function getStatus(){
    return {cadenceMs:_cadenceMs, lastRefreshMs:_lastRefreshMs,
            lastDurationMs:_lastDurationMs, fetchCount:_fetchCount};
  }

  function start(){
    // Restore saved cadence preference
    try{
      const saved=parseInt(localStorage.getItem('nexus_data_cadence'));
      if(saved>=2000 && saved<=120000) _cadenceMs=saved;
    }catch(e){}
    fetchData(); fetchEvents(); fetchThroughput();
    _dataIntervalId = setInterval(fetchData, _cadenceMs);
    setInterval(fetchEvents,      EVENT_REFRESH);
    setInterval(fetchThroughput,  30000);
    setTimeout(()=>LiveFeed.ensure(), 400);
  }

  return {start, refresh:fetchData, setCadence, getStatus};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: MAIN LOOP
   ════════════════════════════════════════════════════════════════════════════ */
let _lastCursorMs     = null;
let _lastRebuildCursor = null;  // REQ-011: tracked separately from cursor display
let _lastRebuildSpeedSign = 0; // REQ-011: detect rewind ↔ forward direction flip

function mainLoop(ts){
  const nowMs = Date.now();
  Timeline.tick(nowMs);
  Timeline.render();  // keeps scrubbar, ticks, density in sync every frame
  const cursor = Timeline.getCursor();
  const sm = Timeline.speedMult;

  if(!Timeline.live){
    if(sm < 0 && !Timeline.paused){
      // REQ-011 Rewind mode: do NOT rebuild every frame — that cancels out backward
      // motion in step().  Rebuild only on: large cursor jump (user scrubbed),
      // direction flip (forward→rewind), or all packets exhausted.
      const jumped     = (_lastRebuildCursor === null) ||
                         Math.abs(cursor - _lastRebuildCursor) > 2000;
      const dirChanged = (_lastRebuildCursor !== null) && _lastRebuildSpeedSign >= 0;
      if(jumped || dirChanged || Packets.count() === 0){
        Packets.rebuildFromHistory(cursor);
        _lastRebuildCursor = cursor;
      }
    } else {
      // Forward scrub or paused: rebuild every frame so packet positions are exact.
      Packets.rebuildFromHistory(cursor);
      _lastRebuildCursor = cursor;
    }
    _lastCursorMs = cursor;
  } else if(_lastCursorMs === null){
    Packets.rebuildFromHistory(cursor);
    _lastRebuildCursor = cursor;
    _lastCursorMs = cursor;
  }
  _lastRebuildSpeedSign = sm;

  Packets.step();   // always step — internal rate drops to 0.15x when paused
  Renderer.frame();
  requestAnimationFrame(mainLoop);
}

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: FLOAT_NUMS  – rising +X labels on packet arrival at destination node
   ════════════════════════════════════════════════════════════════════════════ */
window.FLOAT_CFG = { enabled: true };
const FloatNums = (() => {
  let _pool = [];
  const _fired    = new Set(); // evtIds that already spawned — never spawn twice
  const _nodeFloat = new Map(); // nodeId → current live float object (one per node)
  const _RE_PLUS  = /\+(\d[\d,]*)/;
  const _RE_PAGES = /pages\s+(\d+)-(\d+)/i;

  function spawnForPacket(p, destNode){
    if(!window.FLOAT_CFG.enabled) return;
    // Guard: one float per unique event. Re-injected packets (e.g. from history
    // scrub or poll re-scan) must not spawn duplicate floats.
    if(p.evtId && _fired.has(p.evtId)) return;
    if(p.evtId) _fired.add(p.evtId);
    const lbl = p.label || '';
    let text = null;

    // Priority 1: explicit +N in label
    const mPlus = lbl.match(_RE_PLUS);
    if(mPlus){
      const n = parseInt(mPlus[1].replace(/,/g,''), 10);
      if(n > 0) text = '+' + mPlus[1];
      // n===0: skip silently — zero extractions not worth showing
    }

    // Priority 2: "pages X-Y" → show page count for capture packets arriving at WEBSHADOW
    if(!text){
      const mPg = lbl.match(_RE_PAGES);
      if(mPg){
        const count = parseInt(mPg[2],10) - parseInt(mPg[1],10) + 1;
        if(count > 0) text = count + ' pg';
      }
    }

    // Priority 3: error packets → always show a float so the error_log node is visibly hit
    if(!text && p.type === 'error'){
      // Shorten label: take first meaningful token (TIMEOUT, 0 new, extract error…)
      const short = lbl.replace(/\s*\|.*$/, '').trim();  // strip "| category" suffix
      text = short.length > 0 ? short.substring(0, 14) : 'ERR';
    }

    if(!text) return;

    const col = p.col || PACKET_COL.capture;

    // Spawn origin: use the pipe's terminal point (the exact edge of the dest node
    // where the bezier terminates). Each pipe enters from a different side/face, so
    // simultaneous arrivals from different sources naturally distribute across the box.
    let bx = destNode.x + (Math.random()-0.5)*destNode.w*0.35;
    let by = destNode.y - destNode.h*0.25;
    if(typeof Layout !== 'undefined'){
      const conn = Layout.getConn(p.conn);
      if(conn && conn.pts && conn.pts.length >= 2){
        const ep = conn.pts[conn.pts.length - 1]; // pipe terminus on node edge
        bx = ep.x + (Math.random()-0.5)*12;       // small jitter around entry point
        by = ep.y - 8;                             // float rises from just above entry
      }
    }

    // REQ-010: collision avoidance — stagger Y for floats whose base X is within 20px
    // of a still-active float. Prevents text pile-up when multiple pipes arrive
    // at the same node face near-simultaneously.
    const _clashRadius = 20;
    let _byUsed = [];
    for(const existing of _pool){
      if(existing.life > 0.3 && Math.abs(existing._bx - bx) < _clashRadius){
        _byUsed.push(existing._by !== undefined ? existing._by : existing.y + (1-existing.life)*45);
      }
    }
    if(_byUsed.length){
      let candidate = by;
      let tries = 0;
      while(_byUsed.some(y=>Math.abs(y-candidate)<14) && tries<8){
        candidate -= 16;
        tries++;
      }
      by = candidate;
    }

    // One float per destination node: kill any existing float for this node,
    // then place the new one. This ensures only the latest value is visible.
    const _existing = _nodeFloat.get(destNode.id);
    if(_existing) _existing.life = 0;

    const float = { x: bx, y: by, _bx: bx, _by: by, text, col,
      life: 1.0, vy: -1.1, vx: (Math.random()-0.5)*0.45 };
    _pool.push(float);
    _nodeFloat.set(destNode.id, float);
    // No LiveFeed.push here — fetchEvents already pushed the originating event.
    // A second push here created duplicate entries in the stream.
  }
  function step(){
    _pool = _pool.filter(p=>{ p.life-=0.013; p.y+=p.vy; p.vy*=0.93; p.x+=p.vx; p.vx*=0.96; return p.life>0; });
  }

  // Spawn a departing float at the SOURCE node when a packet is injected.
  // Mirrors spawnForPacket but uses pipe start point and dims col for distinction.
  function spawnAtSource(evt, srcNode){
    if(!window.FLOAT_CFG.enabled || !srcNode) return;
    const lbl = evt.label || '';
    let text = null;
    const mPlus = lbl.match(_RE_PLUS);
    if(mPlus){ const n=parseInt(mPlus[1].replace(/,/g,''),10); if(n>0) text='+'+mPlus[1]; }
    if(!text){ const mPg=lbl.match(_RE_PAGES); if(mPg){ const c=parseInt(mPg[2],10)-parseInt(mPg[1],10)+1; if(c>0) text=c+' pg'; } }
    if(!text && evt.type==='error'){
      const short=lbl.replace(/\s*\|.*$/,'').trim(); text=short.substring(0,14)||'ERR';
    }
    if(!text) return;
    const pc = PACKET_COL[evt.type] || PACKET_COL.capture;
    const col = { r: Math.round(pc.r*0.65), g: Math.round(pc.g*0.65), b: Math.round(pc.b*0.65) }; // dimmed
    let bx = srcNode.x + (Math.random()-0.5)*srcNode.w*0.35;
    let by = srcNode.y - srcNode.h*0.25;
    const conn = Layout.getConn(evt.conn);
    if(conn && conn.pts && conn.pts.length >= 2){
      const sp = conn.pts[0];
      bx = sp.x + (Math.random()-0.5)*12;
      by = sp.y - 8;
    }
    // One source float per node: kill any existing, place new
    const _srcKey = 'src_'+srcNode.id;
    const _existingSrc = _nodeFloat.get(_srcKey);
    if(_existingSrc) _existingSrc.life = 0;
    const srcFloat = { x:bx, y:by, _bx:bx, text, col, life:0.85, vy:-1.0, vx:(Math.random()-0.5)*0.4 };
    _pool.push(srcFloat);
    _nodeFloat.set(_srcKey, srcFloat);
  }
  function draw(){
    if(!_pool.length) return;
    ctx.save(); ctx.textAlign='center'; ctx.textBaseline='middle';
    for(const p of _pool){
      const a = p.life<0.3 ? p.life/0.3 : Math.min(1, p.life*2.5);
      ctx.globalAlpha=a*0.92;
      ctx.font='bold 9px Consolas,monospace';
      ctx.shadowColor=`rgba(${p.col.r},${p.col.g},${p.col.b},0.7)`;
      ctx.shadowBlur=5;
      ctx.fillStyle=`rgb(${p.col.r},${p.col.g},${p.col.b})`;
      ctx.fillText(p.text, p.x, p.y);
    }
    ctx.globalAlpha=1; ctx.shadowBlur=0; ctx.restore();
  }
  return { spawnForPacket, spawnAtSource, step, draw };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: NODE_STATS  – per-node event rate history (for NodeCard sparklines)
   ════════════════════════════════════════════════════════════════════════════ */
const NodeStats = (() => {
  const _ts = new Map();
  const WINDOW_MS = 600000, BUCKET_S = 30, BUCKETS = 20;
  function push(nodeId){
    if(!_ts.has(nodeId)) _ts.set(nodeId,[]);
    const arr=_ts.get(nodeId); arr.push(Date.now());
    const cut=Date.now()-WINDOW_MS; const si=arr.findIndex(t=>t>=cut); if(si>0) arr.splice(0,si);
  }
  function sparkVals(nodeId){
    const arr=_ts.get(nodeId)||[], now=Date.now(), b=Array(BUCKETS).fill(0);
    for(const t of arr){ const ai=Math.min(BUCKETS-1,Math.floor((now-t)/1000/BUCKET_S)); b[BUCKETS-1-ai]++; }
    return b;
  }
  return { push, sparkVals };
})();

// ── CONFIG GLOBALS ───────────────────────────────────────────────────────────
window.DOT_CFG  = { r:1, sigScale:2, glowMult:3.8, glowAlpha:0.30, coreFrac:0.25 };
window.NODE_CFG = { flashDecay:0.003, flashAlpha:0.19, glowRW:1.75, glowRH:1.75,
                    srcGlowDecay:0.003, srcGlowStep:0.4 };

// ── SETTINGS PANEL MODULE ────────────────────────────────────────────────────
const SettingsPanel = (() => {
  function _makeSliders(body, cfg, defs){
    defs.forEach(s=>{
      const row=document.createElement('div'); row.className='dc-row';
      row.innerHTML=`<div class="dc-lbl">${s.label}</div>`+
        `<input class="dc-slider" type="range" min="${s.min}" max="${s.max}" step="${s.step}" value="${cfg[s.key]}">`+
        `<div class="dc-val">${s.fmt(cfg[s.key])}</div>`;
      const inp=row.querySelector('input'), val=row.querySelector('.dc-val');
      inp.addEventListener('input',()=>{ const v=parseFloat(inp.value); cfg[s.key]=v; val.textContent=s.fmt(v); });
      body.appendChild(row);
    });
    const btn=document.createElement('button'); btn.className='dc-copy-btn'; btn.textContent='COPY CONFIG';
    const msg=document.createElement('div'); msg.style.cssText='font-size:8px;color:#00cc66;text-align:center;height:12px;margin-top:2px;';
    btn.addEventListener('click',()=>{
      navigator.clipboard.writeText(JSON.stringify(cfg,null,2)).then(()=>{ msg.textContent='copied!'; setTimeout(()=>msg.textContent='',1800); });
    });
    body.appendChild(btn); body.appendChild(msg);
  }

  function openDot(){
    const WID='settings-dot';
    if(WindowManager.has(WID)){ WindowManager.focus(WID); return; }
    WindowManager.clearPos(WID);
    WindowManager.create(WID,{title:'DOT SETTINGS',initialGeom:{x:48,y:50,w:242,h:228}});
    const body=WindowManager.getBody(WID);
    body.style.cssText='padding:8px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;';
    _makeSliders(body, window.DOT_CFG, [
      {key:'r',        label:'base r',    min:0.5, max:10,  step:0.1,  fmt:v=>v.toFixed(1)},
      {key:'sigScale', label:'sig scale', min:0,   max:4,   step:0.1,  fmt:v=>v.toFixed(1)},
      {key:'glowMult', label:'glow mult', min:0.5, max:10,  step:0.1,  fmt:v=>v.toFixed(1)},
      {key:'glowAlpha',label:'glow alpha',min:0.05,max:1,   step:0.01, fmt:v=>v.toFixed(2)},
      {key:'coreFrac', label:'core frac', min:0.05,max:0.9, step:0.01, fmt:v=>v.toFixed(2)},
    ]);
  }

  function openNode(){
    const WID='settings-node';
    if(WindowManager.has(WID)){ WindowManager.focus(WID); return; }
    WindowManager.clearPos(WID);
    WindowManager.create(WID,{title:'NODE SETTINGS',initialGeom:{x:48,y:50,w:242,h:205}});
    const body=WindowManager.getBody(WID);
    body.style.cssText='padding:8px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;';
    _makeSliders(body, window.NODE_CFG, [
      {key:'flashDecay',    label:'flash decay',     min:0.001, max:0.08, step:0.001, fmt:v=>v.toFixed(3)},
      {key:'flashAlpha',    label:'glow alpha',      min:0.05,  max:1.5,  step:0.01,  fmt:v=>v.toFixed(2)},
      {key:'glowRW',        label:'glow w-mult',     min:0.5,   max:3.5,  step:0.05,  fmt:v=>v.toFixed(2)},
      {key:'glowRH',        label:'glow h-mult',     min:0.5,   max:3.5,  step:0.05,  fmt:v=>v.toFixed(2)},
      {key:'srcGlowDecay',  label:'src decay',       min:0.001, max:0.08, step:0.001, fmt:v=>v.toFixed(3)},
      {key:'srcGlowStep',   label:'src step',        min:0.05,  max:1.0,  step:0.05,  fmt:v=>v.toFixed(2)},
    ]);
  }

  function openFloat(){
    const WID='settings-float';
    if(WindowManager.has(WID)){ WindowManager.focus(WID); return; }
    WindowManager.clearPos(WID);
    WindowManager.create(WID,{title:'FLOAT SETTINGS',initialGeom:{x:48,y:50,w:242,h:74}});
    const body=WindowManager.getBody(WID);
    body.style.cssText='padding:10px 12px;display:flex;flex-direction:column;gap:8px;';
    const row=document.createElement('label');
    row.style.cssText='display:flex;align-items:center;gap:8px;font-size:10px;color:#3a7090;cursor:pointer;';
    const chk=document.createElement('input'); chk.type='checkbox'; chk.checked=window.FLOAT_CFG.enabled;
    chk.addEventListener('change',()=>{ window.FLOAT_CFG.enabled=chk.checked; });
    row.appendChild(chk);
    row.append('Rising +N labels on arrival');
    body.appendChild(row);
  }

  function openPoll(){
    const WID='settings-poll';
    if(WindowManager.has(WID)){ WindowManager.focus(WID); return; }
    WindowManager.clearPos(WID);
    WindowManager.create(WID,{title:'POLL SETTINGS',initialGeom:{x:48,y:50,w:265,h:140}});
    const body=WindowManager.getBody(WID);
    body.style.cssText='padding:8px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;';
    function _sec(label){ const s=document.createElement('div'); s.style.cssText='font-size:7px;color:rgba(0,72,125,.45);letter-spacing:2px;margin:4px 0 2px;'; s.textContent=label; return s; }
    function _row(labels, vals, getCur, onSet){
      const row=document.createElement('div'); row.style.cssText='display:flex;gap:3px;align-items:center;flex-wrap:wrap;';
      labels.forEach((lbl,i)=>{
        const b=document.createElement('button');
        b.textContent=lbl; b.style.cssText='height:17px;padding:0 8px;background:rgba(0,18,45,.42);border:1px solid rgba(0,55,110,.28);border-radius:1px;color:rgba(0,115,185,.58);font-size:7px;font-family:inherit;letter-spacing:1px;cursor:pointer;transition:all .12s;';
        function _refresh(){ b.style.borderColor=getCur()===vals[i]?'rgba(0,185,120,.65)':'rgba(0,55,110,.28)'; b.style.color=getCur()===vals[i]?'#00e090':'rgba(0,115,185,.58)'; }
        b.addEventListener('click',()=>{ onSet(vals[i]); body.querySelectorAll('[data-ps]').forEach(x=>x._rfr&&x._rfr()); });
        b._rfr=_refresh; b.dataset.ps='1'; _refresh(); row.appendChild(b);
      });
      return row;
    }
    body.appendChild(_sec('DATA POLL CADENCE'));
    body.appendChild(_row(
      ['2s','3s','5s','8s','15s','30s','1m'],
      [2000,3000,5000,8000,15000,30000,60000],
      ()=>DataFetch.getStatus().cadenceMs,
      ms=>DataFetch.setCadence(ms)
    ));
    body.appendChild(_sec('EVENTS POLL CADENCE (restart needed)'));
    const evtNote=document.createElement('div'); evtNote.style.cssText='font-size:8px;color:rgba(0,65,120,.42);'; evtNote.textContent='Current: '+(EVENT_REFRESH/1000)+'s (set at page load)'; body.appendChild(evtNote);
  }

  function openSkin(){
    const WID='settings-skin';
    if(WindowManager.has(WID)){ WindowManager.focus(WID); return; }
    WindowManager.clearPos(WID);
    WindowManager.create(WID,{title:'SKIN SETTINGS',initialGeom:{x:48,y:50,w:242,h:128}});
    const body=WindowManager.getBody(WID);
    body.style.cssText='padding:10px 12px;display:flex;flex-direction:column;gap:5px;';
    function _refresh(){
      body.querySelectorAll('[data-sk]').forEach(b=>b._rfr&&b._rfr());
    }
    Object.entries(_SKIN_DEFS).forEach(([id,def])=>{
      const row=document.createElement('div');
      row.style.cssText='display:flex;align-items:center;gap:8px;';
      const dot=document.createElement('div');
      dot.style.cssText=`width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:box-shadow .2s;background:rgb(${def.active.r},${def.active.g},${def.active.b});box-shadow:0 0 6px rgba(${def.active.r},${def.active.g},${def.active.b},.65);`;
      const btn=document.createElement('button');
      function _selfRefresh(){
        const cur=window._activeSkin||'cyan';
        const active=id===cur;
        btn.style.cssText='flex:1;height:20px;border-radius:1px;font-size:8px;font-family:inherit;letter-spacing:1.5px;cursor:pointer;transition:all .12s;text-align:left;padding:0 8px;background:'+(active?'rgba(0,40,100,.6)':'rgba(0,10,30,.4)')+';border:1px solid '+(active?'rgba(0,155,255,.55)':'rgba(0,55,110,.28)')+';color:'+(active?'#3aafff':'rgba(0,115,185,.6)')+';';
        btn.textContent=def.label+(active?' [ACTIVE]':'');
      }
      btn._rfr=_selfRefresh; btn.dataset.sk='1';
      btn.addEventListener('click',()=>{ applySkin(id); _refresh(); });
      _selfRefresh();
      row.appendChild(dot); row.appendChild(btn);
      body.appendChild(row);
    });
  }

  return {openDot, openNode, openFloat, openPoll, openSkin};
})();

document.getElementById('zc-in') .addEventListener('click',()=>Camera.zoomIn());
document.getElementById('zc-out').addEventListener('click',()=>Camera.zoomOut());
document.getElementById('zc-fit').addEventListener('click',()=>Camera.fit());

document.getElementById('btn-screenshot').addEventListener('click', async () => {
  const btn = document.getElementById('btn-screenshot');
  const origText = btn.textContent;
  try {
    btn.textContent = '...';
    btn.disabled = true;
    // Draw canvas onto an offscreen canvas at native resolution
    const src = canvas;  // global: getElementById('c')
    const offscreen = document.createElement('canvas');
    offscreen.width  = src.width;
    offscreen.height = src.height;
    offscreen.getContext('2d').drawImage(src, 0, 0);
    const blob = await new Promise(res => offscreen.toBlob(res, 'image/png'));
    if (!blob) throw new Error('Canvas toBlob returned null');
    await navigator.clipboard.write([new ClipboardItem({'image/png': blob})]);
    btn.textContent = 'OK';
    btn.style.borderColor = 'rgba(0,220,100,.8)';
    btn.style.color = 'rgba(0,220,100,1)';
    setTimeout(() => { btn.textContent = origText; btn.style.borderColor = ''; btn.style.color = ''; btn.disabled = false; }, 1800);
  } catch(e) {
    btn.textContent = 'ERR';
    btn.style.borderColor = 'rgba(248,81,73,.8)';
    btn.style.color = 'rgba(248,81,73,1)';
    console.error('Screenshot failed:', e);
    setTimeout(() => { btn.textContent = origText; btn.style.borderColor = ''; btn.style.color = ''; btn.disabled = false; }, 2500);
  }
});

(()=>{
  const STEPS = [0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 1.25, 1.5];
  const KEY   = 'nexus-ui-scale';
  let _s = 1.0;
  const _pct = document.getElementById('usc-pct');
  try { const v=parseFloat(localStorage.getItem(KEY)); if(v && STEPS.includes(v)) _s=v; } catch(e){}
  function _apply(){
    document.documentElement.style.zoom = _s;
    window._nexusUiZoom = _s;
    if(_pct) _pct.textContent = Math.round(_s*100)+'%';
    try { localStorage.setItem(KEY, _s); } catch(e){}
  }
  _apply();
  document.getElementById('usc-in') ?.addEventListener('click',()=>{
    const i=STEPS.indexOf(_s); if(i<STEPS.length-1){_s=STEPS[i+1];_apply();}
  });
  document.getElementById('usc-out')?.addEventListener('click',()=>{
    const i=STEPS.indexOf(_s); if(i>0){_s=STEPS[i-1];_apply();}
  });
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: INTEGRATION_CHECKS  – polls /pipeline-checks, renders topbar pills,
   and injects real check-result packets onto the canvas connections.
   ════════════════════════════════════════════════════════════════════════════ */
const IntegrationChecks = (() => {
  const STRIP = document.getElementById('check-strip');

  // Only show these check IDs as topbar pills (others still drive canvas packets)
  const STRIP_CHECKS = [
    {id:'webshadow_mcp',  short:'MCP'},
    {id:'sqlite_db',      short:'DB'},
    {id:'master_json',    short:'JSON'},
    {id:'stub_collector', short:'STUB'},
    {id:'retry_queue',    short:'RETRY'},
    {id:'desc_capture',   short:'DESC'},
    {id:'enrichment',     short:'ENRICH'},
    {id:'classifier',     short:'CLASS'},
    {id:'offer_gen',      short:'OFFER'},
  ];

  // Build pill elements once
  const _pills = new Map();
  STRIP_CHECKS.forEach(({id, short}) => {
    const el = document.createElement('div');
    el.className = 'chk-pill pend';
    el.title = id;
    el.innerHTML = `<span class="chk-dot"></span>${short}`;
    STRIP.appendChild(el);
    _pills.set(id, el);
  });

  let _lastChecks = null;  // cache last results for Roadmap window

  function _renderStrip(checks){
    checks.forEach(c => {
      const el = _pills.get(c.id);
      if(!el) return;
      el.className = 'chk-pill ' + (c.ok ? 'ok' : 'fail');
      el.title = `${c.name}: ${c.msg}`;
    });
  }

  function _injectCheckPackets(checks){
    if(!Timeline.live || Timeline.isPaused()) return;
    const nowMs = Date.now();
    let delay = 0;
    checks.forEach(c => {
      const conn = Layout.getConn(c.conn);
      if(!conn || conn.status === 'blocked') return;
      const _d = delay;
      delay += 60;
      setTimeout(()=>{
        if(Timeline.isPaused()) return;
        Packets.inject({
          conn:  c.conn,
          label: `[CHK] ${c.name}: ${c.msg}`,
          type:  c.ok ? 'check' : 'error',
          id:    'chk_'+c.id+'_'+nowMs,
          ts:    new Date(nowMs).toISOString().slice(0,19).replace('T',' '),
          _ms:   nowMs,
          burst: 0,
        }, undefined, true);
      }, _d);
    });
  }

  async function poll(){
    try{
      const r = await fetch('/pipeline-checks', {cache:'no-store'});
      if(!r.ok) return;
      const d = await r.json();
      _lastChecks = d.checks || [];
      _renderStrip(_lastChecks);
      _injectCheckPackets(_lastChecks);
    }catch(e){}
  }

  function start(){
    poll();
    setInterval(poll, 20000);  // every 20 seconds — these are real I/O checks
  }

  function getLastChecks(){ return _lastChecks || []; }

  return {start, poll, getLastChecks};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: ROADMAP  – floating window showing /pipeline-roadmap items
   with in-app priority controls.
   ════════════════════════════════════════════════════════════════════════════ */
const Roadmap = (() => {
  const WIN_ID = 'roadmap';

  function _priorityClass(p){
    return {critical:'pri-critical',high:'pri-high',medium:'pri-medium',low:'pri-low'}[p]||'pri-low';
  }
  function _statusClass(s){
    const k = (s||'').replace(/-/g,'_');
    return 'st-'+s.replace(/ /g,'-');
  }
  function _catClass(c){ return 'cat-'+(c||'feature'); }

  function _renderItems(body, items, onPriChange){
    body.innerHTML = '';
    if(!items || !items.length){
      body.innerHTML = '<div style="font-size:9px;color:#1a4060;padding:8px;">No roadmap requests found.</div>';
      return;
    }
    items.forEach(req => {
      const div = document.createElement('div');
      div.className = `rm-item ${_priorityClass(req.priority||'low')}`;

      const short_desc = (req.description||'').slice(0,160).replace(/\n/g,' ');
      const created = (req.created_at||'').slice(0,10);
      const updated = (req.updated_at||req.created_at||'').slice(0,10);

      div.innerHTML = `
        <div class="rm-top">
          <span class="rm-id">${req.id||'?'}</span>
          <span class="rm-title" title="${(req.title||'').replace(/"/g,'&quot;')}">${req.title||'?'}</span>
          <div class="rm-badges">
            <span class="rm-badge ${_statusClass(req.status||'submitted')}">${(req.status||'?').toUpperCase()}</span>
            <span class="rm-badge ${_catClass(req.category||'feature')}">${(req.category||'feature').toUpperCase()}</span>
            <select class="rm-pri-sel" data-id="${req.id}" title="Change priority">
              <option value="critical" ${req.priority==='critical'?'selected':''}>CRITICAL</option>
              <option value="high"     ${req.priority==='high'    ?'selected':''}>HIGH</option>
              <option value="medium"   ${req.priority==='medium'  ?'selected':''}>MEDIUM</option>
              <option value="low"      ${req.priority==='low'     ?'selected':''}>LOW</option>
            </select>
          </div>
        </div>
        ${short_desc ? `<div class="rm-desc">${short_desc}</div>` : ''}
        <div class="rm-footer">
          <span>created ${created}</span>
          ${updated!==created ? `<span>· updated ${updated}</span>` : ''}
          ${req.comments&&req.comments.length ? `<span>· ${req.comments.length} comment${req.comments.length>1?'s':''}</span>` : ''}
        </div>`;

      // Priority selector handler
      div.querySelector('.rm-pri-sel').addEventListener('change', async (e)=>{
        const id  = e.target.dataset.id;
        const pri = e.target.value;
        e.target.disabled = true;
        try{
          const r = await fetch('/pipeline-roadmap', {
            method: 'POST',
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({id, priority: pri}),
          });
          const res = await r.json();
          if(res.ok){
            if(typeof onPriChange === 'function'){
              onPriChange(id, pri);  // re-sort + re-render whole list
            } else {
              div.className = `rm-item ${_priorityClass(pri)}`;
            }
          }
        }catch(err){
          console.error('roadmap priority update failed:', err);
        } finally {
          if(e.target) e.target.disabled = false;
        }
      });

      body.appendChild(div);
    });
  }

  async function _load(body){
    body.innerHTML = '<div style="font-size:9px;color:#1a4060;padding:8px;">Loading…</div>';
    try{
      const r = await fetch('/pipeline-roadmap', {cache:'no-store'});
      if(!r.ok){ body.innerHTML = `<div style="color:#cc3333;font-size:9px;padding:8px;">HTTP ${r.status}</div>`; return; }
      const d = await r.json();
      _renderItems(body, d.requests||[]);
    }catch(e){
      body.innerHTML = `<div style="color:#cc3333;font-size:9px;padding:8px;">Error: ${e.message}</div>`;
    }
  }

  function open(){
    if(WindowManager.has(WIN_ID)){ WindowManager.focus(WIN_ID); return; }
    const W=520, H=540;
    const sx=Math.round((window.innerWidth-W)/2);
    const sy=50;
    WindowManager.create(WIN_ID, {
      title: 'ROADMAP — Feature Backlog',
      initialGeom: {x:sx, y:sy, w:W, h:H},
    });
    const container = WindowManager.getBody(WIN_ID);
    container.style.display='flex';
    container.style.flexDirection='column';

    // Header with refresh + stats row
    const hdr = document.createElement('div');
    hdr.style.cssText='padding:6px 10px;border-bottom:1px solid #0c1e38;display:flex;align-items:center;gap:8px;flex-shrink:0;';
    hdr.innerHTML=`
      <span style="font-size:8px;color:#1a3860;letter-spacing:2px;">ALL REQUESTS</span>
      <span id="rm-count" style="font-size:9px;color:#3a9fff;font-weight:bold;flex:1;"></span>
      <button id="rm-refresh" style="height:20px;padding:0 8px;border-radius:3px;border:1px solid #1a3a60;background:#0a1626;color:#2a6090;cursor:pointer;font-size:8px;font-family:inherit;letter-spacing:1px;">REFRESH</button>`;
    container.appendChild(hdr);

    // Filter row
    const frow = document.createElement('div');
    frow.style.cssText='padding:4px 10px;border-bottom:1px solid #080e1e;display:flex;align-items:center;gap:6px;flex-shrink:0;';
    frow.innerHTML=`
      <span style="font-size:8px;color:#1a3860;">FILTER:</span>
      <select id="rm-filter-status" style="height:18px;background:#090f1c;border:1px solid #1a3a60;color:#3a9fff;font-size:8px;font-family:inherit;border-radius:2px;padding:0 3px;">
        <option value="">ALL STATUS</option>
        <option value="submitted">SUBMITTED</option>
        <option value="in-progress">IN-PROGRESS</option>
        <option value="completed">COMPLETED</option>
        <option value="rejected">REJECTED</option>
      </select>
      <select id="rm-filter-pri" style="height:18px;background:#090f1c;border:1px solid #1a3a60;color:#3a9fff;font-size:8px;font-family:inherit;border-radius:2px;padding:0 3px;">
        <option value="">ALL PRIORITY</option>
        <option value="critical">CRITICAL</option>
        <option value="high">HIGH</option>
        <option value="medium">MEDIUM</option>
        <option value="low">LOW</option>
      </select>`;
    container.appendChild(frow);

    // Scrollable body
    const body = document.createElement('div');
    body.className = 'rm-body';
    container.appendChild(body);

    let _allItems = [];
    const _PRI_ORD = {critical:0, high:1, medium:2, low:3};
    const _ST_ORD  = {'in-progress':0, submitted:1, backlog:2};

    function _applyFilter(){
      const st  = document.getElementById('rm-filter-status').value;
      const pri = document.getElementById('rm-filter-pri').value;
      const filtered = _allItems
        .filter(r => (!st  || r.status   === st) && (!pri || r.priority === pri))
        .sort((a,b) => {
          const sd = (_ST_ORD[a.status]??9) - (_ST_ORD[b.status]??9);
          if(sd !== 0) return sd;
          return (_PRI_ORD[a.priority]??9) - (_PRI_ORD[b.priority]??9);
        });
      _renderItems(body, filtered, (id, newPri) => {
        const item = _allItems.find(r => r.id === id);
        if(item) item.priority = newPri;
        _applyFilter();
      });
      const cntEl = document.getElementById('rm-count');
      if(cntEl) cntEl.textContent = `${filtered.length} / ${_allItems.length} items`;
    }

    async function _refresh(){
      body.innerHTML='<div style="font-size:9px;color:#1a4060;padding:8px;">Loading…</div>';
      try{
        const r = await fetch('/pipeline-roadmap',{cache:'no-store'});
        if(!r.ok){body.innerHTML=`<div style="color:#cc3333;font-size:9px;padding:8px;">HTTP ${r.status}</div>`;return;}
        const d = await r.json();
        _allItems = d.requests||[];
        _applyFilter();
      }catch(e){
        body.innerHTML=`<div style="color:#cc3333;font-size:9px;padding:8px;">Error: ${e.message}</div>`;
      }
    }

    document.getElementById('rm-refresh').addEventListener('click', _refresh);
    document.getElementById('rm-filter-status').addEventListener('change', _applyFilter);
    document.getElementById('rm-filter-pri').addEventListener('change', _applyFilter);

    WinLauncher.refresh();
    _refresh();
  }

  return {open};
})();


/* ══════════════════════════════════════════════════════════════════════════════
   MODULE: REPORTS — floating window with R1 / R2 / R3 analytics charts
   ══════════════════════════════════════════════════════════════════════════════ */
const Reports = (() => {
  const WIN_ID = 'reports';
  let _days = 14;
  let _chartR1 = null, _chartR2 = null, _chartR3 = null;
  let _r3Daily = true;
  let _r1Mode = 'daily'; // 'daily' | 'weekly' | 'cumulative'
  let _lastData = null;
  let _bodyEl = null;
  let _autoIntervalId  = null;
  let _autoCadenceMs   = 0;      // 0 = off
  let _lastLoadMs      = null;
  let _lastLoadDurMs   = null;

  const R1_PAL = ['#3a9fff','#3fb950','#d29922','#f85149','#bc8cff','#79c0ff','#56d364','#e3b341'];
  const OP_PAL = ['#3a9fff','#3fb950','#d29922','#f85149','#bc8cff','#79c0ff'];
  const R3_PAL = ['rgba(58,159,255,.8)','rgba(63,185,80,.8)','rgba(210,153,34,.8)','rgba(248,81,73,.8)','rgba(188,140,255,.8)','rgba(121,192,255,.8)'];
  const _R3_STEPS_FALLBACK = ['stub_captured','desc_extracted','enriched','staged','dispatched','submitted'];
  function _r3Steps(){ return (window._nexusProfile?.reporting?.r3_steps) || _R3_STEPS_FALLBACK; }

  const COPTS = () => ({
    responsive:true, maintainAspectRatio:false,
    interaction:{mode:'index',intersect:false},
    plugins:{legend:{labels:{color:'#3a6f8f',font:{size:9},boxWidth:8,padding:6}}},
    scales:{
      x:{ticks:{color:'#3a6f8f',font:{size:8},maxRotation:45},grid:{color:'#0a1c2e'}},
      y:{ticks:{color:'#3a6f8f',font:{size:8}},grid:{color:'#0a1c2e'},beginAtZero:true},
    },
  });

  function _mkBtn(label, active, onclick){
    const b = document.createElement('button');
    b.textContent = label;
    b.style.cssText = `height:18px;padding:0 8px;border-radius:2px;border:1px solid ${active?'#3a9fff':'#1a3a60'};background:${active?'#0a2040':'#090f1c'};color:${active?'#3a9fff':'#2a6090'};cursor:pointer;font-size:8px;font-family:inherit;letter-spacing:1px;`;
    b.addEventListener('click', onclick);
    return b;
  }

  let _view = 'r1';
  function _showView(id){
    _view = id;
    if(!_bodyEl) return;
    _bodyEl.querySelectorAll('[data-rview]').forEach(el=>{
      el.style.display = el.dataset.rview===id ? 'flex' : 'none';
    });
    _bodyEl.querySelectorAll('[data-rsw]').forEach(b=>{
      const on = b.dataset.rsw===id;
      b.style.borderColor = on?'#3a9fff':'#1a3a60';
      b.style.background  = on?'#0a2040':'#090f1c';
      b.style.color       = on?'#3a9fff':'#2a6090';
    });
    // render the active chart if data already loaded — defer with rAF so
    // the browser has time to apply display:flex and perform a layout pass
    // before Chart.js measures the canvas dimensions
    if(_lastData){
      const _id=id;
      requestAnimationFrame(()=>{
        if(_view!==_id) return; // view changed before frame fired
        if(_id==='r1') _renderR1(_lastData.r1);
        if(_id==='r2') _renderR2(_lastData.r2);
        if(_id==='r3') _renderR3(_lastData.r3);
      });
    }
  }

  function _canvasPanel(canvasId){
    const wrap = document.createElement('div');
    wrap.style.cssText='flex:1;min-height:0;position:relative;min-height:200px;';
    const c = document.createElement('canvas');
    c.id = canvasId;
    c.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;';
    wrap.appendChild(c);
    return wrap;
  }

  function _renderR1(r1){
    const el = document.getElementById('rpt-c-r1'); if(!el) return;
    if(_chartR1){ _chartR1.destroy(); _chartR1=null; }

    if(_r1Mode === 'cumulative'){
      const cumul = r1?.cumulative || {};
      const _CUMUL = [
        ['Stubs Discovered','stubs_discovered'],
        ['Desc Extracted',  'desc_extracted'],
        ['Enriched',        'enriched'],
        ['Classified',      'classified'],
        ['Offer Staged',    'offer_staged'],
        ['Tasks Dispatched','tasks_dispatched'],
        ['Submitted',       'submitted'],
      ];
      const cLabels = _CUMUL.map(x=>x[0]);
      const cValues = _CUMUL.map(x=>cumul[x[1]]||0);
      const opts = COPTS();
      opts.indexAxis = 'y';
      opts.plugins.legend = {display:false};
      _chartR1 = new Chart(el.getContext('2d'), {
        type:'bar',
        data:{labels:cLabels, datasets:[{
          label:'All-Time Totals',
          data:cValues,
          backgroundColor:R1_PAL.slice(0,cLabels.length),
          borderRadius:2,
        }]},
        options:opts,
      });
      return;
    }

    const series = r1?.series||[];

    if(_r1Mode === 'weekly'){
      function _isoWeek(dateStr){
        const d = new Date(dateStr+'T00:00:00Z');
        const dow = d.getUTCDay() || 7;
        d.setUTCDate(d.getUTCDate() + 4 - dow);
        const ys = new Date(Date.UTC(d.getUTCFullYear(),0,1));
        const wn = Math.ceil((((d-ys)/86400000)+1)/7);
        return d.getUTCFullYear()+'-W'+String(wn).padStart(2,'0');
      }
      const wkMap = {};
      series.forEach(s=>s.data.forEach(p=>{
        const wk=_isoWeek(p.day);
        if(!wkMap[wk]) wkMap[wk]={};
        wkMap[wk][s.label]=(wkMap[wk][s.label]||0)+p.count;
      }));
      const allWeeks = Object.keys(wkMap).sort();
      _chartR1 = new Chart(el.getContext('2d'), {
        type:'bar',
        data:{labels:allWeeks, datasets:series.map((s,i)=>({
          label:s.label,
          data:allWeeks.map(w=>wkMap[w][s.label]||0),
          backgroundColor:R1_PAL[i%R1_PAL.length],
          borderRadius:2,
        }))},
        options:COPTS(),
      });
      return;
    }

    // daily mode (default)
    const daySet = new Set();
    series.forEach(s=>s.data.forEach(p=>daySet.add(p.day)));
    const allDays = [...daySet].sort();
    const labels = allDays.map(d=>d.slice(5));
    // KPI reference line — daily discovery target from profile threshold
    const _tgt = window._nexusProfile?.thresholds?.daily_discovery_target;
    const _tgtDs = (_tgt && allDays.length) ? [{
      label: 'Target ('+_tgt+')',
      data: allDays.map(()=>_tgt),
      borderColor:'rgba(86,211,100,0.4)', backgroundColor:'transparent',
      borderDash:[4,4], borderWidth:1.5, pointRadius:0, spanGaps:true, tension:0,
    }] : [];
    _chartR1 = new Chart(el.getContext('2d'), {
      type:'line',
      data:{labels, datasets: [...series.map((s,i)=>({
        label:s.label,
        data:allDays.map(d=>{ const p=s.data.find(x=>x.day===d); return p?p.count:null; }),
        borderColor:R1_PAL[i%R1_PAL.length], backgroundColor:'transparent',
        borderWidth:1.5, pointRadius:allDays.length>20?0:2, spanGaps:true, tension:0.3,
      })), ..._tgtDs]},
      options: COPTS(),
    });
  }

  function _renderR2(r2){
    const el = document.getElementById('rpt-c-r2'); if(!el) return;
    const series = r2?.series||[];
    const daySet = new Set();
    series.forEach(s=>{ s.assigned.forEach(p=>daySet.add(p.day)); s.submitted.forEach(p=>daySet.add(p.day)); });
    const allDays = [...daySet].sort();
    const labels = allDays.map(d=>d.slice(5));
    const datasets = [];
    series.forEach((s,i)=>{
      const col = OP_PAL[i%OP_PAL.length];
      datasets.push({label:s.operator+' assigned',  data:allDays.map(d=>{ const p=s.assigned.find(x=>x.day===d);  return p?p.count:null; }), borderColor:col, backgroundColor:'transparent', borderWidth:1.5, pointRadius:0, spanGaps:true, tension:0.2});
      datasets.push({label:s.operator+' submitted', data:allDays.map(d=>{ const p=s.submitted.find(x=>x.day===d); return p?p.count:null; }), borderColor:col, backgroundColor:'transparent', borderWidth:1.5, borderDash:[3,3], pointRadius:0, spanGaps:true, tension:0.2});
    });
    if(_chartR2){ _chartR2.destroy(); _chartR2=null; }
    _chartR2 = new Chart(el.getContext('2d'), {type:'line', data:{labels,datasets}, options:COPTS()});
  }

  function _renderR3(r3){
    const el = document.getElementById('rpt-c-r3'); if(!el) return;
    const raw = r3?.buckets||[];
    const R3S = _r3Steps();
    let labels, datasets;
    if(_r3Daily){
      const db={};
      for(const b of raw){ const d=b.hour.slice(0,10); if(!db[d]) db[d]={}; for(const s of R3S) db[d][s]=(db[d][s]||0)+(b[s]||0); }
      const days=Object.keys(db).sort();
      labels=days.map(d=>d.slice(5));
      datasets=R3S.map((s,i)=>({label:s.replace('_',' '), data:days.map(d=>db[d][s]||0), backgroundColor:R3_PAL[i%R3_PAL.length], borderRadius:2}));
    } else {
      labels=raw.map(b=>b.hour.slice(5));
      datasets=R3S.map((s,i)=>({label:s.replace('_',' '), data:raw.map(b=>b[s]||0), backgroundColor:R3_PAL[i%R3_PAL.length], borderRadius:2}));
    }
    if(_chartR3){ _chartR3.destroy(); _chartR3=null; }
    const o=COPTS(); o.scales.x.stacked=true; o.scales.y.stacked=true;
    _chartR3 = new Chart(el.getContext('2d'), {type:'bar', data:{labels,datasets}, options:o});
  }

  async function _load(){
    const _t0 = performance.now();
    const tsEl = _bodyEl && _bodyEl.querySelector('#rpt-ts');
    if(tsEl) tsEl.textContent = 'Loading...';
    try{
      const r = await fetch(`/pipeline-reports?days=${_days}&hours=72`, {cache:'no-store'});
      const data = await r.json();
      _lastData = data;
      _lastLoadMs    = Date.now();
      _lastLoadDurMs = Math.round(performance.now()-_t0);
      if(tsEl) tsEl.textContent = data.generated_at||'';
      if(_view==='r1') _renderR1(data.r1);
      if(_view==='r2') _renderR2(data.r2);
      if(_view==='r3') _renderR3(data.r3);
      if(data.error && tsEl) tsEl.textContent += ' ERR:'+data.error;
      // Update canvas node
      const _rrn = Layout.getNode('report_refresh');
      if(_rrn){
        _rrn.status  = _autoCadenceMs ? 'active' : 'ready';
        _rrn.metric  = _autoCadenceMs ? 'auto '+(_autoCadenceMs/60000).toFixed(0)+'m' : 'manual';
        _rrn.metric2 = new Date(_lastLoadMs).toISOString().slice(11,19);
        _rrn._info   = {
          'Auto cadence': _autoCadenceMs ? (_autoCadenceMs/60000).toFixed(0)+'m' : 'OFF',
          'Last refresh': new Date(_lastLoadMs).toISOString().slice(11,19),
          'Duration':     _lastLoadDurMs+'ms',
          'Window (days)':_days,
          'Open Reports': 'click node to control',
        };
      }
    }catch(e){
      if(tsEl) tsEl.textContent = 'Error: '+e.message;
      const _rrn = Layout.getNode('report_refresh');
      if(_rrn){ _rrn.status='error'; _rrn.metric='error'; _rrn.metric2=e.message.slice(0,18); }
    }
  }

  function setAutoRefresh(ms){
    if(_autoIntervalId){ clearInterval(_autoIntervalId); _autoIntervalId=null; }
    _autoCadenceMs = ms;
    if(ms > 0) _autoIntervalId = setInterval(_load, ms);
    try{ localStorage.setItem('nexus_reports_cadence', String(ms)); }catch(e){}
    // Reflect in canvas node immediately
    const _rrn = Layout.getNode('report_refresh');
    if(_rrn) _rrn.status = ms ? 'active' : 'ready';
  }

  function getStatus(){
    return {autoCadenceMs:_autoCadenceMs, lastLoadMs:_lastLoadMs, lastLoadDurMs:_lastLoadDurMs};
  }

  function open(){
    if(WindowManager.has(WIN_ID)){ WindowManager.focus(WIN_ID); return; }
    const W=900, H=560;
    WindowManager.create(WIN_ID, {
      title: 'REPORTS — Pipeline Analytics',
      initialGeom: {x:Math.round((window.innerWidth-W)/2), y:44, w:W, h:H},
    });
    _bodyEl = WindowManager.getBody(WIN_ID);
    _bodyEl.style.cssText='display:flex;flex-direction:column;background:#060e18;overflow:hidden;height:100%;';

    // toolbar
    const tb = document.createElement('div');
    tb.style.cssText='padding:5px 10px;border-bottom:1px solid #0c1e38;display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;';

    [['r1','R1 — INVENTORY'],['r2','R2 — OPERATORS'],['r3','R3 — THROUGHPUT']].forEach(([id,lbl])=>{
      const b = document.createElement('button');
      b.textContent=lbl; b.dataset.rsw=id;
      b.style.cssText=`height:18px;padding:0 8px;border-radius:2px;border:1px solid ${id==='r1'?'#3a9fff':'#1a3a60'};background:${id==='r1'?'#0a2040':'#090f1c'};color:${id==='r1'?'#3a9fff':'#2a6090'};cursor:pointer;font-size:8px;font-family:inherit;letter-spacing:1px;`;
      b.addEventListener('click',()=>_showView(id));
      tb.appendChild(b);
    });

    tb.appendChild(Object.assign(document.createElement('span'),{style:'margin-left:8px;font-size:8px;color:#1a4060;',textContent:'WIN:'}));
    [14,30,90].forEach(d=>{
      const b=_mkBtn(d+'D', d===_days, ()=>{
        _days=d;
        // update active state on all day buttons
        tb.querySelectorAll('[data-rday]').forEach(x=>{
          const on = x.dataset.rday == d;
          x.style.borderColor = on?'#3a9fff':'#1a3a60';
          x.style.background  = on?'#0a2040':'#090f1c';
          x.style.color       = on?'#3a9fff':'#2a6090';
        });
        _load();
      });
      b.dataset.rday = d;
      tb.appendChild(b);
    });

    const toggleWrap=document.createElement('label');
    toggleWrap.style.cssText='display:flex;align-items:center;gap:4px;cursor:pointer;font-size:8px;color:#2a6090;margin-left:8px;';
    const cb=document.createElement('input'); cb.type='checkbox'; cb.checked=true;
    cb.addEventListener('change',()=>{ _r3Daily=cb.checked; if(_lastData) _renderR3(_lastData.r3); });
    toggleWrap.appendChild(cb);
    toggleWrap.appendChild(document.createTextNode('DAILY AGG'));
    tb.appendChild(toggleWrap);

    tb.appendChild(Object.assign(document.createElement('span'),{style:'margin-left:8px;font-size:8px;color:#1a4060;',textContent:'MODE:'}));
    ['daily','weekly','cumulative'].forEach((mode,i)=>{
      const lbl=['DAY','WEEK','CUMUL'][i];
      const b=_mkBtn(lbl, mode===_r1Mode, ()=>{
        _r1Mode=mode;
        tb.querySelectorAll('[data-r1mode]').forEach(x=>{
          const on=x.dataset.r1mode===mode;
          x.style.borderColor=on?'#3a9fff':'#1a3a60';
          x.style.background =on?'#0a2040':'#090f1c';
          x.style.color      =on?'#3a9fff':'#2a6090';
        });
        if(_lastData) _renderR1(_lastData.r1);
      });
      b.dataset.r1mode=mode;
      tb.appendChild(b);
    });

    const rfrBtn=_mkBtn('REFRESH',false,_load); rfrBtn.style.marginLeft='auto'; tb.appendChild(rfrBtn);
    const tsEl=document.createElement('span'); tsEl.id='rpt-ts';
    tsEl.style.cssText='font-size:8px;color:#1a4060;white-space:nowrap;'; tb.appendChild(tsEl);
    _bodyEl.appendChild(tb);

    // chart panels
    [
      ['r1','Each line = one pipeline component count per day.  X = date.'],
      ['r2','Solid = assigned   /   Dashed = submitted.  One color per operator.'],
      ['r3','Stacked bars — jobs processed at each pipeline step per time bucket.'],
    ].forEach(([id,help])=>{
      const panel=document.createElement('div');
      panel.dataset.rview=id;
      panel.style.cssText='flex-direction:column;flex:1;min-height:0;padding:8px 10px;display:none;overflow:hidden;';
      const h=document.createElement('div');
      h.style.cssText='font-size:8px;color:#1a4060;margin-bottom:6px;flex-shrink:0;';
      h.textContent=help;
      panel.appendChild(h);
      panel.appendChild(_canvasPanel('rpt-c-'+id));
      _bodyEl.appendChild(panel);
    });

    _showView('r1');
    // Restore auto cadence from localStorage
    try{
      const saved=parseInt(localStorage.getItem('nexus_reports_cadence'));
      if(saved>0) setAutoRefresh(saved);
    }catch(e){}
    WinLauncher.refresh();
    _load();
  }

  return {open, refresh:_load, setAutoRefresh, getStatus};
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: PROTOCOL_BAR  – top-level named protocol actions (REQ-039/040/041)
   ════════════════════════════════════════════════════════════════════════════ */
const ProtocolBar = (() => {
  const _POLL_MS  = 5000;
  const _overlay  = document.getElementById('proto-glow-overlay');
  const _toastEl  = document.getElementById('proto-toast');
  let _toastTimer = null;

  function _toast(type, msg, sub, durationMs) {
    if (!_toastEl) return;
    clearTimeout(_toastTimer);
    _toastEl.className = 'pt-' + type;
    _toastEl.querySelector('.pt-icon').textContent =
      type === 'done' ? '\u2713' : type === 'error' ? '\u2717' : '\u25b6';
    _toastEl.querySelector('.pt-msg').textContent = msg;
    _toastEl.querySelector('.pt-sub').textContent = sub || '';
    // force reflow so transition plays even if already visible
    void _toastEl.offsetWidth;
    _toastEl.classList.add('pt-show');
    if (durationMs > 0) {
      _toastTimer = setTimeout(() => _toastEl.classList.remove('pt-show'), durationMs);
    }
  }

  function _setState(name, state, label) {
    const btn = document.getElementById('proto-' + name); if (!btn) return;
    btn.className = 'proto-btn ' + (state || 'idle');
    const lbl = btn.querySelector('.proto-label');
    if (lbl) lbl.textContent = label || name.slice(0,5).toUpperCase();
  }

  function _setGlobalGlow(name, active) {
    if (!_overlay) return;
    _overlay.classList.remove('active-rebaseline', 'active-throughput');
    if (active && name) _overlay.classList.add('active-' + name);
  }

  async function _pollStatus() {
    try {
      const r = await fetch('/protocol/status', {cache:'no-store'});
      if (!r.ok) return;
      const d = await r.json();
      let anyRunning = null;
      for (const [name, st] of Object.entries(d)) {
        if (name.startsWith('_')) continue;
        const sfx = st.state === 'running' ? '\u2026' : st.state === 'done' ? ' OK' : st.state === 'error' ? ' ERR' : st.state === 'unavailable' ? ' N/A' : '';
        _setState(name, st.state, name.slice(0,5).toUpperCase() + sfx);
        if (st.state === 'running') anyRunning = name;
      }
      _setGlobalGlow(anyRunning, anyRunning !== null);
    } catch(e) {}
  }

  async function runProtocol(name) {
    const label = name.toUpperCase();
    _setState(name, 'running'); _setGlobalGlow(name, true);
    _toast('run', '\u25b6 ' + label + ' PROTOCOL RUNNING…', '', 0);
    if (typeof LiveFeed !== 'undefined') LiveFeed.push(
      {type:'sync', label:'PROTOCOL ' + label + ' — STARTED', ts:new Date().toISOString()});
    try {
      const r = await fetch('/protocol/' + name, {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'});
      const d = await r.json();
      const finalState = d.state || (r.ok ? 'done' : 'error');
      _setState(name, finalState);
      if (finalState !== 'running') _setGlobalGlow(name, false);
      if (finalState === 'done') {
        const detail = d.progress || '';
        _toast('done', '\u2713 ' + label + ' COMPLETE', detail, 5000);
        if (typeof LiveFeed !== 'undefined') LiveFeed.push(
          {type:'ok', label:'PROTOCOL ' + label + ' — DONE: ' + detail, ts:new Date().toISOString()});
        if (typeof DataFetch !== 'undefined') DataFetch.refresh();
        if (typeof Reports   !== 'undefined') Reports.refresh();
        // Re-fetch status snapshot after rebaseline so NEXUS STATUS reflects new counts
        if (name === 'rebaseline') {
          fetch('/nexus-status-snapshot',{cache:'no-store'}).then(r=>r.status===204?null:r.json()).then(s=>{ if(s) StatusPanel.updateSnapshot(s); }).catch(()=>{});
        }
      } else if (finalState === 'unavailable') {
        const detail = d.progress || 'Protocol not available on this host';
        _toast('run', '\u25cb ' + label + ' UNAVAILABLE', detail, 4000);
        if (typeof LiveFeed !== 'undefined') LiveFeed.push(
          {type:'info', label:'PROTOCOL ' + label + ' — UNAVAILABLE', ts:new Date().toISOString()});
      } else {
        const errDetail = d.progress || d.error || 'see /protocol/status';
        _toast('error', '\u2717 ' + label + ' ERROR', errDetail, 8000);
        if (typeof LiveFeed !== 'undefined') LiveFeed.push(
          {type:'error', label:'PROTOCOL ' + label + ' — ERROR: ' + errDetail, ts:new Date().toISOString()});
      }
    } catch(e) {
      _setState(name, 'error'); _setGlobalGlow(name, false);
      _toast('error', '\u2717 ' + label + ' FAILED', String(e), 8000);
      if (typeof LiveFeed !== 'undefined') LiveFeed.push(
        {type:'error', label:'PROTOCOL ' + label + ' — FETCH ERROR: ' + String(e), ts:new Date().toISOString()});
    }
    setTimeout(_pollStatus, 800);
  }

  async function toggleOperatorAvailability(bareOpId, btn) {
    const n = Layout.getNode('op_' + bareOpId);
    const nowAvail = n ? n.operatorAvailable !== false : true;
    const setUnavail = nowAvail;
    if (btn) { btn.textContent = setUnavail ? 'MARKING UNAVAIL\u2026' : 'MARKING AVAILABLE\u2026'; btn.disabled = true; }
    try {
      await fetch('/protocol/operator-unavailable', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({op_id: bareOpId, unavailable: setUnavail}),
      });
      if (n) n.operatorAvailable = !setUnavail;
      if (btn) {
        btn.textContent = setUnavail ? 'MARK AVAILABLE' : 'MARK UNAVAILABLE';
        btn.style.borderColor = setUnavail ? '#cc6600' : '#2a5a90';
        btn.style.color       = setUnavail ? '#ff9900' : '#3a9fff';
        btn.disabled = false;
      }
      if (typeof DataFetch !== 'undefined') DataFetch.refresh();
    } catch(e) {
      if (btn) { btn.textContent = 'ERROR'; btn.disabled = false; }
    }
  }

  function init() {
    document.querySelectorAll('.proto-btn[data-proto]').forEach(btn => {
      btn.addEventListener('click', () => runProtocol(btn.dataset.proto));
    });
    setInterval(_pollStatus, _POLL_MS);
    _pollStatus();
  }

  return { init, runProtocol, toggleOperatorAvailability };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: RELEASE_HISTORY  – versioned changelog window (REQ-042)
   ════════════════════════════════════════════════════════════════════════════ */
const ReleaseHistory = (() => {
  const ID = 'release-history';
  const _RELEASES = [
    {
      date: '2026-02-25', build: '20260225.002',
      items: [
        'Boot screen v2: canvas radar with live blip dots, logo image, green confirmation blips on each check',
      ],
    },
    {
      date: '2026-02-25', build: '20260225.001',
      items: [
        'Startup boot screen: animated radar, step-by-step health/profile/data checks, fade-out on first data',
        'MCP SSE transport: VS Code Copilot connects directly via GET /sse + JSON-RPC 2.0',
        'GET /mcp/capabilities: live capability registry served as JSON (SSOT)',
        'capability_registry.json: 30 endpoints + 10 MCP tools, schema-versioned',
        'Capabilities window loads dynamically from /mcp/capabilities (no hardcoding)',
        'Pre-commit hook validates capability registry integrity on every commit',
        'MCP_CAPABILITY_STANDARD.md: process doc for adding new endpoints/tools',
        'MCP tools: pipeline status, reports, protocol run/status, all page capture tools',
        '.vscode/mcp.json: webshadow-nexus SSE server registered for Copilot',
      ]
    },
    {
      date: '2026-02-25', build: '20260224.006',
      items: [
        'Protocol panel redesigned: vertical right side, above zoom controls',
        'Global pulsating frame + radial background glow per protocol (amber/cyan)',
        'Throughput Boost protocol: 60-min active window via data/throughput_boost.json',
        'Generic POST /protocol/{name} endpoint — extensible registry dispatch',
        'Urgency badge: 6-point star burst with shadow glow pulse replaces circle',
        'Release History window (this panel)',
        'System Capabilities window',
      ]
    },
    {
      date: '2026-02-24', build: '20260224.005',
      items: [
        'Protocol system: RebaselineProtocol, GET /protocol/status, POST /protocol/rebaseline',
        'Operator unavailable: mark/restore + urgent task redistribution',
        'scripts/__init__.py missing fix — resolved silent ModuleNotFoundError',
        '_PROTOCOLS_IMPORT_ERROR exposed in /protocol/status for diagnostics',
        'Horizontal protocol bar in topbar — initial implementation',
      ]
    },
    {
      date: '2026-02-20', build: '20260220.003',
      items: [
        'Operator Performance Matrix (C3) — draggable window, today/avg7 metrics',
        'Worker cluster: register/heartbeat/deregister, queue depth in pipeline-data',
        'Mark operator unavailable button in node cards',
        'PerfMatrix.update() hooked into DataFetch polling cycle',
        'Operator task redistribution on unavailability',
      ]
    },
    {
      date: '2026-02-15', build: '20260215.001',
      items: [
        'WindowManager — draggable, resizable floating window system',
        'WIN_LAUNCHER dropdown in topbar — open/focus/restore any window',
        'Live Feed — global event stream floating window',
        'Node card windows — status, metrics, sparkline, log stream, QA controls',
        'Roadmap window — feature backlog with priority server sync',
        'Reports window — pipeline analytics, submission rates, rankings',
        'Integration Checks strip in topbar',
      ]
    },
    {
      date: '2026-02-08', build: '20260208.001',
      items: [
        'Pipeline flow canvas — real-time node/packet/connection rendering',
        'Timeline bar: rewind, fast-forward, scrub, live mode, density canvas',
        'Pipeline data polling — operators, jobs, urgency counts, stubs, pages',
        'Zoom controls + pan + fit-to-canvas; layout save/reset persistence',
        'Operator node dormant/unavailable + diagonal stripe overlays',
        'Aura mode: pulsing halo on high-activity nodes',
      ]
    },
  ];

  function open() {
    if (WindowManager.has(ID)) { WindowManager.focus(ID); return; }
    const tbH = (document.getElementById('topbar') || {offsetHeight:38}).offsetHeight;
    WindowManager.create(ID, {
      title: 'RELEASE HISTORY',
      initialGeom: { x: Math.max(4, Math.round(window.innerWidth*0.3)), y: tbH+10, w: 420, h: 390 },
    });
    const body = WindowManager.getBody(ID);
    const rows = _RELEASES.map(r => {
      const items = r.items.map(i =>
        `<div style="display:flex;gap:5px;padding:1px 0;">`+
        `<span style="color:#1a4060;flex-shrink:0;">&#8212;</span>`+
        `<span style="color:#5a9aaa;">${i}</span></div>`
      ).join('');
      return `<div style="border:1px solid #0c2038;border-radius:3px;padding:7px 10px 6px;background:#060d1a;">`+
        `<div style="display:flex;align-items:baseline;gap:8px;margin-bottom:4px;">`+
        `<span style="color:#3a9fff;font-size:9px;font-weight:bold;letter-spacing:1px;">${r.date}</span>`+
        `<span style="color:#1a3860;font-size:8px;letter-spacing:.5px;">BUILD ${r.build}</span></div>`+
        `<div style="display:flex;flex-direction:column;gap:1px;font-size:8px;font-family:Consolas,monospace;">${items}</div>`+
        `</div>`;
    }).join('');
    body.innerHTML =
      `<div style="display:flex;flex-direction:column;gap:6px;padding:8px 10px;overflow-y:auto;height:100%;box-sizing:border-box;">${rows}</div>`;
  }

  setTimeout(() => WinLauncher.register(ID, 'RELEASE HISTORY — Changelog', open), 0);
  return { open };
})();


/* ════════════════════════════════════════════════════════════════════════════
   MODULE: CAPABILITIES  – current system capabilities reference (REQ-043)
   ════════════════════════════════════════════════════════════════════════════ */
const Capabilities = (() => {
  const ID = 'capabilities';
  // Capabilities loaded dynamically from GET /mcp/capabilities (capability_registry.json)
  async function open() {
    if (WindowManager.has(ID)) { WindowManager.focus(ID); return; }
    const tbH = (document.getElementById('topbar') || {offsetHeight:38}).offsetHeight;
    WindowManager.create(ID, {
      title: 'SYSTEM CAPABILITIES',
      initialGeom: { x: Math.max(4, Math.round(window.innerWidth*0.08)), y: tbH+10, w: 430, h: 410 },
    });
    const body = WindowManager.getBody(ID);
    body.innerHTML = `<div style="padding:16px;color:#4a8aaa;font-size:8px;font-family:Consolas,monospace;">Loading capabilities...</div>`;
    try {
      const resp = await fetch('/mcp/capabilities', {cache:'no-store'});
      const reg = await resp.json();
      const byCategory = {};
      (reg.endpoints || []).forEach(ep => {
        const cat = (ep.category || 'OTHER').toUpperCase().replace(/_/g, ' ');
        if (!byCategory[cat]) byCategory[cat] = [];
        byCategory[cat].push(ep.method + ' ' + ep.path + (ep.mcp_tool ? ' [MCP]' : '') + ' \u2014 ' + ep.description);
      });
      const mcpItems = (reg.mcp_tools || []).map(t => t.name + ' \u2014 ' + t.description);
      const sections = [];
      if (mcpItems.length) sections.push({ section: 'MCP TOOLS', items: mcpItems });
      Object.keys(byCategory).sort().forEach(cat => sections.push({ section: cat, items: byCategory[cat] }));
      const rows = sections.map(s => {
        const items = s.items.map(i =>
          `<div style="display:flex;gap:5px;padding:1px 0;">`+
          `<span style="color:#1a5080;flex-shrink:0;">&#9656;</span>`+
          `<span style="color:#4a8aaa;">${i}</span></div>`
        ).join('');
        return `<div style="border:1px solid #0a1e38;border-radius:3px;padding:7px 10px 6px;background:#060d1a;">`+
          `<div style="color:#00ccaa;font-size:8px;font-weight:bold;letter-spacing:2px;margin-bottom:5px;">${s.section}</div>`+
          `<div style="display:flex;flex-direction:column;gap:1px;font-size:8px;font-family:Consolas,monospace;">${items}</div>`+
          `</div>`;
      }).join('');
      const ver = reg.schema_version
        ? `<div style="padding:2px 10px 5px;color:#1a4060;font-size:7px;letter-spacing:1px;">REGISTRY v${reg.schema_version} / SERVER ${reg.server_version||'?'}</div>`
        : '';
      body.innerHTML = `<div style="display:flex;flex-direction:column;gap:6px;padding:8px 10px;overflow-y:auto;height:100%;box-sizing:border-box;">${ver}${rows}</div>`;
    } catch(e) {
      body.innerHTML = `<div style="padding:16px;color:#aa4040;font-size:8px;font-family:Consolas,monospace;">Failed to load capabilities: ${e.message}</div>`;
    }
  }

  setTimeout(() => WinLauncher.register(ID, 'SYSTEM CAPABILITIES', open), 0);
  return { open };
})();


// ── INIT ─────────────────────────────────────────────────────────────────────
applySkin(localStorage.getItem('nexus_skin')||'cyan');
resizeCanvas();
ProtocolBar.init();
document.getElementById('tb-build').textContent = 'B.' + BUILD;
fetch('/health',{cache:'no-store'}).then(r=>r.json()).then(h=>{
  const el=document.getElementById('tb-ws-ver');
  if(el){ el.textContent='srv '+h.version; el.style.color=''; el.title=''; }
  NexusBoot.step('health');
}).catch((err)=>{
  const el=document.getElementById('tb-ws-ver');
  if(el){ el.textContent='HEALTH FAIL'; el.style.color='#ff4444'; el.title='GET /health failed: '+(err&&err.message||'no response'); }
  NexusBoot.step('health');
}); // report failure visibly in topbar
fetch('/pipeline-profile',{cache:'no-store'}).then(r=>r.json()).then(p=>{
  const el=document.getElementById('tb-profile');
  if(el){
    el.textContent=p.display_name||p.profile_id||'NEXUS';
    el.title=`Profile: ${p.display_name||'—'}\nParent: ${p.parent_profile||'—'}\nID: ${p.profile_id||'—'}\nv${p.version||'?'}`;
  }
  document.title='NEXUS \u2014 '+(p.display_name||'Pipeline');
  window._nexusProfile = p;
  window._nexusProfileName = 'default';
  NexusBoot.step('profile');
  resizeCanvas(); // rebuild Layout with profile-driven operator/source nodes
  // Fetch status snapshot built by Rebaseline — no-throw, graceful on 204
  fetch('/nexus-status-snapshot',{cache:'no-store'}).then(r=>r.status===204?null:r.json()).then(s=>{ if(s) StatusPanel.updateSnapshot(s); }).catch(()=>{});
}).catch(()=>{ NexusBoot.step('profile'); }); // still advance on failure
// Profile switcher — fetch list; show selector only when >1 profile exists
fetch('/pipeline-profiles',{cache:'no-store'}).then(r=>r.json()).then(data=>{
  const profiles = data.profiles||[];
  if(profiles.length <= 1) return;
  const sel = document.getElementById('tb-profile-sel');
  if(!sel) return;
  profiles.forEach(p=>{
    const opt = document.createElement('option');
    opt.value = p.name;
    opt.textContent = p.display_name;
    sel.appendChild(opt);
  });
  sel.style.display = 'inline-block';
  sel.addEventListener('change', ()=>{
    const name = sel.value;
    const url = (name==='default') ? '/pipeline-profile' : `/pipeline-profile?name=${encodeURIComponent(name)}`;
    fetch(url,{cache:'no-store'}).then(r=>r.json()).then(p=>{
      window._nexusProfile = p;
      window._nexusProfileName = name;
      const el=document.getElementById('tb-profile');
      if(el){ el.textContent=p.display_name||p.profile_id||'NEXUS'; }
      document.title='NEXUS \u2014 '+(p.display_name||'Pipeline');
      resizeCanvas();
    }).catch(()=>{});
  });
}).catch(()=>{});
IntegrationChecks.start();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: VALUE_PLAN  – REQ-022  value-weighted submission work plan
   Fetches /pipeline-value-plan; surfaces top jobs ranked by value/hr.
   ════════════════════════════════════════════════════════════════════════════ */
const ValuePlan = (() => {
  const ID = 'value-plan';
  let _timer = null;

  const _STAGE_COL = {SUBMIT_NOW:'#00cc66', ENRICH:'#f0a020', EXTRACT:'#3a7fff'};

  async function _load(){
    const r = await fetch('/pipeline-value-plan?limit=25',{cache:'no-store'});
    if(!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  function _render(data){
    const body = WindowManager.getBody(ID);
    if(!body) return;
    if(data.error && !(data.plan||[]).length){
      body.innerHTML=`<div style="color:#f05050;padding:8px 10px;font-size:9px;">${data.error}</div>`;
      return;
    }
    const s = data.summary || {};
    const pl = data.plan || [];

    const summaryHtml = `<div style="display:flex;gap:10px;padding:5px 8px 4px;border-bottom:1px solid #0c2038;`+
      `font-size:9px;font-family:Consolas,monospace;flex-wrap:wrap;align-items:center;">`+
      `<span style="color:#00cc66;"><b>${s.submit_now_count||0}</b> SUBMIT NOW</span>`+
      `<span style="color:#3a4860;">|</span>`+
      `<span style="color:#a0b8c0;">TOP 5:</span>`+
      `<span style="color:#3a9fff;"><b>${(s.top5_total_value||0).toLocaleString()} PLN</b></span>`+
      `<span style="color:#6a8898;">in ${s.top5_est_time_hr||0}h</span>`+
      `<span style="color:#3a4860;">|</span>`+
      `<span style="color:#f0a020;"><b>${(s.top5_est_value_per_hr||0).toLocaleString()} PLN/hr</b></span>`+
      `</div>`;

    const rows = pl.map(p=>{
      const sc = _STAGE_COL[p.stage]||'#a0b8c0';
      const isTop = p.rank<=3;
      const ttl = (p.title||'').length>40 ? (p.title||'').slice(0,40)+'\u2026' : (p.title||'\u2014');
      const bud = p.budget!=null ? p.budget.toLocaleString() : '~3000';
      const lnk = p.url ? `<a href="${p.url}" target="_blank" style="color:#5ab4d8;text-decoration:none;">&#8599;</a>` : '';
      const rowStyle = isTop ? 'background:rgba(0,80,40,.18);' : '';
      return `<tr style="${rowStyle}">`+
        `<td class="pm-num" style="color:#3a4860;">${p.rank}</td>`+
        `<td class="pm-name" style="max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${ttl} ${lnk}</td>`+
        `<td class="pm-num" style="color:#c0d8e0;">${bud}</td>`+
        `<td class="pm-num${(p.fit_score||0)>=8?' pm-hi':''}">${p.fit_score||'\u2014'}</td>`+
        `<td class="pm-num pm-hi">${(p.value_score||0).toLocaleString()}</td>`+
        `<td class="pm-num" style="color:${sc};white-space:nowrap;">${p.stage.replace('_',' ')}</td>`+
        `<td class="pm-num pm-sub" style="color:#f0c040;">${(p.value_per_hr||0).toLocaleString()}</td>`+
        `</tr>`;
    }).join('');

    const noDataHtml = !pl.length
      ? `<div style="color:#3a6080;padding:12px 8px;font-size:9px;">No actionable jobs found in database.</div>`
      : '';

    body.innerHTML = summaryHtml +
      `<div class="pm-wrap" style="max-height:calc(100% - 34px);">`+
        `<table class="pm-tbl">`+
          `<thead><tr>`+
            `<th>#</th><th style="text-align:left;">TITLE</th>`+
            `<th>BUD</th><th>FIT</th><th>VAL</th><th>STAGE</th><th>VAL/HR</th>`+
          `</tr></thead>`+
          `<tbody>${rows}</tbody>`+
        `</table>${noDataHtml}`+
      `</div>`;
  }

  async function _refresh(){
    if(!WindowManager.has(ID)){ if(_timer){clearInterval(_timer);_timer=null;} return; }
    try{ _render(await _load()); } catch(e){ /* network error — keep showing last render */ }
  }

  async function open(){
    if(WindowManager.has(ID)){WindowManager.focus(ID);return;}
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    WindowManager.create(ID,{
      title:'VALUE PLAN \u2014 Submission Optimizer',
      initialGeom:{x:Math.max(4,Math.round(window.innerWidth*0.18)),y:tbH+8,w:560,h:380},
    });
    const body=WindowManager.getBody(ID);
    if(body) body.innerHTML=`<div style="color:#3a6080;padding:12px 8px;font-size:9px;">Loading…</div>`;
    try{ _render(await _load()); } catch(e){
      const b2=WindowManager.getBody(ID);
      if(b2) b2.innerHTML=`<div style="color:#f05050;padding:8px;font-size:9px;">${e.message}</div>`;
    }
    if(_timer) clearInterval(_timer);
    _timer = setInterval(_refresh, 60000);
  }

  setTimeout(()=>WinLauncher.register(ID,'VALUE PLAN \u2014 Submission Optimizer',open),0);
  return {open};
})();

// ── ExpiryLoss — dispatched jobs never submitted, per operator + total ────────
const ExpiryLoss = (() => {
  const ID = 'expiry-loss';
  let _timer = null;

  async function _load(){
    const r = await fetch('/pipeline-expiry-loss',{cache:'no-store'});
    if(!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  function _fmtVal(v){ return v >= 1000 ? (v/1000).toFixed(1)+'K' : String(v); }

  function _updateTopbar(data){
    const el = document.getElementById('m-loss');
    const wrap = document.getElementById('m-loss-item');
    if(!el || !wrap) return;
    const t = data.total || {};
    el.textContent = (t.count||0)+' / ~'+_fmtVal(t.value||0)+' PLN';
    wrap.style.display = '';
    wrap.onclick = () => ExpiryLoss.open();
  }

  function _render(data){
    const body = WindowManager.getBody(ID);
    if(!body) return;
    if(data.error && !(data.per_op||[]).length){
      body.innerHTML=`<div style="color:#f05050;padding:8px 10px;font-size:9px;">`+data.error+`</div>`;
      return;
    }
    const t = data.total || {};
    const rows = (data.per_op || []).map(p => {
      const pct = t.count ? Math.round(p.count/t.count*100) : 0;
      return `<tr>`+
        `<td class="pm-name" style="text-transform:uppercase;letter-spacing:.5px;">${p.op_id}</td>`+
        `<td class="pm-num" style="color:#ff7070;">${p.count}</td>`+
        `<td class="pm-num" style="color:#f0a020;">~${(p.value||0).toLocaleString()} PLN</td>`+
        `<td class="pm-num" style="color:#3a4860;">${pct}%</td>`+
        `</tr>`;
    }).join('');

    body.innerHTML =
      `<div style="display:flex;gap:12px;padding:6px 10px 5px;border-bottom:1px solid #0c2038;`+
      `font-size:9px;font-family:Consolas,monospace;flex-wrap:wrap;">`+
        `<span style="color:#ff5555;font-weight:bold;font-size:11px;">`+(t.count||0)+` JOBS LOST</span>`+
        `<span style="color:#3a4860;">|</span>`+
        `<span style="color:#f0a020;">~<b>${(t.value||0).toLocaleString()} PLN</b> unsubmitted value</span>`+
        `<span style="color:#4a5868;font-size:8px;align-self:flex-end;">3000 PLN fallback where budget unknown</span>`+
      `</div>`+
      `<div class="pm-wrap" style="max-height:calc(100% - 42px);">`+
        `<table class="pm-tbl">`+
          `<thead><tr>`+
            `<th style="text-align:left;">OPERATOR</th>`+
            `<th>JOBS LOST</th><th>EST. VALUE</th><th>SHARE</th>`+
          `</tr></thead>`+
          `<tbody>${rows}</tbody>`+
        `</table>`+
        (!rows ? `<div style="color:#3a6080;padding:12px 8px;font-size:9px;">No dispatched-but-unsubmitted jobs found.</div>` : '')+
      `</div>`;
  }

  async function _refresh(){
    if(!WindowManager.has(ID)){ if(_timer){clearInterval(_timer);_timer=null;} return; }
    try{ const d=await _load(); _render(d); _updateTopbar(d); }
    catch(e){ /* keep last render */ }
  }

  async function open(){
    if(WindowManager.has(ID)){WindowManager.focus(ID);return;}
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    WindowManager.create(ID,{
      title:'EXPIRY LOSS \u2014 Unsubmitted Assignment Tracker',
      initialGeom:{x:Math.max(4,Math.round(window.innerWidth*0.38)),y:tbH+8,w:480,h:280},
    });
    const body=WindowManager.getBody(ID);
    if(body) body.innerHTML=`<div style="color:#3a6080;padding:12px 8px;font-size:9px;">Loading\u2026</div>`;
    try{ const d=await _load(); _render(d); _updateTopbar(d); }
    catch(e){
      const b=WindowManager.getBody(ID);
      if(b) b.innerHTML=`<div style="color:#f05050;padding:8px;font-size:9px;">${e.message}</div>`;
    }
    if(_timer) clearInterval(_timer);
    _timer = setInterval(_refresh, 120000);
  }

  // Load topbar KPI on startup without opening window
  (async () => {
    try { _updateTopbar(await _load()); } catch(e) { /* silent — topbar item stays hidden */ }
  })();

  setTimeout(()=>WinLauncher.register(ID,'EXPIRY LOSS \u2014 Unsubmitted Assignment Tracker',open),0);
  return {open};
})();

// ── OpThroughput — submitted jobs per operator + quoted PLN value ─────────────
const OpThroughput = (() => {
  const ID = 'op-throughput';
  let _timer = null;

  async function _load(){
    const r = await fetch('/pipeline-op-throughput',{cache:'no-store'});
    if(!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  function _fmtVal(v){ return v >= 1000 ? (v/1000).toFixed(1)+'K' : String(v); }

  function _updateTopbar(data){
    const el = document.getElementById('m-offer');
    const wrap = document.getElementById('m-offer-item');
    if(!el || !wrap) return;
    const t = data.total || {};
    el.textContent = (t.count||0)+' / '+_fmtVal(t.value||0)+' PLN';
    wrap.style.display = '';
    wrap.onclick = () => OpThroughput.open();
  }

  function _render(data){
    const body = WindowManager.getBody(ID);
    if(!body) return;
    if(data.error && !(data.per_op||[]).length){
      body.innerHTML=`<div style="color:#f05050;padding:8px 10px;font-size:9px;">`+data.error+`</div>`;
      return;
    }
    const t = data.total || {};
    const rows = (data.per_op || []).map(p => {
      const pct = t.count ? Math.round(p.count/t.count*100) : 0;
      return `<tr>`+
        `<td class="pm-name" style="text-transform:uppercase;letter-spacing:.5px;">${p.op_id}</td>`+
        `<td class="pm-num pm-hi" style="color:#00cc66;">${p.count}</td>`+
        `<td class="pm-num" style="color:#3a9fff;">${(p.value||0).toLocaleString()} PLN</td>`+
        `<td class="pm-num" style="color:#3a4860;">${pct}%</td>`+
        `</tr>`;
    }).join('');

    body.innerHTML =
      `<div style="display:flex;gap:12px;padding:6px 10px 5px;border-bottom:1px solid #0c2038;`+
      `font-size:9px;font-family:Consolas,monospace;flex-wrap:wrap;">`+
        `<span style="color:#00cc66;font-weight:bold;font-size:11px;">`+(t.count||0)+` SUBMITTED</span>`+
        `<span style="color:#3a4860;">|</span>`+
        `<span style="color:#3a9fff;"><b>${(t.value||0).toLocaleString()} PLN</b> total quoted</span>`+
      `</div>`+
      `<div class="pm-wrap" style="max-height:calc(100% - 42px);">`+
        `<table class="pm-tbl">`+
          `<thead><tr>`+
            `<th style="text-align:left;">OPERATOR</th>`+
            `<th>SUBMITTED</th><th>QUOTED VALUE</th><th>SHARE</th>`+
          `</tr></thead>`+
          `<tbody>${rows}</tbody>`+
        `</table>`+
        (!rows ? `<div style="color:#3a6080;padding:12px 8px;font-size:9px;">No submitted jobs found.</div>` : '')+
      `</div>`;
  }

  async function _refresh(){
    if(!WindowManager.has(ID)){ if(_timer){clearInterval(_timer);_timer=null;} return; }
    try{ const d=await _load(); _render(d); _updateTopbar(d); }
    catch(e){ /* keep last render */ }
  }

  async function open(){
    if(WindowManager.has(ID)){WindowManager.focus(ID);return;}
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    WindowManager.create(ID,{
      title:'OPERATOR THROUGHPUT \u2014 Submission Performance',
      initialGeom:{x:Math.max(4,Math.round(window.innerWidth*0.58)),y:tbH+8,w:440,h:260},
    });
    const body=WindowManager.getBody(ID);
    if(body) body.innerHTML=`<div style="color:#3a6080;padding:12px 8px;font-size:9px;">Loading\u2026</div>`;
    try{ const d=await _load(); _render(d); _updateTopbar(d); }
    catch(e){
      const b=WindowManager.getBody(ID);
      if(b) b.innerHTML=`<div style="color:#f05050;padding:8px;font-size:9px;">${e.message}</div>`;
    }
    if(_timer) clearInterval(_timer);
    _timer = setInterval(_refresh, 120000);
  }

  // Load topbar KPI on startup without opening window
  (async () => {
    try { _updateTopbar(await _load()); } catch(e) { /* silent — topbar item stays hidden */ }
  })();

  setTimeout(()=>WinLauncher.register(ID,'OPERATOR THROUGHPUT \u2014 Submission Performance',open),0);
  return {open};
})();

WinLauncher.register('roadmap', 'ROADMAP — Feature Backlog', ()=>Roadmap.open());
WinLauncher.register('reports', 'REPORTS — Pipeline Analytics', ()=>Reports.open());

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: ACL_ADMIN  – Access Control admin panel (admin role enforced server-side)
   Opens /auth/admin in a floating iframe window. Server session check prevents
   non-admin access even if panel is opened directly.
   ════════════════════════════════════════════════════════════════════════════ */
const AclAdmin = (() => {
  const ID = 'acl-admin';

  function open() {
    if (WindowManager.has(ID)) { WindowManager.focus(ID); return; }
    const tbH = (document.getElementById('topbar') || {offsetHeight:38}).offsetHeight;
    WindowManager.create(ID, {
      title: 'ACCESS CONTROL — Users & Groups',
      initialGeom: {
        x: Math.max(4, Math.round(window.innerWidth * 0.1)),
        y: tbH + 12,
        w: 940,
        h: 640,
      },
    });
    const body = WindowManager.getBody(ID);
    body.style.cssText = 'padding:0;overflow:hidden;';
    const iframe = document.createElement('iframe');
    iframe.src = '/auth/admin';
    iframe.style.cssText = 'width:100%;height:100%;border:none;background:#0d1117;';
    body.appendChild(iframe);
  }

  WinLauncher.register(ID, 'ACCESS CONTROL — Users & Groups', open, 'TOOLS');
  return { open };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: MCP_INSTRUCTIONS  — connection guide for AI agents
   ════════════════════════════════════════════════════════════════════════════ */
const McpInstructions = (() => {
  const ID = 'mcp-instructions';

  const _TOOLS = [
    'nexus_get_pipeline_state','nexus_operator_set_active','nexus_operator_replenish',
    'nexus_node_restart','nexus_get_operator_stats','nexus_validate_job_submittable',
    'nexus_raise_feature_request','nexus_list_requirements','nexus_signoff_requirement',
    'nexus_ws_dispatch','nexus_ws_get_result','nexus_ws_list_plugins',
    'nexus_task_assign','nexus_task_remove','nexus_task_set_outcome','nexus_task_list',
    'nexus_job_search','nexus_get_daily_summary','nexus_get_job_details','nexus_push_discord',
  ];

  function _block(title, code) {
    const w = document.createElement('div');
    w.style.cssText='margin-bottom:10px;';
    const hdr = document.createElement('div');
    hdr.style.cssText='display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;';
    hdr.innerHTML=`<span style="font-size:8px;letter-spacing:2px;color:#1a7aaa;">${title}</span>`;
    const btn = document.createElement('button');
    btn.textContent='COPY';
    btn.style.cssText='height:16px;padding:0 6px;font-size:7px;font-family:inherit;letter-spacing:1px;background:#0a1626;border:1px solid #1a3a60;color:#2a7aaa;border-radius:2px;cursor:pointer;';
    btn.addEventListener('click',()=>{ navigator.clipboard.writeText(code).then(()=>{ btn.textContent='COPIED'; setTimeout(()=>btn.textContent='COPY',1500); }); });
    hdr.appendChild(btn);
    const pre = document.createElement('pre');
    pre.style.cssText='background:#040810;border:1px solid #0c1e38;border-radius:3px;padding:8px 10px;font-size:8px;font-family:Consolas,monospace;color:#4a9aaa;overflow-x:auto;white-space:pre;line-height:1.5;margin:0;';
    pre.textContent = code;
    w.appendChild(hdr); w.appendChild(pre);
    return w;
  }

  function open() {
    if (WindowManager.has(ID)) { WindowManager.focus(ID); return; }
    const tbH = (document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    WindowManager.create(ID, { title: 'MCP CONNECTION — Agent Setup Guide', initialGeom:{x:60,y:tbH+10,w:620,h:560} });
    const body = WindowManager.getBody(ID);
    body.style.cssText='padding:12px 14px;overflow-y:auto;font-family:inherit;';

    const base = window.location.origin;
    const endpoint = base + '/mcp';

    const claudeConfig = JSON.stringify({
      mcpServers: {
        nexus: {
          transport: 'sse',
          url: endpoint,
        }
      }
    }, null, 2);

    const cursorConfig = JSON.stringify({
      mcpServers: {
        nexus: {
          url: endpoint,
          type: 'sse',
        }
      }
    }, null, 2);

    const vsCodeConfig = JSON.stringify({
      "inputs": [],
      "servers": {
        "nexus": {
          "type": "sse",
          "url": endpoint,
        }
      }
    }, null, 2);

    const sections = [
      { h:'PROTOCOL', t:'SSE (Server-Sent Events) — MCP 2024-11 spec' },
      { h:'ENDPOINT URL', t: endpoint },
      { h:'AUTHENTICATION', t:'Session cookie required. Log in at '+base+'/auth/login first.\nThe browser session cookie is sent automatically when using a browser-based MCP client.\nFor headless agents: set Cookie header to nexus_session=<token>' },
    ];

    sections.forEach(s => {
      const row = document.createElement('div');
      row.style.cssText='margin-bottom:8px;';
      row.innerHTML=`<div style="font-size:8px;letter-spacing:2px;color:#1a7aaa;margin-bottom:2px;">${s.h}</div>`+
        `<div style="font-size:9px;font-family:Consolas,monospace;color:#4a8aaa;background:#040810;border:1px solid #0c1e38;border-radius:3px;padding:6px 10px;white-space:pre-wrap;">${s.t}</div>`;
      body.appendChild(row);
    });

    body.appendChild(_block('CLAUDE DESKTOP  (claude_desktop_config.json)', claudeConfig));
    body.appendChild(_block('CURSOR  (.cursor/mcp.json)', cursorConfig));
    body.appendChild(_block('VS CODE COPILOT  (.vscode/mcp.json)', vsCodeConfig));

    const toolsDiv = document.createElement('div');
    toolsDiv.innerHTML=`<div style="font-size:8px;letter-spacing:2px;color:#1a7aaa;margin-bottom:4px;">${_TOOLS.length} AVAILABLE TOOLS</div>`;
    const grid = document.createElement('div');
    grid.style.cssText='display:grid;grid-template-columns:1fr 1fr;gap:2px;';
    _TOOLS.forEach(t => {
      const d = document.createElement('div');
      d.style.cssText='font-size:8px;font-family:Consolas,monospace;color:#2a5a7a;padding:2px 4px;';
      d.textContent=t;
      grid.appendChild(d);
    });
    toolsDiv.appendChild(grid);
    body.appendChild(toolsDiv);
  }

  WinLauncher.register(ID, 'MCP CONNECTION — Agent Setup Guide', open, 'TOOLS');
  return { open };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: TASK_MANAGER  — view and manage operator task assignments
   ════════════════════════════════════════════════════════════════════════════ */
const TaskManager = (() => {
  const ID = 'task-manager';
  const OUTCOMES = ['pending','submitted','expired','failed','cancelled'];
  const OUT_COL  = {pending:'#3a9fff',submitted:'#00cc66',expired:'#ff9900',failed:'#ff4444',cancelled:'#4a4a6a'};

  let _filter = { operator:'', outcome:'' };

  async function _load() {
    let url = '/api/operator-tasks?limit=200';
    if (_filter.operator) url += '&operator='+encodeURIComponent(_filter.operator);
    if (_filter.outcome)  url += '&outcome='+encodeURIComponent(_filter.outcome);
    const r = await fetch(url, {cache:'no-store'});
    if (!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  async function _setOutcome(job_id, operator_id, outcome, btn) {
    btn.disabled = true;
    try {
      const r = await fetch('/api/task-outcome', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({job_id, operator_id, outcome})
      });
      const d = await r.json();
      if (d.error) throw new Error(d.error);
      open(); // refresh
    } catch(e) {
      btn.disabled = false;
      btn.textContent = 'ERR';
      btn.title = e.message;
    }
  }

  function _renderTable(body, data) {
    body.innerHTML = '';

    // Filter bar
    const bar = document.createElement('div');
    bar.style.cssText='display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid #0c1e38;background:#040810;position:sticky;top:0;z-index:2;';

    const opSel = document.createElement('select');
    opSel.style.cssText='height:20px;font-size:8px;font-family:inherit;background:#090f1c;color:#3a9fff;border:1px solid #1a3a60;border-radius:2px;padding:0 4px;';
    opSel.innerHTML='<option value="">ALL OPERATORS</option>';
    const ops = [...new Set((data.tasks||[]).map(t=>t.operator).filter(Boolean))].sort();
    ops.forEach(o=>{ const opt=document.createElement('option'); opt.value=o; opt.textContent=o.toUpperCase(); if(o===_filter.operator) opt.selected=true; opSel.appendChild(opt); });
    opSel.addEventListener('change',()=>{ _filter.operator=opSel.value; open(); });

    const outSel = document.createElement('select');
    outSel.style.cssText=opSel.style.cssText;
    outSel.innerHTML='<option value="">ALL OUTCOMES</option>';
    OUTCOMES.forEach(o=>{ const opt=document.createElement('option'); opt.value=o; opt.textContent=o.toUpperCase(); if(o===_filter.outcome) opt.selected=true; outSel.appendChild(opt); });
    outSel.addEventListener('change',()=>{ _filter.outcome=outSel.value; open(); });

    const count = document.createElement('span');
    count.style.cssText='font-size:8px;color:#1a5080;margin-left:auto;align-self:center;letter-spacing:1px;';
    count.textContent=(data.tasks||[]).length+' TASKS';

    bar.appendChild(opSel); bar.appendChild(outSel); bar.appendChild(count);
    body.appendChild(bar);

    // Table
    const tbl = document.createElement('div');
    tbl.style.cssText='overflow-y:auto;';

    const hdr = document.createElement('div');
    hdr.style.cssText='display:grid;grid-template-columns:60px 1fr 70px 80px 80px 80px 120px;gap:0;border-bottom:1px solid #0c2040;padding:4px 10px;';
    ['JOB','TITLE','BUDGET','OPERATOR','ASSIGNED','EXPIRES','ACTIONS'].forEach(h=>{
      const c=document.createElement('div'); c.style.cssText='font-size:7px;letter-spacing:1px;color:#1a4060;'; c.textContent=h; hdr.appendChild(c);
    });
    tbl.appendChild(hdr);

    (data.tasks||[]).forEach(t => {
      const row = document.createElement('div');
      row.style.cssText='display:grid;grid-template-columns:60px 1fr 70px 80px 80px 80px 120px;gap:0;padding:4px 10px;border-bottom:1px solid #060e1a;align-items:center;';
      row.style.background=t.outcome==='pending'?'transparent':'rgba(0,0,0,.15)';

      const oc = OUT_COL[t.outcome]||'#4a4a6a';
      const exp = t.expires_date||'';
      const today = new Date().toISOString().slice(0,10);
      const expStyle = exp && exp <= today && t.outcome==='pending' ? 'color:#ff4444;' : 'color:#2a5a80;';

      row.innerHTML=
        `<div style="font-size:8px;color:#1a5070;font-family:Consolas,monospace;">${t.job_id||''}</div>`+
        `<div style="font-size:8px;color:#3a7090;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${(t.title||'').replace(/"/g,'&quot;')}">${t.title||'—'}</div>`+
        `<div style="font-size:8px;color:#2a7050;">${t.budget!=null?t.budget+'':''}</div>`+
        `<div style="font-size:8px;color:#2a6080;">${(t.operator||'').toUpperCase()}</div>`+
        `<div style="font-size:8px;color:#2a5a80;">${(t.assigned_date||'').slice(0,10)}</div>`+
        `<div style="font-size:8px;${expStyle}">${exp.slice(0,10)}</div>`;

      const actions = document.createElement('div');
      actions.style.cssText='display:flex;gap:3px;flex-wrap:wrap;';

      if (t.outcome === 'pending') {
        [['SUB','submitted'],['EXP','expired'],['CAN','cancelled']].forEach(([label,oc2])=>{
          const b = document.createElement('button');
          b.textContent=label;
          b.style.cssText='height:14px;padding:0 4px;font-size:7px;font-family:inherit;letter-spacing:1px;cursor:pointer;border-radius:2px;background:#060e1a;border:1px solid #1a3040;color:#2a6080;';
          b.addEventListener('click',()=>_setOutcome(t.job_id, t.operator, oc2, b));
          actions.appendChild(b);
        });
      } else {
        const s = document.createElement('span');
        s.style.cssText=`font-size:8px;font-family:Consolas,monospace;color:${oc};letter-spacing:.5px;`;
        s.textContent=t.outcome.toUpperCase();
        actions.appendChild(s);
      }
      row.appendChild(actions);
      tbl.appendChild(row);
    });
    body.appendChild(tbl);
  }

  async function open() {
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    if (!WindowManager.has(ID)) {
      WindowManager.create(ID,{title:'TASK MANAGER — Operator Job Assignments',initialGeom:{x:40,y:tbH+10,w:980,h:560}});
    } else {
      WindowManager.focus(ID);
    }
    const body = WindowManager.getBody(ID);
    body.style.cssText='padding:0;overflow:hidden;display:flex;flex-direction:column;height:100%;';
    body.innerHTML='<div style="padding:16px;color:#1a5080;font-size:8px;">Loading...</div>';
    try {
      const data = await _load();
      _renderTable(body, data);
    } catch(e) {
      body.innerHTML=`<div style="padding:16px;color:#aa4040;font-size:8px;font-family:Consolas,monospace;">Error: ${e.message}</div>`;
    }
  }

  WinLauncher.register(ID, 'TASK MANAGER — Job Assignments', open, 'TOOLS');
  return { open };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: OPERATOR_PANEL  — per-operator activity summary and history
   ════════════════════════════════════════════════════════════════════════════ */
const OperatorPanel = (() => {
  const ID = 'operator-panel';
  let _timer = null;
  let _expanded = null;

  async function _loadStats() {
    const r = await fetch('/api/operator-stats', {cache:'no-store'});
    if (!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  async function _loadTasks(opId) {
    const r = await fetch('/api/operator-tasks?operator='+encodeURIComponent(opId)+'&limit=50',{cache:'no-store'});
    if (!r.ok) throw new Error('HTTP '+r.status);
    return r.json();
  }

  function _ago(iso) {
    if (!iso) return '—';
    const d = new Date(iso);
    if (isNaN(d)) return iso.slice(0,10);
    const s = Math.floor((Date.now()-d)/1000);
    if (s<60) return s+'s ago';
    if (s<3600) return Math.floor(s/60)+'m ago';
    if (s<86400) return Math.floor(s/3600)+'h ago';
    return Math.floor(s/86400)+'d ago';
  }

  function _bar(val, max, color) {
    const pct = max>0 ? Math.round(Math.min(100,val/max*100)) : 0;
    return `<div style="height:3px;background:#0a1626;border-radius:2px;margin-top:2px;"><div style="height:3px;width:${pct}%;background:${color};border-radius:2px;transition:width .4s;"></div></div>`;
  }

  async function _renderExpanded(container, opId) {
    container.innerHTML='<div style="padding:6px 12px;font-size:8px;color:#1a5080;">Loading tasks...</div>';
    try {
      const d = await _loadTasks(opId);
      const tasks = d.tasks||[];
      if (!tasks.length) { container.innerHTML='<div style="padding:6px 12px;font-size:8px;color:#1a3a50;">No tasks found.</div>'; return; }
      const OUT_COL={pending:'#3a9fff',submitted:'#00cc66',expired:'#ff9900',failed:'#ff4444',cancelled:'#4a4a6a'};
      container.innerHTML='';
      tasks.forEach(t=>{
        const oc=OUT_COL[t.outcome]||'#4a4060';
        const row=document.createElement('div');
        row.style.cssText='display:grid;grid-template-columns:55px 1fr 65px 80px 70px;gap:4px;padding:3px 12px;border-bottom:1px solid #060e1a;font-size:8px;';
        row.innerHTML=
          `<span style="color:#1a4060;font-family:Consolas,monospace;">${t.job_id}</span>`+
          `<span style="color:#2a6080;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${(t.title||'').replace(/"/g,'&quot;')}">${t.title||'—'}</span>`+
          `<span style="color:#2a6050;">${t.budget!=null?t.budget+'':''}</span>`+
          `<span style="color:#2a5070;">${(t.assigned_date||'').slice(0,10)}</span>`+
          `<span style="color:${oc};font-family:Consolas,monospace;">${(t.outcome||'').toUpperCase()}</span>`;
        container.appendChild(row);
      });
    } catch(e) {
      container.innerHTML=`<div style="padding:6px 12px;font-size:8px;color:#aa4040;">Error: ${e.message}</div>`;
    }
  }

  async function _render(body) {
    body.innerHTML='';
    let stats;
    try { stats = await _loadStats(); } catch(e) {
      body.innerHTML=`<div style="padding:16px;color:#aa4040;font-size:8px;font-family:Consolas,monospace;">Error: ${e.message}</div>`;
      return;
    }
    if (!Array.isArray(stats)||!stats.length) {
      body.innerHTML='<div style="padding:16px;font-size:8px;color:#1a4060;">No operator data available.</div>';
      return;
    }
    const maxSub = Math.max(1,...stats.map(s=>s.submitted||0));
    const maxW7  = Math.max(1,...stats.map(s=>s.submitted_7d||0));

    stats.forEach(op=>{
      const card = document.createElement('div');
      card.style.cssText='border:1px solid #0c1e38;border-radius:4px;margin:8px 10px 0;background:#040a14;overflow:hidden;';

      const hdr = document.createElement('div');
      hdr.style.cssText='display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;background:#060e1c;border-bottom:1px solid #0c1e38;';
      const isExp = _expanded===op.operator_id;
      hdr.innerHTML=
        `<div style="width:8px;height:8px;border-radius:50%;background:${op.pending>0?'#3aff88':'#1a3a50'};flex-shrink:0;"></div>`+
        `<span style="font-size:9px;letter-spacing:2px;color:#3a8aaa;font-weight:bold;flex:1;">${(op.operator_id||'').toUpperCase()}</span>`+
        `<span style="font-size:8px;color:#1a5070;margin-right:4px;">${op.pending||0} pending</span>`+
        `<span style="font-size:8px;color:#00cc66;margin-right:4px;">${op.submitted||0} submitted</span>`+
        `<span style="font-size:8px;color:#2a6080;margin-right:8px;">7d: ${op.submitted_7d||0}</span>`+
        `<span style="font-size:8px;color:#1a3a50;">${_ago(op.last_activity)}</span>`+
        `<span style="font-size:8px;color:#1a4060;margin-left:8px;">${isExp?'&#9660;':'&#9658;'}</span>`;
      hdr.addEventListener('click',()=>{ _expanded = isExp?null:op.operator_id; _render(body); });
      card.appendChild(hdr);

      const metrics = document.createElement('div');
      metrics.style.cssText='display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid #060e1a;';
      const total = op.total||0;
      const rate  = total>0 ? Math.round((op.submitted||0)/total*100) : 0;
      [
        {l:'TOTAL ASSIGNED',v:op.total||0,bar:null},
        {l:'SUBMITTED',v:op.submitted||0,bar:{val:op.submitted||0,max:maxSub,col:'#00cc66'}},
        {l:'7-DAY RATE',v:op.submitted_7d||0,bar:{val:op.submitted_7d||0,max:maxW7,col:'#3a9fff'}},
        {l:'PENDING',v:op.pending||0,bar:null},
        {l:'SUBMIT RATE',v:rate+'%',bar:{val:rate,max:100,col:'#c8a44a'}},
        {l:'LAST ACTIVE',v:_ago(op.last_activity),bar:null},
      ].forEach(m=>{
        const c=document.createElement('div');
        c.innerHTML=`<div style="font-size:7px;letter-spacing:1px;color:#1a4060;">${m.l}</div>`+
          `<div style="font-size:11px;color:#3a7090;font-family:Consolas,monospace;">${m.v}</div>`+
          (m.bar ? _bar(m.bar.val,m.bar.max,m.bar.col) : '');
        metrics.appendChild(c);
      });
      card.appendChild(metrics);

      if (isExp) {
        const detail = document.createElement('div');
        detail.style.cssText='border-top:1px solid #0a1a2a;';
        const subhdr = document.createElement('div');
        subhdr.style.cssText='display:grid;grid-template-columns:55px 1fr 65px 80px 70px;gap:4px;padding:4px 12px;border-bottom:1px solid #0c1e38;background:#040810;';
        ['JOB','TITLE','BUDGET','ASSIGNED','OUTCOME'].forEach(h=>{
          const c=document.createElement('div'); c.style.cssText='font-size:7px;letter-spacing:1px;color:#1a3a50;'; c.textContent=h; subhdr.appendChild(c);
        });
        detail.appendChild(subhdr);
        const taskRows = document.createElement('div');
        detail.appendChild(taskRows);
        _renderExpanded(taskRows, op.operator_id);
        card.appendChild(detail);
      }

      body.appendChild(card);
    });

    const pad = document.createElement('div'); pad.style.height='8px';
    body.appendChild(pad);
  }

  function open() {
    const tbH=(document.getElementById('topbar')||{offsetHeight:38}).offsetHeight;
    if (!WindowManager.has(ID)) {
      WindowManager.create(ID,{title:'OPERATOR PANEL — Activity Summary',initialGeom:{x:40,y:tbH+10,w:820,h:540}});
    } else { WindowManager.focus(ID); return; }
    const body = WindowManager.getBody(ID);
    body.style.cssText='padding:0;overflow-y:auto;';
    _render(body);
    clearInterval(_timer);
    _timer = setInterval(()=>{ if(WindowManager.has(ID)) _render(body); else clearInterval(_timer); }, 30000);
  }

  WinLauncher.register(ID, 'OPERATOR PANEL — Activity Summary', open, 'MONITORING');
  return { open };
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: NODE_NAVIGATOR — lists all canvas nodes; click centres + highlights
   ════════════════════════════════════════════════════════════════════════════ */
const NodeNavigator = (() => {
  const ID = 'node-nav';

  function _statusColor(st){
    const c = NODE_COL[st] || NODE_COL.blocked;
    return `rgb(${c.r},${c.g},${c.b})`;
  }

  function _render(filter){
    const list = document.getElementById('nn-list');
    if(!list) return;
    const q = (filter||'').toLowerCase();
    const nodes = Layout.allNodes.slice().sort((a,b)=>{
      const order = {active:0,ready:1,done:2,stop:3,error:4,blocked:5};
      return (order[a.status]??9)-(order[b.status]??9)||(a.label||'').localeCompare(b.label||'');
    });
    list.innerHTML = nodes.filter(n=>{
      if(!q) return true;
      return (n.label||'').toLowerCase().includes(q)||(n.id||'').toLowerCase().includes(q)||(n.sub||'').toLowerCase().includes(q);
    }).map(n=>{
      const dot = `<span class="nn-dot" style="background:${_statusColor(n.status)}"></span>`;
      const lbl = `<span class="nn-label">${n.label||n.id}</span>`;
      const sub = `<span class="nn-sub">${n.sub||n.id}</span>`;
      const dataId = (n.id||'').replace(/'/g,"\'" );
      return `<div class="nn-item" onclick="NodeNavigator.focusNode('${dataId}')">${dot}${lbl}${sub}</div>`;
    }).join('');
    if(!list.innerHTML) list.innerHTML = '<div style="color:#2a5070;font-size:10px;padding:8px 6px">no nodes match</div>';
  }

  function focusNode(id){
    const n = Layout.getNode(id);
    if(!n) return;
    // Pan + zoom to centre on node
    Camera.centerOn(n.x, n.y, Math.max(Camera.zoom, 1.0));
    // Highlight flash
    n.flash   = 1;
    n.srcGlow = 1.0;
    // Re-render list to reflect current state
    _render(document.getElementById('nn-search')?.value);
  }

  function open(){
    if(!WindowManager.getBody(ID)){
      WindowManager.create(ID, {title:'NODE NAVIGATOR', initialGeom:{x:60,y:60,w:280,h:380}});
    }
    const body = WindowManager.getBody(ID);
    if(!body) return;
    body.innerHTML = '';
    const search = document.createElement('input');
    search.id = 'nn-search'; search.placeholder = 'filter nodes...';
    search.addEventListener('input', e=>_render(e.target.value));
    const list = document.createElement('div'); list.id = 'nn-list';
    body.appendChild(search); body.appendChild(list);
    _render();
    // Refresh every 3s while open
    const _iv = setInterval(()=>{ if(!document.getElementById('nn-list')){ clearInterval(_iv); return; } _render(document.getElementById('nn-search')?.value); }, 3000);
  }

  WinLauncher.register(ID, 'NODE NAVIGATOR — Locate & Focus Canvas Nodes', open, 'TOOLS');
  return { open, focusNode };
})();

// REQ-038: Worker Nodes — polls /workers/status, injects per-worker nodes into canvas
const WorkerNodes = (() => {
  let _timer = null;

  async function poll(){
    try{
      const r = await fetch('/workers/status', {cache:'no-store'});
      if(!r.ok) throw new Error('HTTP '+r.status);
      const d = await r.json();
      Layout.setWorkerNodes(d.workers || []);
    } catch(e){
      // Server unreachable — clear worker nodes silently
      Layout.setWorkerNodes([]);
    }
  }

  function start(){
    poll();
    _timer = setInterval(poll, 8000);
  }

  return {start, poll};
})();

// REQ-043: Hardware Acceleration Indicator — detects GPU via WebGL
(function(){
  const el = document.getElementById('tb-gpu');
  if(!el) return;
  try {
    const cv = document.createElement('canvas');
    const gl = cv.getContext('webgl') || cv.getContext('experimental-webgl');
    if(!gl){ el.textContent='SW'; el.classList.add('gpu-sw'); el.title='Software renderer (no WebGL)'; return; }
    const ext = gl.getExtension('WEBGL_debug_renderer_info');
    const renderer = ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : '';
    const vendor   = ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL)   : '';
    const isSW = /swiftshader|llvmpipe|software|mesa.*software|microsoft basic/i.test(renderer+vendor);
    el.textContent = isSW ? 'SW' : 'GPU';
    el.classList.add(isSW ? 'gpu-sw' : 'gpu-on');
    el.title = (vendor||renderer) ? (vendor + (vendor&&renderer?' — ':'')+renderer).trim() : 'WebGL available';
    try{ gl.getExtension('WEBGL_lose_context')?.loseContext(); }catch(_){}
  } catch(e) {
    el.textContent = '?'; el.title = 'GPU detection error: '+e.message;
  }
})();

DataFetch.start();
WorkerNodes.start();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: MCP_MONITOR  — polls /mcp/activity, animates MCP server node
   REQ-MCP-TRANSPORT-01 + REQ-047
   ════════════════════════════════════════════════════════════════════════════ */
const McpMonitor = (() => {
  let _lastTs    = null;
  let _callCount = 0;
  let _everLive  = false;

  async function poll(){
    try {
      const r = await fetch('/mcp/activity?limit=10', {cache:'no-store'});
      if(!r.ok) return;
      const d = await r.json();
      const nd = Layout.getNode('mcp_server');
      if(!nd) return;
      const items    = d.activity || [];
      const sessions = d.session_count || 0;

      // On first live response, promote connections from blocked → ready
      if(!_everLive){
        _everLive = true;
        const cTd = Layout.getConn('mcp_to_td');
        const cDb = Layout.getConn('mcp_from_db');
        if(cTd && cTd.status === 'blocked') cTd.status = 'ready';
        if(cDb && cDb.status === 'blocked') cDb.status = 'ready';
      }

      // Detect new tool-call activity since last poll
      if(items.length && items[0].ts !== _lastTs){
        const newItems = _lastTs ? items.filter(x => x.ts > _lastTs) : [];
        if(newItems.length){
          _callCount += newItems.length;
          nd.srcGlow = Math.min(1.0, (nd.srcGlow||0) + 0.6);
          nd.flash   = 1;
          const cTd = Layout.getConn('mcp_to_td');
          const cDb = Layout.getConn('mcp_from_db');
          if(cTd) cTd.status = 'active';
          if(cDb) cDb.status = 'active';
          setTimeout(()=>{
            if(cTd && cTd.status==='active') cTd.status='ready';
            if(cDb && cDb.status==='active') cDb.status='ready';
          }, 3000);
        }
        _lastTs = items[0].ts;
      }

      // Status: active=sessions open, ready=idle but reachable, blocked=never responded
      nd.status = sessions > 0 ? 'active' : 'ready';
      const lastTool = items.length ? (items[0].tool||'').replace('nexus_','') : '';
      nd.metric = sessions > 0
        ? `${sessions} session${sessions>1?'s':''}`
        : _callCount > 0
          ? `${_callCount} calls`
          : 'listening';
      nd.metric2 = lastTool ? `last: ${lastTool}` : '';
      nd._info = {
        session_count: sessions,
        total_calls:   _callCount,
        last_tool:     lastTool || '—',
        last_ts:       _lastTs  || '—',
        ok:            items.filter(x=>x.ok).length,
        fail:          items.filter(x=>!x.ok).length,
      };
    } catch(e){
      // endpoint unreachable — leave status as-is (don't flash to blocked)
    }
  }

  function start(){ poll(); setInterval(poll, 3000); }
  return {start, poll};
})();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: DISCORD_MONITOR  — polls /discord/status and /discord/activity
   REQ-045 + REQ-048
   ════════════════════════════════════════════════════════════════════════════ */
const DiscordMonitor = (() => {
  let _lastActivityTs = null;

  async function poll(){
    try {
      const [rStatus, rAct] = await Promise.all([
        fetch('/discord/status',   {cache:'no-store'}),
        fetch('/discord/activity', {cache:'no-store'}),
      ]);
      const nd = Layout.getNode('discord');
      if(!nd) return;

      // Status node coloring: available > webhook_only > unconfigured
      if(rStatus.ok){
        const s = await rStatus.json();
        const running = s.bot_state === 'running';
        const webhookOk = !!s.webhook_configured;
        nd.status = !s.available
          ? 'stop'
          : running
            ? 'active'
            : webhookOk
              ? 'ready'       // amber: webhook only, no bot
              : 'stop';       // red/dim: module loaded but nothing configured yet
        nd.metric = !s.available
          ? 'unavailable'
          : running
            ? 'bot online'
            : webhookOk
              ? 'webhook only'
              : 'not configured';
        nd._info = {
          bot_state:          s.bot_state || 'n/a',
          webhook_configured: s.webhook_configured,
          bot_token_set:      s.bot_token_configured,
          channel_id:         s.channel_id,
        };

        // Promote connection lines from 'blocked' to visible once discord module is available;
        // without this they stay at 4% opacity (invisible) until activity fires.
        const cOut = Layout.getConn('disc_to_wc');
        const cIn  = Layout.getConn('disc_from_td');
        // 'active' wins; 'ready' when configured; 'stop' (dim but visible) when not yet configured; 'blocked' only if module not available
        const configured = webhookOk || running;
        const baseConnStatus = !s.available ? 'blocked' : configured ? 'ready' : 'stop';
        if(cOut && cOut.status !== 'active') cOut.status = baseConnStatus;
        if(cIn  && cIn.status  !== 'active') cIn.status  = baseConnStatus;
      }

      // Activity pills
      if(rAct.ok){
        const a = await rAct.json();
        const items = a.activity || [];
        if(items.length && items[0].ts !== _lastActivityTs){
          const isNew = _lastActivityTs != null;
          if(isNew){
            nd.srcGlow = Math.min(1.0, (nd.srcGlow||0) + 0.5);
            nd.flash   = 1;
            const cOut = Layout.getConn('disc_to_wc');
            const cIn  = Layout.getConn('disc_from_td');
            if(cOut) cOut.status = 'active';
            if(cIn)  cIn.status  = 'active';
            setTimeout(()=>{
              if(cOut && cOut.status==='active') cOut.status='ready';
              if(cIn  && cIn.status ==='active') cIn.status ='ready';
            }, 4000);
          }
          _lastActivityTs = items[0].ts;
        }
      }
    } catch(e){}
  }

  function start(){ poll(); setInterval(poll, 10000); }
  return {start, poll};
})();

McpMonitor.start();
DiscordMonitor.start();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: WS_MCP_MONITOR  — polls /api/ws-mcp-status, drives ws_mcp node
   REQ-051
   ════════════════════════════════════════════════════════════════════════════ */
const WsMcpMonitor = (() => {
  let _lastPluginCount = 0;
  let _lastCommandsTs  = 0;

  async function poll(){
    try {
      const r = await fetch('/api/ws-mcp-status', {cache:'no-store'});
      if(!r.ok) return;
      const d = await r.json();
      const nd = Layout.getNode('ws_mcp');
      if(!nd) return;

      const up      = !!d.ws_mcp_up;
      const plugins = d.nexus_plugin_count || 0;
      const pending = d.commands_pending   || 0;
      const mcpSess = d.mcp_sessions       || 0;

      nd.status = !up
        ? 'error'
        : plugins > 0
          ? 'active'
          : 'ready';
      nd.metric  = up ? (d.ws_mcp_version ? `v${d.ws_mcp_version}` : 'online') : 'DOWN';
      nd.metric2 = plugins > 0 ? `${plugins} plugin${plugins>1?'s':''}` : 'no plugins';
      nd._info   = {
        up, version: d.ws_mcp_version, plugin_count: plugins,
        commands_pending: pending, nexus_mcp_sessions: mcpSess,
        plugins: d.nexus_plugins || [],
      };

      const cCap  = Layout.getConn('wsmcp_to_wscap');
      const cNexus = Layout.getConn('wsmcp_to_nexus');

      // Animate capture connection when commands are dispatched
      if(pending > 0 || plugins > 0){
        if(cCap)  cCap.status  = up ? 'active' : 'error';
      } else {
        if(cCap && cCap.status === 'active') cCap.status = 'ready';
      }
      if(cCap  && cCap.status  === 'blocked') cCap.status  = up ? (plugins>0?'active':'ready') : 'stop';

      // Nexus↔WS link: active when Nexus MCP has sessions OR ws_mcp is up
      if(cNexus){
        if(cNexus.status === 'blocked') cNexus.status = up ? 'ready' : 'stop';
        if(mcpSess > 0 && up) cNexus.status = 'active';
      }

      // Flash on new plugin connections
      if(plugins > _lastPluginCount){
        nd.srcGlow = Math.min(1.0, (nd.srcGlow||0) + 0.7);
        nd.flash   = 1;
        if(cCap) { cCap.status = 'active'; setTimeout(()=>{ if(cCap.status==='active') cCap.status='ready'; }, 4000); }
      }
      // Flash on command activity
      if(pending > 0 && Date.now() - _lastCommandsTs > 4000){
        _lastCommandsTs = Date.now();
        nd.srcGlow = Math.min(1.0, (nd.srcGlow||0) + 0.4);
        if(cCap) cCap.status = 'active';
      }

      _lastPluginCount = plugins;
      // Sync plugin nodes on the canvas
      Layout.setPluginNodes(d.nexus_plugins || []);
    } catch(e){}
  }

  function start(){ poll(); setInterval(poll, 5000); }
  return {start, poll};
})();

WsMcpMonitor.start();

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: STEERING_MONITOR  — polls /pipeline-steering, injects upstream packets
   REQ-033
   ════════════════════════════════════════════════════════════════════════════ */
const SteeringMonitor = (() => {
  const _seen = new Set();

  async function poll(){
    try {
      const r = await fetch('/pipeline-steering?n=40', {cache:'no-store'});
      if(!r.ok) return;
      const d = await r.json();
      for(const e of (d.events||[])){
        const key = (e.ts||'') + '|' + (e.node||'') + '|' + (e.type||'');
        if(_seen.has(key)) continue;
        _seen.add(key);
        // Prune cache to prevent unbounded growth
        if(_seen.size > 400){ const arr=[..._seen]; arr.splice(0,150).forEach(k=>_seen.delete(k)); }
        if(e.conn) Packets.injectSteering(e.conn, e.type);
      }
    } catch(e){}
  }

  function start(){ poll(); setInterval(poll, 5000); }
  return {start};
})();
SteeringMonitor.start();
// Guarantee LiveFeed window appears at boot regardless of server connection state
setTimeout(()=>LiveFeed.show(), 600);

/* ════════════════════════════════════════════════════════════════════════════
   MODULE: ACTION_ITEMS — pinned blocker strip, polls /pipeline-action-items
   ════════════════════════════════════════════════════════════════════════════ */
const ActionItems = (() => {
  const strip = document.getElementById('action-strip');
  let _items = [];

  function render() {
    strip.innerHTML = '';
    for (const item of _items) {
      const cls = item.severity === 'error' ? 'ai-error' : 'ai-warning';
      const row = document.createElement('div');
      row.className = 'ai-banner ' + cls;
      row.dataset.id = item.id;
      const ts = (item.ts || '').slice(11, 19);
      row.innerHTML =
        '<span class="ai-title">' + (item.title || '') + '</span>' +
        '<span class="ai-detail">' + (item.detail || '') + '</span>' +
        '<span class="ai-ts">' + ts + '</span>' +
        '<button class="ai-ack">ACK</button>';
      row.querySelector('.ai-ack').addEventListener('click', () => ack(item.id));
      strip.appendChild(row);
    }
  }

  async function ack(id) {
    try {
      await fetch('/pipeline-action-items/ack', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({id}),
      });
      _items = _items.filter(i => i.id !== id);
      render();
    } catch(e) { console.error('ACK failed:', e); }
  }

  async function poll() {
    try {
      const r = await fetch('/pipeline-action-items', {cache: 'no-store'});
      if (!r.ok) return;
      const d = await r.json();
      _items = d.items || [];
      render();
    } catch(e) {}
  }

  function start() { poll(); setInterval(poll, 30000); }

  return {start, poll};
})();
ActionItems.start();

requestAnimationFrame(mainLoop);
</script>


</body></html>