@xcanwin/manyoyo 6.2.5 → 6.2.7

package/lib/web/frontend/app.js

@@ -71,10 +71,17 @@
         createRuns: {},
         sessionNodeMap: new Map(),
         sessionRenderMode: 'empty',
-        sidebarTreeLoaded: false,
-        sidebarTree: {
-            directories: {},
-            containers: {}
+        sidebarNavLoaded: false,
+        navLevel: 'containers',
+        navContainer: '',
+        containerSearchQuery: '',
+        cloneModal: {
+            open: false,
+            mode: '',
+            sourceContainerName: '',
+            nameDraft: '',
+            submitting: false,
+            error: ''
         },
         pendingActiveSessionScroll: false,
         directoryPicker: {
@@ -120,6 +127,8 @@
     };
 
     const sidebarNode = document.querySelector('.sidebar');
+    const sessionBreadcrumb = document.getElementById('sessionBreadcrumb');
+    const containerSearchInput = document.getElementById('containerSearchInput');
     const sessionList = document.getElementById('sessionList');
     const sessionCount = document.getElementById('sessionCount');
     const mobileSessionToggle = document.getElementById('mobileSessionToggle');
@@ -211,6 +220,13 @@
     const externalLinkUrl = document.getElementById('externalLinkUrl');
     const externalLinkCancelBtn = document.getElementById('externalLinkCancelBtn');
     const externalLinkOpenBtn = document.getElementById('externalLinkOpenBtn');
+    const cloneNameModal = document.getElementById('cloneNameModal');
+    const cloneNameTitle = document.getElementById('cloneNameTitle');
+    const cloneNameTip = document.getElementById('cloneNameTip');
+    const cloneNameInput = document.getElementById('cloneNameInput');
+    const cloneNameError = document.getElementById('cloneNameError');
+    const cloneNameCancelBtn = document.getElementById('cloneNameCancelBtn');
+    const cloneNameConfirmBtn = document.getElementById('cloneNameConfirmBtn');
     const MOBILE_LAYOUT_MEDIA = window.matchMedia('(max-width: 980px)');
     const MOBILE_COMPACT_MEDIA = window.matchMedia('(max-width: 640px)');
     const TERMINAL_FIT_DEBOUNCE_MS = 60;
@@ -248,58 +264,49 @@
         gemini: YOLO_COMMAND_MAP.gemini,
         opencode: YOLO_COMMAND_MAP.opencode
     };
