@xcanwin/manyoyo 5.7.2 → 5.7.4

package/lib/web/frontend/app.js

@@ -63,6 +63,17 @@
         createRuns: {},
         sessionNodeMap: new Map(),
         sessionRenderMode: 'empty',
+        directoryPicker: {
+            open: false,
+            loading: false,
+            mode: '',
+            title: '',
+            tip: '',
+            currentPath: '',
+            basePath: '',
+            entries: [],
+            error: ''
+        },
         messageRequestId: 0,
         agentRun: {
             active: false,
@@ -104,6 +115,7 @@
     const openConfigBtn = document.getElementById('openConfigBtn');
     const openCreateBtn = document.getElementById('openCreateBtn');
     const configModal = document.getElementById('configModal');
+    const configModalTitle = document.getElementById('configModalTitle');
     const configPath = document.getElementById('configPath');
     const configEditor = document.getElementById('configEditor');
     const configError = document.getElementById('configError');
@@ -120,6 +132,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');
@@ -131,6 +145,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');
@@ -436,6 +459,32 @@
         });
     }
 
+    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;
@@ -466,6 +515,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 '';
@@ -621,9 +682,10 @@
         createAgentPromptCommand.value = value.agentPromptCommand || '';
         state.createAgentPromptAuto = false;
         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') : '';
+        // 敏感 env 与继承数组由服务端在创建时合并，前端表单默认不回显，避免泄露或重复提交。
+        createEnv.value = '';
+        createEnvFile.value = '';
+        createVolumes.value = '';
         updateCreateAgentPromptCommandFromCommand();
     }
 
@@ -792,7 +854,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) {
@@ -1236,9 +1299,9 @@
     function renderSessionDetailPanels() {
         const detail = state.sessionDetail;
         if (!state.active) {
-            renderEmptyInspector(detailSummary, '详情视图', '选择左侧会话后，这里会显示会话概览、Agent 状态与运行参数。');
-            renderEmptyInspector(configSummary, '配置视图', '选择会话后可查看当前容器会话的运行参数摘要。');
-            renderEmptyInspector(checkSummary, '检查视图', '选择会话后可查看当前会话的基础健康检查。');
+            renderEmptyInspector(detailSummary, '详情视图', '选择左侧会话后，这里会显示会话概览、Agent 运行状态与最近活动。');
+            renderEmptyInspector(configSummary, '配置视图', '选择会话后可查看当前容器会话的生效配置摘要。');
+            renderEmptyInspector(checkSummary, '检查视图', '选择会话后可查看当前会话的诊断结论与最近问题。');
             return;
         }
         if (state.loadingSessionDetail) {
@@ -1258,55 +1321,98 @@
         const applied = detail.applied || {};
         const status = sessionStatusInfo(detail.status);
         const updatedText = formatDateTime(detail.updatedAt) || '暂无更新';
+        const lastResumeText = detail.lastResumeAt ? formatDateTime(detail.lastResumeAt) : '暂无';
+        const latestTimestampText = detail.latestTimestamp ? formatDateTime(detail.latestTimestamp) : '暂无';
+        const latestRoleMap = {
+            user: '我',
+            assistant: 'Agent',
+            system: '系统'
+        };
+        const latestRoleLabel = latestRoleMap[String(detail.latestRole || '').toLowerCase()] || (detail.latestRole || '暂无');
+        const imageVersionValid = /^\d+\.\d+\.\d+-[A-Za-z0-9][A-Za-z0-9_.-]*$/.test(String(applied.imageVersion || ''));
+        let resumeStatusValue = '未执行';
+        let resumeStatusTone = 'warn';
+        let resumeStatusDetail = detail.resumeSupported
+            ? '支持 resume，但当前会话还没有最近一次执行记录。'
+            : '当前 Agent 程序或模板不支持 resume。';
+        if (detail.lastResumeOk === true) {
+            resumeStatusValue = '最近成功';
+            resumeStatusTone = 'ok';
+            resumeStatusDetail = `最近一次 resume 成功，时间：${lastResumeText}。`;
+        } else if (detail.lastResumeOk === false) {
+            resumeStatusValue = '最近失败';
+            resumeStatusTone = 'danger';
+            resumeStatusDetail = detail.lastResumeError
+                ? `最近一次 resume 失败：${detail.lastResumeError}`
+                : `最近一次 resume 失败，时间：${lastResumeText}。`;
+        } else if (!detail.resumeSupported) {
+            resumeStatusValue = '不支持';
+        }
+
+        const commandEntries = [];
+        if (applied.shellPrefix) {
+            commandEntries.push({ label: 'shellPrefix', value: applied.shellPrefix });
+        }
+        if (applied.shell) {
+            commandEntries.push({ label: 'shell', value: applied.shell });
+        }
+        if (applied.shellSuffix) {
+            commandEntries.push({ label: 'shellSuffix', value: applied.shellSuffix });
+        }
+        if (applied.defaultCommand && applied.defaultCommand !== applied.shell) {
+            commandEntries.push({ label: '启动命令', value: applied.defaultCommand });
+        } else if (!applied.shell) {
+            commandEntries.push({ label: '启动命令', value: applied.defaultCommand || '—' });
+        }
+        commandEntries.push({ label: 'Agent 模板', value: detail.agentPromptCommand || '—' });
+        commandEntries.push({ label: 'yolo', value: applied.yolo || '—' });
 
         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 },
                 { label: '消息数', value: String(safeMessageCount(detail.messageCount)) }
             ]);
