@xcanwin/manyoyo 5.6.8 → 5.6.10

package/lib/web/frontend/app.js

@@ -64,6 +64,13 @@
         sessionNodeMap: new Map(),
         sessionRenderMode: 'empty',
         messageRequestId: 0,
+        agentRun: {
+            active: false,
+            sessionName: '',
+            stopping: false,
+            controller: null,
+            traceMessageId: ''
+        },
         terminal: {
             term: null,
             fitAddon: null,
@@ -142,6 +149,7 @@
     const composerHint = document.getElementById('composerHint');
     const sendState = document.getElementById('sendState');
     const sendBtn = document.getElementById('sendBtn');
+    const stopBtn = document.getElementById('stopBtn');
     const refreshBtn = document.getElementById('refreshBtn');
     const removeBtn = document.getElementById('removeBtn');
     const removeAllBtn = document.getElementById('removeAllBtn');
@@ -182,9 +190,204 @@
         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') {
+            if (message && message.streamTrace) {
+                return 'AGENT 过程';
+            }
             if (message && message.mode === 'agent') {
                 return 'AGENT 回复';
             }
@@ -357,7 +560,11 @@
 
     function resolveAgentPromptTemplate(commandText) {
         const program = resolveAgentProgram(commandText);
-        return AGENT_PROMPT_TEMPLATE_MAP[program] || '';
+        const template = AGENT_PROMPT_TEMPLATE_MAP[program] || '';
+        if (program === 'codex' && String(commandText || '').includes('--dangerously-bypass-approvals-and-sandbox')) {
+            return 'codex exec --dangerously-bypass-approvals-and-sandbox --skip-git-repo-check {prompt}';
+        }
+        return template;
     }
 
     function inferCreateAgentPromptCommand() {
@@ -541,6 +748,15 @@
         }) || null;
     }
 
+    function isAgentRunActiveForSession(sessionName) {
+        return Boolean(
+            state.agentRun
+            && state.agentRun.active
+            && state.agentRun.sessionName
+            && state.agentRun.sessionName === String(sessionName || '').trim()
+        );
+    }
+
     function isActiveSessionHistoryOnly() {
         const session = getActiveSession();
         return sessionStatusInfo(session && session.status).tone === 'history';
@@ -1187,11 +1403,15 @@
             scheduleTerminalFit(false);
         }
 
+        const activeAgentRunning = isAgentRunActiveForSession(state.active);
         const busy = state.loadingSessions || state.loadingMessages || state.sending;
         refreshBtn.disabled = busy;
         removeBtn.disabled = !state.active || busy;
         removeAllBtn.disabled = !state.active || busy;
         sendBtn.disabled = !activityTab || !state.active || busy || (agentMode && !agentEnabled);
+        if (stopBtn) {
+            stopBtn.disabled = !activityTab || !agentMode || !activeAgentRunning || state.agentRun.stopping;
+        }
         commandInput.disabled = !activityTab || !state.active || (agentMode && !agentEnabled);
         if (commandInput) {
             commandInput.placeholder = agentMode
@@ -1200,7 +1420,7 @@
         }
         if (composerHint) {
             composerHint.textContent = agentMode
-                ? 'Enter 发送提示词 · Shift/Alt + Enter 换行'
+                ? 'Enter 发送提示词 · Shift/Alt + Enter 换行 · 执行中可停止'
                 : 'Enter 发送 · Shift/Alt + Enter 换行';
         }
         if (openCreateBtn) {
@@ -1227,6 +1447,21 @@
         if (createCancelBtn) {
             createCancelBtn.disabled = state.createSubmitting;
         }
+        if (sendState) {
+            if (!state.active) {
+                sendState.textContent = '未选择会话';
+                sendState.classList.remove('is-active');
+            } else if (activeAgentRunning && agentMode) {
+                sendState.textContent = state.agentRun.stopping ? '正在停止 Agent…' : 'Agent 执行中';
+                sendState.classList.add('is-active');
+            } else if (busy) {
+                sendState.textContent = '处理中';
+                sendState.classList.add('is-active');
+            } else {
+                sendState.textContent = agentMode ? 'Agent 就绪' : '命令就绪';
+                sendState.classList.remove('is-active');
+            }
+        }
         if (configModal) {
             configModal.hidden = !state.configModalOpen;
         }
@@ -1276,6 +1511,80 @@
         return data;
     }
 