-    const SIDEBAR_TREE_STORAGE_KEY = 'manyoyo.web.sidebarTree.v1';
+    const SIDEBAR_NAV_STORAGE_KEY = 'manyoyo.web.sidebarNav.v1';
     const markdownRenderer = window.ManyoyoMarkdown
         && typeof window.ManyoyoMarkdown.shouldRenderMessage === 'function'
         && typeof window.ManyoyoMarkdown.render === 'function'
         ? window.ManyoyoMarkdown
         : null;
     let fileBrowser = 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) {
+    function loadSidebarNavState() {
+        if (state.sidebarNavLoaded) {
             return;
         }
-        state.sidebarTreeLoaded = true;
+        state.sidebarNavLoaded = true;
         try {
             if (!window.localStorage) {
                 return;
             }
-            const raw = window.localStorage.getItem(SIDEBAR_TREE_STORAGE_KEY);
+            const raw = window.localStorage.getItem(SIDEBAR_NAV_STORAGE_KEY);
             if (!raw) {
                 return;
             }
             const parsed = JSON.parse(raw);
-            state.sidebarTree = {
-                directories: normalizeBooleanMap(parsed && parsed.directories),
-                containers: normalizeBooleanMap(parsed && parsed.containers)
-            };
+            if (parsed && (parsed.navLevel === 'agents' || parsed.navLevel === 'containers')) {
+                state.navLevel = parsed.navLevel;
+            }
+            if (parsed && typeof parsed.navContainer === 'string') {
+                state.navContainer = parsed.navContainer;
+            }
         } catch (e) {
-            state.sidebarTree = {
-                directories: {},
-                containers: {}
-            };
+            state.navLevel = 'containers';
+            state.navContainer = '';
         }
     }
 
-    function persistSidebarTreeState() {
+    function persistSidebarNavState() {
         try {
             if (!window.localStorage) {
                 return;
             }
-            window.localStorage.setItem(SIDEBAR_TREE_STORAGE_KEY, JSON.stringify(state.sidebarTree));
+            window.localStorage.setItem(SIDEBAR_NAV_STORAGE_KEY, JSON.stringify({
+                navLevel: state.navLevel,
+                navContainer: state.navContainer
+            }));
         } catch (e) {
             // 忽略浏览器存储异常，避免影响主流程
         }
@@ -686,87 +693,33 @@
         }) || 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;
+    function pruneSidebarNavState() {
+        loadSidebarNavState();
+        if (state.navLevel !== 'agents') {
+            return;
         }
-        state.sidebarTree.containers[name] = expanded;
-        if (opts.persist !== false) {
-            persistSidebarTreeState();
+        const validContainers = new Set(state.sessions.map(getSessionContainerName).filter(Boolean));
+        if (!validContainers.has(state.navContainer)) {
+            state.navLevel = 'containers';
+            state.navContainer = '';
+            persistSidebarNavState();
         }
-        return true;
     }
 
-    function ensureSessionPathExpanded(sessionName, options) {
+    function ensureSessionNavPath(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();
+        const changed = state.navLevel !== 'agents' || state.navContainer !== containerName;
+        state.navLevel = 'agents';
+        state.navContainer = containerName;
+        if (changed && opts.persist !== false) {
+            persistSidebarNavState();
         }
-        return changedDirectory || changedContainer;
-    }
-
-    function directoryContainsActiveSession(directoryGroup) {
-        const groups = directoryGroup && Array.isArray(directoryGroup.containers) ? directoryGroup.containers : [];
-        return groups.some(function (containerGroup) {
-            return containerContainsActiveSession(containerGroup);
-        });
+        return changed;
     }
 
     function containerContainsActiveSession(containerGroup) {
@@ -776,24 +729,6 @@
         });
     }
 
-    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 setModalVisible(modalNode, visible) {
         if (!modalNode) return;
         modalNode.hidden = !visible;
@@ -2428,7 +2363,7 @@
         }
         document.body.classList.toggle(
             'modal-open',
-            state.configModalOpen || state.createModalOpen || state.directoryPicker.open || state.agentTemplateModalOpen || state.externalLinkModalOpen
+            state.configModalOpen || state.createModalOpen || state.directoryPicker.open || state.agentTemplateModalOpen || state.externalLinkModalOpen || state.cloneModal.open
         );
         if (composer) {
             composer.hidden = !activityTab;
@@ -2844,7 +2779,7 @@
             disconnectTerminal('会话切换，终端已断开', true);
         }
         state.active = sessionName;
-        ensureSessionPathExpanded(sessionName);
+        ensureSessionNavPath(sessionName);
         state.sessionDetail = null;
         state.sessionDetailError = '';
         if (isMobileLayout()) {
@@ -2899,48 +2834,33 @@
         }
     }
 
