feat: typing indicator mit agent-name und random phrases

- typing-phrases.js in index.html eingebunden
- startTypingIndicator() / stopTypingIndicator() in chat.js
- Agent-Name via setCurrentAgentName() aus chat-page.js gesetzt
- Phrase wechselt alle 3 Sekunden zufällig
- Cleanup bei destroy() und finally-Block

TODO.md

@@ -46,7 +46,7 @@
 - [x] ~~Claude (Sub-)Agents~~ – Nicht umsetzbar: Claude Code Sub-Agents sind ein CLI-Feature, nicht über die Messages API verfügbar. Eigenes Sub-Agent-System (Preparer/Review/Finalizer) deckt den Use-Case bereits ab.
 
 ## Features aus Devy übernehmen
-- [ ] 💬 Typing-Indicator - Animierter Indikator statt statischem "denkt nach..."
+- [ ] 💬 Typing-Indicator - Animierter Indikator statt statischem "Streaming..."
 - [ ] 🎨 Chat-Hintergründe - Benutzerdefinierte Hintergründe pro Session
 - [x] 👤 User-Management - Admin-only: Benutzer CRUD, Login-as-User, Default-Pfade
 - [x] 🖥️ Windows Desktop App - WPF + WebView2 Wrapper mit konfigurierbarer URL

wwwroot/index.html

@@ -616,6 +616,7 @@
 <script src="js/reply.js"></script>
 <script src="js/files.js"></script>
 <script src="js/file-explorer.js"></script>
+<script src="js/typing-phrases.js"></script>
 <script src="js/chat.js"></script>
 <script src="js/history.js"></script>
 <script src="js/archive.js"></script>

wwwroot/js/chat.js

@@ -161,6 +161,38 @@ let _currentToolBox = null;   // Aktuell laufende Tool-Box (für Stream-Events)
 let _chatAbandoned = false; // true wenn User weg-navigiert während Stream läuft
 let _abortController = null; // AbortController für laufenden Stream
 
+// ── Typing Indicator ──
+
+let _currentAgentName = null;
+let _typingInterval = null;
+
+function setCurrentAgentName(name) {
+  _currentAgentName = name;
+}
+
+function _randomTypingPhrase() {
+  return TYPING_PHRASES[Math.floor(Math.random() * TYPING_PHRASES.length)];
+}
+
+function _buildTypingHtml(phrase) {
+  var name = _currentAgentName || 'Agent';
+  return '<span><i class="fa fa-hourglass-half"></i> ' + esc(name) + ' ' + esc(phrase) + '...</span>';
+}
+
+function startTypingIndicator() {
+  setMetaHtml(_buildTypingHtml(_randomTypingPhrase()));
+  _typingInterval = setInterval(function() {
+    setMetaHtml(_buildTypingHtml(_randomTypingPhrase()));
+  }, 3000);
+}
+
+function stopTypingIndicator() {
+  if (_typingInterval) {
+    clearInterval(_typingInterval);
+    _typingInterval = null;
+  }
+}
+
 async function clearChat() {
   const archive = await apiArchive(getCurrentSessionId());
   if (!archive) return;
@@ -213,7 +245,7 @@ async function _runStream(fetchPromise) {
   _currentToolBox = null;
   _chatAbandoned = false;
   _stopClickCount = 0;
-  setMetaHtml('<span><i class="fa fa-hourglass-half"></i> Streaming...</span>');
+  startTypingIndicator();
 
   try {
     const resp = await fetchPromise(_abortController.signal);
@@ -250,7 +282,7 @@ async function _runStream(fetchPromise) {
       try {
         const status = await apiIsStreaming(sid);
         if (status.streaming) {
-          setMetaHtml('<span><i class="fa fa-hourglass-half"></i> Streaming... (Verbindung wiederhergestellt)</span>');
+          startTypingIndicator();
           startStreamingPoll(sid, sendBtn, status.chainId);
           return;
         }
@@ -259,6 +291,7 @@ async function _runStream(fetchPromise) {
     }
   } finally {
     if (_chatAbandoned) return;
+    stopTypingIndicator();
     if (!isStreaming || !_streamingPollInterval) {
       sendBtn.disabled = false;
       sendBtn.hidden = false;
@@ -269,7 +302,7 @@ async function _runStream(fetchPromise) {
       _abortController = null;
       // Meta zurücksetzen falls kein done-Event kam (z.B. nach Stop)
       var metaEl = $('#meta');
-      if (metaEl && metaEl.textContent.includes('Streaming')) {
+      if (metaEl && (metaEl.textContent.includes('Streaming') || metaEl.textContent.includes('...'))) {
         setMeta(_stopClickCount > 0 ? 'Gestoppt' : 'Bereit');
       }
     }

wwwroot/js/pages/chat-page.js

@@ -202,8 +202,11 @@ registerPage('chat', {
       if (session.agentId) {
         try {
           const agent = await apiGetAgent(session.agentId);
-          if (agent && agent.customCommands) {
+          if (agent) {
-            agentCmds = JSON.parse(agent.customCommands) || [];
+            setCurrentAgentName(agent.name || null);
+            if (agent.customCommands) {
+              agentCmds = JSON.parse(agent.customCommands) || [];
+            }
           }
         } catch(e) {}
       }
@@ -390,6 +393,8 @@ registerPage('chat', {
     // Stream nicht abbrechen (Backend soll weiterlaufen),
     // aber Frontend-Processing stoppen
     _chatAbandoned = true;
+    stopTypingIndicator();
+    setCurrentAgentName(null);
     closeEmojiPicker();
     if (this._closeMenu) {
       document.removeEventListener('click', this._closeMenu);

wwwroot/js/typing-phrases.js

@@ -0,0 +1,29 @@
+const TYPING_PHRASES = [
+  'denkt si wos',
+  'grübelt',
+  'schaut deppat drein',
+  'brunzt',
+  'scheißt an Kropfn',
+  'krotzt si am Hirn',
+  'hoit sei Goschn',
+  'is am Schmäh fian',
+  'raunzt leise vor si hi',
+  'fladert a Idee',
+  'schleicht si boid',
+  'red mit si söba',
+  'brettlt durch die Daten',
+  'sudert',
+  'bockts nimma',
+  'schaut obs eh passt',
+  'mocht a Hetz',
+  'wuzelt si durch',
+  'hod an Bickn',
+  'zwickt si',
+  'draht Dahma',
+  'schnackselt mit der API',
+  'is gonz narrisch',
+  'hackelt',
+  'sudert übers Wetter',
+  'fetzt si mitn Code',
+  'is am Wurschteln',
+];