Upload index.html

index.html

@@ -225,14 +225,146 @@
 .header-center-logo .reakt-name{display:block;font-family:Arial,'Segoe UI',sans-serif;font-weight:800;font-size:clamp(40px,3vw,56px);letter-spacing:-2.6px;line-height:.99;color:#ff5a0a;}
 .header-center-logo .reakt-tagline{display:block;font-family:Arial,'Segoe UI',sans-serif;font-weight:500;font-size:clamp(12px,.9vw,15px);line-height:1.16;letter-spacing:-.2px;color:#ff5a0a;margin-top:4px;}
 @media(max-width:1080px){.header-center-logo .reakt-name{font-size:44px}.header-center-logo .reakt-tagline{font-size:12px}}
+
+/* ORCHESTRA NEXT: dynamischer command center met vloeiende netwerkanimaties */
+.orchestra{padding:28px 28px 0;background:radial-gradient(ellipse at 50% 10%,#20376a 0%,#0b1730 58%,#08111f 100%);overflow:hidden}
+.orchestra::before,.orchestra::after{content:'';position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(54px);opacity:.2}
+.orchestra::before{width:320px;height:320px;left:-70px;top:90px;background:#35c9ff}
+.orchestra::after{width:360px;height:360px;right:-95px;top:170px;background:#8549ff}
+.orchestra .conductor-wrap{position:relative;z-index:3;margin-bottom:34px}
+.orchestra .conductor{width:362px;padding:20px 22px;border-color:#c194ff;box-shadow:0 0 45px #8c54df6f,inset 0 0 22px #9a69ff24;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;overflow:hidden}
+.orchestra .conductor::before{content:'';position:absolute;inset:-45% auto -45% -60%;width:52%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(18deg) translateX(-160%);opacity:0}
+.orchestra .conductor::after{content:'';position:absolute;inset:auto;left:50%;top:50%;width:155px;height:155px;background:radial-gradient(circle,rgba(188,150,255,.16),transparent 68%);transform:translate(-50%,-50%);pointer-events:none;opacity:.65}
+.orchestra .conductor strong{font-size:19px}
+.orchestra .conductor.running{animation:conductorFloat 4.8s ease-in-out infinite}
+.orchestra .conductor.transfering{transform:translateY(-4px) scale(1.02);border-color:#efd7ff;box-shadow:0 0 60px #b779ff88,inset 0 0 28px #d0a7ff30}
+.orchestra .conductor.transfering::before{opacity:1;animation:conductorSweep 1s ease-out}
+.orchestra .conductor.transfering .conductor-icon{box-shadow:0 0 28px #d0a7ff99,0 0 54px #7de1ff33}
+.orchestra .conductor.transfering .brain-symbol{animation-duration:.9s}
+.orchestra .conductor.attention{box-shadow:0 0 46px #ffae5990,inset 0 0 26px #ffbf6a24}
+.orchestra .conductor.attention::after{background:radial-gradient(circle,rgba(255,189,106,.18),transparent 68%)}
+.orchestra .agents{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:34px 58px;max-width:1490px;margin:0 auto;z-index:2;position:relative;padding:20px 18px 28px}
+.orchestra .agent{min-height:178px;padding:16px 18px;position:relative;z-index:2;overflow:hidden;transition:transform .42s ease,box-shadow .42s ease,border-color .42s ease;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 25px color-mix(in srgb,var(--accent) 6%,transparent)}
+.orchestra .agent::before{content:'';position:absolute;inset:auto -10% -48% auto;width:110px;height:110px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%);opacity:.58;filter:blur(8px);pointer-events:none}
+.orchestra .agent::after{content:'';position:absolute;inset:-30% auto -30% -55%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:rotate(12deg) translateX(-210%);opacity:0;pointer-events:none}
+.orchestra .agent:hover{transform:translateY(-2px)}
+.orchestra .agent.active{transform:translateY(-8px) scale(1.012);box-shadow:0 0 34px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent) 13%,transparent)}
+.orchestra .agent.active::after{opacity:1;animation:agentSweep 1.35s linear infinite}
+.orchestra .agent.done .status{color:#62e5bd}
+.orchestra .agent h3{font-size:17px;margin:4px 0}
+.orchestra .agent .agent-symbol{font-size:23px;margin-top:7px;animation:iconFloat 5.5s ease-in-out infinite}
+.orchestra .agent .mini-visual{margin:5px 0;height:27px;font-size:17px;opacity:.95}
+.orchestra .agent .agent-steps{margin:5px 0;min-height:82px}
+.orchestra .agent .agent-step{font-size:10px}
+.orchestra .agent p{font-size:12px}
+.orchestra .agent-bottom .track{height:6px;background:#223650}
+.orchestra .agent-bottom .track i{transition:width .35s ease}
+#agent-data{order:1}#agent-identity{order:2}#agent-history{order:3}#agent-analysis{order:4}#agent-insight{order:5}#agent-verify{order:6}#agent-privacy{order:7}#agent-report{order:8}#agent-quality{order:9}
+#agent-data .bars b{animation:dataBar 1.75s ease-in-out infinite}
+#agent-data .bars b:nth-child(2){animation-delay:.18s}#agent-data .bars b:nth-child(3){animation-delay:.36s}#agent-data .bars b:nth-child(4){animation-delay:.54s}#agent-data .bars b:nth-child(5){animation-delay:.72s}#agent-data .bars b:nth-child(6){animation-delay:.9s}#agent-data .bars b:nth-child(7){animation-delay:1.08s}
+#agent-analysis .spark{animation:analysisSpark 2.4s ease-in-out infinite;letter-spacing:1px}
+#agent-insight .rings{animation:ringsDrift 7.5s ease-in-out infinite}
+#agent-insight .rings span{display:inline-block;animation:insightPulse 2.1s ease-in-out infinite}
+#agent-verify .checkicons{animation:verifyPulse 2.35s ease-in-out infinite}
+#agent-report .reportlines{animation:reportScan 2.6s ease-in-out infinite}
+#agent-identity .mini-visual{animation:identityLink 2.8s ease-in-out infinite;letter-spacing:1px}
+#agent-history .mini-visual{animation:historyLoop 3.7s ease-in-out infinite}
+#agent-privacy .mini-visual{animation:privacyShield 2.9s ease-in-out infinite}
+#agent-quality .mini-visual{animation:qualitySpark 2.4s ease-in-out infinite}
+#agent-data.active .bars b,#agent-analysis.active .spark,#agent-insight.active .rings,#agent-insight.active .rings span,#agent-verify.active .checkicons,#agent-report.active .reportlines,#agent-identity.active .mini-visual,#agent-history.active .mini-visual,#agent-privacy.active .mini-visual,#agent-quality.active .mini-visual{animation-duration:.95s}
+.network-links{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
+#networkSvg{width:100%;height:100%;overflow:visible}
+#networkEdges path{fill:none;stroke:#3e6888;stroke-width:1.55;opacity:.48;vector-effect:non-scaling-stroke;animation:routeGlow 5.5s ease-in-out infinite}
+#networkEdges path.transfer{stroke:#86ecff;stroke-width:3.1;stroke-dasharray:8 12;opacity:1;animation:nextStream .72s linear infinite,routeTransferGlow 1.15s ease-in-out infinite;filter:drop-shadow(0 0 7px #75dafa)}
+#networkEdges path.route-done{stroke:#4cc69f;opacity:.68;filter:drop-shadow(0 0 5px rgba(76,198,159,.35))}
+#networkSignals circle{filter:drop-shadow(0 0 8px #8df3ff)}
+@keyframes nextStream{to{stroke-dashoffset:-40}}
+@keyframes routeGlow{50%{opacity:.72}}
+@keyframes routeTransferGlow{50%{filter:drop-shadow(0 0 12px #9ef4ff)}}
+@keyframes conductorFloat{50%{transform:translateY(-4px)}}
+@keyframes conductorSweep{0%{transform:rotate(18deg) translateX(-160%)}100%{transform:rotate(18deg) translateX(360%)}}
+@keyframes agentSweep{0%{transform:rotate(12deg) translateX(-220%)}100%{transform:rotate(12deg) translateX(360%)}}
+@keyframes iconFloat{50%{transform:translateY(-3px)}}
+@keyframes dataBar{0%,100%{transform:scaleY(.72);opacity:.7}50%{transform:scaleY(1.18);opacity:1}}
+@keyframes analysisSpark{0%,100%{transform:translateX(0);opacity:.78}50%{transform:translateX(4px);opacity:1}}
+@keyframes ringsDrift{50%{transform:translateY(-2px) rotate(4deg)}}
+@keyframes insightPulse{50%{transform:scale(1.16);text-shadow:0 0 10px currentColor}}
+@keyframes verifyPulse{0%,100%{opacity:.75}50%{opacity:1;text-shadow:0 0 14px currentColor}}
+@keyframes reportScan{0%,100%{transform:translateY(0);opacity:.82}50%{transform:translateY(-2px);letter-spacing:4px;opacity:1}}
+@keyframes identityLink{50%{letter-spacing:3px;transform:translateX(2px)}}
+@keyframes historyLoop{50%{transform:translateY(-2px) scale(1.03);opacity:1}}
+@keyframes privacyShield{50%{transform:scale(1.08);text-shadow:0 0 11px currentColor}}
+@keyframes qualitySpark{50%{transform:translateY(-2px) scale(1.08);text-shadow:0 0 10px currentColor}}
+.network-legend{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:11px;color:#99b3d3;padding:2px 10px 14px;position:relative;z-index:2}
+.network-legend strong{color:#d5eaff}
+.next-narrative{text-align:center;color:#d9ebff;font-size:13px;line-height:1.55;margin:4px auto 15px;max-width:880px;text-shadow:0 0 12px rgba(98,167,255,.12)}
+.next-mode{font-size:11px;color:#70dcc3;border:1px solid #255e5c;padding:6px 11px;border-radius:30px;white-space:nowrap}
+@media(max-width:1080px){.orchestra .agents{max-width:1200px;gap:22px 24px;grid-template-columns:repeat(3,minmax(0,1fr))}.orchestra .agent{padding:13px 12px;min-height:170px}.orchestra .agent h3{font-size:15px}}
+@media(max-width:700px){.orchestra .agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.orchestra .agent{min-height:154px}.orchestra .conductor{max-width:100%}.network-links{display:none}.network-legend{justify-content:flex-start}}
+@media(prefers-reduced-motion:reduce){#networkEdges path,#networkEdges path.transfer,.orchestra .conductor,.orchestra .agent .agent-symbol,.orchestra .agent .mini-visual,#agent-data .bars b,#agent-analysis .spark,#agent-insight .rings,#agent-insight .rings span,#agent-verify .checkicons,#agent-report .reportlines,#agent-identity .mini-visual,#agent-history .mini-visual,#agent-privacy .mini-visual,#agent-quality .mini-visual{animation:none!important}.orchestra .agent::after,.orchestra .conductor::before{display:none}}
+
+/* ORCHESTRA NEXT v4 — zichtbare lichtstromen, gebaseerd op de SVG-benadering van de originele Space.
+   Alleen interface: geen wijziging aan de Excel-import, berekeningen of rapportagefuncties. */
+.orchestra{padding:26px 27px 0;isolation:isolate}
+.orchestra .conductor-wrap{margin-bottom:68px;z-index:4}
+.orchestra .conductor{overflow:visible;isolation:isolate;min-width:330px;max-width:100%;position:relative;animation:conductorBreathe 4s ease-in-out infinite}
+.orchestra .conductor::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(180,128,255,.43);border-radius:19px;box-shadow:0 0 18px rgba(168,112,255,.22);pointer-events:none;z-index:-1;animation:conductorRing 3.2s ease-in-out infinite}
+.orchestra .conductor::before{content:"";position:absolute;inset:-17px;border:1px dashed rgba(154,125,255,.24);border-radius:26px;pointer-events:none;opacity:.45;z-index:-1;animation:conductorRing 5.3s ease-in-out infinite reverse}
+.orchestra .conductor .conductor-icon{overflow:visible;box-shadow:0 0 27px rgba(193,151,255,.6);position:relative}
+.orchestra .conductor .conductor-icon::before{inset:-8px;border-width:2.5px;opacity:1}
+.orchestra .conductor .conductor-icon::after{inset:-16px;border-color:#ae86fc;opacity:.7}
+.orchestra .conductor .brain-symbol{animation:brainBreath 2.8s ease-in-out infinite}
+.orchestra .conductor.running{animation:conductorBreathe 2.5s ease-in-out infinite,conductorPulse 1.3s ease-in-out infinite}
+.orchestra .conductor.transfering{border-color:#eee0ff;box-shadow:0 0 48px rgba(180,112,255,.85),0 0 86px rgba(91,204,255,.29),inset 0 0 35px rgba(151,107,255,.34);animation:conductorDispatch .85s ease-out 1,conductorPulse 1.5s infinite}
+.orchestra .conductor.transfering .brain-symbol{filter:drop-shadow(0 0 10px #e5bcff);animation:brainBreath .9s ease-in-out infinite}
+.orchestra .conductor.transfering .conductor-icon::before{animation-duration:.95s;border-top-color:#fff;border-right-color:#80e9ff}
+.orchestra .agents{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:88px clamp(65px,6vw,110px);padding:15px 13px 28px;margin:0 auto}
+.orchestra .agent{min-height:228px;padding:18px 18px 15px;overflow:hidden;transition:transform .28s ease,box-shadow .3s ease,border-color .25s ease}
+.orchestra .agent h3{font-size:18px;margin:7px 0 6px}
+.orchestra .agent .agent-symbol{margin-top:8px}
+.orchestra .agent .agent-steps{display:flex!important;flex-direction:column;gap:6px;min-height:110px;margin:12px 0 0;justify-content:flex-start}
+.orchestra .agent .mini-visual{display:none!important}
+.orchestra .agent .agent-bottom{display:none!important}
+.orchestra .agent .agent-step{font-size:11px;line-height:1.4;min-height:19px;color:#9ab2d1;display:flex;gap:7px;animation:lineAppear .27s ease both}
+.orchestra .agent .agent-step .step-mark{width:16px;height:16px;font-size:10px;flex:none;margin-top:1px}
+.orchestra .agent .agent-step.current{color:#f4faff}
+.orchestra .agent .agent-step.complete{color:#c5efe1}
+.orchestra .agent .agent-step.skipped{color:#ffd39b}
+.orchestra .agent.active{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 0 31px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent) 13%,transparent)}
+.orchestra .agent.active::after{animation:agentSweep 1.15s ease-in-out infinite;opacity:1}
+.orchestra .agent.completed-pulse{animation:agentComplete .55s ease-out 1}
+.orchestra .agent .agent-symbol{animation:iconFloat 3.4s ease-in-out infinite}
+.network-links{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
+#networkSvg{display:block;width:100%;height:100%;overflow:hidden}
+#networkEdges .network-base{fill:none;stroke:#486f94;stroke-width:2;opacity:.7;vector-effect:non-scaling-stroke;animation:none}
+#networkEdges .network-complete{fill:none;stroke:#50cead;stroke-width:2.1;opacity:.47;vector-effect:non-scaling-stroke;animation:none}
+#networkEdges .network-active{fill:none;stroke:#83e9ff;stroke-width:3.4;stroke-dasharray:9 14;opacity:1;vector-effect:non-scaling-stroke;animation:networkChase .72s linear infinite;filter:drop-shadow(0 0 6px #5addff)}
+#networkEdges .network-active-glow{fill:none;stroke:#80dfff;stroke-width:10;opacity:.21;vector-effect:non-scaling-stroke;filter:blur(3px)}
+#networkSignals .network-orb{fill:#e5ffff;stroke:#70eaff;stroke-width:1.5;filter:drop-shadow(0 0 9px #6deeff)}
+#networkSignals .network-orb-halo{fill:#6feaff;opacity:.27;filter:blur(4px)}
+.network-legend{margin-top:7px}
+@keyframes networkChase{to{stroke-dashoffset:-46}}
+@keyframes conductorBreathe{50%{filter:brightness(1.16)}}
+@keyframes conductorRing{50%{box-shadow:0 0 27px rgba(189,147,255,.56);opacity:.96;transform:scale(1.022)}}
+@keyframes conductorDispatch{0%,100%{transform:scale(1)}45%{transform:scale(1.045) translateY(-3px)}}
+@keyframes agentComplete{0%{filter:brightness(1)}45%{filter:brightness(1.6)}100%{filter:brightness(1)}}
+@keyframes lineAppear{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
+@media(max-width:1120px){.orchestra .agents{gap:65px 34px}.orchestra .agent{min-height:235px;padding:12px}.orchestra .agent h3{font-size:15px}}
+@media(max-width:760px){.orchestra .agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 15px}.orchestra .conductor-wrap{margin-bottom:38px}.orchestra .agent{min-height:248px}.orchestra .agent .agent-step{font-size:10px}.network-links{display:none}}
+@media(max-width:470px){.orchestra .agents{grid-template-columns:1fr}.orchestra .agent{min-height:185px}.orchestra .conductor{width:100%;min-width:0}}
+/* Neutraliseer oudere pseudo-elementafmetingen; anders verschijnt links een vreemd schuin vlak. */
+.orchestra .conductor::before{inset:-17px!important;left:-17px!important;right:-17px!important;top:-17px!important;bottom:-17px!important;width:auto!important;height:auto!important;background:none!important;transform:none!important;filter:none!important}
+.orchestra .conductor::after{inset:-8px!important;left:-8px!important;right:-8px!important;top:-8px!important;bottom:-8px!important;width:auto!important;height:auto!important;background:none!important;transform:none!important;filter:none!important}
+@media(prefers-reduced-motion:reduce){.orchestra .conductor,.orchestra .conductor::before,.orchestra .conductor::after,.orchestra .conductor.transfering,.orchestra .agent .agent-symbol,.orchestra .agent .agent-step,.orchestra .agent.active::after,#networkEdges .network-active,.orchestra .agent.completed-pulse{animation:none!important}#networkSignals{display:none}}
+
 </style></head>
 <body>
 <div class="app">
  <main class="main">
-  <header><div class="header-copy"><div class="eyebrow">REAKT / AI ANALYTICS PLATFORM</div><h1>Inloop <span>Intelligence</span> <em>ORCHESTRA</em></h1><p>Een intelligente blik op ontwikkeling, kwaliteit en herstelondersteunende inloop</p></div><div class="orchestra-hero-title" aria-label="ORCHESTRA by Marcel Ooms"><span class="orchestra-hero-word">ORCHESTRA</span><span class="orchestra-hero-credit">by Marcel Ooms</span></div><div class="header-center-logo"><div class="reakt-wordmark" role="img" aria-label="Reakt — Werken aan je toekomst"><strong class="reakt-name">Reakt</strong><span class="reakt-tagline">Werken aan je toekomst</span></div></div><div class="header-actions"><span class="pill"><i></i> LOKALE ANALYSE</span><span class="clock" id="clock"></span></div></header>
-  <div class="topbar"><div><span class="section-kicker">CONTROL CENTER</span><h2>Multi-Agent Orchestration <span class="live-dot"></span></h2></div><div class="actions"><label class="pace-label" for="paceSelect">Weergave <select id="paceSelect" aria-label="Animatiesnelheid"><option value="presentation">Presentatie ± 30 sec</option><option value="fast">Snel ± 6 sec</option></select></label><button id="resetBtn" class="ghost">↺ Reset</button><button id="startBtn" class="primary">▶ Start demo-analyse</button></div></div>
+  <header><div class="header-copy"><div class="eyebrow">REAKT / AI ANALYTICS PLATFORM</div><h1>Inloop <span>Intelligence</span> <em>ORCHESTRA</em></h1><p>Maak complexe informatie begrijpelijk en toegankelijk voor iedereen.</p></div><div class="orchestra-hero-title" aria-label="ORCHESTRA by Marcel Ooms"><span class="orchestra-hero-word">ORCHESTRA</span><span class="orchestra-hero-credit">by Marcel Ooms</span></div><div class="header-center-logo"><div class="reakt-wordmark" role="img" aria-label="Reakt — Werken aan je toekomst"><strong class="reakt-name">Reakt</strong><span class="reakt-tagline">Werken aan je toekomst</span></div></div><div class="header-actions"><span class="pill"><i></i> LOKALE ANALYSE</span><span class="clock" id="clock"></span></div></header>
+  <div class="topbar"><div><span class="section-kicker">CONTROL CENTER</span><h2>Agent Command Center <span class="live-dot"></span></h2></div><div class="actions"><label class="pace-label" for="paceSelect">Weergave <select id="paceSelect" aria-label="Animatiesnelheid"><option value="presentation">Presentatie ± 30 sec</option><option value="fast">Snel ± 6 sec</option></select></label><button id="resetBtn" class="ghost">↺ Reset</button><button id="startBtn" class="primary">▶ Start voorbeeldanalyse</button></div></div>
    <section class="import-panel panel" aria-label="Lokale Excelanalyse met 2026 en historische referentie 2025">
-     <div class="import-intro"><span class="section-kicker">V1.6.2 · GECORRIGEERDE REKENREGELS</span><strong>Scanregistratie 2026 + referentie 2025</strong><small>Browser-lokale analyse · alle bronlocaties · geen bestanden in Space-repository</small></div>
+     <div class="import-intro"><span class="section-kicker">ORCHESTRA NEXT · BROWSER-LOKAAL</span><strong>Scanregistratie 2026 + referentie 2025</strong><small>Browser-lokale analyse · alle bronlocaties · geen bestanden in Space-repository</small></div>
      <label class="import-file-label" for="scanFile"><span>▤</span> Rapportage 2026 (.xlsx)</label><input type="file" id="scanFile" accept=".xlsx" aria-label="Rapportagebestand januari tot en met september 2026" />
      <label class="import-file-label history-label" for="historyFile"><span>◴</span> Historie 2025 (.xlsx)</label><input type="file" id="historyFile" accept=".xlsx" aria-label="Historisch referentiebestand 2025" disabled/>
      <label class="site-label" for="siteSelect">Locatie</label><select id="siteSelect" disabled><option value="*">Alle locaties</option></select>
@@ -241,16 +373,20 @@
      <div id="historyStatus" class="history-status">◴ Historie 2025 nog niet geladen. Zonder deze referentie zijn instroomcijfers voorlopig.</div>
    </section>
   <section class="orchestra panel">
-   <div class="mesh"></div><div class="conductor-wrap"><div class="conductor" id="conductor"><div class="conductor-glow"></div><div class="conductor-icon" aria-hidden="true"><svg class="brain-symbol" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c-2.7-3.2-7.4-.9-7.1 2.4C2 9 2 13.6 5 15.2c-.7 4.4 4.9 6.8 7 2.6M12 5c2.7-3.2 7.4-.9 7.1 2.4 2.9 1.6 2.9 6.2-.1 7.8.7 4.4-4.9 6.8-7 2.6M12 5v13"/><path d="M6.6 10.1 9 12v3M17.4 10.1 15 12v3"/><circle cx="9" cy="15.5" r=".9" fill="currentColor" stroke="none"/><circle cx="15" cy="15.5" r=".9" fill="currentColor" stroke="none"/></svg></div><div><small>MASTER ORCHESTRATOR</small><strong>THE CONDUCTOR</strong><span id="conductorStatus">Gereed voor analyse</span></div><div class="conductor-indicator"></div></div></div>
-   <svg class="connections" viewBox="0 0 1000 128" preserveAspectRatio="none" aria-hidden="true"><path class="stem" d="M500 0 V30 H100 V90 M500 30 H300 V90 M500 30 V90 M500 30 H700 V90 M500 30 H900 V90"/><path class="flowline" d="M500 0 V30 H100 V90 M500 30 H300 V90 M500 30 V90 M500 30 H700 V90 M500 30 H900 V90"/><g class="signal-layer" aria-hidden="true"></g></svg>
+   <div class="mesh"></div><p class="next-narrative">Van ruwe scangegevens naar helder inzicht · volg taakverdeling, gegevensoverdracht en controles onder de motorkap.</p><div class="conductor-wrap"><div class="conductor" id="conductor"><div class="conductor-glow"></div><div class="conductor-icon" aria-hidden="true"><svg class="brain-symbol" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5c-2.7-3.2-7.4-.9-7.1 2.4C2 9 2 13.6 5 15.2c-.7 4.4 4.9 6.8 7 2.6M12 5c2.7-3.2 7.4-.9 7.1 2.4 2.9 1.6 2.9 6.2-.1 7.8.7 4.4-4.9 6.8-7 2.6M12 5v13"/><path d="M6.6 10.1 9 12v3M17.4 10.1 15 12v3"/><circle cx="9" cy="15.5" r=".9" fill="currentColor" stroke="none"/><circle cx="15" cy="15.5" r=".9" fill="currentColor" stroke="none"/></svg></div><div><small>MASTER ORCHESTRATOR</small><strong>THE CONDUCTOR</strong><span id="conductorStatus">Gereed voor analyse</span></div><div class="conductor-indicator"></div></div></div>
+   <div class="network-links" aria-hidden="true"><svg id="networkSvg" preserveAspectRatio="none"><g id="networkEdges"></g><g id="networkSignals"></g></svg></div>
    <div class="agents">
     <article class="agent" id="agent-data" style="--accent:#34e6b3"><div class="agent-top"><span>01 / DATA</span><span class="status">STANDBY</span></div><div class="agent-symbol">▤</div><h3>Data Agent</h3><p>Structuur & kwaliteit</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual bars"><b></b><b></b><b></b><b></b><b></b><b></b><b></b></div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
-    <article class="agent" id="agent-analysis" style="--accent:#ffcb62"><div class="agent-top"><span>02 / ANALYSE</span><span class="status">STANDBY</span></div><div class="agent-symbol">⌁</div><h3>Analysis Agent</h3><p>Trends & vergelijkingen</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual spark">▁ ▃ ▂ ▅ ▄ ▆ ▇</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
-    <article class="agent" id="agent-insight" style="--accent:#51b9ff"><div class="agent-top"><span>03 / INZICHT</span><span class="status">STANDBY</span></div><div class="agent-symbol">✦</div><h3>Insight Agent</h3><p>Signalen & duiding</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual rings">◎ <span>◉</span> ◎</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
-    <article class="agent" id="agent-verify" style="--accent:#b18aff"><div class="agent-top"><span>04 / CONTROLE</span><span class="status">STANDBY</span></div><div class="agent-symbol">⬡</div><h3>Verification Agent</h3><p>Schaduwberekeningen</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual checkicons">✓ &nbsp; ✓ &nbsp; ! &nbsp; ✓</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
-    <article class="agent" id="agent-report" style="--accent:#ff9a65"><div class="agent-top"><span>05 / RAPPORT</span><span class="status">STANDBY</span></div><div class="agent-symbol">▧</div><h3>Report Agent</h3><p>Infographic & export</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual reportlines">▰▰▰▰▰<br>▰▰▰▰<br>▰▰▰</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+    <article class="agent" id="agent-analysis" style="--accent:#ffcb62"><div class="agent-top"><span>04 / ANALYSE</span><span class="status">STANDBY</span></div><div class="agent-symbol">⌁</div><h3>Analysis Agent</h3><p>Trends & vergelijkingen</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual spark">▁ ▃ ▂ ▅ ▄ ▆ ▇</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+    <article class="agent" id="agent-insight" style="--accent:#51b9ff"><div class="agent-top"><span>06 / TREND</span><span class="status">STANDBY</span></div><div class="agent-symbol">✦</div><h3>Trend Agent</h3><p>Maandpatronen & duiding</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual rings">◎ <span>◉</span> ◎</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+    <article class="agent" id="agent-verify" style="--accent:#b18aff"><div class="agent-top"><span>07 / CONTROLE</span><span class="status">STANDBY</span></div><div class="agent-symbol">⬡</div><h3>Verification Agent</h3><p>Schaduwberekeningen</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual checkicons">✓ &nbsp; ✓ &nbsp; ! &nbsp; ✓</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+    <article class="agent" id="agent-report" style="--accent:#ff9a65"><div class="agent-top"><span>09 / RAPPORT</span><span class="status">STANDBY</span></div><div class="agent-symbol">▧</div><h3>Report Agent</h3><p>Infographic & export</p><div class="agent-steps" aria-live="polite" aria-label="Werkstappen"></div><div class="mini-visual reportlines">▰▰▰▰▰<br>▰▰▰▰<br>▰▰▰</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+     <article class="agent" id="agent-identity" style="--accent:#53d5ec"><div class="agent-top"><span>02 / IDENTITEIT</span><span class="status">STANDBY</span></div><div class="agent-symbol">⛓</div><h3>Identity Agent</h3><p>Pas- en cliëntkoppelingen</p><div class="agent-steps" aria-live="polite"></div><div class="mini-visual">◎ ↔ ◎</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+     <article class="agent" id="agent-history" style="--accent:#60bafa"><div class="agent-top"><span>03 / HISTORIE</span><span class="status">STANDBY</span></div><div class="agent-symbol">◷</div><h3>History Agent</h3><p>Referentie 2025</p><div class="agent-steps" aria-live="polite"></div><div class="mini-visual">2025 ↔ 2026</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+     <article class="agent" id="agent-privacy" style="--accent:#f28cbd"><div class="agent-top"><span>08 / PRIVACY</span><span class="status">STANDBY</span></div><div class="agent-symbol">◇</div><h3>Privacy Agent</h3><p>Lokale verwerkingsroute</p><div class="agent-steps" aria-live="polite"></div><div class="mini-visual">◈ ⛨ ◈</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
+     <article class="agent" id="agent-quality" style="--accent:#ea88e9"><div class="agent-top"><span>10 / KWALITEIT</span><span class="status">STANDBY</span></div><div class="agent-symbol">✧</div><h3>Quality Agent</h3><p>Rapportagestatus</p><div class="agent-steps" aria-live="polite"></div><div class="mini-visual">✓ / !</div><div class="agent-bottom"><div class="track"><i></i></div><span class="percent">0%</span></div></article>
    </div>
-   <div class="orchestra-footer"><span><i class="dot green"></i> Systeem gereed</span><span id="flowState">Wacht op startcommando</span><span>◌ <span id="completed">0</span> / 5 agenten voltooid</span></div>
+   <div class="orchestra-footer"><span><i class="dot green"></i> Systeem gereed</span><span id="flowState">Wacht op startcommando</span><span>◌ <span id="completed">0</span> / 9 agenten voltooid</span></div>
   </section>
   <div class="content-grid">
    <div class="left-content">
@@ -304,14 +440,14 @@ window.addEventListener('error', function(event){
 'use strict';
 let demoData=null, running=false, completed=0;
 const $=id=>document.getElementById(id);
-const ids=['data','analysis','insight','verify','report'];
+const ids=['data','identity','history','analysis','insight','verify','privacy','report','quality'];
 const sleep=ms=>new Promise(resolve=>setTimeout(resolve,ms));
 const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 function clock(){ $('clock').textContent=new Intl.DateTimeFormat('nl-NL',{hour:'2-digit',minute:'2-digit',day:'numeric',month:'short'}).format(new Date()); }
 clock();setInterval(clock,60000);
 function renderKPIs(data){$('kpis').innerHTML=data.kpis.map(k=>`<div class="kpi"><small>${escapeHTML(k.label)}</small><strong>${escapeHTML(k.value)}</strong><span>${escapeHTML(k.change)}</span></div>`).join('');}
 function renderChecks(data){$('checks').innerHTML=data.checks.map(c=>{const delta=c.ours-c.shadow;return `<div class="check-row"><span>${escapeHTML(c.label)}</span><span>${c.ours.toLocaleString('nl-NL')} / ${c.shadow.toLocaleString('nl-NL')} &nbsp; <strong class="${delta?'bad':''}">${delta?'⚠ '+(delta>0?'+':'')+delta:'✓ 0'}</strong></span></div>`}).join('');}
-function drawChart(data){const canvas=$('chart'),ctx=canvas.getContext('2d'),w=640,h=250;ctx.clearRect(0,0,w,h);ctx.font='13px Segoe UI';ctx.textAlign='left';const max=500;for(let i=0;i<=4;i++){let y=25+i*45;ctx.strokeStyle='#29405a';ctx.beginPath();ctx.moveTo(44,y);ctx.lineTo(w-15,y);ctx.stroke();ctx.fillStyle='#8298b4';ctx.fillText(String(Math.round(max*(4-i)/4)),5,y+4);}const cols=['#3ee1b6','#ffc66a','#5b9cff','#ad88ff'];data.locations.forEach((loc,index)=>{ctx.strokeStyle=cols[index];ctx.lineWidth=3;ctx.beginPath();loc.visits.forEach((v,j)=>{const x=72+(result.months.length===1?0:j*(w-105)/(result.months.length-1)),y=205-(v/max)*180;if(j===0)ctx.moveTo(x,y);else ctx.lineTo(x,y)});ctx.stroke();loc.visits.forEach((v,j)=>{const x=72+(result.months.length===1?0:j*(w-105)/(result.months.length-1)),y=205-(v/max)*180;ctx.fillStyle=cols[index];ctx.beginPath();ctx.arc(x,y,4,0,Math.PI*2);ctx.fill()})});ctx.textAlign='center';ctx.fillStyle='#a6b9d0';['JUL','AUG','SEP'].forEach((m,i)=>ctx.fillText(m,72+(result.months.length===1?0:i*(w-105)/(result.months.length-1)),239));}
+function drawChart(data){const canvas=$('chart'),ctx=canvas.getContext('2d'),w=640,h=250;ctx.clearRect(0,0,w,h);ctx.font='13px Segoe UI';ctx.textAlign='left';const max=500;for(let i=0;i<=4;i++){let y=25+i*45;ctx.strokeStyle='#29405a';ctx.beginPath();ctx.moveTo(44,y);ctx.lineTo(w-15,y);ctx.stroke();ctx.fillStyle='#8298b4';ctx.fillText(String(Math.round(max*(4-i)/4)),5,y+4);}const cols=['#3ee1b6','#ffc66a','#5b9cff','#ad88ff'];data.locations.forEach((loc,index)=>{ctx.strokeStyle=cols[index];ctx.lineWidth=3;ctx.beginPath();loc.visits.forEach((v,j)=>{const x=72+(loc.visits.length===1?0:j*(w-105)/(loc.visits.length-1)),y=205-(v/max)*180;if(j===0)ctx.moveTo(x,y);else ctx.lineTo(x,y)});ctx.stroke();loc.visits.forEach((v,j)=>{const x=72+(loc.visits.length===1?0:j*(w-105)/(loc.visits.length-1)),y=205-(v/max)*180;ctx.fillStyle=cols[index];ctx.beginPath();ctx.arc(x,y,4,0,Math.PI*2);ctx.fill()})});ctx.textAlign='center';ctx.fillStyle='#a6b9d0';['JUL','AUG','SEP'].forEach((m,i)=>ctx.fillText(m,72+(3===1?0:i*(w-105)/2),239));}
 function log(text){const now=new Date().toLocaleTimeString('nl-NL',{hour:'2-digit',minute:'2-digit',second:'2-digit'});if($('logs').querySelector('.muted'))$('logs').innerHTML='';$('logs').insertAdjacentHTML('afterbegin',`<div class="logitem"><time>${now}</time>${escapeHTML(text)}</div>`)}
 // De lichtpunten volgen de vijf bestaande SVG-verbindingen. Ze lopen alleen tijdens een actieve processtap.
 const signalPaths={data:'M500 0 V30 H100 V90',analysis:'M500 0 V30 H300 V90',insight:'M500 0 V90',verify:'M500 0 V30 H700 V90',report:'M500 0 V30 H900 V90'};
@@ -791,8 +927,8 @@ function drawImportedChart(result){
  const colors=['#3ee1b6','#ffc66a','#5b9cff','#ad88ff'];
  series.forEach((loc,li)=>{
   ctx.strokeStyle=colors[li];ctx.lineWidth=3;ctx.beginPath();
-  loc.visits.forEach((v,j)=>{const x=72+(result.months.length===1?0:j*(w-105)/(result.months.length-1)),y=205-(v/max)*180;j===0?ctx.moveTo(x,y):ctx.lineTo(x,y)});ctx.stroke();
-  loc.visits.forEach((v,j)=>{const x=72+(result.months.length===1?0:j*(w-105)/(result.months.length-1)),y=205-(v/max)*180;ctx.fillStyle=colors[li];ctx.beginPath();ctx.arc(x,y,4,0,Math.PI*2);ctx.fill()});
+  loc.visits.forEach((v,j)=>{const x=72+(loc.visits.length===1?0:j*(w-105)/(loc.visits.length-1)),y=205-(v/max)*180;j===0?ctx.moveTo(x,y):ctx.lineTo(x,y)});ctx.stroke();
+  loc.visits.forEach((v,j)=>{const x=72+(loc.visits.length===1?0:j*(w-105)/(loc.visits.length-1)),y=205-(v/max)*180;ctx.fillStyle=colors[li];ctx.beginPath();ctx.arc(x,y,4,0,Math.PI*2);ctx.fill()});
  });ctx.fillStyle='#a6b9d0';ctx.textAlign='center';
  result.months.forEach((m,i)=>ctx.fillText(m,72+(result.months.length===1?0:i*(w-105)/(result.months.length-1)),239));
  const legend=document.querySelector('.legend');
@@ -894,7 +1030,7 @@ $('scanFile').addEventListener('change',async e=>{
   $('startBtn').textContent='▶ Analyseer Excelbestand';
   $('flowState').textContent='Excelbestand lokaal ingelezen · start de analyse';
   log('Excelbestand lokaal verwerkt; analyse moet nog starten. Voor echte data eerst interne toestemming controleren.');
- }catch(err){$('startBtn').textContent='▶ Start demo-analyse';state.textContent='⚠ '+err.message;$('siteSelect').disabled=true;$('periodSelect').disabled=true;$('periodType').disabled=true;log('Excel-proef: '+err.message)}finally{$('startBtn').disabled=false}
+ }catch(err){$('startBtn').textContent='▶ Start voorbeeldanalyse';state.textContent='⚠ '+err.message;$('siteSelect').disabled=true;$('periodSelect').disabled=true;$('periodType').disabled=true;log('Excel-proef: '+err.message)}finally{$('startBtn').disabled=false}
 });
  $('historyFile').addEventListener('change',async e=>{
   const file=e.target.files?.[0];if(!file||!importedData)return;
@@ -1118,4 +1254,242 @@ function compareController(){
 $('controllerCompare').addEventListener('click',compareController);
 $('controllerClear').addEventListener('click',()=>resetControllerComparison(true));
 controllerDefs.forEach(([,id])=>$(id).addEventListener('input',()=>{if(controllerComparison)resetControllerComparison(false)}));
+
+
+// ORCHESTRA NEXT v4. De concrete rekenfuncties hierboven blijven ongewijzigd.
+// De netwerkpaden worden aan de kaartRANDEN gekoppeld, niet achter het midden van de kaart.
+// Bewegende lichtpunten gebruiken requestAnimationFrame/getPointAtLength: zichtbaar in moderne browsers,
+// zonder afhankelijkheid van SVG animateMotion. De wachttijd is presentatie; echte rekentijd meten we apart.
+const nextRoutes=[
+ ['conductor','identity'],['data','identity'],['identity','history'],
+ ['data','analysis'],['identity','insight'],['history','verify'],
+ ['analysis','insight'],['insight','verify'],['analysis','privacy'],
+ ['insight','report'],['verify','quality'],['privacy','report'],['report','quality']
+];
+const nextIds=['data','identity','history','analysis','insight','verify','privacy','report','quality'];
+const nextRouteMap=new Map();
+let nextActiveKeys=[],nextFinishedKeys=[],nextAnimationFrame=0,nextAnimationStart=0,nextSignalCircles=[],nextIsRunning=false,nextTransferTimeout=0;
+const nextMotionDisabled=()=>window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const nextAgentElement=id=>id==='conductor'?$('conductor'):$('agent-'+id);
+const nextRouteKey=(a,b)=>a+'>'+b;
+const nextWait=ms=>new Promise(resolve=>setTimeout(resolve,ms));
+const nextShowCount=()=>{$('completed').textContent=String(nextIds.filter(id=>$('agent-'+id).classList.contains('done')).length)};
+function nextPathFor(a,b,frame){
+ const acx=(a.left+a.right)/2,acy=(a.top+a.bottom)/2,bcx=(b.left+b.right)/2,bcy=(b.top+b.bottom)/2;
+ const sameRow=Math.abs(acy-bcy)<Math.min(a.height,b.height)*.58;
+ let x1,y1,x2,y2;
+ if(sameRow){const towardsRight=bcx>=acx;x1=towardsRight?a.right:a.left;y1=acy;x2=towardsRight?b.left:b.right;y2=bcy;
+   const bend=Math.min(20,Math.abs(x2-x1)*.15);return `M ${x1-frame.left} ${y1-frame.top} C ${x1-frame.left+(towardsRight?bend:-bend)} ${y1-frame.top-10},${x2-frame.left-(towardsRight?bend:-bend)} ${y2-frame.top+10},${x2-frame.left} ${y2-frame.top}`;}
+ const downward=bcy>=acy;
+ x1=acx;y1=downward?a.bottom:a.top;x2=bcx;y2=downward?b.top:b.bottom;
+ const mid=(y1+y2)/2;
+ return `M ${x1-frame.left} ${y1-frame.top} C ${x1-frame.left} ${mid-frame.top},${x2-frame.left} ${mid-frame.top},${x2-frame.left} ${y2-frame.top}`;
+}
+function nextMakeSvg(tag,attrs={},className=''){
+ const n=document.createElementNS('http://www.w3.org/2000/svg',tag);
+ Object.entries(attrs).forEach(([k,v])=>n.setAttribute(k,String(v)));
+ if(className)n.setAttribute('class',className);
+ return n;
+}
+function nextBuildGraph(){
+ const root=document.querySelector('.orchestra'),svg=$('networkSvg'),edge=$('networkEdges');
+ if(!root||!svg||!edge)return;
+ const frame=root.getBoundingClientRect();if(!frame.width||!frame.height)return;
+ svg.setAttribute('viewBox',`0 0 ${frame.width} ${frame.height}`);
+ edge.replaceChildren();nextRouteMap.clear();
+ for(const [from,to] of nextRoutes){
+  const a=nextAgentElement(from)?.getBoundingClientRect(),b=nextAgentElement(to)?.getBoundingClientRect();
+  if(!a||!b)continue;
+  const d=nextPathFor(a,b,frame),key=nextRouteKey(from,to);
+  const base=nextMakeSvg('path',{d},'network-base');base.dataset.route=key;edge.appendChild(base);
+  const glow=nextMakeSvg('path',{d},'network-active-glow');glow.dataset.route=key;edge.appendChild(glow);
+  const flow=nextMakeSvg('path',{d},'network-active');flow.dataset.route=key;edge.appendChild(flow);
+  nextRouteMap.set(key,{base,glow,flow,length:0});
+ }
+ nextDrawRouteStates();
+}
+function nextDrawRouteStates(){
+ for(const [key,r] of nextRouteMap){
+  const active=nextActiveKeys.includes(key),done=nextFinishedKeys.includes(key);
+  r.base.setAttribute('class',done?'network-complete':'network-base');
+  r.glow.style.display=active?'':'none';r.flow.style.display=active?'':'none';
+ }
+ nextBuildOrbs();
+}
+function nextBuildOrbs(){
+ const layer=$('networkSignals');if(!layer)return;
+ if(nextAnimationFrame)cancelAnimationFrame(nextAnimationFrame);
+ nextAnimationFrame=0;nextSignalCircles=[];layer.replaceChildren();
+ if(!nextActiveKeys.length||nextMotionDisabled()||!document.querySelector('.orchestra.running'))return;
+ for(const key of nextActiveKeys){
+  const r=nextRouteMap.get(key);if(!r)continue;
+  try{r.length=r.flow.getTotalLength()}catch(e){continue}
+  if(!r.length)continue;
+  for(let j=0;j<2;j++){
+   const halo=nextMakeSvg('circle',{r:13,cx:0,cy:0},'network-orb-halo');
+   const dot=nextMakeSvg('circle',{r:4.3,cx:0,cy:0},'network-orb');
+   layer.append(halo,dot);nextSignalCircles.push({r,halo,dot,offset:j*.52});
+  }
+ }
+ nextAnimationStart=performance.now();
+ if(nextSignalCircles.length)nextAnimationFrame=requestAnimationFrame(nextTickOrbs);
+}
+function nextTickOrbs(now){
+ const ms=$('paceSelect').value==='fast'?560:1450;
+ for(const o of nextSignalCircles){
+  const progress=((now-nextAnimationStart)/ms+o.offset)%1;
+  const p=o.r.flow.getPointAtLength(o.r.length*progress);
+  o.halo.setAttribute('cx',p.x);o.halo.setAttribute('cy',p.y);
+  o.dot.setAttribute('cx',p.x);o.dot.setAttribute('cy',p.y);
+ }
+ nextAnimationFrame=requestAnimationFrame(nextTickOrbs);
+}
+function nextConductorSignal(){
+ const c=$('conductor');if(!c)return;
+ clearTimeout(nextTransferTimeout);c.classList.remove('transfering');
+ // Herstart de CSS-puls betrouwbaar bij elke OVERDRACHT, ook bij opeenvolgende overdrachten.
+ void c.offsetWidth;c.classList.add('transfering');
+ nextTransferTimeout=setTimeout(()=>c.classList.remove('transfering'),$('paceSelect').value==='fast'?500:1000);
+}
+function nextRoutesActive(pairs=[]){
+ nextActiveKeys=pairs.map(([a,b])=>nextRouteKey(a,b)).filter(k=>nextRouteMap.has(k));
+ nextDrawRouteStates();
+ if(nextActiveKeys.length)nextConductorSignal();
+}
+function nextLines(id,lines,doneIndex=-1,warning=false){
+ const card=$('agent-'+id),wrap=card.querySelector('.agent-steps');card.classList.add('has-steps');wrap.replaceChildren();
+ lines.forEach((line,i)=>{
+  const item=document.createElement('div');item.className='agent-step '+(i<=doneIndex?(warning?'skipped':'complete'):i===doneIndex+1?'current':'');
+  const mark=document.createElement('span');mark.className='step-mark';mark.textContent=i<=doneIndex?(warning?'!':'✓'):i===doneIndex+1?'◌':'·';
+  const txt=document.createElement('span');txt.textContent=line;
+  item.append(mark,txt);wrap.appendChild(item);
+ });
+}
+function nextSetStatus(id,value){
+ const card=$('agent-'+id);card.classList.toggle('active',value==='active');card.classList.toggle('done',value==='done'||value==='warning');
+ card.querySelector('.status').textContent={active:'ACTIEF',done:'GEREED',warning:'LET OP',skipped:'NIET BESCHIKBAAR',idle:'STANDBY'}[value]||'STANDBY';
+}
+function nextInitCards(){
+ for(const id of nextIds){
+  const card=$('agent-'+id);card.classList.remove('has-steps','active','done','completed-pulse');
+  nextSetStatus(id,'idle');
+  nextLines(id,['Wacht op lokale analyse','Werkstappen verschijnen hier','Overdracht wordt zichtbaar'], -2);
+ }
+ nextShowCount();
+}
+async function nextPhase(id,lines,routes=[],warning=false){
+ nextSetStatus(id,'active');nextLines(id,lines,-1,false);
+ nextRoutesActive(routes);
+ $('conductorStatus').textContent='Overdracht · '+$('agent-'+id).querySelector('h3').textContent;
+ $('flowState').textContent=lines[0];
+ log('Procesweergave: '+$('agent-'+id).querySelector('h3').textContent);
+ const phaseDuration=$('paceSelect').value==='fast'?650:3300;
+ const durationStep=phaseDuration/lines.length;
+ for(let i=0;i<lines.length;i++){
+  await nextWait(durationStep);
+  nextLines(id,lines,i,false);
+  $('flowState').textContent=lines[i];
+ }
+ for(const key of nextActiveKeys)if(!nextFinishedKeys.includes(key))nextFinishedKeys.push(key);
+ nextSetStatus(id,warning?'warning':'done');nextLines(id,lines,lines.length-1,warning);
+ const card=$('agent-'+id);card.classList.remove('completed-pulse');void card.offsetWidth;card.classList.add('completed-pulse');
+ log((warning?'Aandacht: ':'Afgerond: ')+id+' · '+lines.at(-1));
+ nextShowCount();
+}
+function nextClearNetwork(reset=false){
+ nextActiveKeys=[];if(reset)nextFinishedKeys=[];
+ clearTimeout(nextTransferTimeout);$('conductor').classList.remove('transfering');
+ if(nextAnimationFrame)cancelAnimationFrame(nextAnimationFrame);nextAnimationFrame=0;
+ nextSignalCircles=[];$('networkSignals')?.replaceChildren();nextDrawRouteStates();
+}
+function nextResetUI(){nextClearNetwork(true);nextInitCards();requestAnimationFrame(nextBuildGraph)}
+const nextOriginalReset=reset;
+reset=function(){nextOriginalReset();nextResetUI()};
+$('resetBtn').removeEventListener('click',nextOriginalReset);
+$('resetBtn').addEventListener('click',reset);
+const nextOriginalStart=start;
+async function nextStartImported(){
+ if(running||!importedData)return;
+ running=true;nextIsRunning=true;$('startBtn').disabled=true;$('resetBtn').disabled=true;
+ const conductor=$('conductor');conductor.classList.remove('attention');conductor.classList.add('running');
+ document.querySelector('.orchestra').classList.add('running');
+ $('logs').replaceChildren();$('logStatus').textContent='Weergave actief';
+ nextFinishedKeys=[];nextInitCards();nextBuildGraph();
+ const timestamp=performance.now(),fmt=n=>Number(n||0).toLocaleString('nl-NL');let cpu=0;
+ try{
+  await nextPhase('data',[
+   'Bestand 2026 eerder lokaal ingelezen',
+   fmt(importedData.rawCount)+' bronregels beoordeeld bij het inlezen',
+   importedData.sites.length+' inlooplocaties herkend'
+  ],[['conductor','identity'],['data','identity']]);
+  const t1=performance.now();
+  const result=calculateImported($('siteSelect').value);
+  cpu+=performance.now()-t1;
+  await nextPhase('identity',[
+   'Pas- en cliëntkoppelingen toegepast',
+   fmt(result.multiPassClients)+' cliënten met meerdere passen gesignaleerd',
+   'Herhaalde scans apart geteld: '+fmt(result.duplicates)
+  ],[['data','identity'],['identity','history']]);
+  await nextPhase('history',result.historyLoaded?[
+   'Historische referentie 2025 gebruikt',
+   fmt(result.correctedExisting)+' cliënten uit 2025 herkend',
+   'Eerste registraties over jaren vergeleken'
+  ]:[
+   'Geen referentiebestand 2025 geladen',
+   'Eerdere bezoeken zijn niet volledig te toetsen',
+   'Nieuwe instroom blijft voorlopig'
+  ],[['identity','history'],['history','verify']],!result.historyLoaded);
+  await nextPhase('analysis',[
+   fmt(result.rows)+' scans in de geselecteerde periode',
+   fmt(result.visits)+' unieke bezoekdagen vastgesteld',
+   fmt(result.active)+' actieve cliënten berekend'
+  ],[['data','analysis'],['identity','insight']]);
+  await nextPhase('insight',[
+   result.months.length+' maandperioden verwerkt',
+   'Getelde trends beschikbaar voor de grafiek',
+   'Geen AI-duiding: alleen feitelijke patronen'
+  ],[['analysis','insight'],['insight','verify']]);
+  const v=performance.now();result.verification=independentlyVerify(result);importedData.last=result;cpu+=performance.now()-v;
+  await nextPhase('verify',[
+   result.verification.checks.length+' interne telvergelijkingen uitgevoerd',
+   result.verification.mismatches+' interne telverschillen gevonden',
+   result.verification.sourceIssues.length+' typen bronafwijkingen gerapporteerd'
+  ],[['history','verify'],['insight','verify'],['verify','quality']],result.verification.mismatches>0);
+  await nextPhase('privacy',[
+   'Excelgegevens lokaal in de browser verwerkt',
+   'Geen AI-API voor deze agentweergave',
+   'Geen zelfstandige AVG-certificering uitgevoerd'
+  ],[['analysis','privacy']]);
+  resetControllerComparison(true);updateControllerContext();
+  const t3=performance.now();renderImported(result);cpu+=performance.now()-t3;
+  await nextPhase('report',[
+   'Dashboard met berekende KPI’s bijgewerkt',
+   'Witte managementrapportage beschikbaar',
+   'Concept: niet extern gevalideerd'
+  ],[['insight','report'],['privacy','report'],['report','quality']]);
+  const concern=result.verification.mismatches>0||!result.historyLoaded;
+  await nextPhase('quality',[
+   'Interne rekenvergelijking: '+(result.verification.mismatches?'afwijking':'geen telverschil'),
+   'Historie 2025: '+(result.historyLoaded?'meegenomen':'niet aangeleverd'),
+   'Geen formele vrijgave door businesscontroller'
+  ],[['verify','quality'],['report','quality']],concern);
+  conductor.classList.add('attention');$('conductorStatus').textContent='Verwerkingsweergave afgerond';
+  $('flowState').textContent='Concept beschikbaar · NIET EXTERN GEVALIDEERD';$('logStatus').textContent='Afgerond';
+  log(`Echte berekening, interne verificatie en weergave: ${(cpu/1000).toFixed(2)} sec. Geanimeerde procesweergave: ${((performance.now()-timestamp)/1000).toFixed(1)} sec (exclusief Excel-invoer).`);
+ }catch(err){log('FOUT: '+err.message);$('flowState').textContent='Berekening of weergave mislukt';conductor.classList.add('attention');$('conductorStatus').textContent='Fout gedetecteerd';}
+ finally{nextClearNetwork(false);running=false;nextIsRunning=false;$('startBtn').disabled=false;$('resetBtn').disabled=false;conductor.classList.remove('running');document.querySelector('.orchestra').classList.remove('running');}
+}
+start=async function(){
+ if(running)return;
+ if(importedData)return nextStartImported();
+ nextClearNetwork(true);
+ for(const id of ['identity','history','privacy','quality']){nextSetStatus(id,'skipped');nextLines(id,['Geen echte Excelbron in demonstratie','Controle niet uitgevoerd'],1,true);}
+ return nextOriginalStart();
+};
+$('startBtn').removeEventListener('click',nextOriginalStart);
+$('startBtn').addEventListener('click',start);
+window.addEventListener('resize',()=>requestAnimationFrame(nextBuildGraph));
+if(typeof ResizeObserver!=='undefined')new ResizeObserver(()=>requestAnimationFrame(nextBuildGraph)).observe(document.querySelector('.orchestra'));
+nextInitCards();requestAnimationFrame(nextBuildGraph);
+
 </script></body></html>