-    function groupSessionsByDirectory(sessions) {
+    function groupSessionsByContainer(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 = getSessionContainerName(session);
+            if (!containerName) {
+                return;
             }
-
-            const containerName = String(session && session.containerName ? session.containerName : '');
-            if (!directoryGroup.containers.has(containerName)) {
-                directoryGroup.containers.set(containerName, {
+            if (!groups.has(containerName)) {
+                groups.set(containerName, {
                     containerName: containerName,
+                    containerRemark: session && session.containerRemark ? session.containerRemark : '',
                     status: session && session.status ? session.status : 'history',
                     image: session && session.image ? session.image : '',
+                    hostPath: getSessionDirectoryPath(session),
                     updatedAt: session && session.updatedAt ? session.updatedAt : '',
                     sessions: []
                 });
             }
-            const containerGroup = directoryGroup.containers.get(containerName);
+            const containerGroup = groups.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) {
-                    return compareSessionByCreatedDesc(a, b);
-                });
+            group.sessions.sort(function (a, b) {
+                return compareSessionByCreatedDesc(a, b);
             });
             return group;
         }).sort(function (a, b) {
@@ -3168,254 +3088,272 @@
         }
     }
 
-    function createDisclosureButton(expanded, label) {
-        const button = document.createElement('button');
-        button.type = 'button';
-        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 createTreePrefixSegment() {
-        const segment = document.createElement('span');
-        segment.className = 'tree-prefix-segment';
-        segment.setAttribute('aria-hidden', 'true');
-        return segment;
-    }
-
-    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 { root: prefix, disclosure, disclosureWrap };
-    }
-
-    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 createTreeItem(options) {
+    function createSessionCard(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 card = document.createElement('div');
+        card.className = `session-card session-card-${opts.kind || 'item'} ${opts.className || ''}`.trim();
+        card.classList.toggle('has-active', !!opts.hasActive);
 
         const button = document.createElement('button');
         button.type = 'button';
-        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');
-        }
+        button.className = 'session-card-button';
+        button.classList.toggle('active', !!opts.active);
         if (opts.kind === 'agent') {
             button.setAttribute('aria-selected', opts.active ? 'true' : 'false');
         }
-        button.classList.toggle('active', !!opts.active);
+        button.addEventListener('click', function () {
+            if (typeof opts.onClick === 'function') {
+                opts.onClick();
+            }
+        });
 
         const main = document.createElement('div');
-        main.className = 'tree-node-main';
+        main.className = 'session-card-main';
 
-        const title = document.createElement('div');
-        title.className = opts.titleClassName || 'tree-node-title';
+        const titleRow = document.createElement('div');
+        titleRow.className = 'session-card-title-row';
+        const title = document.createElement('span');
+        title.className = 'session-card-title';
         title.textContent = opts.title || '';
         title.title = opts.title || '';
-        main.appendChild(title);
+        titleRow.appendChild(title);
+        if (opts.statusLabel) {
+            const statusBadge = document.createElement('span');
+            statusBadge.className = `tree-node-status ${opts.statusTone || 'unknown'}`;
+            statusBadge.textContent = opts.statusLabel;
+            titleRow.appendChild(statusBadge);
+        }
+        main.appendChild(titleRow);
 
         if (opts.meta) {
             const meta = document.createElement('div');
-            meta.className = `tree-node-meta ${opts.metaClassName || ''}`.trim();
+            meta.className = 'session-card-meta';
             meta.textContent = opts.meta;
             main.appendChild(meta);
         }
+        if (opts.subMeta) {
+            const subMeta = document.createElement('div');
+            subMeta.className = 'session-card-submeta';
+            subMeta.textContent = opts.subMeta;
+            subMeta.title = opts.subMeta;
+            main.appendChild(subMeta);
+        }
 
         button.appendChild(main);
-        row.appendChild(button);
+        card.appendChild(button);
         if (opts.overlayNode) {
-            row.appendChild(opts.overlayNode);
+            card.appendChild(opts.overlayNode);
         }
-
-        const control = {
-            root: row,
-            button,
-            disclosure: prefixControl.disclosure
-        };
-        setDisclosureExpanded(control, !!opts.expanded);
-        return control;
+        return { root: card, button };
     }
 
-    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 containerMenu = createTreeNodeMenu([
-                        {
-                            label: '新建 AGENT',
-                            onClick: function () {
-                                createAgentSession(containerName);
-                            }
-                        },
-                        {
-                            label: '删除容器',
-                            danger: true,
-                            onClick: function () {
-                                removeContainerByName(containerName);
-                            }
-                        }
-                    ]);
-
-                    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: containerMenu,
-                        onToggle: function (expanded) {
-                            setSidebarContainerExpanded(containerGroup.containerName, expanded);
-                        },
-                        children: (Array.isArray(containerGroup.sessions) ? containerGroup.sessions : []).map(function (session) {
-                            const agentTitle = session.agentName || session.name;
-                            return {
-                                kind: 'agent',
-                                title: agentTitle,
-                                meta: formatDateTime(session.updatedAt) || '暂无更新',
-                                className: historyClassName,
-                                active: state.active === session.name,
-                                sessionName: session.name,
-                                overlayNode: createTreeNodeMenu([
-                                    {
-                                        label: '删除 AGENT',
-                                        danger: true,
-                                        onClick: function () {
-                                            removeAgentSessionByName(session.name, agentTitle);
-                                        }
-                                    }
-                                ])
-                            };
-                        })
-                    };
-                })
-            };
-        });
+    function navigateTo(level, params) {
+        const opts = params && typeof params === 'object' ? params : {};
+        if (level === 'agents') {
+            const containerName = String(opts.container || '').trim();
+            if (!containerName) {
+                return;
+            }
+            state.navLevel = 'agents';
+            state.navContainer = containerName;
+        } else {
+            state.navLevel = 'containers';
+            state.navContainer = '';
+        }
+        persistSidebarNavState();
+        renderSessions();
     }
 
