@xcanwin/manyoyo 4.0.2 → 4.0.6

package/lib/web/frontend/app.js

@@ -39,11 +39,26 @@
         sessions: [],
         active: '',
         messages: [],
+        messageRenderKeys: [],
+        mode: 'command',
         sending: false,
         loadingSessions: false,
         loadingMessages: false,
         mobileSidebarOpen: false,
-        mobileActionsOpen: false
+        mobileActionsOpen: false,
+        terminal: {
+            term: null,
+            fitAddon: null,
+            socket: null,
+            connected: false,
+            connecting: false,
+            status: '未连接',
+            sessionName: '',
+            terminalReady: false,
+            fitTimer: null,
+            lastSentCols: 0,
+            lastSentRows: 0
+        }
     };
 
     const sidebarNode = document.querySelector('.sidebar');
@@ -56,7 +71,14 @@
     const sidebarBackdrop = document.getElementById('sidebarBackdrop');
     const activeTitle = document.getElementById('activeTitle');
     const activeMeta = document.getElementById('activeMeta');
+    const modeCommandBtn = document.getElementById('modeCommandBtn');
+    const modeTerminalBtn = document.getElementById('modeTerminalBtn');
     const messagesNode = document.getElementById('messages');
+    const terminalPanel = document.getElementById('terminalPanel');
+    const terminalConnectBtn = document.getElementById('terminalConnectBtn');
+    const terminalDisconnectBtn = document.getElementById('terminalDisconnectBtn');
+    const terminalStatus = document.getElementById('terminalStatus');
+    const terminalScreen = document.getElementById('terminalScreen');
     const newSessionForm = document.getElementById('newSessionForm');
     const newSessionName = document.getElementById('newSessionName');
     const createSessionBtn = newSessionForm.querySelector('button[type="submit"]');
@@ -69,6 +91,11 @@
     const removeAllBtn = document.getElementById('removeAllBtn');
     const MOBILE_LAYOUT_MEDIA = window.matchMedia('(max-width: 980px)');
     const MOBILE_COMPACT_MEDIA = window.matchMedia('(max-width: 640px)');
+    const TERMINAL_FIT_DEBOUNCE_MS = 60;
+    const TERMINAL_MIN_COLS = 40;
+    const TERMINAL_MIN_ROWS = 12;
+    const TERMINAL_DEFAULT_COLS = 120;
+    const TERMINAL_DEFAULT_ROWS = 36;
 
     function roleName(role) {
         if (role === 'user') return '你';
@@ -144,6 +171,278 @@
         return parts.join(' · ');
     }
 
+    function writeTerminalLine(text) {
+        if (!state.terminal.term) return;
+        state.terminal.term.writeln(text);
+    }
+
+    function renderTerminalIntro() {
+        if (!state.terminal.term) return;
+        state.terminal.term.reset();
+        writeTerminalLine('MANYOYO Interactive Terminal');
+        writeTerminalLine(state.active ? ('当前会话: ' + state.active) : '当前会话: 未选择');
+        writeTerminalLine('点击“连接终端”后可运行 codex / claude 等交互式 agent。');
+        writeTerminalLine('');
+    }
+
+    function resolveFitAddonCtor() {
+        if (window.FitAddon && typeof window.FitAddon.FitAddon === 'function') {
+            return window.FitAddon.FitAddon;
+        }
+        if (typeof window.FitAddon === 'function') {
+            return window.FitAddon;
+        }
+        return null;
+    }
+
+    function normalizeTerminalSize(cols, rows) {
+        const parsedCols = Number.parseInt(cols, 10);
+        const parsedRows = Number.parseInt(rows, 10);
+        const safeCols = Number.isFinite(parsedCols) && parsedCols > 0 ? parsedCols : TERMINAL_DEFAULT_COLS;
+        const safeRows = Number.isFinite(parsedRows) && parsedRows > 0 ? parsedRows : TERMINAL_DEFAULT_ROWS;
+        return {
+            cols: Math.max(TERMINAL_MIN_COLS, safeCols),
+            rows: Math.max(TERMINAL_MIN_ROWS, safeRows)
+        };
+    }
+
+    function notifyTerminalResize(force) {
+        if (!state.terminal.term) return;
+        if (!state.terminal.socket || state.terminal.socket.readyState !== window.WebSocket.OPEN) return;
+        const size = normalizeTerminalSize(
+            state.terminal.term.cols,
+            state.terminal.term.rows
+        );
+        const cols = size.cols;
+        const rows = size.rows;
+        if (!force && cols === state.terminal.lastSentCols && rows === state.terminal.lastSentRows) {
+            return;
+        }
+        state.terminal.lastSentCols = cols;
+        state.terminal.lastSentRows = rows;
+        state.terminal.socket.send(JSON.stringify({
+            type: 'resize',
+            cols: cols,
+            rows: rows
+        }));
+    }
+
+    function fitTerminalNow(forceNotify) {
+        if (!state.terminal.term || !state.terminal.fitAddon) {
+            return;
+        }
+        if (!terminalScreen || terminalScreen.clientWidth <= 0 || terminalScreen.clientHeight <= 0) {
+            return;
+        }
+        try {
+            state.terminal.fitAddon.fit();
+        } catch (e) {
+            return;
+        }
+        notifyTerminalResize(Boolean(forceNotify));
+    }
+
+    function scheduleTerminalFit(forceNotify) {
+        if (!state.terminal.term || !state.terminal.fitAddon) {
+            return;
+        }
+        if (state.terminal.fitTimer) {
+            window.clearTimeout(state.terminal.fitTimer);
+            state.terminal.fitTimer = null;
+        }
+        state.terminal.fitTimer = window.setTimeout(function () {
+            state.terminal.fitTimer = null;
+            fitTerminalNow(forceNotify);
+        }, TERMINAL_FIT_DEBOUNCE_MS);
+    }
+
+    function ensureTerminalReady() {
+        if (state.terminal.terminalReady) {
+            return true;
+        }
+        if (!window.Terminal) {
+            state.terminal.status = '终端组件加载失败';
+            return false;
+        }
+        const FitAddonCtor = resolveFitAddonCtor();
+        if (!FitAddonCtor) {
+            state.terminal.status = '终端组件加载失败';
+            return false;
+        }
+        state.terminal.term = new window.Terminal({
+            cursorBlink: true,
+            convertEol: false,
+            fontFamily: '"IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace',
+            fontSize: 13,
+            scrollback: 5000,
+            theme: {
+                background: '#0c131a',
+                foreground: '#dde8f3',
+                cursor: '#6fe7b5'
+            }
+        });
+        state.terminal.fitAddon = new FitAddonCtor();
+        state.terminal.term.loadAddon(state.terminal.fitAddon);
+        state.terminal.term.open(terminalScreen);
+        scheduleTerminalFit(false);
+        state.terminal.term.onData(function (data) {
+            if (!data || !state.terminal.socket || state.terminal.socket.readyState !== window.WebSocket.OPEN) {
+                return;
+            }
+            state.terminal.socket.send(JSON.stringify({
+                type: 'input',
+                data: data
+            }));
+        });
+        state.terminal.term.onResize(function (size) {
+            if (!size || !size.cols || !size.rows) {
+                return;
+            }
+            notifyTerminalResize(false);
+        });
+        state.terminal.terminalReady = true;
+        renderTerminalIntro();
+        return true;
+    }
+
+    function buildTerminalWsUrl(sessionName) {
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const url = new URL(
+            '/api/sessions/' + encodeURIComponent(sessionName) + '/terminal/ws',
+            protocol + '://' + window.location.host
+        );
+        const size = normalizeTerminalSize(
+            state.terminal.term ? state.terminal.term.cols : TERMINAL_DEFAULT_COLS,
+            state.terminal.term ? state.terminal.term.rows : TERMINAL_DEFAULT_ROWS
+        );
+        url.searchParams.set('cols', String(size.cols));
+        url.searchParams.set('rows', String(size.rows));
+        return url.toString();
+    }
+
+    function disconnectTerminal(reason, silent) {
+        const socket = state.terminal.socket;
+        state.terminal.socket = null;
+        state.terminal.connected = false;
+        state.terminal.connecting = false;
+        state.terminal.sessionName = '';
+        state.terminal.lastSentCols = 0;
+        state.terminal.lastSentRows = 0;
+        if (state.terminal.fitTimer) {
+            window.clearTimeout(state.terminal.fitTimer);
+            state.terminal.fitTimer = null;
+        }
+        if (socket && (socket.readyState === window.WebSocket.OPEN || socket.readyState === window.WebSocket.CONNECTING)) {
+            try {
+                socket.close();
+            } catch (e) {
+                // noop
+            }
+        }
+        if (typeof reason === 'string' && reason) {
+            state.terminal.status = reason;
+            if (!silent && state.terminal.term) {
+                writeTerminalLine('[system] ' + reason);
+            }
+        }
+    }
+
+    function connectTerminal() {
+        if (!state.active) {
+            return;
+        }
+        if (!ensureTerminalReady()) {
+            syncUi();
+            return;
+        }
+        if (state.terminal.connected && state.terminal.sessionName === state.active) {
+            return;
+        }
+        if (state.terminal.connected || state.terminal.connecting) {
+            disconnectTerminal('终端会话已重置', true);
+        }
+
+        const sessionName = state.active;
+        fitTerminalNow(false);
+        const socket = new window.WebSocket(buildTerminalWsUrl(sessionName));
+        state.terminal.socket = socket;
+        state.terminal.connecting = true;
+        state.terminal.connected = false;
+        state.terminal.status = '连接中...';
+        state.terminal.sessionName = sessionName;
+        state.terminal.lastSentCols = 0;
+        state.terminal.lastSentRows = 0;
+        writeTerminalLine('[system] 正在连接终端...');
+        syncUi();
+
+        socket.addEventListener('open', function () {
+            if (state.terminal.socket !== socket) {
+                return;
+            }
+            state.terminal.connecting = false;
+            state.terminal.connected = true;
+            state.terminal.status = '已连接';
+            if (state.terminal.term) {
+                state.terminal.term.focus();
+                scheduleTerminalFit(true);
+            }
+            syncUi();
+        });
+
+        socket.addEventListener('message', function (event) {
+            if (!state.terminal.term) return;
+            let payload = null;
+            try {
+                payload = JSON.parse(event.data);
+            } catch (e) {
+                payload = { type: 'output', data: String(event.data || '') };
+            }
+
+            if (!payload || typeof payload !== 'object') return;
+            if (payload.type === 'output' && typeof payload.data === 'string') {
+                state.terminal.term.write(payload.data);
+                return;
+            }
+            if (payload.type === 'status') {
+                if (payload.phase === 'ready') {
+                    state.terminal.status = '已连接';
+                } else if (payload.phase === 'closed') {
+                    state.terminal.status = '终端已关闭';
+                    writeTerminalLine('[system] 终端会话已结束');
+                }
+                syncUi();
+                return;
+            }
+            if (payload.type === 'error' && typeof payload.error === 'string') {
+                state.terminal.status = '终端异常';
+                writeTerminalLine('[error] ' + payload.error);
+                syncUi();
+            }
+        });
+
+        socket.addEventListener('error', function () {
+            if (state.terminal.socket !== socket) {
+                return;
+            }
+            state.terminal.status = '终端连接异常';
+            syncUi();
+        });
+
+        socket.addEventListener('close', function () {
+            if (state.terminal.socket !== socket) {
+                return;
+            }
+            state.terminal.socket = null;
+            state.terminal.connecting = false;
+            state.terminal.connected = false;
+            state.terminal.sessionName = '';
+            if (state.terminal.status === '连接中...' || state.terminal.status === '已连接') {
+                state.terminal.status = '终端已断开';
+            }
+            syncUi();
+        });
+    }
+
     function isMobileLayout() {
         return MOBILE_LAYOUT_MEDIA.matches;
     }
