Upload index.html

index.html

@@ -324,7 +324,14 @@
 .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}
+/* v6: de oorspronkelijke voortgangsbalk terug onder de zichtbare werkstappen */
+.orchestra .agent .agent-bottom{display:flex!important;align-items:center;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(135,166,199,.16);position:relative;z-index:3}
+.orchestra .agent .agent-bottom .track{display:block;flex:1;min-width:0;height:7px;background:#1c304c;border:1px solid rgba(124,150,190,.16);border-radius:20px;overflow:hidden}
+.orchestra .agent .agent-bottom .track i{display:block;width:0%;height:100%;background:var(--accent);border-radius:20px;box-shadow:0 0 10px var(--accent);transition:none}
+.orchestra .agent .agent-bottom .percent{display:inline-block;flex:none;width:39px;text-align:right;color:#c8d9f2;font-size:11px;font-variant-numeric:tabular-nums;font-weight:750}
+.orchestra .agent.done .agent-bottom .track i{box-shadow:0 0 12px var(--accent)}
+@media(max-width:700px){.orchestra .agent .agent-bottom{margin-top:8px;gap:6px}.orchestra .agent .agent-bottom .percent{font-size:10px;width:33px}}
+
 .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}
@@ -1419,10 +1426,31 @@ 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';
 }
+// v6: visuele voortgang, synchroon met de gekozen procesPRESENTATIE (niet met CPU-tijd).
+let nextProgressFrame=0;
+function nextSetProgress(id,value){
+ const card=$('agent-'+id),fill=card?.querySelector('.agent-bottom .track i'),label=card?.querySelector('.agent-bottom .percent');
+ if(!fill||!label)return;
+ const pct=Math.max(0,Math.min(100,Math.round(value)));
+ fill.style.width=pct+'%';label.textContent=pct+'%';
+}
+function nextStopProgress(){if(nextProgressFrame)cancelAnimationFrame(nextProgressFrame);nextProgressFrame=0;}
+function nextAnimateProgress(id,duration){
+ nextStopProgress();nextSetProgress(id,0);
+ const started=performance.now();
+ function tick(now){
+  const fraction=Math.min(1,Math.max(0,(now-started)/duration));
+  nextSetProgress(id,fraction*100);
+  if(fraction<1)nextProgressFrame=requestAnimationFrame(tick);
+  else nextProgressFrame=0;
+ }
+ nextProgressFrame=requestAnimationFrame(tick);
+}
 function nextInitCards(){
+ nextStopProgress();
  for(const id of nextIds){
   const card=$('agent-'+id);card.classList.remove('has-steps','active','done','completed-pulse');
-  nextSetStatus(id,'idle');
+  nextSetStatus(id,'idle');nextSetProgress(id,0);card.querySelector('.agent-bottom').title='Voortgang van de procesweergave; geen meting van de werkelijke rekentijd.';
   nextLines(id,['Wacht op lokale analyse','Werkstappen verschijnen hier','Overdracht wordt zichtbaar'], -2);
  }
  nextShowCount();
@@ -1435,11 +1463,13 @@ async function nextPhase(id,lines,routes=[],warning=false){
  log('Procesweergave: '+$('agent-'+id).querySelector('h3').textContent);
  const phaseDuration=$('paceSelect').value==='fast'?650:3300;
  const durationStep=phaseDuration/lines.length;
+ nextAnimateProgress(id,phaseDuration);
  for(let i=0;i<lines.length;i++){
   await nextWait(durationStep);
   nextLines(id,lines,i,false);
   $('flowState').textContent=lines[i];
  }
+ nextStopProgress();nextSetProgress(id,100);
  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');
@@ -1447,6 +1477,7 @@ async function nextPhase(id,lines,routes=[],warning=false){
  nextShowCount();
 }
 function nextClearNetwork(reset=false){
+ nextStopProgress();
  nextActiveKeys=[];if(reset)nextFinishedKeys=[];
  clearTimeout(nextTransferTimeout);$('conductor').classList.remove('transfering');
  if(nextAnimationFrame)cancelAnimationFrame(nextAnimationFrame);nextAnimationFrame=0;