@xcanwin/manyoyo 5.7.14 → 5.8.0

package/lib/web/frontend/app.js

@@ -50,14 +50,17 @@
         mobileActionsOpen: false,
         configModalOpen: false,
         createModalOpen: false,
+        agentTemplateModalOpen: false,
         configLoading: false,
         configSaving: false,
         createLoading: false,
         createSubmitting: false,
+        agentTemplateSaving: false,
         configSnapshot: null,
         sessionDetail: null,
         sessionDetailError: '',
         sessionDetailRequestId: 0,
+        agentTemplateError: '',
         createAgentPromptAuto: false,
         createContainerPathBase: '',
         createDefaults: null,
@@ -167,6 +170,8 @@
     const activeMeta = document.getElementById('activeMeta');
     const activityCommandBtn = document.getElementById('activityCommandBtn');
     const activityAgentBtn = document.getElementById('activityAgentBtn');
+    const agentTemplateBtn = document.getElementById('agentTemplateBtn');
+    const activityModelChip = document.getElementById('activityModelChip');
     const messagesNode = document.getElementById('messages');
     const terminalPanel = document.getElementById('terminalPanel');
     const detailPanel = document.getElementById('detailPanel');
@@ -182,6 +187,15 @@
     const sendState = document.getElementById('sendState');
     const sendBtn = document.getElementById('sendBtn');
     const stopBtn = document.getElementById('stopBtn');
+    const agentTemplateModal = document.getElementById('agentTemplateModal');
+    const agentTemplateTip = document.getElementById('agentTemplateTip');
+    const containerAgentPromptEditor = document.getElementById('containerAgentPromptEditor');
+    const agentTemplateOverrideGroup = document.getElementById('agentTemplateOverrideGroup');
+    const agentPromptOverrideEditor = document.getElementById('agentPromptOverrideEditor');
+    const agentTemplateError = document.getElementById('agentTemplateError');
+    const agentTemplateCancelBtn = document.getElementById('agentTemplateCancelBtn');
+    const agentTemplateResetBtn = document.getElementById('agentTemplateResetBtn');
+    const agentTemplateSaveBtn = document.getElementById('agentTemplateSaveBtn');
     const refreshBtn = document.getElementById('refreshBtn');
     const removeBtn = document.getElementById('removeBtn');
     const removeAllBtn = document.getElementById('removeAllBtn');
@@ -192,6 +206,8 @@
     const TERMINAL_MIN_ROWS = 12;
     const TERMINAL_DEFAULT_COLS = 120;
     const TERMINAL_DEFAULT_ROWS = 36;
+    const WEB_SESSION_KEY_SEPARATOR = '~';
+    const WEB_DEFAULT_AGENT_ID = 'default';
     const YOLO_COMMAND_MAP = {
         claude: 'IS_SANDBOX=1 claude --dangerously-skip-permissions',
         cc: 'IS_SANDBOX=1 claude --dangerously-skip-permissions',
@@ -1055,6 +1071,133 @@
         }) || null;
     }
 
