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>
This commit is contained in:
MelekiandClaude Opus 4.8 committed 2026-06-18 16:51:40 +02:00
1 parent aa0b8ee493
commit c32d1e004f
4 files changed
+211 -67

No files matched your search

+39 -17
View File
@@ -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)_';