+    async function apiStream(url, options, handlers) {
+        const requestOptions = Object.assign(
+            { headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } },
+            options || {}
+        );
+        const streamHandlers = handlers && typeof handlers === 'object' ? handlers : {};
+        const response = await fetch(url, requestOptions);
+        if (response.status === 401) {
+            window.location.href = '/';
+            throw new Error('未登录或登录已过期');
+        }
+        if (!response.ok) {
+            let errorText = '请求失败';
+            try {
+                const data = await response.json();
+                errorText = data && data.detail ? `${data.error || '请求失败'}: ${data.detail}` : (data.error || '请求失败');
+            } catch (e) {
+                errorText = '请求失败';
+            }
+            throw new Error(errorText);
+        }
+        if (!response.body || typeof response.body.getReader !== 'function') {
+            throw new Error('当前浏览器不支持流式读取');
+        }
+
+        const decoder = new window.TextDecoder();
+        const reader = response.body.getReader();
+        let pending = '';
+
+        while (true) {
+            const result = await reader.read();
+            if (result.done) {
+                break;
+            }
+            pending += decoder.decode(result.value, { stream: true });
+            const lines = pending.split('\n');
+            pending = lines.pop() || '';
+            lines.forEach(function (line) {
+                const text = String(line || '').trim();
+                if (!text) {
+                    return;
+                }
+                let payload = null;
+                try {
+                    payload = JSON.parse(text);
+                } catch (e) {
+                    payload = null;
+                }
+                if (!payload) {
+                    return;
+                }
+                if (typeof streamHandlers.onEvent === 'function') {
+                    streamHandlers.onEvent(payload);
+                }
+            });
+        }
+
+        const rest = decoder.decode();
+        if (rest) {
+            pending += rest;
+        }
+        const finalText = String(pending || '').trim();
+        if (finalText) {
+            try {
+                const payload = JSON.parse(finalText);
+                if (typeof streamHandlers.onEvent === 'function') {
+                    streamHandlers.onEvent(payload);
+                }
+            } catch (e) {
+                // ignore trailing non-json fragments
+            }
+        }
+    }
+
     async function fetchConfigSnapshot() {
         const snapshot = await api('/api/config');
         state.configSnapshot = snapshot;
@@ -1595,6 +1904,11 @@
     }
 
     function getMessageRenderKey(msg, index) {
+        if (msg && msg.id && msg.streamTrace) {
+            const content = msg.content ? String(msg.content) : '';
+            const timestamp = msg.timestamp ? String(msg.timestamp) : '';
+            return `id:${msg.id}|trace|${timestamp}|${content}`;
+        }
         if (msg && msg.id) {
             return `id:${msg.id}`;
         }
@@ -1641,8 +1955,16 @@
         const bubble = document.createElement('div');
         bubble.className = 'bubble';
 
-        const shouldRenderMarkdown = Boolean(markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
-        if (shouldRenderMarkdown) {
+        const shouldRenderStructuredTrace = Boolean(
+            msg
+            && msg.streamTrace
+            && Array.isArray(msg.traceEvents)
+            && msg.traceEvents.length
+        );
+        const shouldRenderMarkdown = Boolean(!msg.streamTrace && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
+        if (shouldRenderStructuredTrace) {
+            appendStructuredTraceContent(bubble, msg);
+        } else if (shouldRenderMarkdown) {
             const markdownNode = document.createElement('div');
             markdownNode.className = 'md-content';
             let renderedMarkdown = '';
@@ -1941,6 +2263,53 @@
         return -1;
     }
 
+    function appendAgentTraceMessageLocal(sessionName) {
+        const traceMessage = {
+            id: createLocalMessageId('local-agent-trace'),
+            role: 'assistant',
+            content: '[执行过程]\n等待 Agent 启动…',
+            timestamp: new Date().toISOString(),
+            mode: 'agent',
+            streamTrace: true,
+            traceEvents: []
+        };
+        if (state.active === sessionName) {
+            state.messages.push(traceMessage);
+        }
+        return traceMessage.id;
+    }
+
+    function updateAgentTraceMessageLocal(sessionName, traceMessageId, content, traceEvent) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        for (let i = state.messages.length - 1; i >= 0; i -= 1) {
+            const message = state.messages[i];
+            if (!message || String(message.id || '') !== String(traceMessageId || '')) {
+                continue;
+            }
+            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;
+        }
+    }
+
+    function finalizeAgentRunState() {
+        if (state.agentRun && state.agentRun.controller) {
+            state.agentRun.controller = null;
+        }
+        state.agentRun.active = false;
+        state.agentRun.stopping = false;
+        state.agentRun.sessionName = '';
+        state.agentRun.traceMessageId = '';
+    }
+
     function appendAssistantMessageLocal(sessionName, result, mode) {
         if (state.active !== sessionName) {
             return;
@@ -1957,6 +2326,109 @@
         });
     }
 
+    async function sendAgentPromptStream(sessionName, inputText, pendingMessage) {
+        const traceMessageId = appendAgentTraceMessageLocal(sessionName);
+        const traceLines = ['[执行过程]', '等待 Agent 启动…'];
+        let finalResult = null;
+        let streamError = null;
+
+        state.agentRun.active = true;
+        state.agentRun.sessionName = sessionName;
+        state.agentRun.stopping = false;
+        state.agentRun.controller = new window.AbortController();
+        state.agentRun.traceMessageId = traceMessageId;
+        renderMessages(state.messages, { stickToBottom: true });
+        syncUi();
+
+        function pushTraceLine(text, traceEvent) {
+            const line = String(text || '').trim();
+            if (!line) {
+                return;
+            }
+            if (traceLines[traceLines.length - 1] === line) {
+                return;
+            }
+            traceLines.push(line);
+            updateAgentTraceMessageLocal(sessionName, traceMessageId, traceLines.join('\n'), traceEvent);
+            if (state.active === sessionName) {
+                renderMessages(state.messages, { stickToBottom: true });
+            }
+        }
+
+        try {
+            await apiStream('/api/sessions/' + encodeURIComponent(sessionName) + '/agent/stream', {
+                method: 'POST',
+                body: JSON.stringify({ prompt: inputText }),
+                signal: state.agentRun.controller.signal
+            }, {
+                onEvent: function (event) {
+                    if (!event || typeof event !== 'object') {
+                        return;
+                    }
+                    if (event.type === 'meta') {
+                        const contextMode = String(event.contextMode || '').trim();
+                        const modeLabel = contextMode ? '上下文模式: ' + contextMode : '';
+                        if (modeLabel) {
+                            pushTraceLine(modeLabel);
+                        }
+                        if (event.resumeAttempted) {
+                            pushTraceLine(event.resumeSucceeded ? '会话恢复成功' : '会话恢复失败，已回退到历史注入');
+                        }
+                        return;
+                    }
+                    if (event.type === 'trace') {
+                        pushTraceLine(event.text || '', event.traceEvent || null);
+                        return;
+                    }
+                    if (event.type === 'result') {
+                        finalResult = event;
+                        if (event.interrupted) {
+                            pushTraceLine('[任务] 已停止');
+                        } else {
+                            pushTraceLine('[任务] 已完成');
+                        }
+                        return;
+                    }
+                    if (event.type === 'error') {
+                        streamError = new Error(event.error || 'Agent 执行失败');
+                    }
+                }
+            });
+        } catch (e) {
+            if (!(e && e.name === 'AbortError')) {
+                streamError = e;
+            }
+        } finally {
+            const pendingIndex = confirmPendingUserMessage(sessionName, pendingMessage.id);
+            if (pendingIndex >= 0 && pendingIndex < state.messageRenderKeys.length) {
+                if (pendingIndex < messagesNode.children.length) {
+                    const pendingRow = messagesNode.children[pendingIndex];
+                    if (pendingRow && pendingRow.classList.contains('pending')) {
+                        pendingRow.classList.remove('pending');
+                    }
+                }
+            }
+            finalizeAgentRunState();
+            syncUi();
+        }
+
+        if (streamError) {
+            throw streamError;
+        }
+        if (!finalResult) {
+            throw new Error('Agent 流式响应未返回结果');
+        }
+
+        appendAssistantMessageLocal(sessionName, finalResult, 'agent');
+        if (state.active === sessionName) {
+            renderMessages(state.messages, { stickToBottom: true });
+        }
+        bumpSessionMetaAfterSend(sessionName);
+        refreshSessionsSilent({ preferredName: sessionName }).catch(function () {
+            // 静默同步失败不打断当前交互
+        });
+    }
+
     if (openConfigBtn) {
         openConfigBtn.addEventListener('click', function () {
             openConfigModal();
@@ -2092,32 +2564,31 @@
         try {
             commandInput.value = '';
             commandInput.focus();
-            const endpoint = mode === 'agent' ? '/agent' : '/run';
-            const runResult = await api('/api/sessions/' + encodeURIComponent(submitSession) + endpoint, {
-                method: 'POST',
-                body: JSON.stringify(
-                    mode === 'agent'
-                        ? { prompt: inputText }
-                        : { command: inputText }
-                )
-            });
-            const pendingIndex = confirmPendingUserMessage(submitSession, pendingMessage.id);
-            if (pendingIndex >= 0 && pendingIndex < state.messageRenderKeys.length) {
-                if (pendingIndex < messagesNode.children.length) {
-                    const pendingRow = messagesNode.children[pendingIndex];
-                    if (pendingRow && pendingRow.classList.contains('pending')) {
-                        pendingRow.classList.remove('pending');
+            if (mode === 'agent') {
+                await sendAgentPromptStream(submitSession, inputText, pendingMessage);
+            } else {
+                const runResult = await api('/api/sessions/' + encodeURIComponent(submitSession) + '/run', {
+                    method: 'POST',
+                    body: JSON.stringify({ command: inputText })
+                });
+                const pendingIndex = confirmPendingUserMessage(submitSession, pendingMessage.id);
+                if (pendingIndex >= 0 && pendingIndex < state.messageRenderKeys.length) {
+                    if (pendingIndex < messagesNode.children.length) {
+                        const pendingRow = messagesNode.children[pendingIndex];
+                        if (pendingRow && pendingRow.classList.contains('pending')) {
+                            pendingRow.classList.remove('pending');
+                        }
                     }
                 }
+                appendAssistantMessageLocal(submitSession, runResult, mode);
+                if (state.active === submitSession) {
+                    renderMessages(state.messages, { stickToBottom: true });
+                }
+                bumpSessionMetaAfterSend(submitSession);
+                refreshSessionsSilent({ preferredName: submitSession }).catch(function () {
+                    // 静默同步失败不打断当前交互
+                });
             }
-            appendAssistantMessageLocal(submitSession, runResult, mode);
-            if (state.active === submitSession) {
-                renderMessages(state.messages, { stickToBottom: true });
-            }
-            bumpSessionMetaAfterSend(submitSession);
-            refreshSessionsSilent({ preferredName: submitSession }).catch(function () {
-                // 静默同步失败不打断当前交互
-            });
         } catch (e) {
             if (state.active === submitSession) {
                 state.messages = state.messages.filter(function (message) {
@@ -2133,6 +2604,26 @@
         }
     });
 
+    if (stopBtn) {
+        stopBtn.addEventListener('click', async function () {
+            if (!state.active || !isAgentRunActiveForSession(state.active) || state.agentRun.stopping) {
+                return;
+            }
+            state.agentRun.stopping = true;
+            syncUi();
+            try {
+                await api('/api/sessions/' + encodeURIComponent(state.active) + '/agent/stop', {
+                    method: 'POST',
+                    body: JSON.stringify({})
+                });
+            } catch (e) {
+                alert(e.message);
+                state.agentRun.stopping = false;
+                syncUi();
+            }
+        });
+    }
+
     commandInput.addEventListener('keydown', function (event) {
         if (event.key !== 'Enter' || event.isComposing) {
             return;