From 8200a92beb3ad96c49502abbe9688ecbb10c0194 Mon Sep 17 00:00:00 2001 From: xiaosheng <73678111+xiaoshengbao@users.noreply.github.com> Date: Wed, 16 Sep 2026 11:03:54 +0800 Subject: [PATCH] =?UTF-8?q?fix(ai):=20=E7=B2=BE=E7=AE=80=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=B9=B6=E4=BC=98=E5=8C=96=E8=BF=87=E7=A8=8B?= =?UTF-8?q?=E4=B8=8E=E7=94=A8=E9=87=8F=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/css/agent.css | 125 ++++++++---------- .../chat/AgentContextCompaction.vue | 11 +- frontend/components/chat/AgentRun.vue | 69 +++++----- frontend/components/chat/AgentSubtasks.vue | 4 +- frontend/components/chat/AgentThreadList.vue | 12 +- frontend/components/chat/AgentToolCall.vue | 36 +++-- frontend/components/chat/AssistantThread.vue | 40 +++++- frontend/components/chat/ChatAgentPanel.vue | 16 ++- frontend/tests/agent-materials.test.js | 12 +- frontend/tests/agent-timeline.test.js | 103 ++++++++------- frontend/tests/agent-tool-errors.test.js | 55 ++++++-- frontend/tests/assistant-thread.test.js | 58 +++++++- frontend/tests/chat-agent.test.js | 23 +++- 13 files changed, 355 insertions(+), 209 deletions(-) diff --git a/frontend/assets/css/agent.css b/frontend/assets/css/agent.css index b9466838..d7379e78 100644 --- a/frontend/assets/css/agent.css +++ b/frontend/assets/css/agent.css @@ -11,7 +11,7 @@ .agent-thread-list > header { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:0 4px; margin-bottom:12px; } .agent-thread-list > header strong { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; } .agent-thread-list > header button, .agent-thread-list-heading button { color:var(--ag-muted); } -.agent-thread-list .agent-thread-new { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-size:13px; padding:9px; margin-bottom:10px; } +.agent-thread-list .agent-thread-new { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; font-size:14px; } .agent-thread-search { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--ag-border); border-radius:8px; color:var(--ag-muted); font-size:11px; } .agent-thread-search input { width:100%; min-width:0; border:0; outline:0; color:inherit; background:transparent; font:inherit; } .agent-thread-search:focus-within { outline:2px solid var(--ag-muted); outline-offset:1px; } @@ -44,8 +44,7 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-thread-error { color:#b95039; } .agent-thread-list > footer { display:flex; flex-direction:column; padding:12px 5px 0; gap:8px; border-top:1px solid var(--ag-border); font-size:12px; } .agent-thread-list > footer button { display:flex; align-items:center; gap:10px; text-align:left; } -.agent-thread-list > footer span { color:var(--ag-muted); font-size:10px; padding:0 8px; } -.agent-panel:not(.is-expanded) .agent-thread-list { position:absolute; inset:0 auto 0 0; width:min(280px,100%); z-index:12; box-shadow:8px 0 30px #0002; } +.agent-panel:not(.is-expanded) .agent-thread-list { position:absolute; inset:54px auto 0 0; width:min(280px,100%); z-index:12; box-shadow:8px 0 30px #0002; } .agent-context-label { font-size:10px; color:var(--ag-muted); white-space:nowrap; } .agent-loading { padding:10px 20px; font-size:12px; color:var(--ag-muted); } .agent-welcome-symbol { font-size:30px; } @@ -84,9 +83,17 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-follow[aria-pressed=true] { background:#079b5720; } .agent-workspace { display:flex; flex:1; min-height:0; min-width:0; } .agent-reading { display:flex; flex-direction:column; flex:1; min-height:0; min-width:0; position:relative; } -.agent-panel.is-expanded .agent-reading { max-width:800px; margin:0 auto; width:100%; } -.agent-panel.is-expanded .agent-workspace.has-source .agent-reading { max-width:800px; } +.agent-panel.is-expanded .agent-reading { max-width:none; width:100%; } +.agent-panel.is-expanded .agent-message-list, .agent-panel.is-expanded .agent-composer { max-width:800px; width:100%; margin-inline:auto; box-sizing:border-box; } .agent-conversation { flex:1; min-height:0; overflow-y:auto; padding:24px 20px; scrollbar-width:thin; overflow-wrap:anywhere; overscroll-behavior:contain; } +/* 保留滚动条宽度,显隐时正文不跳动;只在用户向下滚动时显示滑块。 */ +.agent-panel.is-expanded .agent-conversation { scrollbar-color:transparent transparent; } +.agent-panel.is-expanded .agent-conversation.is-scrolling-down { scrollbar-color:var(--scrollbar-thumb,#a3a3a3) transparent; } +.agent-panel.is-expanded .agent-conversation::-webkit-scrollbar { width:6px; height:6px; } +.agent-panel.is-expanded .agent-conversation::-webkit-scrollbar-track { background:transparent; } +.agent-panel.is-expanded .agent-conversation::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; } +.agent-panel.is-expanded .agent-conversation.is-scrolling-down::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb,#a3a3a3); } +.agent-panel.is-expanded .agent-conversation::-webkit-scrollbar-button { display:none; width:0; height:0; } .agent-welcome { padding:28px 0; } .agent-welcome h3 { font-size:17px; font-weight:600; margin:14px 0 7px; } .agent-welcome p { color:var(--ag-muted); font-size:11px; margin-bottom:25px; } @@ -100,9 +107,8 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-author > i { color:#079b57; } .agent-author > span { margin-left:auto; font-size:10px; color:var(--ag-muted); font-weight:400; font-variant-numeric:tabular-nums; } .agent-status { color:#079b57; display:flex; gap:7px; align-items:center; font-size:11px; } -.agent-wait-note { color:var(--ag-muted); font-size:11px; margin:10px 0; } -.agent-activity, .agent-usage { color:var(--ag-muted); font-size:10px; margin:14px 0; } -.agent-activity summary, .agent-usage summary { cursor:pointer; } +.agent-activity { color:var(--ag-muted); font-size:10px; margin:14px 0; } +.agent-activity summary { cursor:pointer; } .agent-activity summary span { float:right; } .agent-activity ol { list-style:none; padding:8px 0; margin:0; max-height:240px; overflow-y:auto; } .agent-activity li { display:flex; align-items:baseline; gap:7px; padding:5px 0; } @@ -138,44 +144,42 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-process-toggle small { margin-left:2px; white-space:nowrap; font-size:12px; } .agent-process-toggle > i:last-child { font-size:10px; } .agent-process { padding:0; margin:0 0 4px; } -.agent-tool { margin:2px -12px; padding:0 12px; border-radius:9px; color:var(--ag-muted); font-size:14px; } +.agent-tool { margin:2px 0; padding:0; border-radius:9px; color:var(--ag-muted); font-size:14px; } .agent-tool[open] { background:var(--ag-soft); } -.agent-tool > summary { display:flex; align-items:center; gap:12px; list-style:none; min-height:40px; padding:8px 0; cursor:pointer; min-width:0; } -.agent-tool > summary::-webkit-details-marker, .agent-tool-attempt-row::-webkit-details-marker { display:none; } -.agent-tool > summary > i:first-child { width:16px; flex:none; font-size:15px; text-align:center; } +.agent-tool > .agent-tool-heading { display:flex; align-items:center; gap:12px; list-style:none; min-height:32px; padding:4px 0; cursor:pointer; min-width:0; } +.agent-tool > .agent-tool-heading::-webkit-details-marker, .agent-tool-attempt-row::-webkit-details-marker { display:none; } +.agent-tool > .agent-tool-heading > i:first-child { width:16px; flex:none; font-size:15px; text-align:center; } .agent-tool-title { display:flex; align-items:center; gap:10px; min-width:0; color:var(--app-text-primary,#25352d); } .agent-tool-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .agent-tool-query, .agent-tool-count { font-size:12px; color:var(--ag-muted); padding:1px 8px; border-radius:8px; background:color-mix(in srgb,var(--ag-muted) 7%,var(--ag-bg)); line-height:1.6; } .agent-tool-query { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; } .agent-tool-count { flex:none; white-space:nowrap; } .agent-tool-summary { font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; } -.agent-tool.is-grouped > summary > .agent-tool-summary { margin-left:auto; } -.agent-tool > summary > .agent-tool-outcome { flex:none; font-size:12px; white-space:nowrap; } -.agent-tool > summary > .agent-tool-chevron { flex:none; font-size:10px; width:10px; transition:transform .15s; } -.agent-tool[open] > summary > .agent-tool-chevron { transform:rotate(-90deg); } -.agent-tool > summary:hover { color:var(--app-text-primary,#25352d); } -.agent-tool summary:focus-visible, .agent-run-metadata > summary:focus-visible { outline:2px solid var(--ag-muted); outline-offset:3px; border-radius:4px; } -.agent-tool.is-running > summary > i:first-child { color:var(--app-text-primary,#25352d); } -.agent-tool.is-failed > summary, .agent-tool.is-failed .agent-tool-label { color:#b95039; } -.agent-tool-detail { margin:0 0 0 28px; padding:2px 0 12px; font-size:12px; overflow-wrap:anywhere; } +.agent-tool.is-grouped > .agent-tool-heading > .agent-tool-summary { margin-left:auto; } +.agent-tool > .agent-tool-heading > .agent-tool-outcome { flex:none; font-size:12px; white-space:nowrap; } +.agent-tool > .agent-tool-heading > .agent-tool-chevron { flex:none; font-size:10px; width:10px; transition:transform .15s; } +.agent-tool[open] > .agent-tool-heading > .agent-tool-chevron { transform:rotate(-90deg); } +.agent-tool > .agent-tool-heading:hover { color:var(--app-text-primary,#25352d); } +.agent-tool summary:focus-visible { outline:2px solid var(--ag-muted); outline-offset:3px; border-radius:4px; } +.agent-tool.is-running > .agent-tool-heading > i:first-child { color:var(--app-text-primary,#25352d); } +.agent-tool.is-failed > .agent-tool-heading, .agent-tool.is-failed .agent-tool-label { color:#b95039; } +.agent-tool-detail { margin:0; padding:2px 0 12px; font-size:12px; overflow-wrap:anywhere; } .agent-tool-attempt + .agent-tool-attempt { margin-top:10px; } .agent-tool-detail header { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:6px; } .agent-tool-detail header strong { font-weight:500; color:var(--app-text-primary,#25352d); } .agent-tool-detail p { margin:4px 0; white-space:pre-wrap; } -.agent-tool-timeline { margin-left:34px; padding:3px 0 15px; } -.agent-tool-timeline .agent-tool-attempt { position:relative; padding:0 0 8px 20px; margin:0; } -.agent-tool-timeline .agent-tool-attempt:not(:last-child)::before { content:''; position:absolute; left:0; top:10px; bottom:-10px; width:1px; background:color-mix(in srgb,var(--ag-muted) 30%,transparent); } +.agent-tool-timeline { margin-left:0; padding:3px 0 15px; } +.agent-tool-timeline .agent-tool-attempt { position:relative; padding:0 0 8px; margin:0; } .agent-tool-timeline .agent-tool-attempt:last-child { padding-bottom:0; } .agent-tool-attempt-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; list-style:none; cursor:pointer; min-height:28px; line-height:1.8; border-radius:4px; } .agent-tool-attempt-row strong { font-weight:400; min-width:72px; } -.agent-tool-attempt-row .agent-tool-node { position:absolute; top:8px; left:-4px; font-size:6px; color:color-mix(in srgb,var(--ag-muted) 55%,var(--ag-bg)); } .agent-tool-inspection[open] > summary { margin-bottom:8px; } .agent-tool-inspection[open] { padding-bottom:4px; } -/* 小节点下方展示本次操作,浅色面板与右下角状态呼应命令详情的阅读方式。 */ +/* 各次命令与详情共用左边缘,使用间距区分层次。 */ .agent-tool-attempt-row:hover { color:var(--app-text-primary); } .agent-attempt-chevron { margin-left:auto; flex:none; font-size:10px; align-self:center; transition:transform .15s ease; } .agent-tool-inspection[open] > .agent-tool-attempt-row .agent-attempt-chevron { transform:rotate(90deg); } -.agent-tool-inspection-panel { min-width:0; padding:10px 12px; border-radius:6px; background:var(--ag-soft); color:var(--ag-muted); line-height:1.75; } +.agent-tool-inspection-panel { min-width:0; padding:10px 0; border-radius:6px; background:var(--ag-soft); color:var(--ag-muted); line-height:1.75; } .agent-tool-inspection-panel > header { margin:0 0 8px; } .agent-tool-inspection-panel > header strong { color:inherit; font-weight:400; } .agent-tool-request { font-family:var(--font-mono,ui-monospace,SFMono-Regular,Consolas,monospace); font-size:12px; } @@ -189,7 +193,7 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-progress-note p { margin:0; } .agent-progress-note small, .agent-progress-note.is-superseded { color:var(--ag-muted); font-size:10px; } .agent-process-notice { color:var(--ag-muted); font-size:10px; margin:10px 0; } -.agent-supplement { margin:14px 0 14px 28px; padding:9px 12px; background:var(--ag-soft); border:1px solid var(--ag-border); border-radius:9px; } +.agent-supplement { margin:14px 0; padding:9px 0; background:var(--ag-soft); border:0; border-radius:0; } .agent-supplement p { margin:0; white-space:pre-wrap; } .agent-supplement small { color:#079b57; font-size:10px; } .agent-final-answer { padding-top:0; } @@ -217,7 +221,8 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-input-actions > .agent-effort-select { width:84px; flex-shrink:0; } .agent-input-actions .ui-select.is-plain .ui-select-trigger { gap:6px; padding:0 5px; font-size:11px; font-weight:400; height:28px; min-height:28px; } .agent-input-actions > button { flex-shrink:0; width:28px; height:28px; padding:0; color:var(--ag-muted); font-size:12px; } -.agent-input-actions .agent-send { margin-left:auto; color:#fff; background:#171717; width:28px; height:28px; border-radius:50%; padding:3px; font-size:14px; } +.agent-input-actions .agent-send { display:grid; place-items:center; margin-left:auto; color:#fff; background:#171717; width:28px; height:28px; border-radius:50%; padding:0; font-size:14px; line-height:1; } +.agent-stop-icon { display:block; width:12px; height:12px; border-radius:2px; background:currentColor; } .agent-input-actions .agent-send:hover { background:var(--app-text-secondary,#5f5f5f); } .agent-composer-settings { position:absolute; bottom:calc(100% - 4px); left:12px; right:12px; padding:12px; background:var(--ag-bg); border:1px solid var(--ag-border); border-radius:10px; box-shadow:0 -6px 28px #0001; z-index:5; font-size:12px; } .agent-composer-settings header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } @@ -272,7 +277,7 @@ html[data-theme="dark"] .agent-thread-management .is-destructive, html[data-them .agent-retrieval-label { display:block; margin-top:3px; color:var(--ag-muted); font-size:11px; } html[data-theme=dark] .agent-panel { --ag-bg:#222629; --ag-soft:#292e31; --ag-border:#383e42; --ag-muted:#a0a9ad; } @media(max-width:1000px) { .agent-panel { position:absolute; top:0; right:0; bottom:0; box-shadow:-8px 0 30px #0002; } } -@container (max-width:700px) { .agent-panel.is-expanded .agent-thread-list { position:absolute; inset:0 auto 0 0; width:232px; z-index:12; box-shadow:8px 0 30px #0002; } .agent-panel.is-expanded .agent-welcome { display:block; } .agent-panel.is-expanded .agent-welcome > button { margin:8px 0; min-height:0; } } +@container (max-width:700px) { .agent-panel.is-expanded .agent-thread-list { position:absolute; inset:54px auto 0 0; width:232px; z-index:12; box-shadow:8px 0 30px #0002; } .agent-panel.is-expanded .agent-welcome { display:block; } .agent-panel.is-expanded .agent-welcome > button { margin:8px 0; min-height:0; } } @container (max-width:380px) { .agent-context-label { display:none; } } @media(prefers-reduced-motion:reduce) { .agent-panel .fa-spin, .agent-shimmer { animation:none; } .agent-resizer::after, .agent-tool-chevron { transition:none!important; } } @@ -295,7 +300,6 @@ html[data-theme=dark] .agent-panel .agent-markdown .agent-ref[aria-expanded=true .agent-stream-status time { font-size:10px; opacity:.7; font-variant-numeric:tabular-nums; } .agent-status-dot { width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; animation:agent-status-pulse 1.6s ease-in-out infinite; } @keyframes agent-status-pulse { 50% { opacity:.3; } } -.agent-materials-link { display:block; color:var(--ag-muted); font-size:11px; margin:8px 0; text-decoration:underline; text-underline-offset:3px; } .agent-ref-unresolved { font-size:.85em; color:var(--ag-muted); } .agent-progress-note .agent-markdown > :first-child { margin-top:0; } .agent-progress-note .agent-markdown > :last-child { margin-bottom:0; } @@ -303,13 +307,6 @@ html[data-theme=dark] .agent-panel .agent-markdown .agent-ref[aria-expanded=true @media(prefers-reduced-motion:reduce) { .agent-status-dot { animation:none; } } .agent-process > .agent-progress-note:first-child { margin-top:0; } -.agent-run-metadata { color:var(--ag-muted); font-size:12px; margin:4px 0 18px; } -.agent-run-metadata > summary { display:flex; align-items:center; gap:12px; list-style:none; cursor:pointer; width:fit-content; max-width:100%; min-height:28px; } -.agent-run-metadata > summary::-webkit-details-marker { display:none; } -.agent-run-metadata > summary > i:first-child { width:16px; text-align:center; font-size:12px; } -.agent-run-metadata > summary > i:last-child { font-size:10px; } -.agent-run-metadata[open] > summary > i:first-child { transform:rotate(90deg); } -.agent-run-metadata[open] { padding-bottom:12px; } /* 句尾来源采用轻描边小胶囊;整颗换行,头像与编号始终保持一体。 */ .agent-markdown .agent-ref { display:inline-flex; align-items:center; justify-content:center; gap:3px; vertical-align:middle; box-sizing:border-box; min-width:22px; height:20px; min-height:20px; padding:1px 6px; margin:0 2px; border:1px solid #ccebdd; border-radius:999px; background:#f8fcfa; color:#078653; font-size:11px; font-weight:400; line-height:16px; font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer; } .agent-markdown .agent-ref:has(img) { padding-left:2px; } @@ -322,74 +319,60 @@ html[data-theme=dark] .agent-panel .agent-markdown .agent-ref:hover { background html[data-theme=dark] .agent-panel .agent-markdown .agent-ref:focus-visible { outline-color:#70d6a4; } html[data-theme=dark] .agent-panel .agent-markdown .agent-ref[aria-expanded=true] { background:#087c44; border-color:#70d6a4; } @container (max-width:480px) { - .agent-tool > summary { gap:9px; flex-wrap:wrap; } + .agent-tool > .agent-tool-heading { gap:9px; flex-wrap:wrap; } .agent-tool-title { gap:7px; flex:1; } .agent-tool-summary { font-size:11px; } - .agent-tool.is-grouped > summary > .agent-tool-summary { flex-basis:calc(100% - 28px); margin-left:25px; order:2; } + .agent-tool.is-grouped > .agent-tool-heading > .agent-tool-summary { flex-basis:100%; margin-left:0; order:2; } .agent-tool-label { white-space:normal; } .agent-tool-query { max-width:85px; } .agent-tool-attempt-row { column-gap:12px; } } -/* 执行前后共用轻量阅读轴,状态变化不替换卡片、边框或标题层级。 */ +/* 执行过程、工具及子命令共用左边缘,不使用阅读轴或逐层缩进。 */ .agent-process-panel { --ag-muted:color-mix(in srgb,var(--app-text-primary,#191919) 68%,var(--ag-bg)); width:100%; max-width:100%; background:transparent; border:0; border-radius:0; margin-bottom:18px; } .agent-process-panel > .agent-process-toggle { display:flex; width:fit-content; max-width:100%; margin:0; padding:4px 0!important; gap:8px; border:0; border-radius:4px; min-height:30px; background:transparent; } .agent-process-title { color:var(--ag-muted); font-weight:400; font-size:12px; white-space:nowrap; } .agent-process-toggle .agent-process-meta { margin:0; font-size:12px; font-weight:400; white-space:normal; } .agent-process-disclosure { display:none; } -.agent-process-body { margin:6px 0 0 7px; border-left:1px solid var(--ag-border); padding:2px 0 4px 10px; background:transparent; } +.agent-process-body { margin:6px 0 0; border:0; padding:2px 0 4px; background:transparent; } .agent-process-body.is-collapsed { margin:2px 0 0; padding:0; border:0; } -.agent-live-step { display:flex; align-items:baseline; gap:10px; margin:6px 8px; padding:5px 0; color:var(--ag-muted); font-size:12px; line-height:1.65; } +.agent-live-step { display:flex; align-items:baseline; gap:10px; margin:6px 0; padding:5px 0; color:var(--ag-muted); font-size:12px; line-height:1.65; } .agent-live-step > div { min-width:0; } .agent-live-caption { font-size:11px; margin-right:8px; color:var(--ag-muted); } .agent-live-step .agent-stream-status { display:inline; margin:0; color:var(--app-text-primary); font-size:13px; overflow-wrap:anywhere; } -.agent-live-hint { margin:3px 0 0; font-size:12px; } .agent-live-step > time { flex:none; font-size:11px; font-variant-numeric:tabular-nums; } -.agent-process-body .agent-tool { margin:2px 0; padding:0 8px; font-size:13px; } +.agent-process-body .agent-tool { margin:1px 0; padding:0; font-size:13px; } .agent-process-body .agent-tool-title { color:var(--ag-muted); } .agent-process-body .agent-tool[open] { background:var(--ag-bg); } -.agent-process-body .agent-tool > summary { gap:10px; } +.agent-process-body .agent-tool > .agent-tool-heading { gap:10px; } /* 公开进展按普通段落阅读,工具使用较轻的文字,不再给每段套小结标签或引用框。 */ -.agent-process-body .agent-progress-note { margin:16px 8px; padding:0; border:0; color:var(--app-text-primary); } -.agent-panel .agent-process-body .agent-progress-note .agent-markdown { font-size:14px; line-height:1.8; color:var(--app-text-primary); overflow-wrap:anywhere; } +.agent-process-body .agent-progress-note { margin:8px 0; padding:0; border:0; color:var(--app-text-primary); } +.agent-panel .agent-process-body .agent-progress-note .agent-markdown { font-size:14px; line-height:1.6; color:var(--app-text-primary); overflow-wrap:anywhere; } .agent-process-body .agent-progress-note.is-superseded { color:var(--ag-muted); } .agent-panel .agent-process-body .agent-progress-note.is-superseded .agent-markdown { color:var(--ag-muted); } .agent-progress-note > small { display:block; margin-top:6px; font-size:12px; } -.agent-process-body .agent-process-notice { margin:10px 8px; font-size:12px; line-height:1.65; } -.agent-stage-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:5px 8px; color:var(--ag-muted); font-size:12px; line-height:1.65; } +.agent-process-body .agent-process-notice { margin:10px 0; font-size:12px; line-height:1.65; } +.agent-stage-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:5px 0; color:var(--ag-muted); font-size:12px; line-height:1.65; } .agent-stage-row > i { width:14px; flex:none; text-align:center; font-size:10px; } .agent-stage-row > span { overflow-wrap:anywhere; } .agent-stage-row > small { font-size:11px; font-variant-numeric:tabular-nums; } .agent-stage-row .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .agent-process-body .agent-process:empty { display:none; } -.agent-process-body:has(.agent-process:empty) .agent-run-metadata { margin-top:0; padding-top:0; border-top:0; } -.agent-process-body .agent-run-metadata { margin:12px 8px 0; padding-top:10px; border-top:1px solid var(--ag-border); } -/* 执行过程底部直接显示 Token 用量,来源结果仍按需展开。 */ -.agent-metadata-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; } -.agent-metadata-actions > button { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 0; margin:0; font-size:12px; color:var(--ag-muted); text-decoration:none; } -.agent-metadata-actions > button i { flex:none; width:10px; text-align:center; font-size:10px; } -.agent-metadata-actions > button:hover { color:var(--app-text-primary); } -.agent-run-metadata button:focus-visible { outline:2px solid var(--ag-muted); outline-offset:3px; border-radius:4px; } -.agent-coverage-summary { margin:0 0 4px; line-height:1.7; } -.agent-run-metadata > .agent-usage { margin:6px 0; font-size:12px; font-variant-numeric:tabular-nums; } .agent-answer-heading { margin:0 0 12px; font-size:14px; line-height:1.5; font-weight:600; color:var(--app-text-primary); } -.agent-panel .agent-final-answer .agent-markdown { font-size:15px; line-height:1.85; } +.agent-panel .agent-final-answer .agent-markdown { font-size:14px; line-height:1.65; } @container (max-width:480px) { .agent-process-toggle .agent-process-meta { flex:1; min-width:0; text-align:left; } - .agent-process-body { padding-left:6px; } - .agent-process-body .agent-tool { padding:0 6px; } } -/* 回答辅助操作合为一行,说明仅在主动查看时占用正文空间。 */ +/* 复制和最终统计共用一行,窄侧栏中统计可横向滚动查看。 */ .agent-run .agent-result-actions { align-items:center; flex-wrap:wrap; gap:4px 12px; margin-top:8px; } +.agent-answer-footer { display:flex; align-items:center; gap:8px; width:100%; min-width:0; } +.agent-final-summary { min-width:0; overflow-x:auto; white-space:nowrap; color:var(--ag-muted); font-size:11px; line-height:28px; font-variant-numeric:tabular-nums; scrollbar-width:thin; } .agent-run .agent-result-actions button { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:2px 0; font-size:12px; white-space:nowrap; } .agent-run .agent-result-actions i { margin:0; } -.agent-run .agent-result-actions .agent-copy-action { justify-content:center; width:28px; margin-left:-6px; } -.agent-run .agent-result-actions .agent-coverage-action { padding-left:12px; border-left:1px solid var(--ag-border); border-radius:0; } -.agent-coverage-explanation { margin:6px 0 0; padding:4px 0 4px 12px; border-left:2px solid var(--ag-border); color:var(--ag-muted); font-size:12px; line-height:1.65; } -.agent-coverage-explanation p { margin:4px 0; } +.agent-run .agent-result-actions .agent-copy-action { justify-content:center; flex:none; width:28px; margin-left:-6px; } /* 会话状态与管理入口各占固定位置,悬停只改变颜色,不移动文字。 */ @@ -455,6 +438,9 @@ html[data-theme=dark] .agent-input-actions .agent-send { color:#fff; background: .agent-source-avatar { width:28px; height:28px; object-fit:cover; border-radius:50%; } .agent-avatar { position:relative; display:inline-grid; place-items:center; flex:none; width:28px; height:28px; overflow:hidden; border-radius:50%; background:var(--ag-soft); color:inherit; font-size:12px; } .agent-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } +.agent-header .agent-owner-avatar { width:28px; height:28px; border-radius:5px; margin-right:4px; } +.agent-owner { min-width:0; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } +.agent-thread-select .agent-thread-avatar { width:18px; height:18px; border-radius:3px; font-size:10px; } .agent-source-sender { display:flex; align-items:center; gap:8px; } .agent-source-sender small { flex:1; min-width:0; } .agent-image-ref { padding:1px 7px; } @@ -485,3 +471,6 @@ html[data-theme=dark] .agent-input-actions .agent-send { color:#fff; background: .agent-input-actions .agent-send { margin-left:4px; } .agent-message-list > .agent-message > .agent-user,.agent-message-list > .agent-message > .agent-reply { margin-bottom:0; } .agent-message-list { gap:24px; padding:20px; } + +.agent-tool > div.agent-tool-heading, div.agent-tool-attempt-row { cursor:default; } +.agent-tool > div.agent-tool-heading:hover, div.agent-tool-attempt-row:hover { color:inherit; } diff --git a/frontend/components/chat/AgentContextCompaction.vue b/frontend/components/chat/AgentContextCompaction.vue index 7d58145b..9a69b932 100644 --- a/frontend/components/chat/AgentContextCompaction.vue +++ b/frontend/components/chat/AgentContextCompaction.vue @@ -61,19 +61,19 @@ onUnmounted(() => { revision++ }) diff --git a/frontend/components/chat/AgentRun.vue b/frontend/components/chat/AgentRun.vue index 984b39f7..1aedcc29 100644 --- a/frontend/components/chat/AgentRun.vue +++ b/frontend/components/chat/AgentRun.vue @@ -1,7 +1,7 @@
-
AI 助手{{ run.stage || (run.status === 'queued' ? '等待开始处理' : '正在查找与分析') }}

{{ liveHint }}

这一步仍在处理中,可随时补充要求或停止。

+
AI 助手{{ run.stage || (run.status === 'queued' ? '等待开始处理' : '正在查找与分析') }}
-
-

已读取 {{ run.read_count || 0 }} 条

-

此轮未记录完整遍历进度,范围覆盖情况未知。

-

输入 {{ usagePending ? '待汇总' : (run.usage.input_tokens ?? '未知') }} · 输出 {{ usagePending ? '待汇总' : (run.usage.output_tokens ?? '未知') }} Token

-
-