+    function parseSessionKey(sessionName) {
+        const raw = String(sessionName || '').trim();
+        if (!raw) {
+            return {
+                containerName: '',
+                agentId: WEB_DEFAULT_AGENT_ID
+            };
+        }
+        const separatorIndex = raw.indexOf(WEB_SESSION_KEY_SEPARATOR);
+        if (separatorIndex === -1) {
+            return {
+                containerName: raw,
+                agentId: WEB_DEFAULT_AGENT_ID
+            };
+        }
+        return {
+            containerName: raw.slice(0, separatorIndex),
+            agentId: raw.slice(separatorIndex + 1) || WEB_DEFAULT_AGENT_ID
+        };
+    }
+
+    function isActiveAgentOverrideEditable() {
+        const sessionRef = parseSessionKey(state.active);
+        return Boolean(state.active && sessionRef.agentId && sessionRef.agentId !== WEB_DEFAULT_AGENT_ID);
+    }
+
+    function showAgentTemplateError(message) {
+        state.agentTemplateError = String(message || '').trim();
+        if (!agentTemplateError) {
+            return;
+        }
+        agentTemplateError.hidden = !state.agentTemplateError;
+        agentTemplateError.textContent = state.agentTemplateError;
+    }
+
+    function fillAgentTemplateForm(detail) {
+        const currentDetail = detail && typeof detail === 'object' ? detail : {};
+        if (containerAgentPromptEditor) {
+            containerAgentPromptEditor.value = currentDetail.containerAgentPromptCommand || '';
+        }
+        if (agentPromptOverrideEditor) {
+            agentPromptOverrideEditor.value = currentDetail.agentPromptCommandOverride || '';
+        }
+        if (agentTemplateOverrideGroup) {
+            agentTemplateOverrideGroup.hidden = !isActiveAgentOverrideEditable();
+        }
+        if (agentTemplateTip) {
+            const sessionName = currentDetail.agentName || state.active || '当前会话';
+            const sourceMap = {
+                agent: '当前 AGENT 覆盖',
+                container: '容器默认模板',
+                inferred: '从容器启动命令推导',
+                none: '未配置'
+            };
+            const sourceLabel = sourceMap[currentDetail.agentPromptSource] || '未配置';
+            const effectiveTemplate = currentDetail.agentPromptCommand || '—';
+            agentTemplateTip.textContent = `${sessionName} · 当前生效来源：${sourceLabel} · 生效模板：${effectiveTemplate}`;
+        }
+        showAgentTemplateError('');
+    }
+
+    async function ensureActiveSessionDetail() {
+        if (!state.active) {
+            return null;
+        }
+        if (state.sessionDetail && state.active === (state.sessionDetail.name || state.active)) {
+            return state.sessionDetail;
+        }
+        await loadSessionDetailForSession(state.active);
+        return state.sessionDetail;
+    }
+
+    async function openAgentTemplateModal() {
+        if (!state.active || state.agentTemplateSaving) {
+            return;
+        }
+        const detail = await ensureActiveSessionDetail();
+        if (!detail) {
+            alert(state.sessionDetailError || '当前会话详情暂时不可用');
+            return;
+        }
+        state.agentTemplateModalOpen = true;
+        fillAgentTemplateForm(detail);
+        syncUi();
+        if (containerAgentPromptEditor) {
+            containerAgentPromptEditor.focus();
+        }
+    }
+
+    function closeAgentTemplateModal() {
+        state.agentTemplateModalOpen = false;
+        showAgentTemplateError('');
+    }
+
+    function resetAgentTemplateModal() {
+        fillAgentTemplateForm(state.sessionDetail || {});
+    }
+
+    async function saveAgentTemplateModal() {
+        if (!state.active || state.agentTemplateSaving) {
+            return;
+        }
+        state.agentTemplateSaving = true;
+        showAgentTemplateError('');
+        syncUi();
+        try {
+            const payload = {
+                containerAgentPromptCommand: containerAgentPromptEditor ? String(containerAgentPromptEditor.value || '').trim() : ''
+            };
+            if (isActiveAgentOverrideEditable() && agentPromptOverrideEditor) {
+                payload.agentPromptCommandOverride = String(agentPromptOverrideEditor.value || '').trim();
+            }
+            const data = await api('/api/sessions/' + encodeURIComponent(state.active) + '/agent-template', {
+                method: 'PUT',
+                body: JSON.stringify(payload)
+            });
+            state.sessionDetail = data && data.detail ? data.detail : state.sessionDetail;
+            await refreshSessionsSilent({ preferredName: state.active });
+            closeAgentTemplateModal();
+        } catch (e) {
+            showAgentTemplateError(e && e.message ? e.message : '保存失败');
+        } finally {
+            state.agentTemplateSaving = false;
+            syncUi();
+        }
+    }
+
     function isAgentRunActiveForSession(sessionName) {
         return Boolean(
             state.agentRun
@@ -1078,6 +1221,24 @@
         return Boolean(active && active.agentEnabled);
     }
 
+    function resolveToolbarCliLabel() {
+        const activeSession = getActiveSession();
+        const detail = state.sessionDetail && state.active ? state.sessionDetail : null;
+        const agentProgram = String(
+            (detail && detail.agentProgram)
+            || (activeSession && activeSession.agentProgram)
+            || ''
+        ).trim();
+        return agentProgram || '未配置';
+    }
+
+    function resolveToolbarModelLabel() {
+        if (!state.active) {
+            return '—';
+        }
+        return '自动';
+    }
+
     function buildActiveMeta(session) {
         if (!session) {
             return '会话不可用';
@@ -1566,6 +1727,13 @@
         let resumeStatusDetail = detail.resumeSupported
             ? '支持 resume，但当前会话还没有最近一次执行记录。'
             : '当前 Agent 程序或模板不支持 resume。';
+        const templateSourceMap = {
+            agent: '当前 AGENT 覆盖',
+            container: '容器默认模板',
+            inferred: '从启动命令推导',
+            none: '未配置'
+        };
+        const templateSourceLabel = templateSourceMap[detail.agentPromptSource] || '未配置';
         if (detail.lastResumeOk === true) {
             resumeStatusValue = '最近成功';
             resumeStatusTone = 'ok';
@@ -1596,6 +1764,7 @@
             commandEntries.push({ label: '启动命令', value: applied.defaultCommand || '—' });
         }
         commandEntries.push({ label: 'Agent 模板', value: detail.agentPromptCommand || '—' });
+        commandEntries.push({ label: '模板来源', value: templateSourceLabel });
         commandEntries.push({ label: 'yolo', value: applied.yolo || '—' });
 
         if (detailSummary) {
@@ -1611,6 +1780,7 @@
             renderKeyValueCard(detailSummary, 'Agent 运行', [
                 { label: '已启用', value: detail.agentEnabled ? '是' : '否', tone: detail.agentEnabled ? 'ok' : 'warn' },
                 { label: '程序', value: detail.agentProgram || '—' },
+                { label: '模板来源', value: templateSourceLabel },
                 { label: '支持 resume', value: detail.resumeSupported ? '是' : '否', tone: detail.resumeSupported ? 'ok' : 'warn' },
                 { label: '最近 resume', value: lastResumeText },
                 { label: '最近结果', value: detail.lastResumeOk == null ? '暂无' : (detail.lastResumeOk ? '成功' : '失败'), tone: detail.lastResumeOk == null ? 'info' : (detail.lastResumeOk ? 'ok' : 'danger') }
@@ -1728,6 +1898,18 @@
             activityAgentBtn.classList.toggle('is-active', agentMode);
             activityAgentBtn.setAttribute('aria-pressed', agentMode ? 'true' : 'false');
         }
+        if (agentTemplateBtn) {
+            agentTemplateBtn.textContent = `CLI · ${resolveToolbarCliLabel()}`;
+            agentTemplateBtn.title = state.active
+                ? '查看或修改当前会话的 CLI 模板'
+                : '请先选择会话';
+        }
+        if (activityModelChip) {
+            activityModelChip.textContent = `模型 · ${resolveToolbarModelLabel()}`;
+            activityModelChip.title = state.active
+                ? '当前版本暂不单独配置模型，默认跟随 CLI 或容器内配置'
+                : '请先选择会话';
+        }
         if (viewActivityBtn) viewActivityBtn.classList.toggle('is-active', activityTab);
         if (viewTerminalBtn) viewTerminalBtn.classList.toggle('is-active', terminalTab);
         if (viewDetailBtn) viewDetailBtn.classList.toggle('is-active', detailTab);
@@ -1764,6 +1946,9 @@
         if (stopBtn) {
             stopBtn.disabled = !activityTab || !agentMode || !activeAgentRunning || state.agentRun.stopping;
         }
+        if (agentTemplateBtn) {
+            agentTemplateBtn.disabled = !state.active || state.agentTemplateSaving;
+        }
         commandInput.disabled = !activityTab || !state.active || (agentMode && !agentEnabled);
         if (commandInput) {
             commandInput.placeholder = agentMode
@@ -1823,9 +2008,21 @@
         if (directoryPickerModal) {
             directoryPickerModal.hidden = !state.directoryPicker.open;
         }
+        if (agentTemplateModal) {
+            agentTemplateModal.hidden = !state.agentTemplateModalOpen;
+        }
+        if (agentTemplateSaveBtn) {
+            agentTemplateSaveBtn.disabled = state.agentTemplateSaving || !state.active;
+        }
+        if (agentTemplateResetBtn) {
+            agentTemplateResetBtn.disabled = state.agentTemplateSaving;
+        }
+        if (agentTemplateCancelBtn) {
+            agentTemplateCancelBtn.disabled = state.agentTemplateSaving;
+        }
         document.body.classList.toggle(
             'modal-open',
-            state.configModalOpen || state.createModalOpen || state.directoryPicker.open
+            state.configModalOpen || state.createModalOpen || state.directoryPicker.open || state.agentTemplateModalOpen
         );
         if (!state.active) {
             sendState.textContent = '未选择会话';
@@ -2222,7 +2419,7 @@
                 }
             }
         }
-        renderSessions();
+        updateSidebarActiveSelection();
         syncUi();
         Promise.all([
             loadMessagesForSession(sessionName),
@@ -2310,173 +2507,244 @@
         return (parts || []).filter(Boolean).join(' · ');
     }
 
-    function createTreeToggle(options) {
-        const opts = options && typeof options === 'object' ? options : {};
+    function createDisclosureButton(expanded, label) {
         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 || '';
-        title.title = 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);
-        }
-
+        button.className = 'disclosure-toggle';
+        button.dataset.disclosureLabel = label || '';
+        button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+        button.setAttribute('aria-label', `${expanded ? '折叠' : '展开'}${label ? ` ${label}` : ''}`);
+        button.innerHTML = '<svg viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="M4 2.5L8 6L4 9.5"></path></svg>';
         return button;
     }
 
-    function createSidebarIcon(name) {
-        const icon = document.createElement('span');
-        icon.className = `sidebar-icon ${name ? `sidebar-icon-${name}` : ''}`.trim();
-        icon.setAttribute('aria-hidden', 'true');
+    function createTreePrefixSegment() {
+        const segment = document.createElement('span');
+        segment.className = 'tree-prefix-segment';
+        segment.setAttribute('aria-hidden', 'true');
+        return segment;
+    }
 
-        if (name === 'cube') {
-            icon.innerHTML = [
-                '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">',
-                '<path d="M12 3.5 4.75 7.5 12 11.5l7.25-4-7.25-4Z"></path>',
-                '<path d="M4.75 7.5v9L12 20.5l7.25-4v-9"></path>',
-                '<path d="M12 11.5v9"></path>',
-                '</svg>'
-            ].join('');
+    function createTreePrefix(ancestorHasNext, isLastSibling, options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const prefix = document.createElement('div');
+        prefix.className = 'tree-prefix';
+
+        (Array.isArray(ancestorHasNext) ? ancestorHasNext : []).forEach(function () {
+            prefix.appendChild(createTreePrefixSegment());
+        });
+
+        const branch = document.createElement('span');
+        branch.className = `tree-prefix-branch ${isLastSibling ? 'is-last' : 'is-mid'}`;
+        branch.setAttribute('aria-hidden', 'true');
+        prefix.appendChild(branch);
+
+        let disclosure = null;
+        let disclosureWrap = null;
+        if (opts.expandable) {
+            disclosure = createDisclosureButton(!!opts.expanded, opts.label || '');
+            disclosureWrap = document.createElement('span');
+            disclosureWrap.className = 'tree-prefix-toggle';
+            disclosureWrap.appendChild(disclosure);
+            prefix.appendChild(disclosureWrap);
+        } else {
+            const leaf = document.createElement('span');
+            leaf.className = 'tree-prefix-leaf';
+            leaf.setAttribute('aria-hidden', 'true');
+            prefix.appendChild(leaf);
         }
 
-        return icon;
+        return { root: prefix, disclosure, disclosureWrap };
     }
 
-    function createSidebarBadge(text, className) {
-        const badge = document.createElement('span');
-        badge.className = `sidebar-badge ${className || ''}`.trim();
-        badge.textContent = text || '';
-        return badge;
+    function setDisclosureExpanded(control, expanded) {
+        if (!control) {
+            return;
+        }
+        const nextValue = expanded ? 'true' : 'false';
+        if (control.button) {
+            control.button.setAttribute('aria-expanded', nextValue);
+        }
+        if (control.disclosure) {
+            control.disclosure.setAttribute('aria-expanded', nextValue);
+            const label = control.disclosure.dataset.disclosureLabel || '';
+            control.disclosure.setAttribute('aria-label', `${expanded ? '折叠' : '展开'}${label ? ` ${label}` : ''}`);
+        }
     }
 
-    function createContainerToggle(containerGroup, expanded) {
-        const status = sessionStatusInfo(containerGroup && containerGroup.status);
+    function createTreeItem(options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const row = document.createElement('div');
+        row.className = `tree-node-row tree-node-row-${opts.kind || 'item'} ${opts.rowClassName || ''}`.trim();
+        row.classList.toggle('has-active', !!opts.hasActive);
+        row.setAttribute('role', 'none');
+
+        const prefixControl = createTreePrefix(opts.ancestorHasNext, !!opts.isLastSibling, {
+            expandable: !!opts.expandable,
+            expanded: !!opts.expanded,
+            label: opts.disclosureLabel || opts.title || ''
+        });
+        row.appendChild(prefixControl.root);
+
         const button = document.createElement('button');
         button.type = 'button';
-        button.className = 'tree-toggle container-toggle';
-        button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+        button.className = `tree-node-button tree-node-button-${opts.kind || 'item'} ${opts.className || ''}`.trim();
+        button.setAttribute('role', 'treeitem');
+        button.setAttribute('aria-level', String(opts.level || 1));
+        if (opts.expandable) {
+            button.setAttribute('aria-expanded', opts.expanded ? 'true' : 'false');
+        }
+        if (opts.kind === 'agent') {
+            button.setAttribute('aria-selected', opts.active ? 'true' : 'false');
+        }
+        button.classList.toggle('active', !!opts.active);
 
         const main = document.createElement('div');
-        main.className = 'container-toggle-main';
-
-        const titleRow = document.createElement('div');
-        titleRow.className = 'container-title-row';
-        titleRow.appendChild(createSidebarIcon('cube'));
-
-        const titleStack = document.createElement('div');
-        titleStack.className = 'container-title-stack';
-
-        const kicker = document.createElement('div');
-        kicker.className = 'container-card-kicker';
-        kicker.textContent = '容器';
+        main.className = 'tree-node-main';
 
         const title = document.createElement('div');
-        title.className = 'container-card-title';
-        title.textContent = containerGroup && containerGroup.containerName ? containerGroup.containerName : '';
-        title.title = title.textContent;
-
-        titleStack.appendChild(kicker);
-        titleStack.appendChild(title);
-        titleRow.appendChild(titleStack);
-        main.appendChild(titleRow);
+        title.className = opts.titleClassName || 'tree-node-title';
+        title.textContent = opts.title || '';
+        title.title = opts.title || '';
+        main.appendChild(title);
 
-        const meta = document.createElement('div');
-        meta.className = 'container-card-meta';
-        meta.appendChild(createSidebarBadge(status.label, `session-status ${status.tone} container-status-pill`));
-        meta.appendChild(createSidebarBadge(`${containerGroup && Array.isArray(containerGroup.sessions) ? containerGroup.sessions.length : 0} 个 AGENT`, 'container-agent-badge'));
-        main.appendChild(meta);
-
-        const infoText = createTreeMetaText([
-            containerGroup && containerGroup.image ? containerGroup.image : '',
-            formatDateTime(containerGroup && containerGroup.updatedAt) || '暂无更新'
-        ]);
-        if (infoText) {
-            const info = document.createElement('div');
-            info.className = 'container-card-info';
-            info.textContent = infoText;
-            info.title = infoText;
-            main.appendChild(info);
-        }
-
-        const caret = document.createElement('span');
-        caret.className = 'tree-toggle-caret';
-        caret.setAttribute('aria-hidden', 'true');
-        caret.textContent = '›';
+        if (opts.meta) {
+            const meta = document.createElement('div');
+            meta.className = `tree-node-meta ${opts.metaClassName || ''}`.trim();
+            meta.textContent = opts.meta;
+            main.appendChild(meta);
+        }
 
         button.appendChild(main);
-        button.appendChild(caret);
+        row.appendChild(button);
+        if (opts.overlayNode) {
+            row.appendChild(opts.overlayNode);
+        }
 
-        return button;
+        const control = {
+            root: row,
+            button,
+            disclosure: prefixControl.disclosure
+        };
+        setDisclosureExpanded(control, !!opts.expanded);
+        return control;
     }
 
-    function createAgentRow(session, index) {
-        const status = sessionStatusInfo(session.status);
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        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 = 'agent-name';
-        sessionName.textContent = session.agentName || session.name;
-
-        const meta = document.createElement('div');
-        meta.className = 'agent-meta';
+    function buildSessionTreeNodes(grouped) {
+        return (Array.isArray(grouped) ? grouped : []).map(function (directoryGroup) {
+            return {
+                kind: 'directory',
+                title: directoryGroup.path,
+                disclosureLabel: directoryGroup.path,
+                expanded: isDirectoryExpanded(directoryGroup),
+                hasActive: directoryContainsActiveSession(directoryGroup),
+                onToggle: function (expanded) {
+                    setSidebarDirectoryExpanded(directoryGroup.path, expanded);
+                },
+                children: (Array.isArray(directoryGroup.containers) ? directoryGroup.containers : []).map(function (containerGroup) {
+                    const status = sessionStatusInfo(containerGroup && containerGroup.status);
+                    const historyClassName = status.tone === 'history' ? 'tree-node-tone-history' : '';
+                    const containerName = String(containerGroup && containerGroup.containerName ? containerGroup.containerName : '').trim() || '未命名容器';
+                    const hoverMenu = document.createElement('div');
+                    hoverMenu.className = 'tree-node-hover-menu';
+
+                    const addAgentBtn = document.createElement('button');
+                    addAgentBtn.type = 'button';
+                    addAgentBtn.className = 'secondary tree-node-menu-item';
+                    addAgentBtn.textContent = '新建AGENT';
+                    addAgentBtn.addEventListener('click', function (event) {
+                        event.stopPropagation();
+                        createAgentSession(containerName);
+                    });
+                    hoverMenu.appendChild(addAgentBtn);
+
+                    return {
+                        kind: 'container',
+                        title: containerName,
+                        meta: status.label,
+                        metaClassName: `tree-node-status ${status.tone}`,
+                        className: historyClassName,
+                        disclosureLabel: containerName,
+                        expanded: isContainerExpanded(containerGroup),
+                        hasActive: containerContainsActiveSession(containerGroup),
+                        overlayNode: hoverMenu,
+                        onToggle: function (expanded) {
+                            setSidebarContainerExpanded(containerGroup.containerName, expanded);
+                        },
+                        children: (Array.isArray(containerGroup.sessions) ? containerGroup.sessions : []).map(function (session) {
+                            return {
+                                kind: 'agent',
+                                title: session.agentName || session.name,
+                                meta: formatDateTime(session.updatedAt) || '暂无更新',
+                                className: historyClassName,
+                                active: state.active === session.name,
+                                sessionName: session.name
+                            };
+                        })
+                    };
+                })
+            };
+        });
+    }
 
-        const statusBadge = document.createElement('span');
-        statusBadge.className = `session-status ${status.tone}`;
-        statusBadge.textContent = status.label;
+    function renderSessionTreeNodes(nodes, parentNode, ancestorHasNext, itemCounter) {
+        (Array.isArray(nodes) ? nodes : []).forEach(function (node, index) {
+            const isLastSibling = index === nodes.length - 1;
+            const item = createTreeItem({
+                kind: node.kind,
+                title: node.title,
+                meta: node.meta,
+                className: node.className,
+                metaClassName: node.metaClassName,
+                disclosureLabel: node.disclosureLabel,
+                expandable: Array.isArray(node.children) && node.children.length > 0,
+                expanded: !!node.expanded,
+                active: !!node.active,
+                hasActive: !!node.hasActive,
+                level: ancestorHasNext.length + 1,
+                ancestorHasNext: ancestorHasNext,
+                isLastSibling: isLastSibling,
+                overlayNode: node.overlayNode
+            });
 
-        const messageCount = document.createElement('span');
-        messageCount.className = 'session-count';
-        messageCount.textContent = `${safeMessageCount(session.messageCount)} 条`;
+            if (node.kind === 'agent') {
+                item.button.dataset.sessionName = node.sessionName || '';
+                item.button.style.setProperty('--item-index', String(itemCounter.value));
+                itemCounter.value += 1;
+                state.sessionNodeMap.set(node.sessionName, item.button);
+                item.button.addEventListener('click', function () {
+                    handleSessionItemClick(node.sessionName || '');
+                });
+                parentNode.appendChild(item.root);
+                return;
+            }
 
-        meta.appendChild(statusBadge);
-        meta.appendChild(messageCount);
+            const block = document.createElement('section');
+            block.className = `tree-node-block tree-node-block-${node.kind}`;
+            block.classList.toggle('has-active', !!node.hasActive);
+            block.appendChild(item.root);
 
-        const time = document.createElement('div');
-        time.className = 'agent-time';
-        time.textContent = formatDateTime(session.updatedAt) || '暂无更新';
+            const childrenNode = document.createElement('div');
+            childrenNode.className = `tree-node-children tree-node-children-${node.kind}`;
+            childrenNode.setAttribute('role', 'group');
+            childrenNode.hidden = !node.expanded;
+            renderSessionTreeNodes(node.children || [], childrenNode, ancestorHasNext.concat(!isLastSibling), itemCounter);
+            block.appendChild(childrenNode);
+            parentNode.appendChild(block);
 
-        btn.appendChild(sessionName);
-        btn.appendChild(meta);
-        btn.appendChild(time);
-        btn.addEventListener('click', function () {
-            handleSessionItemClick(btn.dataset.sessionName || '');
+            const toggleNode = function () {
+                const nextExpanded = childrenNode.hidden;
+                if (typeof node.onToggle === 'function') {
+                    node.onToggle(nextExpanded);
+                }
+                setDisclosureExpanded(item, nextExpanded);
+                childrenNode.hidden = !nextExpanded;
+            };
+            item.button.addEventListener('click', toggleNode);
+            if (item.disclosure) {
+                item.disclosure.addEventListener('click', toggleNode);
+            }
         });
-        return btn;
     }
 
     function scrollActiveSessionIntoView() {
@@ -2492,6 +2760,37 @@
         }
     }
 
+    function updateSidebarActiveSelection() {
+        state.sessionNodeMap.forEach(function (buttonNode, sessionName) {
+            const isActive = sessionName === state.active;
+            if (!buttonNode) {
+                return;
+            }
+            buttonNode.classList.toggle('active', isActive);
+            buttonNode.setAttribute('aria-selected', isActive ? 'true' : 'false');
+        });
+
+        if (!sessionList) {
+            return;
+        }
+
+        sessionList.querySelectorAll('.tree-node-block.has-active').forEach(function (blockNode) {
+            blockNode.classList.remove('has-active');
+        });
+
+        const activeNode = state.sessionNodeMap.get(state.active);
+        let cursor = activeNode ? activeNode.parentElement : null;
+        while (cursor && cursor !== sessionList) {
+            if (cursor.classList && cursor.classList.contains('tree-node-children')) {
+                const blockNode = cursor.parentElement;
+                if (blockNode && blockNode.classList && blockNode.classList.contains('tree-node-block')) {
+                    blockNode.classList.add('has-active');
+                }
+            }
+            cursor = cursor.parentElement;
+        }
+    }
+
     function renderSessions() {
         const containerCount = new Set(state.sessions.map(function (session) {
             return session && session.containerName ? session.containerName : '';
@@ -2521,88 +2820,10 @@
         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 workbench-path-bar',
-                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) || '暂无更新'
-                ]
-            });
-            group.appendChild(groupHead);
-
-            const containerStack = document.createElement('div');
-            containerStack.className = 'container-stack workbench-group-body';
-            containerStack.hidden = !directoryExpanded;
-            groupHead.addEventListener('click', function () {
-                const nextExpanded = containerStack.hidden;
-                setSidebarDirectoryExpanded(directoryGroup.path, nextExpanded);
-                groupHead.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
-                containerStack.hidden = !nextExpanded;
-            });
-
-            directoryGroup.containers.forEach(function (containerGroup) {
-                const containerExpanded = isContainerExpanded(containerGroup);
-                const containerHasActive = containerContainsActiveSession(containerGroup);
-                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 containerToggle = createContainerToggle(containerGroup, containerExpanded);
-
-                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(containerToggle);
-                containerCard.appendChild(containerHead);
-
-                const agentList = document.createElement('div');
-                agentList.className = 'agent-list container-card-body';
-                agentList.hidden = !containerExpanded;
-                containerToggle.addEventListener('click', function () {
-                    const nextExpanded = agentList.hidden;
-                    setSidebarContainerExpanded(containerGroup.containerName, nextExpanded);
-                    containerToggle.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
-                    agentList.hidden = !nextExpanded;
-                });
-                agentList.appendChild(addAgentBtn);
-                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);
-        });
+        const treeNodes = buildSessionTreeNodes(grouped);
+        const itemCounter = { value: 0 };
+        renderSessionTreeNodes(treeNodes, sessionList, [], itemCounter);
+        updateSidebarActiveSelection();
 
         scrollActiveSessionIntoView();
     }
@@ -2985,6 +3206,9 @@
                 return;
             }
             state.sessionDetail = data && data.detail ? data.detail : null;
+            if (state.agentTemplateModalOpen && targetSession === state.active) {
+                fillAgentTemplateForm(state.sessionDetail || {});
+            }
         } catch (e) {
             if (requestId !== state.sessionDetailRequestId) {
                 return;
@@ -3272,6 +3496,14 @@
         });
     }
 
+    if (agentTemplateBtn) {
+        agentTemplateBtn.addEventListener('click', function () {
+            openAgentTemplateModal().catch(function (e) {
+                alert(e && e.message ? e.message : '加载 Agent 模板失败');
+            });
+        });
+    }
+
     if (configCancelBtn) {
         configCancelBtn.addEventListener('click', function () {
             closeConfigModal();
@@ -3336,6 +3568,25 @@
         });
     }
 
+    if (agentTemplateCancelBtn) {
+        agentTemplateCancelBtn.addEventListener('click', function () {
+            closeAgentTemplateModal();
+            syncUi();
+        });
+    }
+
+    if (agentTemplateResetBtn) {
+        agentTemplateResetBtn.addEventListener('click', function () {
+            resetAgentTemplateModal();
+        });
+    }
+
+    if (agentTemplateSaveBtn) {
+        agentTemplateSaveBtn.addEventListener('click', function () {
+            saveAgentTemplateModal();
+        });
+    }
+
     if (createRun) {
         createRun.addEventListener('change', function () {
             applyCurrentRunDefaults();
@@ -3662,6 +3913,15 @@
         });
     }
 
+    if (agentTemplateModal) {
+        agentTemplateModal.addEventListener('click', function (event) {
+            if (event.target === agentTemplateModal && !state.agentTemplateSaving) {
+                closeAgentTemplateModal();
+                syncUi();
+            }
+        });
+    }
+
     window.addEventListener('keydown', function (event) {
         if (event.key === 'Escape' && state.configModalOpen) {
             closeConfigModal();
@@ -3674,6 +3934,10 @@
         if (event.key === 'Escape' && state.directoryPicker.open) {
             closeDirectoryPicker();
         }
+        if (event.key === 'Escape' && state.agentTemplateModalOpen) {
+            closeAgentTemplateModal();
+            syncUi();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }