create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/js/message-renderer.js

@@ -12,7 +12,7 @@
  *
  * Public API on window.MR:
  *   - formatMsgText(text)               — markdown + tool-badge HTML
- *   - classifyMessage(m, stripped, isToolOnly) — 'key'|'normal'|'self-thought'|'summary'
+ *   - classifyMessage(m, stripped, isToolOnly) — 'key'|'normal'|'self-thought'|'summary'|'walle-error'
  *   - renderReviewMsg(m, i, msgType?)   — Review row HTML string
  *   - renderSelfThoughtMsg(m, i, stripped) — single-self-thought collapsed group HTML
 	 *   - renderSelfThoughtItem(m, i, stripped) — inner item inside a multi-step thought-group
@@ -24,6 +24,7 @@
 	 *   - renderConversationEvent(evt)      — Conversation row DOM element
 	 *   - createConversationTurn(evt, opts) — Conversation prompt-turn DOM
 	 *   - refreshConversationActivityGroup(group) — recompute grouped tool UI
+	 *   - refreshConversationSystemGroup(group) — recompute grouped system UI
 	 *
  * Depends on global escHtml (defined in index.html). Since the renderer
  * functions are only invoked AFTER the page's body scripts run, escHtml
@@ -39,6 +40,219 @@
     return '/api/images/file/' + encodeURIComponent(match[1]);
   }
 