-    function renderSessionTreeNodes(nodes, parentNode, ancestorHasNext) {
-        (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
+    function renderBreadcrumb() {
+        if (!sessionBreadcrumb) {
+            return;
+        }
+        sessionBreadcrumb.innerHTML = '';
+
+        const rootCrumb = document.createElement('button');
+        rootCrumb.type = 'button';
+        rootCrumb.className = 'crumb-item';
+        rootCrumb.textContent = '全部容器';
+        if (state.navLevel === 'containers') {
+            rootCrumb.classList.add('is-current');
+            rootCrumb.disabled = true;
+        } else {
+            rootCrumb.addEventListener('click', function () {
+                navigateTo('containers');
             });
+        }
+        sessionBreadcrumb.appendChild(rootCrumb);
 
-            if (node.kind === 'agent') {
-                item.button.dataset.sessionName = node.sessionName || '';
-                state.sessionNodeMap.set(node.sessionName, item.button);
-                item.button.addEventListener('click', function () {
-                    handleSessionItemClick(node.sessionName || '');
+        if (state.navLevel === 'agents' && state.navContainer) {
+            const sep = document.createElement('span');
+            sep.className = 'crumb-sep';
+            sep.setAttribute('aria-hidden', 'true');
+            sep.textContent = '›';
+            sessionBreadcrumb.appendChild(sep);
+
+            const containerCrumb = document.createElement('span');
+            containerCrumb.className = 'crumb-item is-current';
+            containerCrumb.textContent = state.navContainer;
+            containerCrumb.title = state.navContainer;
+            sessionBreadcrumb.appendChild(containerCrumb);
+        }
+
+        const activeSession = getActiveSession();
+        if (activeSession) {
+            const activeContainerName = getSessionContainerName(activeSession);
+            const isActiveVisible = state.navLevel === 'agents' && state.navContainer === activeContainerName;
+            if (!isActiveVisible) {
+                const jumpBtn = document.createElement('button');
+                jumpBtn.type = 'button';
+                jumpBtn.className = 'crumb-jump-active';
+                jumpBtn.textContent = '回到当前会话';
+                jumpBtn.addEventListener('click', function () {
+                    navigateTo('agents', { container: activeContainerName });
                 });
-                parentNode.appendChild(item.root);
-                return;
+                sessionBreadcrumb.appendChild(jumpBtn);
             }
+        }
+    }
+
+    function renderContainerLevel(groups) {
+        sessionList.innerHTML = '';
+        if (!groups.length) {
+            const empty = document.createElement('div');
+            empty.className = 'empty';
+            empty.textContent = state.containerSearchQuery.trim() ? '没有匹配的容器' : '暂无 manyoyo 容器';
+            sessionList.appendChild(empty);
+            return;
+        }
+        groups.forEach(function (containerGroup) {
+            const status = sessionStatusInfo(containerGroup.status);
+            const item = createSessionCard({
+                kind: 'container',
+                className: status.tone === 'history' ? 'tree-node-tone-history' : '',
+                title: containerGroup.containerRemark || containerGroup.containerName,
+                meta: containerGroup.containerRemark ? containerGroup.containerName : '',
+                statusLabel: status.label,
+                statusTone: status.tone,
+                subMeta: containerGroup.hostPath,
+                hasActive: containerContainsActiveSession(containerGroup),
+                onClick: function () {
+                    navigateTo('agents', { container: containerGroup.containerName });
+                },
+                overlayNode: createTreeNodeMenu([
+                    {
+                        label: '新建 AGENT',
+                        onClick: function () {
+                            createAgentSession(containerGroup.containerName);
+                        }
+                    },
+                    {
+                        label: '编辑备注',
+                        onClick: function () {
+                            editContainerRemark(containerGroup);
+                        }
+                    },
+                    {
+                        label: '创建相同配置容器',
+                        onClick: function () {
+                            openCloneModal('clone-config', containerGroup.containerName);
+                        }
+                    },
+                    {
+                        label: '复制容器',
+                        onClick: function () {
+                            openCloneModal('duplicate', containerGroup.containerName);
+                        }
+                    },
+                    {
+                        label: '删除容器',
+                        danger: true,
+                        onClick: function () {
+                            removeContainerByName(containerGroup.containerName);
+                        }
+                    }
+                ])
+            });
+            sessionList.appendChild(item.root);
+        });
+    }
 
-            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);
+    async function editContainerRemark(containerGroup) {
+        const current = containerGroup.containerRemark || '';
+        const input = window.prompt('设置容器备注（留空清除备注）', current);
+        if (input === null) {
+            return;
+        }
+        const remark = String(input || '').trim();
+        try {
+            await api('/api/sessions/' + encodeURIComponent(containerGroup.containerName) + '/container-remark', {
+                method: 'POST',
+                body: JSON.stringify({ remark })
+            });
+            await refreshSessionsSilent({ preferredName: state.active });
+        } catch (e) {
+            alert(e.message);
+        }
+    }
 
-            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));
-            block.appendChild(childrenNode);
-            parentNode.appendChild(block);
+    async function editAgentRemark(session) {
+        const current = session.agentRemark || '';
+        const input = window.prompt('设置 AGENT 备注（留空清除备注）', current);
+        if (input === null) {
+            return;
+        }
+        const remark = String(input || '').trim();
+        try {
+            await api('/api/sessions/' + encodeURIComponent(session.name) + '/agent-remark', {
+                method: 'POST',
+                body: JSON.stringify({ remark })
+            });
+            await refreshSessionsSilent({ preferredName: state.active });
+        } catch (e) {
+            alert(e.message);
+        }
+    }
 
-            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);
-            }
+    function renderAgentLevel(containerGroup) {
+        sessionList.innerHTML = '';
+        const sessions = containerGroup && Array.isArray(containerGroup.sessions) ? containerGroup.sessions : [];
+        if (!sessions.length) {
+            const empty = document.createElement('div');
+            empty.className = 'empty';
+            empty.textContent = '该容器下暂无 AGENT';
+            sessionList.appendChild(empty);
+            return;
+        }
+        sessions.forEach(function (session) {
+            const agentTitle = session.agentName || session.name;
+            const displayTitle = session.agentRemark || agentTitle;
+            const dateLabel = formatDateTime(session.updatedAt) || '暂无更新';
+            const item = createSessionCard({
+                kind: 'agent',
+                title: displayTitle,
+                meta: session.agentRemark ? agentTitle : dateLabel,
+                subMeta: session.agentRemark ? dateLabel : '',
+                active: state.active === session.name,
+                onClick: function () {
+                    handleSessionItemClick(session.name);
+                },
+                overlayNode: createTreeNodeMenu([
+                    {
+                        label: '编辑备注',
+                        onClick: function () {
+                            editAgentRemark(session);
+                        }
+                    },
+                    {
+                        label: '删除 AGENT',
+                        danger: true,
+                        onClick: function () {
+                            removeAgentSessionByName(session.name, agentTitle);
+                        }
+                    }
+                ])
+            });
+            item.button.dataset.sessionName = session.name;
+            state.sessionNodeMap.set(session.name, item.button);
+            sessionList.appendChild(item.root);
         });
     }
 
