From 3b1e6c1496da3ee6e6779f8821db792ac9078676 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Mon, 16 Mar 2026 17:43:59 +0100
Subject: [PATCH] Tutorial: Highlight-Leak bei Step-Wechsel verhindern

Problem: Wenn der Nutzer waehrend einer laufenden Demo auf Weiter klickt,
lief die async Demo im Hintergrund weiter und setzte Highlights auf
Elemente des alten Steps (z.B. Beschreibungsfeld blieb umrahmt).

Fix:
- _exitStep setzt _demoRunning = false (bricht laufende Demo ab)
- _highlightSub prueft _isActive bevor es Highlights setzt
- _highlightSub schreibt nicht mehr in _cleanupFns (vereinfacht)
- _clearSubHighlights entfernt zuverlaessig alle Highlights per
  querySelectorAll

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/static/dashboard.html |  2 +-
 src/static/js/tutorial.js | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 60fe0ec..5c24cfc 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -764,7 +764,7 @@
     <script src="/static/js/api_network.js?v=20260316a"></script>
     <script src="/static/js/network-graph.js?v=20260316a"></script>
     <script src="/static/js/app_network.js?v=20260316a"></script>
-    <script src="/static/js/tutorial.js?v=20260316u"></script>
+    <script src="/static/js/tutorial.js?v=20260316v"></script>
     <script src="/static/js/chat.js?v=20260316f"></script>
     <script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
 
diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js
index df434b5..2174bfc 100644
--- a/src/static/js/tutorial.js
+++ b/src/static/js/tutorial.js
@@ -11,6 +11,7 @@ const Tutorial = {
     _keyHandler: null,
     _resizeHandler: null,
     _demoRunning: false,
+    _lastExitedStep: -1,
     _stepTimers: [],      // setTimeout-IDs fuer den aktuellen Step
     _savedState: null,   // Dashboard-Zustand vor dem Tutorial
 
@@ -465,12 +466,11 @@ const Tutorial = {
     // Highlight-Helfer: Einzelnes Sub-Element innerhalb einer Kachel markieren
     // -----------------------------------------------------------------------
     _highlightSub(selector) {
+        // Ignorieren wenn der Step bereits verlassen wurde
+        if (!this._isActive) return;
         var el = document.querySelector(selector);
         if (!el) return;
         el.classList.add('tutorial-sub-highlight');
-        this._cleanupFns.push(function() {
-            el.classList.remove('tutorial-sub-highlight');
-        });
     },
 
     _clearSubHighlights() {
@@ -1291,6 +1291,10 @@ const Tutorial = {
     _exitStep(i) {
         var step = this._steps[i];
         this._clearStepTimers();
+        // Laufende Demo abbrechen
+        this._demoRunning = false;
+        // Step-Index merken um verspaetete Highlight-Aufrufe zu ignorieren
+        this._lastExitedStep = i;
         if (step.onExit) {
             step.onExit();
         }