+  const _IMAGE_REF_EXT_RE = /\.(?:png|jpe?g|gif|webp|svg|heic|heif|bmp|tiff?)(?:[?#].*)?$/i;
+  const _IMAGE_ATTACHMENT_SAFE_ATTRS = ['href', 'src', 'alt', 'title', 'target', 'rel', 'loading', 'aria-label'];
+  const _SAFE_INLINE_IMAGE_DATA_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,[a-z0-9+/=\s]+$/i;
+
+  function _stripWrappingQuotes(value) {
+    let text = String(value || '').trim();
+    if (!text) return '';
+    if (text[0] === '<' && text[text.length - 1] === '>') text = text.slice(1, -1).trim();
+    const first = text[0];
+    const last = text[text.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) text = text.slice(1, -1);
+    return text.replace(/\\"/g, '"').replace(/\\'/g, "'").trim();
+  }
+
+  function _basenameFromReference(value) {
+    let text = _stripWrappingQuotes(value);
+    if (!text) return '';
+    try {
+      if (/^https?:\/\//i.test(text) || /^file:\/\//i.test(text)) text = new URL(text).pathname || text;
+    } catch {}
+    try { text = decodeURIComponent(text); } catch {}
+    return String(text || '').replace(/[?#].*$/g, '').split(/[\\/]/).filter(Boolean).pop() || '';
+  }
+
+  function _imageApiUrlForReference(value) {
+    const raw = _stripWrappingQuotes(value);
+    if (!raw) return '';
+    if (/^data:image\//i.test(raw)) return _SAFE_INLINE_IMAGE_DATA_RE.test(raw) ? raw : '';
+    if (/^\/api\/images\/file\//i.test(raw)) return raw;
+    try {
+      if (/^https?:\/\//i.test(raw)) {
+        const u = new URL(raw);
+        if (/\/api\/images\/file\//i.test(u.pathname)) return u.pathname + u.search;
+      }
+      if (/^file:\/\//i.test(raw)) {
+        const u = new URL(raw);
+        const api = _imageApiUrlForLocalPath(u.pathname || '');
+        if (api) return api;
+      }
+    } catch {}
+    const api = _imageApiUrlForLocalPath(raw);
+    if (api) return api;
+    const basename = _basenameFromReference(raw);
+    if (basename && _IMAGE_REF_EXT_RE.test(basename)) return '/api/images/file/' + encodeURIComponent(basename);
+    return '';
+  }
+
+  function _imageReferenceKey(value) {
+    const api = _imageApiUrlForReference(value);
+    if (api) return api.replace(/[?#].*$/g, '').toLowerCase();
+    return _stripWrappingQuotes(value).replace(/[?#].*$/g, '').toLowerCase();
+  }
+
+  function _labelNumber(label) {
+    const m = String(label || '').match(/\[Image #(\d+)\]/i);
+    return m ? Number(m[1]) : 0;
+  }
+
+  function _nextImageLabel(existing) {
+    let max = 0;
+    for (const item of existing || []) max = Math.max(max, _labelNumber(item && item.label));
+    return '[Image #' + (max + 1) + ']';
+  }
+
+  function _splitImageReferenceList(value) {
+    const text = String(value || '');
+    const refs = [];
+    const quoted = /"((?:\\.|[^"])*)"|'((?:\\.|[^'])*)'/g;
+    let match;
+    while ((match = quoted.exec(text))) refs.push(match[1] || match[2] || '');
+    if (refs.length) return refs;
+    return text.split(',').map(part => part.trim()).filter(Boolean);
+  }
+
+  function _attachmentReferenceValue(item) {
+    if (typeof item === 'string') return item;
+    if (!item || typeof item !== 'object') return '';
+    return item.url || item.previewUrl || item.preview_url || item.data || item.path || item.file_path || item.filename || item.name || '';
+  }
+
+  function _attachmentLooksImage(item) {
+    if (typeof item === 'string') return !!_imageApiUrlForReference(item);
+    if (!item || typeof item !== 'object') return false;
+    const kind = String(item.kind || item.type || item.mediaType || item.mimeType || item.mime_type || '').toLowerCase();
+    if (kind.includes('image')) return true;
+    return _IMAGE_REF_EXT_RE.test(String(_attachmentReferenceValue(item) || ''));
+  }
+
+  function _messagePlainText(message) {
+    const direct = message.text ?? message.message ?? message.content ?? '';
+    if (typeof direct === 'string') return direct;
+    if (Array.isArray(direct)) {
+      return direct.map((part) => {
+        if (typeof part === 'string') return part;
+        if (!part || typeof part !== 'object') return '';
+        return part.text || part.content || part.message || '';
+      }).filter(Boolean).join('\n');
+    }
+    if (direct && typeof direct === 'object') return direct.text || direct.message || '';
+    return '';
+  }
+
+  function _addImageAttachment(out, seen, value, label, source) {
+    const ref = _stripWrappingQuotes(value);
+    const src = _imageApiUrlForReference(ref);
+    if (!src) return null;
+    const key = _imageReferenceKey(ref) || src;
+    if (seen.has(key)) return null;
+    seen.add(key);
+    const item = {
+      label: label || _nextImageLabel(out),
+      src,
+      href: src,
+      filename: _basenameFromReference(ref) || _basenameFromReference(src),
+      source: source || 'text',
+    };
+    out.push(item);
+    return item;
+  }
+
+  MR.extractImageAttachments = function (messageOrText) {
+    const message = messageOrText && typeof messageOrText === 'object' ? messageOrText : { text: messageOrText };
+    const text = _messagePlainText(message);
+    const out = [];
+    const seen = new Set();
+
+    const structuredSources = [
+      message.attachments,
+      message.images,
+      message.imageRefs,
+      message.image_refs,
+      message.data && message.data.attachments,
+      message.data && message.data.images,
+      message.data && message.data.imageRefs,
+      message.data && message.data.image_refs,
+    ];
+    for (const rawList of structuredSources) {
+      let list = rawList;
+      if (typeof list === 'string') {
+        try { list = JSON.parse(list); } catch { list = []; }
+      }
+      if (!Array.isArray(list)) continue;
+      for (let idx = 0; idx < list.length; idx += 1) {
+        const item = list[idx];
+        if (!_attachmentLooksImage(item)) continue;
+        _addImageAttachment(out, seen, _attachmentReferenceValue(item), item.label || item.token || '', 'structured');
+      }
+    }
+
+    const contentBlocks = Array.isArray(message.contentBlocks)
+      ? message.contentBlocks
+      : (Array.isArray(message.data && message.data.contentBlocks) ? message.data.contentBlocks : []);
+    for (let idx = 0; idx < contentBlocks.length; idx += 1) {
+      const block = contentBlocks[idx] || {};
+      if (!_attachmentLooksImage(block) && !/image/i.test(String(block.type || ''))) continue;
+      _addImageAttachment(out, seen, _attachmentReferenceValue(block), block.label || '', 'content-block');
+    }
+
+    text.replace(/\[(Image #\d+)\s*:\s*("((?:\\.|[^"])*)"|'((?:\\.|[^'])*)'|([^\]]+))\]/gi, (_full, label, _wrapped, dq, sq, bare) => {
+      _addImageAttachment(out, seen, dq || sq || bare || '', '[' + label.replace(/^\[|\]$/g, '') + ']', 'text-token');
+      return _full;
+    });
+
+    text.replace(/\[(Attached images?)\s*:\s*([^\]]+)\]/gi, (_full, label, body) => {
+      const refs = _splitImageReferenceList(body);
+      for (const ref of refs) _addImageAttachment(out, seen, ref, '', label.toLowerCase());
+      return _full;
+    });
+
+    return out;
+  };
+
+  MR.stripImageAttachmentMetadata = function (text) {
+    let out = String(text || '');
+    out = out.replace(/\[(Image #\d+)\s*:\s*("((?:\\.|[^"])*)"|'((?:\\.|[^'])*)'|([^\]]+))\]/gi, (_full, label) => '[' + label.replace(/^\[|\]$/g, '') + ']');
+    out = out.replace(/[ \t]*\[(Attached images?)\s*:\s*[^\]]+\][ \t]*/gi, ' ');
+    out = out.replace(/[ \t]*\[Image:\s*source:\s*(?:"[^"]+"|'[^']+'|[^\]]+)\][ \t]*/gi, ' ');
+    out = out.replace(/[ \t]*\[Image:\s*original\s+\d+(?:\.\d+)?x\d+(?:\.\d+)?,\s*displayed at\s+\d+(?:\.\d+)?x\d+(?:\.\d+)?\.\s*Multiply coordinates by\s+[0-9.]+\s+to map to original image\.?\][ \t]*/gi, ' ');
+    return out.replace(/[ \t]{2,}/g, ' ').replace(/[ \t]+(\r?\n)/g, '$1').replace(/(\r?\n)[ \t]+/g, '$1').trim();
+  };
+
+  MR.renderImageAttachmentsHtml = function (messageOrAttachments) {
+    const attachments = Array.isArray(messageOrAttachments)
+      ? messageOrAttachments
+      : MR.extractImageAttachments(messageOrAttachments);
+    if (!attachments.length) return '';
+    return '<div class="msg-attachment-strip" aria-label="Image attachments">'
+      + attachments.map((att, idx) => {
+        const label = att.label || '[Image #' + (idx + 1) + ']';
+        const name = att.filename || label;
+        return '<a class="msg-image-attachment" href="' + escHtml(att.href || att.src) + '" target="_blank" rel="noopener noreferrer" title="' + escHtml(name) + '">'
+          + '<img src="' + escHtml(att.src) + '" alt="' + escHtml(label + (name && name !== label ? ' ' + name : '')) + '" loading="lazy">'
+          + '<span>' + escHtml(label) + '</span>'
+          + '</a>';
+      }).join('')
+      + '</div>';
+  };
+
+  function _messageTextForDisplay(text) {
+    return MR.stripImageAttachmentMetadata(text);
+  }
+
+  function _appendReviewAttachmentsHtml(message) {
+    const html = MR.renderImageAttachmentsHtml(message);
+    return html ? html : '';
+  }
+
+  function _formatDisplayTextHtml(text, emptyHtml) {
+    const displayText = _messageTextForDisplay(text);
+    if (displayText) return MR.formatMsgText(displayText);
+    return emptyHtml || '';
+  }
+
   function _normalizeMarkdownImageSources(text) {
     return String(text || '').replace(/!\[([^\]]*)\]\(([^)\s]+|<[^>]+>)\)/g, (all, alt, src) => {
       const apiUrl = _imageApiUrlForLocalPath(src);
@@ -609,12 +823,521 @@
     return "if(event.key==='Enter'||event.key===' '){event.preventDefault();this.classList.toggle('expanded')}";
   }
 
+  // ------------------------------------------------------------------
+  // Structured-capture metadata (parse-time capture of tool calls/results,
+  // reasoning, patches, compaction — see lib/structured-capture.js).
+  // ------------------------------------------------------------------
+
+  // Normalized reader: messages carry `metadata`, conversation events carry
+  // `data.metadata`. Returns the metadata object only when it is a structured
+  // v1+ capture (has kind + version) — legacy rows return null and take the
+  // text pipeline unchanged.
+  MR.messageMeta = function (mOrEvt) {
+    if (!mOrEvt || typeof mOrEvt !== 'object') return null;
+    const candidates = [mOrEvt.metadata, mOrEvt.data && mOrEvt.data.metadata];
+    for (const meta of candidates) {
+      if (meta && typeof meta === 'object' && typeof meta.kind === 'string' && Number(meta.v) >= 1) return meta;
+    }
+    return null;
+  };
+
+  // Kinds the v1 schema emits. A kind outside this set is format drift —
+  // rendered as an inspectable raw-JSON card, never silently dropped.
+  const _KNOWN_META_KINDS = new Set([
+    'reasoning', 'tool_call', 'tool_result', 'shell', 'patch',
+    'web_search', 'compact_boundary', 'compact_summary',
+  ]);
+
+  // Build the HTML-string card for a structured message, or '' when the kind
+  // has no card yet (it then falls through to the legacy text pipeline).
+  // BOTH render paths use this — renderReviewMsg returns the string and
+  // renderConversationEvent hydrates the same string via _cardElFromHtml —
+  // so Review/Conversation parity holds by construction.
+  MR.renderMetaCardHtml = function (m, i) {
+    const meta = MR.messageMeta(m);
+    if (!meta) return '';
+    if (meta.kind === 'unknown' || !_KNOWN_META_KINDS.has(meta.kind)) {
+      return MR.renderUnknownKindHtml(m, i, meta);
+    }
+    if (_TOOL_CARD_KINDS.has(meta.kind)) return MR.renderToolCardHtml(m, null, i);
+    if (meta.kind === 'tool_result') return MR.renderToolCardHtml(null, m, i);
+    if (meta.kind === 'reasoning') return MR.renderThinkingHtml(m, i, meta);
+    if (meta.kind === 'compact_boundary') return MR.renderCompactBoundaryHtml(m, i, meta);
+    if (meta.kind === 'compact_summary') return MR.renderCompactSummaryHtml(m, i, meta);
+    return '';
+  };
+
+  // ------------------------------------------------------------------
+  // Reasoning (thinking) pills + compaction divider/summary.
+  // ------------------------------------------------------------------
+  function _fmtTokens(n) {
+    const value = Number(n);
+    if (!Number.isFinite(value) || value <= 0) return '';
+    if (value >= 1_000_000) return (value / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
+    if (value >= 1000) return Math.round(value / 1000) + 'k';
+    return String(value);
+  }
+  MR._fmtTokens = _fmtTokens;
+
+  // Per-turn token accounting from assistant message.usage metadata (captured
+  // at parse time). The chip counts what the turn CONSUMED: input + output +
+  // cache writes (cache reads shown in the breakdown title only).
+  function _usageFromMessage(m) {
+    const usage = m && m.metadata && typeof m.metadata === 'object' ? m.metadata.usage : null;
+    return usage && typeof usage === 'object' ? usage : null;
+  }
+  MR.usageTokensTotal = function (usage) {
+    if (!usage || typeof usage !== 'object') return 0;
+    return (Number(usage.input_tokens) || 0)
+      + (Number(usage.output_tokens) || 0)
+      + (Number(usage.cache_creation_input_tokens) || 0);
+  };
+  MR.usageTitle = function (usage) {
+    if (!usage || typeof usage !== 'object') return '';
+    const parts = [];
+    if (usage.input_tokens) parts.push('in ' + _fmtTokens(usage.input_tokens));
+    if (usage.output_tokens) parts.push('out ' + _fmtTokens(usage.output_tokens));
+    if (usage.cache_creation_input_tokens) parts.push('cache write ' + _fmtTokens(usage.cache_creation_input_tokens));
+    if (usage.cache_read_input_tokens) parts.push('cache read ' + _fmtTokens(usage.cache_read_input_tokens));
+    return parts.join(' · ');
+  };
+  MR._usageFromMessage = _usageFromMessage;
+
+  MR.renderThinkingHtml = function (m, i, meta) {
+    const time = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
+    if (meta.encrypted) {
+      return '<div class="review-msg thinking-block encrypted" data-msg-idx="' + escHtml(String(i)) + '">'
+        + '<div class="msg-header">'
+        + '<span class="msg-role">Thinking</span>'
+        + '<span class="thought-preview">(encrypted by the provider)</span>'
+        + '<span class="msg-time">' + escHtml(time) + '</span>'
+        + '</div>'
+        + '</div>';
+    }
+    const body = _textAfterMarkerLine(m.text);
+    const firstLine = body.split('\n').find(l => l.trim()) || '';
+    return '<div class="review-msg thinking-block"' + MR.rawJsonAttrHtml(m, meta)
+      + ' onclick="if(!MR.hasTextSelectionInside||!MR.hasTextSelectionInside(this)){this.classList.toggle(\'expanded\')}"'
+      + ' onkeydown="' + _toggleOnKeydownHandler() + '" role="button" tabindex="0" data-msg-idx="' + escHtml(String(i)) + '">'
+      + '<div class="msg-header">'
+      + '<span class="msg-role"><span class="thought-chevron">▶</span>Thinking</span>'
+      + '<span class="thought-preview">' + escHtml(_previewFromText(firstLine, 90)) + '</span>'
+      + MR.rawJsonButtonHtml()
+      + '<span class="msg-time">' + escHtml(time) + '</span>'
+      + '</div>'
+      + '<div class="msg-text" onclick="event.stopPropagation()">' + MR.formatMsgText(body) + '</div>'
+      + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>';
+  };
+
+  MR.renderCompactBoundaryHtml = function (m, i, meta) {
+    const parts = [];
+    if (meta.trigger) parts.push(meta.trigger);
+    const tokens = _fmtTokens(meta.preTokens);
+    if (tokens) parts.push(tokens + ' tokens');
+    const label = 'Context compacted' + (parts.length ? ' — ' + parts.join(', ') : '');
+    return '<div class="compact-divider" role="separator" data-msg-idx="' + escHtml(String(i)) + '">'
+      + '<span class="compact-divider-line"></span>'
+      + '<span class="compact-divider-label">' + escHtml(label) + '</span>'
+      + '<span class="compact-divider-line"></span>'
+      + '</div>';
+  };
+
+  MR.renderCompactSummaryHtml = function (m, i, meta) {
+    const time = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
+    const preview = _previewFromText(m.text, 90);
+    return '<div class="review-msg skill-body compact-summary"' + MR.rawJsonAttrHtml(m, meta)
+      + ' onclick="if(!MR.hasTextSelectionInside||!MR.hasTextSelectionInside(this)){this.classList.toggle(\'expanded\')}"'
+      + ' onkeydown="' + _toggleOnKeydownHandler() + '" role="button" tabindex="0" data-msg-idx="' + escHtml(String(i)) + '">'
+      + '<div class="msg-header">'
+      + '<span class="msg-role"><span class="thought-chevron">▶</span>Compacted context</span>'
+      + '<span class="thought-preview">' + escHtml(preview) + '</span>'
+      + MR.rawJsonButtonHtml()
+      + '<span class="msg-time">' + escHtml(time) + '</span>'
+      + '</div>'
+      + '<div class="msg-text" onclick="event.stopPropagation()">' + MR.formatMsgText(m.text) + '</div>'
+      + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>';
+  };
+
+  // ------------------------------------------------------------------
+  // Tool cards: one collapsible card per tool/shell/patch/web-search call,
+  // its result filled in (paired by metadata.callId at render time on the
+  // Review path, live via fillToolCardResult on the streaming path).
+  // ------------------------------------------------------------------
+  const _TOOL_CARD_KINDS = new Set(['tool_call', 'shell', 'patch', 'web_search']);
+
+  MR.prettifyToolName = function (name) {
+    const raw = String(name || '').trim();
+    const mcp = raw.match(/^mcp__([^_]+(?:_[^_]+)*?)__(.+)$/);
+    if (mcp) return mcp[1] + ': ' + mcp[2];
+    return raw || 'tool';
+  };
+
+  function _toolCardTitle(meta) {
+    switch (meta.kind) {
+      case 'shell': return 'Shell';
+      case 'patch': return 'Patch';
+      case 'web_search': return 'Web search';
+      default: return MR.prettifyToolName(meta.tool);
+    }
+  }
+
+  function _toolCardPreview(meta) {
+    if (meta.kind === 'shell') return _previewFromText(meta.command || '', 90);
+    if (meta.kind === 'web_search') return _previewFromText(meta.query || '', 90);
+    if (meta.kind === 'patch') return _previewFromText((meta.files || []).join(', ') || meta.filePath || '', 90);
+    let args = String(meta.argsPreview || '');
+    try {
+      const parsed = JSON.parse(args);
+      if (parsed && typeof parsed === 'object') {
+        const salient = parsed.command || parsed.file_path || parsed.filePath || parsed.pattern || parsed.path || parsed.url || parsed.query;
+        if (salient != null) args = Array.isArray(salient) ? salient.join(' ') : String(salient);
+      }
+    } catch { /* keep raw */ }
+    return _previewFromText(args, 90);
+  }
+
+  // Patch/tool text fallbacks carry a marker first line ("[Patch] a.js",
+  // "[Tool result: Bash]") — the body shows the content after it.
+  function _textAfterMarkerLine(text) {
+    const s = String(text || '');
+    if (!/^\[[^\]]*\]/.test(s)) return s;
+    const nl = s.indexOf('\n');
+    return nl === -1 ? '' : s.slice(nl + 1);
+  }
+
+  function _toolCardInputText(meta, m) {
+    if (meta.kind === 'shell') return meta.command || '';
+    if (meta.kind === 'web_search') return meta.query || '';
+    if (meta.kind === 'patch') return _textAfterMarkerLine(m && m.text);
+    let args = String(meta.argsPreview || '');
+    if (!meta.truncated) {
+      try { args = JSON.stringify(JSON.parse(args), null, 2); } catch { /* keep raw */ }
+    }
+    return args;
+  }
+
+  // Patch input body: real diff when the renderer is available (step: diff
+  // renderer), <pre> fallback otherwise.
+  function _toolCardInputHtml(meta, m) {
+    if (meta.kind === 'patch' && typeof MR.renderPatchDiffHtml === 'function') {
+      const diff = MR.renderPatchDiffHtml(meta, m);
+      if (diff) return diff;
+    }
+    const input = _toolCardInputText(meta, m);
+    if (!input) return '';
+    return '<div class="tool-card-section tool-card-input">'
+      + '<div class="tool-card-section-label">Input</div>'
+      + '<pre><code>' + escHtml(input) + '</code></pre>'
+      + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>';
+  }
+
+  function _toolResultStatus(resultMeta) {
+    if (!resultMeta) return { status: 'pending', label: '' };
+    const exitCode = Number(resultMeta.exitCode);
+    const isError = resultMeta.isError === true || (Number.isFinite(exitCode) && exitCode !== 0);
+    const parts = [];
+    if (Number.isFinite(exitCode) && exitCode !== 0) parts.push('exit ' + exitCode);
+    else if (isError) parts.push('error');
+    const durationMs = Number(resultMeta.durationMs);
+    if (Number.isFinite(durationMs) && durationMs > 0) {
+      parts.push(durationMs >= 1000 ? (durationMs / 1000).toFixed(1) + 's' : durationMs + 'ms');
+    }
+    return { status: isError ? 'error' : 'ok', label: parts.join(' · ') };
+  }
+
+  function _toolResultOutputHtml(resultMsg) {
+    if (!resultMsg) return '';
+    const meta = MR.messageMeta(resultMsg) || {};
+    const output = _textAfterMarkerLine(resultMsg.text);
+    if (typeof MR.renderStructuredPatchHtml === 'function' && Array.isArray(meta.structuredPatch) && meta.structuredPatch.length) {
+      const diff = MR.renderStructuredPatchHtml(meta);
+      if (diff) {
+        return '<div class="tool-card-section tool-card-output">'
+          + '<div class="tool-card-section-label">Result</div>' + diff
+          + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+          + '</div>';
+      }
+    }
+    if (!output) return '';
+    return '<div class="tool-card-section tool-card-output">'
+      + '<div class="tool-card-section-label">Output</div>'
+      + '<pre><code>' + escHtml(output) + '</code></pre>'
+      + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>';
+  }
+
+  // call / result are messages ({text, metadata}); either may be null
+  // (call-only = in-flight or interrupted; result-only = orphaned replay).
+  MR.renderToolCardHtml = function (call, result, i) {
+    const callMeta = call ? (MR.messageMeta(call) || {}) : null;
+    const resultMeta = result ? (MR.messageMeta(result) || {}) : null;
+    const meta = callMeta || { kind: 'tool_call', tool: resultMeta && resultMeta.tool };
+    const anchor = call || result || {};
+    const time = anchor.timestamp ? new Date(anchor.timestamp).toLocaleString() : '';
+    const callId = (callMeta && callMeta.callId) || (resultMeta && resultMeta.callId) || '';
+    const { status, label } = _toolResultStatus(resultMeta);
+    const title = _toolCardTitle(meta);
+    const preview = callMeta ? _toolCardPreview(callMeta) : _previewFromText(_textAfterMarkerLine(result && result.text), 90);
+    return '<div class="review-msg tool-card tool-kind-' + escHtml(meta.kind) + '"'
+      + (callId ? ' data-call-id="' + escHtml(callId) + '"' : '')
+      + ' data-status="' + status + '"'
+      + MR.rawJsonAttrHtml(anchor, callMeta || resultMeta || {})
+      + ' onclick="if(!MR.hasTextSelectionInside||!MR.hasTextSelectionInside(this)){this.classList.toggle(\'expanded\')}"'
+      + ' onkeydown="' + _toggleOnKeydownHandler() + '" role="button" tabindex="0" data-msg-idx="' + escHtml(String(i)) + '">'
+      + '<div class="msg-header">'
+      + '<span class="msg-role"><span class="thought-chevron">▶</span><span class="tool-card-name">' + escHtml(title) + '</span></span>'
+      + '<span class="thought-preview">' + escHtml(preview) + '</span>'
+      + '<span class="tool-card-status">' + escHtml(label) + '</span>'
+      + MR.rawJsonButtonHtml()
+      + '<span class="msg-time">' + escHtml(time) + '</span>'
+      + '</div>'
+      + '<div class="msg-text tool-card-body" onclick="event.stopPropagation()">'
+      + (callMeta ? _toolCardInputHtml(callMeta, call) : '')
+      + _toolResultOutputHtml(result)
+      + '</div>'
+      + '</div>';
+  };
+
+  // ------------------------------------------------------------------
+  // Diff rendering: apply_patch text (*** Begin Patch grammar) and Claude
+  // structuredPatch hunks → per-file collapsible diff tables. Reuses the
+  // code-review diff CSS (.cr-diff-table / .cr-diff-line add|del — linked on
+  // both pages via reviews.css); the JS is intentionally NOT shared with
+  // reviews.js, which is entangled with CR state (comments, context expand).
+  // ------------------------------------------------------------------
+
+  // "*** Begin Patch" grammar → [{path, op, movedTo, hunks:[{header, lines:[{type,text}]}]}]
+  MR.parseApplyPatchText = function (text) {
+    const raw = String(text || '');
+    const start = raw.indexOf('*** Begin Patch');
+    if (start === -1) return [];
+    const lines = raw.slice(start).split('\n');
+    const files = [];
+    let file = null;
+    let hunk = null;
+    const openHunk = (header) => {
+      if (!file) return;
+      hunk = { header: header || '', lines: [] };
+      file.hunks.push(hunk);
+    };
+    for (const line of lines) {
+      const fileStart = line.match(/^\*\*\* (Update|Add|Delete) File: (.+)$/);
+      if (fileStart) {
+        file = {
+          path: fileStart[2].trim(),
+          op: fileStart[1].toLowerCase(),
+          movedTo: '',
+          hunks: [],
+        };
+        files.push(file);
+        hunk = null;
+        continue;
+      }
+      if (!file) continue;
+      const moveTo = line.match(/^\*\*\* Move to: (.+)$/);
+      if (moveTo) { file.movedTo = moveTo[1].trim(); continue; }
+      if (/^\*\*\* End Patch/.test(line) || /^\*\*\* Begin Patch/.test(line)) { file = null; hunk = null; continue; }
+      if (/^@@/.test(line)) { openHunk(line.replace(/^@@\s?/, '').trim()); continue; }
+      const first = line[0];
+      if (first === '+' || first === '-' || first === ' ') {
+        if (!hunk) openHunk('');
+        hunk.lines.push({
+          type: first === '+' ? 'add' : (first === '-' ? 'del' : 'ctx'),
+          text: line.slice(1),
+        });
+      }
+    }
+    return files.filter(f => f.hunks.length || f.op === 'delete');
+  };
+
+  // Claude toolUseResult.structuredPatch (jsdiff hunks) → the same file shape.
+  MR.normalizeStructuredPatch = function (meta) {
+    const hunksIn = meta && Array.isArray(meta.structuredPatch) ? meta.structuredPatch : [];
+    if (!hunksIn.length) return [];
+    const hunks = hunksIn.map(h => ({
+      header: `-${h.oldStart},${h.oldLines} +${h.newStart},${h.newLines}`,
+      oldStart: Number(h.oldStart) || 0,
+      newStart: Number(h.newStart) || 0,
+      lines: (Array.isArray(h.lines) ? h.lines : []).map(l => {
+        const s = String(l);
+        const first = s[0];
+        return {
+          type: first === '+' ? 'add' : (first === '-' ? 'del' : 'ctx'),
+          text: first === '+' || first === '-' || first === ' ' ? s.slice(1) : s,
+        };
+      }),
+    }));
+    return [{ path: String(meta.filePath || ''), op: 'update', movedTo: '', hunks }];
+  };
+
+  MR.renderDiffHtml = function (files) {
+    const list = Array.isArray(files) ? files : [];
+    if (!list.length) return '';
+    return list.map(file => {
+      let adds = 0;
+      let dels = 0;
+      const rows = [];
+      for (const hunk of file.hunks || []) {
+        if (hunk.header) {
+          rows.push('<tr class="cr-diff-hunk-header"><td colspan="4">@@ ' + escHtml(hunk.header) + ' @@</td></tr>');
+        }
+        let oldNum = Number(hunk.oldStart) || 0;
+        let newNum = Number(hunk.newStart) || 0;
+        const hasNums = oldNum > 0 || newNum > 0;
+        for (const line of hunk.lines || []) {
+          const cls = line.type === 'add' ? ' add' : (line.type === 'del' ? ' del' : '');
+          if (line.type === 'add') adds++;
+          if (line.type === 'del') dels++;
+          let oldCell = '';
+          let newCell = '';
+          if (hasNums) {
+            if (line.type !== 'add') oldCell = String(oldNum++);
+            if (line.type !== 'del') newCell = String(newNum++);
+          }
+          rows.push('<tr class="cr-diff-line' + cls + '">'
+            + '<td class="cr-line-num">' + oldCell + '</td>'
+            + '<td class="cr-line-num">' + newCell + '</td>'
+            + '<td class="cr-line-prefix">' + (line.type === 'add' ? '+' : (line.type === 'del' ? '−' : '')) + '</td>'
+            + '<td class="cr-line-content">' + escHtml(line.text) + '</td>'
+            + '</tr>');
+        }
+      }
+      const stat = (adds ? '+' + adds : '') + (adds && dels ? ' ' : '') + (dels ? '−' + dels : '');
+      const pathLabel = file.path + (file.movedTo ? ' → ' + file.movedTo : '');
+      return '<div class="mr-diff-file">'
+        + '<div class="mr-diff-file-header" onclick="this.parentElement.classList.toggle(\'collapsed\');event.stopPropagation()">'
+        + '<span class="mr-diff-op ' + escHtml(file.op || 'update') + '">' + escHtml(file.op || 'update') + '</span>'
+        + '<span class="mr-diff-path">' + escHtml(pathLabel) + '</span>'
+        + (stat ? '<span class="mr-diff-stat">' + escHtml(stat) + '</span>' : '')
+        + '</div>'
+        + (rows.length ? '<table class="cr-diff-table">' + rows.join('') + '</table>' : '')
+        + '</div>';
+    }).join('');
+  };
+
+  // Tool-card hooks (declared in the tool-card section): patch-kind input and
+  // structuredPatch results render as real diffs.
+  MR.renderPatchDiffHtml = function (meta, m) {
+    const files = MR.parseApplyPatchText(_textAfterMarkerLine(m && m.text));
+    if (!files.length) return '';
+    return '<div class="tool-card-section tool-card-input">'
+      + '<div class="tool-card-section-label">Patch</div>'
+      + MR.renderDiffHtml(files)
+      + (meta && meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>';
+  };
+
+  MR.renderStructuredPatchHtml = function (meta) {
+    return MR.renderDiffHtml(MR.normalizeStructuredPatch(meta));
+  };
+
+  // Live fill-in: a tool_result event lands for a card already in the DOM
+  // (matched on data-call-id by the streaming append path).
+  MR.fillToolCardResult = function (cardEl, resultMsg) {
+    if (!cardEl || !resultMsg) return false;
+    const resultMeta = MR.messageMeta(resultMsg) || {};
+    const { status, label } = _toolResultStatus(resultMeta);
+    cardEl.setAttribute('data-status', status);
+    const statusEl = cardEl.querySelector('.tool-card-status');
+    if (statusEl) statusEl.textContent = label;
+    const body = cardEl.querySelector('.tool-card-body');
+    if (body) {
+      const existing = body.querySelector('.tool-card-output');
+      if (existing) existing.remove();
+      const outputHtml = _toolResultOutputHtml(resultMsg);
+      if (outputHtml) {
+        const el = MR._cardElFromHtml(outputHtml);
+        if (el) body.appendChild(el);
+      }
+    }
+    return true;
+  };
+
+  MR._cardElFromHtml = function (html) {
+    const trimmed = String(html || '').trim();
+    if (!trimmed) return null;
+    const tpl = document.createElement('template');
+    // Trusted structural HTML from our own card renderers; message bodies
+    // inside it have already been escaped/sanitized (escHtml/formatMsgText).
+    tpl.innerHTML = trimmed;
+    return tpl.content.firstElementChild;
+  };
+
+  // Hover-revealed {} button + lazy <pre> with the message's JSON. The JSON
+  // rides in data-raw-json (escaped attribute); textContent assignment means
+  // no sanitization concerns on display.
+  MR.rawJsonAttrHtml = function (m, meta) {
+    const payload = { role: m.role, text: m.text, timestamp: m.timestamp, metadata: meta };
+    try { return ' data-raw-json="' + escHtml(JSON.stringify(payload)) + '"'; } catch { return ''; }
+  };
+
+  MR.rawJsonButtonHtml = function () {
+    return '<button class="msg-raw-btn" title="Show raw JSON" '
+      + 'onclick="MR.toggleRawJson(this);event.stopPropagation()">{}</button>';
+  };
+
+  MR.toggleRawJson = function (btn) {
+    const row = btn && btn.closest ? btn.closest('[data-raw-json]') : null;
+    if (!row) return;
+    let pre = row.querySelector('.msg-raw-json');
+    if (!pre) {
+      pre = document.createElement('pre');
+      pre.className = 'msg-raw-json';
+      let raw = row.getAttribute('data-raw-json') || '';
+      try { raw = JSON.stringify(JSON.parse(raw), null, 2); } catch { /* show as-is */ }
+      pre.textContent = raw;
+      row.appendChild(pre);
+      return;
+    }
+    pre.classList.toggle('hidden');
+  };
+
+  MR.renderUnknownKindHtml = function (m, i, meta) {
+    const time = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
+    const kindLabel = String(meta.kindHint || meta.kind || 'unknown');
+    const raw = typeof meta.raw === 'string' && meta.raw ? meta.raw : JSON.stringify(meta);
+    return '<div class="review-msg local-cmd unknown-kind"' + MR.rawJsonAttrHtml(m, meta)
+      + ' onclick="this.classList.toggle(\'expanded\')" onkeydown="' + _toggleOnKeydownHandler() + '" role="button" tabindex="0" data-msg-idx="' + escHtml(String(i)) + '">'
+      + '<div class="msg-header">'
+      + '<span class="msg-role"><span class="thought-chevron">▶</span>Unrecorded event</span>'
+      + '<span class="thought-preview">' + escHtml('kind: ' + kindLabel) + '</span>'
+      + MR.rawJsonButtonHtml()
+      + '<span class="msg-time">' + escHtml(time) + '</span>'
+      + '</div>'
+      + '<div class="msg-text"><pre><code>' + escHtml(raw) + '</code></pre>'
+      + (meta.truncated ? '<div class="msg-truncation-note">(truncated)</div>' : '')
+      + '</div>'
+      + '</div>';
+  };
+
   // ------------------------------------------------------------------
   // Message classification (was index.html classifyMessage).
   // ------------------------------------------------------------------
+  function _isSubagentPromptMessage(m) {
+    const metadata = m && m.metadata && typeof m.metadata === 'object' ? m.metadata : {};
+    return m && m.role === 'system' && metadata.sourceKind === 'subagent' && metadata.originalRole === 'user';
+  }
+
   MR.classifyMessage = function (m, stripped, isToolOnly) {
     const text = m.text || '';
+    // Structured-capture rows: meta-first, before all text heuristics. Kinds
+    // whose card renderer hasn't landed yet fall through to the legacy
+    // pipeline (their text fallback renders exactly like pre-capture rows).
+    const meta = MR.messageMeta(m);
+    if (meta) {
+      if (meta.kind === 'unknown' || !_KNOWN_META_KINDS.has(meta.kind)) return 'unknown-kind';
+      if (_TOOL_CARD_KINDS.has(meta.kind)) return 'tool-card';
+      if (meta.kind === 'tool_result') return 'tool-card-result';
+      if (meta.kind === 'reasoning') return 'thinking';
+      if (meta.kind === 'compact_boundary') return 'compact-boundary';
+      if (meta.kind === 'compact_summary') return 'compact-summary';
+    }
     if ((m.role === 'assistant' || m.role === 'system') && MR.isCodexOperationalWarning(text)) return 'codex-warning';
+    if (m.role === 'system' && /^\[Wall-E (?:error|aborted)\]/i.test(text)) return 'walle-error';
+    if (_isSubagentPromptMessage(m)) return 'subagent-prompt';
     // System role messages (tool results, task notifications) — treat as self-thought
     if (m.role === 'system') return 'self-thought';
     // User-role messages that are actually slash commands or injected skill
@@ -691,8 +1414,10 @@
 	  }
 
 	  function _isPromptItem(item) {
-	    if (!item || !item.m || item.m.role !== 'user') return false;
+	    if (!item || !item.m) return false;
 	    const text = String(item.m.text || '').trim();
+	    if (item.msgType === 'subagent-prompt') return !!text;
+	    if (item.m.role !== 'user') return false;
 	    if (!text && item.msgType !== 'command') return false;
 	    return item.msgType === 'key' || item.msgType === 'command';
 	  }
@@ -712,8 +1437,11 @@
 	    let detail = 0;
 	    for (const item of responses) {
 	      if (item.m.role === 'assistant') assistant++;
-	      tools += _toolNamesFromText(item.m.text).length;
-	      if (item.msgType === 'self-thought' || item.msgType === 'skill-body' || item.msgType === 'local-cmd' || item.msgType === 'tool-result' || item.msgType === 'summary') detail++;
+	      // Tool cards count once each (their text fallback may or may not carry
+	      // a [Tool: …] token, so counting the card avoids double/zero counts).
+	      if (item.msgType === 'tool-card') tools += 1;
+	      else tools += _toolNamesFromText(item.m.text).length;
+	      if (item.msgType === 'self-thought' || item.msgType === 'skill-body' || item.msgType === 'local-cmd' || item.msgType === 'tool-result' || item.msgType === 'tool-card-result' || item.msgType === 'summary') detail++;
 	    }
 	    return { assistant, tools, detail, total: responses.length };
 	  }
@@ -739,6 +1467,19 @@
 	    if (counts.tools) badges.push(counts.tools + ' tool' + (counts.tools === 1 ? '' : 's'));
 	    if (counts.detail) badges.push(counts.detail + ' detail' + (counts.detail === 1 ? '' : 's'));
 	    if (!counts.total && turn.type !== 'setup') badges.push('no response yet');
+	    // Token chip: sum assistant usage metadata across the turn's responses.
+	    let usageTotal = 0;
+	    const usageSum = { input_tokens: 0, output_tokens: 0, cache_creation_input_tokens: 0, cache_read_input_tokens: 0 };
+	    for (const item of turn.responses || []) {
+	      const usage = _usageFromMessage(item.m);
+	      if (!usage) continue;
+	      usageTotal += MR.usageTokensTotal(usage);
+	      for (const key of Object.keys(usageSum)) usageSum[key] += Number(usage[key]) || 0;
+	    }
+	    if (usageTotal > 0) {
+	      badges.push('<span class="prompt-turn-badge token-chip" title="' + escHtml(MR.usageTitle(usageSum)) + '">'
+	        + escHtml(_fmtTokens(usageTotal) + ' tok') + '</span>');
+	    }
 	    const alert = _turnAlert(turn);
 	    if (alert) badges.push('<span class="prompt-turn-badge prompt-turn-alert ' + alert.level + '">' + escHtml(alert.label) + '</span>');
 	    return badges.map(b => {
@@ -751,18 +1492,24 @@
 	    const m = item.m || {};
 	    const time = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
 	    const cmd = item.msgType === 'command' ? MR.parseCommandInvocation(m.text) : null;
+	    const isSubagentPrompt = item.msgType === 'subagent-prompt';
+	    const displayText = cmd ? (cmd.args || '') : (m.text || '');
+	    const attachmentHtml = _appendReviewAttachmentsHtml(Object.assign({}, m, { text: displayText }));
 	    const bodyHtml = cmd
-	      ? (cmd.args ? MR.formatMsgText(cmd.args) : '<span class="msg-empty">(no arguments)</span>')
-	      : MR.formatMsgText(m.text || '');
+	      ? _formatDisplayTextHtml(displayText, attachmentHtml ? '<span class="msg-empty">(image attachment)</span>' : '<span class="msg-empty">(no arguments)</span>')
+	      : _formatDisplayTextHtml(displayText, attachmentHtml ? '<span class="msg-empty">(image attachment)</span>' : '');
 	    const badge = cmd ? '<span class="msg-cmd-badge" title="Slash command">/' + escHtml(cmd.name) + '</span>' : '';
 	    const parentUuid = m.parentUuid ? ' data-parent-uuid="' + escHtml(m.parentUuid) + '"' : '';
-	    return '<div class="review-msg user key-msg prompt-turn-prompt"' + parentUuid + '>'
+	    const roleClass = isSubagentPrompt ? 'subagent-prompt' : 'user';
+	    const roleLabel = isSubagentPrompt ? (m.agentLabel || m.roleLabel || 'Subagent prompt') : 'You';
+	    return '<div class="review-msg ' + roleClass + ' key-msg prompt-turn-prompt"' + parentUuid + '>'
 	      + '<div class="msg-header">'
-	      + '<span class="msg-role">You</span>'
+	      + '<span class="msg-role">' + escHtml(roleLabel) + '</span>'
 	      + badge
 	      + '<span class="msg-time">' + escHtml(time) + '</span>'
 	      + '</div>'
 	      + '<div class="msg-text" data-msg-idx="' + item.i + '">' + bodyHtml + '</div>'
+	      + attachmentHtml
 	      + '</div>';
 	  }
 
@@ -839,12 +1586,16 @@
   // ------------------------------------------------------------------
 
   MR.renderReviewMsg = function (m, i, msgType) {
+    const metaCard = MR.renderMetaCardHtml(m, i);
+    if (metaCard) return metaCard;
     const time = m.timestamp ? new Date(m.timestamp).toLocaleString() : '';
-    const textHtml = MR.formatMsgText(m.text);
+    const displayText = _messageTextForDisplay(m.text || '');
+    const attachmentHtml = _appendReviewAttachmentsHtml(Object.assign({}, m, { text: m.text || '' }));
+    const textHtml = _formatDisplayTextHtml(m.text || '', attachmentHtml ? '<span class="msg-empty">(image attachment)</span>' : '');
     const hasRenderedText = !!String(textHtml || '').trim();
-    const needsCollapse = m.text.length > 1500 || m.text.split('\n').length > 30;
-    const stripped = m.text.replace(/\[Tool: [^\]]+\]/g, '').trim();
-    const isToolOnly = stripped.length === 0 && /\[Tool: /.test(m.text);
+    const needsCollapse = displayText.length > 1500 || displayText.split('\n').length > 30;
+    const stripped = displayText.replace(/\[Tool: [^\]]+\]/g, '').trim();
+    const isToolOnly = stripped.length === 0 && /\[Tool: /.test(displayText);
     if (!msgType) msgType = MR.classifyMessage(m, stripped, isToolOnly);
 
     if (msgType === 'command') {
@@ -852,7 +1603,9 @@
       // after `/name`. Render as a real user message but with a small badge
       // identifying the command — the badge replaces the raw envelope clutter.
       const cmd = MR.parseCommandInvocation(m.text) || { name: '', args: '' };
-      const argsHtml = cmd.args ? MR.formatMsgText(cmd.args) : '<span class="msg-empty">(no arguments)</span>';
+      const cmdMessage = Object.assign({}, m, { text: cmd.args || '' });
+      const cmdAttachmentHtml = _appendReviewAttachmentsHtml(cmdMessage);
+      const argsHtml = _formatDisplayTextHtml(cmd.args || '', cmdAttachmentHtml ? '<span class="msg-empty">(image attachment)</span>' : '<span class="msg-empty">(no arguments)</span>');
       return '<div class="review-msg user key-msg command-invocation">'
         + '<div class="msg-header">'
         + '<span class="msg-role">You</span>'
@@ -860,6 +1613,7 @@
         + '<span class="msg-time">' + escHtml(time) + '</span>'
         + '</div>'
         + '<div class="msg-text" data-msg-idx="' + i + '">' + argsHtml + '</div>'
+        + cmdAttachmentHtml
         + '</div>';
     }
 
@@ -916,15 +1670,17 @@
         + '</div>';
     }
 
-    const isKey = msgType === 'key';
-    if (!hasRenderedText && !isToolOnly) return '';
-    const roleLabel = m.role === 'user' ? 'You' : (m.agentLabel || m.roleLabel || 'Claude');
-    return '<div class="review-msg ' + m.role + (isToolOnly ? ' tool-only' : '') + (isKey ? ' key-msg' : '') + '">'
+    const isWalleError = msgType === 'walle-error';
+    const isKey = msgType === 'key' || isWalleError;
+    if (!hasRenderedText && !isToolOnly && !attachmentHtml) return '';
+    const roleLabel = isWalleError ? 'Wall-E Error' : (m.role === 'user' ? 'You' : (m.agentLabel || m.roleLabel || 'Claude'));
+    return '<div class="review-msg ' + m.role + (isToolOnly ? ' tool-only' : '') + (isKey ? ' key-msg' : '') + (isWalleError ? ' walle-error-msg' : '') + '">'
       + '<div class="msg-header">'
       + '<span class="msg-role">' + escHtml(roleLabel) + '</span>'
       + '<span class="msg-time">' + escHtml(time) + '</span>'
       + '</div>'
       + '<div class="msg-text' + (needsCollapse ? ' collapsed' : '') + '" data-msg-idx="' + i + '">' + textHtml + '</div>'
+      + attachmentHtml
       + (needsCollapse ? '<button class="msg-expand visible" onclick="toggleMsgExpand(this)">Show more</button>' : '')
       + '</div>';
   };
@@ -964,6 +1720,32 @@
 
 	  MR.groupMessages = function (messages) {
 	    const groups = [];
+      // Tool-call ↔ tool-result pairing by metadata.callId: a result claims
+      // the FIRST unclaimed call with its id; claimed results are skipped at
+      // their own index (they render inside the call's card). Results can be
+      // non-adjacent (parallel tool calls interleave).
+      const resultIdxByCallId = new Map();
+      const claimedResultIdxs = new Set();
+      for (let ri = 0; ri < messages.length; ri += 1) {
+        const rMeta = MR.messageMeta(messages[ri]);
+        if (rMeta && rMeta.kind === 'tool_result' && rMeta.callId && !resultIdxByCallId.has(rMeta.callId)) {
+          resultIdxByCallId.set(rMeta.callId, ri);
+        }
+      }
+      let sessionWarningItems = null;
+      let sessionWarningsInserted = false;
+      const collectSessionWarnings = () => {
+        if (sessionWarningItems) return sessionWarningItems;
+        sessionWarningItems = [];
+        for (let wi = 0; wi < messages.length; wi += 1) {
+          const wm = messages[wi];
+          const ws = wm.text.replace(/\[Tool: [^\]]+\]/g, '').trim();
+          const wto = ws.length === 0 && /\[Tool: /.test(wm.text);
+          if (MR.classifyMessage(wm, ws, wto) !== 'codex-warning') continue;
+          sessionWarningItems.push({ m: wm, i: typeof wm._reviewIdx === 'number' ? wm._reviewIdx : wi, stripped: ws, isToolOnly: wto });
+        }
+        return sessionWarningItems;
+      };
 	    let i = 0;
 	    while (i < messages.length) {
 	      const m = messages[i];
@@ -972,17 +1754,29 @@
 	      const isToolOnly = stripped.length === 0 && /\[Tool: /.test(m.text);
 	      const msgType = MR.classifyMessage(m, stripped, isToolOnly);
 
-      if (msgType === 'codex-warning') {
-        const warningItems = [];
-        while (i < messages.length) {
-          const gm = messages[i];
-          const gs = gm.text.replace(/\[Tool: [^\]]+\]/g, '').trim();
-          const gto = gs.length === 0 && /\[Tool: /.test(gm.text);
-          if (MR.classifyMessage(gm, gs, gto) !== 'codex-warning') break;
-          warningItems.push({ m: gm, i: typeof gm._reviewIdx === 'number' ? gm._reviewIdx : i, stripped: gs, isToolOnly: gto });
-          i++;
+      if (msgType === 'tool-card') {
+        const callMeta = MR.messageMeta(m);
+        let result = null;
+        const resultIdx = callMeta && callMeta.callId ? resultIdxByCallId.get(callMeta.callId) : undefined;
+        if (resultIdx !== undefined && resultIdx > i && !claimedResultIdxs.has(resultIdx)) {
+          claimedResultIdxs.add(resultIdx);
+          const rm = messages[resultIdx];
+          result = { m: rm, i: typeof rm._reviewIdx === 'number' ? rm._reviewIdx : resultIdx };
+        }
+        groups.push({ type: 'tool-card', call: { m, i: idx }, result });
+        i++;
+      } else if (msgType === 'tool-card-result') {
+        if (!claimedResultIdxs.has(i)) {
+          // Orphaned result (call outside this page/window) — completed card.
+          groups.push({ type: 'tool-card', call: null, result: { m, i: idx } });
         }
-        groups.push({ type: 'codex-warning-group', items: warningItems });
+        i++;
+      } else if (msgType === 'codex-warning') {
+        if (!sessionWarningsInserted) {
+          groups.push({ type: 'codex-warning-group', items: collectSessionWarnings() });
+          sessionWarningsInserted = true;
+        }
+        i++;
       } else if (msgType === 'self-thought') {
         const groupItems = [];
         while (i < messages.length) {
@@ -1006,6 +1800,9 @@
     if (g.type === 'message') {
       return MR.renderReviewMsg(g.m, g.i, g.msgType);
     }
+    if (g.type === 'tool-card') {
+      return MR.renderToolCardHtml(g.call && g.call.m, g.result && g.result.m, g.call ? g.call.i : g.result.i);
+    }
     if (g.type === 'codex-warning-group') {
       return MR.renderCodexWarningGroup(g.items || []);
     }
@@ -1185,6 +1982,125 @@
     return group;
   };
 
+  function _createSystemActivityItemRow(evt, time) {
+    const text = _conversationEventTextValue(evt);
+    const row = document.createElement('div');
+    row.className = 'review-msg system system-activity-item';
+    if (evt?.data?.parentUuid) row.dataset.parentUuid = evt.data.parentUuid;
+    if (time) row.dataset.time = time;
+    row.dataset.systemPreview = _summaryPreview(text) || 'No details recorded';
+
+    const header = document.createElement('div');
+    header.className = 'msg-header';
+    const role = document.createElement('span');
+    role.className = 'msg-role';
+    role.textContent = 'System';
+    const preview = document.createElement('span');
+    preview.className = 'thought-preview';
+    preview.textContent = row.dataset.systemPreview;
+    header.appendChild(role);
+    header.appendChild(preview);
+    if (time) {
+      const t = document.createElement('span');
+      t.className = 'msg-time';
+      t.textContent = time;
+      header.appendChild(t);
+    }
+    row.appendChild(header);
+
+    const body = document.createElement('div');
+    body.className = 'msg-text';
+    if (text) {
+      const formatted = MR.formatMsgText(_messageTextForDisplay(text));
+      body.innerHTML = (typeof DOMPurify !== 'undefined') ? DOMPurify.sanitize(formatted) : formatted;
+    } else {
+      const empty = document.createElement('span');
+      empty.className = 'msg-empty';
+      empty.textContent = '(no details recorded)';
+      body.appendChild(empty);
+    }
+    row.appendChild(body);
+    return row;
+  }
+
+  function _isLowValueSystemSummary(evt, text, toolUses) {
+    if (String(text || '').trim()) return false;
+    if (Array.isArray(toolUses) && toolUses.length) return false;
+    const data = evt && evt.data && typeof evt.data === 'object' ? evt.data : {};
+    const content = data.content ?? evt?.content;
+    if (content == null) return true;
+    return !_conversationContentToText(content).trim();
+  }
+
+  MR.refreshConversationSystemGroup = function (group) {
+    if (!group || !group.querySelector) return;
+    const items = group.querySelector('.thought-group-items');
+    if (!items) return;
+    const rows = Array.from(items.children || []);
+    const countEl = group.querySelector('.thought-group-count');
+    if (countEl) {
+      const eventCount = rows.length;
+      countEl.textContent = '— ' + eventCount + ' event' + (eventCount === 1 ? '' : 's');
+    }
+    const previews = [];
+    for (const row of rows) {
+      const p = row.dataset?.systemPreview || '';
+      if (p && !previews.includes(p)) previews.push(p);
+    }
+    const previewEl = group.querySelector('.thought-group-preview');
+    if (previewEl) {
+      previewEl.textContent = previews.length === 1 ? previews[0] : (previews[0] || 'No details recorded');
+    }
+    const timeEl = group.querySelector('.thought-group-time');
+    if (timeEl) {
+      const f = group.dataset.firstTime || rows[0]?.dataset?.time || '';
+      const l = group.dataset.lastTime || rows[rows.length - 1]?.dataset?.time || '';
+      timeEl.textContent = (f && l && f !== l) ? f + ' – ' + l : (l || f);
+    }
+  };
+
+  MR.createConversationSystemGroup = function (evt, time) {
+    const group = document.createElement('div');
+    group.className = 'thought-group conv-system-group system-activity-group';
+    group.dataset.firstTime = time || '';
+    group.dataset.lastTime = time || '';
+    group.addEventListener('click', () => group.classList.toggle('expanded'));
+
+    const header = document.createElement('div');
+    header.className = 'thought-group-header';
+    const label = document.createElement('span');
+    label.className = 'thought-group-label';
+    const chev = document.createElement('span');
+    chev.className = 'thought-chevron';
+    chev.textContent = '▶';
+    label.appendChild(chev);
+    const labelText = document.createElement('span');
+    labelText.textContent = 'System';
+    label.appendChild(labelText);
+    const count = document.createElement('span');
+    count.className = 'thought-group-count';
+    count.textContent = '— 1 event';
+    label.appendChild(count);
+
+    const preview = document.createElement('span');
+    preview.className = 'thought-group-preview';
+    preview.textContent = 'No details recorded';
+    const tEl = document.createElement('span');
+    tEl.className = 'thought-group-time';
+    tEl.textContent = time || '';
+    header.appendChild(label);
+    header.appendChild(preview);
+    header.appendChild(tEl);
+
+    const items = document.createElement('div');
+    items.className = 'thought-group-items';
+    items.appendChild(_createSystemActivityItemRow(evt, time));
+    group.appendChild(header);
+    group.appendChild(items);
+    MR.refreshConversationSystemGroup(group);
+    return group;
+  };
+
   // ------------------------------------------------------------------
   // Conversation-tab renderers — return DOM elements with event
   // listeners attached directly. Used inside the active session view
@@ -1236,6 +2152,10 @@
 
   MR.refreshConversationActivityGroup = function (group) {
     if (!group || !group.querySelector) return;
+    if (_isConversationCombinedActivityGroup(group)) {
+      MR.refreshConversationCombinedActivityGroup(group);
+      return;
+    }
     const items = group.querySelector('.thought-group-items');
     if (!items) return;
     const rows = Array.from(items.children || []);
@@ -1281,14 +2201,150 @@
   // 'summary'). In the unit-test harness, the envelope shape is
   // `{ type: 'stream-event', data: { type: 'assistant', ... } }`. Look
   // at evt.type first, fall back to evt.data.type.
-  const _ROLES = ['user', 'assistant', 'tool_result', 'summary'];
+  const _ROLES = ['user', 'assistant', 'tool_result', 'summary', 'system'];
+
+  function _conversationContentToText(content) {
+    if (content == null) return '';
+    if (typeof content === 'string') return content;
+    if (Array.isArray(content)) {
+      return content.map((part) => {
+        if (!part) return '';
+        if (typeof part === 'string') return part;
+        if (part.type === 'text' || part.type === 'input_text') return part.text || part.content || '';
+        if (part.type === 'tool_result') return part.content || part.text || '';
+        if (part.type === 'tool_use') return '[Tool: ' + (part.name || 'tool') + ']';
+        if (part.text || part.content || part.message) return part.text || part.content || part.message;
+        return '';
+      }).filter(Boolean).join('\n');
+    }
+    if (content && typeof content === 'object') {
+      if (content.text || content.content || content.message) return _conversationContentToText(content.text || content.content || content.message);
+      try { return JSON.stringify(content); } catch { return String(content); }
+    }
+    return String(content || '');
+  }
+
+  function _conversationEventTextValue(evt) {
+    const data = evt && evt.data && typeof evt.data === 'object' ? evt.data : {};
+    return _conversationContentToText(
+      data.text ?? data.message ?? data.content ?? evt?.text ?? evt?.message ?? evt?.content ?? ''
+    ).trim();
+  }
+
+  function _stripSystemReminderText(text) {
+    return String(text || '')
+      .replace(/<system-reminder>[\s\S]*?<\/system-reminder>/gi, '')
+      .replace(/<\/?system-reminder[^>]*>/gi, '')
+      .trim();
+  }
+
+  function _isSystemOnlyUserEvent(evt, text) {
+    const data = evt && evt.data && typeof evt.data === 'object' ? evt.data : {};
+    if (data.system === true || data.isSystem === true || data.role === 'system') return true;
+    const content = data.content ?? evt?.content;
+    if (Array.isArray(content) && content.some(part => part && (part.type === 'tool_result' || part.type === 'tool_use'))) return true;
+    const raw = String(text || '');
+    if (!raw) return true;
+    if (raw.includes('<system-reminder>') && !_stripSystemReminderText(raw)) return true;
+    if (raw.includes('<task-notification>')) return true;
+    if (raw.includes('toolu_') && raw.includes('.output')) return true;
+    return false;
+  }
+
+  function _summaryPreview(text) {
+    const value = String(text || '').replace(/\s+/g, ' ').trim();
+    return value.length > 110 ? value.slice(0, 110) + '…' : value;
+  }
+
+  function _wireSummaryToggle(row, header) {
+    if (!row || !header) return;
+    const setExpanded = (expanded) => {
+      row.classList.toggle('expanded', !!expanded);
+      header.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    };
+    header.setAttribute('role', 'button');
+    header.setAttribute('tabindex', '0');
+    header.setAttribute('aria-expanded', row.classList.contains('expanded') ? 'true' : 'false');
+    const toggle = () => setExpanded(!row.classList.contains('expanded'));
+    header.addEventListener('click', toggle);
+    header.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        ev.preventDefault();
+        toggle();
+      }
+    });
+  }
+
+  function _buildConversationSummaryRow(evt, time, opts) {
+    opts = opts || {};
+    const text = _conversationEventTextValue(evt);
+    const row = document.createElement('div');
+    row.className = 'review-msg ' + (opts.roleClass || 'system') + ' summary';
+    if (evt?.data?.parentUuid) row.dataset.parentUuid = evt.data.parentUuid;
+
+    const header = document.createElement('div');
+    header.className = 'msg-header';
+    const role = document.createElement('span');
+    role.className = 'msg-role';
+    const chev = document.createElement('span');
+    chev.className = 'thought-chevron';
+    chev.textContent = '▶';
+    role.appendChild(chev);
+    const label = document.createElement('span');
+    label.textContent = opts.label || 'System';
+    role.appendChild(label);
+    const previewText = _summaryPreview(text) || '(no details recorded)';
+    const preview = document.createElement('span');
+    preview.className = 'thought-preview';
+    preview.textContent = previewText;
+    role.appendChild(preview);
+    header.appendChild(role);
+
+    if (time) {
+      const t = document.createElement('span');
+      t.className = 'msg-time';
+      t.textContent = time;
+      header.appendChild(t);
+    }
+    row.appendChild(header);
+
+    const body = document.createElement('div');
+    body.className = 'msg-text';
+    if (text) {
+      body.innerHTML = MR.formatMsgText(_messageTextForDisplay(text));
+    } else {
+      const empty = document.createElement('span');
+      empty.className = 'msg-empty';
+      empty.textContent = '(no details recorded)';
+      body.appendChild(empty);
+    }
+    row.appendChild(body);
+    _wireSummaryToggle(row, header);
+    return row;
+  }
+
 	  MR.renderConversationEvent = function (evt) {
-	    const text = (evt.data?.text || '').trim();
+	    // Structured-capture rows render the SAME HTML string the Review page
+	    // gets (renderMetaCardHtml), hydrated into a DOM element — parity by
+	    // construction. Falls through when the kind has no card renderer.
+	    const evtMeta = MR.messageMeta(evt);
+	    if (evtMeta) {
+	      const metaMsg = {
+	        role: (evt.data && evt.data.type) || evt.type || 'system',
+	        text: _conversationEventTextValue(evt),
+	        timestamp: evt.timestamp || (evt.data && evt.data.timestamp) || '',
+	        metadata: evtMeta,
+	      };
+	      const card = MR._cardElFromHtml(MR.renderMetaCardHtml(metaMsg, evt.data && evt.data.msgIdx || 0));
+	      if (card) return card;
+	    }
+	    const text = _conversationEventTextValue(evt);
 	    const toolUses = evt.data?.toolUses || [];
 
     let evType = _ROLES.includes(evt.type) ? evt.type : null;
     if (!evType && _ROLES.includes(evt.data?.type)) evType = evt.data.type;
     if (!evType) return null;
+    if (evType === 'system') evType = 'summary';
 
     // Phase 4 reconciliation: empty user events used to be dropped in
     // Conversation (legacy `if (!text) return null`), but Review classifies
@@ -1301,27 +2357,14 @@
     const time = evt.timestamp ? new Date(evt.timestamp).toLocaleString() : '';
 
     if (evType === 'user') {
-      if (!text) {
+      if (_isSystemOnlyUserEvent(evt, text)) {
         // System-only user message (tool_result blocks, hooks, etc.) —
         // render as a compact summary row that the user can expand if
         // they want to inspect. Matches Review's classifier output.
-        const div = document.createElement('div');
-        div.className = 'review-msg user summary';
-        if (evt.data?.parentUuid) div.dataset.parentUuid = evt.data.parentUuid;
-        const header = document.createElement('div');
-        header.className = 'msg-header';
-        const role = document.createElement('span');
-        role.className = 'msg-role';
-        role.textContent = '(system message)';
-        header.appendChild(role);
-        if (time) {
-          const t = document.createElement('span');
-          t.className = 'msg-time';
-          t.textContent = time;
-          header.appendChild(t);
+        if (_isLowValueSystemSummary(evt, text, toolUses)) {
+          return MR.createConversationSystemGroup(evt, time);
         }
-        div.appendChild(header);
-        return div;
+        return _buildConversationSummaryRow(evt, time, { roleClass: 'user', label: 'System' });
       }
       // Slash-command invocation — extract args; render with a /cmd badge.
       const cmd = MR.parseCommandInvocation(text);
@@ -1337,8 +2380,9 @@
         // Insert the badge between role and time so layout matches Review.
         header.insertBefore(badge, header.querySelector('.msg-time') || null);
         div.appendChild(header);
-        if (cmd.args) {
-          _appendTextWithExpand(div, cmd.args);
+        const cmdMessage = Object.assign({}, evt.data || {}, { text: cmd.args || '' });
+        if (cmd.args || MR.extractImageAttachments(cmdMessage).length) {
+          _appendTextWithExpand(div, cmd.args, cmdMessage, { emptyHtml: '<span class="msg-empty">(image attachment)</span>' });
         } else {
           const empty = document.createElement('div');
           empty.className = 'msg-text';
@@ -1381,7 +2425,7 @@
         }
         div.appendChild(header);
         // Body uses DOMPurify (defense-in-depth around marked output).
-        _appendTextWithExpand(div, text);
+        _appendTextWithExpand(div, text, evt.data || evt);
         return div;
       }
       // Local command output — same compact-collapsible treatment.
@@ -1469,7 +2513,7 @@
       div.className = 'review-msg user';
       if (evt.data?.parentUuid) div.dataset.parentUuid = evt.data.parentUuid;
       div.appendChild(_makeHeader('You', time));
-      if (!_appendTextWithExpand(div, text)) return null;
+      if (!_appendTextWithExpand(div, text, evt.data || evt)) return null;
       return div;
     }
 
@@ -1596,10 +2640,15 @@
       const div = document.createElement('div');
       div.className = 'review-msg assistant';
       if (evt.data?.parentUuid) div.dataset.parentUuid = evt.data.parentUuid;
+      const rowUsage = evt.data?.metadata?.usage;
+      if (rowUsage && MR.usageTokensTotal(rowUsage) > 0) {
+        div.dataset.usageTokens = String(MR.usageTokensTotal(rowUsage));
+        div.dataset.usageTitle = MR.usageTitle(rowUsage);
+      }
       const roleLabel = 'Assistant' + (evt.data?.model ? ' (' + evt.data.model + ')' : '');
       div.appendChild(_makeHeader(roleLabel, time));
       if (text) {
-        const hasTextBody = _appendTextWithExpand(div, text);
+        const hasTextBody = _appendTextWithExpand(div, text, evt.data || evt);
         if (!hasTextBody && !toolUses.length) return null;
       }
       else if (!toolUses.length) return null;
@@ -1674,14 +2723,10 @@
     }
 
     if (evType === 'summary') {
-      const div = document.createElement('div');
-      div.className = 'review-msg summary';
-      if (evt.data?.parentUuid) div.dataset.parentUuid = evt.data.parentUuid;
-      const body = document.createElement('div');
-      body.className = 'msg-text';
-      body.textContent = evt.data?.text || '';
-      div.appendChild(body);
-      return div;
+      if (_isLowValueSystemSummary(evt, text, toolUses)) {
+        return MR.createConversationSystemGroup(evt, time);
+      }
+      return _buildConversationSummaryRow(evt, time, { roleClass: 'system', label: 'System' });
     }
 
 	    return null;
@@ -1694,13 +2739,14 @@
 	  }
 
 	  function _conversationEventText(evt) {
-	    return String(evt && evt.data && evt.data.text || '').trim();
+	    return _conversationEventTextValue(evt);
 	  }
 
 	  MR.isConversationPromptEvent = function (evt) {
 	    if (_conversationEventType(evt) !== 'user') return false;
 	    const text = _conversationEventText(evt);
 	    if (!text) return false;
+	    if (_isSystemOnlyUserEvent(evt, text)) return false;
 	    if (MR.parseSkillBody(text) || MR.parseLocalCommand(text) || MR.parseToolResult(text)) return false;
 	    return true;
 	  };
@@ -1728,6 +2774,98 @@
 	    return el.classList.contains('conv-warning-group') && el.classList.contains('codex-warning-group');
 	  }
 
+	  function _isConversationSystemGroup(el) {
+	    if (!el || !el.classList) return false;
+	    return el.classList.contains('conv-system-group') && el.classList.contains('system-activity-group');
+	  }
+
+	  function _isConversationCombinedActivityGroup(el) {
+	    if (!el || !el.classList) return false;
+	    return el.classList.contains('conv-activity-group') && el.classList.contains('combined-activity-group');
+	  }
+
+	  function _isFoldableOperationalActivityGroup(el) {
+	    return _isConversationCombinedActivityGroup(el) || _isConversationToolActivityGroup(el) || _isConversationSystemGroup(el);
+	  }
+
+	  function _setConversationActivityGroupLabel(group, text) {
+	    if (!group || !group.querySelector) return;
+	    const label = group.querySelector('.thought-group-label');
+	    if (!label) return;
+	    let target = label.querySelector('[data-activity-label]');
+	    if (!target) {
+	      target = Array.from(label.children || []).find((child) => {
+	        if (!child || !child.classList) return false;
+	        return !child.classList.contains('thought-chevron') && !child.classList.contains('thought-group-count');
+	      });
+	    }
+	    if (!target && typeof document !== 'undefined') {
+	      target = document.createElement('span');
+	      target.setAttribute('data-activity-label', 'true');
+	      const count = label.querySelector('.thought-group-count');
+	      label.insertBefore(target, count || null);
+	    }
+	    if (target) {
+	      target.setAttribute('data-activity-label', 'true');
+	      target.textContent = text;
+	    }
+	  }
+
+	  function _markConversationCombinedActivityGroup(group) {
+	    if (!group || !group.classList) return group;
+	    group.classList.add('conv-activity-group');
+	    group.classList.add('combined-activity-group');
+	    group.classList.add('tool-activity-group');
+	    group.dataset.activityKind = 'combined';
+	    _setConversationActivityGroupLabel(group, 'Activity');
+	    return group;
+	  }
+
+	  MR.refreshConversationCombinedActivityGroup = function (group) {
+	    if (!group || !group.querySelector) return;
+	    _markConversationCombinedActivityGroup(group);
+	    const items = group.querySelector('.thought-group-items');
+	    if (!items) return;
+	    const rows = Array.from(items.children || []);
+	    const countEl = group.querySelector('.thought-group-count');
+	    if (countEl) {
+	      const itemCount = rows.length;
+	      countEl.textContent = '— ' + itemCount + ' item' + (itemCount === 1 ? '' : 's');
+	    }
+	    const toolNames = [];
+	    const previews = [];
+	    let systemCount = 0;
+	    let toolResultCount = 0;
+	    for (const row of rows) {
+	      if (!row || !row.classList) continue;
+	      if (row.classList.contains('system-activity-item')) systemCount += 1;
+	      if (row.classList.contains('tool-result-item')) toolResultCount += 1;
+	      const rawTools = row.dataset?.toolNames || '';
+	      if (rawTools) {
+	        for (const name of rawTools.split(',')) {
+	          const clean = name.trim();
+	          if (clean) toolNames.push(clean);
+	        }
+	      }
+	      const preview = row.dataset?.activityPreview || row.dataset?.systemPreview || '';
+	      if (preview && preview !== 'No details recorded') previews.push(preview);
+	    }
+	    const summaryParts = [];
+	    const toolSummary = _summarizeNames(toolNames);
+	    if (toolSummary) summaryParts.push(toolSummary);
+	    if (!toolSummary && toolResultCount) summaryParts.push(toolResultCount + ' tool result' + (toolResultCount === 1 ? '' : 's'));
+	    if (systemCount) summaryParts.push(systemCount + ' system event' + (systemCount === 1 ? '' : 's'));
+	    if (!summaryParts.length && previews.length) summaryParts.push(previews[0]);
+	    const previewEl = group.querySelector('.thought-group-preview');
+	    if (previewEl) previewEl.textContent = summaryParts.join(' · ') || 'Activity';
+	    const timeEl = group.querySelector('.thought-group-time');
+	    if (timeEl) {
+	      const f = group.dataset.firstTime || rows[0]?.dataset?.time || '';
+	      const l = group.dataset.lastTime || rows[rows.length - 1]?.dataset?.time || '';
+	      timeEl.textContent = (f && l && f !== l) ? f + ' – ' + l : (l || f);
+	    }
+	  };
+
 	  function _nodeWithin(root, node) {
 	    if (!root || !node) return false;
 	    const el = node.nodeType === 1 ? node : node.parentNode;
@@ -1741,9 +2879,21 @@
 	    return _nodeWithin(root, sel.anchorNode) || _nodeWithin(root, sel.focusNode);
 	  };
 
+	  MR.isPromptTurnPromptTextTarget = function (ev, headerEl) {
+	    if (!ev || !headerEl || !ev.target || !ev.target.closest) return false;
+	    const textEl = ev.target.closest('.prompt-turn-prompt .msg-text');
+	    return !!(textEl && headerEl.contains(textEl));
+	  };
+
 	  MR.shouldKeepPromptTextSelection = function (ev, headerEl) {
+	    if (!MR.isPromptTurnPromptTextTarget(ev, headerEl)) return false;
+	    return MR.hasTextSelectionInside(headerEl);
+	  };
+
+	  MR.shouldIgnorePromptTurnHeaderToggle = function (ev, headerEl) {
 	    if (!ev || !headerEl || !ev.target || !ev.target.closest) return false;
-	    if (!ev.target.closest('.prompt-turn-prompt .msg-text')) return false;
+	    if (ev.target.closest('a,button,input,textarea,select')) return true;
+	    if (MR.shouldKeepPromptTextSelection(ev, headerEl)) return true;
 	    return MR.hasTextSelectionInside(headerEl);
 	  };
 
@@ -1754,31 +2904,41 @@
 	    let targetKind = null;
 	    let merged = false;
 	    for (const child of Array.from(body.children || [])) {
-	      const kind = _isConversationToolActivityGroup(child) ? 'tool' : (_isConversationWarningGroup(child) ? 'warning' : null);
-	      if (!kind) continue;
-	      if (!target) {
-	        target = child;
-	        targetKind = kind;
+	      if (!_isFoldableOperationalActivityGroup(child)) {
+	        if (_isConversationWarningGroup(child)) {
+	          target = null;
+	          targetKind = null;
+	        }
 	        continue;
 	      }
-	      if (kind !== targetKind) {
+	      const childKind = _isConversationCombinedActivityGroup(child)
+	        ? 'activity'
+	        : (_isConversationToolActivityGroup(child) ? 'tool' : 'system');
+	      if (!target) {
 	        target = child;
-	        targetKind = kind;
+	        targetKind = childKind;
 	        continue;
 	      }
 	      const targetItems = target.querySelector('.thought-group-items');
 	      const childItems = child.querySelector('.thought-group-items');
 	      if (!targetItems || !childItems) continue;
+	      const shouldPromote = targetKind === 'activity' || childKind === 'activity' || childKind !== targetKind;
 	      const keepExpanded = target.classList.contains('expanded') || child.classList.contains('expanded');
 	      while (childItems.firstChild) targetItems.appendChild(childItems.firstChild);
 	      const childLast = child.dataset && child.dataset.lastTime;
 	      if (childLast) target.dataset.lastTime = childLast;
 	      if (keepExpanded && target.classList && !target.classList.contains('expanded')) target.classList.add('expanded');
 	      child.remove();
+	      if (shouldPromote) {
+	        _markConversationCombinedActivityGroup(target);
+	        targetKind = 'activity';
+	      }
 	      merged = true;
 	    }
-	    if (target && targetKind === 'warning' && typeof MR.refreshConversationWarningGroup === 'function') {
-	      MR.refreshConversationWarningGroup(target);
+	    if (target && _isConversationCombinedActivityGroup(target) && typeof MR.refreshConversationCombinedActivityGroup === 'function') {
+	      MR.refreshConversationCombinedActivityGroup(target);
+	    } else if (target && _isConversationSystemGroup(target) && typeof MR.refreshConversationSystemGroup === 'function') {
+	      MR.refreshConversationSystemGroup(target);
 	    } else if (target && typeof MR.refreshConversationActivityGroup === 'function') {
 	      MR.refreshConversationActivityGroup(target);
 	    }
@@ -1810,13 +2970,29 @@
 	    if (responseBlocks) appendBadge(responseBlocks + ' detail' + (responseBlocks === 1 ? '' : 's'));
 	    else appendBadge('no response yet');
 	    if (toolBlocks) appendBadge(toolBlocks + ' tool block' + (toolBlocks === 1 ? '' : 's'));
+	    // Token chip: assistant rows stamp data-usage-tokens at render time.
+	    // (Guarded: rendering test harnesses stub the DOM without selectors.)
+	    let usageTotal = 0;
+	    const usageTitles = [];
+	    let usageEls = [];
+	    try { usageEls = Array.from(body.querySelectorAll('[data-usage-tokens]') || []); } catch { usageEls = []; }
+	    for (const el of usageEls) {
+	      usageTotal += Number(el.dataset && el.dataset.usageTokens) || 0;
+	      if (el.dataset && el.dataset.usageTitle) usageTitles.push(el.dataset.usageTitle);
+	    }
+	    if (usageTotal > 0) {
+	      const chip = document.createElement('span');
+	      chip.className = 'prompt-turn-badge token-chip';
+	      chip.textContent = _fmtTokens(usageTotal) + ' tok';
+	      chip.title = usageTitles.join('\n');
+	      meta.appendChild(chip);
+	    }
 	  };
 
 	  function _wirePromptTurnHeader(turnEl, header) {
 	    if (!turnEl || !header) return;
 	    const toggle = (ev) => {
-	      if (ev && ev.target && ev.target.closest && ev.target.closest('a,button,input,textarea,select')) return;
-	      if (MR.shouldKeepPromptTextSelection(ev, header)) return;
+	      if (MR.shouldIgnorePromptTurnHeaderToggle(ev, header)) return;
 	      MR.setPromptTurnExpanded(turnEl, !turnEl.classList.contains('expanded'));
 	    };
 	    header.addEventListener('click', toggle);
@@ -1904,19 +3080,31 @@
   // The body uses the same 1500-char / 30-line threshold as Review so the
   // two views feel identical for long messages — closes the 3000-char hard
   // truncate gap that Conversation had pre-Phase-2.
-  function _appendTextWithExpand(host, text) {
-    const needsCollapse = text.length > 1500 || text.split('\n').length > 30;
+  function _appendTextWithExpand(host, text, message, opts) {
+    opts = opts || {};
+    const displayText = _messageTextForDisplay(text);
+    const attachmentMessage = Object.assign({}, message || {}, { text: text || '' });
+    const attachmentHtml = MR.renderImageAttachmentsHtml(attachmentMessage);
+    const needsCollapse = displayText.length > 1500 || displayText.split('\n').length > 30;
     // formatMsgText already runs DOMPurify; we re-sanitize at the assignment
     // site to match Review's defense-in-depth pattern. No untrusted HTML
     // ever reaches innerHTML without sanitization.
+    const rendered = displayText ? MR.formatMsgText(displayText) : (opts.emptyHtml || '');
     const safe = (typeof DOMPurify !== 'undefined')
-      ? DOMPurify.sanitize(MR.formatMsgText(text))
-      : MR.formatMsgText(text);
+      ? DOMPurify.sanitize(rendered)
+      : rendered;
     const body = document.createElement('div');
     body.className = 'msg-text' + (needsCollapse ? ' collapsed' : '');
     body.innerHTML = safe;
-    if (!_hasMeaningfulMarkdownContent(body)) return false;
+    if (!_hasMeaningfulMarkdownContent(body) && !attachmentHtml) return false;
     host.appendChild(body);
+    if (attachmentHtml) {
+      const template = document.createElement('template');
+      template.innerHTML = (typeof DOMPurify !== 'undefined')
+        ? DOMPurify.sanitize(attachmentHtml, { ADD_ATTR: _IMAGE_ATTACHMENT_SAFE_ATTRS })
+        : attachmentHtml;
+      while (template.content.firstChild) host.appendChild(template.content.firstChild);
+    }
     if (needsCollapse) {
       const btn = document.createElement('button');
       btn.className = 'msg-expand visible';