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

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

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

<context>
@.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
</context>

<tasks>

<task type="auto" tdd="false">
  <name>Task 1: 全局视觉基线收敛（UI-01, UI-03）</name>
  <files>
    frontend/src/styles/globals.css
    frontend/src/app/workspace/layout.tsx
    frontend/src/app/workspace/chats/[thread_id]/layout.tsx
  </files>
  <behavior>
    - 全局字体、字号、行高、间距尺度与旧视觉基线一致。
    - workspace 主容器和聊天页容器层级一致，避免局部页面漂移。
    - 不引入影响业务逻辑的数据或路由变更。
  </behavior>
  <action>
    在全局样式和 layout 层建立统一视觉基线：先定义/收敛 token，再修正容器级 spacing 与层级；明确只改样式与结构包装，不触碰核心行为逻辑。
  </action>
  <verify>
    <automated>cd frontend &amp;&amp; npm run lint</automated>
  </verify>
  <done>
    workspace 全局视觉骨架一致，可作为组件级对齐基础。
  </done>
</task>

<task type="auto" tdd="false">
  <name>Task 2: 核心工作区组件视觉对齐（UI-01, UI-03）</name>
  <files>
    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
  </files>
  <behavior>
    - workspace header/sidebar/content 层级与视觉权重符合旧版感知。
    - message list/item 的可读性、间距、层级和状态样式统一。
    - 组件视觉变化在主页面之间保持一致。
  </behavior>
  <action>
    分组件执行视觉对齐：先容器与导航，再消息列表与消息项，最后统一细节（边距、圆角、分隔、颜色对比）。必要时提取复用样式，避免重复样式漂移。
  </action>
  <verify>
    <automated>cd frontend &amp;&amp; npm run lint</automated>
  </verify>
  <done>
    核心组件视觉风格一致，且不存在明显的页面间样式割裂。
  </done>
</task>

<task type="auto" tdd="true">
  <name>Task 3: 交互回归护栏与关键场景验证（UI-02）</name>
  <files>
    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
  </files>
  <behavior>
    - chat 输入、发送、历史加载、线程切换等关键交互不回归。
    - 视觉调整不影响 artifacts/thread reuse 的核心流程。
    - 关键路径在 E2E 可执行时能通过，不可执行时有明确失败信号。
  </behavior>
  <action>
    对关键交互路径建立最小回归护栏：补充/修正与视觉改造耦合的 E2E 断言，确保 UI 层改动不改变行为结果；并对高风险页面做手动冒烟清单。
  </action>
  <verify>
    <automated>cd frontend &amp;&amp; npm run test:e2e -- welcome-and-routing.spec.ts</automated>
  </verify>
  <done>
    视觉改动后的关键交互行为保持稳定，可安全衔接后续阶段。
  </done>
</task>

</tasks>

<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>

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

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

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