deerflow2/.planning/phases/03-legacy-visual-alignment-pass/03-PLAN.md

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
03-legacy-visual-alignment-pass	01	execute	1	02-thread-and-skills-logic-reconciliation	frontend/src/styles/globals.css frontend/src/app/workspace/layout.tsx frontend/src/app/workspace/chats/[thread_id]/layout.tsx frontend/src/components/workspace/workspace-container.tsx frontend/src/components/workspace/workspace-header.tsx frontend/src/components/workspace/workspace-sidebar.tsx frontend/src/components/workspace/messages/message-list.tsx frontend/src/components/workspace/messages/message-list-item.tsx frontend/src/components/workspace/chats/chat-box.tsx frontend/src/components/workspace/input-box.tsx	true	UI-01 UI-02 UI-03	truths artifacts key_links workspace 的 typography、spacing、hierarchy 与旧视觉基线对齐。 视觉改动不改变 chat/thread/artifact 的既有行为与数据流。 全局样式和核心 workspace 页面风格保持一致，无局部割裂。 path provides frontend/src/styles/globals.css 全局排版、间距与基础视觉变量统一 path provides frontend/src/app/workspace/layout.tsx workspace 主骨架层级与容器结构对齐 path provides frontend/src/components/workspace/workspace-header.tsx 头部视觉语义与旧版一致 path provides frontend/src/components/workspace/workspace-sidebar.tsx 侧栏视觉层级与交互样式对齐 path provides frontend/src/components/workspace/messages/message-list-item.tsx 消息项视觉层级、间距和可读性一致 from to via pattern globals.css workspace components 全局 token + 基础样式约束 font-size|line-height|spacing|color from to via pattern workspace layout/header/sidebar chat/message/input 视觉层级和间距系统 container|panel|padding|gap

完成 Phase 3 的视觉对齐：在不改动核心逻辑行为的前提下，使 workspace 关键页面呈现与旧视觉基线一致。

Purpose: 落实 UI-01/UI-02/UI-03，确保后续 Phase 4 继续做逻辑稳定化时视觉基础已稳定。
Output: 全局样式与 workspace 关键组件视觉统一，且核心交互无回归。

@.planning/PROJECT.md @.planning/REQUIREMENTS.md @.planning/ROADMAP.md @.planning/phases/03-legacy-visual-alignment-pass/03-CONTEXT.md @.planning/phases/02-thread-and-skills-logic-reconciliation/02-SUMMARY.md @.planning/phases/02-thread-and-skills-logic-reconciliation/02-UAT.md @frontend/src/styles/globals.css @frontend/src/app/workspace/layout.tsx @frontend/src/components/workspace/workspace-container.tsx @frontend/src/components/workspace/workspace-header.tsx @frontend/src/components/workspace/workspace-sidebar.tsx Task 1: 全局视觉基线收敛（UI-01, UI-03） frontend/src/styles/globals.css frontend/src/app/workspace/layout.tsx frontend/src/app/workspace/chats/[thread_id]/layout.tsx - 全局字体、字号、行高、间距尺度与旧视觉基线一致。 - workspace 主容器和聊天页容器层级一致，避免局部页面漂移。 - 不引入影响业务逻辑的数据或路由变更。 在全局样式和 layout 层建立统一视觉基线：先定义/收敛 token，再修正容器级 spacing 与层级；明确只改样式与结构包装，不触碰核心行为逻辑。 cd frontend && npm run lint workspace 全局视觉骨架一致，可作为组件级对齐基础。 Task 2: 核心工作区组件视觉对齐（UI-01, UI-03） frontend/src/components/workspace/workspace-container.tsx frontend/src/components/workspace/workspace-header.tsx frontend/src/components/workspace/workspace-sidebar.tsx frontend/src/components/workspace/messages/message-list.tsx frontend/src/components/workspace/messages/message-list-item.tsx - workspace header/sidebar/content 层级与视觉权重符合旧版感知。 - message list/item 的可读性、间距、层级和状态样式统一。 - 组件视觉变化在主页面之间保持一致。 分组件执行视觉对齐：先容器与导航，再消息列表与消息项，最后统一细节（边距、圆角、分隔、颜色对比）。必要时提取复用样式，避免重复样式漂移。 cd frontend && npm run lint 核心组件视觉风格一致，且不存在明显的页面间样式割裂。 Task 3: 交互回归护栏与关键场景验证（UI-02） frontend/src/components/workspace/chats/chat-box.tsx frontend/src/components/workspace/input-box.tsx frontend/tests/e2e/welcome-and-routing.spec.ts frontend/tests/e2e/support/chat-helpers.ts - chat 输入、发送、历史加载、线程切换等关键交互不回归。 - 视觉调整不影响 artifacts/thread reuse 的核心流程。 - 关键路径在 E2E 可执行时能通过，不可执行时有明确失败信号。 对关键交互路径建立最小回归护栏：补充/修正与视觉改造耦合的 E2E 断言，确保 UI 层改动不改变行为结果；并对高风险页面做手动冒烟清单。 cd frontend && npm run test:e2e -- welcome-and-routing.spec.ts 视觉改动后的关键交互行为保持稳定，可安全衔接后续阶段。

<threat_model>

Trust Boundaries

Boundary	Description
global styles -> all workspace pages	全局样式变更会影响多页面，需防止非目标页面被破坏
visual refactor -> interaction surfaces	视觉重构可能影响点击区域、滚动行为和输入交互

STRIDE Threat Register

Threat ID	Category	Component	Disposition	Mitigation Plan
T-03-01	T (Tampering)	global style tokens	mitigate	统一 token 来源并限制覆盖范围，避免局部无意覆盖
T-03-02	D (Denial of Service)	chat input / list interaction	mitigate	对输入、发送、滚动与路由关键路径增加回归验证
T-03-03	I (Information Disclosure)	visual-only phase scope	accept	本阶段仅前端视觉改造，不引入新数据读取路径
T-03-04	R (Repudiation)	UI regressions without proof	mitigate	记录 E2E 结果与关键页面对照说明，便于审阅
</threat_model>

1. `lint` 通过，样式/组件改动无基础质量问题。 2. 关键 E2E 场景可执行时通过；不可执行时输出明确错误而非静默。 3. 手动抽查 workspace 关键页面视觉一致性（header/sidebar/chat/message/input）。

<success_criteria>

• UI-01：workspace 视觉风格（排版、间距、层级）与旧版基线一致。
• UI-02：视觉对齐不破坏 chat/thread/artifact 关键交互。
• UI-03：全局样式在主 workspace 页面保持一致。
  </success_criteria>

After completion, create `.planning/phases/03-legacy-visual-alignment-pass/03-SUMMARY.md`