cx-viewer 1.0.2 → 1.0.4

package/src/components/viewers/MarkdownBlock.jsx

@@ -0,0 +1,112 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Tooltip } from 'antd';
+import { CopyOutlined, DownloadOutlined, CameraOutlined, SaveOutlined } from '@ant-design/icons';
+import { renderMarkdown } from '../../utils/markdown';
+import { renderIncremental } from '../../utils/markdownIncremental';
+import { recordMountSample, DEV_PROFILER_ENABLED } from '../../utils/markdownProfiler';
+import { isMobile, isPad } from '../../env';
+import { t } from '../../i18n';
+import { useMarkdownExport } from '../../hooks/useMarkdownExport';
+import styles from './MarkdownBlock.module.css';
+
+// markdown ≤ 此字符数视为「简短」，隐藏 hover 的「另存为」操作栏 —— 短内容无下载价值，可直接选中复制。
+const SHORT_MD_CHAR_THRESHOLD = 200;
+
+function MarkdownBlock({ text, className, style, trailingCursor }) {
+  const [hovered, setHovered] = useState(false);
+  const [saveMenuOpen, setSaveMenuOpen] = useState(false);
+  const timerRef = useRef(null);
+  const wrapRef = useRef(null);
+  const mountStartRef = useRef(0);
+  const textRef = useRef(text);
+  textRef.current = text;
+
+  const { handleCopy, handleSaveAs, handleSaveAsImage, handleSaveToProject } = useMarkdownExport({
+    getText: useCallback(() => textRef.current, []),
+    getSnapshotTarget: useCallback(() => wrapRef.current?.closest('[class*="bubble"]') || wrapRef.current, []),
+    onDone: useCallback(() => setSaveMenuOpen(false), []),
+  });
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  const html = useMemo(
+    () => text ? (trailingCursor ? renderIncremental(text) : renderMarkdown(text)) : '',
+    [text, trailingCursor]
+  );
+
+  // Dev-only mount profiling: start AFTER useMemo so `md-parse` time (measured
+  // separately inside renderMarkdown) is not double-counted in `md-mount`.
+  // Ref-based — a discarded render under React concurrent mode simply gets
+  // overwritten by the next render's timestamp, no pending-Map leak.
+  if (DEV_PROFILER_ENABLED) mountStartRef.current = performance.now();
+  useEffect(() => {
+    if (DEV_PROFILER_ENABLED && mountStartRef.current > 0) {
+      recordMountSample(performance.now() - mountStartRef.current);
+      mountStartRef.current = 0;
+    }
+  });
+
+  if (!text) return null;
+
+  const handleMouseEnter = useCallback(() => {
+    clearTimeout(timerRef.current);
+    setHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    timerRef.current = setTimeout(() => { setHovered(false); setSaveMenuOpen(false); }, 150);
+  }, []);
+
+  return (
+    <div
+      ref={wrapRef}
+      className={styles.mdBlockWrapper}
+      onMouseEnter={(isMobile && !isPad) ? undefined : handleMouseEnter}
+      onMouseLeave={(isMobile && !isPad) ? undefined : handleMouseLeave}
+    >
+      <div
+        className={`chat-md ${className || ''} ${trailingCursor ? styles.streamingTail : ''}`}
+        style={style}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {(!isMobile || isPad) && hovered && text.length > SHORT_MD_CHAR_THRESHOLD && (
+        <div className={styles.actionBar} data-html2canvas-ignore>
+          <div className={`${styles.hoverPad} ${styles.hoverPadTop}`} aria-hidden="true" />
+          <div className={styles.saveAsWrap}
+            onMouseEnter={() => setSaveMenuOpen(true)}
+            onMouseLeave={() => setSaveMenuOpen(false)}
+          >
+            <Tooltip title={saveMenuOpen ? '' : t('ui.saveAs')} mouseEnterDelay={0.3}>
+              <span className={styles.actionBtn}>
+                <DownloadOutlined />
+              </span>
+            </Tooltip>
+            {saveMenuOpen && (
+              <div className={styles.saveMenu}>
+                <button className={styles.saveMenuItem} onClick={handleSaveAs}>
+                  <DownloadOutlined />
+                  <span>{t('ui.saveAsMd')}</span>
+                </button>
+                <button className={styles.saveMenuItem} onClick={handleCopy}>
+                  <CopyOutlined />
+                  <span>{t('ui.copyTextContent')}</span>
+                </button>
+                <button className={styles.saveMenuItem} onClick={handleSaveAsImage}>
+                  <CameraOutlined />
+                  <span>{t('ui.saveAsImage')}</span>
+                </button>
+                <button className={styles.saveMenuItem} onClick={handleSaveToProject}>
+                  <SaveOutlined />
+                  <span>{t('ui.saveToProject')}</span>
+                </button>
+              </div>
+            )}
+          </div>
+          <div className={`${styles.hoverPad} ${styles.hoverPadBottom}`} aria-hidden="true" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default React.memo(MarkdownBlock);

package/src/components/viewers/MarkdownBlock.module.css

@@ -0,0 +1,157 @@
+.mdBlockWrapper {
+  position: relative;
+}
+
+.actionBar {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  padding-left: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
+  opacity: 0;
+  animation: fadeIn 0.15s ease forwards;
+}
+
+/* 不可见 hover 垫片：把 actionBar 的 DOM 边界竖向/横向扩出去，
+   用户从气泡外侧斜向或垂直靠近下载按钮时鼠标仍在 wrapper 子树内
+   （actionBar 是 wrapper 的子节点），wrapper 的 mouseleave 不会
+   被触发，hovered state 稳定保持，按钮不会提前 fade out。
+   关键：用 absolute 定位脱离 flex 流，pad 不占布局高度，按钮
+   保持贴 actionBar 顶部（top:0）原位不被下推；宽 48px 比按钮
+   24px 多向右溢出 24px 作为水平 hover 桥；上下各 60px 作为
+   竖向 hover 桥。actionBar 仅在 hovered=true 时 render，不会
+   干扰非激活气泡。 */
+.hoverPad {
+  position: absolute;
+  left: 8px;
+  width: 48px;
+  height: 60px;
+}
+.hoverPadTop {
+  bottom: 100%;
+}
+.hoverPadBottom {
+  top: 100%;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.actionBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  background: var(--bg-container);
+  border: 1px solid var(--text-muted);
+  font-size: 12px;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+.actionBtn:hover {
+  color: var(--text-primary);
+  background: var(--bg-surface);
+  border-color: var(--border-hover);
+}
+
+/* ─── 另存为 下拉按钮 ─── */
+.saveAsWrap {
+  position: relative;
+}
+
+.saveMenu {
+  position: absolute;
+  top: 24px;
+  right: 0;
+  padding-top: 4px;
+  min-width: 130px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-hover);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px var(--overlay-dark-light);
+  padding: 4px;
+  z-index: 20;
+  animation: fadeIn 0.1s ease;
+}
+
+.saveMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.saveMenuItem:hover {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+/* 流式容器局部化布局/样式计算，减少整页 reflow，缓解结构变化（如换行产生新块）
+   时视觉抖动感。contain: layout style 让浏览器把该子树视为独立布局单元。 */
+.streamingTail {
+  contain: layout style;
+}
+
+/* 末段 min-height 稳定：marked 流式解析半途可能短暂出现空 <p></p>，没有 min-height
+   会导致末行高度在一帧内由 0→1lh 抖一下。给常见末端块级元素兜底最小高度。 */
+.streamingTail > p:last-child,
+.streamingTail > ol:last-child > li:last-child,
+.streamingTail > ul:last-child > li:last-child,
+.streamingTail > blockquote:last-child {
+  min-height: 1.4em;
+}
+
+/* 流式光标：贴在流式 overlay 最后一个 MarkdownBlock 的最深叶子元素末尾。
+   多选择器覆盖常见 markdown 末尾结构（段落 / 列表末 li / 代码块末行 /
+   引用 / 表格最后一个单元格）。:not(:empty) 过滤 marked 流式半途产生的空 <p></p>，
+   避免光标飘到空行。深嵌套列表（<ul><li><ul><li>...）通过 li:last-child ul:last-child
+   li:last-child 递归命中最深一层。 */
+.streamingTail > :not(ol):not(ul):not(pre):not(blockquote):not(table):not(:empty):last-child::after,
+.streamingTail > ol:last-child > li:last-child::after,
+.streamingTail > ul:last-child > li:last-child::after,
+.streamingTail > ol:last-child > li:last-child > ol:last-child > li:last-child::after,
+.streamingTail > ul:last-child > li:last-child > ul:last-child > li:last-child::after,
+.streamingTail > pre:last-child code::after,
+.streamingTail > blockquote:last-child > :not(:empty):last-child::after,
+.streamingTail > table:last-child tr:last-child td:last-child::after {
+  content: '▌';
+  display: inline-block;
+  margin-left: 4px;
+  color: var(--color-primary, #0969DA);
+  /* cursorEnter: 40ms 极短淡入，缓和结构切换时光标硬现到新位置的硬闪；
+     cursorBlinkInline: 常规闪烁。淡入完成后接入闪烁，两段独立时间轴。
+     40ms 约 2~3 帧，小于典型 chunk 节流 (100ms)，不会与 chunk 重绘反复叠加。 */
+  animation: cursorEnter 40ms ease-out, cursorBlinkInline 1s step-end infinite 40ms;
+  user-select: none;
+  font-family: var(--font-mono);
+  vertical-align: baseline;
+}
+
+@keyframes cursorEnter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes cursorBlinkInline {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}

package/src/components/viewers/ToolResultView.jsx

@@ -0,0 +1,389 @@
+import React, { useState, useEffect } from 'react';
+import { Typography } from 'antd';
+import { t } from '../../i18n';
+import { renderMarkdown } from '../../utils/markdown';
+import { escapeHtml } from '../../utils/helpers';
+import WorkflowPanel from './WorkflowPanel';
+import styles from './ToolResultView.module.css';
+
+const { Text } = Typography;
+
+// File extension to language mapping
+const EXT_LANG = {
+  js: 'javascript', jsx: 'javascript', ts: 'typescript', tsx: 'typescript',
+  py: 'python', rb: 'ruby', go: 'go', rs: 'rust', java: 'java',
+  c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp',
+  css: 'css', scss: 'css', less: 'css',
+  html: 'html', htm: 'html', xml: 'xml', svg: 'xml',
+  json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml',
+  sh: 'shell', bash: 'shell', zsh: 'shell',
+  md: 'markdown', sql: 'sql',
+};
+
+// Tools whose results are typically code/file content
+const CODE_TOOLS = ['shell_command', 'apply_patch', 'read_mcp_resource'];
+
+function detectLang(toolName, toolInput, resultText) {
+  if (!toolInput) return null;
+
+  // 1. Try file_path extension when the tool input includes one.
+  const filePath = toolInput.file_path || '';
+  if (filePath) {
+    const ext = filePath.split('.').pop().toLowerCase();
+    if (EXT_LANG[ext]) return EXT_LANG[ext];
+  }
+
+  // 2. shell_command → shell output
+  if (toolName === 'shell_command') return 'shell-output';
+
+  // 3. path field is a directory (no useful extension) — try content-based detection
+  if (resultText) {
+    return detectLangFromContent(resultText);
+  }
+
+  return null;
+}
+
+// Content-based language detection by scanning for characteristic patterns
+function detectLangFromContent(text) {
+  const sample = text.substring(0, 2000);
+
+  // JSON: starts with { or [
+  if (/^\s*[\[{]/.test(sample) && /[}\]]\s*$/.test(sample.trimEnd())) return 'json';
+
+  // HTML/XML: starts with < or has doctype
+  if (/^\s*<!DOCTYPE|^\s*<html|^\s*<\?xml/i.test(sample)) return 'html';
+
+  // Python: def/class/import with colon, or shebang
+  if (/^#!.*python/m.test(sample)) return 'python';
+  if (/\bdef\s+\w+\s*\(.*\)\s*:/m.test(sample) || /\bclass\s+\w+.*:/m.test(sample)) return 'python';
+  if (/^\s*(from\s+\w+\s+import|import\s+\w+)/m.test(sample) && /:$/.test(sample)) return 'python';
+
+  // Rust: fn main, let mut, impl, pub fn
+  if (/\bfn\s+\w+\s*\(/.test(sample) && /\blet\s+(mut\s+)?\w+/.test(sample)) return 'rust';
+
+  // Go: func, package main, :=
+  if (/^package\s+\w+/m.test(sample) && /\bfunc\s+/.test(sample)) return 'go';
+
+  // Java: public class, public static void
+  if (/\bpublic\s+(class|interface|static)\b/.test(sample)) return 'java';
+
+  // Ruby: def/end, do/end
+  if (/\bdef\s+\w+/.test(sample) && /\bend\b/.test(sample) && !/;/.test(sample)) return 'ruby';
+
+  // Shell script: shebang or heavy use of shell builtins
+  if (/^#!.*\b(bash|sh|zsh)\b/m.test(sample)) return 'shell';
+
+  // JS/TS: const/let/var + arrow functions or require/import
+  if (/\b(const|let|var)\s+\w+\s*=/.test(sample) && (/=>/.test(sample) || /\brequire\s*\(/.test(sample))) return 'javascript';
+  if (/^\s*import\s+.*\s+from\s+['"]/.test(sample)) return 'javascript';
+  if (/^\s*export\s+(default\s+)?(function|class|const)\b/m.test(sample)) return 'javascript';
+
+  // CSS: selectors with { property: value }
+  if (/[.#][\w-]+\s*\{[\s\S]*?:\s*[\w#]/.test(sample)) return 'css';
+
+  // YAML: key: value pattern without braces
+  if (/^[\w-]+\s*:(\s+\S|$)/m.test(sample) && !/[{;]/.test(sample)) return 'yaml';
+
+  // SQL
+  if (/\b(SELECT|INSERT|UPDATE|DELETE|CREATE\s+TABLE)\b/i.test(sample)) return 'sql';
+
+  return null;
+}
+
+// Lightweight syntax highlight rules per language
+const RULES = {
+  javascript: [
+    { pattern: /(\/\/.*$)/gm, cls: 'hl-comment' },
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, cls: 'hl-comment' },
+    { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`(?:[^`\\]|\\.)*`)/g, cls: 'hl-string' },
+    { pattern: /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|default|new|this|async|await|try|catch|throw|switch|case|break|continue|typeof|instanceof|in|of|null|undefined|true|false)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  typescript: null, // will fallback to javascript
+  python: [
+    { pattern: /(#.*$)/gm, cls: 'hl-comment' },
+    { pattern: /('''[\s\S]*?'''|"""[\s\S]*?"""|'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(def|class|return|if|elif|else|for|while|import|from|as|try|except|finally|raise|with|yield|lambda|pass|break|continue|and|or|not|in|is|None|True|False|self|async|await)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  go: [
+    { pattern: /(\/\/.*$)/gm, cls: 'hl-comment' },
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, cls: 'hl-comment' },
+    { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`[^`]*`)/g, cls: 'hl-string' },
+    { pattern: /\b(func|return|if|else|for|range|switch|case|default|break|continue|go|defer|select|chan|map|struct|interface|package|import|var|const|type|nil|true|false|make|new|append|len|cap)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  rust: [
+    { pattern: /(\/\/.*$)/gm, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(fn|let|mut|return|if|else|for|while|loop|match|struct|enum|impl|trait|pub|use|mod|crate|self|super|where|async|await|move|ref|true|false|Some|None|Ok|Err)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  java: [
+    { pattern: /(\/\/.*$)/gm, cls: 'hl-comment' },
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(public|private|protected|class|interface|extends|implements|return|if|else|for|while|switch|case|break|continue|new|this|super|static|final|void|int|long|double|float|boolean|char|String|import|package|try|catch|throw|throws|null|true|false)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*[fFdDlL]?)\b/g, cls: 'hl-number' },
+  ],
+  ruby: [
+    { pattern: /(#.*$)/gm, cls: 'hl-comment' },
+    { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(def|end|class|module|return|if|elsif|else|unless|for|while|do|begin|rescue|ensure|raise|yield|block_given\?|nil|true|false|self|require|include|attr_accessor|attr_reader)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  css: [
+    { pattern: /(\/\*[\s\S]*?\*\/)/g, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, cls: 'hl-string' },
+    { pattern: /([.#][\w-]+)/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*(px|em|rem|%|vh|vw|s|ms)?)\b/g, cls: 'hl-number' },
+  ],
+  json: [
+    { pattern: /("(?:[^"\\]|\\.)*")\s*:/g, cls: 'hl-keyword' },
+    { pattern: /:\s*("(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(true|false|null)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(-?\d+\.?\d*([eE][+-]?\d+)?)\b/g, cls: 'hl-number' },
+  ],
+  shell: [
+    { pattern: /(#.*$)/gm, cls: 'hl-comment' },
+    { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+    { pattern: /\b(if|then|else|elif|fi|for|while|do|done|case|esac|function|return|exit|export|source|alias|cd|ls|grep|find|echo|cat|mkdir|rm|cp|mv|chmod|sudo|apt|npm|pip|git)\b/g, cls: 'hl-keyword' },
+  ],
+  sql: [
+    { pattern: /(--.*$)/gm, cls: 'hl-comment' },
+    { pattern: /('(?:[^'\\]|\\.)*')/g, cls: 'hl-string' },
+    { pattern: /\b(SELECT|FROM|WHERE|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|TABLE|INDEX|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AND|OR|NOT|IN|IS|NULL|AS|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|UNION|SET|VALUES|INTO|DISTINCT|COUNT|SUM|AVG|MAX|MIN|LIKE|BETWEEN|EXISTS|CASE|WHEN|THEN|ELSE|END)\b/gi, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  html: [
+    { pattern: /(<!--[\s\S]*?-->)/g, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, cls: 'hl-string' },
+    { pattern: /(<\/?[\w-]+|\/?>)/g, cls: 'hl-keyword' },
+  ],
+  xml: null, // fallback to html
+  yaml: [
+    { pattern: /(#.*$)/gm, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, cls: 'hl-string' },
+    { pattern: /^([\w.-]+)\s*:/gm, cls: 'hl-keyword' },
+    { pattern: /\b(true|false|null|yes|no)\b/gi, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+  markdown: [
+    { pattern: /^(#{1,6}\s.*$)/gm, cls: 'hl-keyword' },
+    { pattern: /(`[^`]+`)/g, cls: 'hl-string' },
+    { pattern: /(\*\*[^*]+\*\*|__[^_]+__)/g, cls: 'hl-keyword' },
+    { pattern: /(\[[^\]]+\]\([^)]+\))/g, cls: 'hl-string' },
+  ],
+  toml: [
+    { pattern: /(#.*$)/gm, cls: 'hl-comment' },
+    { pattern: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, cls: 'hl-string' },
+    { pattern: /^([\w.-]+)\s*=/gm, cls: 'hl-keyword' },
+    { pattern: /(\[[\w.-]+\])/g, cls: 'hl-keyword' },
+    { pattern: /\b(true|false)\b/g, cls: 'hl-keyword' },
+    { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+  ],
+};
+
+// Fallback rules for unknown languages
+const FALLBACK_RULES = [
+  { pattern: /(\/\/.*$|#.*$)/gm, cls: 'hl-comment' },
+  { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`(?:[^`\\]|\\.)*`)/g, cls: 'hl-string' },
+  { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+];
+
+// Shell output: highlight file paths and line numbers (e.g. grep/read output)
+const SHELL_OUTPUT_RULES = [
+  { pattern: /^([\w/.~-]+:\d+[:-])/gm, cls: 'hl-keyword' },  // file:line:
+  { pattern: /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g, cls: 'hl-string' },
+  { pattern: /\b(\d+\.?\d*)\b/g, cls: 'hl-number' },
+];
+
+// File list output: highlight paths by extension
+const FILE_LIST_RULES = [
+  { pattern: /^(.*\.(jsx?|tsx?|mjs|cjs))$/gm, cls: 'hl-string' },    // JS/TS files
+  { pattern: /^(.*\.(py|rb|go|rs|java|c|cpp|h))$/gm, cls: 'hl-keyword' }, // other code
+  { pattern: /^(.*\.(json|ya?ml|toml|xml|html?|css|scss|less|md))$/gm, cls: 'hl-number' }, // config/markup
+  { pattern: /^(.*\.(log|txt|csv|jsonl))$/gm, cls: 'hl-comment' },    // data files
+];
+
+const _hlCache = new Map();
+const _HL_CACHE_MAX = 512;
+
+function highlight(text, lang) {
+  const cacheKey = `${lang}\0${text}`;
+  const hit = _hlCache.get(cacheKey);
+  if (hit !== undefined) return hit;
+
+  let resolvedLang = lang;
+  // resolve aliases
+  if (resolvedLang === 'typescript') resolvedLang = 'javascript';
+  if (resolvedLang === 'xml') resolvedLang = 'html';
+  if (resolvedLang === 'c' || resolvedLang === 'cpp') resolvedLang = 'javascript'; // close enough for basic highlighting
+
+  let rules;
+  if (resolvedLang === 'shell-output') {
+    rules = SHELL_OUTPUT_RULES;
+  } else if (resolvedLang === 'file-list') {
+    rules = FILE_LIST_RULES;
+  } else {
+    rules = RULES[resolvedLang] || FALLBACK_RULES;
+  }
+
+  // Strip line-number prefixes (e.g. "     1→" or "   123→") before
+  // highlighting to avoid number pollution.
+  const lineNumRe = /^(\s*\d+→)/gm;
+  const lineNums = [];
+  let stripped = text.replace(lineNumRe, (match) => {
+    const idx = lineNums.length;
+    lineNums.push(match);
+    return `\x01L${idx}\x01`;
+  });
+
+  const escaped = escapeHtml(stripped);
+
+  // Use placeholder-based approach to avoid double-replacing.
+  // Use \x02P{idx}\x02 as placeholder — these chars won't appear in
+  // escaped HTML or be matched by any highlight regex.
+  const placeholders = [];
+  let result = escaped;
+
+  for (const rule of rules) {
+    rule.pattern.lastIndex = 0;
+    result = result.replace(rule.pattern, (match) => {
+      const idx = placeholders.length;
+      placeholders.push(`<span class="${rule.cls}">${match}</span>`);
+      return `\x02P${idx}\x02`;
+    });
+  }
+
+  // Restore highlight placeholders
+  result = result.replace(/\x02P(\d+)\x02/g, (_, idx) => placeholders[parseInt(idx)]);
+
+  // Restore line number prefixes with dedicated styling
+  result = result.replace(/\x01L(\d+)\x01/g, (_, idx) => {
+    const ln = escapeHtml(lineNums[parseInt(idx)]);
+    return `<span class="hl-linenum">${ln}</span>`;
+  });
+
+  if (_hlCache.size >= _HL_CACHE_MAX) {
+    _hlCache.delete(_hlCache.keys().next().value);
+  }
+  _hlCache.set(cacheKey, result);
+  return result;
+}
+
+function ToolResultView({ toolName, toolInput, resultText, images, workflow, defaultCollapsed }) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
+  useEffect(() => { setCollapsed(defaultCollapsed ?? false); }, [defaultCollapsed]);
+
+  // Workflow 工具：渲染工作流面板（phases + agents，实时跟随）。
+  // 缺结构化 id（旧条目）时 WorkflowPanel 内部回退纯文本。
+  if (toolName === 'Workflow' && workflow && (workflow.runId || workflow.taskId)) {
+    return <WorkflowPanel workflow={workflow} resultText={resultText} defaultCollapsed={defaultCollapsed} />;
+  }
+
+  const isCodeTool = CODE_TOOLS.includes(toolName);
+  const lang = isCodeTool ? detectLang(toolName, toolInput, resultText) : null;
+  const displayText = resultText.length > 5000 ? resultText.substring(0, 5000) + '\n... (truncated)' : resultText;
+  const hasImages = Array.isArray(images) && images.length > 0;
+  const imageBlock = hasImages ? (
+    <div className={styles.imageBlock}>
+      {images.map((img, idx) => (
+        img.oversized ? (
+          <div key={`img-${idx}`} className={styles.imagePlaceholder}>
+            {`[image ${(img.mediaType || '').replace('image/', '')} · ${Math.round(img.sizeBytes / 1024)} KB · too large to preview]`}
+          </div>
+        ) : (
+          <img key={`img-${idx}`} src={img.src} alt={img.mediaType || 'image'} className={styles.imageItem} loading="lazy" />
+        )
+      ))}
+    </div>
+  ) : null;
+
+  // Build title（内层标题：显示文件名等有用信息）
+  let title = toolName ? t('ui.toolReturnNamed', { name: toolName }) : 'Result';
+  if (toolInput) {
+    const filePath = toolInput.file_path || toolInput.path || '';
+    if (filePath) {
+      // show just filename
+      const parts = filePath.split('/');
+      title = `${toolName}: ${parts[parts.length - 1]}`;
+    }
+  }
+
+  // 文本为空但有图时,仅渲染图块,避免空 pre 占位
+  const hasText = typeof resultText === 'string' && resultText.length > 0;
+  if (!hasText && hasImages) {
+    return (
+      <div className={styles.plainResult}>
+        <div className={styles.codeHeader}>
+          <Text type="secondary" className={styles.plainTitle}>{title}</Text>
+        </div>
+        {imageBlock}
+      </div>
+    );
+  }
+
+  // 4 个文本分支(Task / non-code / code / 兜底)都需要 "imageBlock 在 textBody 之前"
+  // 的折叠展开,抽出 helper 避免重复 `{!collapsed && imageBlock}{!collapsed && body}` 模式
+  const renderBodyWithImages = (textBody) => collapsed ? null : (<>{imageBlock}{textBody}</>);
+
+  if (!isCodeTool) {
+    // Task tool: render as markdown
+    if (toolName === 'Task') {
+      return (
+        <div className={styles.plainResult}>
+          <div className={styles.codeHeader}>
+            <Text type="secondary" className={styles.plainTitle}>{title}</Text>
+            <Text
+              className={styles.codeToggle}
+              onClick={() => setCollapsed(c => !c)}
+            >
+              {collapsed ? t('ui.expand') : t('ui.collapse')}
+            </Text>
+          </div>
+          {renderBodyWithImages(
+            <div className={`chat-md ${styles.markdownBody}`} dangerouslySetInnerHTML={{ __html: renderMarkdown(displayText) }} />
+          )}
+        </div>
+      );
+    }
+    // Non-code tool: plain text with collapse support
+    return (
+      <div className={styles.plainResult}>
+        <div className={styles.codeHeader}>
+          <Text type="secondary" className={styles.plainTitle}>{title}</Text>
+          <Text
+            className={styles.codeToggle}
+            onClick={() => setCollapsed(c => !c)}
+          >
+            {collapsed ? t('ui.expand') : t('ui.collapse')}
+          </Text>
+        </div>
+        {renderBodyWithImages(<pre className={styles.plainPre}>{displayText}</pre>)}
+      </div>
+    );
+  }
+
+  const highlighted = highlight(displayText, lang || 'fallback');
+
+  return (
+    <div className={`tool-result-code ${styles.codeResult}`}>
+      <div className={styles.codeHeader}>
+        <Text className={styles.codeTitle}>{title}{lang ? ` (${lang})` : ''}</Text>
+        <Text
+          className={styles.codeToggle}
+          onClick={() => setCollapsed(c => !c)}
+        >
+          {collapsed ? t('ui.expand') : t('ui.collapse')}
+        </Text>
+      </div>
+      {renderBodyWithImages(
+        <pre className={`code-highlight ${styles.codePre}`} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      )}
+    </div>
+  );
+}
+
+export default ToolResultView;