@@ -196,19 +495,48 @@
         if (!state.active) {
             activeTitle.textContent = '未选择会话';
             activeMeta.textContent = '请选择左侧会话';
-            commandInput.value = '';
+            if (state.mode === 'command') {
+                commandInput.value = '';
+            }
         } else {
             activeTitle.textContent = state.active;
             activeMeta.textContent = buildActiveMeta(getActiveSession());
         }
 
+        const commandMode = state.mode !== 'terminal';
+        document.body.classList.toggle('command-mode', commandMode);
+        document.body.classList.toggle('terminal-mode', !commandMode);
+        if (modeCommandBtn) {
+            modeCommandBtn.classList.toggle('is-active', commandMode);
+            modeCommandBtn.setAttribute('aria-pressed', commandMode ? 'true' : 'false');
+        }
+        if (modeTerminalBtn) {
+            modeTerminalBtn.classList.toggle('is-active', !commandMode);
+            modeTerminalBtn.setAttribute('aria-pressed', !commandMode ? 'true' : 'false');
+        }
+        if (terminalPanel) {
+            terminalPanel.hidden = commandMode;
+        }
+        if (!commandMode && state.terminal.terminalReady) {
+            scheduleTerminalFit(false);
+        }
+
         const busy = state.loadingSessions || state.loadingMessages || state.sending;
         refreshBtn.disabled = busy;
         removeBtn.disabled = !state.active || busy;
         removeAllBtn.disabled = !state.active || busy;
