agent-Specialization/static/src/components/chat/actions/toolRenderers.ts
JOJO 478d24c4dd feat(versioning): 重构版本控制为对话级浅备份 + 可选完全备份
本次变更是对版本控制功能的大范围重构,核心目标:
- 默认使用浅备份(只追踪 write_file/edit_file 实际修改的文件),避免大工作区首次初始化耗时十几秒;
- 保留可选的完全备份(git write-tree),不污染 git log;
- 回溯时统一选择范围(仅对话 / 对话+工作区)和模式(覆盖 / 复制);
- 修复复制对话、侧边栏同步、新建对话延迟、diff 统计与渲染等连锁问题。

后端改动:
- modules/shallow_versioning.py(新增)
  - 实现 ShallowVersioningManager:track_edit、make_snapshot、rewind、list_snapshots。
  - 基于 difflib.SequenceMatcher 计算真实 insertions/deletions,replace 场景正确显示 +N/-M。
  - diff 详情使用结构化 add/remove/context 行,不再解析 unified_diff 文本。
- modules/versioning_manager.py
  - 完全备份从 git commit 改为 git write-tree,字段 commit/parent_commit 改为 tree_hash/parent_tree_hash。
  - 恢复改用 read-tree + checkout-index;create_checkpoint 支持 diff_summary 参数。
  - get_checkpoint_detail 保留 API 字段名 last_commit/restored_commit 以兼容前端。
- core/main_terminal_parts/tools_execution.py
  - write_file/edit_file 在执行前调用浅备份 track_edit,保留编辑前状态。
- server/chat_flow_task_main.py
  - 消息轮次结束时根据 backup_mode 选择完全备份 create_checkpoint 或浅备份 make_snapshot。
  - 浅备份模式下同时写入 ConversationVersioningManager 检查点行,让前端能统一展示。
- server/conversation.py
  - restore/detail/list API 支持 shallow 模式;list/detail 对浅备份实时重新计算统计。
  - 创建对话时读取 personalization 的 versioning_backup_mode,shallow 模式固定 tracking_mode 为 conversation_only。
- core/web_terminal.py
  - _ensure_conversation_versioning_enabled 读取默认备份模式并写入 versioning meta。
- modules/file_manager/crud_mixin.py / replace_mixin.py
  - write_file / edit_file 返回 original_file / new_file / replacement_details(真实旧行/新行)。
- modules/personalization_manager.py
  - 新增 versioning_enabled_by_default、versioning_backup_mode(shallow/full)。
- utils/perf_log.py(新增)
  - 创建新对话全链路性能日志,用于定位延迟瓶颈。
- utils/conversation_manager/{index,list_search,crud}_mixin.py
  - 加性能日志;index_mixin 主动检查新增对话文件,修复侧边栏不同步。

前端改动:
- static/src/components/overlay/VersioningDialog.vue
  - 去掉顶部管理范围下拉;底部新增回溯范围与回溯模式选择。
  - diff 详情改为 div.diff-line 网格布局(marker + content),支持横向滚动,状态显示缩写 A/M/D。
  - 修复 pre 标签空白黑行、容器被挤窄导致折行等问题。
- static/src/app/methods/versioning.ts
  - 移除 mismatch 弹窗逻辑;支持 copy 模式;selectVersioningCheckpoint 增强错误捕获。
- static/src/components/personalization/PersonalizationDrawer.vue
  - 「工作区与权限」新增版本控制默认开关与备份方式选择。
- static/src/stores/personalization.ts
  - 新增 versioning_enabled_by_default、versioning_backup_mode 字段。
- static/src/components/chat/actions/ToolAction.vue / toolRenderers.ts
  - edit_file / write_file 工具展示基于 result.details / result.new_file 的真实替换结果。
- static/src/app/state.ts / watchers.ts / App.vue
  - 新增 versioningInitializingBackupToastId,完全备份初始化时显示 toast。
- static/src/app/methods/conversation/action.ts / message/send.ts
  - host + 完全备份 + 默认开启时,创建新对话/从 /new 发送首条消息显示「正在初始化备份」toast。

验证:
- /Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/bin/python3.9 -m unittest test.test_server_refactor_smoke 通过。
- npm run build 通过。
- 宿主机与 docker 模式新建对话、编辑文件、回溯、复制对话均验证通过。
2026-07-07 12:07:44 +08:00

