@xcanwin/manyoyo 5.7.3 → 5.7.6

package/lib/web/frontend/app.js

@@ -63,6 +63,23 @@
         createRuns: {},
         sessionNodeMap: new Map(),
         sessionRenderMode: 'empty',
+        sidebarTreeLoaded: false,
+        sidebarTree: {
+            directories: {},
+            containers: {}
+        },
+        pendingActiveSessionScroll: false,
+        directoryPicker: {
+            open: false,
+            loading: false,
+            mode: '',
+            title: '',
+            tip: '',
+            currentPath: '',
+            basePath: '',
+            entries: [],
+            error: ''
+        },
         messageRequestId: 0,
         agentRun: {
             active: false,
@@ -99,6 +116,7 @@
     const viewDetailBtn = document.getElementById('viewDetailBtn');
     const viewConfigBtn = document.getElementById('viewConfigBtn');
     const viewCheckBtn = document.getElementById('viewCheckBtn');
+    const addAgentBtn = document.getElementById('addAgentBtn');
     const mobileSidebarClose = document.getElementById('mobileSidebarClose');
     const sidebarBackdrop = document.getElementById('sidebarBackdrop');
     const openConfigBtn = document.getElementById('openConfigBtn');
@@ -121,6 +139,8 @@
     const createContainerName = document.getElementById('createContainerName');
     const createHostPath = document.getElementById('createHostPath');
     const createContainerPath = document.getElementById('createContainerPath');
+    const pickHostPathBtn = document.getElementById('pickHostPathBtn');
+    const pickContainerPathBtn = document.getElementById('pickContainerPathBtn');
     const createImageName = document.getElementById('createImageName');
     const createImageVersion = document.getElementById('createImageVersion');
     const createContainerMode = document.getElementById('createContainerMode');
@@ -132,6 +152,15 @@
     const createEnv = document.getElementById('createEnv');
     const createEnvFile = document.getElementById('createEnvFile');
     const createVolumes = document.getElementById('createVolumes');
+    const directoryPickerModal = document.getElementById('directoryPickerModal');
+    const directoryPickerTitle = document.getElementById('directoryPickerTitle');
+    const directoryPickerTip = document.getElementById('directoryPickerTip');
+    const directoryPickerCurrent = document.getElementById('directoryPickerCurrent');
+    const directoryPickerList = document.getElementById('directoryPickerList');
+    const directoryPickerError = document.getElementById('directoryPickerError');
+    const directoryPickerCancelBtn = document.getElementById('directoryPickerCancelBtn');
+    const directoryPickerUpBtn = document.getElementById('directoryPickerUpBtn');
+    const directoryPickerSelectBtn = document.getElementById('directoryPickerSelectBtn');
     const activeTitle = document.getElementById('activeTitle');
     const activeMeta = document.getElementById('activeMeta');
     const activityCommandBtn = document.getElementById('activityCommandBtn');
@@ -183,12 +212,63 @@
     const GEMINI_YOLO_FLAG = '--yolo';
     const CODEX_DANGEROUS_FLAG = '--dangerously-bypass-approvals-and-sandbox';
     const OPENCODE_PERMISSION_KEY = 'OPENCODE_PERMISSION=';
+    const SIDEBAR_TREE_STORAGE_KEY = 'manyoyo.web.sidebarTree.v1';
     const markdownRenderer = window.ManyoyoMarkdown
         && typeof window.ManyoyoMarkdown.shouldRenderMessage === 'function'
         && typeof window.ManyoyoMarkdown.render === 'function'
         ? window.ManyoyoMarkdown
         : null;
 
+    function normalizeBooleanMap(source) {
+        const result = {};
+        if (!source || typeof source !== 'object' || Array.isArray(source)) {
+            return result;
+        }
+        Object.keys(source).forEach(function (key) {
+            if (typeof source[key] === 'boolean') {
+                result[String(key)] = source[key];
+            }
+        });
+        return result;
+    }
+
+    function loadSidebarTreeState() {
+        if (state.sidebarTreeLoaded) {
+            return;
+        }
+        state.sidebarTreeLoaded = true;
+        try {
+            if (!window.localStorage) {
+                return;
+            }
+            const raw = window.localStorage.getItem(SIDEBAR_TREE_STORAGE_KEY);
+            if (!raw) {
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            state.sidebarTree = {
+                directories: normalizeBooleanMap(parsed && parsed.directories),
+                containers: normalizeBooleanMap(parsed && parsed.containers)
+            };
+        } catch (e) {
+            state.sidebarTree = {
+                directories: {},
+                containers: {}
+            };
+        }
+    }
+
+    function persistSidebarTreeState() {
+        try {
+            if (!window.localStorage) {
+                return;
+            }
+            window.localStorage.setItem(SIDEBAR_TREE_STORAGE_KEY, JSON.stringify(state.sidebarTree));
+        } catch (e) {
+            // 忽略浏览器存储异常，避免影响主流程
+        }
+    }
+
     function appendPlainMessageContent(bubble, content) {
         const pre = document.createElement('pre');
         pre.textContent = content == null ? '' : String(content);
@@ -390,6 +470,9 @@
     function roleName(role, message) {
         if (role === 'user') return '我';
         if (role === 'assistant') {
+            if (message && message.streamingReply) {
+                return 'AGENT 实时回复';
+            }
             if (message && message.streamTrace) {
                 return 'AGENT 过程';
             }
@@ -437,6 +520,158 @@
         });
     }
 
+    function getSessionDirectoryPath(session) {
+        return String(session && session.hostPath ? session.hostPath : '').trim() || '未配置目录';
+    }
+
+    function getSessionContainerName(session) {
+        return String(session && session.containerName ? session.containerName : '').trim();
+    }
+
+    function findSessionByName(sessionName) {
+        const target = String(sessionName || '').trim();
+        if (!target) {
+            return null;
+        }
+        return state.sessions.find(function (session) {
+            return session && session.name === target;
+        }) || null;
+    }
+
+    function pruneSidebarTreeState() {
+        loadSidebarTreeState();
+
+        const validDirectories = new Set(state.sessions.map(getSessionDirectoryPath));
+        const validContainers = new Set(state.sessions.map(getSessionContainerName).filter(Boolean));
+        let changed = false;
+
+        Object.keys(state.sidebarTree.directories).forEach(function (key) {
+            if (!validDirectories.has(key)) {
+                delete state.sidebarTree.directories[key];
+                changed = true;
+            }
+        });
+
+        Object.keys(state.sidebarTree.containers).forEach(function (key) {
+            if (!validContainers.has(key)) {
+                delete state.sidebarTree.containers[key];
+                changed = true;
+            }
+        });
+
+        if (changed) {
+            persistSidebarTreeState();
+        }
+    }
+
+    function setSidebarDirectoryExpanded(directoryPath, expanded, options) {
+        const path = String(directoryPath || '').trim();
+        if (!path) {
+            return false;
+        }
+        loadSidebarTreeState();
+        const opts = options && typeof options === 'object' ? options : {};
+        if (state.sidebarTree.directories[path] === expanded) {
+            return false;
+        }
+        state.sidebarTree.directories[path] = expanded;
+        if (opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return true;
+    }
+
+    function setSidebarContainerExpanded(containerName, expanded, options) {
+        const name = String(containerName || '').trim();
+        if (!name) {
+            return false;
+        }
+        loadSidebarTreeState();
+        const opts = options && typeof options === 'object' ? options : {};
+        if (state.sidebarTree.containers[name] === expanded) {
+            return false;
+        }
+        state.sidebarTree.containers[name] = expanded;
+        if (opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return true;
+    }
+
+    function ensureSessionPathExpanded(sessionName, options) {
+        const session = findSessionByName(sessionName);
+        if (!session) {
+            return false;
+        }
+        const opts = options && typeof options === 'object' ? options : {};
+        const directoryPath = getSessionDirectoryPath(session);
+        const containerName = getSessionContainerName(session);
+        const changedDirectory = setSidebarDirectoryExpanded(directoryPath, true, { persist: false });
+        const changedContainer = setSidebarContainerExpanded(containerName, true, { persist: false });
+        if ((changedDirectory || changedContainer) && opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return changedDirectory || changedContainer;
+    }
+
+    function directoryContainsActiveSession(directoryGroup) {
+        const groups = directoryGroup && Array.isArray(directoryGroup.containers) ? directoryGroup.containers : [];
+        return groups.some(function (containerGroup) {
+            return containerContainsActiveSession(containerGroup);
+        });
+    }
+
+    function containerContainsActiveSession(containerGroup) {
+        const sessions = containerGroup && Array.isArray(containerGroup.sessions) ? containerGroup.sessions : [];
+        return sessions.some(function (session) {
+            return session && session.name === state.active;
+        });
+    }
+
+    function isDirectoryExpanded(directoryGroup) {
+        loadSidebarTreeState();
+        const key = String(directoryGroup && directoryGroup.path ? directoryGroup.path : '').trim();
+        if (key && typeof state.sidebarTree.directories[key] === 'boolean') {
+            return state.sidebarTree.directories[key];
+        }
+        return false;
+    }
+
+    function isContainerExpanded(containerGroup) {
+        loadSidebarTreeState();
+        const key = String(containerGroup && containerGroup.containerName ? containerGroup.containerName : '').trim();
+        if (key && typeof state.sidebarTree.containers[key] === 'boolean') {
+            return state.sidebarTree.containers[key];
+        }
+        return false;
+    }
+
+    function normalizeSlashPath(value) {
+        return String(value || '').replace(/\\/g, '/');
+    }
+
+    function isChildPath(basePath, targetPath) {
+        const normalizedBase = normalizeSlashPath(basePath).replace(/\/+$/, '');
+        const normalizedTarget = normalizeSlashPath(targetPath).replace(/\/+$/, '');
+        if (!normalizedBase) {
+            return false;
+        }
+        return normalizedTarget === normalizedBase || normalizedTarget.startsWith(normalizedBase + '/');
+    }
+
+    function buildContainerPathFromHostSelection(baseHostPath, baseContainerPath, selectedHostPath) {
+        const normalizedBaseHost = normalizeSlashPath(baseHostPath).replace(/\/+$/, '');
+        const normalizedContainer = normalizeSlashPath(baseContainerPath).replace(/\/+$/, '') || '/workspace';
+        const normalizedSelected = normalizeSlashPath(selectedHostPath).replace(/\/+$/, '');
+        if (!normalizedBaseHost || !isChildPath(normalizedBaseHost, normalizedSelected)) {
+            return normalizedContainer;
+        }
+        const relative = normalizedSelected === normalizedBaseHost
+            ? ''
+            : normalizedSelected.slice(normalizedBaseHost.length + 1);
+        return relative ? `${normalizedContainer}/${relative}`.replace(/\/+/g, '/') : normalizedContainer;
+    }
+
     function setModalVisible(modalNode, visible) {
         if (!modalNode) return;
         modalNode.hidden = !visible;
@@ -467,6 +702,18 @@
         configError.textContent = text;
     }
 
+    function showDirectoryPickerError(message) {
+        if (!directoryPickerError) return;
+        const text = String(message || '').trim();
+        if (!text) {
+            directoryPickerError.hidden = true;
+            directoryPickerError.textContent = '';
+            return;
+        }
+        directoryPickerError.hidden = false;
+        directoryPickerError.textContent = text;
+    }
+
     function envMapToText(envMap) {
         if (!envMap || typeof envMap !== 'object') {
             return '';
@@ -794,7 +1041,8 @@
         const status = sessionStatusInfo(session.status);
         const messageCount = safeMessageCount(session.messageCount);
         const updatedAt = formatDateTime(session.updatedAt) || '暂无更新';
-        return `${status.label} · ${messageCount} 条对话 · ${updatedAt}`;
+        const containerName = session.containerName || '未绑定容器';
+        return `${containerName} · ${status.label} · ${messageCount} 条对话 · ${updatedAt}`;
     }
 
     function buildMessageMetaLines(message) {
@@ -1309,7 +1557,8 @@
         if (detailSummary) {
             detailSummary.innerHTML = '';
             renderKeyValueCard(detailSummary, '会话概览', [
-                { label: '会话', value: detail.name || state.active },
+                { label: 'AGENT', value: detail.agentName || detail.name || state.active },
+                { label: '容器', value: detail.containerName || '—' },
                 { label: '状态', value: status.label, tone: status.tone },
                 { label: '镜像', value: detail.image || applied.imageName || '—' },
                 { label: '最近更新', value: updatedText },
@@ -1332,7 +1581,8 @@
         if (configSummary) {
             configSummary.innerHTML = '';
             renderKeyValueCard(configSummary, '基础配置', [
-                { label: 'containerName', value: applied.containerName || detail.name || state.active },
+                { label: 'AGENT', value: detail.agentName || '—' },
+                { label: 'containerName', value: applied.containerName || detail.containerName || '—' },
                 { label: 'imageName', value: applied.imageName || detail.image || '—' },
                 { label: 'imageVersion', value: applied.imageVersion || '—' },
                 { label: 'containerMode', value: applied.containerMode || 'default' }
@@ -1406,8 +1656,9 @@
                 commandInput.value = '';
             }
         } else {
-            activeTitle.textContent = state.active;
-            activeMeta.textContent = buildActiveMeta(getActiveSession());
+            const activeSession = getActiveSession();
+            activeTitle.textContent = activeSession && activeSession.agentName ? activeSession.agentName : state.active;
+            activeMeta.textContent = buildActiveMeta(activeSession);
         }
 
         const activityTab = state.activeTab === 'activity';
@@ -1460,6 +1711,9 @@
         const activeAgentRunning = isAgentRunActiveForSession(state.active);
         const busy = state.loadingSessions || state.loadingMessages || state.sending;
         refreshBtn.disabled = busy;
+        if (addAgentBtn) {
+            addAgentBtn.disabled = !state.active || busy;
+        }
         removeBtn.disabled = !state.active || busy;
         removeAllBtn.disabled = !state.active || busy;
         sendBtn.disabled = !activityTab || !state.active || busy || (agentMode && !agentEnabled);
@@ -1522,6 +1776,13 @@
         if (createModal) {
             createModal.hidden = !state.createModalOpen;
         }
+        if (directoryPickerModal) {
+            directoryPickerModal.hidden = !state.directoryPicker.open;
+        }
+        document.body.classList.toggle(
+            'modal-open',
+            state.configModalOpen || state.createModalOpen || state.directoryPicker.open
+        );
         if (!state.active) {
             sendState.textContent = '未选择会话';
         } else if (agentMode && !agentEnabled) {
@@ -1718,6 +1979,7 @@
     function closeCreateModal() {
         state.createModalOpen = false;
         setModalVisible(createModal, false);
+        closeDirectoryPicker();
         showCreateError('');
     }
 
@@ -1726,57 +1988,159 @@
         showCreateError('');
     }
 
-    function renderSessionsLoading() {
-        state.sessionNodeMap.clear();
-        state.sessionRenderMode = 'loading';
-        sessionList.innerHTML = '';
-        for (let i = 0; i < 3; i++) {
-            const skeleton = document.createElement('div');
-            skeleton.className = 'skeleton session';
-            sessionList.appendChild(skeleton);
+    function renderDirectoryPicker() {
+        if (!directoryPickerModal) return;
+        const picker = state.directoryPicker;
+        setModalVisible(directoryPickerModal, picker.open);
+        if (directoryPickerTitle) {
+            directoryPickerTitle.textContent = picker.title || '选择目录';
+        }
+        if (directoryPickerTip) {
+            directoryPickerTip.textContent = picker.tip || '';
+        }
+        if (directoryPickerCurrent) {
+            directoryPickerCurrent.textContent = picker.currentPath || '未选择目录';
+        }
+        showDirectoryPickerError(picker.error);
+        if (directoryPickerUpBtn) {
+            directoryPickerUpBtn.disabled = picker.loading || !picker.currentPath || !picker.parentPath;
+        }
+        if (directoryPickerSelectBtn) {
+            directoryPickerSelectBtn.disabled = picker.loading || !picker.currentPath;
+        }
+        if (!directoryPickerList) {
+            return;
+        }
+        directoryPickerList.innerHTML = '';
+        if (picker.loading) {
+            const loading = document.createElement('div');
+            loading.className = 'empty';
+            loading.textContent = '目录加载中...';
+            directoryPickerList.appendChild(loading);
+            return;
         }
+        if (!picker.entries.length) {
+            const empty = document.createElement('div');
+            empty.className = 'empty';
+            empty.textContent = '当前目录下没有可选子目录';
+            directoryPickerList.appendChild(empty);
+            return;
+        }
+        picker.entries.forEach(function (entry) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'dir-picker-item secondary';
+            btn.textContent = entry.name;
+            btn.addEventListener('click', function () {
+                loadDirectoryPicker(entry.path);
+            });
+            directoryPickerList.appendChild(btn);
+        });
     }
 
-    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('|');
+    async function loadDirectoryPicker(targetPath) {
+        const picker = state.directoryPicker;
+        picker.loading = true;
+        picker.error = '';
+        if (targetPath) {
+            picker.currentPath = targetPath;
+        }
+        renderDirectoryPicker();
+        try {
+            const params = new URLSearchParams();
+            params.set('path', picker.currentPath || '/');
+            if (picker.basePath) {
+                params.set('basePath', picker.basePath);
+            }
+            const data = await api('/api/fs/directories?' + params.toString());
+            picker.currentPath = data.currentPath || picker.currentPath;
+            picker.basePath = data.basePath || picker.basePath || '';
+            picker.parentPath = data.parentPath || '';
+            picker.entries = Array.isArray(data.entries) ? data.entries : [];
+        } catch (e) {
+            picker.error = e && e.message ? e.message : '目录加载失败';
+            picker.entries = [];
+        } finally {
+            picker.loading = false;
+            renderDirectoryPicker();
+        }
     }
 
-    function renderSessionActiveState() {
-        for (const [name, node] of state.sessionNodeMap.entries()) {
-            node.classList.toggle('active', state.active === name);
-        }
+    function closeDirectoryPicker() {
+        state.directoryPicker.open = false;
+        state.directoryPicker.loading = false;
+        state.directoryPicker.mode = '';
+        state.directoryPicker.title = '';
+        state.directoryPicker.tip = '';
+        state.directoryPicker.currentPath = '';
+        state.directoryPicker.basePath = '';
+        state.directoryPicker.parentPath = '';
+        state.directoryPicker.entries = [];
+        state.directoryPicker.error = '';
+        renderDirectoryPicker();
     }
 
-    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');
-        row.classList.toggle('status-running', status.tone === 'running');
-        row.classList.toggle('status-stopped', status.tone === 'stopped');
-        row.classList.toggle('status-history', status.tone === 'history');
-        row.classList.toggle('status-unknown', status.tone === 'unknown');
-        if (row.__sessionNameNode) {
-            row.__sessionNameNode.textContent = session.name;
-        }
-        if (row.__statusBadgeNode) {
-            row.__statusBadgeNode.className = `session-status ${status.tone}`;
-            row.__statusBadgeNode.textContent = status.label;
+    function applyPickedDirectory() {
+        const picker = state.directoryPicker;
+        if (!picker.currentPath) {
+            return;
         }
-        if (row.__messageCountNode) {
-            row.__messageCountNode.textContent = `${safeMessageCount(session.messageCount)} 条`;
+        if (picker.mode === 'host') {
+            createHostPath.value = picker.currentPath;
+            if (!(createContainerPath.value || '').trim()) {
+                createContainerPath.value = '/workspace';
+            }
+        } else if (picker.mode === 'container') {
+            const mapped = buildContainerPathFromHostSelection(
+                picker.basePath,
+                (createContainerPath.value || '').trim() || '/workspace',
+                picker.currentPath
+            );
+            createContainerPath.value = mapped;
+        }
+        closeDirectoryPicker();
+    }
+
+    function openDirectoryPicker(mode) {
+        const picker = state.directoryPicker;
+        picker.open = true;
+        picker.loading = false;
+        picker.error = '';
+        picker.entries = [];
+        picker.parentPath = '';
+        if (mode === 'container') {
+            const baseHostPath = (createHostPath.value || '').trim();
+            if (!baseHostPath) {
+                showCreateError('请先选择 hostPath，再选择 containerPath。');
+                picker.open = false;
+                renderDirectoryPicker();
+                return;
+            }
+            picker.mode = 'container';
+            picker.title = '选择 containerPath 对应目录';
+            picker.tip = '从 hostPath 下选择子目录，结果会映射到容器路径。';
+            picker.basePath = baseHostPath;
+            picker.currentPath = baseHostPath;
+        } else {
+            picker.mode = 'host';
+            picker.title = '选择 hostPath';
+            picker.tip = '浏览宿主机目录，选中后会回填 create 表单。';
+            picker.basePath = '';
+            picker.currentPath = (createHostPath.value || '').trim() || '/';
         }
-        if (row.__timeNode) {
-            row.__timeNode.textContent = formatDateTime(session.updatedAt) || '暂无更新';
+        renderDirectoryPicker();
+        loadDirectoryPicker(picker.currentPath);
+    }
+
+    function renderSessionsLoading() {
+        state.sessionNodeMap.clear();
+        state.sessionRenderMode = 'loading';
+        sessionList.innerHTML = '';
+        for (let i = 0; i < 3; i++) {
+            const skeleton = document.createElement('div');
+            skeleton.className = 'skeleton session';
+            sessionList.appendChild(skeleton);
         }
-        row.__renderKey = getSessionRenderKey(session);
     }
 
     function handleSessionItemClick(sessionName) {
@@ -1792,6 +2156,7 @@
             disconnectTerminal('会话切换，终端已断开', true);
         }
         state.active = sessionName;
+        ensureSessionPathExpanded(sessionName);
         state.sessionDetail = null;
         state.sessionDetailError = '';
         if (isMobileLayout()) {
@@ -1807,7 +2172,7 @@
                 }
             }
         }
-        renderSessionActiveState();
+        renderSessions();
         syncUi();
         Promise.all([
             loadMessagesForSession(sessionName),
@@ -1817,49 +2182,187 @@
         });
     }
 
-    function createSessionRow(session, index) {
+    async function createAgentSession(containerName) {
+        const targetContainer = String(containerName || '').trim();
+        if (!targetContainer) {
+            return;
+        }
+        try {
+            const data = await api('/api/sessions/' + encodeURIComponent(targetContainer) + '/agents', {
+                method: 'POST',
+                body: JSON.stringify({})
+            });
+            state.activeTab = 'activity';
+            state.mode = 'agent';
+            await loadSessions(data.name);
+            if (isMobileLayout()) {
+                closeMobileSessionPanel();
+            }
+        } catch (e) {
+            alert(e.message);
+        }
+    }
+
+    function groupSessionsByDirectory(sessions) {
+        const groups = new Map();
+        (Array.isArray(sessions) ? sessions : []).forEach(function (session) {
+            const directoryPath = String(session && session.hostPath ? session.hostPath : '').trim() || '未配置目录';
+            if (!groups.has(directoryPath)) {
+                groups.set(directoryPath, {
+                    path: directoryPath,
+                    updatedAt: session && session.updatedAt ? session.updatedAt : '',
+                    containers: new Map()
+                });
+            }
+            const directoryGroup = groups.get(directoryPath);
+            if (session && session.updatedAt && (!directoryGroup.updatedAt || new Date(session.updatedAt).getTime() > new Date(directoryGroup.updatedAt).getTime())) {
+                directoryGroup.updatedAt = session.updatedAt;
+            }
+
+            const containerName = String(session && session.containerName ? session.containerName : '');
+            if (!directoryGroup.containers.has(containerName)) {
+                directoryGroup.containers.set(containerName, {
+                    containerName: containerName,
+                    status: session && session.status ? session.status : 'history',
+                    image: session && session.image ? session.image : '',
+                    updatedAt: session && session.updatedAt ? session.updatedAt : '',
+                    sessions: []
+                });
+            }
+            const containerGroup = directoryGroup.containers.get(containerName);
+            containerGroup.sessions.push(session);
+            if (session && session.updatedAt && (!containerGroup.updatedAt || new Date(session.updatedAt).getTime() > new Date(containerGroup.updatedAt).getTime())) {
+                containerGroup.updatedAt = session.updatedAt;
+            }
+        });
+        return Array.from(groups.values()).map(function (group) {
+            group.containers = Array.from(group.containers.values()).sort(function (a, b) {
+                const timeA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+                const timeB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+                return timeB - timeA;
+            });
+            group.containers.forEach(function (containerGroup) {
+                containerGroup.sessions.sort(function (a, b) {
+                    const timeA = a && a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+                    const timeB = b && b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+                    return timeB - timeA;
+                });
+            });
+            return group;
+        }).sort(function (a, b) {
+            const timeA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+            const timeB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+            return timeB - timeA;
+        });
+    }
+
+    function createTreeMetaText(parts) {
+        return (parts || []).filter(Boolean).join(' · ');
+    }
+
+    function createTreeToggle(options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `tree-toggle ${opts.className || ''}`.trim();
+        button.setAttribute('aria-expanded', opts.expanded ? 'true' : 'false');
+
+        const main = document.createElement('div');
+        main.className = 'tree-toggle-main';
+
+        const kicker = document.createElement('div');
+        kicker.className = opts.kickerClassName || 'workbench-group-kicker';
+        kicker.textContent = opts.kicker || '';
+        main.appendChild(kicker);
+
+        const title = document.createElement('div');
+        title.className = opts.titleClassName || 'workbench-group-title';
+        title.textContent = opts.title || '';
+        main.appendChild(title);
+
+        const metaText = createTreeMetaText(opts.metaParts);
+        if (metaText) {
+            const meta = document.createElement('div');
+            meta.className = 'tree-toggle-meta';
+            meta.textContent = metaText;
+            main.appendChild(meta);
+        }
+
+        const caret = document.createElement('span');
+        caret.className = 'tree-toggle-caret';
+        caret.setAttribute('aria-hidden', 'true');
+        caret.textContent = '›';
+
+        button.appendChild(main);
+        button.appendChild(caret);
+
+        if (typeof opts.onClick === 'function') {
+            button.addEventListener('click', opts.onClick);
+        }
+
+        return button;
+    }
+
+    function createAgentRow(session, index) {
         const status = sessionStatusInfo(session.status);
         const btn = document.createElement('button');
         btn.type = 'button';
-        btn.className = 'session-item';
+        btn.className = 'agent-item';
         btn.dataset.sessionName = session.name;
+        btn.style.setProperty('--item-index', String(index));
+        btn.classList.toggle('active', state.active === session.name);
 
         const sessionName = document.createElement('div');
-        sessionName.className = 'session-name';
+        sessionName.className = 'agent-name';
+        sessionName.textContent = session.agentName || session.name;
 
         const meta = document.createElement('div');
-        meta.className = 'session-meta';
+        meta.className = 'agent-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.className = 'agent-time';
+        time.textContent = formatDateTime(session.updatedAt) || '暂无更新';
 
         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 scrollActiveSessionIntoView() {
+        if (!state.pendingActiveSessionScroll || !state.active) {
+            return;
+        }
+        state.pendingActiveSessionScroll = false;
+        const targetNode = state.sessionNodeMap.get(state.active);
+        if (targetNode && typeof targetNode.scrollIntoView === 'function') {
+            targetNode.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }
+
     function renderSessions() {
-        sessionCount.textContent = state.loadingSessions ? '加载中...' : `${state.sessions.length} 个`;
+        const containerCount = new Set(state.sessions.map(function (session) {
+            return session && session.containerName ? session.containerName : '';
+        }).filter(Boolean)).size;
+        sessionCount.textContent = state.loadingSessions
+            ? '加载中...'
+            : `${state.sessions.length} 个 AGENT / ${containerCount} 个容器`;
 
         if (state.loadingSessions) {
             renderSessionsLoading();
@@ -1877,49 +2380,104 @@
             return;
         }
 
-        if (state.sessionRenderMode !== 'list') {
-            sessionList.innerHTML = '';
-            state.sessionNodeMap.clear();
-            state.sessionRenderMode = 'list';
-        }
-
-        const nextNameSet = new Set();
-        state.sessions.forEach(function (session, index) {
-            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));
-            }
+        sessionList.innerHTML = '';
+        state.sessionNodeMap.clear();
+        state.sessionRenderMode = 'tree';
+
+        const grouped = groupSessionsByDirectory(state.sessions);
+        let itemIndex = 0;
+
+        grouped.forEach(function (directoryGroup) {
+            const directoryExpanded = isDirectoryExpanded(directoryGroup);
+            const directoryHasActive = directoryContainsActiveSession(directoryGroup);
+            const group = document.createElement('section');
+            group.className = 'workbench-group';
+            group.classList.toggle('has-active', directoryHasActive);
+
+            const groupHead = createTreeToggle({
+                className: 'workbench-group-head',
+                kickerClassName: 'workbench-group-kicker',
+                titleClassName: 'workbench-group-title',
+                kicker: '目录',
+                title: directoryGroup.path,
+                expanded: directoryExpanded,
+                metaParts: [
+                    `${directoryGroup.containers.length} 个容器`,
+                    `${directoryGroup.containers.reduce(function (count, containerGroup) {
+                        return count + containerGroup.sessions.length;
+                    }, 0)} 个AGENT`,
+                    formatDateTime(directoryGroup.updatedAt) || '暂无更新'
+                ],
+                onClick: function () {
+                    setSidebarDirectoryExpanded(directoryGroup.path, !directoryExpanded);
+                    renderSessions();
+                }
+            });
+            group.appendChild(groupHead);
+
+            const containerStack = document.createElement('div');
+            containerStack.className = 'container-stack workbench-group-body';
+            containerStack.hidden = !directoryExpanded;
+
+            directoryGroup.containers.forEach(function (containerGroup) {
+                const containerExpanded = isContainerExpanded(containerGroup);
+                const containerHasActive = containerContainsActiveSession(containerGroup);
+                const status = sessionStatusInfo(containerGroup.status);
+                const containerCard = document.createElement('section');
+                containerCard.className = 'container-card';
+                containerCard.classList.toggle('has-active', containerHasActive);
+
+                const containerHead = document.createElement('div');
+                containerHead.className = 'container-card-head';
+
+                const containerInfo = createTreeToggle({
+                    className: 'container-toggle',
+                    kickerClassName: 'container-card-kicker',
+                    titleClassName: 'container-card-title',
+                    kicker: '容器',
+                    title: containerGroup.containerName,
+                    expanded: containerExpanded,
+                    metaParts: [
+                        status.label,
+                        `${containerGroup.sessions.length} 个AGENT`,
+                        formatDateTime(containerGroup.updatedAt) || '暂无更新'
+                    ],
+                    onClick: function () {
+                        setSidebarContainerExpanded(containerGroup.containerName, !containerExpanded);
+                        renderSessions();
+                    }
+                });
 
-            const currentAtIndex = sessionList.children[index];
-            if (currentAtIndex !== row) {
-                sessionList.insertBefore(row, currentAtIndex || null);
-            }
-        });
+                const addAgentBtn = document.createElement('button');
+                addAgentBtn.type = 'button';
+                addAgentBtn.className = 'secondary add-agent-btn';
+                addAgentBtn.textContent = '新建AGENT';
+                addAgentBtn.addEventListener('click', function () {
+                    createAgentSession(containerGroup.containerName);
+                });
 
-        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);
+                containerHead.appendChild(containerInfo);
+                containerHead.appendChild(addAgentBtn);
+                containerCard.appendChild(containerHead);
+
+                const agentList = document.createElement('div');
+                agentList.className = 'agent-list';
+                agentList.hidden = !containerExpanded;
+                containerGroup.sessions.forEach(function (session) {
+                    const row = createAgentRow(session, itemIndex);
+                    state.sessionNodeMap.set(session.name, row);
+                    agentList.appendChild(row);
+                    itemIndex += 1;
+                });
+                containerCard.appendChild(agentList);
+                containerStack.appendChild(containerCard);
+            });
+
+            group.appendChild(containerStack);
+            sessionList.appendChild(group);
         });
 
-        while (sessionList.children.length > state.sessions.length) {
-            sessionList.removeChild(sessionList.lastChild);
-        }
-        renderSessionActiveState();
+        scrollActiveSessionIntoView();
     }
 
     function renderMessagesLoading() {
@@ -1953,6 +2511,11 @@
     }
 
     function getMessageRenderKey(msg, index) {
+        if (msg && msg.id && msg.streamingReply) {
+            const content = msg.content ? String(msg.content) : '';
+            const timestamp = msg.timestamp ? String(msg.timestamp) : '';
+            return `id:${msg.id}|streaming|${timestamp}|${content}`;
+        }
         if (msg && msg.id && msg.streamTrace) {
             const content = msg.content ? String(msg.content) : '';
             const timestamp = msg.timestamp ? String(msg.timestamp) : '';
@@ -2004,14 +2567,39 @@
         const bubble = document.createElement('div');
         bubble.className = 'bubble';
 
+        const isStreamingReply = Boolean(msg && msg.streamingReply);
         const shouldRenderStructuredTrace = Boolean(
             msg
             && msg.streamTrace
             && Array.isArray(msg.traceEvents)
             && msg.traceEvents.length
         );
-        const shouldRenderMarkdown = Boolean(!msg.streamTrace && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
-        if (shouldRenderStructuredTrace) {
+        const shouldRenderMarkdown = Boolean(!msg.streamTrace && !msg.streamingReply && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
+        if (isStreamingReply) {
+            bubble.classList.add('streaming-reply');
+            var replyContent = String(msg.content || '');
+            if (replyContent && markdownRenderer && typeof markdownRenderer.render === 'function') {
+                var mdNode = document.createElement('div');
+                mdNode.className = 'md-content';
+                var rendered = '';
+                try {
+                    rendered = String(markdownRenderer.render(replyContent) || '');
+                } catch (e) {
+                    rendered = '';
+                }
+                if (rendered) {
+                    mdNode.innerHTML = rendered;
+                    bubble.appendChild(mdNode);
+                } else {
+                    appendPlainMessageContent(bubble, replyContent);
+                }
+            } else {
+                appendPlainMessageContent(bubble, replyContent);
+            }
+            var cursor = document.createElement('span');
+            cursor.className = 'streaming-cursor';
+            bubble.appendChild(cursor);
+        } else if (shouldRenderStructuredTrace) {
             appendStructuredTraceContent(bubble, msg);
         } else if (shouldRenderMarkdown) {
             const markdownNode = document.createElement('div');
@@ -2102,7 +2690,9 @@
     }
 
     function applySessionsSnapshot(rawSessions, preferredName) {
+        const previousActive = state.active;
         state.sessions = Array.isArray(rawSessions) ? rawSessions : [];
+        pruneSidebarTreeState();
 
         if (typeof preferredName === 'string' && preferredName.trim()) {
             state.active = preferredName.trim();
@@ -2116,6 +2706,10 @@
         if (!state.active && state.sessions.length) {
             state.active = state.sessions[0].name;
         }
+        if (state.active && state.active !== previousActive) {
+            ensureSessionPathExpanded(state.active);
+            state.pendingActiveSessionScroll = true;
+        }
         if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
             disconnectTerminal('会话已变化，终端已断开', true);
         }
@@ -2375,11 +2969,55 @@
         });
     }
 
+    function appendStreamingReplyLocal(sessionName) {
+        var replyMessage = {
+            id: createLocalMessageId('local-streaming-reply'),
+            role: 'assistant',
+            content: '',
+            timestamp: new Date().toISOString(),
+            mode: 'agent',
+            streamingReply: true
+        };
+        if (state.active === sessionName) {
+            state.messages.push(replyMessage);
+        }
+        return replyMessage.id;
+    }
+
+    function updateStreamingReplyLocal(sessionName, replyMessageId, content) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        for (var i = state.messages.length - 1; i >= 0; i -= 1) {
+            var message = state.messages[i];
+            if (!message || String(message.id || '') !== String(replyMessageId || '')) {
+                continue;
+            }
+            message.content = String(content || '');
+            message.timestamp = new Date().toISOString();
+            return;
+        }
+    }
+
+    function removeStreamingReplyLocal(sessionName, replyMessageId) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        for (var i = state.messages.length - 1; i >= 0; i -= 1) {
+            var message = state.messages[i];
+            if (message && String(message.id || '') === String(replyMessageId || '') && message.streamingReply) {
+                state.messages.splice(i, 1);
+                return;
+            }
+        }
+    }
+
     async function sendAgentPromptStream(sessionName, inputText, pendingMessage) {
         const traceMessageId = appendAgentTraceMessageLocal(sessionName);
         const traceLines = ['[执行过程]', '等待 Agent 启动…'];
         let finalResult = null;
         let streamError = null;
+        let streamingReplyId = null;
 
         state.agentRun.active = true;
         state.agentRun.sessionName = sessionName;
@@ -2429,6 +3067,20 @@
                         pushTraceLine(event.text || '', event.traceEvent || null);
                         return;
                     }
+                    if (event.type === 'content_delta') {
+                        var content = String(event.content || '').trim();
+                        if (!content) {
+                            return;
+                        }
+                        if (!streamingReplyId) {
+                            streamingReplyId = appendStreamingReplyLocal(sessionName);
+                        }
+                        updateStreamingReplyLocal(sessionName, streamingReplyId, content);
+                        if (state.active === sessionName) {
+                            renderMessages(state.messages, { stickToBottom: true });
+                        }
+                        return;
+                    }
                     if (event.type === 'result') {
                         finalResult = event;
                         if (event.interrupted) {
@@ -2448,6 +3100,9 @@
                 streamError = e;
             }
         } finally {
+            if (streamingReplyId) {
+                removeStreamingReplyLocal(sessionName, streamingReplyId);
+            }
             const pendingIndex = confirmPendingUserMessage(sessionName, pendingMessage.id);
             if (pendingIndex >= 0 && pendingIndex < state.messageRenderKeys.length) {
                 if (pendingIndex < messagesNode.children.length) {
@@ -2522,6 +3177,38 @@
         });
     }
 
+    if (pickHostPathBtn) {
+        pickHostPathBtn.addEventListener('click', function () {
+            openDirectoryPicker('host');
+        });
+    }
+
+    if (pickContainerPathBtn) {
+        pickContainerPathBtn.addEventListener('click', function () {
+            openDirectoryPicker('container');
+        });
+    }
+
+    if (directoryPickerCancelBtn) {
+        directoryPickerCancelBtn.addEventListener('click', function () {
+            closeDirectoryPicker();
+        });
+    }
+
+    if (directoryPickerUpBtn) {
+        directoryPickerUpBtn.addEventListener('click', function () {
+            if (state.directoryPicker.parentPath) {
+                loadDirectoryPicker(state.directoryPicker.parentPath);
+            }
+        });
+    }
+
+    if (directoryPickerSelectBtn) {
+        directoryPickerSelectBtn.addEventListener('click', function () {
+            applyPickedDirectory();
+        });
+    }
+
     if (createRun) {
         createRun.addEventListener('change', function () {
             applyCurrentRunDefaults();
@@ -2804,6 +3491,18 @@
         });
     }
 
+    if (addAgentBtn) {
+        addAgentBtn.addEventListener('click', function () {
+            const activeSession = getActiveSession();
+            const targetContainer = activeSession ? getSessionContainerName(activeSession) : '';
+            if (!targetContainer) {
+                return;
+            }
+            closeMobileActionsMenu();
+            createAgentSession(targetContainer);
+        });
+    }
+
     if (configModal) {
         configModal.addEventListener('click', function (event) {
             if (event.target === configModal && !state.configSaving) {
@@ -2822,6 +3521,14 @@
         });
     }
 
+    if (directoryPickerModal) {
+        directoryPickerModal.addEventListener('click', function (event) {
+            if (event.target === directoryPickerModal && !state.directoryPicker.loading) {
+                closeDirectoryPicker();
+            }
+        });
+    }
+
     window.addEventListener('keydown', function (event) {
         if (event.key === 'Escape' && state.configModalOpen) {
             closeConfigModal();
@@ -2831,6 +3538,9 @@
             closeCreateModal();
             syncUi();
         }
+        if (event.key === 'Escape' && state.directoryPicker.open) {
+            closeDirectoryPicker();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }
@@ -2877,7 +3587,9 @@
     removeBtn.addEventListener('click', async function () {
         if (!state.active) return;
         closeMobileActionsMenu();
-        const yes = confirm('确认删除容器 ' + state.active + ' ?');
+        const activeSession = getActiveSession();
+        const targetContainer = activeSession && activeSession.containerName ? activeSession.containerName : state.active;
+        const yes = confirm('确认删除容器 ' + targetContainer + ' ?');
         if (!yes) return;
         try {
             const current = state.active;
@@ -2896,7 +3608,9 @@
     removeAllBtn.addEventListener('click', async function () {
         if (!state.active) return;
         closeMobileActionsMenu();
-        const yes = confirm('确认删除对话 ' + state.active + ' ?');
+        const activeSession = getActiveSession();
+        const targetAgent = activeSession && activeSession.agentName ? activeSession.agentName : state.active;
+        const yes = confirm('确认删除对话 ' + targetAgent + ' ?');
         if (!yes) return;
         try {
             const current = state.active;
@@ -2913,6 +3627,7 @@
         disconnectTerminal('', true);
     });
 
+    loadSidebarTreeState();
     renderSessions();
     renderMessages(state.messages);
     setMobileSessionPanel(false);