feat: Auto-Context im Frontend anzeigen und in DB persistieren

- recalled_context-Header verstärkt (klare Nutzungs-Anweisung statt passivem Hinweis)
- SSE-Event 'auto_context' ans Frontend senden für Live-Anzeige
- Auto-Context als Message (type=auto_context) in DB speichern
- Aufklappbare Auto-Context-Box im Chat-Stream und History-Rendering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wwwroot/css/chat.css

@@ -1136,6 +1136,18 @@
   padding: var(--box-padding);
 }
 
+/* Auto-Context Bubble */
+
+.auto-context-box .tool-box-header .tool-name {
+  color: var(--info);
+}
+
+.auto-context-box .auto-context-content {
+  padding: var(--box-padding);
+  font-size: 0.85em;
+  opacity: 0.85;
+}
+
 /* Review Bubbles */
 
 .review-bubble {

wwwroot/js/chat.js

@@ -127,6 +127,10 @@ function handleStreamEvent(eventType, data) {
       finalizeReviewBubble('done', data, 'finalizer');
       break;
 
+    case 'auto_context':
+      addAutoContextBubble(data.context);
+      break;
+
     case 'info':
       addWarningBubble(data.message, true);
       break;

wwwroot/js/history.js

@@ -259,6 +259,24 @@ function _renderMessagesIntoFragment(fragment, msgs, imageMessageIds, opts) {
         }
         break;
       }
+      case 'auto_context': {
+        if (msg.content) {
+          var acDiv = document.createElement('div');
+          acDiv.className = 'tool-box auto-context-box' + (archived ? ' archived' : '');
+          var acHeader = document.createElement('div');
+          acHeader.className = 'tool-box-header clickable';
+          acHeader.innerHTML = '<span class="tool-name">Auto-Context</span>';
+          var acContent = document.createElement('div');
+          acContent.className = 'auto-context-content';
+          acContent.textContent = msg.content.replace(/<\/?recalled_context>/g, '').trim();
+          acContent.hidden = true;
+          acHeader.addEventListener('click', function() { acContent.hidden = !acContent.hidden; });
+          acDiv.appendChild(acHeader);
+          acDiv.appendChild(acContent);
+          fragment.appendChild(acDiv);
+        }
+        break;
+      }
       case 'thinking': {
         if (msg.role === 'assistant' && msg.content) {
           var thinkDiv = document.createElement('div');

wwwroot/js/stream-ui.js

@@ -103,6 +103,28 @@ function endThinkingBubble() {
   _thinkingText = '';
 }
 
+// ── Auto-Context Bubble ──
+
+function addAutoContextBubble(contextText) {
+  if (!contextText) return;
+  var box = document.createElement('div');
+  box.className = 'tool-box auto-context-box streamed';
+  var header = document.createElement('div');
+  header.className = 'tool-box-header clickable';
+  header.innerHTML = '<span class="tool-name">Auto-Context</span>';
+  var content = document.createElement('div');
+  content.className = 'auto-context-content markdown';
+  content.hidden = true;
+  // recalled_context aus XML-Tags extrahieren
+  var inner = contextText.replace(/<\/?recalled_context>/g, '').trim();
+  content.innerHTML = renderMarkdown(inner);
+  header.addEventListener('click', function() { content.hidden = !content.hidden; });
+  box.appendChild(header);
+  box.appendChild(content);
+  chatEl().appendChild(box);
+  scrollDown();
+}
+
 // ── Review Bubbles (Streaming) ──
 
 let _reviewBubble = null;