1226 lines
46 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 工具增强显示的渲染函数
export function escapeHtml(text: string): string {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
export function formatBytes(bytes: number): string {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
}
function formatDuration(seconds: number): string {
if (seconds <= 0) return '0 秒';
if (seconds < 60) return `${seconds}`;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
if (minutes < 60) {
return remainingSeconds > 0 ? `${minutes}${remainingSeconds}` : `${minutes}`;
}
const hours = Math.floor(minutes / 60);
const remainingMinutes = minutes % 60;
if (remainingMinutes === 0 && remainingSeconds === 0) {
return `${hours} 小时`;
}
return `${hours} 小时 ${remainingMinutes}${remainingSeconds}`;
}
function formatToolStatusLabel(result: any, successLabel: string, failedLabel = '✗ 失败'): string {
const state = String(result?.status || '').toLowerCase();
if (state === 'awaiting_user_answer') {
return '等待回答';
}
if (state === 'awaiting_approval' || state === 'pending_approval' || state === 'pending') {
return '待审批';
}
if (state === 'rejected') {
return '✗ 已拒绝';
}
if (state === 'cancelled') {
return '✗ 已取消';
}
return result?.success ? successLabel : failedLabel;
}
export function renderEnhancedToolResult(
action: any,
formatSearchTopic: (filters: Record<string, any>) => string,
formatSearchTime: (filters: Record<string, any>) => string,
formatSearchDomains: (filters: Record<string, any>) => string
): string {
const tool = action.tool;
const result = tool?.result;
const args = tool?.arguments || {};
const name = tool?.name;
if (!result) {
return '';
}
// 网络检索类
if (name === 'web_search') {
return renderWebSearch(result, args, formatSearchTopic, formatSearchTime, formatSearchDomains);
} else if (name === 'extract_webpage') {
return renderExtractWebpage(result, args);
} else if (name === 'save_webpage') {
return renderSaveWebpage(result, args);
}
// 文件编辑类
else if (name === 'create_file' || name === 'create_folder') {
return renderCreateFile(result, args);
} else if (name === 'write_file') {
return renderWriteFile(result, args);
} else if (name === 'edit_file') {
return renderEditFile(result, args);
} else if (name === 'delete_file') {
return renderDeleteFile(result, args);
} else if (name === 'rename_file') {
return renderRenameFile(result, args);
}
// 阅读聚焦 / Skills 类
else if (name === 'read_file' || name === 'read_skill') {
return renderReadFile(result, args);
} else if (name === 'create_skill') {
return renderCreateSkill(result, args);
} else if (name === 'vlm_analyze') {
return renderVlmAnalyze(result, args);
} else if (name === 'ocr_image') {
return renderOcrImage(result, args);
} else if (name === 'view_image') {
return renderViewImage(result, args);
}
// 终端类
else if (name === 'terminal_session') {
return renderTerminalSession(result, args);
} else if (name === 'terminal_input') {
return renderTerminalInput(result, args);
} else if (name === 'terminal_snapshot') {
return renderTerminalSnapshot(result, args);
} else if (name === 'sleep') {
return renderSleep(result, args);
}
// 终端指令类
else if (name === 'run_command') {
return renderRunCommand(result, args);
}
// 记忆类
else if (name === 'update_memory') {
return renderUpdateMemory(result, args);
} else if (name === 'recall_project_memory') {
return renderRecallProjectMemory(result, args);
} else if (name === 'update_project_memory') {
return renderUpdateProjectMemory(result, args);
} else if (name === 'conversation_search') {
return renderConversationSearch(result, args);
} else if (name === 'conversation_review') {
return renderConversationReview(result, args);
}
// 用户沟通类
else if (name === 'ask_user') {
return renderAskUser(result, args);
}
// 个性化管理类
else if (name === 'manage_personalization') {
return renderManagePersonalization(result, args);
}
// 待办事项类
else if (name === 'todo_create') {
return renderTodoCreate(result, args);
} else if (name === 'todo_update_task') {
return renderTodoUpdate(result);
}
// 彩蛋类
else if (name === 'trigger_easter_egg') {
return renderEasterEgg(result, args);
}
// 子智能体类
else if (name === 'create_sub_agent') {
return renderCreateSubAgent(result, args);
} else if (name === 'terminate_sub_agent') {
return renderTerminateSubAgent(result, args);
} else if (name === 'get_sub_agent_status') {
return renderGetSubAgentStatus(result, args);
}
return '';
}
// 网络检索类渲染函数
function renderWebSearch(
result: any,
args: any,
formatSearchTopic: (filters: Record<string, any>) => string,
formatSearchTime: (filters: Record<string, any>) => string,
formatSearchDomains: (filters: Record<string, any>) => string
): string {
const query = result.query || args.query || '';
const filters = result.filters || {};
const totalResults = result.total_results || 0;
const results = result.results || [];
let html = '<div class="tool-result-meta">';
html += `<div><strong>搜索内容:</strong>${escapeHtml(query)}</div>`;
html += `<div><strong>主题:</strong>${escapeHtml(formatSearchTopic(filters))}</div>`;
html += `<div><strong>时间范围:</strong>${escapeHtml(formatSearchTime(filters))}</div>`;
html += `<div><strong>限定网站:</strong>${escapeHtml(formatSearchDomains(filters))}</div>`;
html += `<div><strong>结果数量:</strong>${totalResults}</div>`;
html += '</div>';
if (results.length > 0) {
html += '<div class="search-result-list">';
results.forEach((item: any) => {
html += '<div class="search-result-item">';
html += `<div class="search-result-title">${escapeHtml(item.title || '无标题')}</div>`;
html += '<div class="search-result-url">';
if (item.url) {
html += `<a href="${escapeHtml(item.url)}" target="_blank">${escapeHtml(item.url)}</a>`;
} else {
html += '<span>无可用链接</span>';
}
html += '</div></div>';
});
html += '</div>';
} else {
html += '<div class="tool-result-empty">未返回详细的搜索结果。</div>';
}
return html;
}
function renderExtractWebpage(result: any, args: any): string {
const url = args.url || result.url || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const content = result.content || result.text || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>URL</strong>${escapeHtml(url)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
if (content) {
html += '<div class="tool-result-content scrollable">';
html += `<pre>${escapeHtml(content)}</pre>`;
html += '</div>';
}
return html;
}
function renderSaveWebpage(result: any, args: any): string {
const url = args.url || result.url || '';
const path = result.path || args.save_path || '';
const status = formatToolStatusLabel(result, '✓ 已保存');
let html = '<div class="tool-result-meta">';
html += `<div><strong>URL</strong>${escapeHtml(url)}</div>`;
html += `<div><strong>保存路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
return html;
}
// 文件编辑类渲染函数
function renderCreateFile(result: any, args: any): string {
const path = args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 已创建');
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
return html;
}
function renderWriteFile(result: any, args: any): string {
const path = args.file_path || args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 已写入');
const appendFlag = typeof args.append === 'boolean' ? args.append : null;
const modeRaw = String(result.mode || '').toLowerCase();
const writeMode =
appendFlag === true || modeRaw === 'a'
? '追加'
: appendFlag === false || modeRaw === 'w'
? '覆盖'
: '无';
const content =
appendFlag === true || modeRaw === 'a'
? args.content || ''
: (result.new_file ?? args.content ?? '');
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>模式:</strong>${writeMode}</div>`;
if (!result.success && result.error) {
html += `<div><strong>错误:</strong>${escapeHtml(String(result.error))}</div>`;
}
html += '</div>';
// 显示写入的内容
if (result.success && content) {
html += '<div class="tool-result-diff scrollable">';
const lines = content.split('\n');
lines.forEach((line: string, idx: number) => {
html += `<div class="diff-line diff-add"><span class="diff-line-number">${idx + 1}</span><span class="diff-marker">+</span><span class="diff-content">${escapeHtml(line)}</span></div>`;
});
html += '</div>';
}
return html;
}
function renderEditFile(result: any, args: any): string {
const path = args.file_path || args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 已编辑');
const foundCount =
typeof result.found_matches === 'number'
? result.found_matches
: typeof result.replacements === 'number'
? result.replacements
: null;
const replacedCount = typeof result.replacements === 'number' ? result.replacements : null;
const details = Array.isArray(result.details)
? result.details.filter((d: any) => d && d.status === 'success')
: [];
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>替换组数:</strong>${(result.replacement_groups ?? details.length) || '无'}</div>`;
html += `<div><strong>找到:</strong>${foundCount ?? '无'}处</div>`;
html += `<div><strong>替换:</strong>${replacedCount ?? '无'}处</div>`;
if (!result.success && result.error) {
html += `<div><strong>错误:</strong>${escapeHtml(String(result.error))}</div>`;
}
html += '</div>';
if (!result.success) {
return html;
}
if (details.length > 0) {
html += '<div class="tool-result-diff scrollable">';
const renderDiffLine = (lineNo: number | null, marker: string, text: string, className = '') => {
const lineNoText = typeof lineNo === 'number' && Number.isFinite(lineNo) ? String(lineNo) : '';
html += `<div class="diff-line${className ? ` ${className}` : ''}"><span class="diff-line-number">${escapeHtml(lineNoText)}</span><span class="diff-marker">${escapeHtml(marker)}</span><span class="diff-content">${escapeHtml(text)}</span></div>`;
};
const hunks: any[] = [];
details.forEach((detail: any) => {
const oldText = detail.old_string || '';
const newText = detail.new_string || '';
const contexts = Array.isArray(detail.contexts) ? detail.contexts : [];
const oldLines = oldText ? oldText.split('\n') : [];
const newLines = newText ? newText.split('\n') : [];
const buildPairRows = (context?: any) => {
const rows: any[] = [];
const startLineCandidate = Number(context?.old_start_line ?? detail.matched_lines?.[0]);
const startLine = Number.isFinite(startLineCandidate) ? startLineCandidate : null;
if (oldText) {
oldLines.forEach((line: string, lineIdx: number) => {
rows.push({ lineNo: startLine === null ? null : startLine + lineIdx, marker: '-', text: line, className: 'diff-remove' });
});
}
if (newText) {
newLines.forEach((line: string, lineIdx: number) => {
rows.push({ lineNo: startLine === null ? null : startLine + lineIdx, marker: '+', text: line, className: 'diff-add' });
});
}
return rows;
};
if (contexts.length > 0) {
contexts.forEach((context: any) => {
const rows: any[] = [];
const rawBeforeLines = Array.isArray(context.before_lines) ? context.before_lines : [];
const rawAfterLines = Array.isArray(context.after_lines) ? context.after_lines : [];
const beforeLines =
rawBeforeLines.length >= 2 && rawBeforeLines.every((item: any) => String(item?.text ?? '') === '')
? []
:
rawBeforeLines.length >= 2 && String(rawBeforeLines[0]?.text ?? '') === ''
? rawBeforeLines.slice(1)
: rawBeforeLines;
const afterLines =
rawAfterLines.length >= 2 && rawAfterLines.every((item: any) => String(item?.text ?? '') === '')
? []
:
rawAfterLines.length >= 2 && String(rawAfterLines[rawAfterLines.length - 1]?.text ?? '') === ''
? rawAfterLines.slice(0, -1)
: rawAfterLines;
const contextOldStartLine = Number(context?.old_start_line ?? detail.matched_lines?.[0]);
const contextOldEndLine = Number(context?.old_end_line ?? contextOldStartLine);
const oldLineCount = Number.isFinite(contextOldStartLine) && Number.isFinite(contextOldEndLine)
? Math.max(1, contextOldEndLine - contextOldStartLine + 1)
: Math.max(1, (oldText ? oldText.split('\n').length : 1));
const newLineCount = newText === '' ? 0 : newText.split('\n').length;
const afterContextOffset = newLineCount - oldLineCount;
beforeLines.forEach((item: any) => {
rows.push({ lineNo: Number(item.line), marker: ' ', text: String(item.text ?? ''), className: '' });
});
rows.push(...buildPairRows(context));
afterLines.forEach((item: any) => {
const rawLineNo = Number(item.line);
const lineNo = Number.isFinite(rawLineNo) ? rawLineNo + afterContextOffset : rawLineNo;
rows.push({ lineNo, marker: ' ', text: String(item.text ?? ''), className: '' });
});
const numberedRows = rows.filter((row) => typeof row.lineNo === 'number' && Number.isFinite(row.lineNo));
hunks.push({
rows,
minLine: numberedRows.length ? Math.min(...numberedRows.map((row) => row.lineNo)) : null,
maxLine: numberedRows.length ? Math.max(...numberedRows.map((row) => row.lineNo)) : null,
});
});
} else {
const rows = buildPairRows();
const numberedRows = rows.filter((row) => typeof row.lineNo === 'number' && Number.isFinite(row.lineNo));
hunks.push({
rows,
minLine: numberedRows.length ? Math.min(...numberedRows.map((row) => row.lineNo)) : null,
maxLine: numberedRows.length ? Math.max(...numberedRows.map((row) => row.lineNo)) : null,
});
}
});
const sortedHunks = hunks.sort((a, b) => (a.minLine ?? Number.MAX_SAFE_INTEGER) - (b.minLine ?? Number.MAX_SAFE_INTEGER));
const mergedHunks: any[] = [];
sortedHunks.forEach((hunk) => {
const last = mergedHunks[mergedHunks.length - 1];
if (last && hunk.minLine !== null && last.maxLine !== null && hunk.minLine <= last.maxLine + 1) {
last.rows.push(...hunk.rows);
last.maxLine = Math.max(last.maxLine, hunk.maxLine ?? last.maxLine);
} else {
mergedHunks.push({ ...hunk, rows: [...hunk.rows] });
}
});
const markerOrder: Record<string, number> = { ' ': 0, '-': 1, '+': 2 };
mergedHunks.forEach((hunk, hunkIdx) => {
if (hunkIdx > 0) renderDiffLine(null, ' ', '⋮', 'diff-separator');
const seenContextLines = new Set<number>();
const filteredRows = hunk.rows
.filter((row: any) => {
if (row.marker !== ' ' || typeof row.lineNo !== 'number') return true;
if (seenContextLines.has(row.lineNo)) return false;
seenContextLines.add(row.lineNo);
return true;
})
.sort((a: any, b: any) => {
const aIsChange = a.marker === '-' || a.marker === '+';
const bIsChange = b.marker === '-' || b.marker === '+';
// 仅变更行之间优先按 marker 分组(- 在前 + 在后),再按行号
if (aIsChange && bIsChange) {
const markerDelta = (markerOrder[a.marker] ?? 9) - (markerOrder[b.marker] ?? 9);
return markerDelta || (a.lineNo ?? Number.MAX_SAFE_INTEGER) - (b.lineNo ?? Number.MAX_SAFE_INTEGER);
}
// 上下文行或跨类型:按行号优先
const lineDelta = (a.lineNo ?? Number.MAX_SAFE_INTEGER) - (b.lineNo ?? Number.MAX_SAFE_INTEGER);
return lineDelta || (markerOrder[a.marker] ?? 9) - (markerOrder[b.marker] ?? 9);
});
filteredRows.forEach((row: any) => renderDiffLine(row.lineNo, row.marker, row.text, row.className));
});
html += '</div>';
}
return html;
}
function renderDeleteFile(result: any, args: any): string {
const path = args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 已删除');
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
return html;
}
function renderRenameFile(result: any, args: any): string {
const oldPath = args.old_path || args.source || result.old_path || '';
const newPath = args.new_path || args.destination || result.new_path || '';
const status = formatToolStatusLabel(result, '✓ 已重命名');
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(oldPath)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>重命名:</strong>${escapeHtml(oldPath)}${escapeHtml(newPath)}</div>`;
html += '</div>';
return html;
}
// 阅读聚焦类渲染函数
function renderReadFile(result: any, args: any): string {
const path = args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const size = result.size || result.file_size || 0;
const readType = result.type || 'read';
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
if (size > 0) {
html += `<div><strong>大小:</strong>${formatBytes(size)}</div>`;
}
if (readType !== 'read') {
html += `<div><strong>模式:</strong>${escapeHtml(readType)}</div>`;
}
html += '</div>';
// 处理普通读取模式
if (readType === 'read') {
const content = result.content || result.text || '';
if (content) {
html += '<div class="tool-result-content scrollable">';
html += `<pre>${escapeHtml(content)}</pre>`;
html += '</div>';
}
}
// 处理搜索模式
else if (readType === 'search') {
const matches = result.matches || [];
const query = result.query || args.query || '';
if (query) {
html += '<div class="tool-result-meta">';
html += `<div><strong>搜索关键词:</strong>${escapeHtml(query)}</div>`;
html += `<div><strong>匹配数量:</strong>${matches.length}</div>`;
html += '</div>';
}
if (matches.length > 0) {
html += '<div class="tool-result-content scrollable">';
matches.forEach((match: any, idx: number) => {
if (idx > 0) html += '<div class="search-match-separator">⋯</div>';
html += '<div class="search-match-item">';
const lineLabel = match.line_start === match.line_end ? `${match.line_start}` : `${match.line_start}-${match.line_end}`;
html += `<div class="search-match-line">行 ${lineLabel}</div>`;
html += `<pre>${escapeHtml(match.snippet || match.content || '')}</pre>`;
html += '</div>';
});
html += '</div>';
} else {
html += '<div class="tool-result-empty">未找到匹配内容</div>';
}
}
// 处理提取模式
else if (readType === 'extract') {
const segments = result.segments || [];
if (segments.length > 0) {
html += '<div class="tool-result-meta">';
html += `<div><strong>提取片段数:</strong>${segments.length}</div>`;
html += '</div>';
html += '<div class="tool-result-content scrollable">';
segments.forEach((segment: any, idx: number) => {
if (idx > 0) html += '<div class="segment-separator">⋯</div>';
html += '<div class="segment-item">';
const startLine = segment.start_line || segment.line_start || '?';
const endLine = segment.end_line || segment.line_end || '?';
html += `<div class="segment-range">行 ${startLine}-${endLine}</div>`;
html += `<pre>${escapeHtml(segment.content || segment.text || '')}</pre>`;
html += '</div>';
});
html += '</div>';
} else {
html += '<div class="tool-result-empty">未提取到内容</div>';
}
}
return html;
}
function renderVlmAnalyze(result: any, args: any): string {
const path = args.image_path || args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const analysis = result.analysis || result.result || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
if (analysis) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">分析结果:</div>';
html += `<pre>${escapeHtml(analysis)}</pre>`;
html += '</div>';
}
return html;
}
function renderOcrImage(result: any, args: any): string {
const path = args.image_path || args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const size = result.size || result.file_size || 0;
const text = result.text || result.ocr_text || '';
const imageUrl = result.image_url || result.url || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
if (size > 0) {
html += `<div><strong>大小:</strong>${formatBytes(size)}</div>`;
}
html += '</div>';
if (imageUrl) {
html += `<div class="tool-result-image"><img src="${escapeHtml(imageUrl)}" alt="OCR图片" style="max-width: 100%; height: auto;" /></div>`;
}
if (text) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">识别文本:</div>';
html += `<pre>${escapeHtml(text)}</pre>`;
html += '</div>';
}
return html;
}
function renderViewImage(result: any, args: any): string {
const path = args.image_path || args.path || result.path || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const size = result.size || result.file_size || 0;
const imageUrl = result.image_url || result.url || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>路径:</strong>${escapeHtml(path)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
if (size > 0) {
html += `<div><strong>大小:</strong>${formatBytes(size)}</div>`;
}
html += '</div>';
if (imageUrl) {
html += `<div class="tool-result-image"><img src="${escapeHtml(imageUrl)}" alt="查看图片" style="max-width: 100%; height: auto;" /></div>`;
}
return html;
}
// 终端类渲染函数
function renderTerminalSession(result: any, args: any): string {
const operation = args.operation || args.action || 'start';
const sessionName = args.session_name || args.name || result.session_name || '';
const status = formatToolStatusLabel(result, '✓ 成功');
let html = '<div class="tool-result-meta">';
html += `<div><strong>操作:</strong>${escapeHtml(operation)}</div>`;
html += `<div><strong>终端名:</strong>${escapeHtml(sessionName)}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
return html;
}
function renderTerminalInput(result: any, args: any): string {
const command = args.command || args.input || '';
const outputWait = args.output_wait || 30;
const output = result.output || result.result || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>指令:</strong>${escapeHtml(command)}</div>`;
html += `<div><strong>等待时间:</strong>${outputWait}秒</div>`;
html += '</div>';
if (output) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">输出:</div>';
html += `<pre>${escapeHtml(output)}</pre>`;
html += '</div>';
}
return html;
}
function renderTerminalSnapshot(result: any, args: any): string {
const sessionName = args.session_name || args.name || result.session_name || '';
const status = formatToolStatusLabel(result, '✓ 成功');
const startLine = args.start_line || 0;
const endLine = args.end_line || 0;
const content = result.content || result.output || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>终端名:</strong>${escapeHtml(sessionName)}</div>`;
if (startLine || endLine) {
html += `<div><strong>行范围:</strong>${startLine} - ${endLine}</div>`;
}
html += '</div>';
if (content) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">获取的内容:</div>';
html += `<pre>${escapeHtml(content)}</pre>`;
html += '</div>';
}
return html;
}
function renderSleep(result: any, args: any): string {
const seconds = args.seconds || args.duration || 0;
const status = formatToolStatusLabel(result, '✓ 完成');
let html = '<div class="tool-result-meta">';
html += `<div><strong>等待时间:</strong>${seconds}秒</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += '</div>';
return html;
}
// 终端指令类渲染函数
function renderRunCommand(result: any, args: any): string {
const command = args.command || '';
const timeout = args.timeout || 30;
const output = result.output || result.stdout || '';
const exitCode = result.exit_code !== undefined ? result.exit_code : result.returncode;
let html = '<div class="tool-result-meta">';
html += `<div><strong>指令:</strong>${escapeHtml(command)}</div>`;
html += `<div><strong>超时时间:</strong>${timeout}秒</div>`;
if (exitCode !== undefined) {
html += `<div><strong>退出码:</strong>${exitCode}</div>`;
}
html += '</div>';
if (output) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">输出:</div>';
html += `<pre>${escapeHtml(output)}</pre>`;
html += '</div>';
}
return html;
}
// 记忆类渲染函数
function renderUpdateMemory(result: any, args: any): string {
const operation = args.operation || result.operation || '';
const content = args.content || '';
const index = args.index || result.index;
const count = result.count || 0;
let html = '<div class="tool-result-meta">';
if (operation === 'append') {
html += `<div>新增记忆</div>`;
html += `<div>${count}. ${escapeHtml(content)}</div>`;
} else if (operation === 'replace') {
html += `<div>更新记忆</div>`;
html += `<div>${index}. ${escapeHtml(content)}</div>`;
} else if (operation === 'delete') {
html += `<div>删除记忆</div>`;
html += `<div>${index}. ${escapeHtml(content || '已删除')}</div>`;
}
html += '</div>';
return html;
}
function renderRecallProjectMemory(result: any, args: any): string {
const name = args.name || result.memory_name || '';
const status = formatToolStatusLabel(result, '✓ 已读取');
const content = result.content || result.text || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>记忆:</strong>${escapeHtml(name)}</div>`;
html += '</div>';
if (result.success && content) {
html += '<div class="tool-result-content scrollable">';
html += `<pre>${escapeHtml(content)}</pre>`;
html += '</div>';
} else if (!result.success && result.error) {
html += `<div class="tool-result-error">${escapeHtml(String(result.error))}</div>`;
}
return html;
}
function renderUpdateProjectMemory(result: any, args: any): string {
const name = args.name || result.memory_name || '';
const description = args.description || '';
const content = args.content || '';
const status = formatToolStatusLabel(result, '✓ 已更新');
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>记忆:</strong>${escapeHtml(name)}</div>`;
if (description) {
html += `<div><strong>描述:</strong>${escapeHtml(description)}</div>`;
}
if (!result.success && result.error) {
html += `<div><strong>错误:</strong>${escapeHtml(String(result.error))}</div>`;
}
html += '</div>';
if (result.success && content) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">记忆内容:</div>';
html += `<pre>${escapeHtml(content)}</pre>`;
html += '</div>';
}
return html;
}
function renderConversationSearch(result: any, args: any): string {
const results = Array.isArray(result?.results) ? result.results : [];
const keywords = Array.isArray(result?.keywords)
? result.keywords
: (Array.isArray(args?.keywords) ? args.keywords : []);
const keywordText = keywords.length
? keywords.join(' / ')
: (result?.query || args?.query || '(未指定)');
let html = '<div class="tool-result-meta">';
html += `<div><strong>关键词:</strong>${escapeHtml(keywordText)}</div>`;
html += `<div><strong>日期范围:</strong>${escapeHtml(result?.start_date || args?.start_date || '不限')} ~ ${escapeHtml(result?.end_date || args?.end_date || '不限')}</div>`;
html += '<div><strong>范围:</strong>当前工作区历史对话(已排除当前对话)</div>';
html += `<div><strong>结果数量:</strong>${results.length}</div>`;
html += '</div>';
if (!results.length) {
html += '<div class="tool-result-empty">未找到匹配对话。</div>';
return html;
}
html += '<div class="search-result-list">';
results.forEach((item: any) => {
html += '<div class="search-result-item">';
html += `<div class="search-result-title">${escapeHtml(item.title || '未命名对话')}</div>`;
html += `<div><strong>ID</strong>${escapeHtml(item.id || '')}</div>`;
html += `<div><strong>规模:</strong>${escapeHtml(String(item.total_messages || 0))} 条消息,${escapeHtml(String(item.total_tools || 0))} 个工具</div>`;
if (item.first_user_message) {
html += `<div><strong>首条用户消息:</strong>${escapeHtml(item.first_user_message)}</div>`;
}
if (item.updated_at) {
html += `<div><strong>更新时间:</strong>${escapeHtml(item.updated_at)}</div>`;
}
html += '</div>';
});
html += '</div>';
return html;
}
function renderConversationReview(result: any, args: any): string {
const status = formatToolStatusLabel(result, result?.mode === 'read' ? '✓ 已返回' : '✓ 已生成');
let html = '<div class="tool-result-meta">';
html += `<div><strong>对话 ID</strong>${escapeHtml(result?.conversation_id || args?.conversation_id || '')}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>模式:</strong>${escapeHtml(result?.mode || args?.mode || '')}</div>`;
if (result?.title) {
html += `<div><strong>标题:</strong>${escapeHtml(result.title)}</div>`;
}
if (result?.path) {
html += `<div><strong>回顾文件:</strong>${escapeHtml(result.path)}</div>`;
}
if (result?.char_count !== undefined) {
html += `<div><strong>字符数:</strong>${escapeHtml(String(result.char_count))}</div>`;
}
html += '</div>';
if (!result?.success && result?.error) {
html += `<div class="tool-result-error">${escapeHtml(result.error)}</div>`;
}
if (result?.too_long && result?.path) {
html += '<div class="tool-result-warning">内容太长,已保存到文件,请分段或查找阅读。</div>';
}
if (result?.content) {
html += '<div class="tool-result-content scrollable">';
html += '<div class="content-label">回顾内容:</div>';
html += `<pre>${escapeHtml(result.content)}</pre>`;
html += '</div>';
}
return html;
}
function renderCreateSkill(result: any, args: any): string {
const status = formatToolStatusLabel(result, '✓ 已归档');
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
if (result?.skill_name) {
html += `<div><strong>Skill</strong>${escapeHtml(result.skill_name)}</div>`;
}
html += '</div>';
if (!result?.success && result?.error) {
html += `<div class="tool-result-error">${escapeHtml(result.error)}</div>`;
}
if (result?.sync_warning) {
html += `<div class="tool-result-warning">${escapeHtml(result.sync_warning)}</div>`;
}
return html;
}
function formatPersonalizationFieldLabel(field: string): string {
const labelMap: Record<string, string> = {
self_identify: 'AI 自称',
user_name: '用户称呼',
profession: '用户职业',
tone: '交流语气',
considerations: '注意事项',
theme: '主题',
communication_style: '交流风格',
conversation_continuity: '对话连续性',
enabled: '个性化开关'
};
return labelMap[field] || field;
}
function formatPersonalizationFieldValue(field: string, value: any): string {
if (value === null || value === undefined || value === '') {
return '未设置';
}
if (field === 'enabled') {
return value ? '开启' : '关闭';
}
if (field === 'considerations') {
if (!Array.isArray(value) || value.length === 0) {
return '未设置';
}
return value.map((item) => String(item)).join('、');
}
if (field === 'communication_style') {
const styleMap: Record<string, string> = {
default: 'default标准 AI 风格)',
human_like: 'human_like拟人聊天风格',
auto: 'auto自动'
};
return styleMap[String(value)] || String(value);
}
if (field === 'conversation_continuity') {
const independenceMap: Record<string, string> = {
low: 'low',
medium: 'medium',
high: 'high'
};
return independenceMap[String(value)] || String(value);
}
return String(value);
}
function renderAskUser(result: any, args: any): string {
const question = args.question || result.question || '';
const context = args.context || result.context || '';
const status = formatToolStatusLabel(result, '✓ 已回答');
const answerText = result.status === 'answered' ? String(result.answer_text || result.message || '').trim() : '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${escapeHtml(status)}</div>`;
if (question) {
html += `<div><strong>问题:</strong>${escapeHtml(String(question))}</div>`;
}
if (context) {
html += `<div><strong>说明:</strong>${escapeHtml(String(context))}</div>`;
}
html += '</div>';
const options = Array.isArray(args.options) ? args.options : [];
if (options.length > 0) {
html += '<div class="tool-result-content">';
html += '<div class="tool-result-meta">';
html += '<div><strong>提供的选项:</strong></div>';
options.forEach((option: any, idx: number) => {
const label = String(option?.label || option?.id || `选项 ${idx + 1}`);
const desc = String(option?.description || '').trim();
html += `<div>${idx + 1}. ${escapeHtml(label)}${desc ? `${escapeHtml(desc)}` : ''}</div>`;
});
html += '</div></div>';
}
if (answerText) {
html += '<div class="tool-result-content">';
html += '<div class="tool-result-meta">';
answerText.split('\n').map((line) => line.trim()).filter(Boolean).forEach((line) => {
const separator = line.indexOf('');
if (separator > 0) {
const label = line.slice(0, separator + 1);
const value = line.slice(separator + 1);
html += `<div><strong>${escapeHtml(label)}</strong>${escapeHtml(value)}</div>`;
} else {
html += `<div><strong>用户回答:</strong>${escapeHtml(line)}</div>`;
}
});
html += '</div></div>';
}
return html;
}
function renderManagePersonalization(result: any, args: any): string {
const action = String(args.action || result.action || 'read');
const status = formatToolStatusLabel(result, action === 'update' ? '✓ 已更新' : '✓ 已读取');
const field = String(result.updated_field || args.field || '');
const newValue = result.updated_value ?? args.value;
let html = '<div class="tool-result-meta">';
html += `<div><strong>操作:</strong>${escapeHtml(action === 'update' ? '更新配置' : '读取配置')}</div>`;
html += `<div><strong>状态:</strong>${status}</div>`;
if (!result?.success) {
if (result?.error) {
html += `<div><strong>错误:</strong>${escapeHtml(String(result.error))}</div>`;
}
if (Array.isArray(result?.validation_errors) && result.validation_errors.length > 0) {
html += `<div><strong>校验:</strong>${escapeHtml(result.validation_errors.join(''))}</div>`;
}
html += '</div>';
return html;
}
if (action === 'update' && field) {
html += `<div><strong>修改项:</strong>${escapeHtml(formatPersonalizationFieldLabel(field))}</div>`;
html += `<div><strong>修改后:</strong>${escapeHtml(formatPersonalizationFieldValue(field, newValue))}</div>`;
}
html += '</div>';
return html;
}
// 待办事项类渲染函数
function renderTodoCreate(result: any, args: any): string {
const status = formatToolStatusLabel(result, '✓ 已创建');
const todoList = result.todo_list || {};
const title = todoList.title || args.title || '';
const tasks = todoList.tasks || args.tasks || [];
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>标题:</strong>${escapeHtml(title)}</div>`;
html += '</div>';
if (tasks.length > 0) {
html += '<div class="tool-result-content">';
html += '<div class="todo-list">';
tasks.forEach((task: any) => {
const taskText =
typeof task === 'string' ? task : task.text || task.title || task.content || '';
html += `<div class="todo-item"><input type="checkbox" disabled /> ${escapeHtml(taskText)}</div>`;
});
html += '</div>';
html += '</div>';
}
return html;
}
function renderTodoUpdate(result: any): string {
const status = formatToolStatusLabel(result, '✓ 已更新');
const todoList = result.todo_list || {};
const title = todoList.title || '';
const tasks = todoList.tasks || [];
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>标题:</strong>${escapeHtml(title)}</div>`;
html += '</div>';
if (tasks.length > 0) {
html += '<div class="tool-result-content">';
html += '<div class="todo-list">';
tasks.forEach((task: any) => {
const taskText =
typeof task === 'string' ? task : task.text || task.title || task.content || '';
const completed =
typeof task === 'object' &&
(task.status === 'done' || task.completed || task.done || task.checked);
html += `<div class="todo-item"><input type="checkbox" ${completed ? 'checked' : ''} disabled /> ${escapeHtml(taskText)}</div>`;
});
html += '</div>';
html += '</div>';
}
return html;
}
// 彩蛋类渲染函数
function renderEasterEgg(result: any, args: any): string {
const status = formatToolStatusLabel(result, '✓ 已触发');
const type = result.type || args.type || '';
const content = result.content || result.message || '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
html += `<div><strong>类型:</strong>${escapeHtml(type)}</div>`;
html += '</div>';
if (content) {
html += '<div class="tool-result-content">';
html += `<div class="easter-egg-content">${escapeHtml(content)}</div>`;
html += '</div>';
}
return html;
}
// 子智能体类渲染函数
function renderCreateSubAgent(result: any, args: any): string {
const status = formatToolStatusLabel(result, '✓ 已创建', '✗ 创建失败');
const agentId = result.agent_id ?? args.agent_id ?? '';
const taskId = result.task_id ?? '';
const deliverablesDir = result.deliverables_dir ?? '';
const taskDescription = args.task ?? '';
const message = result.message ?? result.summary ?? '';
const stats = result.stats || {};
const runtimeSeconds = result.runtime_seconds ?? result.elapsed_seconds ?? stats.runtime_seconds ?? 0;
const apiCalls = stats.api_calls ?? stats.turn_count ?? 0;
const toolCount =
(stats.files_read || 0) +
(stats.write_files || 0) +
(stats.edit_files || 0) +
(stats.searches || 0) +
(stats.web_pages || 0) +
(stats.commands || 0);
const hasStats = runtimeSeconds > 0 || apiCalls > 0 || toolCount > 0;
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
if (agentId !== '') {
html += `<div><strong>子智能体 ID</strong>${escapeHtml(String(agentId))}</div>`;
}
if (taskId !== '') {
html += `<div><strong>任务 ID</strong>${escapeHtml(String(taskId))}</div>`;
}
if (deliverablesDir !== '') {
html += `<div><strong>交付目录:</strong>${escapeHtml(String(deliverablesDir))}</div>`;
}
if (taskDescription) {
const preview = String(taskDescription).slice(0, 200);
const suffix = String(taskDescription).length > 200 ? '…' : '';
html += `<div><strong>任务:</strong>${escapeHtml(preview + suffix)}</div>`;
}
html += '</div>';
if (message || hasStats) {
html += '<div class="tool-result-content scrollable">';
if (hasStats) {
html += '<div class="content-label">执行统计</div>';
if (runtimeSeconds > 0) {
html += `<div><strong>工作时间:</strong>${formatDuration(runtimeSeconds)}</div>`;
}
if (apiCalls > 0) {
html += `<div><strong>调用次数:</strong>${apiCalls} 次</div>`;
}
if (toolCount > 0) {
html += `<div><strong>工具次数:</strong>${toolCount} 次</div>`;
}
}
if (message) {
if (hasStats) {
html += '<div class="content-label">最终回复</div>';
}
html += `<div>${escapeHtml(String(message))}</div>`;
}
html += '</div>';
}
return html;
}
function renderTerminateSubAgent(result: any, args: any): string {
const status = formatToolStatusLabel(result, '✓ 已关闭', '✗ 关闭失败');
const agentId = result.agent_id ?? args.agent_id ?? '';
const taskId = result.task_id ?? '';
const message = result.message ?? result.system_message ?? '';
let html = '<div class="tool-result-meta">';
html += `<div><strong>状态:</strong>${status}</div>`;
if (agentId !== '') {
html += `<div><strong>子智能体 ID</strong>${escapeHtml(String(agentId))}</div>`;
}
if (taskId !== '') {
html += `<div><strong>任务 ID</strong>${escapeHtml(String(taskId))}</div>`;
}
html += '</div>';
if (message) {
html += '<div class="tool-result-content scrollable">';
html += `<div>${escapeHtml(String(message))}</div>`;
html += '</div>';
}
return html;
}
function renderGetSubAgentStatus(result: any, args: any): string {
if (!result.success) {
const error = result.error ?? '查询失败';
return `<div class="tool-result-error">⚠️ ${escapeHtml(String(error))}</div>`;
}
const results = Array.isArray(result.results) ? result.results : [];
if (results.length === 0) {
return '<div class="tool-result-empty">未返回子智能体状态。</div>';
}
let html = '<div class="sub-agent-status-list">';
results.forEach((item: any) => {
const agentId = item.agent_id ?? '';
const found = item.found !== false;
const status = String(item.status || '');
const taskId = item.task_id ?? '';
const summary = item.summary ?? (item.final_result?.message) ?? (item.final_result?.summary) ?? '';
html += '<div class="sub-agent-status-item">';
html += `<div class="sub-agent-status-header">子智能体 #${escapeHtml(String(agentId))}</div>`;
if (!found) {
html += '<div class="tool-result-meta">';
html += '<div><strong>状态:</strong>不存在</div>';
html += '</div>';
} else {
html += '<div class="tool-result-meta">';
if (status === 'completed') {
html += '<div><strong>状态:</strong>已完成</div>';
} else if (status === 'terminated') {
html += '<div><strong>状态:</strong>已终止</div>';
} else if (status === 'running') {
html += '<div><strong>状态:</strong>运行中</div>';
} else if (status === 'pending') {
html += '<div><strong>状态:</strong>等待中</div>';
} else {
html += `<div><strong>状态:</strong>${escapeHtml(status || '未知')}</div>`;
}
if (taskId !== '') {
html += `<div><strong>任务 ID</strong>${escapeHtml(String(taskId))}</div>`;
}
html += '</div>';
if (summary) {
html += '<div class="tool-result-content scrollable">';
html += `<div>${escapeHtml(String(summary))}</div>`;
html += '</div>';
}
}
html += '</div>';
});
html += '</div>';
return html;
}