@xcanwin/manyoyo 5.7.4 → 5.7.7

package/lib/web/frontend/app.css

@@ -13,6 +13,7 @@
 
     --line: #d9c7ad;
     --line-strong: #b59263;
+    --line-soft: rgba(181, 146, 99, 0.26);
 
     --text: #1f1a14;
     --muted: #6a5f52;
@@ -415,7 +416,7 @@ textarea:focus-visible {
     padding-right: 4px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
 #sessionList::-webkit-scrollbar,
@@ -533,14 +534,126 @@ textarea:focus-visible {
 .workbench-group {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
-.workbench-group-head {
-    padding: 10px 12px;
-    border: 1px solid rgba(181, 146, 99, 0.38);
-    border-radius: 12px;
+button.tree-toggle {
+    width: 100%;
+    text-align: left;
+    color: var(--text);
     background: rgba(255, 250, 242, 0.92);
+    border-color: rgba(181, 146, 99, 0.38);
+    padding: 10px 12px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+button.tree-toggle:hover {
+    transform: none;
+    background: #fff6eb;
+    border-color: #d1aa7f;
+}
+
+button.tree-toggle:active {
+    transform: none;
+}
+
+button.tree-toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(196, 85, 31, 0.14);
+}
+
+.tree-toggle-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.tree-toggle-meta {
+    color: var(--muted);
+    font-size: 11px;
+    line-height: 1.45;
+    word-break: break-word;
+}
+
+.tree-toggle-caret {
+    color: #8c7257;
+    font-size: 18px;
+    line-height: 1;
+    flex-shrink: 0;
+    transition: transform 140ms ease;
+}
+
+.tree-toggle[aria-expanded="true"] .tree-toggle-caret {
+    transform: rotate(90deg);
+}
+
+.workbench-group-head {
+    padding: 10px 14px;
+    border: 1px solid rgba(181, 146, 99, 0.34);
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98) 0%, rgba(252, 242, 230, 0.96) 100%);
+}
+
+.workbench-path-bar .tree-toggle-main {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 3px;
+}
+
+.workbench-path-bar .workbench-group-kicker {
+    grid-column: 1;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    border: 1px solid rgba(181, 146, 99, 0.34);
+    background: rgba(255, 255, 255, 0.56);
+}
+
+.workbench-path-bar .workbench-group-title {
+    grid-column: 2;
+    grid-row: 1;
+    margin-top: 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.workbench-path-bar .tree-toggle-meta {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.workbench-group.has-active .workbench-group-head,
+.container-card.has-active {
+    border-color: #c68d5a;
+    box-shadow: 0 0 0 2px rgba(196, 85, 31, 0.08);
+}
+
+.workbench-group-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-left: 14px;
+    padding-left: 12px;
+    border-left: 1px solid var(--line-soft);
+}
+
+.workbench-group-body[hidden] {
+    display: none;
 }
 
 .workbench-group-kicker,
@@ -564,61 +677,170 @@ textarea:focus-visible {
 .container-stack {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
 }
 
 .container-card {
-    border: 1px solid var(--line);
-    border-radius: 12px;
-    background: rgba(255, 255, 255, 0.9);
-    padding: 10px;
+    border: 1px solid rgba(181, 146, 99, 0.52);
+    border-radius: 16px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 242, 232, 0.98) 100%);
+    padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 10px;
+    box-shadow: 0 10px 22px rgba(44, 31, 15, 0.08);
 }
 
 .container-card-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.container-toggle {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--text);
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    gap: 12px;
+}
+
+button.container-toggle:hover,
+button.container-toggle:active {
+    transform: none;
+    background: transparent;
+}
+
+button.container-toggle:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(196, 85, 31, 0.14);
+}
+
+.container-toggle-main {
+    min-width: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.container-title-row {
+    display: flex;
+    align-items: flex-start;
     gap: 10px;
+    min-width: 0;
 }
 
-.container-card-info {
+.container-title-stack {
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }
 
+.sidebar-icon {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 11px;
+    border: 1px solid rgba(181, 146, 99, 0.34);
+    background: linear-gradient(180deg, rgba(255, 244, 232, 0.96) 0%, rgba(255, 252, 247, 0.9) 100%);
+    color: var(--accent-strong);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.sidebar-icon svg {
+    width: 18px;
+    height: 18px;
+    display: block;
+}
+
 .container-card-meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 8px;
     align-items: center;
-    color: var(--muted);
+}
+
+.sidebar-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 26px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.container-status-pill {
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+}
+
+.container-agent-badge {
+    background: rgba(15, 124, 114, 0.1);
+    border-color: rgba(15, 124, 114, 0.22);
+    color: var(--subaccent-strong);
+}
+
+.container-card-info {
+    color: #7b6d5d;
     font-size: 11px;
+    line-height: 1.45;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .add-agent-btn {
-    padding: 7px 10px;
+    align-self: flex-start;
+    padding: 7px 11px;
     font-size: 12px;
+    border-radius: 999px;
+    white-space: nowrap;
+    margin-bottom: 2px;
 }
 
 .agent-list {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 7px;
+}
+
+.container-card-body {
+    margin-top: 2px;
+    padding: 10px;
+    border: 1px solid rgba(181, 146, 99, 0.28);
+    border-top-color: rgba(181, 146, 99, 0.4);
+    border-radius: 13px;
+    background: linear-gradient(180deg, rgba(244, 238, 228, 0.88) 0%, rgba(255, 255, 255, 0.98) 100%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
+}
+
+.agent-list[hidden] {
+    display: none;
 }
 
 .agent-item {
     text-align: left;
     width: 100%;
-    border: 1px solid rgba(181, 146, 99, 0.42);
-    background: var(--panel-strong);
+    border: 1px solid rgba(181, 146, 99, 0.38);
+    background: rgba(255, 255, 255, 0.94);
     color: var(--text);
-    border-radius: 10px;
-    padding: 10px;
+    border-radius: 12px;
+    padding: 10px 11px;
     animation: itemIn 220ms ease both;
     animation-delay: calc(var(--item-index, 0) * 24ms);
 }
@@ -1477,6 +1699,28 @@ details.trace-card > .trace-card-summary {
     }
 }
 
+.streaming-reply {
+    border-color: var(--subaccent);
+    box-shadow: 0 8px 16px rgba(15, 124, 114, 0.10);
+}
+
+.streaming-cursor {
+    display: inline-block;
+    width: 7px;
+    height: 16px;
+    margin-left: 2px;
+    vertical-align: text-bottom;
+    background: var(--subaccent);
+    border-radius: 2px;
+    animation: blink-cursor 640ms steps(2, start) infinite;
+}
+
+@keyframes blink-cursor {
+    to {
+        visibility: hidden;
+    }
+}
+
 @keyframes shimmer {
     100% {
         transform: translateX(100%);

package/lib/web/frontend/app.html

@@ -58,6 +58,7 @@
                             >更多</button>
                             <div class="header-actions" id="headerActions">
                                 <button type="button" id="refreshBtn" class="secondary">刷新</button>
+                                <button type="button" id="addAgentBtn" class="secondary">新建AGENT</button>
                                 <button type="button" id="removeBtn" class="danger-outline">删除容器</button>
                                 <button type="button" id="removeAllBtn" class="danger">删除对话</button>
                             </div>

package/lib/web/frontend/app.js

@@ -63,6 +63,12 @@
         createRuns: {},
         sessionNodeMap: new Map(),
         sessionRenderMode: 'empty',
+        sidebarTreeLoaded: false,
+        sidebarTree: {
+            directories: {},
+            containers: {}
+        },
+        pendingActiveSessionScroll: false,
         directoryPicker: {
             open: false,
             loading: false,
@@ -110,6 +116,7 @@
     const viewDetailBtn = document.getElementById('viewDetailBtn');
     const viewConfigBtn = document.getElementById('viewConfigBtn');
     const viewCheckBtn = document.getElementById('viewCheckBtn');
+    const addAgentBtn = document.getElementById('addAgentBtn');
     const mobileSidebarClose = document.getElementById('mobileSidebarClose');
     const sidebarBackdrop = document.getElementById('sidebarBackdrop');
     const openConfigBtn = document.getElementById('openConfigBtn');
@@ -205,12 +212,63 @@
     const GEMINI_YOLO_FLAG = '--yolo';
     const CODEX_DANGEROUS_FLAG = '--dangerously-bypass-approvals-and-sandbox';
     const OPENCODE_PERMISSION_KEY = 'OPENCODE_PERMISSION=';
+    const SIDEBAR_TREE_STORAGE_KEY = 'manyoyo.web.sidebarTree.v1';
     const markdownRenderer = window.ManyoyoMarkdown
         && typeof window.ManyoyoMarkdown.shouldRenderMessage === 'function'
         && typeof window.ManyoyoMarkdown.render === 'function'
         ? window.ManyoyoMarkdown
         : null;
 
+    function normalizeBooleanMap(source) {
+        const result = {};
+        if (!source || typeof source !== 'object' || Array.isArray(source)) {
+            return result;
+        }
+        Object.keys(source).forEach(function (key) {
+            if (typeof source[key] === 'boolean') {
+                result[String(key)] = source[key];
+            }
+        });
+        return result;
+    }
+
+    function loadSidebarTreeState() {
+        if (state.sidebarTreeLoaded) {
+            return;
+        }
+        state.sidebarTreeLoaded = true;
+        try {
+            if (!window.localStorage) {
+                return;
+            }
+            const raw = window.localStorage.getItem(SIDEBAR_TREE_STORAGE_KEY);
+            if (!raw) {
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            state.sidebarTree = {
+                directories: normalizeBooleanMap(parsed && parsed.directories),
+                containers: normalizeBooleanMap(parsed && parsed.containers)
+            };
+        } catch (e) {
+            state.sidebarTree = {
+                directories: {},
+                containers: {}
+            };
+        }
+    }
+
+    function persistSidebarTreeState() {
+        try {
+            if (!window.localStorage) {
+                return;
+            }
+            window.localStorage.setItem(SIDEBAR_TREE_STORAGE_KEY, JSON.stringify(state.sidebarTree));
+        } catch (e) {
+            // 忽略浏览器存储异常，避免影响主流程
+        }
+    }
+
     function appendPlainMessageContent(bubble, content) {
         const pre = document.createElement('pre');
         pre.textContent = content == null ? '' : String(content);
@@ -412,6 +470,9 @@
     function roleName(role, message) {
         if (role === 'user') return '我';
         if (role === 'assistant') {
+            if (message && message.streamingReply) {
+                return 'AGENT 实时回复';
+            }
             if (message && message.streamTrace) {
                 return 'AGENT 过程';
             }
@@ -459,6 +520,132 @@
         });
     }
 
+    function getSessionDirectoryPath(session) {
+        return String(session && session.hostPath ? session.hostPath : '').trim() || '未配置目录';
+    }
+
+    function getSessionContainerName(session) {
+        return String(session && session.containerName ? session.containerName : '').trim();
+    }
+
+    function findSessionByName(sessionName) {
+        const target = String(sessionName || '').trim();
+        if (!target) {
+            return null;
+        }
+        return state.sessions.find(function (session) {
+            return session && session.name === target;
+        }) || null;
+    }
+
+    function pruneSidebarTreeState() {
+        loadSidebarTreeState();
+
+        const validDirectories = new Set(state.sessions.map(getSessionDirectoryPath));
+        const validContainers = new Set(state.sessions.map(getSessionContainerName).filter(Boolean));
+        let changed = false;
+
+        Object.keys(state.sidebarTree.directories).forEach(function (key) {
+            if (!validDirectories.has(key)) {
+                delete state.sidebarTree.directories[key];
+                changed = true;
+            }
+        });
+
+        Object.keys(state.sidebarTree.containers).forEach(function (key) {
+            if (!validContainers.has(key)) {
+                delete state.sidebarTree.containers[key];
+                changed = true;
+            }
+        });
+
+        if (changed) {
+            persistSidebarTreeState();
+        }
+    }
+
+    function setSidebarDirectoryExpanded(directoryPath, expanded, options) {
+        const path = String(directoryPath || '').trim();
+        if (!path) {
+            return false;
+        }
+        loadSidebarTreeState();
+        const opts = options && typeof options === 'object' ? options : {};
+        if (state.sidebarTree.directories[path] === expanded) {
+            return false;
+        }
+        state.sidebarTree.directories[path] = expanded;
+        if (opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return true;
+    }
+
+    function setSidebarContainerExpanded(containerName, expanded, options) {
+        const name = String(containerName || '').trim();
+        if (!name) {
+            return false;
+        }
+        loadSidebarTreeState();
+        const opts = options && typeof options === 'object' ? options : {};
+        if (state.sidebarTree.containers[name] === expanded) {
+            return false;
+        }
+        state.sidebarTree.containers[name] = expanded;
+        if (opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return true;
+    }
+
+    function ensureSessionPathExpanded(sessionName, options) {
+        const session = findSessionByName(sessionName);
+        if (!session) {
+            return false;
+        }
+        const opts = options && typeof options === 'object' ? options : {};
+        const directoryPath = getSessionDirectoryPath(session);
+        const containerName = getSessionContainerName(session);
+        const changedDirectory = setSidebarDirectoryExpanded(directoryPath, true, { persist: false });
+        const changedContainer = setSidebarContainerExpanded(containerName, true, { persist: false });
+        if ((changedDirectory || changedContainer) && opts.persist !== false) {
+            persistSidebarTreeState();
+        }
+        return changedDirectory || changedContainer;
+    }
+
+    function directoryContainsActiveSession(directoryGroup) {
+        const groups = directoryGroup && Array.isArray(directoryGroup.containers) ? directoryGroup.containers : [];
+        return groups.some(function (containerGroup) {
+            return containerContainsActiveSession(containerGroup);
+        });
+    }
+
+    function containerContainsActiveSession(containerGroup) {
+        const sessions = containerGroup && Array.isArray(containerGroup.sessions) ? containerGroup.sessions : [];
+        return sessions.some(function (session) {
+            return session && session.name === state.active;
+        });
+    }
+
+    function isDirectoryExpanded(directoryGroup) {
+        loadSidebarTreeState();
+        const key = String(directoryGroup && directoryGroup.path ? directoryGroup.path : '').trim();
+        if (key && typeof state.sidebarTree.directories[key] === 'boolean') {
+            return state.sidebarTree.directories[key];
+        }
+        return false;
+    }
+
+    function isContainerExpanded(containerGroup) {
+        loadSidebarTreeState();
+        const key = String(containerGroup && containerGroup.containerName ? containerGroup.containerName : '').trim();
+        if (key && typeof state.sidebarTree.containers[key] === 'boolean') {
+            return state.sidebarTree.containers[key];
+        }
+        return false;
+    }
+
     function normalizeSlashPath(value) {
         return String(value || '').replace(/\\/g, '/');
     }
@@ -1524,6 +1711,9 @@
         const activeAgentRunning = isAgentRunActiveForSession(state.active);
         const busy = state.loadingSessions || state.loadingMessages || state.sending;
         refreshBtn.disabled = busy;
+        if (addAgentBtn) {
+            addAgentBtn.disabled = !state.active || busy;
+        }
         removeBtn.disabled = !state.active || busy;
         removeAllBtn.disabled = !state.active || busy;
         sendBtn.disabled = !activityTab || !state.active || busy || (agentMode && !agentEnabled);
@@ -1966,6 +2156,7 @@
             disconnectTerminal('会话切换，终端已断开', true);
         }
         state.active = sessionName;
+        ensureSessionPathExpanded(sessionName);
         state.sessionDetail = null;
         state.sessionDetailError = '';
         if (isMobileLayout()) {
@@ -2044,13 +2235,160 @@
                 containerGroup.updatedAt = session.updatedAt;
             }
         });
-        return Array.from(groups.values()).sort(function (a, b) {
+        return Array.from(groups.values()).map(function (group) {
+            group.containers = Array.from(group.containers.values()).sort(function (a, b) {
+                const timeA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+                const timeB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+                return timeB - timeA;
+            });
+            group.containers.forEach(function (containerGroup) {
+                containerGroup.sessions.sort(function (a, b) {
+                    const timeA = a && a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+                    const timeB = b && b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+                    return timeB - timeA;
+                });
+            });
+            return group;
+        }).sort(function (a, b) {
             const timeA = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
             const timeB = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
             return timeB - timeA;
         });
     }
 
+    function createTreeMetaText(parts) {
+        return (parts || []).filter(Boolean).join(' · ');
+    }
+
+    function createTreeToggle(options) {
+        const opts = options && typeof options === 'object' ? options : {};
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `tree-toggle ${opts.className || ''}`.trim();
+        button.setAttribute('aria-expanded', opts.expanded ? 'true' : 'false');
+
+        const main = document.createElement('div');
+        main.className = 'tree-toggle-main';
+
+        const kicker = document.createElement('div');
+        kicker.className = opts.kickerClassName || 'workbench-group-kicker';
+        kicker.textContent = opts.kicker || '';
+        main.appendChild(kicker);
+
+        const title = document.createElement('div');
+        title.className = opts.titleClassName || 'workbench-group-title';
+        title.textContent = opts.title || '';
+        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);
+        }
+
+        return button;
+    }
+
+    function createSidebarIcon(name) {
+        const icon = document.createElement('span');
+        icon.className = `sidebar-icon ${name ? `sidebar-icon-${name}` : ''}`.trim();
+        icon.setAttribute('aria-hidden', 'true');
+
+        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('');
+        }
+
+        return icon;
+    }
+
+    function createSidebarBadge(text, className) {
+        const badge = document.createElement('span');
+        badge.className = `sidebar-badge ${className || ''}`.trim();
+        badge.textContent = text || '';
+        return badge;
+    }
+
+    function createContainerToggle(containerGroup, expanded) {
+        const status = sessionStatusInfo(containerGroup && containerGroup.status);
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'tree-toggle container-toggle';
+        button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+
+        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 = '容器';
+
+        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);
+
+        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 = '›';
+
+        button.appendChild(main);
+        button.appendChild(caret);
+
+        return button;
+    }
+
     function createAgentRow(session, index) {
         const status = sessionStatusInfo(session.status);
         const btn = document.createElement('button');
@@ -2091,6 +2429,19 @@
         return btn;
     }
 
+    function scrollActiveSessionIntoView() {
+        if (!state.pendingActiveSessionScroll || !state.active) {
+            return;
+        }
+        state.pendingActiveSessionScroll = false;
+        const targetNode = state.sessionNodeMap.get(state.active);
+        if (targetNode && typeof targetNode.scrollIntoView === 'function') {
+            targetNode.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }
+
     function renderSessions() {
         const containerCount = new Set(state.sessions.map(function (session) {
             return session && session.containerName ? session.containerName : '';
@@ -2123,38 +2474,52 @@
         let itemIndex = 0;
 
         grouped.forEach(function (directoryGroup) {
+            const directoryExpanded = isDirectoryExpanded(directoryGroup);
+            const directoryHasActive = directoryContainsActiveSession(directoryGroup);
             const group = document.createElement('section');
             group.className = 'workbench-group';
-
-            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.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) || '暂无更新'
+                ],
+                onClick: function () {
+                    setSidebarDirectoryExpanded(directoryGroup.path, !directoryExpanded);
+                    renderSessions();
+                }
+            });
             group.appendChild(groupHead);
 
             const containerStack = document.createElement('div');
-            containerStack.className = 'container-stack';
+            containerStack.className = 'container-stack workbench-group-body';
+            containerStack.hidden = !directoryExpanded;
 
-            Array.from(directoryGroup.containers.values()).forEach(function (containerGroup) {
-                const status = sessionStatusInfo(containerGroup.status);
+            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 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 containerToggle = createContainerToggle(containerGroup, containerExpanded);
+                containerToggle.addEventListener('click', function () {
+                    setSidebarContainerExpanded(containerGroup.containerName, !containerExpanded);
+                    renderSessions();
+                });
 
                 const addAgentBtn = document.createElement('button');
                 addAgentBtn.type = 'button';
@@ -2164,12 +2529,13 @@
                     createAgentSession(containerGroup.containerName);
                 });
 
-                containerHead.appendChild(containerInfo);
-                containerHead.appendChild(addAgentBtn);
+                containerHead.appendChild(containerToggle);
                 containerCard.appendChild(containerHead);
 
                 const agentList = document.createElement('div');
-                agentList.className = 'agent-list';
+                agentList.className = 'agent-list container-card-body';
+                agentList.hidden = !containerExpanded;
+                agentList.appendChild(addAgentBtn);
                 containerGroup.sessions.forEach(function (session) {
                     const row = createAgentRow(session, itemIndex);
                     state.sessionNodeMap.set(session.name, row);
@@ -2183,6 +2549,8 @@
             group.appendChild(containerStack);
             sessionList.appendChild(group);
         });
+
+        scrollActiveSessionIntoView();
     }
 
     function renderMessagesLoading() {
@@ -2216,6 +2584,11 @@
     }
 
     function getMessageRenderKey(msg, index) {
+        if (msg && msg.id && msg.streamingReply) {
+            const content = msg.content ? String(msg.content) : '';
+            const timestamp = msg.timestamp ? String(msg.timestamp) : '';
+            return `id:${msg.id}|streaming|${timestamp}|${content}`;
+        }
         if (msg && msg.id && msg.streamTrace) {
             const content = msg.content ? String(msg.content) : '';
             const timestamp = msg.timestamp ? String(msg.timestamp) : '';
@@ -2267,14 +2640,39 @@
         const bubble = document.createElement('div');
         bubble.className = 'bubble';
 
+        const isStreamingReply = Boolean(msg && msg.streamingReply);
         const shouldRenderStructuredTrace = Boolean(
             msg
             && msg.streamTrace
             && Array.isArray(msg.traceEvents)
             && msg.traceEvents.length
         );
-        const shouldRenderMarkdown = Boolean(!msg.streamTrace && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
-        if (shouldRenderStructuredTrace) {
+        const shouldRenderMarkdown = Boolean(!msg.streamTrace && !msg.streamingReply && markdownRenderer && markdownRenderer.shouldRenderMessage(msg));
+        if (isStreamingReply) {
+            bubble.classList.add('streaming-reply');
+            var replyContent = String(msg.content || '');
+            if (replyContent && markdownRenderer && typeof markdownRenderer.render === 'function') {
+                var mdNode = document.createElement('div');
+                mdNode.className = 'md-content';
+                var rendered = '';
+                try {
+                    rendered = String(markdownRenderer.render(replyContent) || '');
+                } catch (e) {
+                    rendered = '';
+                }
+                if (rendered) {
+                    mdNode.innerHTML = rendered;
+                    bubble.appendChild(mdNode);
+                } else {
+                    appendPlainMessageContent(bubble, replyContent);
+                }
+            } else {
+                appendPlainMessageContent(bubble, replyContent);
+            }
+            var cursor = document.createElement('span');
+            cursor.className = 'streaming-cursor';
+            bubble.appendChild(cursor);
+        } else if (shouldRenderStructuredTrace) {
             appendStructuredTraceContent(bubble, msg);
         } else if (shouldRenderMarkdown) {
             const markdownNode = document.createElement('div');
@@ -2365,7 +2763,9 @@
     }
 
     function applySessionsSnapshot(rawSessions, preferredName) {
+        const previousActive = state.active;
         state.sessions = Array.isArray(rawSessions) ? rawSessions : [];
+        pruneSidebarTreeState();
 
         if (typeof preferredName === 'string' && preferredName.trim()) {
             state.active = preferredName.trim();
@@ -2379,6 +2779,10 @@
         if (!state.active && state.sessions.length) {
             state.active = state.sessions[0].name;
         }
+        if (state.active && state.active !== previousActive) {
+            ensureSessionPathExpanded(state.active);
+            state.pendingActiveSessionScroll = true;
+        }
         if (state.terminal.sessionName && state.terminal.sessionName !== state.active) {
             disconnectTerminal('会话已变化，终端已断开', true);
         }
@@ -2638,11 +3042,55 @@
         });
     }
 
+    function appendStreamingReplyLocal(sessionName) {
+        var replyMessage = {
+            id: createLocalMessageId('local-streaming-reply'),
+            role: 'assistant',
+            content: '',
+            timestamp: new Date().toISOString(),
+            mode: 'agent',
+            streamingReply: true
+        };
+        if (state.active === sessionName) {
+            state.messages.push(replyMessage);
+        }
+        return replyMessage.id;
+    }
+
+    function updateStreamingReplyLocal(sessionName, replyMessageId, content) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        for (var i = state.messages.length - 1; i >= 0; i -= 1) {
+            var message = state.messages[i];
+            if (!message || String(message.id || '') !== String(replyMessageId || '')) {
+                continue;
+            }
+            message.content = String(content || '');
+            message.timestamp = new Date().toISOString();
+            return;
+        }
+    }
+
+    function removeStreamingReplyLocal(sessionName, replyMessageId) {
+        if (state.active !== sessionName) {
+            return;
+        }
+        for (var i = state.messages.length - 1; i >= 0; i -= 1) {
+            var message = state.messages[i];
+            if (message && String(message.id || '') === String(replyMessageId || '') && message.streamingReply) {
+                state.messages.splice(i, 1);
+                return;
+            }
+        }
+    }
+
     async function sendAgentPromptStream(sessionName, inputText, pendingMessage) {
         const traceMessageId = appendAgentTraceMessageLocal(sessionName);
         const traceLines = ['[执行过程]', '等待 Agent 启动…'];
         let finalResult = null;
         let streamError = null;
+        let streamingReplyId = null;
 
         state.agentRun.active = true;
         state.agentRun.sessionName = sessionName;
@@ -2692,6 +3140,20 @@
                         pushTraceLine(event.text || '', event.traceEvent || null);
                         return;
                     }
+                    if (event.type === 'content_delta') {
+                        var content = String(event.content || '').trim();
+                        if (!content) {
+                            return;
+                        }
+                        if (!streamingReplyId) {
+                            streamingReplyId = appendStreamingReplyLocal(sessionName);
+                        }
+                        updateStreamingReplyLocal(sessionName, streamingReplyId, content);
+                        if (state.active === sessionName) {
+                            renderMessages(state.messages, { stickToBottom: true });
+                        }
+                        return;
+                    }
                     if (event.type === 'result') {
                         finalResult = event;
                         if (event.interrupted) {
@@ -2711,6 +3173,9 @@
                 streamError = e;
             }
         } finally {
+            if (streamingReplyId) {
+                removeStreamingReplyLocal(sessionName, streamingReplyId);
+            }
             const pendingIndex = confirmPendingUserMessage(sessionName, pendingMessage.id);
             if (pendingIndex >= 0 && pendingIndex < state.messageRenderKeys.length) {
                 if (pendingIndex < messagesNode.children.length) {
@@ -3099,6 +3564,18 @@
         });
     }
 
+    if (addAgentBtn) {
+        addAgentBtn.addEventListener('click', function () {
+            const activeSession = getActiveSession();
+            const targetContainer = activeSession ? getSessionContainerName(activeSession) : '';
+            if (!targetContainer) {
+                return;
+            }
+            closeMobileActionsMenu();
+            createAgentSession(targetContainer);
+        });
+    }
+
     if (configModal) {
         configModal.addEventListener('click', function (event) {
             if (event.target === configModal && !state.configSaving) {
@@ -3223,6 +3700,7 @@
         disconnectTerminal('', true);
     });
 
+    loadSidebarTreeState();
     renderSessions();
     renderMessages(state.messages);
     setMobileSessionPanel(false);

package/lib/web/server.js

@@ -1053,6 +1053,48 @@ function prepareStructuredTraceEvents(agentProgram, payload, state) {
     return [];
 }
 
+function extractContentDeltaFromPayload(agentProgram, payload) {
+    if (!payload || typeof payload !== 'object') {
+        return null;
+    }
+    if (agentProgram === 'claude') {
+        if (pickFirstString(payload.type) !== 'assistant') {
+            return null;
+        }
+        const message = toPlainObject(payload.message);
+        const content = Array.isArray(message.content) ? message.content : [];
+        const text = content
+            .filter(item => item && typeof item === 'object' && item.type === 'text')
+            .map(item => collectStructuredText(item))
+            .filter(Boolean)
+            .join('\n')
+            .trim();
+        if (!text) {
+            return null;
+        }
+        return { text, reset: true };
+    }
+    if (agentProgram === 'gemini' || agentProgram === 'opencode') {
+        const eventType = pickFirstString(payload.type);
+        if (eventType !== 'message') {
+            return null;
+        }
+        const role = pickFirstString(payload.role);
+        if (role !== 'assistant') {
+            return null;
+        }
+        const text = collectStructuredText(payload.content);
+        if (!text) {
+            return null;
+        }
+        if (payload.delta === true) {
+            return { text, reset: false };
+        }
+        return { text, reset: true };
+    }
+    return null;
+}
+
 function prepareCodexTraceEvent(payload) {
     if (!payload || typeof payload !== 'object') {
         return null;
@@ -2281,6 +2323,7 @@ async function execAgentInWebContainerStream(ctx, state, sessionRefOrContainerNa
         const structuredTraceState = {
             toolNamesById: new Map()
         };
+        let contentDeltaAccumulator = '';
         function appendChunk(chunk, target) {
             if (!chunk) return;
             const text = chunk.toString('utf-8');
@@ -2318,6 +2361,18 @@ async function execAgentInWebContainerStream(ctx, state, sessionRefOrContainerNa
                             traceEvent
                         });
                     });
+                    const deltaContent = extractContentDeltaFromPayload(agentProgram, payload, structuredTraceState);
+                    if (deltaContent !== null) {
+                        if (deltaContent.reset) {
+                            contentDeltaAccumulator = deltaContent.text;
+                        } else {
+                            contentDeltaAccumulator += deltaContent.text;
+                        }
+                        onEvent({
+                            type: 'content_delta',
+                            content: contentDeltaAccumulator
+                        });
+                    }
                     return;
                 }
                 if (agentProgram === 'codex' && (/^OpenAI Codex\b/.test(rawLine) || /^tokens used\b/i.test(rawLine))) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xcanwin/manyoyo",
-    "version": "5.7.4",
+    "version": "5.7.7",
     "imageVersion": "1.9.0-common",
     "playwrightCliVersion": "0.1.1",
     "description": "AI Agent CLI Security Sandbox for Docker and Podman",