@xcanwin/manyoyo 5.7.14 → 5.7.20

package/lib/web/frontend/app.css

@@ -14,6 +14,8 @@
     --line: #d9c7ad;
     --line-strong: #b59263;
     --line-soft: rgba(181, 146, 99, 0.26);
+    --tree-guide: rgba(181, 146, 99, 0.44);
+    --tree-guide-soft: rgba(181, 146, 99, 0.2);
 
     --text: #1f1a14;
     --muted: #6a5f52;
@@ -36,6 +38,7 @@
     --status-stopped-text: #9a5a09;
     --status-history-bg: #ece7df;
     --status-history-text: #645647;
+    --tree-history-text: #b7b0a7;
     --status-unknown-bg: #ece9ff;
     --status-unknown-text: #5a4bb0;
 
@@ -546,8 +549,8 @@ button.tree-toggle {
     padding: 10px 12px;
     display: flex;
     align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
+    justify-content: flex-start;
+    gap: 0;
 }
 
 button.tree-toggle:hover {
@@ -560,320 +563,267 @@ 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;
+.tree-node-block,
+.tree-node-children {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 8px;
 }
 
-.tree-toggle-meta {
-    color: var(--muted);
-    font-size: 11px;
-    line-height: 1.45;
-    word-break: break-word;
+.tree-node-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: stretch;
+    column-gap: 8px;
 }
 
-.tree-toggle-caret {
-    color: #8c7257;
-    font-size: 18px;
-    line-height: 1;
-    flex-shrink: 0;
-    transition: transform 140ms ease;
+.tree-node-row.tree-node-row-container {
+    position: relative;
+    grid-template-columns: auto minmax(0, 1fr);
 }
 
-.tree-toggle[aria-expanded="true"] .tree-toggle-caret {
-    transform: rotate(90deg);
+.tree-prefix {
+    min-height: 38px;
+    display: inline-flex;
+    align-items: stretch;
+    gap: 3px;
+    position: relative;
 }
 
-.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%);
+.tree-prefix-toggle {
+    position: relative;
+    width: 16px;
+    flex: 0 0 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.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;
+.tree-prefix-segment,
+.tree-prefix-branch {
+    position: relative;
+    width: 10px;
+    flex: 0 0 10px;
 }
 
-.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);
+.tree-prefix-branch::before,
+.tree-prefix-branch::after {
+    content: "";
+    position: absolute;
+    background: var(--tree-guide);
 }
 
-.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;
+.tree-prefix-branch::before {
+    left: 5px;
+    top: -6px;
+    bottom: 50%;
+    width: 1px;
 }
 
-.workbench-path-bar .tree-toggle-meta {
-    grid-column: 2;
-    grid-row: 2;
+.tree-prefix-branch.is-mid::before {
+    bottom: -6px;
 }
 
-.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);
+.tree-prefix-branch::after {
+    left: 5px;
+    top: 50%;
+    width: 9px;
+    height: 1px;
+    background: var(--tree-guide-soft);
 }
 
-.workbench-group-body {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-left: 14px;
-    padding-left: 12px;
-    border-left: 1px solid var(--line-soft);
+.tree-prefix-leaf {
+    position: relative;
+    width: 12px;
+    flex: 0 0 12px;
 }
 
-.workbench-group-body[hidden] {
-    display: none;
+.tree-prefix-leaf::before {
+    content: "";
+    position: absolute;
+    left: 1px;
+    top: 50%;
+    width: 10px;
+    height: 1px;
+    background: var(--tree-guide-soft);
+    transform: translateY(-0.5px);
 }
 
-.workbench-group-kicker,
-.container-card-kicker {
-    color: var(--muted);
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 0.7px;
-    text-transform: uppercase;
+.disclosure-toggle {
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    color: #8c7257;
+    background: transparent;
+    transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
 }
 
-.workbench-group-title,
-.container-card-title {
-    margin-top: 3px;
-    font-weight: 700;
-    font-size: 13px;
-    line-height: 1.45;
-    word-break: break-word;
+.disclosure-toggle svg {
+    width: 12px;
+    height: 12px;
+    display: block;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
 }
 
-.container-stack {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+.disclosure-toggle:hover {
+    transform: none;
+    color: var(--accent-strong);
+    background: rgba(196, 85, 31, 0.08);
 }
 
-.container-card {
-    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);
+.disclosure-toggle:active {
+    transform: none;
 }
 
-.container-card-head {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
+.disclosure-toggle[aria-expanded="true"] {
+    transform: rotate(90deg);
 }
 
-.container-toggle {
-    flex: 1;
-    min-width: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
+.disclosure-toggle[aria-expanded="true"]:hover {
+    transform: rotate(90deg);
+}
+
+.tree-node-button {
+    width: 100%;
+    text-align: left;
+    border: 1px solid rgba(181, 146, 99, 0.38);
+    background: rgba(255, 255, 255, 0.94);
     color: var(--text);
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
+    border-radius: 12px;
+    padding: 10px 11px;
 }
 
-button.container-toggle:hover,
-button.container-toggle:active {
+.tree-node-button:hover {
+    transform: none;
+    border-color: #d1aa7f;
+    background: #fff8ef;
+}
+
+.tree-node-button:active {
     transform: none;
-    background: transparent;
 }
 
-button.container-toggle:focus-visible {
+.tree-node-button: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;
+.tree-node-button.active {
+    border-color: #c68d5a;
+    background: #fff3e8;
+    box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px rgba(196, 85, 31, 0.14);
 }
 
-.container-title-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
+.tree-node-button.tree-node-tone-history .tree-node-title,
+.tree-node-button.tree-node-tone-history .tree-node-meta {
+    color: var(--tree-history-text);
 }
 
-.container-title-stack {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+.tree-node-block.has-active > .tree-node-row > .tree-node-button:not(.active) {
+    border-color: #c68d5a;
+    box-shadow: 0 0 0 2px rgba(196, 85, 31, 0.08);
 }
 
-.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);
+.tree-node-button-directory,
+.tree-node-button-container {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 242, 232, 0.98) 100%);
 }
 
-.sidebar-icon svg {
-    width: 18px;
-    height: 18px;
-    display: block;
+.tree-node-row-container .tree-node-button-container {
+    padding-right: 52px;
 }
 
-.container-card-meta {
+.tree-node-main {
+    min-width: 0;
     display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
+    flex-direction: column;
+    gap: 6px;
 }
 
-.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;
+.tree-node-title {
+    margin-top: 0;
     font-weight: 700;
-    line-height: 1.2;
-}
-
-.container-status-pill {
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+    font-size: 13px;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
 }
 
-.container-agent-badge {
-    background: rgba(15, 124, 114, 0.1);
-    border-color: rgba(15, 124, 114, 0.22);
-    color: var(--subaccent-strong);
+.tree-node-button-directory .tree-node-title,
+.tree-node-button-container .tree-node-title {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
 }
 
-.container-card-info {
+.tree-node-meta {
     color: #7b6d5d;
     font-size: 11px;
     line-height: 1.45;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    overflow-wrap: anywhere;
 }
 
-.add-agent-btn {
-    align-self: flex-start;
-    padding: 7px 11px;
+.tree-node-status {
+    font-weight: 700;
     font-size: 12px;
-    border-radius: 999px;
-    white-space: nowrap;
-    margin-bottom: 2px;
-}
-
-.agent-list {
-    display: flex;
-    flex-direction: column;
-    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);
+.tree-node-status.running {
+    color: var(--status-running-text);
 }
 
-.agent-list[hidden] {
-    display: none;
+.tree-node-status.stopped {
+    color: var(--status-stopped-text);
 }
 
-.agent-item {
-    text-align: left;
-    width: 100%;
-    border: 1px solid rgba(181, 146, 99, 0.38);
-    background: rgba(255, 255, 255, 0.94);
-    color: var(--text);
-    border-radius: 12px;
-    padding: 10px 11px;
-    animation: itemIn 220ms ease both;
-    animation-delay: calc(var(--item-index, 0) * 24ms);
+.tree-node-status.history {
+    color: var(--tree-history-text);
 }
 
-.agent-item:hover {
-    border-color: #d1aa7f;
-    background: #fff8ef;
+.tree-node-status.unknown {
+    color: var(--status-unknown-text);
 }
 
-.agent-item.active {
-    border-color: #c68d5a;
-    background: #fff3e8;
-    box-shadow: inset 3px 0 0 var(--accent), 0 0 0 2px rgba(196, 85, 31, 0.14);
+.tree-node-hover-menu {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(4px);
+    transition: opacity 140ms ease, transform 140ms ease;
 }
 
-.agent-name {
-    font-size: 13px;
-    font-weight: 700;
-    margin-bottom: 6px;
-    word-break: break-word;
+.tree-node-row-container:hover .tree-node-hover-menu,
+.tree-node-hover-menu:focus-within {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(-50%) translateX(0);
 }
 
-.agent-meta {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    font-size: 12px;
+.tree-node-menu-item {
+    padding: 6px 9px;
+    font-size: 11px;
+    border-radius: 999px;
+    white-space: nowrap;
+    box-shadow: 0 10px 22px rgba(44, 31, 15, 0.12);
 }
 
-.agent-time {
-    margin-top: 6px;
-    font-size: 11px;
-    color: #7b6d5d;
+.tree-node-children[hidden] {
+    display: none;
 }
 
 .dir-picker-modal {

package/lib/web/frontend/app.html

@@ -34,7 +34,7 @@
                 <span>工作台</span>
                 <span id="sessionCount">0 个</span>
             </div>
-            <div id="sessionList"></div>
+            <div id="sessionList" role="tree" aria-label="会话树"></div>
         </aside>
         <main class="main">
             <header class="header">

package/lib/web/frontend/app.js

@@ -2222,7 +2222,7 @@
                 }
             }
         }
-        renderSessions();
+        updateSidebarActiveSelection();
         syncUi();
         Promise.all([
             loadMessagesForSession(sessionName),
@@ -2310,173 +2310,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 +2563,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 +2623,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();
     }

package/package.json

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