osai-agent 4.0.0

package/src/ui/components/MessageHistory.js

@@ -0,0 +1,1200 @@
+import React, { useMemo, useRef } from 'react';
+import { Box, Text, Static, useWindowSize } from 'ink';
+import { h } from '../h.js';
+import chalk from 'chalk';
+import { highlightCode } from '../../parser/markdown.js';
+import { EditFileDiff, NewFileDiff, AppendFileDiff, DeleteFileDiff } from './DiffView.js';
+import { ENABLE_UI_ANIMATIONS, useAnimationFrame } from '../animation.js';
+import { SubagentPanel } from './SubagentPanel.js';
+
+const stripAnsi = (s) => (s || '').replace(/\x1b\[[0-9;]*m/g, '').replace(/\x1b\]8;;[^\x1b]*\x1b\\/g, '');
+const visibleLen = (s) => stripAnsi(s).length;
+
+// Version légère de renderInline pour les cellules de tableau :
+// - Inline code sans padding latéral (évite les espaces superflus dans les colonnes)
+// - Mêmes couleurs que renderInline() mais sans les espaces autour du code
+const renderCellInline = (text) => {
+  const clean = (text || '').replace(/\x1b\[[0-9;]*[mA-Za-z]/g, '');
+  return clean
+    .replace(/\*\*\*([^*]+)\*\*\*/g, (_, t) => chalk.bold.italic.hex('#c0caf5')(t))
+    .replace(/\*\*([^*]+)\*\*/g,     (_, t) => chalk.bold.hex('#c0caf5')(t))
+    .replace(/\*([^*\n]+)\*/g,       (_, t) => chalk.italic.hex('#c0caf5')(t))
+    .replace(/`([^`\n]+)`/g,         (_, t) => chalk.bgHex('#1a1b26').hex('#7dcfff')(t))
+    .replace(/~~([^~]+)~~/g,         (_, t) => chalk.strikethrough.hex('#565f89')(t))
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) =>
+      chalk.underline.hex('#7aa2f7')(label) + chalk.hex('#565f89')(` (${url})`)
+    );
+};
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const THINKING_DOTS = ['', '.', '..', '...'];
+const WRITING_DOTS = ['', '·', '··', '···'];
+
+const WRITE_TOOLS = new Set(['WRITE_FILE', 'EDIT_FILE', 'APPEND_FILE', 'DELETE_FILE', 'MOVE_FILE', 'COPY_FILE', 'CREATE_DIR']);
+const READING_DOTS = ['', '∘', '∘∘', '∘∘∘'];
+const READ_TOOLS = new Set(['READ_FILE', 'LIST_DIR', 'TREE_VIEW', 'FILE_INFO']);
+
+function formatDuration(seconds) {
+  if (!seconds || seconds < 0) return '0.0s';
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (mins < 60) return `${mins}m ${secs.toFixed(1)}s`;
+  const hours = Math.floor(mins / 60);
+  const remainMins = mins % 60;
+  return `${hours}h ${remainMins}m ${Math.floor(secs)}s`;
+}
+
+const TOOL_COLORS = {
+  READ_FILE: '#9ece6a', WRITE_FILE: '#e0af68', EDIT_FILE: '#e0af68',
+  APPEND_FILE: '#e0af68', DELETE_FILE: '#f7768e', FETCH_URL: '#7dcfff',
+  WEB_SEARCH: '#bb9af7', LOCAL_CMD: '#f7768e', SSH_CMD: '#f7768e',
+  GREP: '#73daca', GLOB: '#73daca', SEARCH_FILE: '#73daca',
+  LIST_DIR: '#9ece6a', TREE_VIEW: '#9ece6a', FILE_INFO: '#9ece6a',
+  CREATE_DIR: '#e0af68', RUN_SCRIPT: '#f7768e', MOVE_FILE: '#e0af68',
+  COPY_FILE: '#e0af68', GIT: '#f7768e', BROWSE: '#7dcfff',
+  BROWSE_SEARCH: '#bb9af7', BROWSE_EXTRACT: '#7dcfff',
+  ASK_USER: '#7aa2f7', PLAN_MODE: '#7dcfff', DIAG_POST_EDIT: '#e0af68',
+  TODO_ADD: '#9ece6a', TODO_COMPLETE: '#9ece6a', TODO_UPDATE: '#9ece6a',
+  TODO_LIST: '#9ece6a', TODO_CLEAR: '#f7768e',
+  SKILL_LIST: '#bb9af7', LOAD_SKILL: '#bb9af7', CREATE_SKILL: '#bb9af7', TASK: '#7dcfff',
+};
+
+const DEFAULT_COLOR = '#e0af68';
+const LONG_OUTPUT_MAX_LINES = 40;
+const LONG_OUTPUT_MAX_CHARS = 5000;
+const ABSOLUTE_OUTPUT_MAX_CHARS = Math.max(6000, Number.parseInt(process.env.OSAI_UI_MAX_OUTPUT_CHARS || '16000', 10) || 16000);
+const MAX_TEXT_RENDER_CHARS = Math.max(4000, Number.parseInt(process.env.OSAI_UI_MAX_TEXT_CHARS || '12000', 10) || 12000);
+const MAX_TEXT_RENDER_LINES = Math.max(80, Number.parseInt(process.env.OSAI_UI_MAX_TEXT_LINES || '180', 10) || 180);
+const MAX_RENDER_EVENTS = Math.max(10, Number.parseInt(process.env.OSAI_UI_MAX_EVENTS || '28', 10) || 28);
+const PLAIN_OUTPUT_TOOLS = new Set(['LOCAL_CMD', 'SSH_CMD']);
+const TOOL_JSON_LINE_RE = /tool":|^\{"tool|^\{\\"tool\\":|^"(?:path|cmd|url|query|find|replace|content|description|question)":|","[A-Za-z_]+":|"[A-Za-z_]+":\s*[[{]/;
+const INTERNAL_UI_MARKER_RE = /\[(DONE|INCOMPLETE|BLOCKED|TOOL_CALL|TOOL_RESULT)\]/gi;
+const INTERNAL_SSE_LINE_RE = /^\s*(data|event|id|retry):\s.*$/gim;
+const INTERNAL_TOOL_JSON_LINE_RE = /^\s*\{(?:\\")?tool(?:\\")?\s*:\s*.*$/gim;
+const INTERNAL_TOOL_XML_LINE_RE = /<tool\b[^>]*>[\s\S]*?<\/tool\s*>|<tool\b[^>]*\/>/gim;
+const TABLE_SEPARATOR_RE = /^\s*:?-{3,}:?\s*$/;
+const INLINE_PATTERN = /(\[([^\]]+)\]\(([^)\s]+)\))|(`([^`\n]+)`)|(\*\*([^*\n]+)\*\*|__([^_\n]+)__)|(~~([^~\n]+)~~)|(\*([^*\n]+)\*|_([^_\n]+)_)|(https?:\/\/[^\s<>()]+)|(www\.[^\s<>()]+)/g;
+const OSC8_START = '\u001B]8;;';
+const OSC8_END = '\u001B]8;;\u0007';
+
+const getToolColor = (name) => TOOL_COLORS[name] || DEFAULT_COLOR;
+
+// success: true = past tense (done), false = failed, undefined = in progress
+function getWriteActionLabel(name, toolCall, success) {
+  const path = toolCall?.path || '';
+  const done = success === true;
+  const failed = success === false;
+  switch (name) {
+    case 'WRITE_FILE':
+      if (done) return `Wrote to ${truncate(path, 60)}`;
+      if (failed) return `Failed to write ${truncate(path, 60)}`;
+      return `Writing to ${truncate(path, 60)}`;
+    case 'EDIT_FILE':
+      if (done) return `Edited ${truncate(path, 60)}`;
+      if (failed) return `Failed to edit ${truncate(path, 60)}`;
+      return `Editing ${truncate(path, 60)}`;
+    case 'APPEND_FILE':
+      if (done) return `Appended to ${truncate(path, 60)}`;
+      if (failed) return `Failed to append to ${truncate(path, 60)}`;
+      return `Appending to ${truncate(path, 60)}`;
+    case 'DELETE_FILE':
+      if (done) return `Deleted ${truncate(path, 60)}`;
+      if (failed) return `Failed to delete ${truncate(path, 60)}`;
+      return `Deleting ${truncate(path, 60)}`;
+    case 'CREATE_DIR':
+      if (done) return `Created directory ${truncate(path, 60)}`;
+      if (failed) return `Failed to create directory ${truncate(path, 60)}`;
+      return `Creating directory ${truncate(path, 60)}`;
+    case 'MOVE_FILE': {
+      const src = toolCall?.source || '';
+      const dst = toolCall?.destination || '';
+      if (done) return `Moved ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+      if (failed) return `Failed to move ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+      return `Moving ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+    }
+    case 'COPY_FILE': {
+      const src = toolCall?.source || '';
+      const dst = toolCall?.destination || '';
+      if (done) return `Copied ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+      if (failed) return `Failed to copy ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+      return `Copying ${truncate(src, 30)} → ${truncate(dst, 30)}`;
+    }
+    default: return null;
+  }
+}
+
+function getReadActionLabel(name, toolCall, success) {
+  const path = toolCall?.path || '';
+  const done = success === true;
+  const failed = success === false;
+  switch (name) {
+    case 'READ_FILE':
+      if (done) return `Read ${truncate(path, 60)}`;
+      if (failed) return `Failed to read ${truncate(path, 60)}`;
+      return `Reading ${truncate(path, 60)}`;
+    case 'LIST_DIR':
+      if (done) return `Listed directory ${truncate(path, 60)}`;
+      if (failed) return `Failed to list directory ${truncate(path, 60)}`;
+      return `Listing directory ${truncate(path, 60)}`;
+    case 'TREE_VIEW':
+      if (done) return `Viewed tree ${truncate(path, 60)}`;
+      if (failed) return `Failed to view tree ${truncate(path, 60)}`;
+      return `Viewing tree ${truncate(path, 60)}`;
+    case 'FILE_INFO':
+      if (done) return `Got info for ${truncate(path, 60)}`;
+      if (failed) return `Failed to get info for ${truncate(path, 60)}`;
+      return `Getting info for ${truncate(path, 60)}`;
+    default: return null;
+  }
+}
+
+function truncate(value, max = 50) {
+  const s = String(value || '');
+  if (s.length <= max) return s;
+  return s.slice(0, max - 3) + '...';
+}
+
+function supportsHyperlinks() {
+  if (process.env.OSAI_DISABLE_OSC8 === '1') return false;
+  if (process.env.OSAI_ENABLE_OSC8 === '1') return true;
+  const term = (process.env.TERM || '').toLowerCase();
+  if (term === 'dumb') return false;
+  if (process.platform === 'win32') {
+    return Boolean(process.env.WT_SESSION || process.env.TERM_PROGRAM || term.includes('xterm'));
+  }
+  return Boolean(
+    process.env.WT_SESSION ||
+    process.env.KITTY_WINDOW_ID ||
+    process.env.VTE_VERSION ||
+    process.env.TERM_PROGRAM ||
+    process.env.KONSOLE_VERSION
+  );
+}
+
+function normalizeUrl(raw) {
+  const input = String(raw || '').trim().replace(/[),.;]+$/, '');
+  if (!input) return null;
+  const candidate = /^www\./i.test(input) ? `https://${input}` : input;
+  try {
+    const parsed = new URL(candidate);
+    if (!['http:', 'https:', 'mailto:'].includes(parsed.protocol)) return null;
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}
+
+function linkText(label, rawUrl) {
+  const safeUrl = normalizeUrl(rawUrl);
+  if (!safeUrl) return label;
+  if (!supportsHyperlinks()) return `${label} (${safeUrl})`;
+  return `${OSC8_START}${safeUrl}\u0007${label}${OSC8_END}`;
+}
+
+function shortUrl(rawUrl) {
+  const normalized = normalizeUrl(rawUrl);
+  if (!normalized) return '';
+  try {
+    const u = new URL(normalized);
+    const host = u.hostname.replace(/^www\./i, '');
+    const path = (u.pathname || '/').replace(/\/+$/, '') || '/';
+    const compactPath = path.length > 24 ? `${path.slice(0, 24)}...` : path;
+    return `${host}${compactPath}`;
+  } catch {
+    return normalized;
+  }
+}
+
+function splitTableCells(line) {
+  const clean = String(line || '').trim();
+  const src = clean.startsWith('|') ? clean.slice(1) : clean;
+  const body = src.endsWith('|') ? src.slice(0, -1) : src;
+  return body.split('|').map(cell => cell.trim());
+}
+
+function isTableLine(line) {
+  const trimmed = String(line || '').trim();
+  if (!trimmed || (trimmed.match(/\|/g) || []).length < 2) return false;
+  const cells = splitTableCells(trimmed);
+  return cells.length >= 2;
+}
+
+function isTableSeparator(line) {
+  const cells = splitTableCells(line).filter(Boolean);
+  if (!cells.length) return false;
+  return cells.every(cell => TABLE_SEPARATOR_RE.test(cell));
+}
+
+function formatTarget(tc) {
+  if (!tc) return { text: '', url: null };
+  if (tc.path) return { text: truncate(tc.path, 60), url: null };
+  if (tc.cmd) return { text: truncate(tc.cmd.replace(/\s+/g, ' ').trim(), 60), url: null };
+  if (tc.url) {
+    const normalized = normalizeUrl(tc.url);
+    return { text: truncate(normalized || tc.url, 60), url: normalized };
+  }
+  if (tc.query) return { text: truncate(tc.query, 60), url: null };
+  if (tc.pattern) return { text: truncate(tc.pattern, 60), url: null };
+  if (tc.source) return { text: truncate(tc.source, 60), url: null };
+  return { text: '', url: null };
+}
+
+function inferCodeLang(text) {
+  const src = String(text || '').trim();
+  if (!src) return '';
+  if ((src.startsWith('{') && src.endsWith('}')) || (src.startsWith('[') && src.endsWith(']'))) {
+    try {
+      JSON.parse(src);
+      return 'json';
+    } catch {}
+  }
+  if (/^\s*(Select-|Get-|Set-|Where-Object|ForEach-Object)\b/m.test(src)) return 'powershell';
+  if (/^\s*(npm|node|git|cd|ls|cat|grep|sed|awk|chmod|curl|wget)\b/m.test(src) || /^\s*[$#]\s+/.test(src)) return 'bash';
+  if (/\b(import\s+.+\s+from|const\s+\w+\s*=|let\s+\w+\s*=|function\s+\w+\(|=>)\b/.test(src)) return 'javascript';
+  if (/\b(def\s+\w+\(|class\s+\w+|from\s+\w+\s+import|import\s+\w+)\b/.test(src)) return 'python';
+  return '';
+}
+
+function isLikelyCode(text) {
+  const src = String(text || '');
+  if (!src.trim()) return false;
+  if (src.includes('\n')) return true;
+  if (/^\s*[\[{]/.test(src) && /[\]}]\s*$/.test(src)) return true;
+  return /[;{}()[\]=<>]/.test(src);
+}
+
+function collapseLongOutput(text) {
+  const source = String(text || '');
+  if (!source) return { collapsed: false, output: source, hiddenLines: 0, hiddenChars: 0 };
+
+  const lines = source.split('\n');
+  const isLong = lines.length > LONG_OUTPUT_MAX_LINES || source.length > LONG_OUTPUT_MAX_CHARS;
+  if (!isLong) return { collapsed: false, output: source, hiddenLines: 0, hiddenChars: 0 };
+
+  let output = lines.slice(0, LONG_OUTPUT_MAX_LINES).join('\n');
+  if (output.length > LONG_OUTPUT_MAX_CHARS) output = output.slice(0, LONG_OUTPUT_MAX_CHARS);
+
+  const hiddenLines = Math.max(0, lines.length - LONG_OUTPUT_MAX_LINES);
+  const hiddenChars = Math.max(0, source.length - output.length);
+  return { collapsed: true, output, hiddenLines, hiddenChars };
+}
+
+function hardLimitOutput(text) {
+  const source = String(text || '');
+  if (source.length <= ABSOLUTE_OUTPUT_MAX_CHARS) return { output: source, capped: false };
+  const keepHead = Math.min(3000, Math.floor(ABSOLUTE_OUTPUT_MAX_CHARS * 0.25));
+  const keepTail = Math.max(1000, ABSOLUTE_OUTPUT_MAX_CHARS - keepHead);
+  const hidden = source.length - keepHead - keepTail;
+  return {
+    output: `${source.slice(0, keepHead)}\n\n... ${hidden} chars hidden for terminal performance ...\n\n${source.slice(-keepTail)}`,
+    capped: true,
+  };
+}
+
+function limitRenderableText(text) {
+  const source = String(text || '');
+  if (!source) return { text: source, truncated: false };
+
+  let limited = source;
+  let truncatedChars = 0;
+  if (limited.length > MAX_TEXT_RENDER_CHARS) {
+    const headChars = Math.min(2500, Math.floor(MAX_TEXT_RENDER_CHARS * 0.25));
+    const tailChars = Math.max(1000, MAX_TEXT_RENDER_CHARS - headChars);
+    truncatedChars = limited.length - headChars - tailChars;
+    limited = `${limited.slice(0, headChars)}\n\n... ${truncatedChars} chars hidden for terminal performance ...\n\n${limited.slice(-tailChars)}`;
+  }
+
+  const lines = limited.split('\n');
+  if (lines.length > MAX_TEXT_RENDER_LINES) {
+    const headLines = Math.min(45, Math.floor(MAX_TEXT_RENDER_LINES * 0.25));
+    const tailLines = Math.max(40, MAX_TEXT_RENDER_LINES - headLines);
+    const hiddenLines = lines.length - headLines - tailLines;
+    limited = [
+      ...lines.slice(0, headLines),
+      '',
+      `... ${hiddenLines} lines hidden for terminal performance ...`,
+      '',
+      ...lines.slice(-tailLines),
+    ].join('\n');
+    return { text: limited, truncated: true };
+  }
+
+  return { text: limited, truncated: truncatedChars > 0 };
+}
+
+const CodeOutput = React.memo(({ text, color = '#c0caf5' }) => {
+  if (!text) return null;
+  const lang = inferCodeLang(text);
+  return h(Box, { paddingLeft: 4, flexDirection: 'column', marginTop: 1, borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1 },
+    lang ? h(Text, { color: '#565f89' }, lang) : null,
+    h(Text, { ansi: true, color }, highlightCode(text, lang))
+  );
+});
+
+const ToolSpinner = React.memo(({ name, toolCall, done, animate = true }) => {
+  const frame = useAnimationFrame(!done && animate);
+  const color = getToolColor(name);
+  const target = formatTarget(toolCall);
+  const writeLabel = WRITE_TOOLS.has(name) ? getWriteActionLabel(name, toolCall, done ? true : undefined) : null;
+  const readLabel = READ_TOOLS.has(name) ? getReadActionLabel(name, toolCall, done ? true : undefined) : null;
+
+  if (writeLabel) {
+    const dots = !done && animate && ENABLE_UI_ANIMATIONS ? WRITING_DOTS[frame % WRITING_DOTS.length] : '';
+    return h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: done ? '#9ece6a' : '#7aa2f7' }, done ? '  ✓ ' : (animate && ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … ')),
+      h(Text, { color: '#ffffff' }, '• '),
+      h(Text, { color, bold: true }, writeLabel),
+      h(Text, { color: '#565f89' }, done ? '' : dots)
+    );
+  }
+
+  if (readLabel) {
+    const dots = !done && animate && ENABLE_UI_ANIMATIONS ? READING_DOTS[frame % READING_DOTS.length] : '';
+    return h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: done ? '#9ece6a' : '#7aa2f7' }, done ? '  ✓ ' : (animate && ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … ')),
+      h(Text, { color: '#ffffff' }, '• '),
+      h(Text, { color, bold: true }, readLabel),
+      h(Text, { color: '#ffffff' }, done ? '' : dots)
+    );
+  }
+
+  return h(Box, { paddingLeft: 2, paddingY: 0 },
+    h(Text, { color: done ? '#9ece6a' : '#7aa2f7' }, done ? '  ✓ ' : (animate && ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … ')),
+    h(Text, { color: '#ffffff' }, '• '),
+    h(Text, { color, bold: true }, name),
+    target.text ? h(Text, { color: '#565f89' }, ': ') : null,
+    target.text
+      ? target.url
+        ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, linkText(target.text, target.url))
+        : h(Text, { color: '#565f89' }, target.text)
+      : null
+  );
+});
+
+const ContextSummarySpinner = React.memo(({ summaryEvent, done, animate = true }) => {
+  const frame = useAnimationFrame(!done && animate);
+  const summarizeCount = Number(summaryEvent?.summarizeCount || 0);
+  const keepRecent = Number(summaryEvent?.keepRecent || 0);
+
+  return h(Box, { paddingLeft: 2, paddingY: 0 },
+    h(Text, { color: done ? '#9ece6a' : '#7aa2f7', bold: true }, done ? '  ✓ ' : (animate && ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … ')),
+    h(Text, { color: '#ffffff' }, '• '),
+    h(Text, { color: '#7dcfff', bold: true }, 'CONTEXT_SUMMARY'),
+    h(Text, { color: '#565f89' }, done
+      ? `: summarized ${summarizeCount} messages, kept ${keepRecent} recent`
+      : `: summarizing ${summarizeCount} older messages...`
+    )
+  );
+});
+
+const ContextSummaryResult = React.memo(({ doneEvent }) => {
+  const summarized = Number(doneEvent?.summarizedMessages || 0);
+  const remaining = Number(doneEvent?.remainingMessages || 0);
+  return h(Box, { paddingLeft: 2, paddingY: 0 },
+    h(Text, { color: '#9ece6a', bold: true }, '  ✓ '),
+    h(Text, { color: '#ffffff' }, '• '),
+    h(Text, { color: '#7dcfff', bold: true }, 'CONTEXT_SUMMARY'),
+    h(Text, { color: '#565f89' }, `: completed (${summarized} summarized, ${remaining} messages now in context)`)
+  );
+});
+
+const SearchResults = React.memo(({ results }) => {
+  if (!results || !results.length) return null;
+  const compactResults = results.slice(0, 6);
+  return h(Box, { flexDirection: 'column', paddingLeft: 4, marginTop: 1 },
+    ...compactResults.map((item, idx) => {
+      const title = truncate(item.title || 'Untitled', 62);
+      const link = normalizeUrl(item.link || item.url || '');
+      const pretty = shortUrl(link || '');
+      const snippet = truncate((item.snippet || item.description || '').replace(/\s+/g, ' ').trim(), 84);
+      return h(Box, { key: `sr_${idx}`, flexDirection: 'column', marginBottom: 0 },
+        h(Text, { color: '#c0caf5', bold: true }, `[${idx + 1}] ${title}`),
+        link ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, `    ${linkText(pretty || link, link)}`) : null,
+        snippet ? h(Text, { color: '#9aa5ce' }, `    ${snippet}`) : null
+      );
+    }),
+    results.length > compactResults.length
+      ? h(Text, { color: '#565f89', italic: true }, `    +${results.length - compactResults.length} more result(s)`)
+      : null
+  );
+});
+
+const ToolResultEvent = React.memo(({ name, success, output, toolCall, results, outputIndex, expandedOutputIndexes }) => {
+  const color = getToolColor(name);
+  const label = success ? '✓' : '✗';
+  const labelColor = success ? '#9ece6a' : '#f7768e';
+  const target = formatTarget(toolCall);
+  const writeLabel = WRITE_TOOLS.has(name) ? getWriteActionLabel(name, toolCall, success) : null;
+  const readLabel = READ_TOOLS.has(name) ? getReadActionLabel(name, toolCall, success) : null;
+  const out = String(output || '');
+
+  let display = out;
+  let searchResults = Array.isArray(results) ? results : null;
+  const isExpanded = outputIndex != null && expandedOutputIndexes && expandedOutputIndexes.has(outputIndex);
+
+  if (name === 'READ_FILE' && !isExpanded) {
+    const lines = out.split('\n');
+    const first = lines[0] || '';
+    display = `${first} (${Math.max(0, lines.length - 1)} lines)`;
+  } else if (!searchResults && (out.startsWith('{') || out.startsWith('['))) {
+    try {
+      const parsed = JSON.parse(out);
+      if (parsed?.results && Array.isArray(parsed.results)) {
+        searchResults = parsed.results;
+        display = '';
+      } else {
+        display = JSON.stringify(parsed, null, 2);
+      }
+    } catch {
+      display = out;
+    }
+  }
+  if (Array.isArray(searchResults) && searchResults.length > 0) {
+    display = '';
+  }
+  if ((name === 'LOCAL_CMD' || name === 'SSH_CMD') && success && !display) {
+    display = '(command executed successfully — no output)';
+  }
+
+  const collapsedSuccess = !isExpanded && display ? collapseLongOutput(display) : { collapsed: false, output: display, hiddenLines: 0, hiddenChars: 0 };
+  const collapsedError = !isExpanded && out ? collapseLongOutput(out) : { collapsed: false, output: out, hiddenLines: 0, hiddenChars: 0 };
+  const cappedDisplay = hardLimitOutput(collapsedSuccess.collapsed ? collapsedSuccess.output : display);
+  const cappedError = hardLimitOutput(collapsedError.collapsed ? collapsedError.output : out);
+  const shownDisplay = cappedDisplay.output;
+  const shownError = cappedError.output;
+  const renderSuccessAsCode = shownDisplay && !PLAIN_OUTPUT_TOOLS.has(name) && isLikelyCode(shownDisplay);
+  const renderErrorAsCode = shownError && !PLAIN_OUTPUT_TOOLS.has(name) && isLikelyCode(shownError);
+
+  return h(Box, { flexDirection: 'column', paddingLeft: 2, paddingY: 0 },
+    h(Box,
+      h(Text, { color: labelColor, bold: true }, `  ${label} `),
+      h(Text, { color: '#ffffff' }, '• '),
+      writeLabel
+        ? h(Text, { color }, writeLabel)
+        : readLabel
+          ? h(Text, { color }, readLabel)
+          : h(Text, { color }, name),
+      !writeLabel && !readLabel && outputIndex != null ? h(Text, { color: '#565f89' }, ` [#${outputIndex}]`) : null,
+      writeLabel || readLabel
+        ? null
+        : target.text
+          ? h(Text, { color: '#565f89' }, ': ')
+          : null,
+      writeLabel || readLabel
+        ? null
+        : target.text
+          ? target.url
+            ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, linkText(target.text, target.url))
+            : h(Text, { color: '#565f89' }, target.text)
+          : null
+    ),
+    success && name === 'EDIT_FILE' && toolCall ? h(EditFileDiff, {
+      filePath: toolCall.path,
+      find: toolCall.find,
+      replace: toolCall.replace
+    }) : null,
+    success && name === 'WRITE_FILE' && toolCall ? h(NewFileDiff, {
+      filePath: toolCall.path,
+      content: toolCall.content
+    }) : null,
+    success && name === 'APPEND_FILE' && toolCall ? h(AppendFileDiff, {
+      filePath: toolCall.path,
+      content: toolCall.content
+    }) : null,
+    success && name === 'DELETE_FILE' && toolCall ? h(DeleteFileDiff, {
+      filePath: toolCall.path
+    }) : null,
+    searchResults ? h(SearchResults, { results: searchResults }) : null,
+    shownDisplay && success && !['EDIT_FILE', 'WRITE_FILE', 'APPEND_FILE', 'DELETE_FILE'].includes(name)
+      ? renderSuccessAsCode
+        ? h(CodeOutput, { text: shownDisplay, color: '#c0caf5' })
+        : h(Box, { paddingLeft: 4 }, h(Text, { color: '#c0caf5' }, shownDisplay))
+      : null,
+    !success && shownError
+      ? renderErrorAsCode
+        ? h(CodeOutput, { text: shownError, color: '#f7768e' })
+        : h(Box, { paddingLeft: 4 }, h(Text, { color: '#f7768e' }, shownError))
+      : null,
+    (collapsedSuccess.collapsed || collapsedError.collapsed || cappedDisplay.capped || cappedError.capped) && outputIndex != null
+      ? h(Box, { paddingLeft: 4 }, h(Text, { color: '#565f89', italic: true },
+          cappedDisplay.capped || cappedError.capped
+            ? 'Output display capped to keep the Linux terminal responsive.'
+            : `Output collapsed. Type "shows ${outputIndex}" to expand.`
+        ))
+      : null
+  );
+});
+
+function parseInline(text) {
+  const source = String(text || '');
+  if (!source) return [];
+  const segments = [];
+  let lastIndex = 0;
+  let match;
+
+  INLINE_PATTERN.lastIndex = 0;
+  while ((match = INLINE_PATTERN.exec(source)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: 'text', content: source.slice(lastIndex, match.index) });
+    }
+
+    if (match[1]) {
+      segments.push({ type: 'link', label: match[2], url: match[3] });
+    } else if (match[4]) {
+      segments.push({ type: 'code', content: match[5] });
+    } else if (match[6]) {
+      segments.push({ type: 'bold', content: match[7] || match[8] || '' });
+    } else if (match[9]) {
+      segments.push({ type: 'strike', content: match[10] || '' });
+    } else if (match[11]) {
+      segments.push({ type: 'italic', content: match[12] || match[13] || '' });
+    } else if (match[14]) {
+      segments.push({ type: 'link', label: match[14], url: match[14] });
+    } else if (match[15]) {
+      segments.push({ type: 'link', label: match[15], url: `https://${match[15]}` });
+    }
+
+    lastIndex = INLINE_PATTERN.lastIndex;
+  }
+
+  if (lastIndex < source.length) {
+    segments.push({ type: 'text', content: source.slice(lastIndex) });
+  }
+
+  return segments;
+}
+
+const InlineText = React.memo(({ text }) => {
+  const segments = parseInline(text);
+  return h(Text, null, ...segments.map((seg, i) => {
+    switch (seg.type) {
+      case 'bold':
+        return h(Text, { key: i, bold: true }, seg.content);
+      case 'italic':
+        return h(Text, { key: i, italic: true }, seg.content);
+      case 'strike':
+        return h(Text, { key: i, strikethrough: true, color: '#565f89' }, seg.content);
+      case 'code':
+        return h(Text, { key: i, backgroundColor: '#1a1b2e', color: '#f7768e' }, seg.content);
+      case 'link':
+        return h(Text, { key: i, ansi: true, color: '#7dcfff', underline: true }, linkText(seg.label, seg.url));
+      default:
+        return h(Text, { key: i }, seg.content);
+    }
+  }));
+});
+
+function renderContent(text) {
+  if (!text) return [];
+  const sanitizedText = String(text || '')
+    .replace(INTERNAL_SSE_LINE_RE, '')
+    .replace(INTERNAL_UI_MARKER_RE, '')
+    .replace(INTERNAL_TOOL_JSON_LINE_RE, '')
+    .replace(INTERNAL_TOOL_XML_LINE_RE, '')
+    .replace(/(?:^|\n)\s*```json\s*(?=\n|$)/gi, '\n')
+    .replace(/\n{3,}/g, '\n\n');
+
+  const parts = [];
+  const lines = sanitizedText.split('\n');
+  let inCodeBlock = false;
+  let codeContent = [];
+  let codeLang = '';
+  let tableRows = [];
+
+  const flushTable = () => {
+    if (!tableRows.length) return;
+    parts.push({ type: 'table', rows: [...tableRows] });
+    tableRows = [];
+  };
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const codeFence = line.match(/^```(\w*)/);
+
+    if (codeFence) {
+      flushTable();
+      if (inCodeBlock) {
+        const raw = codeContent.join('\n');
+        if (!(codeLang === 'json' && (raw.includes('"tool"') || raw.includes('"question"')))) {
+          parts.push({ type: 'codeBlock', content: raw, lang: codeLang });
+        }
+        codeContent = [];
+        inCodeBlock = false;
+      } else {
+        inCodeBlock = true;
+        codeLang = codeFence[1] || '';
+      }
+      continue;
+    }
+
+    if (inCodeBlock) {
+      codeContent.push(line);
+      continue;
+    }
+
+    if (isTableLine(line)) {
+      tableRows.push(line);
+      continue;
+    }
+    flushTable();
+
+    if (line.trim() === '') {
+      parts.push({ type: 'empty' });
+      continue;
+    }
+
+    const trimmed = line.trim();
+    const toolNameMatch = trimmed.match(/^([A-Z_]{3,}):\s*(.*)/);
+    if (
+      TOOL_JSON_LINE_RE.test(trimmed) ||
+      (trimmed.startsWith('{') && trimmed.includes('"tool"')) ||
+      (/[:}"]$/.test(trimmed) && /":/.test(trimmed)) ||
+      /^\s*[}\]]/.test(trimmed) ||
+      trimmed.startsWith('<tool')
+    ) {
+      continue;
+    }
+
+    if (toolNameMatch) {
+      const toolColor = TOOL_COLORS[toolNameMatch[1]] || '#e0af68';
+      parts.push({ type: 'toolIndicator', tool: toolNameMatch[1], content: toolNameMatch[2] || '', color: toolColor });
+      continue;
+    }
+
+    const headingMatch = trimmed.match(/^(#{1,4})\s+(.+)$/);
+    if (headingMatch) {
+      parts.push({ type: 'heading', level: headingMatch[1].length, content: headingMatch[2] });
+      continue;
+    }
+
+    if (/^[-*_]{3,}\s*$/.test(trimmed)) {
+      parts.push({ type: 'hr' });
+      continue;
+    }
+
+    const quoteMatch = line.match(/^\s*>\s?(.*)$/);
+    if (quoteMatch) {
+      parts.push({ type: 'quote', content: quoteMatch[1] });
+      continue;
+    }
+
+    const orderedMatch = line.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (orderedMatch) {
+      parts.push({
+        type: 'list',
+        ordered: true,
+        level: Math.floor((orderedMatch[1] || '').length / 2),
+        marker: `${orderedMatch[2]}.`,
+        content: orderedMatch[3] || ''
+      });
+      continue;
+    }
+
+    const bulletMatch = line.match(/^(\s*)[-*+]\s+(.*)$/);
+    if (bulletMatch) {
+      parts.push({
+        type: 'list',
+        ordered: false,
+        level: Math.floor((bulletMatch[1] || '').length / 2),
+        marker: '•',
+        content: bulletMatch[2] || ''
+      });
+      continue;
+    }
+
+    parts.push({ type: 'line', content: line });
+  }
+
+  flushTable();
+
+  if (inCodeBlock && codeContent.join('\n').trim()) {
+    parts.push({ type: 'codeBlock', content: codeContent.join('\n'), lang: codeLang });
+  }
+
+  return parts;
+}
+
+const TableBlock = React.memo(({ rows }) => {
+  // [FIX-3] Limite la hauteur d'une table à 70% de l'écran pour éviter que
+  // Ink ne doive traverser des centaines de nodes Text à chaque frame.
+  // On tronque les lignes du milieu (en-tête + queue conservés) et on indique
+  // le nombre de lignes cachées.
+  const { rows: termRows } = useWindowSize();
+  const MAX_TABLE_ROWS = termRows ? Math.max(6, Math.floor(termRows * 0.7)) : 20;
+
+  const nonSeparator = rows.filter(row => !isTableSeparator(row)).map(splitTableCells);
+  if (!nonSeparator.length) return null;
+
+  const colCount = Math.max(...nonSeparator.map(cells => cells.length));
+  let normalized = rows.map(row => {
+    const cells = splitTableCells(row).slice(0, colCount);
+    while (cells.length < colCount) cells.push('');
+    return { raw: row, cells };
+  });
+
+  // Tronquer les data rows (en-tête + séparateur + queue préservés).
+  // On ne touche pas à la 1ère ligne (header) ni au séparateur qui la suit.
+  let hiddenCount = 0;
+  if (normalized.length > MAX_TABLE_ROWS) {
+    // On conserve: header (idx 0) + separator (idx 1 si présent) + dernières lignes
+    const headKeep = Math.min(2, normalized.length); // header + éventuel sep
+    const tailKeep = Math.max(0, MAX_TABLE_ROWS - headKeep - 1); // -1 pour la ligne "...N hidden"
+    if (tailKeep > 0 && normalized.length - headKeep - tailKeep > 0) {
+      hiddenCount = normalized.length - headKeep - tailKeep;
+      const head = normalized.slice(0, headKeep);
+      const tail = normalized.slice(normalized.length - tailKeep);
+      normalized = [...head, { raw: `__HIDDEN_${hiddenCount}__`, cells: Array(colCount).fill('') }, ...tail];
+    } else {
+      hiddenCount = 0; // table trop petite pour que la troncature soit utile
+    }
+  }
+
+  const widths = Array.from({ length: colCount }, () => 3);
+  for (const row of normalized) {
+    if (isTableSeparator(row.raw) || row.raw.startsWith('__HIDDEN_')) continue;
+    for (let i = 0; i < colCount; i++) {
+      const rendered = renderCellInline(row.cells[i] || '');
+      widths[i] = Math.min(36, Math.max(widths[i], visibleLen(rendered)));
+    }
+  }
+
+  const pad = (value, width) => {
+    const displayLen = visibleLen(value);
+    if (displayLen <= width) return value + ' '.repeat(Math.max(0, width - displayLen));
+    const plain = stripAnsi(value);
+    const cut = plain.slice(0, Math.max(1, width - 1)) + '…';
+    return cut + ' '.repeat(Math.max(0, width - cut.length));
+  };
+
+  return h(Box, { flexDirection: 'column', paddingLeft: 2 },
+    ...normalized.map((row, idx) => {
+      if (row.raw.startsWith('__HIDDEN_')) {
+        const hidden = Number(row.raw.match(/__HIDDEN_(\d+)__/)?.[1] || 0);
+        return h(Text, { key: `tbl_hidden_${idx}`, color: '#565f89', italic: true },
+          `  … ${hidden} ligne(s) cachée(s) pour fluidité du terminal …`);
+      }
+      if (isTableSeparator(row.raw)) {
+        const sep = widths.map(w => '─'.repeat(w)).join('─┼─');
+        return h(Text, { key: `tbl_sep_${idx}`, color: '#2a2e3f' }, `  ${sep}`);
+      }
+      const content = row.cells.map((cell, i) => {
+        const rendered = renderCellInline(cell || '');
+        const styled = idx === 0 ? chalk.bold.hex('#7dcfff')(rendered) : chalk.hex('#c0caf5')(rendered);
+        return pad(styled, widths[i]);
+      }).join(' │ ');
+      return h(Text, { key: `tbl_row_${idx}`, ansi: true }, `  ${content}`);
+    })
+  );
+});
+
+const AnimatedToolIndicator = React.memo(({ tool, content, color, events, animate = true }) => {
+  const startCount = events?.filter(ev => ev.type === 'tool_start' && ev.name === tool).length ?? 0;
+  const endCount = events?.filter(ev => ev.type === 'tool_end' && ev.name === tool).length ?? 0;
+  const isAnimating = animate && startCount > endCount;
+  const frame = useAnimationFrame(isAnimating);
+
+  return h(Box, { paddingLeft: 2 },
+    h(Text, { color: isAnimating ? '#7aa2f7' : '#9ece6a', bold: true }, isAnimating ? (ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … ') : '  ✓ '),
+    h(Text, { color: '#ffffff' }, '• '),
+    h(Text, { color, bold: true }, tool),
+    content ? h(Text, { color: '#565f89' }, `: ${content}`) : null
+  );
+});
+
+// [FIX-5] ThoughtHeader est wrappé dans React.memo : il s'anime via useAnimationFrame
+// et ne doit pas se re-rendre quand d'autres events du EventList changent.
+const ThoughtHeader = React.memo(function ThoughtHeader({ thoughtStreaming, animate = true }) {
+  const frame = useAnimationFrame(thoughtStreaming && animate);
+
+  if (!thoughtStreaming) {
+    return h(Text, { color: '#565f89', bold: true }, '[THOUGHT]');
+  }
+  const dots = animate && ENABLE_UI_ANIMATIONS ? THINKING_DOTS[frame % THINKING_DOTS.length].padEnd(3, ' ') : '...';
+  return h(Text, { color: '#565f89', bold: true }, `Thinking${dots}`);
+});
+
+const TextContent = React.memo(({ content, events, animate = true }) => {
+  const limited = useMemo(() => limitRenderableText(content), [content]);
+  const parts = useMemo(() => renderContent(limited.text), [limited.text]);
+  if (!content) return null;
+
+  return h(Box, { flexDirection: 'column' },
+    ...parts.map((part, i) => {
+      switch (part.type) {
+        case 'codeBlock':
+          return h(Box, { key: i, flexDirection: 'column', paddingX: 1, marginY: 1, borderStyle: 'round', borderColor: '#2a2e3f' },
+            part.lang ? h(Text, { color: '#565f89' }, part.lang) : null,
+            h(Text, { ansi: true }, highlightCode(part.content, part.lang))
+          );
+        case 'table':
+          return h(TableBlock, { key: i, rows: part.rows });
+        case 'empty':
+          return h(Box, { key: i, height: 1 });
+        case 'toolIndicator':
+          return h(AnimatedToolIndicator, { key: i, tool: part.tool, content: part.content, color: part.color, events, animate });
+        case 'heading':
+          return h(Box, { key: i, paddingLeft: 2 },
+            part.level === 1 ? h(Text, { color: '#7aa2f7', bold: true }, `# ${part.content}`) :
+            part.level === 2 ? h(Text, { color: '#7dcfff', bold: true }, `## ${part.content}`) :
+            part.level === 3 ? h(Text, { color: '#ffffff', bold: true }, `● ${part.content}`) :
+            h(Text, { color: '#9aa5ce', bold: true }, `#### ${part.content}`)
+          );
+        case 'hr':
+          return h(Box, { key: i, paddingLeft: 2 }, h(Text, { color: '#2a2e3f' }, '────────────────────────────────────────'));
+        case 'quote':
+          return h(Box, { key: i, paddingLeft: 2 },
+            h(Text, { color: '#565f89' }, '┃ '),
+            h(InlineText, { text: part.content })
+          );
+        case 'list':
+          return h(Box, { key: i, paddingLeft: 2 + (part.level * 2) },
+            h(Text, { color: part.ordered ? '#7aa2f7' : '#34d399' }, `${part.marker} `),
+            h(InlineText, { text: part.content })
+          );
+        case 'line':
+          return h(Box, { key: i, paddingLeft: 2 }, h(InlineText, { text: part.content }));
+    default:
+          return null;
+      }
+    }),
+    limited.truncated
+      ? h(Box, { paddingLeft: 2 }, h(Text, { color: '#565f89', italic: true }, 'Display shortened to keep the Linux terminal responsive.'))
+      : null
+  );
+});
+
+function hasMatchingToolEnd(events, startIndex, toolEvent) {
+  const later = events.slice(startIndex + 1);
+  return later.some(ev => {
+    if (ev.type !== 'tool_end') return false;
+    if (toolEvent.id != null) return ev.id === toolEvent.id;
+    return ev.name === toolEvent.name;
+  });
+}
+
+function hasMatchingContextSummaryEnd(events, startIndex, summaryEvent) {
+  const later = events.slice(startIndex + 1);
+  return later.some(ev => ev.type === 'context_summary_end' && ev.id === summaryEvent.id);
+}
+
+function EventSeparator() {
+  return h(Box, { flexDirection: 'column', paddingY: 0 },
+    h(Text, { color: '#2a2e3f' }, '  o─────────────────────────────────────────o')
+  );
+}
+
+// [FIX-collapsible-thought] Une pensée = un bloc pliable. Replié par défaut
+// (gain de perf : on ne rend pas le contenu texte). Ctrl+O (handler dans App.js)
+// toggler l'état plié/déplié via expandedThoughtIds.
+// Quand replié et streaming : spinner animé. Quand replié et terminé : ligne
+// statique ▸ Thought. Aucun texte n'est rendu dans l'état replié.
+//
+// IMPORTANT : tous les hooks sont appelés en haut, sans condition. Le rendu
+// animé (useAnimationFrame) n'est invoqué que quand replié+streaming ; mais
+// pour respecter l'ordre des hooks entre deux rendus, on appelle TOUJOURS
+// useAnimationFrame en haut, puis on choisit la sortie en fonction des flags.
+const CollapsibleThought = React.memo(function CollapsibleThought({ id, content, expanded, streaming, animate = true }) {
+  const frame = useAnimationFrame(!expanded && streaming && animate);
+
+  if (expanded) {
+    return h(Box, { key: `thought_${id}`, flexDirection: 'column', paddingY: 1, paddingLeft: 2 },
+      h(ThoughtHeader, { thoughtStreaming: streaming, animate }),
+      h(Box, { marginTop: 1, paddingLeft: 2 }, h(Text, { color: '#565f89' }, content))
+    );
+  }
+  if (streaming) {
+    const dots = animate && ENABLE_UI_ANIMATIONS ? THINKING_DOTS[frame % THINKING_DOTS.length].padEnd(3, ' ') : '...';
+    return h(Box, { key: `thought_${id}`, paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: '#565f89', bold: true }, '▸ Thinking'),
+      h(Text, { color: '#565f89' }, dots),
+      h(Text, { color: '#2a2e3f' }, '  (Ctrl+O to expand)')
+    );
+  }
+  return h(Box, { key: `thought_${id}`, paddingLeft: 2, paddingY: 0 },
+    h(Text, { color: '#565f89' }, '▸ Thought'),
+    h(Text, { color: '#2a2e3f' }, '  (Ctrl+O to expand)')
+  );
+});
+
+function renderEvent(ev, i, events, expandedOutputIndexes, thoughtStreaming, expandedThoughtIds, animate = true, expandedSubagentId, allSubagentEvents) {
+  // [FIX-5] thoughtStreaming n'est passé qu'au case 'thought' pour ne pas polluer
+  // les props des autres composants et déclencher des re-renders inutiles.
+  // [FIX-collapsible-thought] expandedThoughtIds n'est consulté que pour les
+  // thoughts ; les autres events n'en ont pas besoin.
+  switch (ev.type) {
+    case 'thought': {
+      const thoughtId = ev.id;
+      const expanded = thoughtId != null && expandedThoughtIds && expandedThoughtIds.has(thoughtId);
+      return h(CollapsibleThought, { key: `thought_${thoughtId ?? i}`, id: thoughtId, content: ev.content, expanded, streaming: thoughtStreaming, animate });
+    }
+    case 'text':
+      return h(TextContent, { key: i, content: ev.content, events, animate });
+    case 'tool_start':
+      if (hasMatchingToolEnd(events, i, ev)) return null;
+      return h(ToolSpinner, { key: i, name: ev.name, toolCall: ev.toolCall, done: false, animate });
+    case 'tool_end':
+      return h(ToolResultEvent, {
+        key: i,
+        name: ev.name,
+        success: ev.success,
+        output: ev.output,
+        toolCall: ev.toolCall,
+        results: ev.results,
+        outputIndex: ev.outputIndex,
+        expandedOutputIndexes
+      });
+    case 'context_summary_start':
+      if (hasMatchingContextSummaryEnd(events, i, ev)) return null;
+      return h(ContextSummarySpinner, { key: i, summaryEvent: ev, done: false, animate });
+    case 'context_summary_end': {
+      const startEvent = [...events].reverse().find(x => x.type === 'context_summary_start' && x.id === ev.id);
+      const merged = startEvent ? { ...startEvent, ...ev } : ev;
+      return h(ContextSummaryResult, { key: i, doneEvent: merged });
+    }
+    case 'badge':
+      return h(Box, { key: i, paddingY: 1, paddingLeft: 2, flexDirection: 'row' },
+        ev.signal === 'ERROR' || ev.signal === 'BLOCKED'
+          ? h(Text, { color: 'red' }, 'X')
+          : ev.signal === 'INCOMPLETE'
+            ? h(Text, { color: '#e0af68' }, 'o Incomplete')
+            : h(Text, { color: '#7aa2f7' }, 'o'),
+        ev.elapsed ? h(Text, { color: '#414868' }, ` ${formatDuration(ev.elapsed)}`) : null,
+        ev.provider && ev.signal !== 'ERROR'
+          ? h(Text, { color: '#565f89' }, ` | `)
+          : null,
+        ev.provider && ev.signal !== 'ERROR'
+          ? h(Text, { color: '#9ece6a' }, `${ev.provider}`)
+          : null,
+        ev.provider && ev.model && ev.signal !== 'ERROR'
+          ? h(Text, { color: '#565f89' }, `/${ev.model}`)
+          : null
+      );
+    case 'todos': {
+      const list = ev.todos || [];
+      if (list.length === 0) return null;
+      const items = list.slice(0, 5);
+      const more = list.length - 5;
+      return h(Box, { key: i, flexDirection: 'column', paddingLeft: 2, paddingY: 0 },
+        h(Text, { color: '#7aa2f7', bold: true }, 'Tasks:'),
+        ...items.map((t, j) => {
+          const isDone = t.status === 'done' || t.status === 'completed';
+          const isProgress = t.status === 'in_progress';
+          const icon = isDone ? '✓' : isProgress ? '⟳' : '○';
+          const color = isDone ? '#73daca' : isProgress ? '#e0af68' : '#565f89';
+          return h(Box, { key: j, paddingLeft: 2 },
+            h(Text, { color }, `${icon} `),
+            h(Text, { color: '#c0caf5' }, t.text || t.description || ''),
+          );
+        }),
+        more > 0 ? h(Text, { key: 'more', color: '#565f89', dimColor: true }, `  … and ${more} more`) : null,
+      );
+    }
+    case 'subagent': {
+      const isExpanded = expandedSubagentId === ev.id;
+      const subEvents = (allSubagentEvents && ev.id ? allSubagentEvents[ev.id] : null) || [];
+      return h(Box, { key: `sub_${ev.id ?? i}`, flexDirection: 'column' },
+        h(SubagentPanel, { state: ev, events: subEvents, isExpanded }),
+      );
+    }
+    default:
+      return null;
+  }
+}
+
+export const EventList = React.memo(function EventList({ events, expandedOutputIndexes, thoughtStreaming = false, expandedThoughtIds, animate = true, expandedSubagentId, allSubagentEvents }) {
+  if (!events || events.length === 0) return null;
+  const items = [];
+  let lastEventType = null;
+  for (let i = 0; i < events.length; i++) {
+    const ev = events[i];
+    const el = renderEvent(ev, i, events, expandedOutputIndexes, thoughtStreaming, expandedThoughtIds, animate, expandedSubagentId, allSubagentEvents);
+    if (el !== null) {
+      if (items.length > 0) {
+        const isToolEvent = (t) => t === 'tool_end' || t === 'tool_start';
+        const addSep = isToolEvent(lastEventType) || isToolEvent(ev.type);
+        if (addSep) items.push(h(EventSeparator, { key: `sep_${i}` }));
+      }
+      items.push(el);
+      lastEventType = ev.type;
+    }
+  }
+  return h(Box, { flexDirection: 'column' }, ...items);
+});
+
+const USER_MESSAGE_BG = '#3f4251';
+
+export function UserMessageBlock({ message }) {
+  if (!message) return null;
+  return h(Box, {
+    marginLeft: 1,
+    marginRight: 1,
+    paddingX: 2,
+    backgroundColor: USER_MESSAGE_BG,
+  },
+    h(Text, { color: '#c0caf5' }, message)
+  );
+}
+
+function ExchangeSeparator({ columns }) {
+  const width = Math.max(16, (columns || 80) - 1);
+  return h(Box, { flexDirection: 'column', width: '100%' },
+    h(Text, { color: '#2a2e3f' }, '\u2500'.repeat(width))
+  );
+}
+
+export const ExchangeBlock = React.memo(function ExchangeBlock({
+  exchange,
+  columns,
+  expandedOutputIndexes,
+  expandedThoughtIds,
+}) {
+  if (!exchange) return null;
+  return h(Box, { flexDirection: 'column' },
+    h(ExchangeSeparator, { columns }),
+    exchange.user ? h(UserMessageBlock, { message: exchange.user }) : null,
+    exchange.user ? h(Box, { height: 1 }) : null,
+    h(EventList, {
+      events: exchange.events,
+      expandedOutputIndexes,
+      thoughtStreaming: false,
+      paused: false,
+      animate: false,
+      expandedThoughtIds,
+    })
+  );
+});
+
+// [FIX-1] EventListWithStatic sépare les events terminés (passés à <Static>, jamais
+// re-rendus) des events actifs (rendu dynamique normal qui supporte scroll, animations
+// et `expandedOutputIndexes`). Règles :
+//   - <Static> n'est utilisé que si !paused && !thoughtStreaming
+//     (sinon le dernier event peut muter et Static est one-shot).
+//   - "actif" = un tool_start sans tool_end, OU un context_summary_start sans end,
+//     OU le dernier event si c'est un thought/text (en cours de streaming).
+//   - MAX_RENDER_EVENTS reste le filet de sécurité sur la partie dynamique.
+export const EventListWithStatic = React.memo(function EventListWithStatic({ events, scrollOffset = 0, expandedOutputIndexes, thoughtStreaming = false, paused = false, expandedThoughtIds, animate = true, expandedSubagentId, allSubagentEvents }) {
+  // [FIX-1 v3] Règle SIMPLIFIÉE : seul le DERNIER event de `events` est en
+  // streaming. Tous les autres sont "complétés" et vont dans <Static>. Cela
+  // évite le bug précédent où on essayait de mettre dans Static les events
+  // entre (tool_start résolu) et (dernier event), mais ces events sont souvent
+  // recréés en interne par `updateLastEvent` (text/thought en streaming
+  // reçoivent un nouveau objet à chaque flush), ce qui faisait sauter le test
+  // de cohérence et obligeait à ré-émettre toute la liste à Static.
+  //
+  // Conséquence : le tool_start sans tool_end (encore en cours) est dans la
+  // zone dynamique, ce qui est correct : il faut qu'il s'anime. Mais
+  // EventList.renderEvent gère déjà le null pour les tool_start qui ont un
+  // tool_end (donc on n'aura pas de doublon).
+  const staticAccumulatorRef = useRef([]);
+  const lastEventsRef = useRef(null);
+
+  if (!events || events.length === 0) {
+    if (staticAccumulatorRef.current.length > 0) {
+      staticAccumulatorRef.current = [];
+      lastEventsRef.current = null;
+    }
+    return null;
+  }
+
+  // Si on ne peut pas utiliser Static en sécurité, retomber sur EventList.
+  // CRITIQUE : on NE RESET PAS l'accumulateur ici. Sinon, pendant le thinking,
+  // on perd la trace des events ajoutés, et au retour on doit tous les
+  // réémettre d'un coup à Static (gros reprint → header qui descend).
+  // L'accumulateur continuera de croître dans la suite du code (section
+  // "Étend l'accumulateur à cut"), indépendamment de canUseStatic.
+  const canUseStatic = !paused && !thoughtStreaming;
+  if (!canUseStatic) {
+    // On rend tout en dynamique, sans Static. L'accumulateur est mis à jour
+    // juste après par le code d'extension ci-dessous.
+  }
+
+  // lastEventsRef : on s'en sert juste pour détecter un changement de référence
+  // complet (= reset, clear, /new, restore). Pour le cas append-only, on
+  // étendra l'accumulateur en append.
+  if (lastEventsRef.current !== events) {
+    // events est une nouvelle référence (cf. flushEventsToState qui fait
+    // setCurrentEvents([...eventsRef.current])). On ne peut pas se fier aux
+    // références d'objets. On se base sur la longueur et on vérifie que
+    // l'accumulateur tient toujours comme préfixe via le contenu (position).
+    // Si la longueur a diminué OU a sauté en avant de plus de 1, on reset.
+    const acc = staticAccumulatorRef.current;
+    const expectedDelta = events.length - (lastEventsRef.current?.length ?? 0);
+    if (expectedDelta < 0 || expectedDelta > 1 || acc.length > events.length) {
+      // Régression, clear, /new, ou restore : reset complet.
+      staticAccumulatorRef.current = [];
+    } else if (acc.length > 0) {
+      // Append d'au plus 1 event. On vérifie que les events d'avant sont
+      // structurellement "les mêmes" (même type et même id quand applicable).
+      // C'est une heuristique : si le type et l'id (ou content pour text/thought
+      // qui n'ont pas d'id) matchent, on considère que c'est le même event.
+      // Note : updateLastEvent recrée l'objet, donc === ne marche pas. Mais le
+      // contenu (type + id) reste stable.
+      let stillConsistent = true;
+      for (let i = 0; i < acc.length; i++) {
+        const a = acc[i];
+        const e = events[i];
+        if (a.type !== e.type) { stillConsistent = false; break; }
+        if (a.id != null && e.id != null && a.id !== e.id) { stillConsistent = false; break; }
+      }
+      if (!stillConsistent) {
+        staticAccumulatorRef.current = [];
+      }
+    }
+    lastEventsRef.current = events;
+  }
+
+  // Calcule le "cut" : tout sauf le DERNIER event. Si events a un seul
+  // élément, completedEvents est vide et tout est dynamique.
+  const cut = Math.max(0, events.length - 1);
+
+  // Étend l'accumulateur seulement s'il manque des events complétés.
+  // `events.slice(0, cut)` crée un nouveau tableau, mais on ne le fait que
+  // quand la longueur a augmenté.
+  if (staticAccumulatorRef.current.length < cut) {
+    staticAccumulatorRef.current = events.slice(0, cut);
+  }
+
+  // Les events subagent sont exclus du Static (besoin d'interactivité Ctrl+A
+  // pour expand/replier le SubagentPanel). Ils sont prepend à activeEvents.
+  const staticSubagentEvents = [];
+  const staticOtherEvents = [];
+  for (const ev of staticAccumulatorRef.current) {
+    if (ev.type === 'subagent') {
+      staticSubagentEvents.push(ev);
+    } else {
+      staticOtherEvents.push(ev);
+    }
+  }
+  const completedEvents = staticOtherEvents;
+  const activeEvents = [...staticSubagentEvents, ...events.slice(cut)];
+
+  // Rendu static : on appelle renderEvent avec thoughtStreaming=false pour que
+  // les spinners statiques soient en état "done" (ces events sont terminés).
+  // expandedOutputIndexes n'est PAS passé : un event dans Static ne peut plus
+  // être re-rendu, donc l'expansion est sans effet sur lui (acceptable : un
+  // tool_end figé reste consultable visuellement, juste non-extensible).
+  const renderStatic = (ev, i) => {
+    // expandedThoughtIds=undefined : les events dans Static sont figés, donc
+    // l'état plié/déplié de leurs thoughts est sans effet (toujours plié).
+    const el = renderEvent(ev, i, events, undefined, false, undefined, false, expandedSubagentId, allSubagentEvents);
+    if (el === null) return null;
+    return el;
+  };
+
+  // Si !canUseStatic, on rend tout en dynamique (sans Static). L'accumulateur
+  // a quand même été étendu ci-dessus, donc au retour à canUseStatic=true,
+  // Static reprendra avec un accumulateur déjà à jour, sans reprint.
+  if (!canUseStatic) {
+    return h(EventList, { events, scrollOffset, expandedOutputIndexes, thoughtStreaming, paused, expandedThoughtIds, animate, expandedSubagentId, allSubagentEvents });
+  }
+
+  return h(Box, { flexDirection: 'column' },
+    completedEvents.length > 0
+      ? h(Static, { items: completedEvents }, renderStatic)
+      : null,
+    activeEvents.length > 0
+      ? h(EventList, { events: activeEvents, scrollOffset, expandedOutputIndexes, thoughtStreaming, paused, expandedThoughtIds, animate, expandedSubagentId, allSubagentEvents })
+      : null
+  );
+});