-        sendBtn.disabled = !state.active || busy;
-        commandInput.disabled = !state.active || state.sending;
+        sendBtn.disabled = !commandMode || !state.active || busy;
+        commandInput.disabled = !commandMode || !state.active || state.sending;
         createSessionBtn.disabled = state.loadingSessions || state.sending;
+        if (terminalConnectBtn) {
+            terminalConnectBtn.disabled = !state.active || busy || state.terminal.connecting || state.terminal.connected;
+        }
+        if (terminalDisconnectBtn) {
+            terminalDisconnectBtn.disabled = !(state.terminal.connecting || state.terminal.connected);
+        }
+        if (terminalStatus) {
+            terminalStatus.textContent = state.terminal.status;
+        }
 
         if (!state.active) {
             sendState.textContent = '未选择会话';
@@ -248,7 +576,7 @@
 
     function renderSessionsLoading() {
         sessionList.innerHTML = '';
-        for (let i = 0; i < 5; i++) {
+        for (let i = 0; i < 3; i++) {
             const skeleton = document.createElement('div');
             skeleton.className = 'skeleton session';
             sessionList.appendChild(skeleton);
@@ -307,10 +635,17 @@
 
             btn.addEventListener('click', function () {
                 if (state.loadingMessages || state.sending) return;
+                if ((state.terminal.connected || state.terminal.connecting) && state.terminal.sessionName && state.terminal.sessionName !== session.name) {
+                    disconnectTerminal('会话切换，终端已断开', true);
+                }
                 state.active = session.name;
                 if (isMobileLayout()) {
                     closeMobileSessionPanel();
                 }
+                if (state.mode === 'terminal' && ensureTerminalReady()) {
+                    renderTerminalIntro();
+                    scheduleTerminalFit(false);
+                }
                 syncUi();
                 renderSessions();
                 loadMessages().catch(function (e) {
@@ -323,51 +658,121 @@
 
     function renderMessagesLoading() {
         messagesNode.innerHTML = '';
-        for (let i = 0; i < 3; i++) {
+        state.messageRenderKeys = [];
+        for (let i = 0; i < 2; i++) {
             const skeleton = document.createElement('div');
             skeleton.className = 'skeleton message';
             messagesNode.appendChild(skeleton);
         }
     }
 
-    function renderMessages(messages) {
-        messagesNode.innerHTML = '';
+    function isMessagesNearBottom(thresholdPx) {
+        const threshold = Number.isFinite(thresholdPx) ? thresholdPx : 40;
+        if (!messagesNode) return true;
+        return (messagesNode.scrollHeight - (messagesNode.scrollTop + messagesNode.clientHeight)) <= threshold;
+    }
+
+    function scrollMessagesToBottomImmediate() {
+        if (!messagesNode) return;
+        const previousBehavior = messagesNode.style.scrollBehavior;
+        messagesNode.style.scrollBehavior = 'auto';
+        messagesNode.scrollTop = messagesNode.scrollHeight;
+        messagesNode.style.scrollBehavior = previousBehavior;
+    }
+
+    function getMessageRenderKey(msg, index) {
+        if (msg && msg.id) {
+            return `id:${msg.id}`;
+        }
+        const role = msg && msg.role ? String(msg.role) : '';
+        const timestamp = msg && msg.timestamp ? String(msg.timestamp) : '';
+        const exitCode = msg && typeof msg.exitCode === 'number' ? String(msg.exitCode) : '';
+        const pending = msg && msg.pending ? '1' : '0';
+        const content = msg && msg.content ? String(msg.content) : '';
+        return `idx:${index}|${role}|${timestamp}|${exitCode}|${pending}|${content}`;
+    }
+
+    function createMessageRow(msg, index) {
+        const row = document.createElement('article');
+        row.className = 'msg ' + (msg.role || 'system') + (msg.pending ? ' pending' : '');
+        row.style.setProperty('--msg-index', String(index));
 
-        if (state.loadingMessages) {
+        const meta = document.createElement('div');
+        meta.className = 'msg-meta';
+        meta.textContent = buildMessageMeta(msg);
+
+        const bubble = document.createElement('div');
+        bubble.className = 'bubble';
+
+        const pre = document.createElement('pre');
+        pre.textContent = msg.content || '';
+        bubble.appendChild(pre);
+
+        row.appendChild(meta);
+        row.appendChild(bubble);
+        return row;
+    }
+
+    function renderMessages(messages, options) {
+        const renderOptions = options && typeof options === 'object' ? options : {};
+        const stickToBottom = renderOptions.stickToBottom === true || isMessagesNearBottom(40);
+
+        if (state.loadingMessages && !messages.length) {
             renderMessagesLoading();
             return;
         }
 
         if (!messages.length) {
+            messagesNode.innerHTML = '';
             const empty = document.createElement('div');
             empty.className = 'empty';
             empty.textContent = '输入命令后，容器输出会显示在这里。';
             messagesNode.appendChild(empty);
+            state.messageRenderKeys = [];
             return;
         }
 
-        messages.forEach(function (msg, index) {
-            const row = document.createElement('article');
-            row.className = 'msg ' + (msg.role || 'system') + (msg.pending ? ' pending' : '');
-            row.style.setProperty('--msg-index', String(index));
-
-            const meta = document.createElement('div');
-            meta.className = 'msg-meta';
-            meta.textContent = buildMessageMeta(msg);
-
-            const bubble = document.createElement('div');
-            bubble.className = 'bubble';
+        const nextKeys = messages.map(function (msg, index) {
+            return getMessageRenderKey(msg, index);
+        });
+        const prevKeys = Array.isArray(state.messageRenderKeys) ? state.messageRenderKeys : [];
+        const hasRenderedMessages = messagesNode.children.length === prevKeys.length && prevKeys.length > 0;
+        let updated = false;
+
+        if (!renderOptions.forceFullRender && hasRenderedMessages) {
+            let prefix = 0;
+            while (
+                prefix < prevKeys.length &&
+                prefix < nextKeys.length &&
+                prevKeys[prefix] === nextKeys[prefix]
+            ) {
+                prefix += 1;
+            }
 
-            const pre = document.createElement('pre');
-            pre.textContent = msg.content || '';
-            bubble.appendChild(pre);
+            if (prefix === prevKeys.length && prefix === nextKeys.length) {
+                updated = true;
+            } else if (prefix > 0) {
+                while (messagesNode.children.length > prefix) {
+                    messagesNode.removeChild(messagesNode.lastChild);
+                }
+                for (let i = prefix; i < messages.length; i++) {
+                    messagesNode.appendChild(createMessageRow(messages[i], i));
+                }
+                updated = true;
+            }
+        }
 
-            row.appendChild(meta);
-            row.appendChild(bubble);
-            messagesNode.appendChild(row);
-        });
+        if (!updated) {
+            messagesNode.innerHTML = '';
+            messages.forEach(function (msg, index) {
+                messagesNode.appendChild(createMessageRow(msg, index));
+            });
+        }
+        state.messageRenderKeys = nextKeys;
 
-        messagesNode.scrollTop = messagesNode.scrollHeight;
+        if (stickToBottom) {
+            scrollMessagesToBottomImmediate();
+        }
     }
 
     async function loadSessions(preferredName) {
@@ -391,6 +796,10 @@
             if (!state.active && state.sessions.length) {
                 state.active = state.sessions[0].name;
             }
+
+            if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
+                disconnectTerminal('会话已变化，终端已断开', true);
+            }
         } catch (e) {
             requestError = e;
         } finally {
@@ -403,6 +812,11 @@
             throw requestError;
         }
 
+        if (state.mode === 'terminal' && ensureTerminalReady() && !state.terminal.connected && !state.terminal.connecting) {
+            renderTerminalIntro();
+            scheduleTerminalFit(false);
+        }
+
         await loadMessages();
     }
 
@@ -415,7 +829,9 @@
         }
 
         state.loadingMessages = true;
-        renderMessages(state.messages);
+        if (!state.messages.length) {
+            renderMessages(state.messages);
+        }
         syncUi();
 
         let requestError = null;
@@ -476,7 +892,7 @@
             timestamp: new Date().toISOString(),
             pending: true
         }]);
-        renderMessages(state.messages);
+        renderMessages(state.messages, { stickToBottom: true });
 
         state.sending = true;
         syncUi();
@@ -491,7 +907,7 @@
         } catch (e) {
             if (state.active === submitSession) {
                 state.messages = previousMessages;
-                renderMessages(state.messages);
+                renderMessages(state.messages, { stickToBottom: true });
             }
             alert(e.message);
         } finally {
@@ -519,6 +935,41 @@
         composer.requestSubmit();
     });
 
+    if (modeCommandBtn) {
+        modeCommandBtn.addEventListener('click', function () {
+            state.mode = 'command';
+            syncUi();
+            commandInput.focus();
+        });
+    }
+
+    if (modeTerminalBtn) {
+        modeTerminalBtn.addEventListener('click', function () {
+            state.mode = 'terminal';
+            syncUi();
+            if (ensureTerminalReady()) {
+                if (!state.terminal.connected && !state.terminal.connecting) {
+                    renderTerminalIntro();
+                }
+                scheduleTerminalFit(false);
+                state.terminal.term.focus();
+            }
+        });
+    }
+
+    if (terminalConnectBtn) {
+        terminalConnectBtn.addEventListener('click', function () {
+            connectTerminal();
+        });
+    }
+
+    if (terminalDisconnectBtn) {
+        terminalDisconnectBtn.addEventListener('click', function () {
+            disconnectTerminal('终端已手动断开');
+            syncUi();
+        });
+    }
+
     refreshBtn.addEventListener('click', function () {
         closeMobileActionsMenu();
         loadSessions(state.active).catch(function (e) { alert(e.message); });
@@ -560,8 +1011,17 @@
     function onLayoutMediaChange() {
         setMobileSessionPanel(state.mobileSidebarOpen);
         setMobileActionsMenu(state.mobileActionsOpen);
+        if (state.mode === 'terminal' && state.terminal.terminalReady) {
+            scheduleTerminalFit(false);
+        }
     }
 
+    window.addEventListener('resize', function () {
+        if (state.mode === 'terminal' && state.terminal.terminalReady) {
+            scheduleTerminalFit(false);
+        }
+    });
+
     if (typeof MOBILE_LAYOUT_MEDIA.addEventListener === 'function') {
         MOBILE_LAYOUT_MEDIA.addEventListener('change', onLayoutMediaChange);
     } else if (typeof MOBILE_LAYOUT_MEDIA.addListener === 'function') {
@@ -590,6 +1050,9 @@
         if (!yes) return;
         try {
             const current = state.active;
+            if (state.terminal.sessionName === current && (state.terminal.connected || state.terminal.connecting)) {
+                disconnectTerminal('容器删除，终端已断开', true);
+            }
             await api('/api/sessions/' + encodeURIComponent(current) + '/remove', {
                 method: 'POST'
             });
@@ -615,9 +1078,14 @@
         }
     });
 
+    window.addEventListener('beforeunload', function () {
+        disconnectTerminal('', true);
+    });
+
     renderSessions();
     renderMessages(state.messages);
     setMobileSessionPanel(false);
+    document.body.classList.add('command-mode');
     syncUi();
     loadSessions().catch(function (e) {
         alert(e.message);