merge: 合并 Agent 面板 UI 优化 PR #624

web/src/components/canvas/canvas-cloud-agent.css

@@ -388,6 +388,21 @@
     scroll-padding-block: var(--space-5);
 }
 
+/*
+ * 过程内容的公共轴：正文的左边缘就是这条线，过程标记（星标、工具左轨、时间线标记）
+ * 一律挂在轴上居中。轴由星标几何推导，不是拍出来的数：星标中心 = 思考缩进 + 摘要内边距
+ * + 图标半宽；工具左轨用 -0.5px 让 1px 的线居中在轴上。改任一项，三处会一起跟着走。
+ */
+.agent-conversation-messages {
+    --agent-axis: 22px;
+    --agent-thought-icon: 16px;
+    --agent-thought-gap: 9px;
+    --agent-summary-inset: 4px;
+    --agent-timeline-marker: 24px;
+    --agent-activity-inset: 8px;
+    padding-left: var(--agent-axis);
+}
+
 .agent-conversation-messages > * + * {
     margin-top: var(--space-4);
 }
@@ -669,6 +684,11 @@
     .agent-context-panel-foot { display: grid; }
 
     .agent-welcome-actions button { padding-inline: var(--space-2); }
+    /* 窄面板把公共轴收细，星标与左轨仍压在同一条线上，不吃正文宽度。 */
+    .agent-conversation-messages {
+        --agent-axis: 16px;
+        --agent-activity-inset: var(--space-1);
+    }
 }
 
 @media (max-width: 639px) {
@@ -838,6 +858,14 @@
     --agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
 }
 
+/*
+ * 看图（canvas_inspect_image）：唯一会把图片字节真交给模型的档位，用主题强调色把它与
+ * "读清单 / 写画布"分开。取色走面板注入的 --agent-accent，不写字面值。
+ */
+.agent-tool-row--vision {
+    --agent-tool-accent: var(--agent-accent, var(--foreground));
+}
+
 .agent-tool-header {
     display: flex;
     min-width: 0;
@@ -933,6 +961,155 @@
     .agent-tool-action-link { transition: none; }
 }
 
+/*
+ * 操作记录折叠行：一轮运行动辄十几条工具记录，逐条铺开会把正文挤出可视区。
+ * 默认只报最新一步，点击展开完整记录；失败时整行转红并默认展开（见 AgentOperationFeed）。
+ * 类别徽标复用工具卡的 chip（.agent-tool-category），所以这里要给出 accent 默认值。
+ */
+.agent-operation-feed {
+    --agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
+    /* 层级第二档：左轨与正文左边缘同轴（见 .agent-conversation-messages 的公共轴），
+       轨道把"一连串动作"拢成一条活动流，内容落在轨的右侧。 */
+    margin-left: -0.5px;
+    border-left: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    padding-left: var(--agent-activity-inset, 8px);
+    min-width: 0;
+}
+
+/* 看图是唯一的"画面"档，给它主题强调色，和清单/写画布区分开（不写字面颜色）。 */
+.agent-operation-feed[data-agent-category="vision"] {
+    --agent-tool-accent: var(--agent-accent, var(--foreground));
+}
+
+.agent-operation-toggle {
+    display: flex;
+    min-width: 0;
+    max-width: 100%;
+    align-items: center;
+    gap: var(--space-2);
+    border: 0;
+    border-radius: 9px;
+    background: transparent;
+    padding: 4px var(--space-2) 4px var(--space-1);
+    color: color-mix(in srgb, var(--agent-ink, currentColor) 72%, transparent);
+    font-size: var(--fs-caption);
+    line-height: 18px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+        background-color 140ms ease,
+        color 140ms ease;
+}
+
+.agent-operation-toggle:hover {
+    background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 4%, transparent));
+    color: var(--agent-ink, var(--foreground));
+}
+
+.agent-operation-toggle:focus-visible {
+    outline: 2px solid var(--agent-focus-ring, var(--foreground));
+    outline-offset: 1px;
+}
+
+.agent-operation-latest {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/*
+ * 流光：把文字本身当渐变蒙版，让一道高光扫过。底色与高光都从 --agent-ink 派生——不能用
+ * currentColor，因为开启 background-clip 后 color 是 transparent，会自指成空。
+ * 动画只挂在 .is-live 上：面板按"末尾段 + 还在跑"下发，任务完成流光立即停。
+ */
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+    .agent-operation-latest {
+        background-image: linear-gradient(
+            100deg,
+            color-mix(in srgb, var(--agent-operation-ink, var(--agent-ink, currentColor)) 74%, transparent) 0%,
+            color-mix(in srgb, var(--agent-operation-ink, var(--agent-ink, currentColor)) 74%, transparent) 42%,
+            var(--agent-operation-ink, var(--agent-ink, currentColor)) 50%,
+            color-mix(in srgb, var(--agent-operation-ink, var(--agent-ink, currentColor)) 74%, transparent) 58%,
+            color-mix(in srgb, var(--agent-operation-ink, var(--agent-ink, currentColor)) 74%, transparent) 100%
+        );
+        background-position: 100% 0;
+        background-size: 240% 100%;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+    }
+
+    .agent-operation-feed.is-live .agent-operation-latest {
+        animation: agent-operation-sheen 3.6s linear infinite;
+    }
+}
+
+/* 失败/被拒的一步：折叠行跟工具卡同一套红，不用主题色盖掉语义。 */
+.agent-operation-feed.is-failed .agent-operation-latest {
+    --agent-operation-ink: #dc2626;
+}
+
+.agent-operation-count {
+    flex: 0 0 auto;
+    border-radius: 999px;
+    background: var(--agent-surface-soft, color-mix(in srgb, var(--foreground) 6%, transparent));
+    padding: 1px var(--space-2);
+    color: color-mix(in srgb, var(--agent-ink, currentColor) 62%, transparent);
+    font-size: var(--fs-tiny);
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+}
+
+.agent-operation-chevron {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 auto;
+    opacity: 0.55;
+    transition: transform 180ms ease;
+}
+
+.agent-operation-feed.is-open .agent-operation-chevron {
+    transform: rotate(180deg);
+}
+
+.agent-operation-list {
+    margin-top: 2px;
+}
+
+.agent-operation-list > * + * {
+    margin-top: var(--space-1);
+}
+
+/*
+ * 展开后的每一步不再重复状态图标（勾/叉）：状态与错误已经由卡片文字与折叠行颜色表达，
+ * 一列彩色勾只会把"记录"读成"成绩单"。失败那一步的文字仍是红的（AgentToolCard 内联色）。
+ */
+.agent-operation-list .agent-tool-status {
+    display: none;
+}
+
+@keyframes agent-operation-sheen {
+    from {
+        background-position: 130% 0;
+    }
+    to {
+        background-position: -30% 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    /* 与 .is-live 规则同特异性，否则关不掉动画。 */
+    .agent-operation-feed.is-live .agent-operation-latest {
+        animation: none;
+        background-position: 0% 0;
+    }
+    .agent-operation-toggle,
+    .agent-operation-chevron {
+        transition: none;
+    }
+}
+
 .agent-composer-prompt-scroll {
     min-height: 60px;
     max-height: min(240px, 34vh);
@@ -1143,9 +1320,35 @@
  * 比工具日志更安静、比正文更有层次。使用当前画布主题的 accent，避免
  * 固定紫色的 AI 默认样式，同时把实时状态、摘要内容和展开动作分开。
  */
+/*
+ * 信息层级：正文 / 工具调用 / 模型思考 三段只靠「位置 + 字号 + 对比度」分层，
+ * 不靠圆底图标或品牌 glyph。
+ *
+ *   正文（结论）   从公共轴开始、14px、满对比 —— 主角
+ *   工具调用       左轨压在公共轴上（活动流），内容在轨右侧，12px、次对比
+ *   模型思考       星标居中在公共轴上，12px/11px、最淡 —— 过程里的旁白
+ */
 .agent-reasoning {
     min-width: 0;
-    color: color-mix(in srgb, var(--foreground) 64%, transparent);
+    /* 星标挂进旁注沟槽：中心落在公共轴上（正文左边缘）。 */
+    margin-left: calc(-1 * (var(--agent-thought-icon, 16px) / 2 + var(--agent-summary-inset, 4px)));
+    color: color-mix(in srgb, var(--foreground) 58%, transparent);
+}
+
+/*
+ * 时间线标记列（系统行 / 错误行 / 审批卡 / 上下文整理）：宽度与挂点都走公共轴 token。
+ */
+.agent-timeline-marker {
+    display: flex;
+    width: var(--agent-timeline-marker, 24px);
+    flex: 0 0 var(--agent-timeline-marker, 24px);
+    align-self: stretch;
+    justify-content: center;
+}
+
+/* 只有对话流里的标记向左挂半格：中心与星标、工具左轨共用同一条公共轴。 */
+.agent-conversation-messages .agent-timeline-marker {
+    margin-left: calc(-1 * (var(--agent-timeline-marker, 24px) / 2));
 }
 
 .agent-reasoning-card {
@@ -1166,11 +1369,12 @@
     display: flex;
     min-width: 0;
     align-items: center;
-    gap: 9px;
+    gap: var(--agent-thought-gap, 9px);
     cursor: pointer;
     list-style: none;
-    padding: 6px 4px;
-    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+    /* 内边距参与公共轴推导：改它，左轨会跟着一起挪（见 .agent-conversation-messages）。 */
+    padding: 6px var(--agent-summary-inset, 4px);
+    color: color-mix(in srgb, var(--foreground) 66%, transparent);
     user-select: none;
 }
 
@@ -1182,16 +1386,17 @@
     background: color-mix(in srgb, var(--agent-reasoning-accent) 4%, transparent);
 }
 
+/* 只留那颗星：圆底是上一版的装饰，去掉后与时间线标记同一种"无底图标"语言。 */
 .agent-reasoning-icon {
     display: grid;
-    width: 25px;
-    height: 25px;
-    flex: 0 0 25px;
+    width: var(--agent-thought-icon, 16px);
+    height: var(--agent-thought-icon, 16px);
+    flex: 0 0 var(--agent-thought-icon, 16px);
     place-items: center;
     border: 0;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--agent-reasoning-accent) 10%, transparent);
