From 071317f7ee48797e52d2d51fa7a130d57475255f Mon Sep 17 00:00:00 2001 From: Jesse_Chen Date: Wed, 16 Sep 2026 08:23:50 +0000 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=8A=A0=E5=9B=9E=20agent=20?= =?UTF-8?q?=E5=A4=B4=E5=83=8F=EF=BC=8C=E8=8C=83=E5=9B=B4=E5=B8=A6=E8=B0=83?= =?UTF-8?q?=E6=B7=B1=E5=88=B0=E7=9C=8B=E5=BE=97=E8=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 产品真机走查： 1. agent 头像加回来（推翻 R3 的 D7）。R3 删它的理由是「一屏几十条时是重复度 最高的元素」，但没有它助手那一轮就没有视觉归属——生时校正面尤其明显， 旁白、题干、选项全是平铺文字。--assistant-content-inset 随之回到 「32px 头像 + 间隙」，追问 chip 与运行时间轴重新对齐正文。 2. 时间范围带用的是 --color-action-soft，那是给文字底色用的浅色调， 画在画布上几乎看不见——而它是整条轴上唯一必须一眼看到的标记。 改成 color-mix(--color-action-strong 32%, --color-canvas)。 测试 3369，fail 仍 31 且与基线逐条一致；四个路由标记不变。 未修：生时校正面顶部溢出。工作区在栅格里、没有脱离定位， chat-panel.is-rectification 仍是 46px + 1fr 两行，从代码上看不出 46px 顶栏为什么会消失，待产品确认截图是否裁切。 Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_0193vBv6w5MV2cifdTUu9H5P --- frontend/src/app/globals.css | 30 +++++++++++++------ frontend/src/components/chat-message-row.tsx | 9 ++++++ .../components/onboarding-chat-message.tsx | 2 ++ .../tests/rectification-agentic-entry.test.ts | 2 +- .../rectification-timeline-20260909.test.ts | 5 +++- 5 files changed, 37 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 512b592a..a558e1aa 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -357,7 +357,7 @@ button:disabled { cursor: default; opacity: .45; } .birth-time-assessment-progress > span { font-size: var(--type-body-sm); line-height: 1.55; text-wrap: pretty; word-break: auto-phrase; } .onboarding-inline-error { margin-left: 0; } -.message-assistant { align-items: flex-start; justify-content: flex-start; } +.message-assistant { align-items: flex-start; justify-content: flex-start; gap: var(--space-3); } .message-user { justify-content: flex-end; } .message-user .message-content { display: flex; flex-direction: column; align-items: flex-end; } .message-assistant .message-content { width: auto; max-width: none; flex: 1; } @@ -1055,10 +1055,9 @@ button:disabled { cursor: default; opacity: .45; } .rectification-entry-error { grid-column: 1 / -1; margin: 0; } .message-list { - /* The assistant reply starts at the column edge now; the 32px avatar and - its gap are gone, so anything that used to line up beside it (follow-up - chips, the run timeline) lines up with the text itself. */ - --assistant-content-inset: 0px; + /* Follow-up chips and the run timeline line up with the assistant's text, + which starts past the avatar and its gap. */ + --assistant-content-inset: calc(32px + var(--space-3)); margin: 0 auto; width: min(900px, 100%); padding: var(--space-8) var(--space-8) var(--space-16); @@ -1071,6 +1070,8 @@ button:disabled { cursor: default; opacity: .45; } color: var(--color-ink-secondary); } .message { display: flex; padding: var(--space-2) 0; } +/* Restored after real-device review; see chat-message-row.tsx for why. */ +.agent-avatar { width: 32px; height: 32px; display: block; flex: 0 0 32px; margin-top: var(--space-2); border-radius: 50%; background: var(--color-canvas) url("/jyotish-logo.png") center / contain no-repeat; box-shadow: 0 0 0 1px var(--ring-hairline); } .message-content { min-width: 0; max-width: min(80%, 680px); } .message-bubble { overflow: hidden; border: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-canvas-muted); } .message-assistant .message-bubble { border-radius: 0; background: transparent; padding: var(--space-3) 0; } @@ -2240,6 +2241,14 @@ button.nav-rail-identity:hover { background: var(--sidebar-accent); } gap: var(--space-4); } +.conversation:not(.is-empty):not(.is-rectification) .message-assistant .agent-avatar { + width: 30px; + height: 30px; + flex-basis: 30px; + margin-top: 2px; + box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 82%, transparent); +} + .conversation:not(.is-empty):not(.is-rectification) .message-assistant .message-bubble { padding: 0 0 var(--space-2); @@ -2531,9 +2540,9 @@ button.nav-rail-identity:hover { background: var(--sidebar-accent); } The pending state keeps the same box for the same reason. */ .rectification-workspace__chat { --rectification-timeline-height: 64px; - /* Same token as `.message-list`. The bar sits outside the transcript, so it - cannot inherit that custom property from there. */ - --assistant-content-inset: 0px; + /* Same token as `.message-list`: avatar 32px + gap. The bar sits outside the + transcript, so it cannot inherit that custom property from there. */ + --assistant-content-inset: calc(32px + var(--space-3)); } .rectification-timeline { height: var(--rectification-timeline-height); @@ -2614,7 +2623,10 @@ button.nav-rail-identity:hover { background: var(--sidebar-accent); } width: 100%; height: 11px; border-radius: 2px; - background: var(--color-action-soft); + /* Was --color-action-soft, which is a tint for text backgrounds: on the + canvas it left the range band all but invisible. This is the one mark + that has to read at a glance. */ + background: color-mix(in srgb, var(--color-action-strong) 32%, var(--color-canvas)); transform-origin: left center; will-change: transform; transition: transform 420ms cubic-bezier(.32, .72, .24, 1); diff --git a/frontend/src/components/chat-message-row.tsx b/frontend/src/components/chat-message-row.tsx index 9f6677da..bf367ee3 100644 --- a/frontend/src/components/chat-message-row.tsx +++ b/frontend/src/components/chat-message-row.tsx @@ -31,6 +31,14 @@ function motionPreferred() { if (motionPreferred()) prefetchOnIdle(loadGsap); +/* Restored after real-device review: R3 removed it on the grounds that it was + the most repeated element in a long transcript, but without it the assistant + turn has no visual owner — in the rectification surface especially, where + narration, a question and its options all stack as plain text. */ +export function AgentAvatar() { + return