-            renderKeyValueCard(detailSummary, 'Agent 上下文', [
+            renderKeyValueCard(detailSummary, 'Agent 运行', [
                 { label: '已启用', value: detail.agentEnabled ? '是' : '否', tone: detail.agentEnabled ? 'ok' : 'warn' },
                 { label: '程序', value: detail.agentProgram || '—' },
                 { label: '支持 resume', value: detail.resumeSupported ? '是' : '否', tone: detail.resumeSupported ? 'ok' : 'warn' },
-                { label: '最近 resume', value: detail.lastResumeAt ? formatDateTime(detail.lastResumeAt) : '暂无' },
+                { label: '最近 resume', value: lastResumeText },
                 { label: '最近结果', value: detail.lastResumeOk == null ? '暂无' : (detail.lastResumeOk ? '成功' : '失败'), tone: detail.lastResumeOk == null ? 'info' : (detail.lastResumeOk ? 'ok' : 'danger') }
             ]);
-            renderKeyValueCard(detailSummary, '运行参数', [
-                { label: 'hostPath', value: applied.hostPath || '—' },
-                { label: 'containerPath', value: applied.containerPath || '—' },
-                { label: 'imageVersion', value: applied.imageVersion || '—' },
-                { label: 'containerMode', value: applied.containerMode || 'default' },
-                { label: 'env/vol/ports', value: `${applied.envCount || 0} / ${applied.volumeCount || 0} / ${applied.portCount || 0}` }
+            renderKeyValueCard(detailSummary, '最近活动', [
+                { label: '最近角色', value: latestRoleLabel },
+                { label: '最近时间', value: latestTimestampText },
+                { label: 'resume 状态', value: resumeStatusValue, tone: resumeStatusTone }
             ]);
         }
 
         if (configSummary) {
             configSummary.innerHTML = '';
-            renderKeyValueCard(configSummary, '配置摘要', [
-                { label: 'containerName', value: applied.containerName || detail.name || state.active },
-                { label: 'hostPath', value: applied.hostPath || '—' },
-                { label: 'containerPath', value: applied.containerPath || '—' },
+            renderKeyValueCard(configSummary, '基础配置', [
+                { 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' }
-            ], { actionLabel: '打开配置', actionId: 'configSummaryOpenBtn' });
-            renderKeyValueCard(configSummary, '命令与 Agent', [
-                { label: 'shellPrefix', value: applied.shellPrefix || '—' },
-                { label: 'shell', value: applied.shell || '—' },
-                { label: 'shellSuffix', value: applied.shellSuffix || '—' },
-                { label: '默认命令', value: applied.defaultCommand || '—' },
-                { label: 'Agent 模板', value: detail.agentPromptCommand || '—' },
-                { label: 'yolo', value: applied.yolo || '—' }
             ]);
+            renderKeyValueCard(configSummary, '路径与资源', [
+                { label: 'hostPath', value: applied.hostPath || '—' },
+                { label: 'containerPath', value: applied.containerPath || '—' },
+                { label: 'env 数量', value: String(applied.envCount || 0) },
+                { label: 'volume 数量', value: String(applied.volumeCount || 0) },
+                { label: 'port 数量', value: String(applied.portCount || 0) }
+            ]);
+            renderKeyValueCard(configSummary, '命令与 Agent', commandEntries);
         }
 
         if (checkSummary) {
             checkSummary.innerHTML = '';
-            renderCheckCard(checkSummary, '基础检查', [
+            renderCheckCard(checkSummary, '运行检查', [
                 {
                     label: '容器状态',
                     value: status.label,
@@ -1314,28 +1420,32 @@
                     detail: status.tone === 'running' ? '容器处于可交互状态。' : '当前不是活跃运行态，部分功能可能受限。'
                 },
                 {
-                    label: 'Agent 模板',
+                    label: 'Agent 输入',
                     value: detail.agentEnabled ? '已配置' : '未配置',
                     tone: detail.agentEnabled ? 'ok' : 'warn',
                     detail: detail.agentEnabled ? '活动页可直接发送 Agent 提示词。' : '当前会话不支持 Agent 模式。'
                 },
                 {
-                    label: 'Resume 能力',
-                    value: detail.resumeSupported ? '支持' : '不支持',
-                    tone: detail.resumeSupported ? 'ok' : 'warn',
-                    detail: detail.resumeSupported ? '可以尝试基于历史继续 Agent 会话。' : '当前 Agent 程序或模板不支持 resume。'
+                    label: 'Resume 健康',
+                    value: resumeStatusValue,
+                    tone: resumeStatusTone,
+                    detail: resumeStatusDetail
                 },
                 {
-                    label: '镜像版本格式',
-                    value: applied.imageVersion || '缺失',
-                    tone: /^\d+\.\d+\.\d+-[A-Za-z0-9][A-Za-z0-9_.-]*$/.test(String(applied.imageVersion || '')) ? 'ok' : 'danger',
-                    detail: '建议保持 x.y.z-后缀 格式，便于 manyoyo 的版本校验。'
+                    label: '镜像版本',
+                    value: imageVersionValid ? '格式正常' : '格式异常',
+                    tone: imageVersionValid ? 'ok' : 'danger',
+                    detail: applied.imageVersion
+                        ? `当前值：${applied.imageVersion}。建议保持 x.y.z-后缀 格式，便于 manyoyo 的版本校验。`
+                        : '缺少 imageVersion，manyoyo 的版本校验会失效。'
                 },
                 {
-                    label: '工作目录',
-                    value: applied.hostPath && applied.containerPath ? '完整' : '缺失',
+                    label: '工作目录映射',
+                    value: applied.hostPath && applied.containerPath ? '已配置' : '缺失',
                     tone: applied.hostPath && applied.containerPath ? 'ok' : 'danger',
-                    detail: 'hostPath / containerPath 是容器会话最关键的上下文。'
+                    detail: applied.hostPath && applied.containerPath
+                        ? '宿主目录与容器目录都已配置。'
+                        : 'hostPath / containerPath 是容器会话最关键的上下文。'
                 }
             ]);
             if (detail.lastResumeError) {
@@ -1349,13 +1459,6 @@
                 ]);
             }
         }
-
-        const configSummaryOpenBtn = document.getElementById('configSummaryOpenBtn');
-        if (configSummaryOpenBtn) {
-            configSummaryOpenBtn.addEventListener('click', function () {
-                openConfigModal();
-            });
-        }
     }
 
     function syncUi() {
@@ -1366,8 +1469,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';
@@ -1444,7 +1548,7 @@
             openConfigBtn.disabled = state.configLoading || state.configSaving;
         }
         if (configSaveBtn) {
-            configSaveBtn.disabled = state.configLoading || state.configSaving;
+            configSaveBtn.disabled = true;
         }
         if (configReloadBtn) {
             configReloadBtn.disabled = state.configLoading || state.configSaving;
@@ -1482,6 +1586,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) {
@@ -1612,11 +1723,22 @@
         syncUi();
         try {
             const config = await fetchConfigSnapshot();
+            if (configModalTitle) {
+                configModalTitle.textContent = '查看配置摘要 (~/.manyoyo/manyoyo.json)';
+            }
             if (configPath) {
-                configPath.textContent = config.path || '';
+                const lines = [config.path || ''];
+                if (config.notice) {
+                    lines.push(config.notice);
+                }
+                configPath.textContent = lines.filter(Boolean).join('\n');
             }
             if (configEditor) {
-                configEditor.value = typeof config.raw === 'string' ? config.raw : '';
+                configEditor.readOnly = true;
+                configEditor.value = stringifyPrettyJson({
+                    defaults: config.defaults || {},
+                    runs: config.parsed && config.parsed.runs ? config.parsed.runs : {}
+                });
             }
             if (config.parseError) {
                 showConfigError('当前文件存在解析错误：' + config.parseError);
@@ -1637,23 +1759,7 @@
     }
 
     async function saveConfig() {
-        state.configSaving = true;
-        showConfigError('');
-        syncUi();
-        try {
-            await api('/api/config', {
-                method: 'PUT',
-                body: JSON.stringify({ raw: configEditor ? configEditor.value : '' })
-            });
-            await fetchConfigSnapshot();
-            showConfigError('');
-            alert('配置已保存。后续新建会读取最新配置。');
-        } catch (e) {
-            showConfigError(e.message);
-        } finally {
-            state.configSaving = false;
-            syncUi();
-        }
+        alert('Web 端已禁用明文配置编辑，请在本地 ~/.manyoyo/manyoyo.json 中维护敏感配置。');
     }
 
     async function openCreateModal() {
@@ -1683,6 +1789,7 @@
     function closeCreateModal() {
         state.createModalOpen = false;
         setModalVisible(createModal, false);
+        closeDirectoryPicker();
         showCreateError('');
     }
 
@@ -1691,57 +1798,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) {
@@ -1772,7 +1981,7 @@
                 }
             }
         }
-        renderSessionActiveState();
+        renderSessions();
         syncUi();
         Promise.all([
             loadMessagesForSession(sessionName),
@@ -1782,49 +1991,113 @@
         });
     }
 
-    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()).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 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 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();
@@ -1842,49 +2115,74 @@
             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 currentAtIndex = sessionList.children[index];
-            if (currentAtIndex !== row) {
-                sessionList.insertBefore(row, currentAtIndex || null);
-            }
-        });
+        const grouped = groupSessionsByDirectory(state.sessions);
+        let itemIndex = 0;
 
-        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);
-        });
+        grouped.forEach(function (directoryGroup) {
+            const group = document.createElement('section');
+            group.className = 'workbench-group';
 
-        while (sessionList.children.length > state.sessions.length) {
-            sessionList.removeChild(sessionList.lastChild);
-        }
-        renderSessionActiveState();
+            const groupHead = document.createElement('div');
+            groupHead.className = 'workbench-group-head';
+            groupHead.innerHTML = `
+                <div class="workbench-group-kicker">目录</div>
+                <div class="workbench-group-title">${escapeHtml(directoryGroup.path)}</div>
+            `;
+            group.appendChild(groupHead);
+
+            const containerStack = document.createElement('div');
+            containerStack.className = 'container-stack';
+
+            Array.from(directoryGroup.containers.values()).forEach(function (containerGroup) {
+                const status = sessionStatusInfo(containerGroup.status);
+                const containerCard = document.createElement('section');
+                containerCard.className = 'container-card';
+
+                const containerHead = document.createElement('div');
+                containerHead.className = 'container-card-head';
+
+                const containerInfo = document.createElement('div');
+                containerInfo.className = 'container-card-info';
+                containerInfo.innerHTML = `
+                    <div class="container-card-kicker">容器</div>
+                    <div class="container-card-title">${escapeHtml(containerGroup.containerName)}</div>
+                    <div class="container-card-meta">
+                        <span class="session-status ${status.tone}">${escapeHtml(status.label)}</span>
+                        <span>${escapeHtml(formatDateTime(containerGroup.updatedAt) || '暂无更新')}</span>
+                    </div>
+                `;
+
+                const addAgentBtn = document.createElement('button');
+                addAgentBtn.type = 'button';
+                addAgentBtn.className = 'secondary add-agent-btn';
+                addAgentBtn.textContent = '新建AGENT';
+                addAgentBtn.addEventListener('click', function () {
+                    createAgentSession(containerGroup.containerName);
+                });
+
+                containerHead.appendChild(containerInfo);
+                containerHead.appendChild(addAgentBtn);
+                containerCard.appendChild(containerHead);
+
+                const agentList = document.createElement('div');
+                agentList.className = 'agent-list';
+                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);
+        });
     }
 
     function renderMessagesLoading() {
@@ -2487,6 +2785,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();
@@ -2787,6 +3117,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();
@@ -2796,6 +3134,9 @@
             closeCreateModal();
             syncUi();
         }
+        if (event.key === 'Escape' && state.directoryPicker.open) {
+            closeDirectoryPicker();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }
@@ -2842,7 +3183,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;
@@ -2861,7 +3204,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;