@xcanwin/manyoyo 4.1.4 → 4.2.0

package/lib/web/frontend/app.js

@@ -46,6 +46,17 @@
         loadingMessages: false,
         mobileSidebarOpen: false,
         mobileActionsOpen: false,
+        configModalOpen: false,
+        createModalOpen: false,
+        configLoading: false,
+        configSaving: false,
+        createLoading: false,
+        createSubmitting: false,
+        createDefaults: null,
+        createRuns: {},
+        sessionNodeMap: new Map(),
+        sessionRenderMode: 'empty',
+        messageRequestId: 0,
         terminal: {
             term: null,
             fitAddon: null,
@@ -69,6 +80,35 @@
     const headerActions = document.getElementById('headerActions');
     const mobileSidebarClose = document.getElementById('mobileSidebarClose');
     const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+    const openConfigBtn = document.getElementById('openConfigBtn');
+    const openCreateBtn = document.getElementById('openCreateBtn');
+    const configModal = document.getElementById('configModal');
+    const configPath = document.getElementById('configPath');
+    const configEditor = document.getElementById('configEditor');
+    const configError = document.getElementById('configError');
+    const configReloadBtn = document.getElementById('configReloadBtn');
+    const configSaveBtn = document.getElementById('configSaveBtn');
+    const configCancelBtn = document.getElementById('configCancelBtn');
+    const createModal = document.getElementById('createModal');
+    const createForm = document.getElementById('createSessionForm');
+    const createCancelBtn = document.getElementById('createCancelBtn');
+    const createResetBtn = document.getElementById('createResetBtn');
+    const createSubmitBtn = document.getElementById('createSubmitBtn');
+    const createError = document.getElementById('createError');
+    const createRun = document.getElementById('createRun');
+    const createContainerName = document.getElementById('createContainerName');
+    const createHostPath = document.getElementById('createHostPath');
+    const createContainerPath = document.getElementById('createContainerPath');
+    const createImageName = document.getElementById('createImageName');
+    const createImageVersion = document.getElementById('createImageVersion');
+    const createContainerMode = document.getElementById('createContainerMode');
+    const createShellPrefix = document.getElementById('createShellPrefix');
+    const createShell = document.getElementById('createShell');
+    const createShellSuffix = document.getElementById('createShellSuffix');
+    const createYolo = document.getElementById('createYolo');
+    const createEnv = document.getElementById('createEnv');
+    const createEnvFile = document.getElementById('createEnvFile');
+    const createVolumes = document.getElementById('createVolumes');
     const activeTitle = document.getElementById('activeTitle');
     const activeMeta = document.getElementById('activeMeta');
     const modeCommandBtn = document.getElementById('modeCommandBtn');
@@ -79,9 +119,6 @@
     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"]');
     const composer = document.getElementById('composer');
     const commandInput = document.getElementById('commandInput');
     const sendState = document.getElementById('sendState');
@@ -139,6 +176,215 @@
         });
     }
 
