- verbeteringen client

- vereenvoudiging van de ProgressTracker.vue door verwijderen van single line display
- toevoegen van busy animatie tijdens redeneren

eveai_chat_client/static/assets/vue-components/ProgressTracker.vue

@@ -1,21 +1,33 @@
 <template>
-    <div class="progress-tracker" :class="{ 'expanded': isExpanded, 'completed': isCompleted && !hasError, 'error': error || hasError }">
+    <div class="progress-tracker" :class="{ 
+        'expanded': isExpanded, 
+        'completed': isCompleted && !hasError, 
+        'error': error || hasError
+    }">
         <div 
             class="progress-header" 
             @click="toggleExpand"
             :title="isExpanded ? 'Inklappen' : 'Uitklappen voor volledige voortgang'"
         >
             <div class="progress-title">
-                <span v-if="connecting" class="spinner"></span>
-                <span v-else-if="error" class="status-icon error">✗</span>
-                <span v-else-if="isCompleted" class="status-icon completed">✓</span>
-                <span v-else class="status-icon in-progress"></span>
+                <!-- Evie working animatie tijdens processing -->
+                <img v-if="isProcessing" 
+                     src="/static/assets/img/evie_working.webp" 
+                     alt="Bezig met verwerken..." 
+                     class="progress-icon working-animation">
+                
+                <!-- Status icons na completion -->
+                <span v-else-if="connecting" class="spinner progress-icon"></span>
+                <span v-else-if="error" class="status-icon error progress-icon">✗</span>
+                <span v-else-if="isCompleted" class="status-icon completed progress-icon">✓</span>
+                
+                <!-- Status tekst -->
                 <span v-if="error">Fout bij verwerking</span>
                 <span v-else-if="isCompleted">Verwerking voltooid</span>
                 <span v-else>Bezig met redeneren...</span>
             </div>
             <div class="progress-toggle">
-                {{ isExpanded ? '▲' : '▼' }}
+                {{ isExpanded ? '▼' : '◄' }}
             </div>
         </div>
 
@@ -23,13 +35,14 @@
             {{ error }}
         </div>
 
+        <!-- Content alleen tonen als expanded -->
         <div 
+            v-if="isExpanded"
             ref="progressContainer"
-            class="progress-content" 
-            :class="{ 'single-line': !isExpanded }"
+            class="progress-content"
         >
             <div 
-                v-for="(line, index) in displayLines" 
+                v-for="(line, index) in progressLines" 
                 :key="index"
                 class="progress-line"
             >
@@ -65,13 +78,8 @@ export default {
         };
     },
     computed: {
-        displayLines() {
-            if (this.isExpanded) {
-                return this.progressLines;
-            } else {
-                // Show only the last line when collapsed
-                return this.progressLines.length > 0 ? [this.progressLines[this.progressLines.length - 1]] : [];
-            }
+        isProcessing() {
+            return !this.isCompleted && !this.hasError && !this.connecting;
         }
     },
     mounted() {