@@ -3434,45 +3372,24 @@
 
     function updateSidebarActiveSelection() {
         state.sessionNodeMap.forEach(function (buttonNode, sessionName) {
-            const isActive = sessionName === state.active;
             if (!buttonNode) {
                 return;
             }
+            const isActive = sessionName === state.active;
             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;
-        }
+        renderBreadcrumb();
     }
 
     function renderSessions() {
-        const directoryCount = new Set(state.sessions.map(function (session) {
-            return String(session && session.hostPath ? session.hostPath : '').trim() || '未配置目录';
-        }).filter(Boolean)).size;
         const containerCount = new Set(state.sessions.map(function (session) {
             return session && session.containerName ? session.containerName : '';
         }).filter(Boolean)).size;
         sessionCount.textContent = state.loadingSessions
             ? '加载中...'
-            : `${directoryCount} 个 目录 / ${containerCount} 个容器 / ${state.sessions.length} 个 AGENT`;
+            : `${containerCount} 个容器 / ${state.sessions.length} 个 AGENT`;
+        renderBreadcrumb();
 
         if (state.loadingSessions) {
             renderSessionsLoading();
@@ -3490,18 +3407,153 @@
             return;
         }
 
-        sessionList.innerHTML = '';
         state.sessionNodeMap.clear();
-        state.sessionRenderMode = 'tree';
+        state.sessionRenderMode = 'cards';
 
-        const grouped = groupSessionsByDirectory(state.sessions);
-        const treeNodes = buildSessionTreeNodes(grouped);
-        renderSessionTreeNodes(treeNodes, sessionList, []);
-        updateSidebarActiveSelection();
+        const groups = groupSessionsByContainer(state.sessions);
+        let activeGroup = null;
+        if (state.navLevel === 'agents') {
+            activeGroup = groups.find(function (group) {
+                return group.containerName === state.navContainer;
+            }) || null;
+            if (!activeGroup) {
+                state.navLevel = 'containers';
+                state.navContainer = '';
+                persistSidebarNavState();
+                renderBreadcrumb();
+            }
+        }
 
+        if (containerSearchInput) {
+            containerSearchInput.hidden = state.navLevel !== 'containers';
+        }
+
+        if (state.navLevel === 'agents' && activeGroup) {
+            renderAgentLevel(activeGroup);
+        } else {
+            renderContainerLevel(filterContainerGroupsByQuery(groups, state.containerSearchQuery));
+        }
+
+        updateSidebarActiveSelection();
         scrollActiveSessionIntoView();
     }
 
+    function filterContainerGroupsByQuery(groups, query) {
+        const text = String(query || '').trim().toLowerCase();
+        if (!text) {
+            return groups;
+        }
+        return groups.filter(function (group) {
+            return group.containerName.toLowerCase().includes(text)
+                || String(group.hostPath || '').toLowerCase().includes(text);
+        });
+    }
+
+    function suggestCloneContainerName(baseName) {
+        const taken = new Set(state.sessions.map(getSessionContainerName).filter(Boolean));
+        const escapedBase = baseName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const pattern = new RegExp(`^${escapedBase}-copy(\\d+)$`);
+        let maxN = 0;
+        taken.forEach(function (name) {
+            const matched = name.match(pattern);
+            if (matched) {
+                const n = Number(matched[1]);
+                if (Number.isFinite(n) && n > maxN) {
+                    maxN = n;
+                }
+            }
+        });
+        return `${baseName}-copy${maxN + 1}`;
+    }
+
+    function openCloneModal(mode, sourceContainerName) {
+        const source = String(sourceContainerName || '').trim();
+        if (!source) {
+            return;
+        }
+        state.cloneModal.open = true;
+        state.cloneModal.mode = mode;
+        state.cloneModal.sourceContainerName = source;
+        state.cloneModal.nameDraft = suggestCloneContainerName(source);
+        state.cloneModal.submitting = false;
+        state.cloneModal.error = '';
+        renderCloneModal();
+        syncUi();
+    }
+
+    function closeCloneModal() {
+        state.cloneModal.open = false;
+        state.cloneModal.mode = '';
+        state.cloneModal.sourceContainerName = '';
+        state.cloneModal.nameDraft = '';
+        state.cloneModal.submitting = false;
+        state.cloneModal.error = '';
+        renderCloneModal();
+        syncUi();
+    }
+
+    function showCloneModalError(message) {
+        if (!cloneNameError) {
+            return;
+        }
+        const text = String(message || '').trim();
+        cloneNameError.hidden = !text;
+        cloneNameError.textContent = text;
+    }
+
+    function renderCloneModal() {
+        if (!cloneNameModal) {
+            return;
+        }
+        setModalVisible(cloneNameModal, state.cloneModal.open);
+        if (cloneNameTitle) {
+            cloneNameTitle.textContent = state.cloneModal.mode === 'duplicate' ? '复制容器' : '创建相同配置容器';
+        }
+        if (cloneNameTip) {
+            cloneNameTip.textContent = state.cloneModal.mode === 'duplicate'
+                ? `将复制「${state.cloneModal.sourceContainerName}」的配置与全部 AGENT 对话历史到新容器。`
+                : `将以「${state.cloneModal.sourceContainerName}」的配置创建一个新容器，不复制对话历史。`;
+        }
+        if (cloneNameInput && document.activeElement !== cloneNameInput) {
+            cloneNameInput.value = state.cloneModal.nameDraft;
+        }
+        if (cloneNameConfirmBtn) {
+            cloneNameConfirmBtn.disabled = state.cloneModal.submitting;
+        }
+        if (cloneNameCancelBtn) {
+            cloneNameCancelBtn.disabled = state.cloneModal.submitting;
+        }
+        showCloneModalError(state.cloneModal.error);
+    }
+
+    async function submitCloneModal() {
+        if (state.cloneModal.submitting) {
+            return;
+        }
+        const name = String(state.cloneModal.nameDraft || '').trim();
+        const mode = state.cloneModal.mode;
+        const source = state.cloneModal.sourceContainerName;
+        state.cloneModal.submitting = true;
+        showCloneModalError('');
+        renderCloneModal();
+        try {
+            const endpoint = mode === 'duplicate' ? 'duplicate' : 'clone-config';
+            const data = await api('/api/sessions/' + encodeURIComponent(source) + '/' + endpoint, {
+                method: 'POST',
+                body: JSON.stringify(name ? { containerName: name } : {})
+            });
+            closeCloneModal();
+            await loadSessions(data.name);
+            if (data.resumeMayFail) {
+                alert('复制完成。注意：AGENT 对话历史已复制，但底层 CLI 会话续接可能失败，如遇失败请以新对话继续。');
+            }
+        } catch (e) {
+            state.cloneModal.submitting = false;
+            showCloneModalError(e.message);
+            renderCloneModal();
+        }
+    }
+
     function renderMessagesLoading() {
         messagesNode.innerHTML = '';
         state.messageRenderKeys = [];
@@ -3730,7 +3782,7 @@
     function applySessionsSnapshot(rawSessions, preferredName, preferredContainerName) {
         const previousActive = state.active;
         state.sessions = Array.isArray(rawSessions) ? rawSessions : [];
-        pruneSidebarTreeState();
+        pruneSidebarNavState();
 
         if (typeof preferredName === 'string' && preferredName.trim()) {
             state.active = preferredName.trim();
@@ -3745,7 +3797,7 @@
             state.active = findLatestCreatedSessionName(state.sessions, preferredContainerName) || state.sessions[0].name;
         }
         if (state.active && state.active !== previousActive) {
-            ensureSessionPathExpanded(state.active);
+            ensureSessionNavPath(state.active);
             state.pendingActiveSessionScroll = true;
         }
         if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
@@ -4683,6 +4735,37 @@
         });
     }
 