+    function setModalVisible(modalNode, visible) {
+        if (!modalNode) return;
+        modalNode.hidden = !visible;
+        document.body.classList.toggle('modal-open', Boolean(visible));
+    }
+
+    function showCreateError(message) {
+        if (!createError) return;
+        const text = String(message || '').trim();
+        if (!text) {
+            createError.hidden = true;
+            createError.textContent = '';
+            return;
+        }
+        createError.hidden = false;
+        createError.textContent = text;
+    }
+
+    function showConfigError(message) {
+        if (!configError) return;
+        const text = String(message || '').trim();
+        if (!text) {
+            configError.hidden = true;
+            configError.textContent = '';
+            return;
+        }
+        configError.hidden = false;
+        configError.textContent = text;
+    }
+
+    function envMapToText(envMap) {
+        if (!envMap || typeof envMap !== 'object') {
+            return '';
+        }
+        return Object.entries(envMap)
+            .map(function (entry) {
+                return entry[0] + '=' + String(entry[1] == null ? '' : entry[1]);
+            })
+            .join('\n');
+    }
+
+    function textToLineArray(text) {
+        return String(text || '')
+            .split('\n')
+            .map(function (line) { return line.trim(); })
+            .filter(Boolean);
+    }
+
+    function textToEnvMap(text) {
+        const envMap = {};
+        const lines = textToLineArray(text);
+        lines.forEach(function (line) {
+            const idx = line.indexOf('=');
+            if (idx <= 0) {
+                throw new Error('env 每行必须是 KEY=VALUE');
+            }
+            const key = line.slice(0, idx).trim();
+            const value = line.slice(idx + 1);
+            if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) {
+                throw new Error('env key 非法: ' + key);
+            }
+            envMap[key] = value;
+        });
+        return envMap;
+    }
+
+    function fillCreateForm(defaults) {
+        const value = defaults && typeof defaults === 'object' ? defaults : {};
+        createContainerName.value = value.containerName || '';
+        createHostPath.value = value.hostPath || '';
+        createContainerPath.value = value.containerPath || '';
+        createImageName.value = value.imageName || '';
+        createImageVersion.value = value.imageVersion || '';
+        createContainerMode.value = value.containerMode || '';
+        createShellPrefix.value = value.shellPrefix || '';
+        createShell.value = value.shell || '';
+        createShellSuffix.value = value.shellSuffix || '';
+        createYolo.value = value.yolo || '';
+        createEnv.value = envMapToText(value.env);
+        createEnvFile.value = Array.isArray(value.envFile) ? value.envFile.join('\n') : '';
+        createVolumes.value = Array.isArray(value.volumes) ? value.volumes.join('\n') : '';
+    }
+
+    function mergeCreateDefaults(baseDefaults, runConfig) {
+        const base = baseDefaults && typeof baseDefaults === 'object' ? baseDefaults : {};
+        const run = runConfig && typeof runConfig === 'object' ? runConfig : {};
+        const merged = {
+            containerName: run.containerName != null ? String(run.containerName) : (base.containerName || ''),
+            hostPath: run.hostPath != null ? String(run.hostPath) : (base.hostPath || ''),
+            containerPath: run.containerPath != null ? String(run.containerPath) : (base.containerPath || ''),
+            imageName: run.imageName != null ? String(run.imageName) : (base.imageName || ''),
+            imageVersion: run.imageVersion != null ? String(run.imageVersion) : (base.imageVersion || ''),
+            containerMode: run.containerMode != null ? String(run.containerMode) : (base.containerMode || ''),
+            shellPrefix: run.shellPrefix != null ? String(run.shellPrefix) : (base.shellPrefix || ''),
+            shell: run.shell != null ? String(run.shell) : (base.shell || ''),
+            shellSuffix: run.shellSuffix != null ? String(run.shellSuffix) : (base.shellSuffix || ''),
+            yolo: run.yolo != null ? String(run.yolo) : (base.yolo || ''),
+            env: {},
+            envFile: [],
+            volumes: []
+        };
+
+        const baseEnv = base.env && typeof base.env === 'object' ? base.env : {};
+        const runEnv = run.env && typeof run.env === 'object' ? run.env : {};
+        merged.env = Object.assign({}, baseEnv, runEnv);
+
+        const baseEnvFile = Array.isArray(base.envFile) ? base.envFile : [];
+        const runEnvFile = Array.isArray(run.envFile) ? run.envFile : [];
+        merged.envFile = baseEnvFile.concat(runEnvFile).map(function (item) {
+            return String(item || '').trim();
+        }).filter(Boolean);
+
+        const baseVolumes = Array.isArray(base.volumes) ? base.volumes : [];
+        const runVolumes = Array.isArray(run.volumes) ? run.volumes : [];
+        merged.volumes = baseVolumes.concat(runVolumes).map(function (item) {
+            return String(item || '').trim();
+        }).filter(Boolean);
+
+        return merged;
+    }
+
+    function normalizeRunProfiles(parsedConfig) {
+        const config = parsedConfig && typeof parsedConfig === 'object' ? parsedConfig : {};
+        if (!config.runs || typeof config.runs !== 'object' || Array.isArray(config.runs)) {
+            return {};
+        }
+        const result = {};
+        Object.entries(config.runs).forEach(function (entry) {
+            const key = String(entry[0] || '').trim();
+            const value = entry[1];
+            if (!key || !value || typeof value !== 'object' || Array.isArray(value)) {
+                return;
+            }
+            result[key] = value;
+        });
+        return result;
+    }
+
+    function renderRunOptions(runs) {
+        if (!createRun) return;
+        const current = createRun.value || '';
+        createRun.innerHTML = '';
+        const placeholder = document.createElement('option');
+        placeholder.value = '';
+        placeholder.textContent = '(不使用 run)';
+        createRun.appendChild(placeholder);
+
+        Object.keys(runs || {}).sort().forEach(function (runName) {
+            const option = document.createElement('option');
+            option.value = runName;
+            option.textContent = runName;
+            createRun.appendChild(option);
+        });
+
+        if (current && runs && Object.prototype.hasOwnProperty.call(runs, current)) {
+            createRun.value = current;
+        } else {
+            createRun.value = '';
+        }
+    }
+
+    function applyCurrentRunDefaults() {
+        const selectedRun = createRun ? String(createRun.value || '').trim() : '';
+        if (!selectedRun) {
+            fillCreateForm(state.createDefaults || {});
+            return;
+        }
+        const runConfig = state.createRuns && state.createRuns[selectedRun] ? state.createRuns[selectedRun] : {};
+        fillCreateForm(mergeCreateDefaults(state.createDefaults || {}, runConfig));
+    }
+
+    function collectCreateOptions() {
+        const options = {
+            containerName: (createContainerName.value || '').trim(),
+            hostPath: (createHostPath.value || '').trim(),
+            containerPath: (createContainerPath.value || '').trim(),
+            imageName: (createImageName.value || '').trim(),
+            imageVersion: (createImageVersion.value || '').trim(),
+            containerMode: (createContainerMode.value || '').trim(),
+            shellPrefix: (createShellPrefix.value || '').trim(),
+            shell: (createShell.value || '').trim(),
+            shellSuffix: (createShellSuffix.value || '').trim(),
+            yolo: (createYolo.value || '').trim(),
+            env: textToEnvMap(createEnv.value),
+            envFile: textToLineArray(createEnvFile.value),
+            volumes: textToLineArray(createVolumes.value)
+        };
+
+        Object.keys(options).forEach(function (key) {
+            if (Array.isArray(options[key])) {
+                if (!options[key].length) {
+                    delete options[key];
+                }
+                return;
+            }
+            if (typeof options[key] === 'object') {
+                if (!options[key] || !Object.keys(options[key]).length) {
+                    delete options[key];
+                }
+                return;
+            }
+            if (!options[key]) {
+                delete options[key];
+            }
+        });
+
+        return options;
+    }
+
     function getActiveSession() {
         if (!state.active) return null;
         return state.sessions.find(function (session) {
@@ -156,19 +402,19 @@
         return `${status.label} · ${messageCount} 条对话 · ${updatedAt}`;
     }
 
-    function buildMessageMeta(message) {
-        const parts = [roleName(message.role)];
-        const timeText = formatDateTime(message.timestamp);
+    function buildMessageMetaLines(message) {
+        const lines = [];
+        const timeText = formatDateTime(message && message.timestamp);
         if (timeText) {
-            parts.push(timeText);
+            lines.push({ className: 'msg-meta-time', text: timeText });
         }
-        if (typeof message.exitCode === 'number') {
-            parts.push(`exit ${message.exitCode}`);
-        }
-        if (message.pending) {
-            parts.push('发送中');
-        }
-        return parts.join(' · ');
+
+        lines.push({
+            className: 'msg-meta-role',
+            text: roleName(message && message.role)
+        });
+
+        return lines;
     }
 
     function writeTerminalLine(text) {
@@ -206,6 +452,30 @@
         };
     }
 
+    function readCssVar(name, fallbackValue) {
+        if (!name || !window.getComputedStyle) {
+            return fallbackValue;
+        }
+        const root = document.documentElement;
+        if (!root) {
+            return fallbackValue;
+        }
+        const value = window.getComputedStyle(root).getPropertyValue(name);
+        if (!value) {
+            return fallbackValue;
+        }
+        const trimmed = value.trim();
+        return trimmed || fallbackValue;
+    }
+
+    function resolveTerminalTheme() {
+        return {
+            background: readCssVar('--terminal-bg', '#11161d'),
+            foreground: readCssVar('--terminal-fg', '#e8edf5'),
+            cursor: readCssVar('--terminal-cursor', '#ffd166')
+        };
+    }
+
     function notifyTerminalResize(force) {
         if (!state.terminal.term) return;
         if (!state.terminal.socket || state.terminal.socket.readyState !== window.WebSocket.OPEN) return;
@@ -272,14 +542,10 @@
         state.terminal.term = new window.Terminal({
             cursorBlink: true,
             convertEol: false,
-            fontFamily: '"IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace',
+            fontFamily: readCssVar('--font-mono', '"IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace'),
             fontSize: 13,
             scrollback: 5000,
-            theme: {
-                background: '#0c131a',
-                foreground: '#dde8f3',
-                cursor: '#6fe7b5'
-            }
+            theme: resolveTerminalTheme()
         });
         state.terminal.fitAddon = new FitAddonCtor();
         state.terminal.term.loadAddon(state.terminal.fitAddon);
@@ -527,7 +793,36 @@
         removeAllBtn.disabled = !state.active || busy;
         sendBtn.disabled = !commandMode || !state.active || busy;
         commandInput.disabled = !commandMode || !state.active || state.sending;
-        createSessionBtn.disabled = state.loadingSessions || state.sending;
+        if (openCreateBtn) {
+            openCreateBtn.disabled = state.createLoading || state.createSubmitting;
+        }
+        if (openConfigBtn) {
+            openConfigBtn.disabled = state.configLoading || state.configSaving;
+        }
+        if (configSaveBtn) {
+            configSaveBtn.disabled = state.configLoading || state.configSaving;
+        }
+        if (configReloadBtn) {
+            configReloadBtn.disabled = state.configLoading || state.configSaving;
+        }
+        if (configCancelBtn) {
+            configCancelBtn.disabled = state.configSaving;
+        }
+        if (createSubmitBtn) {
+            createSubmitBtn.disabled = state.createLoading || state.createSubmitting;
+        }
+        if (createResetBtn) {
+            createResetBtn.disabled = state.createSubmitting;
+        }
+        if (createCancelBtn) {
+            createCancelBtn.disabled = state.createSubmitting;
+        }
+        if (configModal) {
+            configModal.hidden = !state.configModalOpen;
+        }
+        if (createModal) {
+            createModal.hidden = !state.createModalOpen;
+        }
         if (terminalConnectBtn) {
             terminalConnectBtn.disabled = !state.active || busy || state.terminal.connecting || state.terminal.connected;
         }
@@ -569,12 +864,104 @@
             data = {};
         }
         if (!response.ok) {
-            throw new Error(data.error || '请求失败');
+            const errorText = data && data.detail ? `${data.error || '请求失败'}: ${data.detail}` : (data.error || '请求失败');
+            throw new Error(errorText);
         }
         return data;
     }
 
+    async function fetchConfigSnapshot() {
+        return await api('/api/config');
+    }
+
+    async function openConfigModal() {
+        closeCreateModal();
+        state.configLoading = true;
+        showConfigError('');
+        syncUi();
+        try {
+            const config = await fetchConfigSnapshot();
+            if (configPath) {
+                configPath.textContent = config.path || '';
+            }
+            if (configEditor) {
+                configEditor.value = typeof config.raw === 'string' ? config.raw : '';
+            }
+            if (config.parseError) {
+                showConfigError('当前文件存在解析错误：' + config.parseError);
+            }
+            state.configModalOpen = true;
+            setModalVisible(configModal, true);
+        } catch (e) {
+            alert(e.message);
+        } finally {
+            state.configLoading = false;
+            syncUi();
+        }
+    }
+
+    function closeConfigModal() {
+        state.configModalOpen = false;
+        setModalVisible(configModal, false);
+    }
+
+    async function saveConfig() {
+        state.configSaving = true;
+        showConfigError('');
+        syncUi();
+        try {
+            await api('/api/config', {
+                method: 'PUT',
+                body: JSON.stringify({ raw: configEditor ? configEditor.value : '' })
+            });
+            showConfigError('');
+            alert('配置已保存。后续新建会读取最新配置。');
+        } catch (e) {
+            showConfigError(e.message);
+        } finally {
+            state.configSaving = false;
+            syncUi();
+        }
+    }
+
+    async function openCreateModal() {
+        closeConfigModal();
+        state.createLoading = true;
+        showCreateError('');
+        syncUi();
+        try {
+            const config = await fetchConfigSnapshot();
+            state.createDefaults = config.defaults || {};
+            state.createRuns = normalizeRunProfiles(config.parsed || {});
+            renderRunOptions(state.createRuns);
+            applyCurrentRunDefaults();
+            if (config.parseError) {
+                showCreateError('配置文件解析失败，已使用安全默认值。建议先修复配置：' + config.parseError);
+            }
+            state.createModalOpen = true;
+            setModalVisible(createModal, true);
+        } catch (e) {
+            alert(e.message);
+        } finally {
+            state.createLoading = false;
+            syncUi();
+        }
+    }
+
+    function closeCreateModal() {
+        state.createModalOpen = false;
+        setModalVisible(createModal, false);
+        showCreateError('');
+    }
+
+    function resetCreateModal() {
+        applyCurrentRunDefaults();
+        showCreateError('');
+    }
+
     function renderSessionsLoading() {
+        state.sessionNodeMap.clear();
+        state.sessionRenderMode = 'loading';
         sessionList.innerHTML = '';
         for (let i = 0; i < 3; i++) {
             const skeleton = document.createElement('div');
@@ -583,9 +970,114 @@
         }
     }
 
+    function getSessionRenderKey(session) {
+        return [
+            String(session && session.name ? session.name : ''),
+            String(session && session.status ? session.status : ''),
+            String(safeMessageCount(session && session.messageCount)),
+            String(session && session.updatedAt ? session.updatedAt : ''),
+            String(session && session.image ? session.image : '')
+        ].join('|');
+    }
+
+    function renderSessionActiveState() {
+        for (const [name, node] of state.sessionNodeMap.entries()) {
+            node.classList.toggle('active', state.active === name);
+        }
+    }
+
+    function updateSessionRow(row, session, index) {
+        if (!row || !session) return;
+        const status = sessionStatusInfo(session.status);
+        row.style.setProperty('--item-index', String(index));
+        row.classList.toggle('active', state.active === session.name);
+        row.classList.toggle('history-only', status.tone === 'history');
+        if (row.__sessionNameNode) {
+            row.__sessionNameNode.textContent = session.name;
+        }
+        if (row.__statusBadgeNode) {
+            row.__statusBadgeNode.className = `session-status ${status.tone}`;
+            row.__statusBadgeNode.textContent = status.label;
+        }
+        if (row.__messageCountNode) {
+            row.__messageCountNode.textContent = `${safeMessageCount(session.messageCount)} 条`;
+        }
+        if (row.__timeNode) {
+            row.__timeNode.textContent = formatDateTime(session.updatedAt) || '暂无更新';
+        }
+        row.__renderKey = getSessionRenderKey(session);
+    }
+
+    function handleSessionItemClick(sessionName) {
+        if (state.loadingMessages) return;
+        if (!sessionName) return;
+        if (state.active === sessionName) {
+            if (isMobileLayout()) {
+                closeMobileSessionPanel();
+            }
+            return;
+        }
+        if ((state.terminal.connected || state.terminal.connecting) && state.terminal.sessionName && state.terminal.sessionName !== sessionName) {
+            disconnectTerminal('会话切换，终端已断开', true);
+        }
+        state.active = sessionName;
+        if (isMobileLayout()) {
+            closeMobileSessionPanel();
+        }
+        if (state.mode === 'terminal' && ensureTerminalReady()) {
+            renderTerminalIntro();
+            scheduleTerminalFit(false);
+        }
+        renderSessionActiveState();
+        syncUi();
+        loadMessagesForSession(sessionName).catch(function (e) {
+            alert(e.message);
+        });
+    }
+
+    function createSessionRow(session, index) {
+        const status = sessionStatusInfo(session.status);
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'session-item';
+        btn.dataset.sessionName = session.name;
+
+        const sessionName = document.createElement('div');
+        sessionName.className = 'session-name';
+
+        const meta = document.createElement('div');
+        meta.className = 'session-meta';
+
+        const statusBadge = document.createElement('span');
+        statusBadge.className = `session-status ${status.tone}`;
+
+        const messageCount = document.createElement('span');
+        messageCount.className = 'session-count';
+
+        meta.appendChild(statusBadge);
+        meta.appendChild(messageCount);
+
+        const time = document.createElement('div');
+        time.className = 'session-time';
+
+        btn.appendChild(sessionName);
+        btn.appendChild(meta);
+        btn.appendChild(time);
+        btn.__sessionNameNode = sessionName;
+        btn.__statusBadgeNode = statusBadge;
+        btn.__messageCountNode = messageCount;
+        btn.__timeNode = time;
+
+        btn.addEventListener('click', function () {
+            handleSessionItemClick(btn.dataset.sessionName || '');
+        });
+
+        updateSessionRow(btn, session, index);
+        return btn;
+    }
+
     function renderSessions() {
         sessionCount.textContent = state.loadingSessions ? '加载中...' : `${state.sessions.length} 个`;
-        sessionList.innerHTML = '';
 
         if (state.loadingSessions) {
             renderSessionsLoading();
@@ -593,6 +1085,9 @@
         }
 
         if (!state.sessions.length) {
+            state.sessionNodeMap.clear();
+            state.sessionRenderMode = 'empty';
+            sessionList.innerHTML = '';
             const empty = document.createElement('div');
             empty.className = 'empty';
             empty.textContent = '暂无 manyoyo 会话';
@@ -600,60 +1095,49 @@
             return;
         }
 
+        if (state.sessionRenderMode !== 'list') {
+            sessionList.innerHTML = '';
+            state.sessionNodeMap.clear();
+            state.sessionRenderMode = 'list';
+        }
+
+        const nextNameSet = new Set();
         state.sessions.forEach(function (session, index) {
-            const status = sessionStatusInfo(session.status);
-            const btn = document.createElement('button');
-            btn.type = 'button';
-            btn.className = 'session-item' + (state.active === session.name ? ' active' : '');
-            btn.style.setProperty('--item-index', String(index));
-
-            const sessionName = document.createElement('div');
-            sessionName.className = 'session-name';
-            sessionName.textContent = session.name;
-
-            const meta = document.createElement('div');
-            meta.className = 'session-meta';
-
-            const statusBadge = document.createElement('span');
-            statusBadge.className = `session-status ${status.tone}`;
-            statusBadge.textContent = status.label;
-
-            const messageCount = document.createElement('span');
-            messageCount.className = 'session-count';
-            messageCount.textContent = `${safeMessageCount(session.messageCount)} 条`;
-
-            meta.appendChild(statusBadge);
-            meta.appendChild(messageCount);
-
-            const time = document.createElement('div');
-            time.className = 'session-time';
-            time.textContent = formatDateTime(session.updatedAt) || '暂无更新';
-
-            btn.appendChild(sessionName);
-            btn.appendChild(meta);
-            btn.appendChild(time);
-
-            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) {
-                    alert(e.message);
-                });
-            });
-            sessionList.appendChild(btn);
+            nextNameSet.add(session.name);
+            let row = state.sessionNodeMap.get(session.name);
+            if (!row) {
+                row = createSessionRow(session, index);
+                state.sessionNodeMap.set(session.name, row);
+            } else if (row.__renderKey !== getSessionRenderKey(session)) {
+                updateSessionRow(row, session, index);
+            } else {
+                row.style.setProperty('--item-index', String(index));
+            }
+
+            const currentAtIndex = sessionList.children[index];
+            if (currentAtIndex !== row) {
+                sessionList.insertBefore(row, currentAtIndex || null);
+            }
+        });
+
+        const removeNames = [];
+        for (const existingName of state.sessionNodeMap.keys()) {
+            if (!nextNameSet.has(existingName)) {
+                removeNames.push(existingName);
+            }
+        }
+        removeNames.forEach(function (name) {
+            const row = state.sessionNodeMap.get(name);
+            if (row && row.parentNode === sessionList) {
+                sessionList.removeChild(row);
+            }
+            state.sessionNodeMap.delete(name);
         });
+
+        while (sessionList.children.length > state.sessions.length) {
+            sessionList.removeChild(sessionList.lastChild);
+        }
+        renderSessionActiveState();
     }
 
     function renderMessagesLoading() {
@@ -680,6 +1164,12 @@
         messagesNode.style.scrollBehavior = previousBehavior;
     }
 
+    function createLocalMessageId(prefix) {
+        const head = String(prefix || 'local');
+        const tail = Math.random().toString(16).slice(2, 8);
+        return `${head}-${Date.now()}-${tail}`;
+    }
+
     function getMessageRenderKey(msg, index) {
         if (msg && msg.id) {
             return `id:${msg.id}`;
@@ -699,7 +1189,13 @@
 
         const meta = document.createElement('div');
         meta.className = 'msg-meta';
-        meta.textContent = buildMessageMeta(msg);
+        const metaLines = buildMessageMetaLines(msg);
+        metaLines.forEach(function (line) {
+            const lineNode = document.createElement('div');
+            lineNode.className = 'msg-meta-line ' + line.className;
+            lineNode.textContent = line.text;
+            meta.appendChild(lineNode);
+        });
 
         const bubble = document.createElement('div');
         bubble.className = 'bubble';
@@ -710,6 +1206,12 @@
 
         row.appendChild(meta);
         row.appendChild(bubble);
+        if ((msg.role || '') === 'assistant' && typeof msg.exitCode === 'number') {
+            const exitNode = document.createElement('div');
+            exitNode.className = 'msg-exit';
+            exitNode.textContent = `exit ${msg.exitCode}`;
+            row.appendChild(exitNode);
+        }
         return row;
     }
 
@@ -775,35 +1277,44 @@
         }
     }
 
-    async function loadSessions(preferredName) {
-        state.loadingSessions = true;
-        renderSessions();
-        syncUi();
+    function applySessionsSnapshot(rawSessions, preferredName) {
+        state.sessions = Array.isArray(rawSessions) ? rawSessions : [];
 
-        let requestError = null;
-        try {
-            const data = await api('/api/sessions');
-            state.sessions = Array.isArray(data.sessions) ? data.sessions : [];
+        if (typeof preferredName === 'string' && preferredName.trim()) {
+            state.active = preferredName.trim();
+        }
 
-            if (typeof preferredName === 'string') {
-                state.active = preferredName;
-            }
+        if (state.active && !state.sessions.some(function (session) { return session.name === state.active; })) {
+            state.active = '';
+        }
+        if (!state.active && state.sessions.length) {
+            state.active = state.sessions[0].name;
+        }
+        if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
+            disconnectTerminal('会话已变化，终端已断开', true);
+        }
+    }
 
-            if (state.active && !state.sessions.some(function (session) { return session.name === state.active; })) {
-                state.active = '';
-            }
+    async function refreshSessions(options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const withLoading = opts.withLoading !== false;
 
-            if (!state.active && state.sessions.length) {
-                state.active = state.sessions[0].name;
-            }
+        if (withLoading) {
+            state.loadingSessions = true;
+            renderSessions();
+            syncUi();
+        }
 
-            if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
-                disconnectTerminal('会话已变化，终端已断开', true);
-            }
+        let requestError = null;
+        try {
+            const data = await api('/api/sessions');
+            applySessionsSnapshot(data.sessions, opts.preferredName);
         } catch (e) {
             requestError = e;
         } finally {
-            state.loadingSessions = false;
+            if (withLoading) {
+                state.loadingSessions = false;
+            }
             renderSessions();
             syncUi();
         }
@@ -817,64 +1328,212 @@
             scheduleTerminalFit(false);
         }
 
