npm - @xcanwin/manyoyo - Versions diffs - 4.0.2 → 4.0.4 - Mend

@xcanwin/manyoyo 4.0.2 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/lib/web/frontend/app.css +144 -1
package/lib/web/frontend/app.html +18 -0
package/lib/web/frontend/app.js +499 -31
package/lib/web/server.js +324 -6
package/package.json +5 -2

package/lib/web/frontend/app.css CHANGED Viewed

@@ -362,7 +362,7 @@ button.danger:hover {
     min-height: 0;
     padding: 12px 14px 10px;
     display: grid;
-    grid-template-rows: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto minmax(0, 1fr) auto;
     gap: 0;
     animation: panelIn 380ms ease 80ms both;
 }
@@ -416,6 +416,53 @@ button.danger:hover {
     flex-wrap: wrap;
 }
+.mode-switch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    margin: 8px 8px 2px;
+    min-height: 34px;
+}
+.mode-switch-left {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+.mode-switch button {
+    min-width: 98px;
+    color: var(--text);
+    background: #eef4f0;
+    border-color: var(--line);
+}
+.mode-switch button.is-active {
+    color: #ffffff;
+    background: var(--accent);
+    border-color: var(--accent-strong);
+}
+body.command-mode #modeCommandBtn,
+body.terminal-mode #modeTerminalBtn {
+    color: #ffffff;
+    background: var(--accent);
+    border-color: var(--accent-strong);
+}
+.mode-terminal-controls {
+    display: none;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+body.terminal-mode .mode-terminal-controls {
+    display: inline-flex;
+}
 #messages {
     min-height: 0;
     overflow-y: auto;
@@ -426,6 +473,71 @@ button.danger:hover {
     scroll-behavior: smooth;
 }
+#terminalPanel {
+    min-height: 0;
+    display: none;
+    flex-direction: column;
+    gap: 8px;
+    padding: 6px 8px 8px;
+}
+.terminal-status {
+    display: inline-block;
+    color: var(--muted);
+    font-size: 12px;
+    white-space: nowrap;
+}
+#terminalScreen {
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    border-radius: 10px;
+    border: 1px solid #2a3d34;
+    box-shadow: inset 0 0 0 1px rgba(123, 161, 146, 0.12);
+    overflow: hidden;
+    background: radial-gradient(circle at 10% 8%, #1a2832 0%, #0c131a 64%);
+}
+#terminalScreen .xterm {
+    width: 100%;
+    height: 100%;
+    padding: 8px 6px;
+}
+#terminalScreen .xterm-screen {
+    width: 100%;
+}
+.terminal-foot {
+    color: #556961;
+    font-size: 12px;
+}
+body.command-mode #messages {
+    display: flex;
+}
+body.command-mode #terminalPanel {
+    display: none;
+}
+body.command-mode .composer {
+    display: block;
+}
+body.terminal-mode #messages {
+    display: none;
+}
+body.terminal-mode #terminalPanel {
+    display: flex;
+}
+body.terminal-mode .composer {
+    display: none;
+}
 .msg {
     max-width: min(900px, 92%);
     width: fit-content;
@@ -652,6 +764,10 @@ button.danger:hover {
         max-height: none;
     }
+    #terminalPanel {
+        min-height: 0;
+    }
     .composer {
         position: sticky;
         bottom: 0;
@@ -740,6 +856,33 @@ button.danger:hover {
         grid-template-columns: 1fr auto;
     }
+    .mode-switch {
+        margin: 8px 10px 2px;
+        overflow-x: auto;
+        padding-bottom: 2px;
+        gap: 8px;
+    }
+    .mode-switch-left {
+        flex: 0 0 auto;
+    }
+    .mode-switch button {
+        min-width: 90px;
+        flex: 0 0 auto;
+    }
+    .mode-terminal-controls {
+        flex: 0 0 auto;
+        gap: 6px;
+    }
+    .terminal-status {
+        max-width: 5.2em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
     #commandInput {
         min-height: 68px;
         max-height: 160px;

package/lib/web/frontend/app.html CHANGED Viewed

@@ -8,6 +8,7 @@
     />
     <title>MANYOYO Web</title>
     <link rel="stylesheet" href="/app/frontend/app.css" />
+    <link rel="stylesheet" href="/app/vendor/xterm.css" />
 </head>
 <body>
     <div class="app">
@@ -62,7 +63,22 @@
                     <button type="button" id="removeAllBtn" class="danger">删除对话</button>
                 </div>
             </header>
+            <section class="mode-switch" id="modeSwitch">
+                <div class="mode-switch-left">
+                    <button type="button" id="modeCommandBtn" class="secondary is-active">命令模式</button>
+                    <button type="button" id="modeTerminalBtn" class="secondary">交互终端</button>
+                </div>
+                <div class="mode-terminal-controls">
+                    <button type="button" id="terminalConnectBtn">连接终端</button>
+                    <button type="button" id="terminalDisconnectBtn" class="secondary">断开终端</button>
+                    <span id="terminalStatus" class="terminal-status">未连接</span>
+                </div>
+            </section>
             <section id="messages"></section>
+            <section id="terminalPanel" hidden>
+                <div id="terminalScreen" aria-label="终端输出区域"></div>
+                <div class="terminal-foot">点击终端后可直接输入；适用于 codex / claude 等交互式 agent。</div>
+            </section>
             <form class="composer" id="composer">
                 <div class="composer-inner">
                     <textarea id="commandInput" placeholder="输入容器命令，例如: ls -la"></textarea>
@@ -77,6 +93,8 @@
         <div id="sidebarBackdrop" class="sidebar-backdrop" hidden></div>
     </div>
+    <script src="/app/vendor/xterm.js"></script>
+    <script src="/app/vendor/xterm-addon-fit.js"></script>
     <script src="/app/frontend/app.js"></script>
 </body>
 </html>

package/lib/web/frontend/app.js CHANGED Viewed

@@ -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);

package/lib/web/server.js CHANGED Viewed

@@ -1,18 +1,43 @@
 'use strict';
-const { spawnSync } = require('child_process');
+const { spawnSync, spawn } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 const os = require('os');
 const crypto = require('crypto');
 const http = require('http');
+const WebSocket = require('ws');
 const WEB_HISTORY_MAX_MESSAGES = 500;
 const WEB_OUTPUT_MAX_CHARS = 16000;
+const WEB_TERMINAL_MAX_SESSIONS = 20;
+const WEB_TERMINAL_FORCE_KILL_MS = 2000;
+const WEB_TERMINAL_DEFAULT_COLS = 120;
+const WEB_TERMINAL_DEFAULT_ROWS = 36;
+const WEB_TERMINAL_MIN_COLS = 40;
+const WEB_TERMINAL_MIN_ROWS = 12;
 const WEB_AUTH_COOKIE_NAME = 'manyoyo_web_auth';
 const WEB_AUTH_TTL_SECONDS = 12 * 60 * 60;
 const FRONTEND_DIR = path.join(__dirname, 'frontend');
+let XTERM_JS_FILE = null;
+let XTERM_CSS_FILE = null;
+let XTERM_ADDON_FIT_JS_FILE = null;
+try {
+    const xtermPackageDir = path.dirname(require.resolve('@xterm/xterm/package.json'));
+    XTERM_JS_FILE = path.join(xtermPackageDir, 'lib', 'xterm.js');
+    XTERM_CSS_FILE = path.join(xtermPackageDir, 'css', 'xterm.css');
+} catch (e) {
+    XTERM_JS_FILE = null;
+    XTERM_CSS_FILE = null;
+}
+try {
+    const xtermAddonFitPackageDir = path.dirname(require.resolve('@xterm/addon-fit/package.json'));
+    XTERM_ADDON_FIT_JS_FILE = path.join(xtermAddonFitPackageDir, 'lib', 'addon-fit.js');
+} catch (e) {
+    XTERM_ADDON_FIT_JS_FILE = null;
+}
 const MIME_TYPES = {
     '.css': 'text/css; charset=utf-8',
     '.js': 'application/javascript; charset=utf-8',
@@ -351,9 +376,24 @@ function resolveStaticAsset(name) {
     return fs.existsSync(fullPath) ? fullPath : null;
 }
-function sendStaticAsset(res, assetName) {
-    const filePath = resolveStaticAsset(assetName);
-    if (!filePath) {
+function resolveVendorAsset(name) {
+    if (!isSafeStaticAssetName(name)) {
+        return null;
+    }
+    if (name === 'xterm.js') {
+        return XTERM_JS_FILE && fs.existsSync(XTERM_JS_FILE) ? XTERM_JS_FILE : null;
+    }
+    if (name === 'xterm.css') {
+        return XTERM_CSS_FILE && fs.existsSync(XTERM_CSS_FILE) ? XTERM_CSS_FILE : null;
+    }
+    if (name === 'xterm-addon-fit.js') {
+        return XTERM_ADDON_FIT_JS_FILE && fs.existsSync(XTERM_ADDON_FIT_JS_FILE) ? XTERM_ADDON_FIT_JS_FILE : null;
+    }
+    return null;
+}
+function sendFileAsset(res, filePath) {
+    if (!filePath || !fs.existsSync(filePath)) {
         sendHtml(res, 404, '<h1>404 Not Found</h1>');
         return;
     }
@@ -368,6 +408,14 @@ function sendStaticAsset(res, assetName) {
     res.end(content);
 }
+function sendStaticAsset(res, assetName) {
+    sendFileAsset(res, resolveStaticAsset(assetName));
+}
+function sendVendorAsset(res, assetName) {
+    sendFileAsset(res, resolveVendorAsset(assetName));
+}
 function loadTemplate(name) {
     const filePath = resolveStaticAsset(name);
     if (!filePath) {
@@ -376,6 +424,196 @@ function loadTemplate(name) {
     return fs.readFileSync(filePath, 'utf-8');
 }
+function toPositiveInt(value, fallback) {
+    const parsed = Number.parseInt(value, 10);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+        return fallback;
+    }
+    return parsed;
+}
+function normalizeTerminalSize(cols, rows) {
+    return {
+        cols: Math.max(WEB_TERMINAL_MIN_COLS, toPositiveInt(cols, WEB_TERMINAL_DEFAULT_COLS)),
+        rows: Math.max(WEB_TERMINAL_MIN_ROWS, toPositiveInt(rows, WEB_TERMINAL_DEFAULT_ROWS))
+    };
+}
+function getUpgradeStatusText(statusCode) {
+    if (statusCode === 400) return 'Bad Request';
+    if (statusCode === 401) return 'Unauthorized';
+    if (statusCode === 404) return 'Not Found';
+    if (statusCode === 429) return 'Too Many Requests';
+    if (statusCode === 500) return 'Internal Server Error';
+    return 'Error';
+}
+function sendWebSocketUpgradeError(socket, statusCode, message) {
+    const body = String(message || getUpgradeStatusText(statusCode));
+    const reason = getUpgradeStatusText(statusCode);
+    if (!socket.destroyed) {
+        socket.write(
+            `HTTP/1.1 ${statusCode} ${reason}\r\n` +
+            'Content-Type: text/plain; charset=utf-8\r\n' +
+            'Connection: close\r\n' +
+            `Content-Length: ${Buffer.byteLength(body, 'utf-8')}\r\n` +
+            '\r\n' +
+            body
+        );
+    }
+    socket.destroy();
+}
+function sendTerminalEvent(ws, type, payload = {}) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        return;
+    }
+    ws.send(JSON.stringify({ type, ...payload }));
+}
+function spawnWebTerminalProcess(ctx, containerName, cols, rows) {
+    const terminalBootstrap = [
+        'MANYOYO_WEB_BASHRC="$(mktemp /tmp/manyoyo-web-bashrc.XXXXXX 2>/dev/null || mktemp)"',
+        'cat > "$MANYOYO_WEB_BASHRC" <<\'EOF_MANYOYO_RC\'',
+        'if [ -f /etc/bash.bashrc ]; then',
+        '    . /etc/bash.bashrc',
+        'fi',
+        'if [ -f ~/.bashrc ]; then',
+        '    . ~/.bashrc',
+        'fi',
+        'if [ -n "${MANYOYO_TERM_COLS:-}" ] && [ -n "${MANYOYO_TERM_ROWS:-}" ]; then',
+        '    COLUMNS="$MANYOYO_TERM_COLS"',
+        '    LINES="$MANYOYO_TERM_ROWS"',
+        '    export COLUMNS LINES',
+        '    stty cols "$MANYOYO_TERM_COLS" rows "$MANYOYO_TERM_ROWS" >/dev/null 2>&1 || true',
+        'fi',
+        'EOF_MANYOYO_RC',
+        'chmod 600 "$MANYOYO_WEB_BASHRC" >/dev/null 2>&1 || true',
+        'if command -v script >/dev/null 2>&1; then',
+        '  exec script -qefc "/bin/bash --rcfile $MANYOYO_WEB_BASHRC -i" /dev/null;',
+        'fi;',
+        'if command -v python3 >/dev/null 2>&1; then',
+        '  exec python3 -c \'import os, pty; pty.spawn(["/bin/bash","--rcfile",os.environ.get("MANYOYO_WEB_BASHRC","/dev/null"),"-i"])\';',
+        'fi;',
+        'if command -v python >/dev/null 2>&1; then',
+        '  exec python -c \'import os, pty; pty.spawn(["/bin/bash","--rcfile",os.environ.get("MANYOYO_WEB_BASHRC","/dev/null"),"-i"])\';',
+        'fi;',
+        'echo "[manyoyo] 容器内未找到 script/python，终端将降级为非 TTY 模式" >&2;',
+        'exec /bin/bash --rcfile "$MANYOYO_WEB_BASHRC" -i'
+    ].join('\n');
+    const termValue = process.env.TERM && process.env.TERM !== 'dumb' ? process.env.TERM : 'xterm-256color';
+    const colorTermValue = process.env.COLORTERM || 'truecolor';
+    const dockerExecArgs = [
+        'exec',
+        '-i',
+        '-e', `TERM=${termValue}`,
+        '-e', `COLORTERM=${colorTermValue}`,
+        '-e', `MANYOYO_TERM_COLS=${String(cols)}`,
+        '-e', `MANYOYO_TERM_ROWS=${String(rows)}`,
+        containerName,
+        '/bin/bash',
+        '-lc',
+        terminalBootstrap
+    ];
+    return spawn(ctx.dockerCmd, dockerExecArgs, { stdio: ['pipe', 'pipe', 'pipe'] });
+}
+function bindTerminalWebSocket(ctx, state, ws, containerName, cols, rows) {
+    const sessionId = `${containerName}-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    const ptyProcess = spawnWebTerminalProcess(ctx, containerName, cols, rows);
+    const session = {
+        id: sessionId,
+        containerName,
+        ptyProcess,
+        closing: false
+    };
+    state.terminalSessions.set(sessionId, session);
+    sendTerminalEvent(ws, 'status', {
+        phase: 'ready',
+        sessionId,
+        containerName,
+        cols,
+        rows
+    });
+    const cleanup = () => {
+        if (session.closing) {
+            return;
+        }
+        session.closing = true;
+        state.terminalSessions.delete(sessionId);
+        if (ptyProcess && !ptyProcess.killed) {
+            ptyProcess.kill('SIGTERM');
+            setTimeout(() => {
+                if (!ptyProcess.killed) {
+                    ptyProcess.kill('SIGKILL');
+                }
+            }, WEB_TERMINAL_FORCE_KILL_MS);
+        }
+    };
+    ptyProcess.stdout.on('data', chunk => {
+        sendTerminalEvent(ws, 'output', { data: chunk.toString('utf-8') });
+    });
+    ptyProcess.stderr.on('data', chunk => {
+        sendTerminalEvent(ws, 'output', { data: chunk.toString('utf-8') });
+    });
+    ptyProcess.on('error', err => {
+        sendTerminalEvent(ws, 'error', {
+            error: err && err.message ? err.message : '终端进程启动失败'
+        });
+    });
+    ptyProcess.on('close', (code, signal) => {
+        sendTerminalEvent(ws, 'status', {
+            phase: 'closed',
+            code: typeof code === 'number' ? code : null,
+            signal: signal || null
+        });
+        cleanup();
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.close();
+        }
+    });
+    ws.on('message', raw => {
+        let payload = null;
+        try {
+            payload = JSON.parse(raw.toString('utf-8'));
+        } catch (e) {
+            payload = {
+                type: 'input',
+                data: raw.toString('utf-8')
+            };
+        }
+        if (!payload || typeof payload !== 'object') {
+            return;
+        }
+        if (payload.type === 'input' && typeof payload.data === 'string' && payload.data.length) {
+            ptyProcess.stdin.write(payload.data);
+            return;
+        }
+        if (payload.type === 'resize') {
+            // 当前后端不直接驱动 docker exec 的 TTY 动态 resize，保留事件以便后续扩展。
+            return;
+        }
+        if (payload.type === 'close') {
+            ws.close();
+        }
+    });
+    ws.on('close', cleanup);
+    ws.on('error', cleanup);
+}
 async function handleWebAuthRoutes(req, res, pathname, ctx, state) {
     if (req.method === 'GET' && pathname === '/auth/login') {
         sendHtml(res, 200, loadTemplate('login.html'));
@@ -600,12 +838,28 @@ async function startWebServer(options) {
     const state = {
         webHistoryDir: options.webHistoryDir || path.join(os.homedir(), '.manyoyo', 'web-history'),
-        authSessions: new Map()
+        authSessions: new Map(),
+        terminalSessions: new Map()
     };
     ctx.validateHostPath();
     ensureWebHistoryDir(state.webHistoryDir);
+    const wsServer = new WebSocket.Server({
+        noServer: true,
+        maxPayload: 1024 * 1024
+    });
+    wsServer.on('connection', (ws, req, meta = {}) => {
+        const containerName = meta.containerName;
+        if (!containerName || !ctx.isValidContainerName(containerName)) {
+            ws.close();
+            return;
+        }
+        const { cols, rows } = normalizeTerminalSize(meta.cols, meta.rows);
+        bindTerminalWebSocket(ctx, state, ws, containerName, cols, rows);
+    });
     const server = http.createServer(async (req, res) => {
         try {
             const fallbackHost = `${formatUrlHost(ctx.serverHost)}:${ctx.serverPort}`;
@@ -639,6 +893,17 @@ async function startWebServer(options) {
                 return;
             }
+            const appVendorMatch = pathname.match(/^\/app\/vendor\/([A-Za-z0-9._-]+)$/);
+            if (req.method === 'GET' && appVendorMatch) {
+                const assetName = appVendorMatch[1];
+                if (!(assetName === 'xterm.css' || assetName === 'xterm.js' || assetName === 'xterm-addon-fit.js')) {
+                    sendHtml(res, 404, '<h1>404 Not Found</h1>');
+                    return;
+                }
+                sendVendorAsset(res, assetName);
+                return;
+            }
             if (pathname === '/healthz') {
                 sendJson(res, 200, { ok: true });
                 return;
@@ -662,13 +927,66 @@ async function startWebServer(options) {
         }
     });
+    server.on('upgrade', (req, socket, head) => {
+        const fallbackHost = `${formatUrlHost(ctx.serverHost)}:${ctx.serverPort}`;
+        let url;
+        try {
+            url = new URL(req.url || '/', `http://${req.headers.host || fallbackHost}`);
+        } catch (e) {
+            sendWebSocketUpgradeError(socket, 400, 'Invalid URL');
+            return;
+        }
+        const terminalMatch = url.pathname.match(/^\/api\/sessions\/([^/]+)\/terminal\/ws$/);
+        if (!terminalMatch) {
+            socket.destroy();
+            return;
+        }
+        const authSession = getWebAuthSession(state, req);
+        if (!authSession) {
+            sendWebSocketUpgradeError(socket, 401, 'UNAUTHORIZED');
+            return;
+        }
+        const containerName = decodeSessionName(terminalMatch[1]);
+        if (!ctx.isValidContainerName(containerName)) {
+            sendWebSocketUpgradeError(socket, 400, `containerName 非法: ${containerName}`);
+            return;
+        }
+        if (state.terminalSessions.size >= WEB_TERMINAL_MAX_SESSIONS) {
+            sendWebSocketUpgradeError(socket, 429, 'TERMINAL_LIMIT_REACHED');
+            return;
+        }
+        const { cols, rows } = normalizeTerminalSize(
+            url.searchParams.get('cols'),
+            url.searchParams.get('rows')
+        );
+        ensureWebContainer(ctx, state, containerName)
+            .then(() => {
+                wsServer.handleUpgrade(req, socket, head, ws => {
+                    wsServer.emit('connection', ws, req, {
+                        containerName,
+                        cols,
+                        rows
+                    });
+                });
+            })
+            .catch(e => {
+                sendWebSocketUpgradeError(socket, 500, e && e.message ? e.message : '终端创建失败');
+            });
+    });
     await new Promise((resolve, reject) => {
         server.once('error', reject);
         server.listen(ctx.serverPort, ctx.serverHost, () => {
             const { GREEN, CYAN, YELLOW, NC } = ctx.colors;
             const listenHost = formatUrlHost(ctx.serverHost);
             console.log(`${GREEN}✅ MANYOYO Web 服务已启动: http://${listenHost}:${ctx.serverPort}${NC}`);
-            console.log(`${CYAN}提示: 左侧是 manyoyo 容器会话列表，右侧可发送命令并查看输出。${NC}`);
+            console.log(`${CYAN}提示: 左侧是 manyoyo 容器会话列表，右侧支持命令模式与交互式终端模式。${NC}`);
             if (ctx.serverHost === '0.0.0.0') {
                 console.log(`${CYAN}提示: 当前监听全部网卡，请用本机局域网 IP 访问。${NC}`);
             }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@xcanwin/manyoyo",
-    "version": "4.0.2",
+    "version": "4.0.4",
     "imageVersion": "1.7.4",
     "description": "AI Agent CLI Security Sandbox for Docker and Podman",
     "keywords": [
@@ -53,8 +53,11 @@
         "config.example.json"
     ],
     "dependencies": {
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/xterm": "^6.0.0",
         "commander": "^12.0.0",
-        "json5": "^2.2.3"
+        "json5": "^2.2.3",
+        "ws": "^8.19.0"
     },
     "devDependencies": {
         "jest": "^29.7.0",