+    if (cloneNameModal) {
+        cloneNameModal.addEventListener('click', function (event) {
+            if (event.target === cloneNameModal && !state.cloneModal.submitting) {
+                closeCloneModal();
+            }
+        });
+    }
+    if (cloneNameCancelBtn) {
+        cloneNameCancelBtn.addEventListener('click', function () {
+            if (!state.cloneModal.submitting) {
+                closeCloneModal();
+            }
+        });
+    }
+    if (cloneNameConfirmBtn) {
+        cloneNameConfirmBtn.addEventListener('click', function () {
+            submitCloneModal();
+        });
+    }
+    if (cloneNameInput) {
+        cloneNameInput.addEventListener('input', function () {
+            state.cloneModal.nameDraft = cloneNameInput.value;
+        });
+    }
+    if (containerSearchInput) {
+        containerSearchInput.addEventListener('input', function () {
+            state.containerSearchQuery = containerSearchInput.value;
+            renderSessions();
+        });
+    }
+
     window.addEventListener('keydown', function (event) {
         if (event.key === 'Escape' && state.configModalOpen) {
             closeConfigModal();
@@ -4703,6 +4786,9 @@
             closeExternalLinkModalView();
             syncUi();
         }
+        if (event.key === 'Escape' && state.cloneModal.open && !state.cloneModal.submitting) {
+            closeCloneModal();
+        }
         if (event.key === 'Escape' && state.mobileSidebarOpen) {
             closeMobileSessionPanel();
         }
@@ -4813,7 +4899,7 @@
         disconnectTerminal('', true);
     });
 
-    loadSidebarTreeState();
+    loadSidebarNavState();
     renderSessions();
     renderMessages(state.messages);
     setMobileSessionPanel(false);