@xcanwin/manyoyo 5.7.14 → 5.8.0

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;
 
@@ -400,6 +403,10 @@ textarea:focus-visible {
     resize: vertical;
 }
 
+.agent-template-modal {
+    width: min(760px, calc(100vw - 24px));
+}
+
 .session-head {
     display: flex;
     justify-content: space-between;
@@ -546,8 +553,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 +567,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 {
@@ -1631,14 +1585,36 @@ details.trace-card > .trace-card-summary {
     margin-bottom: 10px;
 }
 
+.composer-toolbar-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: auto;
+}
+
 .composer-mode-switch {
     display: inline-flex;
     gap: 8px;
 }
 
-.composer-toolbar-tip {
+.toolbar-mini-btn {
+    padding: 7px 12px;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.toolbar-chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    padding: 7px 12px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: var(--panel-soft);
     color: var(--muted);
     font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
 }
 
 .composer-inner {
@@ -1883,8 +1859,10 @@ details.trace-card > .trace-card-summary {
         align-items: flex-start;
     }
 
-    .composer-toolbar-tip {
-        display: none;
+    .composer-toolbar-meta {
+        width: 100%;
+        justify-content: space-between;
+        margin-left: 0;
     }
 
     .composer-mode-switch {

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">
@@ -105,7 +105,10 @@
                                 <button type="button" id="activityAgentBtn" class="secondary is-active">Agent</button>
                                 <button type="button" id="activityCommandBtn" class="secondary">命令</button>
                             </div>
-                            <div class="composer-toolbar-tip">活动页支持 Agent 提示词和容器命令两种输入。</div>
+                            <div class="composer-toolbar-meta">
+                                <button type="button" id="agentTemplateBtn" class="secondary toolbar-mini-btn">CLI · —</button>
+                                <span id="activityModelChip" class="toolbar-chip" aria-live="polite">模型 · —</span>
+                            </div>
                         </div>
                         <div class="composer-inner">
                             <textarea id="commandInput" placeholder="输入容器命令，例如: ls -la"></textarea>
@@ -220,6 +223,31 @@
                 </div>
             </section>
         </div>
+
+        <div id="agentTemplateModal" class="modal-backdrop" hidden>
+            <section class="modal agent-template-modal" role="dialog" aria-modal="true" aria-labelledby="agentTemplateTitle">
+                <header class="modal-header">
+                    <h2 id="agentTemplateTitle">设置 CLI / Agent 模板</h2>
+                    <button type="button" id="agentTemplateCancelBtn" class="secondary">关闭</button>
+                </header>
+                <div class="modal-body">
+                    <div id="agentTemplateTip" class="modal-tip"></div>
+                    <label class="text-block">容器默认 agentPromptCommand
+                        <textarea id="containerAgentPromptEditor" placeholder="例如 codex exec --skip-git-repo-check {prompt}"></textarea>
+                    </label>
+                    <div id="agentTemplateOverrideGroup">
+                        <label class="text-block">当前 AGENT 覆盖模板
+                            <textarea id="agentPromptOverrideEditor" placeholder="留空则继承容器默认模板"></textarea>
+                        </label>
+                    </div>
+                    <div id="agentTemplateError" class="modal-error" hidden></div>
+                </div>
+                <footer class="modal-footer">
+                    <button type="button" id="agentTemplateResetBtn" class="secondary">恢复当前值</button>
+                    <button type="button" id="agentTemplateSaveBtn">保存</button>
+                </footer>
+            </section>
+        </div>
     </div>
 
     <script src="/app/vendor/xterm.js"></script>