-    color: var(--agent-reasoning-accent);
+    border-radius: 0;
+    background: transparent;
+    color: color-mix(in srgb, var(--agent-reasoning-accent) 82%, var(--foreground));
 }
 
 .agent-reasoning-copy {
@@ -1205,9 +1410,9 @@
 .agent-reasoning-title {
     min-width: 0;
     overflow: hidden;
-    color: color-mix(in srgb, var(--foreground) 78%, transparent);
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
     font-size: 12px;
-    font-weight: 650;
+    font-weight: 600;
     line-height: 17px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1216,7 +1421,7 @@
 .agent-reasoning-subtitle {
     min-width: 0;
     overflow: hidden;
-    color: color-mix(in srgb, var(--foreground) 43%, transparent);
+    color: color-mix(in srgb, var(--foreground) 38%, transparent);
     font-size: 11px;
     line-height: 16px;
     text-overflow: ellipsis;
@@ -1277,13 +1482,14 @@
     gap: 0;
     overflow: auto;
     border-top: 0;
-    padding: 4px 10px 10px 38px;
+    /* 与摘要的标题左对齐：摘要内边距 + 星标列 + 摘要 gap。 */
+    padding: 4px 10px 10px calc(var(--agent-summary-inset, 4px) + var(--agent-thought-icon, 16px) + var(--agent-thought-gap, 9px));
     scrollbar-gutter: stable;
 }
 
 .agent-reasoning-text {
     min-width: 0;
-    color: color-mix(in srgb, var(--foreground) 58%, transparent);
+    color: color-mix(in srgb, var(--foreground) 54%, transparent);
     font-size: 12px;
     line-height: 1.75;
     white-space: pre-wrap;