-        await loadMessages();
+        if (opts.reloadMessages) {
+            await loadMessagesForSession(state.active, { silent: false });
+        }
     }
 
-    async function loadMessages() {
-        if (!state.active) {
+    async function loadSessions(preferredName) {
+        await refreshSessions({
+            preferredName: preferredName,
+            withLoading: true,
+            reloadMessages: true
+        });
+    }
+
+    async function refreshSessionsSilent(options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        await refreshSessions({
+            preferredName: opts.preferredName,
+            withLoading: false,
+            reloadMessages: false
+        });
+    }
+
+    async function loadMessagesForSession(sessionName, options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const targetSession = typeof sessionName === 'string' ? sessionName.trim() : '';
+
+        if (!targetSession) {
+            state.messageRequestId += 1;
             state.messages = [];
+            state.loadingMessages = false;
             renderMessages(state.messages);
             syncUi();
             return;
         }
 
-        state.loadingMessages = true;
-        if (!state.messages.length) {
-            renderMessages(state.messages);
+        const requestId = state.messageRequestId + 1;
+        state.messageRequestId = requestId;
+        const silent = opts.silent === true;
+
+        if (!silent) {
+            state.loadingMessages = true;
+            if (!state.messages.length) {
+                renderMessages(state.messages);
+            }
+            syncUi();
         }
-        syncUi();
 
         let requestError = null;
+        let data = null;
         try {
-            const data = await api('/api/sessions/' + encodeURIComponent(state.active) + '/messages');
-            state.messages = Array.isArray(data.messages) ? data.messages : [];
+            data = await api('/api/sessions/' + encodeURIComponent(targetSession) + '/messages');
         } catch (e) {
             requestError = e;
         } finally {
+            if (requestId !== state.messageRequestId) {
+                return;
+            }
             state.loadingMessages = false;
-            renderMessages(state.messages);
-            syncUi();
+            if (!requestError && targetSession === state.active) {
+                state.messages = Array.isArray(data && data.messages) ? data.messages : [];
+            }
+            if (!requestError || targetSession === state.active) {
+                renderMessages(state.messages);
+                syncUi();
+            } else {
+                syncUi();
+            }
         }
 
+        if (requestId !== state.messageRequestId) {
+            return;
+        }
         if (requestError) {
             throw requestError;
         }
     }
 
-    newSessionForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-        if (state.loadingSessions || state.sending) return;
-        const previousText = createSessionBtn.textContent;
-        createSessionBtn.textContent = '创建中...';
-        createSessionBtn.disabled = true;
-        try {
-            const name = (newSessionName.value || '').trim();
-            const data = await api('/api/sessions', {
-                method: 'POST',
-                body: JSON.stringify({ name: name })
-            });
-            newSessionName.value = '';
-            await loadSessions(data.name);
-            if (isMobileLayout()) {
-                closeMobileSessionPanel();
+    async function loadMessages() {
+        await loadMessagesForSession(state.active, { silent: false });
+    }
+
+    function bumpSessionMetaAfterSend(sessionName) {
+        if (!sessionName) return;
+        const session = state.sessions.find(function (item) {
+            return item && item.name === sessionName;
+        });
+        if (!session) return;
+        session.messageCount = safeMessageCount(session.messageCount) + 2;
+        session.updatedAt = new Date().toISOString();
+        renderSessions();
+        syncUi();
+    }
+
+    function confirmPendingUserMessage(sessionName, pendingMessageId) {
+        if (state.active !== sessionName) {
+            return -1;
+        }
+        for (let i = state.messages.length - 1; i >= 0; i -= 1) {
+            const message = state.messages[i];
+            if (!message || message.role !== 'user') {
+                continue;
             }
-        } catch (e) {
-            alert(e.message);
-        } finally {
-            createSessionBtn.textContent = previousText;
-            syncUi();
+            if (!message.pending) {
+                continue;
+            }
+            if (String(message.id || '') !== String(pendingMessageId || '')) {
+                continue;
+            }
+            message.pending = false;
+            return i;
         }
-    });
+        return -1;
+    }
+
+    function appendAssistantMessageLocal(sessionName, result) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        const exitCode = typeof (result && result.exitCode) === 'number' ? result.exitCode : 1;
+        const outputText = String(result && result.output ? result.output : '(无输出)');
+        state.messages.push({
+            id: createLocalMessageId('local-assistant'),
+            role: 'assistant',
+            content: outputText,
+            timestamp: new Date().toISOString(),
+            exitCode: exitCode
+        });
+    }
+
+    if (openConfigBtn) {
+        openConfigBtn.addEventListener('click', function () {
+            openConfigModal();
+        });
+    }
+
+    if (openCreateBtn) {
+        openCreateBtn.addEventListener('click', function () {
+            openCreateModal();
+        });
+    }
+
+    if (configCancelBtn) {
+        configCancelBtn.addEventListener('click', function () {
+            closeConfigModal();
+            syncUi();
+        });
+    }
+
+    if (configReloadBtn) {
+        configReloadBtn.addEventListener('click', function () {
+            openConfigModal();
+        });
+    }
+
+    if (configSaveBtn) {
+        configSaveBtn.addEventListener('click', function () {
+            saveConfig();
+        });
+    }
+
+    if (createCancelBtn) {
+        createCancelBtn.addEventListener('click', function () {
+            closeCreateModal();
+            syncUi();
+        });
+    }
+
+    if (createResetBtn) {
+        createResetBtn.addEventListener('click', function () {
+            resetCreateModal();
+        });
+    }
+
+    if (createRun) {
+        createRun.addEventListener('change', function () {
+            applyCurrentRunDefaults();
+            showCreateError('');
+        });
+    }
+
+    if (createForm) {
+        createForm.addEventListener('submit', async function (event) {
+            event.preventDefault();
+            if (state.createSubmitting || state.createLoading) return;
+            state.createSubmitting = true;
+            showCreateError('');
+            syncUi();
+            try {
+                const createOptions = collectCreateOptions();
+                const data = await api('/api/sessions', {
+                    method: 'POST',
+                    body: JSON.stringify({ createOptions: createOptions })
+                });
+                closeCreateModal();
+                await loadSessions(data.name);
+                if (isMobileLayout()) {
+                    closeMobileSessionPanel();
+                }
+            } catch (e) {
+                showCreateError(e.message);
+            } finally {
+                state.createSubmitting = false;
+                syncUi();
+            }
+        });
+    }
 
     composer.addEventListener('submit', async function (event) {
         event.preventDefault();
@@ -885,13 +1544,14 @@
         if (!command) return;
 
         const submitSession = state.active;
-        const previousMessages = state.messages.slice();
-        state.messages = state.messages.concat([{
+        const pendingMessage = {
+            id: createLocalMessageId('local-user'),
             role: 'user',
             content: command,
             timestamp: new Date().toISOString(),
             pending: true
-        }]);
+        };
+        state.messages.push(pendingMessage);
         renderMessages(state.messages, { stickToBottom: true });
 
         state.sending = true;
@@ -899,14 +1559,32 @@
         try {
             commandInput.value = '';
             commandInput.focus();
-            await api('/api/sessions/' + encodeURIComponent(submitSession) + '/run', {
+            const runResult = await api('/api/sessions/' + encodeURIComponent(submitSession) + '/run', {
                 method: 'POST',
                 body: JSON.stringify({ command: command })
             });
-            await loadSessions(submitSession);
+            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);
+            if (state.active === submitSession) {
+                renderMessages(state.messages, { stickToBottom: true });
+            }
+            bumpSessionMetaAfterSend(submitSession);
+            refreshSessionsSilent({ preferredName: submitSession }).catch(function () {
+                // 静默同步失败不打断当前交互
+            });
         } catch (e) {
             if (state.active === submitSession) {
-                state.messages = previousMessages;
+                state.messages = state.messages.filter(function (message) {
+                    return !(message && message.id === pendingMessage.id);
+                });
                 renderMessages(state.messages, { stickToBottom: true });
             }
             alert(e.message);
@@ -999,7 +1677,33 @@
         });
     }
 
+    if (configModal) {
+        configModal.addEventListener('click', function (event) {
+            if (event.target === configModal && !state.configSaving) {
+                closeConfigModal();
+                syncUi();
+            }
+        });
+    }
+
+    if (createModal) {
+        createModal.addEventListener('click', function (event) {
+            if (event.target === createModal && !state.createSubmitting) {
+                closeCreateModal();
+                syncUi();
+            }
+        });
+    }
+
     window.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' && state.configModalOpen) {
+            closeConfigModal();
+            syncUi();
+        }
+        if (event.key === 'Escape' && state.createModalOpen) {
+            closeCreateModal();
+            syncUi();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }