Fix panel member streaming and persist full transcript with images

Three related panel-member improvements:

Tool-box streaming fix: correlate tool boxes by tool ID instead of a
single pointer (fixes orphaned spinners and empty boxes when a member
calls multiple tools in one message), forward CLI ToolEnd to capture the
tool input (command/path), normalize tool names, clean up orphaned
spinners on finalize, and add a blinking cursor during text streaming.

Image/screenshot support: CLI panel members now extract image refs from
the last user message (like the worker) and drop them as temp files
readable via the Read tool, so members can see screenshots and file
attachments instead of being blind on image-based questions.

Reload persistence: each member persists a structured JSON transcript
({name, model, segments:[text|tool]}) instead of plain text, so a reload
restores text AND tool boxes interleaved exactly like live. history.js
renders the transcript and keeps back-compat for the old [Panel: Name]
plaintext format.

- AnthropicService.Agents.cs: NonStreamingLoopCallbacks.TranscriptSink,
  loop collects text/tool segments, tool input added to combined event
- AnthropicService.Panel.cs: CLI member ID-correlation + ToolEnd input +
  image refs + transcript; RunPanelMember persists one JSON transcript
- stream-ui.js: tool boxes keyed by ID, name normalization, cursor,
  orphaned-spinner cleanup
- history.js: render JSON transcript with tool boxes, plaintext fallback

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

wwwroot/js/history.js

@@ -481,13 +481,56 @@ function _renderReviewGroup(tagGroup, archived) {
 }
 
 /**
- * Renders a single panel member's proposal (tag="panel", content "[Panel: Name]\n...")
- * as its own panel bubble – matches the live panel_member bubble.
+ * Renders a single panel member (tag="panel") as its own panel bubble – matches the live
+ * panel_member bubble. Two persisted formats:
+ *  - NEW: JSON transcript {name, model, segments:[{t:"text",v} | {t:"tool",name,input,result,error}]}
+ *    → restores text AND tool boxes interleaved (just like live).
+ *  - OLD (back-compat): plaintext "[Panel: Name]\n..." → text only.
  */
 function _renderPanelMemberBubble(msg, archived) {
   var bubble = document.createElement('div');
   bubble.className = 'msg review-bubble panel-bubble' + (archived ? ' archived' : '');
   var content = msg.content || '';
+
+  // ── Neues Format: JSON-Transkript (Text + Tool-Boxen) ──
+  var data = null;
+  if (content.charAt(0) === '{') {
+    try { data = JSON.parse(content); } catch (e) { data = null; }
+  }
+  if (data && Array.isArray(data.segments)) {
+    var model = (typeof prettyModelName === 'function') ? prettyModelName(data.model) : data.model;
+    bubble.appendChild(_createSubAgentHeader('panel', data.name, model ? { model: model } : undefined));
+    var rendered = false;
+    for (var i = 0; i < data.segments.length; i++) {
+      var seg = data.segments[i];
+      if (!seg) continue;
+      if (seg.t === 'text') {
+        if (!seg.v) continue;
+        var tdiv = document.createElement('div');
+        tdiv.className = 'review-content markdown';
+        tdiv.innerHTML = renderMarkdown(seg.v);
+        parseFluentEmojis(tdiv);
+        bubble.appendChild(tdiv);
+        rendered = true;
+      } else if (seg.t === 'tool') {
+        if (typeof isToolVisible === 'function' && !isToolVisible(seg.name)) continue;
+        var box = document.createElement('div');
+        box.className = 'tool-box review-tool-box';
+        renderToolBoxContent(box, seg.name, seg.input || null, seg.result, seg.error, null);
+        bubble.appendChild(box);
+        rendered = true;
+      }
+    }
+    if (!rendered) {
+      var empty = document.createElement('div');
+      empty.className = 'review-content markdown';
+      empty.innerHTML = renderMarkdown('_(keine Antwort)_');
+      bubble.appendChild(empty);
+    }
+    return bubble;
+  }
+
+  // ── Alt-Format (Back-Compat): "[Panel: Name]\n..." Plaintext ──
   var name = null;
   var nameMatch = content.match(/^\[Panel: ([^\]]+)\]/);
   if (nameMatch) name = nameMatch[1];

wwwroot/js/stream-ui.js

@@ -247,7 +247,7 @@ function addPanelMemberBubble(data) {
   bubble._panelSpinner = spinner; // wird beim ersten Text/Tool entfernt
   bubble._segText = null;         // aktuell offenes Text-Segment (oder null)
   bubble._segTextStr = '';        // dessen akkumulierter Text
-  bubble._tool = null;            // aktuell offene Tool-Box (CLI: Spinner→Füllen)
+  bubble._toolBoxes = {};         // toolId -> offene Tool-Box (CLI: per ID korreliert → robust bei parallelen Tools)
   bubble._fullText = '';          // gesamter gestreamter Text (für Finalize-Fallback)
   _panelActiveLayer[data.index] = layer; // ab jetzt zeigen Events für diesen index auf diese Runde
   _panelBubbles[_panelKey(data.index, layer)] = bubble;
@@ -259,6 +259,11 @@ function _panelClearSpinner(bubble) {
   if (bubble._panelSpinner) { bubble._panelSpinner.remove(); bubble._panelSpinner = null; }
 }
 
+function _panelRemoveCursor(bubble) {
+  var c = bubble.querySelector('.cursor');
+  if (c) c.remove();
+}
+
 function appendPanelMemberText(data) {
   var bubble = _panelGetBubble(data.index);
   if (!bubble || !data.text) return;
@@ -273,6 +278,12 @@ function appendPanelMemberText(data) {
   bubble._segTextStr += data.text;
   bubble._fullText += data.text;
   bubble._segText.innerHTML = renderMarkdown(bubble._segTextStr);
+  // Blinkender Cursor ans Ende des Segments (wie beim Worker-Stream) → "schreibt gerade"
+  var cursor = document.createElement('span');
+  cursor.className = 'cursor';
+  var lastBlock = bubble._segText.lastElementChild;
+  if (lastBlock) lastBlock.appendChild(cursor);
+  else bubble._segText.appendChild(cursor);
   scrollDown();
 }
 
@@ -280,15 +291,17 @@ function addPanelMemberToolUse(data) {
   var bubble = _panelGetBubble(data.index);
   if (!bubble) return;
   _panelClearSpinner(bubble);
-  bubble._segText = null; // Text-Segment schließen → Folge-Text kommt UNTER die Tool-Box
-  if (!isToolVisible(data.name)) { bubble._tool = null; return; }
+  _panelRemoveCursor(bubble); // Cursor aus dem laufenden Text-Segment entfernen
+  bubble._segText = null;     // Text-Segment schließen → Folge-Text kommt UNTER die Tool-Box
+  var nm = normalizeToolName(data.name); // CLI-Name (Bash) → gott-Konvention (execute) – konsistent zur fertigen Box
+  if (!isToolVisible(nm)) return;
   var toolDiv = document.createElement('div');
   toolDiv.className = 'tool-box review-tool-box streamed';
-  toolDiv.dataset.toolName = data.name;
-  var displayName = TOOL_DISPLAY_NAMES[data.name] || data.name;
+  toolDiv.dataset.toolName = nm;
+  var displayName = TOOL_DISPLAY_NAMES[nm] || nm;
   toolDiv.innerHTML = '<span class="tool-name">' + esc(displayName) + '</span> <span class="tool-spinner"><i class="fa fa-hourglass-half"></i></span>';
   bubble.appendChild(toolDiv);
-  bubble._tool = toolDiv;
+  if (data.id) bubble._toolBoxes[data.id] = toolDiv; // per ID korreliert (mehrere Tools parallel)
   scrollDown();
 }
 
@@ -297,18 +310,17 @@ function finishPanelMemberTool(data) {
   if (!bubble) return;
   _panelClearSpinner(bubble);
   bubble._segText = null; // nach Tool-Result neuen Text-Block beginnen
-  if (bubble._tool) {
-    // CLI: offene Box (mit Spinner) füllen
-    renderToolBoxContent(bubble._tool, data.name, null, data.result, data.isError, null);
-    bubble._tool = null;
-  } else {
-    // Anthropic-Loop (kombiniertes panel_member_tool-Event): fertige Box direkt anlegen
-    if (!isToolVisible(data.name)) return;
-    var toolDiv = document.createElement('div');
-    toolDiv.className = 'tool-box review-tool-box streamed';
-    bubble.appendChild(toolDiv);
-    renderToolBoxContent(toolDiv, data.name, null, data.result, data.isError, null);
+  // CLI: offene Box per ID finden; Anthropic-Loop (kombiniert, ohne ID) → neue Box anlegen
+  var box = (data.id && bubble._toolBoxes && bubble._toolBoxes[data.id]) ? bubble._toolBoxes[data.id] : null;
+  if (!box) {
+    if (!isToolVisible(normalizeToolName(data.name))) return;
+    box = document.createElement('div');
+    box.className = 'tool-box review-tool-box streamed';
+    bubble.appendChild(box);
   }
+  // data.name = roher Name, data.input = roher Input-JSON → renderToolBoxContent normalisiert beides
+  renderToolBoxContent(box, data.name, data.input || null, data.result, data.isError, null);
+  if (data.id && bubble._toolBoxes) delete bubble._toolBoxes[data.id];
   scrollDown();
 }
 
@@ -316,6 +328,16 @@ function finalizePanelMember(data) {
   var bubble = _panelGetBubble(data.index);
   if (!bubble) return;
   _panelClearSpinner(bubble);
+  _panelRemoveCursor(bubble);
+  // Verwaiste Tool-Boxen (Tool ohne Result, z.B. in Plan-Mode geblockt) → Spinner entfernen,
+  // damit keine Box mit endlosem "⏳" stehen bleibt.
+  if (bubble._toolBoxes) {
+    for (var tid in bubble._toolBoxes) {
+      var sp = bubble._toolBoxes[tid].querySelector('.tool-spinner');
+      if (sp) sp.remove();
+    }
+    bubble._toolBoxes = {};
+  }
   // Wenn LIVE nichts gestreamt wurde (z.B. OpenAI-Member = one-shot): finalen Text rendern.
   if (!bubble._fullText || !bubble._fullText.trim()) {
     var text = (data.text && data.text.trim()) ? data.text : '_(keine Antwort)_';