@xcanwin/manyoyo 5.6.9 → 5.6.10

package/lib/web/frontend/app.css

@@ -1047,6 +1047,154 @@ body.command-mode .msg.origin-agent .bubble {
     line-height: 1.55;
 }
 
+.trace-bubble {
+    padding: 12px;
+}
+
+.trace-structured {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.trace-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.trace-summary-line {
+    padding: 7px 10px;
+    border-radius: 8px;
+    border: 1px dashed rgba(181, 146, 99, 0.45);
+    background: rgba(255, 250, 242, 0.82);
+    color: var(--muted);
+    font-size: 12px;
+    line-height: 1.45;
+}
+
+.trace-flow {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.trace-card {
+    border: 1px solid rgba(181, 146, 99, 0.32);
+    border-left-width: 3px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.88);
+    overflow: hidden;
+}
+
+.trace-card.trace-tone-command {
+    border-left-color: var(--subaccent);
+}
+
+.trace-card.trace-tone-mcp {
+    border-left-color: var(--accent);
+}
+
+.trace-card.trace-tone-note {
+    border-left-color: #6f62b5;
+}
+
+.trace-card.trace-tone-status {
+    border-left-color: #7d8aa1;
+}
+
+.trace-card.trace-tone-error {
+    border-left-color: var(--danger);
+    background: rgba(255, 239, 236, 0.92);
+}
+
+.trace-card.trace-tone-neutral {
+    border-left-color: var(--line-strong);
+}
+
+.trace-card-summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 10px;
+    cursor: default;
+}
+
+details.trace-card > .trace-card-summary {
+    cursor: pointer;
+}
+
+.trace-card-summary::-webkit-details-marker {
+    display: none;
+}
+
+.trace-card-badge {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 42px;
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: rgba(31, 26, 20, 0.08);
+    color: var(--text);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+}
+
+.trace-card-title {
+    min-width: 0;
+    flex: 1;
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.45;
+    word-break: break-word;
+}
+
+.trace-card-phase {
+    flex: 0 0 auto;
+    color: var(--muted);
+    font-size: 11px;
+    font-weight: 700;
+}
+
+.trace-card-body {
+    padding: 0 10px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.trace-card-body-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.trace-card-body-label {
+    color: var(--muted);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+    text-transform: uppercase;
+}
+
+.trace-card-body-pre {
+    margin: 0;
+    padding: 8px 9px;
+    border-radius: 8px;
+    background: rgba(31, 26, 20, 0.05);
+    color: var(--text);
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.5;
+}
+
 .composer {
     border-top: 1px solid rgba(181, 146, 99, 0.45);
     margin-top: 12px;

package/lib/web/frontend/app.js

@@ -190,6 +190,198 @@
         bubble.appendChild(pre);
     }
 
+    function stringifyPrettyJson(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value, null, 2);
+        } catch (e) {
+            return String(value);
+        }
+    }
+
+    function humanizeTraceKind(traceEvent) {
+        const kind = traceEvent && traceEvent.kind ? String(traceEvent.kind) : '';
+        if (kind === 'thread') return '会话';
+        if (kind === 'turn') return '回合';
+        if (kind === 'status') return '状态';
+        if (kind === 'agent_message') return '说明';
+        if (kind === 'command') return '命令';
+        if (kind === 'mcp') return 'MCP';
+        if (kind === 'tool') return '工具';
+        if (kind === 'error') return '错误';
+        return '事件';
+    }
+
+    function humanizeTracePhase(traceEvent) {
+        const phase = traceEvent && traceEvent.phase ? String(traceEvent.phase) : '';
+        if (phase === 'started') return '开始';
+        if (phase === 'completed') return '完成';
+        const status = traceEvent && traceEvent.status ? String(traceEvent.status).trim() : '';
+        return status;
+    }
+
+    function buildStructuredTraceResidualLines(message) {
+        const lines = String(message && message.content ? message.content : '')
+            .split('\n')
+            .map(function (line) {
+                return String(line || '').trim();
+            })
+            .filter(Boolean);
+        const traceEvents = Array.isArray(message && message.traceEvents) ? message.traceEvents : [];
+        const consumed = new Map();
+        traceEvents.forEach(function (traceEvent) {
+            const key = traceEvent && traceEvent.text ? String(traceEvent.text).trim() : '';
+            if (!key) {
+                return;
+            }
+            consumed.set(key, (consumed.get(key) || 0) + 1);
+        });
+        return lines.filter(function (line) {
+            if (!line || line === '[执行过程]') {
+                return false;
+            }
+            const remaining = consumed.get(line) || 0;
+            if (remaining > 0) {
+                consumed.set(line, remaining - 1);
+                return false;
+            }
+            return true;
+        });
+    }
+
+    function resolveTraceTone(traceEvent) {
+        const kind = traceEvent && traceEvent.kind ? String(traceEvent.kind) : '';
+        if (kind === 'command') return 'command';
+        if (kind === 'mcp') return 'mcp';
+        if (kind === 'error') return 'error';
+        if (kind === 'agent_message') return 'note';
+        if (kind === 'status') return 'status';
+        return 'neutral';
+    }
+
+    function appendTraceCardBody(cardBody, label, value) {
+        const text = stringifyPrettyJson(value).trim();
+        if (!text) {
+            return;
+        }
+        const section = document.createElement('div');
+        section.className = 'trace-card-body-section';
+
+        const title = document.createElement('div');
+        title.className = 'trace-card-body-label';
+        title.textContent = label;
+        section.appendChild(title);
+
+        const pre = document.createElement('pre');
+        pre.className = 'trace-card-body-pre';
+        pre.textContent = text;
+        section.appendChild(pre);
+
+        cardBody.appendChild(section);
+    }
+
+    function createTraceEventCard(traceEvent) {
+        const event = traceEvent && typeof traceEvent === 'object' ? traceEvent : {};
+        const bodyParts = [];
+        if (event.kind === 'command' && event.command) {
+            bodyParts.push({ label: '命令', value: event.command });
+        }
+        if (event.kind === 'mcp') {
+            if (event.argumentSummary) {
+                bodyParts.push({ label: '参数摘要', value: event.argumentSummary });
+            }
+            if (event.arguments) {
+                bodyParts.push({ label: '参数', value: event.arguments });
+            }
+            if (event.result) {
+                bodyParts.push({ label: '结果', value: event.result });
+            }
+            if (event.error) {
+                bodyParts.push({ label: '错误', value: event.error });
+            }
+        }
+        if (event.kind === 'tool' && event.toolName) {
+            bodyParts.push({ label: '工具', value: event.toolName });
+        }
+        if ((event.kind === 'agent_message' || event.kind === 'status' || event.kind === 'error') && event.detail) {
+            bodyParts.push({ label: '详情', value: event.detail });
+        }
+
+        const hasBody = bodyParts.length > 0;
+        const card = document.createElement(hasBody ? 'details' : 'div');
+        card.className = 'trace-card trace-tone-' + resolveTraceTone(event);
+        if (hasBody && event.kind === 'error') {
+            card.open = true;
+        }
+
+        const header = document.createElement(hasBody ? 'summary' : 'div');
+        header.className = 'trace-card-summary';
+
+        const badge = document.createElement('span');
+        badge.className = 'trace-card-badge';
+        badge.textContent = humanizeTraceKind(event);
+        header.appendChild(badge);
+
+        const title = document.createElement('span');
+        title.className = 'trace-card-title';
+        title.textContent = event && event.text ? String(event.text) : '事件';
+        header.appendChild(title);
+
+        const phaseText = humanizeTracePhase(event);
+        if (phaseText) {
+            const phase = document.createElement('span');
+            phase.className = 'trace-card-phase';
+            phase.textContent = phaseText;
+            header.appendChild(phase);
+        }
+
+        card.appendChild(header);
+
+        if (hasBody) {
+            const body = document.createElement('div');
+            body.className = 'trace-card-body';
+            bodyParts.forEach(function (part) {
+                appendTraceCardBody(body, part.label, part.value);
+            });
+            card.appendChild(body);
+        }
+
+        return card;
+    }
+
+    function appendStructuredTraceContent(bubble, message) {
+        bubble.classList.add('trace-bubble');
+        const container = document.createElement('div');
+        container.className = 'trace-structured';
+
+        const residualLines = buildStructuredTraceResidualLines(message);
+        if (residualLines.length) {
+            const summary = document.createElement('div');
+            summary.className = 'trace-summary';
+            residualLines.forEach(function (line) {
+                const item = document.createElement('div');
+                item.className = 'trace-summary-line';
+                item.textContent = line;
+                summary.appendChild(item);
+            });
+            container.appendChild(summary);
+        }
+
+        const flow = document.createElement('div');
+        flow.className = 'trace-flow';
+        (Array.isArray(message && message.traceEvents) ? message.traceEvents : []).forEach(function (traceEvent) {
+            flow.appendChild(createTraceEventCard(traceEvent));
+        });
+        container.appendChild(flow);
+
+        bubble.appendChild(container);
+    }
+
     function roleName(role, message) {
         if (role === 'user') return '我';
         if (role === 'assistant') {
@@ -1763,8 +1955,16 @@
         const bubble = document.createElement('div');
         bubble.className = 'bubble';
 
+        const shouldRenderStructuredTrace = Boolean(
+            msg
+            && msg.streamTrace
+            && Array.isArray(msg.traceEvents)
+            && msg.traceEvents.length
+        );
         const shouldRenderMarkdown = Boolean(!msg.streamTrace && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
-        if (shouldRenderMarkdown) {
+        if (shouldRenderStructuredTrace) {
+            appendStructuredTraceContent(bubble, msg);
+        } else if (shouldRenderMarkdown) {
             const markdownNode = document.createElement('div');
             markdownNode.className = 'md-content';
             let renderedMarkdown = '';
@@ -2070,7 +2270,8 @@
             content: '[执行过程]\n等待 Agent 启动…',
             timestamp: new Date().toISOString(),
             mode: 'agent',
-            streamTrace: true
+            streamTrace: true,
+            traceEvents: []
         };
         if (state.active === sessionName) {
             state.messages.push(traceMessage);
@@ -2078,7 +2279,7 @@
         return traceMessage.id;
     }
 
-    function updateAgentTraceMessageLocal(sessionName, traceMessageId, content) {
+    function updateAgentTraceMessageLocal(sessionName, traceMessageId, content, traceEvent) {
         if (state.active !== sessionName) {
             return;
         }
@@ -2089,6 +2290,12 @@
             }
             message.content = String(content || '');
             message.timestamp = new Date().toISOString();
+            if (traceEvent && typeof traceEvent === 'object') {
+                if (!Array.isArray(message.traceEvents)) {
+                    message.traceEvents = [];
+                }
+                message.traceEvents.push(traceEvent);
+            }
             return;
         }
     }
@@ -2133,7 +2340,7 @@
         renderMessages(state.messages, { stickToBottom: true });
         syncUi();
 
-        function pushTraceLine(text) {
+        function pushTraceLine(text, traceEvent) {
             const line = String(text || '').trim();
             if (!line) {
                 return;
@@ -2142,7 +2349,7 @@
                 return;
             }
             traceLines.push(line);
-            updateAgentTraceMessageLocal(sessionName, traceMessageId, traceLines.join('\n'));
+            updateAgentTraceMessageLocal(sessionName, traceMessageId, traceLines.join('\n'), traceEvent);
             if (state.active === sessionName) {
                 renderMessages(state.messages, { stickToBottom: true });
             }
@@ -2170,7 +2377,7 @@
                         return;
                     }
                     if (event.type === 'trace') {
-                        pushTraceLine(event.text || '');
+                        pushTraceLine(event.text || '', event.traceEvent || null);
                         return;
                     }
                     if (event.type === 'result') {

package/lib/web/server.js

@@ -376,9 +376,9 @@ function buildAgentPromptWithHistory(history, prompt) {
     ].join('\n');
 }
 
-function prepareCodexTraceDisplayLine(payload) {
+function prepareCodexTraceEvent(payload) {
     if (!payload || typeof payload !== 'object') {
-        return '';
+        return null;
     }
 
     const eventType = typeof payload.type === 'string' ? payload.type : '';
@@ -431,66 +431,173 @@ function prepareCodexTraceDisplayLine(payload) {
         return parts.slice(0, 3).join(', ');
     }
 
+    function pickDisplayStatus(defaultStatus) {
+        const status = String(itemStatus || defaultStatus || '').trim();
+        return status || '';
+    }
+
+    function createTraceEvent(kind, textValue, extra = {}) {
+        const normalizedText = String(textValue || '').trim();
+        if (!normalizedText) {
+            return null;
+        }
+        return {
+            provider: 'codex',
+            kind,
+            eventType,
+            itemType: itemType || '',
+            text: normalizedText,
+            ...extra
+        };
+    }
+
     if (eventType === 'thread.started') {
-        return '[会话] Codex 已开始处理';
+        return createTraceEvent('thread', '[会话] Codex 已开始处理', {
+            phase: 'started',
+            status: 'started'
+        });
     }
     if (eventType === 'thread.completed') {
-        return '[会话] Codex 已完成当前任务';
+        return createTraceEvent('thread', '[会话] Codex 已完成当前任务', {
+            phase: 'completed',
+            status: 'completed'
+        });
     }
     if (eventType === 'turn.started') {
-        return '[回合] 开始生成响应';
+        return createTraceEvent('turn', '[回合] 开始生成响应', {
+            phase: 'started',
+            status: 'started'
+        });
     }
     if (eventType === 'turn.completed') {
-        return '[回合] 响应完成';
+        return createTraceEvent('turn', '[回合] 响应完成', {
+            phase: 'completed',
+            status: 'completed'
+        });
     }
     if (eventType === 'item.started') {
         if (itemType === 'tool_call') {
-            return `[工具开始] ${toolName || 'tool_call'}`;
+            return createTraceEvent('tool', `[工具开始] ${toolName || 'tool_call'}`, {
+                phase: 'started',
+                status: pickDisplayStatus('in_progress'),
+                toolName: toolName || 'tool_call'
+            });
         }
         if (itemType === 'command_execution') {
-            return `[命令开始] ${commandText || 'command_execution'}`;
+            return createTraceEvent('command', `[命令开始] ${commandText || 'command_execution'}`, {
+                phase: 'started',
+                status: pickDisplayStatus('in_progress'),
+                command: commandText || 'command_execution'
+            });
         }
         if (itemType === 'mcp_tool_call') {
             const summary = summarizeArguments(item.arguments);
-            return summary
-                ? `[MCP开始] ${mcpServer || 'mcp'}.${mcpTool || 'tool'} (${summary})`
-                : `[MCP开始] ${mcpServer || 'mcp'}.${mcpTool || 'tool'}`;
+            return createTraceEvent(
+                'mcp',
+                summary
+                    ? `[MCP开始] ${mcpServer || 'mcp'}.${mcpTool || 'tool'} (${summary})`
+                    : `[MCP开始] ${mcpServer || 'mcp'}.${mcpTool || 'tool'}`,
+                {
+                    phase: 'started',
+                    status: pickDisplayStatus('in_progress'),
+                    server: mcpServer || 'mcp',
+                    tool: mcpTool || 'tool',
+                    arguments: item.arguments && typeof item.arguments === 'object' && !Array.isArray(item.arguments)
+                        ? item.arguments
+                        : null,
+                    argumentSummary: summary
+                }
+            );
         }
         if (itemType === 'reasoning') {
-            return text ? `[状态] ${text}` : '[状态] Codex 正在分析';
+            return createTraceEvent('status', text ? `[状态] ${text}` : '[状态] Codex 正在分析', {
+                phase: 'started',
+                status: pickDisplayStatus('in_progress'),
+                detail: text || 'Codex 正在分析'
+            });
         }
         if (itemType === 'agent_message') {
-            return text ? `[说明] ${text}` : '[回复] 正在生成最终答复';
+            return createTraceEvent('agent_message', text ? `[说明] ${text}` : '[回复] 正在生成最终答复', {
+                phase: 'started',
+                status: pickDisplayStatus('in_progress'),
+                detail: text || '正在生成最终答复'
+            });
         }
-        return text ? `[事件开始] ${text}` : `[事件开始] ${itemType || eventType}`;
+        return createTraceEvent('event', text ? `[事件开始] ${text}` : `[事件开始] ${itemType || eventType}`, {
+            phase: 'started',
+            status: pickDisplayStatus('in_progress'),
+            detail: text || itemType || eventType
+        });
     }
     if (eventType === 'item.completed') {
         if (itemType === 'tool_call') {
-            return `[工具完成] ${toolName || 'tool_call'}`;
+            return createTraceEvent('tool', `[工具完成] ${toolName || 'tool_call'}`, {
+                phase: 'completed',
+                status: pickDisplayStatus('completed'),
+                toolName: toolName || 'tool_call'
+            });
         }
         if (itemType === 'command_execution') {
             const suffix = itemStatus || (typeof item.exit_code === 'number' ? `exit=${item.exit_code}` : 'completed');
-            return `[命令完成] ${commandText || 'command_execution'} (${suffix})`;
+            return createTraceEvent('command', `[命令完成] ${commandText || 'command_execution'} (${suffix})`, {
+                phase: 'completed',
+                status: pickDisplayStatus(suffix),
+                command: commandText || 'command_execution',
+                exitCode: typeof item.exit_code === 'number' ? item.exit_code : null
+            });
         }
         if (itemType === 'mcp_tool_call') {
             const summary = summarizeArguments(item.arguments);
-            return summary
-                ? `[MCP完成] ${mcpServer || 'mcp'}.${mcpTool || 'tool'} (${summary})`
-                : `[MCP完成] ${mcpServer || 'mcp'}.${mcpTool || 'tool'}`;
+            return createTraceEvent(
+                'mcp',
+                summary
+                    ? `[MCP完成] ${mcpServer || 'mcp'}.${mcpTool || 'tool'} (${summary})`
+                    : `[MCP完成] ${mcpServer || 'mcp'}.${mcpTool || 'tool'}`,
+                {
+                    phase: 'completed',
+                    status: pickDisplayStatus('completed'),
+                    server: mcpServer || 'mcp',
+                    tool: mcpTool || 'tool',
+                    arguments: item.arguments && typeof item.arguments === 'object' && !Array.isArray(item.arguments)
+                        ? item.arguments
+                        : null,
+                    argumentSummary: summary,
+                    result: item.result !== undefined ? item.result : null,
+                    error: item.error !== undefined ? item.error : null
+                }
+            );
         }
         if (itemType === 'reasoning') {
-            return text ? `[状态] ${text}` : '';
+            return createTraceEvent('status', text ? `[状态] ${text}` : '', {
+                phase: 'completed',
+                status: pickDisplayStatus('completed'),
+                detail: text || ''
+            });
         }
         if (itemType === 'agent_message') {
-            return text ? `[说明] ${text}` : '[回复] 已生成';
+            return createTraceEvent('agent_message', text ? `[说明] ${text}` : '[回复] 已生成', {
+                phase: 'completed',
+                status: pickDisplayStatus('completed'),
+                detail: text || '已生成'
+            });
         }
-        return text ? `[事件完成] ${text}` : `[事件完成] ${itemType || eventType}`;
+        return createTraceEvent('event', text ? `[事件完成] ${text}` : `[事件完成] ${itemType || eventType}`, {
+            phase: 'completed',
+            status: pickDisplayStatus('completed'),
+            detail: text || itemType || eventType
+        });
     }
     if (eventType === 'error') {
-        return text ? `[错误] ${text}` : '[错误] Codex 返回了错误事件';
+        return createTraceEvent('error', text ? `[错误] ${text}` : '[错误] Codex 返回了错误事件', {
+            status: 'error',
+            detail: text || 'Codex 返回了错误事件'
+        });
     }
 
-    return `[事件] ${eventType}`;
+    return createTraceEvent('event', `[事件] ${eventType}`, {
+        status: itemStatus || '',
+        detail: eventType
+    });
 }
 
 async function prepareWebAgentExecution(ctx, state, containerName, prompt) {
@@ -1432,9 +1539,14 @@ async function execAgentInWebContainerStream(ctx, state, containerName, command,
                     payload = null;
                 }
                 if (payload) {
-                    const display = prepareCodexTraceDisplayLine(payload);
-                    if (display) {
-                        onEvent({ type: 'trace', stream: 'stdout', text: display });
+                    const traceEvent = prepareCodexTraceEvent(payload);
+                    if (traceEvent && traceEvent.text) {
+                        onEvent({
+                            type: 'trace',
+                            stream: 'stdout',
+                            text: traceEvent.text,
+                            traceEvent
+                        });
                     }
                     return;
                 }
@@ -2222,6 +2334,7 @@ async function handleWebApi(req, res, pathname, ctx, state) {
 
                 const { history, agentMeta, command, contextMode, resumeAttempted, resumeSucceeded, resumeError } = prepared;
                 const traceLines = ['[执行过程]'];
+                const traceEvents = [];
                 appendWebSessionMessage(state.webHistoryDir, containerName, 'user', prompt, {
                     mode: 'agent',
                     contextMode
@@ -2253,12 +2366,16 @@ async function handleWebApi(req, res, pathname, ctx, state) {
                         onEvent: event => {
                             if (event && event.type === 'trace' && event.text) {
                                 traceLines.push(String(event.text));
+                                if (event.traceEvent && typeof event.traceEvent === 'object') {
+                                    traceEvents.push(event.traceEvent);
+                                }
                             }
                             sendNdjson(res, event);
                         }
                     });
                     traceLines.push(result.interrupted === true ? '[任务] 已停止' : '[任务] 已完成');
                     appendWebAgentTraceMessage(state.webHistoryDir, containerName, traceLines.join('\n'), {
+                        traceEvents,
                         contextMode,
                         resumeAttempted,
                         resumeSucceeded,
@@ -2282,6 +2399,7 @@ async function handleWebApi(req, res, pathname, ctx, state) {
                 } catch (e) {
                     traceLines.push(`[错误] ${e && e.message ? e.message : 'Agent 执行失败'}`);
                     appendWebAgentTraceMessage(state.webHistoryDir, containerName, traceLines.join('\n'), {
+                        traceEvents,
                         contextMode,
                         resumeAttempted,
                         resumeSucceeded,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xcanwin/manyoyo",
-    "version": "5.6.9",
+    "version": "5.6.10",
     "imageVersion": "1.9.0-common",
     "playwrightCliVersion": "0.1.1",
     "description": "AI Agent CLI Security Sandbox for Docker and Podman",